The containing block of the root element also called the initial containing block is established by the user agent. In HTML, the root element is the html element, although some browsers may use body. Despite this rule, relatively positioned elements are still simply offset, not positioned with respect to the containing block described here, and statically positioned elements do not move from their place in the normal flow.
For nonroot elements that have a position value of absolute, the containing block is set to the nearest ances- tor of any kind that has a position value other than static.
This happens as follows: a. If the ancestor is inline-level, the containing block is set to the content edge of the ancestor. In left-to-right languages, the top and left of the containing block are the top and left content edges of the first box in the ancestor, and the bottom and right edges are the bot- tom and right content edges of the last box. In right- to-left languages, the right edge of the containing block corresponds to the right content edge of the first box, and the left is taken from the last box.
The top and bottom are the same. Layout of Absolutely Positioned Elements In the following sections, these terms are used: Shrink-to-fit Similar to calculating the width of a table cell using the automatic table layout algorithm. In general, the user agent attempts to find the minimum element width that will contain the content and wrap to multiple lines only if wrapping cannot be avoided.
Positioning 19 www. For nonreplaced elements, the steps used to determine hori- zontal layout are: 1. If all of left, width, and right are auto, first reset any auto values for margin-left and margin-right to 0.
Then, if direction is ltr, set left to the static position and apply the rule given in step 3c. Otherwise, set right to the static position and apply the rule given in step 3a. If none of left, width, and right is auto, pick the rule that applies from the following list: a. If both margin-left and margin-right are set to auto, solve the equation under the additional constraint that the two margins get equal values.
If only one of margin-left or margin-right is set to auto, solve the equation for that value. If the values are overconstrained none is set to auto , ignore the value for left if direction is rtl ignore right if direction is ltr and solve for that value. If some of left, width, and right are auto, but others are not, reset any auto values for margin-left and margin- right to 0. From the following list, pick the one rule that applies: a.
If left and width are auto and right is not, the width is shrink-to-fit. Solve the equation for left. If left and right are auto and width is not, then if direction is ltr, set left to the static position other- wise, set right to the static position. If width and right are auto and left is not, the width is shrink-to-fit. Solve the equation for right. If left is auto and width and right are not, solve the equation for left.
If width is auto and left and right are not, solve the equation for width. If right is auto and left and width are not, solve the equation for right. For replaced elements, the steps used to determine horizontal layout are: 1.
If both left and right are set to auto, then if direction is ltr, set left to the static left position. If direction is rtl, set right to the static right position. If either or both of left and right are set to auto, reset any auto values for margin-left and margin-right to 0. If neither left nor right is set to auto and both margin- left and margin-right are set to auto, solve the equation under the additional constraint that the two margins get equal values.
If the values are overconstrained none is set to auto , ig- nore the value for left if direction is rtl ignore right if direction is ltr and solve for that value. Positioning 21 www. If all of top, height, and bottom are auto, set top to the static position and apply the rule given in step 3c. If none of top, height, and bottom is auto, pick the one rule that applies from the following list: a.
If both margin-top and margin-bottom are set to auto, solve the equation under the additional constraint that the two margins get equal values. If only one of margin-top or margin-bottom is set to auto, solve the equation for that value. If the values are overconstrained none is set to auto , ignore the value for bottom and solve for that value. If some of top, height, and bottom are auto, but others are not, pick the one rule that applies from the following list: a.
Reset any auto values for margin-top and margin-bottom to 0 and solve the equation for top. If top and bottom are auto and height is not, set top to the static position. Reset any auto values for margin- top and margin-bottom to 0 and solve the equation for bottom.
Reset any auto values for margin-top and margin-bottom to 0 and solve the equation for bottom. If top is auto and height and bottom are not, reset any auto values for margin-top and margin-bottom to 0 and solve the equation for top. If height is auto and top and bottom are not, reset any auto values for margin-top and margin-bottom to 0 and solve the equation for height.
If bottom is auto and top and height are not, reset any auto values for margin-top and margin-bottom to 0 and solve the equation for bottom. For replaced elements, the steps used to determine vertical lay- out are: 1. If both top and bottom are set to auto, set top to the static top position. If the values are overconstrained, ignore the value for bottom and solve for that value. Table Layout The layout of tables can get quite complicated, especially be- cause CSS defines two different ways to calculate table and cell widths, as well as two ways to handle the borders of tables and elements internal to the table.
Figure illustrates the com- ponents of a table. All of the row boxes in a table fill the table from top to bottom in the order they occur in the source document. Thus, the table contains as many grid rows as there are row elements. Column boxes are placed next to each other in the order they occur. The first column box is on the left for Table Layout 23 www.
It is instead left to the document language to define spanning. Each spanned cell is a rectangular box one or more grid cells wide and high. The top row of this rectangle is in the row that is parent to the cell. It must also be to the right of all cells in the same row that are earlier in the source document in a left-to-right language.
In right-to-left languages, a spanned cell must be as far to the right as possible without overlapping other cells and must be to the left of all cells in the same row that come after it in the document source. If the table structure causes this con- dition, the cell must be shortened until it fits within the table or row group that encloses it. The fixed-layout model uses the following simple steps: 1.
Any column element whose width property has a value other than auto sets the width for that column. If a column has an auto width, but the cell in the first row of the table within that column has a width other than auto, that cell sets the width for that column.
Table layout components spans multiple columns, the width is divided equally among the columns. Any columns that are still auto-sized are sized so that their widths are as equal as possible. At that point, the width of the table is set to be either the value of width for the table or the sum of the column widths, which- ever is greater. If the table turns out to be wider than the column widths, the difference is divided by the number of columns and added to each of them.
In most current user agents, use of this model will be triggered by a table with a width of auto, regardless of the value of table-layout—although this is not assured. Table Layout 25 www. For each cell in a column, calculate both the minimum and maximum cell width. Determine the minimum width required to display the content. If the cell has a width value that is larger than the minimum possible width, the minimum cell width is set to the value of width.
For the maximum width, determine the width required to display the content without any line-breaking, other than that forced by explicit line-breaking e. That value is the maximum cell width. For each column, calculate both the minimum and max- imum column width. If the column has been given an explicit width value that is larger than any of the minimum cell widths within the column, the minimum column width is set to the value of width.
For the maximum width, take the largest maximum cell width of the cells within the column. If the column has been given an explicit width value that is larger than any of the maximum cell widths within the col- umn, the maximum column width is set to the value of width. These two behaviors recreate the traditional HTML table behavior of forcibly expanding any col- umn to be as wide as its widest cell. In cases where a cell spans more than one column, the sum of the minimum column widths must be equal to the min- imum cell width for the spanning cell.
User agents should divide any changes in column widths equally among the spanned columns. In addition, the user agent must take into account that when a column width has a percentage value for its width, the per- centage is calculated in relation to the width of the table—even though that width is not known yet.
The user agent must hang on to the percentage value and use it in the next part of the algorithm. Once the user agent has determined how wide or narrow each column can be, it can calculate the width of the table. This happens as follows: 1. If the computed width of the table is not auto, the com- puted table width is compared to the sum of all the column widths plus any borders and cell-spacing.
Columns with percentage widths are likely calculated at this time. The larger of the two values is the final width of the table. If the computed width of the table is auto, the final width of the table is determined by summing up the column widths, borders, and cell-spacing.
This means the table will be only as wide as needed to display its content, just as with traditional HTML tables. Any columns with per- centage widths use that percentage as a constraint, but it is a constraint that a user agent does not have to satisfy.
Once the last step is completed, then and only then can the user agent actually lay out the table. Collapsing Cell Borders The collapsing cell model largely describes how HTML tables have always been laid out when they have no cell-spacing. The following rules govern this model: Table Layout 27 www.
Thus, there is never separation between the border around the outside of the table and its outer- most cells. The table element itself can, as always, have a border. In fact, borders collapse into each other where they adjoin so that only one of the collapsing borders is actually drawn. This is somewhat akin to margin-collapsing, where the largest margin wins. Collapsing borders When two or more borders are adjacent, they collapse into each other, as shown in Figure There are strict rules gov- erning which borders will win and which will not: 1.
If one of the collapsing borders has a border-style of hidden, it takes precedence over all other collapsing bor- ders: all borders at this location are hidden. If one of the collapsing borders has a border-style of none, it takes the lowest priority. There will be no border drawn at this location only if all of the borders meeting at this location have a value of none.
Note that none is the default value for border-style. If at least one of the collapsing borders has a value other than either none or hidden, narrow borders lose out to wider ones. If two or more of the collapsing borders have the same width, the border style is taken in the following order, from most preferred to least: double, solid, dashed, dotted, ridge, outset, groove, inset. Thus, if two borders with the same width collapse and one is dashed while the other is outset, the border at that location will be dashed.
Collapsing cell borders model 4. If collapsing borders have the same style and width but differ in color, the color used is taken from an element in the following list, from most preferred to least: cell, row, row group, column, column group, table.
If the collapsing borders come from the same type of element—such as two row borders with the same style and width, but different colors—the one farthest to the left and top wins in left-to-right lan- guages; in right-to-left languages, the cell farthest to the right and top wins.
Vertical Alignment Within Cells The following describes the detailed process for aligning cell contents within a row: 1. Table Layout 29 www. Any top-aligned cell has its content placed. The row now has a provisional height, which is defined by the lowest cell bottom of the cells that have already had their content placed.
If any remaining cells are middle- or bottom-aligned, and the content height is taller than the provisional row height, the height of the row is increased by lowering the baseline in order to enclose the tallest of those cells. All remaining cells have their content placed.
Combining basic value types such as numbers with units such as pixels makes it possible to do any number of interesting things with CSS. Keywords Keywords are defined on a per-property basis and have a mean- ing specific only to a given property. For example, normal has totally unique meanings for the properties font-variant and letter-spacing.
Keywords, like property names, are not case- sensitive. There is a second special universal keyword, initial, which is meant to represent the initial or default value for a given prop- erty.
Times, for most people. The status and application of initial is unclear as of this writing and may be unreliable. In this format, the first pair of digits cor- responds to the red level, the second pair to the green, and the third pair to the blue. Each pair is in hexadecimal notation in the range FF. RGB This is a shorter form of the six-digit notation described previously.
Not coinciden- tally, this range is the decimal equivalent of FF in hexadecimal. The hue angle is always a unitless number in the range 0 to and the saturation and brightness values are always percentages. Hue angles 0 and are equivalent, and are both red. Hue angles greater than can be declared but they are nor- malized to the 0— range; thus, setting a hue angle of is equivalent to setting an angle of The alpha value must be a real number between 0 and 1 inclusive; percentages are not permitted for the alpha value.
Thus, rgba 0,0,,0. There is no hexadecimal no- tation for RGBA. These keywords are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow.
Browsers generally also recognize other keywords, such as the X11 color keywords documented in section 4. The CSS3 Color Module drops orange from the list of recognized basic keywords, but it appears in the X11 list and all known browsers support it for historical reasons.
When applied to the color property, it is equivalent to declaring color: inherit. It can also be used on borders; border: 1px solid is equivalent to border: 1px solid currentColor. Color Values 33 www. Number Values A number value is expressed as a positive or negative number when permitted. They may also restrict the range of acceptable values, as with color values that accept only integers in the range 0— A more common range restriction is to limit a number to be non-negative.
There should never be any space between the number and the percent sign. A percentage value will always be computed relative to something else. Some properties may restrict the values to be non-negative. Length Values A length value is expressed as a positive or negative number when permitted , followed immediately by a two-letter ab- breviation that represents the units to be used. There should never be any space between the number and the unit designa- tor.
A value of 0 zero does not require a unit designator. Length units are divided into two types: absolute units, which are in theory always measured in the same way, and relative units, which are measured in relation to other things. Thus, inches should be used with extreme caution in screen design. Centimeters cm The centimeters found on rulers the world over. There are 2. The same mapping warnings that applied to inches also apply to centimeters. Millimeters mm There are 10 millimeters to a centimeter, so you get Bear in mind the previous warnings about map- ping lengths to monitors.
Points pt Points are standard typographical measures used by print- ers and typesetters for decades and by word-processing programs for many years.
By modern definition, there are 72 points to an inch. Therefore, the capital letters of text set to 12 points should be one-sixth of an inch tall. Picas pc Another typographical term. A pica is equivalent to 12 points, which means there are 6 picas to an inch. The cap- ital letters of text set to 1 pica should be one-sixth of an inch tall.
Keep in mind previous warnings. Length Values 35 www. In CSS, the em-height is equivalent to the height of the character box for a given font, which is to say that computed value of font-size.
Ems can be used to set relative sizes for fonts; for example, 1. Otherwise it is the same as em. X-height ex This refers to the x-height of the font. However, the vast majority of fonts do not include their x-height, so many browsers approximate it poorly by simply setting 1ex to be equal to 0. Pixels px A pixel is a small box on screen, but CSS defines pixels more abstractly. In CSS terms, a pixel is defined to be about the size required to yield 96 pixels per inch. Many user agents ignore this definition in favor of simply ad- dressing the pixels on the monitor.
Scaling factors are brought into play when page zooming or printing, where an element px wide can be rendered more than device dots wide.
If the viewport is pix- els wide, for example, 1vw is equal to 9. If the viewport is pixels tall, for example, 1vh is equal to 6.
Thus, given a viewport that is pix- els wide by pixels tall, 1vm is equal to 6. There are four types of angle units: degrees deg , grads grad , radians rad , and turns turn.
For example, a right angle could be declared as 90deg, grad, 1. This is also true of negative values, which are allowed. Angles 37 www. There are two types of time units: seconds s and milliseconds ms. Time values ap- pear in aural styles, which are not widely supported, and in the much better supported transitions and animations. There are two types of frequency units: hertz Hz and kilohertz kHz. The unit identifiers are case-insensitive, so 6kHz and 6khz are equiv- alent.
As of this writing, frequency values are only used with aural styles, which are not well supported. If a string needs to include the same quote that encloses it, it must be escaped. If a string does contain a linefeed for legi- bility reasons, it must be escaped and will be removed when processing the string.
If a rule does not have an explicit selector, the universal selector is inferred. Every instance of the element name is matched. The matched element can be a child, grandchild, great-grandchild, etc. It is more restrictive than a descendant selector, as only a child will be matched. Sibling elements, as the name implies, share the same parent element. Any text between the two elements is ignored; only elements and their positions in the docu- ment tree are considered.
Any text or other elements between the two elements are ignored; only elements and their positions in the document tree are considered. The name of the class value must immediately follow the dot. Multiple class values can be chained together, although there are support problems in Internet Explorer previous to IE7. If no element name precedes the dot, the selector matches all elements bearing that class value or values. Examples: p.
The name of the ID value must immediately follow the octothorpe. If no element name precedes the octothorpe, the selector matches all elements containing that ID value. Selectors 43 www. What sets the pseudo-classes listed here apart is that they are intrinsically about patterns found in the struc- ture of the document, like selecting every other paragraph or elements that are the last children of their parent element. Note that this pseudo-class does not apply to empty ele- ments such as br, img, input, and so on.
Thus, div:first-child will select any div that is the first child of another element, not the first child element of any div. Thus, div:first-of-type will select any div that is the first child div of another element.
Description: This matches elements based on their human-language encoding. Such language information must be contained within or otherwise associated with the document; it cannot be assigned from CSS. For ex- ample, in an HTML document, the language of an element is de- termined by its lang attribute.
If the document does not have one, the language of an element is determined by the lang attribute of its nearest ancestor that does have one, and lacking that, by the Content-Language HTTP header response field or the respective meta http-equiv for the document.
Thus, div:last-child will select any div that is the last child of another element, not the last child element of any div. Thus, div:last-of-type will select any div that is the last child div of another element.
This will select the first, fifth, ninth, fourteenth, and so on children of the body. This is in effect the mirror image of :nth-child. This holds true even if other elements are interspersed between the various paragraphs, such as lists, tables, or other elements.
Structural Pseudo-Classes 49 www. This will select the first, fourth, seventh, tenth, and so on child paragraphs of the body. This holds true even if other ele- ments are interspersed between the various paragraphs, such as lists, tables, or other elements.
A common use case for this selector is to remove the border from any linked image, assuming that said image is the only element in the link. It must only be the only child of its parent. Note that an element can be selected by :only-of- type even if it has its own child or children of its own type such as divs within a div. It must only be the only child of its type to its parent. In XML formats, the root ele- ment can have any name; thus, a generic root-element selector is needed.
More usefully, negation can be used within the context of descendant selectors. That is, it is impermissible to write :not :not div. This is no great loss, since the equivalent of that would be div. Because :not is a pseudo-class, it can be chained with other pseudo-classes as well as with instances of itself. This restriction is likely to be loosened or eliminated in future versions of the CSS Selectors module.
The most common example is clicking on a hyperlink in an HTML document: while the mouse button is being held down, the link is active. Note that :disabled does not apply when an input element has simply been removed from the viewport with properties like posi tion or display. One example from HTML is an input box that has the text-input cursor within it such that when the user starts typing, text will be entered into that box.
Other elements, such as hyperlinks, can also have focus; however, CSS does not define which elements may have focus. The most common example of this is moving the mouse pointer inside the boundaries of a hyperlink in an HTML document. Interaction Pseudo-Classes 55 www. This state is mutually exclusive with the :visited state. If that element was a paragraph, it would also be matched by p:target.
This state is mutually exclusive with the :link state. In CSS3, pseudo-elements use double colons to distinguish them from pseudo-classes. For historical reasons, browsers will support both single- and double-colons on pseudo-elements, but the double-colon syntax is recommended. By default, the pseudo-element is inline, but it can be changed using the property display.
Examples: a. By default, the pseudo-element is inline, but that can be changed using the property display. Any leading punc- tuation should be styled along with the first letter.
Some languages have letter combinations that should be treated as a single character, and a user agent may apply the first letter style to both.
Prior to CSS2. There is a limited set of properties that can apply to a first letter. There is a limited set of properties that can apply to a first line. Example: p. In the past, this was handled by setting media types with the media attribute on link elements or the media descriptor on import declarations.
Media queries take this concept several steps further by allowing authors to choose style sheets based on the features of a given media type. Basic Concepts The placement of media queries will be very familiar to any author who has ever set a media type. Thus, given the previous import, print-color.
The same holds for any screen medium, a grayscale pro- jection environment, an aural media environment, and so forth. Each query is composed of a media type and one or more listed media features. Each media feature is enclosed in parentheses, and multiple features are linked with the and keyword. There are two logical keywords in media queries: and Links together two or more media features in such a way that all of them must be true for the query to be true.
For example, not color and orientation: landscape and min-device- width: px means that if the three conditions are satisfied, the statement is negated.
In all other cases, it will be used. Note that the not keyword can only be used at the beginning of a media query. It is not legal to write something like color and not mid-device-width: px. Chapter 1. Get this from a library! CSS pocket reference. CSS animations open up a whole new way to look at and use CSS to bring motion to the web in creative ways. This Pocket Guide is designed to help you jump into using CSS animations in your own projects, providing a strong foundation on which to start experimenting.
Sixteen sermons on the following subjects. A call to repentance. A warning to young people. Of faith without works. How Christians live by faith. With a preface concerning The whole duty of man. By William Sutton, This handy, concise book provides all of the essential information you need to implement CSS on the fly.
Download it once and read it on your Kindle device, PC, phones or tablets. This book is great for quick references. I've been coding CSS for years, but I still need a quick reference here and there.
This pocket reference is perfect for those scenarios. It contains enough information to get a beginner CSS pocket reference book and running quickly with a little additional research. The basic concepts are in the by: 5. Ideal as an introduction for beginners and a quick reference for advanced developers, this pocket reference book app is easy to use anywhere and serves as the perfect hand book. It contains enough information to get a beginner up and running quickly with a little additional research.
It will also help readers create responsive web pages. CSS Cards W3. CSS Defaults W3. CSS Fonts W3. CSS Google W3. CSS Text W3. CSS Round W3. CSS Padding W3. CSS Margins W3. CSS Display W3. CSS Buttons W3. CSS Notes W3. CSS Quotes W3. CSS Alerts W3. CSS Tables W3. CSS Lists W3. CSS Images W3. CSS Inputs W3. CSS Badges W3. CSS Tags W3. CSS Icons W3. CSS Responsive W3. CSS Layout W3. CSS Animations W3. CSS Effects W3. CSS Bars W3.
0コメント