CSS entry series: Part 2 attributes (part 4)

-- From "getting started with CSS (version 3rd)" by LAN Pouncey and Richard York

[Style list] · the list-style-type attribute changes the style of the Project symbol before each list item.

Attribute	Value
List-style-type	Disc | circle | square | decimal | Decimal-leading-zero | Lower-Roman | Upper-Roman | Lower-Greek | Lower-Latin | Upper-Latin | Armenian | Georgian | none Unordered list Initial Value: Disc Initial Value of the ordered list: decimal

· Style-based unordered list

There are four possible symbol types: disc, circle, square, and none. The default value is disc.

· Style-based ordered list

Keywords supported in all browsers: decimal, lower-Roman, upper-Roman, and none.

· List-style-image attribute, which accepts the URL of an image

Attribute	Value
List-style-Image	<URI> | none Initial Value: None

· List-style-position attribute

The position of the list item symbol appears inside or outside the list item element.

· List-style short attribute

Attribute	Value
List-style	<List-style-type> | <list-style-position> | <list-style-image>

The list-style attribute specifies 1 ~ Three values.

[Positioning]-The position attribute is used to specify different positioning types for the element.

Attribute	Value
Position	Static | relative | absolute | fixed

Z-Index uses the default auto positioning element to stack up sequentially. The default Ascending Order is displayed.

[Style table]-HTML tables support many optional elements:

<Caption> the element is used to provide the table title or table name.

The <colgroup> element is used to close all <Col> elements in the table. The <colgroup> element is not displayed.

<Col> elements are used to control attributes related to each table column, such as column width. <Col> elements are not displayed or contain content.

<Thead> the element closes information related to the list header. If the printed table spans multiple pages, the information in <thead> appears at the top of each page.

<Tbody> the element contains the primary table data.

<Tfoot> footer content

<table><caption>Ingredients</caption><colgroup><col class=”ngredient”><col class=”quantity”></colgroup><thead><tr><th>Ingredient</th><th>Quantity of Ingredent</th></tr></thead><tfoot><tr><tr><Ingredient/tr><tr>Quantity of Ingredient</tr></tr></tfoot><tbody>.......</tbody></table>

· Caption-side attribute controls whether the table title is displayed above or below the table.

Attribute	Value
Caption-side	Top | bottom Initial Value: Top

Note: IE6 and IE7 support <caption> elements and do not support the caption-side attribute.

· Table columns

The <colgroup> and <Col> elements control the width, background color, or text color of the column.

· Control the table layout

Attribute	Value
Table-Layout	Auto | fixed Initial Value: Auto

By default, tables expand or contract to accommodate the data contained in the tables.

In some cases, you need to force the table and cell to have a fixed width. The code below shows that because the text content is too wide, the table width will still be greater than Px:

......<title></title><style type=”text/css”>table..control {width:100px;}table.th.td..control {width:20px}...</style>

In this case, you can use table-layout fixed to force a width, so the effect text will go beyond the table boundary, and the text that overflows in IE will be cropped, and different browsers will display inconsistency.

· Border-collapse attribute controls the table cell spacing

Attribute	Value
Border-collapse	Collapse | separate Initial Value: sepaarate

The value is set to collapse to delete the spacing between cells.

· Border-spacing attribute controls the border spacing

Attribute	Value
Border-spacing	<Length>? Initial Value: 0

Note: IE6 and IE7 do not support the border-spacing attribute. If you must support these two browsers, a common solution is to completely remove the border from the table cells, put the content of each cell into a <div> element, and apply the required border and padding to these <div> elements.

Syntax of the border-spacing attribute:

Border-Spacing:

If an optional second value is provided, specify the vertical horizontal distance.

[Create a complete layout] · example

body {font:82%/1.4  Verdana, Arial, Helvetica, sans-serif;   %}h2.h3 {font-family:Georgia,Times,Times New Romas, serif;}

// Set the font size to 82% on the Body element and the Row Height to 1.4, which makes the body size 13 PX and increases the spacing between each row to adapt to the reading habits of most people, using percentages to specify the font size does not violate the font size adjustment function in IE.

Use the @ font-face rule to provide website visitors with fonts they do not have installed.

@font-face {　　font-family:Raleway;　　src:url(raleway_thin.eot);　　src:local(releway_thin),url(raleway_thin.ttf) format(opentype);}

// This creates a new font-face reference that can be used in CSS. This rule contains two parts:

Font-family attribute, which provides a label for referencing fonts in the future

Src attribute. The first SRC declaration is applied to IE, and its value is the URL of the font file. The second SRC statement is applied to all other browsers. It supports the open type font format, this statement must be placed behind the previous one so that it can rewrite the first SRC statement supporting the browser. The second SRC also contains local, indicating that the font should be searched in the installed font.

Note: It is difficult to use custom fonts.

· Example

.......navigation a {display:block;margin-left:0.5em;padding:0.5em;border:1px solid #ccc;color:#233;text-decoration:none;}.navigation a:focus,.navigation a:hover {background:#233;color:#FFF;}......<ul class=”navigation”><li><a href=”#”>Home</a></li><li><a href=”#”>Recipes</a></li><li><a href=”#”>Suggestions</a></li></ul>

· Gradient background

background-image:-moz-linear-gadient(top,#233,#FFF);background-image:-webkit-gradient(linear,left top,left bottom,from(#233));-ms-filter:”progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#223333),EndColorStr=##FFFFFF”;background-image:linear-gradient(top,#233,#FFF);

// The first and second declarations apply to Mozilla Firefox and WebKit browsers (Apple Safari and Google Chrome) with the-moz-and-WebKit-prefixes, the vendor prefix allows the browser to implement the css3 specification that has not yet been finalized.

The last statement does not have a vendor prefix, because this is the recommended format in css3.

Article 3 The Declaration uses a different format. You can use the filter provided by Microsoft to implement gradient. Both IE8 and ie9 support this filter.

IE does not support the hexadecimal format.

Example:

html{height:100%;background-color;#233;background-image:-moz-linear-gradient(top,#233,#FFF);background-image:-webkit-gradient(linear,left top,left bottom,from to(#FFF));-ms-filter:”progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#223333,EndColorStr=#FFFFFF)”;background-image:linear-gradient(top,#233,#FFF);}

// In addition to the gradient, a height declaration is added. The height is set so that the gradient applies to the entire height of the page, rather than stopping at the end of the content.

Background-color is important for browsers that do not support gradient backgrounds.