beginning html xhtml css and javascript phần 5 potx

Chapter 8: More Cascading Style Sheets 318 The table that follows shows values for ordered lists that are supported in most browsers. Value Meaning Example decimal Number 1, 2, 3, 4, 5 decimal - leading - zero 0 before the number 01, 02, 03, 04, 05 lower - alpha Lowercase alphanumeric characters a, b, c, d, e upper - alpha Uppercase alphanumeric characters A, B, C, D, E lower - roman Lowercase Roman numerals i, ii, iii, iv, v upper - roman Uppercase Roman numerals I, II, III, IV, V The list - style - type property can either be used on the < ul > and < ol > elements (in which case it applies to the entire list) or on the individual < li > elements. The following example demonstrates all these styles ( ch08_eg10.html ): li.a {list-style-type:none;} li.b {list-style-type:disc;} li.c {list-style-type:circle;} li.d {list-style-type:square;} li.e {list-style-type:decimal;} li.f {list-style-type:lower-alpha;} li.g {list-style-type:upper-alpha;} li.h {list-style-type:lower-roman;} li.i {list-style-type:upper-roman;} You can see the result with examples of each kind of bullet in Figure 8 - 10. Figure 8-10 The list - style - position Property Lists are indented into the page, and the list - style - position property indicates whether the marker should appear inside or outside of the box containing the main points. There are two values for this property, as you can see in the table that follows: c08.indd 318c08.indd 318 11/20/09 4:55:56 PM11/20/09 4:55:56 PM Chapter 8: More Cascading Style Sheets 319 Value Purpose inside The marker is inside the block of text (which is indented) . outside The marker sits to the left of the block of text (this is the default value if this is not specified). Here you can see how this property is written; in this case it is given on the < ul > or < ol > elements ( ch08_eg11.css ): ul {list-style-position:outside;} ol {list-style-position:inside;} Figure 8 - 11 shows you what this would look like in a browser. Figure 8-11 As you can see, the text is indented in both cases, and the value of this property indicates whether the marker is inside this box or outside of the box. The list - style - image Property The list - style - image property allows you to specify an image so that you can use your own bullet style. The syntax is similar to the background - image property; the value starts with the letters url and is followed by the URL for the image in brackets and quotation marks ( ch08_eg12.css ): li {list-style-image: url(“images/bulletpoint.gif”);} You can see an example of some triangular bullet points in Figure 8 - 12. Figure 8-12 c08.indd 319c08.indd 319 11/20/09 4:55:57 PM11/20/09 4:55:57 PM Chapter 8: More Cascading Style Sheets 320 If the image cannot be displayed, the browser should just display a dot rather than a broken image symbol. If you are using nested lists, this value will inherit from its parent element. To prevent this from happening, you can use the list - style - image property on the nested list and give it a value of none . The list - style Property (the Shorthand) The list - style property is a way of expressing more than one of these properties at once. They can appear in any order. For example: ul {list-style: inside circle;} Remember that you can also set the border , padding , and margin properties for < ul > , < ol > , < li > , < dl > , < dt > , and < dd > elements, as each element has its own box in CSS. Tables In the last chapter, you saw a couple of examples that use CSS with tables. Properties that are commonly used with the < table > , < td > , and < th > elements include the following: border to set the properties of the border of a table. padding to set the amount of space between the border of a table cell and its content — this property is very important to make tables easier to read. Properties to change text and fonts. text - align to align writing to the left, right, or center of a cell. vertical - align to align writing to the top, middle, or bottom of a cell. width to set the width of a table or cell. height to set the height of a cell (often used on a row as well). background - color to change the background color of a table or cell. background - image to add an image to the background of a table or cell. You should be aware that, apart from the background - color and height properties, it is best to avoid using these properties with < tr > elements, as browser support for these properties on rows is not as good as it is for individual cells. To demonstrate how some of these properties are used with a table, take a look at the one shown in Figure 8 - 13; it might look familiar because you saw it at the beginning of the last chapter, but this time it has an added < caption > element ( ch08_13.html ). ❑ ❑ ❑ ❑ ❑ ❑ ❑ ❑ ❑ c08.indd 320c08.indd 320 11/20/09 4:55:57 PM11/20/09 4:55:57 PM Chapter 8: More Cascading Style Sheets 321 Now take a look at the style sheet for this table ( ch08_eg13.css ): body {color:#000000; background-color:#ffffff;} h1 {font-size:18pt;} p {font-size:12pt;} table { background-color:#efefef; width:350px; border-style:solid; border-width:1px; border-color:#999999; font-family:arial, verdana, sans-serif;} caption { font-weight:bold; text-align:left; border-style:solid; border-width:1px; border-color:#666666; color:#666666;} th { height:50px; font-weight:bold; text-align:left; background-color:#cccccc;} td, th {padding:5px;} td.code { width:150px; font-family:courier, courier-new, serif; font-weight:bold; text-align:right; vertical-align:top;} Here are some key points to note about this example. You will be altering settings of some of these properties using new properties that you will meet throughout this section. Figure 8-13 c08.indd 321c08.indd 321 11/20/09 4:55:57 PM11/20/09 4:55:57 PM Chapter 8: More Cascading Style Sheets 322 The rule for the < table > element uses a width property to fix the width of the table to 350 pixels; otherwise, it would take up as much of the screen as needed to show as much text as possible on one line. The rule for the < table > element also has a border property set, which creates a single-pixel border all around the table. Note, however, that none of the other cells in the table inherits this property. The rule that applies to the < caption > element has its font - weight , border , and text - align properties set. By default the text is normal (not bold), aligned in the center, and without a border. The rule that applies to the < th > element sets the height of the headings to 50 pixels, and the text is aligned left (rather than centered, which is the default). There is a rule that applies to both the < th > and < td > elements, and this indicates that both should have a padding property set to 5px so that the content of the cells does not touch the border of those cells. Creating space around the cells is very important and makes the table more readable. The final rule states that the < td > elements whose class attribute has a value of code are given a width property whose value is 150px (150 pixels). This ensures that the content of this whole column remains on one line. Unfortunately, there is no way to assign a style to a column, but in the case of the width property, once it has been set on one element it does not need to be set on all the others in the column. You may also have noticed in Figure 8 - 13 that there is a white line around the two columns (which is particularly noticeable around table header cells). Browsers automatically add this to separate each cell from its neighbor. You can, however, remove this gap using a property called border - spacing , which you ’ ll learn about in the next section. Table - Specific Properties In the following section you will meet five properties that can only be used with tables, and also some values for the border - style property that only apply to tables. Most of these properties were first supported in IE7 and FF2. Property Purpose border - collapse Where the borders of two table cells touch, this property indicates whether both borders should be visible, or whether the browser should pick just one of the borders to show. border - spacing Specifies the width of the space that should appear between table cells. caption - side Specifies which side of a table the caption should appear on. empty - cells Specifies whether the border should be shown if a cell is empty. table - layout If the space you have allocated for a table is not enough to fit the contents, browsers will often increase the size of the table to fit the content in — this property can force a table to use the dimensions you specify. ❑ ❑ ❑ ❑ ❑ ❑ c08.indd 322c08.indd 322 11/20/09 4:55:58 PM11/20/09 4:55:58 PM Chapter 8: More Cascading Style Sheets 323 The border - collapse Property Where two table cells meet, you can tell the browser to show just one of the borders (rather than both — which is the default behavior). You can do this using the border - collapse property, which can take two values: Value Purpose collapse Horizontal borders will be collapsed and vertical borders will abut one another. separate Separate rules are observed. This value opens up additional properties to give you further control. If two adjacent table cells have different border styles, and you have specified that borders should be collapsed, there is a complex set of rules to specify which border should be shown — rather than try to learn these rules it is quicker to simply try your table out in a browser. To illustrate how the border - collapse property works, the following style rules apply to two tables: the first has a border - collapse property with a value of collapse , the second has a value of separate , and both tables contain adjacent cells with dotted and solid lines ( ch08_eg14.css ): table.one {border-collapse:collapse;} table.two {border-collapse:separate;} td.a {border-style:dotted; border-width:3px; border-color:#000000; padding:10px;} td.b {border-style:solid; border-width:3px; border-color:#333333; padding:10px;} Figure 8 - 14 shows you how, with a value of collapse , the browser collapses borders into each other so that the solid border takes precedence over the dotted border. This wouldn ’ t look as odd if the borders were both solid, but it does illustrate the point well. Figure 8-14 c08.indd 323c08.indd 323 11/20/09 4:55:58 PM11/20/09 4:55:58 PM Chapter 8: More Cascading Style Sheets 324 If you do not specify that the borders should be collapsed, then two further properties control border presentation: border - spacing empty - cells The following sections discuss these properties. The border - spacing Property The border - spacing property specifies the distance that separates adjacent cells ’ borders. If you provide one value, it will apply to both vertical and horizontal borders: table.one {border-spacing:15px;} Or you can specify two values, in which case the first refers to the horizontal spacing and the second to the vertical spacing: table.two {border-spacing:2px 4px;} You can see what this looks like in Figure 8 - 15 ( ch08_eg15.html styled with ch08_eg15.css ): ❑ ❑ Figure 8-15 The empty - cells Property The empty - cells property indicates whether a cell without any content should have a border displayed. It can take one of three values, as you can see in the table that follows. c08.indd 324c08.indd 324 11/20/09 4:55:58 PM11/20/09 4:55:58 PM Chapter 8: More Cascading Style Sheets 325 Value Purpose show Borders will be shown even if the cell is empty (this is the default value). hide Borders will be hidden if cell is empty. inherit Borders will obey the rules of the containing table (only of use in nested tables). If you want to explicitly hide or show borders of empty cells, you should use this property because some versions of IE and Firefox treat empty cells differently. Here you can see a table with two empty cells: an empty < th > element and an empty < td > element ( ch08_eg16.html ): < table > < tr > < th > < /th > < th > Title one < /th > < th > Title two < /th > < /tr > < tr > < th > Row Title < /th > < td > value < /td > < td > value < /td > < /tr > < tr > < th > Row Title < /th > < td > value < /td > < td > < /td > < /tr > < /table > The following code shows the empty - cells property used to hide borders of empty cells in the < table > element ( ch08_eg16.css ): table { width:350px; border-collapse:separate; empty-cells:hide;} td {padding:5px; border-style:solid; border-width:1px; border-color:#999999;} Figure 8 - 16 shows what the table looks like without borders for empty cells. c08.indd 325c08.indd 325 11/20/09 4:55:59 PM11/20/09 4:55:59 PM Chapter 8: More Cascading Style Sheets 326 The caption - side Property The caption - side property is for use with the < caption > element to indicate on which side of the table the caption should go. The following table lists the possible values. Value Purpose top The caption will appear above the table (the default). right The caption will appear to the right of the table. bottom The caption will appear below the table. left The caption will appear on the left side of the table. For example, here you can see the caption being set to the bottom of the table ( ch08_eg17.css ): caption {caption-side:bottom} Figure 8 - 17 shows you the caption - side property at work; you can see that the caption for this table has moved to the bottom of the table (rather than the top). Figure 8-16 Figure 8-17 c08.indd 326c08.indd 326 11/20/09 4:55:59 PM11/20/09 4:55:59 PM Chapter 8: More Cascading Style Sheets 327 The table - layout Property When you specify a width for a table or table cell, but the content does not fit into the space you have allowed, a browser can give the table more space to fit the content. The table - layout property allows you to force the browser to stick to the widths you specify, even if this makes the content unreadable. See the table that follows for the three possible values this property can take. Value Purpose auto The browser looks through the entire table for the widest unbreakable content in the cells. This is slower at rendering, but more useful if you do not know the exact size of each column. This is the default value. fixed The width of a table cell only depends on the widths you specified for the table and its cells. This speeds up rendering. inherit Will obey the rules of the containing table (only of use in nested tables). In the following example there are two tables, each with just one cell. The cells contain the letters of the alphabet, and there is a space before the last three letters. Normally, each table cell will be as wide as the longest unbroken set of characters in a cell — in this case, the letters A through W ( ch08_eg18.html ). < table class=”one” > < tr > < td > ABCDEFGHIJKLMNOPQRSTUVW XYZ < /td > < /tr > < /table > < table class=”two” > < tr > < td > ABCDEFGHIJKLMNOPQRSTUVW XYZ < /td > < /tr > < /table > Now, if you look at the CSS for this example, you can see that the width of the table is set to 75 pixels — not enough for the letters A through W. One table has the table - layout property set to auto , the other to fixed ( ch08_eg18.css ). table {width:75px;} table.one {table-layout:auto;} table.two {table-layout:fixed;} td { padding:5px; border-style:solid; border-width:1px; border-color:#999999;} c08.indd 327c08.indd 327 11/20/09 4:55:59 PM11/20/09 4:55:59 PM [...]... consider which features will and won’t work and check your page in IE6 before publishing the site Figure 8-36 352 c08.indd 352 11/20/09 4 :56 :07 PM Chapter 8: More Cascading Style Sheets To start working on the CSS file for this page, start up your web-page editor and follow these steps: 1 Create a file called samplePage .css, add the elements from the XHTML page, and use class selectors where appropriate... property is highlighted in the following code (ch08_eg33 .css) : p { background-color:#FFFFFF; border:2px solid #000000; padding:5px; margin:5px; width :50 0px; clear:right} Figure 8-33 shows you how the clear property works in this example, ensuring that the second and third paragraphs sit below the pull quote Figure 8-33 350 c08.indd 350 11/20/09 4 :56 :06 PM Chapter 8: More Cascading Style Sheets Try It... the beginning of the style sheet without even a space before it The value is held in quotes and should be one of the language codes specified in Appendix G @charset “iso-8 859 -1” Positioning and Layout with CSS Up to this point, you have learned how the content of each element is represented in CSS using a box, and you’ve seen many of the properties you can use to affect the appearance of the box and. .. the document and manually renumber each item) In order to see how it works, we will create an example where the sections of a document are going to be numbered using the counter() function Here is the XHTML (ch08_eg22 .html) : 332 c08.indd 332 11/20/09 4 :56 :01 PM Chapter 8: More Cascading Style Sheets Introducing Web Technologies Introducing HTML Introducing CSS Introducing... 330 11/20/09 4 :56 :00 PM Chapter 8: More Cascading Style Sheets Generated Content CSS2 introduced a powerful way to add content before or after a specified element, even if it was not in the XHTML document To do this, the :before and :after pseudo-elements are added to the selector and then the content property is used to specify what should be inserted into the document The :before and :after pseudo-elements... number, and the higher the number the nearer the top that element should be displayed (for example, an item with a z-index of 10 will appear on top of an item with a z-index of 5) 346 c08.indd 346 11/20/09 4 :56 : 05 PM Chapter 8: More Cascading Style Sheets To better understand z-index, take a look at another example of absolute positioning — this time there are just three paragraphs (ch08_eg31 .css) : . the beginning of the last chapter, but this time it has an added < caption > element ( ch08_13 .html ). ❑ ❑ ❑ ❑ ❑ ❑ ❑ ❑ ❑ c08.indd 320c08.indd 320 11/20/09 4 :55 :57 PM11/20/09 4 :55 :57 . shows what the table looks like without borders for empty cells. c08.indd 325c08.indd 3 25 11/20/09 4 :55 :59 PM11/20/09 4 :55 :59 PM Chapter 8: More Cascading Style Sheets 326 The caption - side Property. the table that follows. c08.indd 324c08.indd 324 11/20/09 4 :55 :58 PM11/20/09 4 :55 :58 PM Chapter 8: More Cascading Style Sheets 3 25 Value Purpose show Borders will be shown even if the cell