CSS2 Quick Reference_CSS/HTML

自從W3C（The World Wide Web Consortium）制定了代號為Cougar的HTML的4.0版本以來，存在在Web頁面中的動態效果首次被正式的承認了，W3C把動態超文本（Dynamic HTML）的實現分為了三個部分：腳本、支援動態效​​果的瀏覽器和CSS。前兩者也許你常用到，但CSS是什麼或許你並不清楚，如果有過製作Web頁面的經歷，你可能聽說過樣式單或風格單，如果對此你亦無耳聞，不要緊，只要你想製作出具有更多新功能的W eb頁，本文將同樣適合你。  
一、什麼是CSS？
　　CSS是Cascading Style Sheet的縮寫，有些書上把它譯為「層疊樣式單」或「級聯樣式單」（下文簡稱「樣式單」），在1997年W3C頒布HTML4標準的同時也公佈了有關樣式單的第一個標準CSS1。樣式單是對以前的HTML（3.2以前的H TML版本）語法的一次重大革新，以前的HTML版本中，各種功能的實現是透過標記元素實現的，這也造成了各個瀏覽器廠商為了標新立意創造各種只有自家支持的標記，各種標記互相嵌套，就可以達到不同的效果，例如要在一段文字中把一部分文字變成紅色，H TML3.2中應該是這樣的：  

這裡顯示紅色字

  
而在樣式單中，將某些標記（如上例中的「font」標記）屬性化，利用樣式單，上例可以變成：  

這裡顯示紅色字

​
Is this all the function of stylesheets? Far from it! As mentioned before, style sheets are part of DHTML. The real significance of establishing style sheets is to truly introduce objects into HTML, so that script programs (such as javascript and VBScript) can be used to call object attributes and change object attributes to achieve dynamic purposes. This was not possible in previous HTML. If you have used object-oriented programming tools such as VB, you will quickly discover how easy it is to use style sheets to make DHTML. Another contribution of style sheets is to simplify various cumbersome tags in HTML, making the attributes of each tag more general and versatile. Style sheets extend the original tag functions and can achieve more effects. Style sheets It even goes beyond the display function of the Web page itself, and extends the style to a variety of media, showing an irresistible charm.​
Since the CSS1 version, the CSS2 version was released in May 1998, and the style sheet has been more enriched. Both Internet Explorer 4 and Netscape Navigator 4 advertise support for style sheets, but from all aspects, IE4 is more effective than NE4. This is due to the difference in the JavaScript document model (DOM) of IE4 and NE4. On the surface, the difference between the two is The models are not very different, but in essence they are quite different. The IE4 model can more easily introduce dynamic effects into Web pages. Although the IE4 model is currently only supported by Microsoft itself, it has been clearly written into the W3C's DHTML. Standard; NE4's style sheet cannot call the properties of objects through scripts. To put it bluntly, its style sheet is just a formality. (Netscape has developed a style sheet called J SSS, which uses javascript to define styles, but it is not recognized by the W3C.)
2. Learn more about style sheets
Cascading in Cascading Style Sheet is "Cascading" means that there can be multiple style sheets in the same Web document. These style sheets have different priorities based on their location. The higher the priority, the more style sheets will be used for display. . From the perspective of the form of style sheet insertion, it can be divided into three types:
Inline style sheet: It facilitates existing HTML tags and adds special styles to the information controlled by the tags, such as the example just now.
Embedded style sheet: Like JavaScript, it can be embedded in the header of an HTML file (between the and tags) and loaded using a container, for example: "", This will apply to all

tags on the page.
An external style sheet is a style sheet file saved externally. The external file has a .CSS extension, such as "".
You can use the above three methods as needed during application, but in practice, inline style sheets and embedded style sheets are used more often.
3. Grammatical features of style sheets
Style sheets have their own unique writing methods. If you master its grammatical features and understand its various attributes, you will find that using style sheets in Web pages will be How relaxing. For example, there is the simplest HTML document:

Text goes here…

us Styles can be specified using embedded stylesheets.

  

Use
Class and
IDDisplay content.

Where.someclass represents the class and #someID represents the ID. Classes and IDs can also be used with element tags, for example:
p.bigFont {...}
means that the style sheet must be executed in a P tag (
) of the bigFont class. The same is true Suitable for ID.
In order to simplify the tags that declare certain repeated attributes, you can use "," to separate different selectors, indicating that they all represent the same attribute, such as:

H1,H2 {color:red}

Div, p.mytext {……} Sometimes we also want to be able to make the style sheet effective in a specific range: p em {color:red} Element tags are separated by spaces, indicating in and The and between are shown in red. In addition, you can also use "~" to indicate that one selector is followed by another selector, and it is surrounded by "/" on both sides:
/ Selector1 ~ Selector2/ {...}
indicates that if Selector2 follows Selector1 then use this style sheet.
2. Units of attribute values ​​
In style sheets, the units of attributes are mostly length units, including px (pixels), pt (pounds), em (a unit in typesetting, 1em=12pt) , mm (millimeter), cm (centimeter), pc (1pc=12pt), in (inch), these units can be expressed by integers (such as px) or real numbers (such as em), and the logarithmic value in the element There is also an inheritance relationship such as:
body {font-size:12pt;
text-indent:3em;
}
H1 {font-size:15pt}
Then The text-indent attribute of H1 in the display is not 36pt but 45pt.
The units of some attributes can even be negative values, such as margin, which can achieve some special effects, such as overlap between elements.
There are also other units such as angle, whose units are deg (degree), grad (gradient) and rad (radian); the units of frequency, Hz and kHz, are very familiar to us.
3. Comments and spaces
Style sheets also have comment statements: you can use "/*...*/" as comment tags. There is an analyzer for style sheets in the browser, which is responsible for analyzing the style sheets. Check that the analyzer will ignore content between comment tags. Spaces are valid in style sheets. If there is more than one space between characters, it will omit the remaining spaces and keep only one. Especially when declaring certain fonts, spaces must not be omitted.
 Things to note
First of all, style sheets are case-sensitive, so pay attention to spelling; secondly, for undeclared properties and methods in CSS2, the parser of the style sheet will ignore its existence, such as:
H1 ,H2 {color:green}  
H3 ,H4 & H5  {color:red}  
P  {color:blue ;font-variant:small-caps}  
Where “&” is the stylesheet The entire second line is skipped by the parser for the label that is not in it. The font-variant in the third line is not a legal attribute and is also skipped ("color:blue" is valid).
After understanding the above rules, you are already familiar with style sheets. Below I will introduce the various attributes and attribute values ​​of style sheets in detail.

CSS2 Quick Reference 2
Keywords: Others
4. CSS Properties:
1. Media (Media) Type
One of the most important features of a style sheet is that it can Works on a variety of media, such as pages, screens, electronic synthesizers, and more. Certain properties can only work on specific media. For example, the "font-size" property is only valid on scrollable media types (screen).
Declaring a media attribute can be introduced using @import or @media:
@import url(loudvoice.css) speech;
@media print {
/* style sheet for print goes here */
}
You can also introduce media in document tags:

As you can see, the difference between @import and @media is that the former introduces an external style sheet for media types, and the latter Directly introduce media properties. The method of using @import is to add the URL address of the style sheet file to @import and then add the media type. Multiple media can share a style sheet, and the media types are separated by "," separators. @ media usage is to put the media type first, and other rules are basically the same as rule-set. The various media types are listed below:
SCREEN: refers to the computer screen.
PRINT: Refers to the opaque media used for printers.
PROJECTION: refers to the project used for display.
BRAILLE: Braille system, refers to printed matter with tactile effects.
AURAL: refers to a speech electronic synthesizer.
TV: refers to television-type media.
HANDHELD: Refers to handheld display devices (small screen, monochrome)
ALL: Suitable for all media.
2. BOX Model (BOX Model) attributes
What is BOX? CSS calls the part starting with ... in HTML a BOX (container). BOX has three types of attributes: padding, margin, and border.
Margin attribute:
Margin attribute is divided into five attributes: margin-top, margin-right, margin-bottom, margin-left and margin, which respectively represent the distance between the content in the BOX and the border. Its attribute value is a numerical value The unit can be length, percentage or auto. Margin can even be set to a negative value, causing overlapping display between B OX and BOX. See the table below for details about margin attributes:
Attribute name: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'
Attribute value:
Initial value: 0
Suitable objects: all elements
Whether to inherit: no
Percentage note: relative to the width of the BOX
For example:
H1 { margin-top: 2em }
H2 { margin-right: 12.3% }
Margin also has a quick way to write it, that is Use the margin attribute directly, for example:
BODY { margin: 1em 2em 3em 2em}
is equivalent to:
BODY {
margin-top:1em;
margin-right:2em;
margin-bottom:3em;
margin-left:2em;
}
There can be four values ​​after the margin attribute, separated by spaces (remember not commas), the order is "top, right, bottom "Left", of course there can be less than four values ​​after the margin, for example:
BODY { margin: 2em } /* All margins are set to 2em */
BODY { margin: 1em 2em } /* The upper and lower margins are 1em , the right and left margins are 2em */
BODY { margin: 1em 2em 3em } /* The upper margin is 1em, the right and left margins are 2em, and the lower margin is 3em*/
Padding attribute:
Padding attribute is used to describe How much space is inserted between the border and the content of the BOX is similar to the margin attribute. It is also divided into top, right, bottom, left and a shortcut padding. For details on the margin attributes, see the table below:
Attribute name: 'padding-top' , 'padding-right', 'padding-bottom', 'padding-left', 'padding'
Attribute value:
Initial value: 0
Suitable object: all elements
Whether Inheritance: no
Percentage Note: Relative to the width of the BOX
For example:
BLOCKQUOTE { padding-top: 0.3em }
The padding attribute is similar to margin and is omitted here.
Border attribute:
Usually when we view a HTML document and see a piece of text, we do not regard it as a BOX. In fact, the BOX has a border, but it is not displayed normally. The border attribute It is used to describe the BOX border. Border attributes are divided into border-width, border-color and border-style, and there are branches under these attributes.
border-width attribute:
border-width attribute is divided into: border-top-width, border-right-width, border-bottom-width, border-left-width and border-width attributes, border- Width is represented by length as "thin/medium/thick" or length unit. The following is a detailed list of b order-width attributes:
Attribute name: 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width', 'border-width'
Attribute value:
Initial value: medium
Suitable object: all elements
Whether to inherit : no
Percentage Note: Prohibited
border-width is a shortcut, the order is top, right, bottom, left, and the values ​​are separated by spaces.
border-color attribute:
border-color attribute is used to display the BOX border color, which is divided into border-top-color, border-right-color, border-bottom-color, border-right-color and border- color attribute, the attribute value is color, which can be expressed in hexadecimal or rg b(). The attributes are shown below:
Attribute name: 'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color',
'border-color'
Attribute value:
Initial value: Initial value of element color
Suitable object: All elements
Whether to inherit: no
Percentage Note: Prohibited
border-color is a shortcut, the order is top, right, bottom, left, and the values ​​are separated by spaces.
border-style attribute:
border-style attribute is used to set the style of the BOX object border. Its attribute value is the keyword specified by CSS. Normally, you cannot see border because the initial value is none.See the attributes below:
Attribute names: 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style', 'border-style'
Attribute value:
Initial value: none
Applicable objects: all elements
Whether to inherit: no
Percentage remarks: prohibited
border-color is a shortcut, the order is top right Bottom left, values ​​are separated by spaces. The names and meanings of the
attribute values ​​are as follows:
none: No border.
dotted: The border is a dotted line.
dashed: The border is a long and short line.
solid: The border is a solid line.
double: The border is double line.
groove, ridge, inset and outset: display 3D borders with different effects (according to the color attribute).
border attribute:
border attribute is a shortcut to Border. The attribute values ​​are separated by spaces. The order is "border width border style border color", for example:

hello!

You can also use border-top, border-right, border-bottom, and border-left as shortcuts for top, right, bottom, and left respectively. The order of attribute values ​​is the same as that of the border attribute.
CSS2 Quick Reference Three
Keywords: Others
3. Layout (Layout) attribute:
In previous HTML, the position of elements could only be determined by the sequential arrangement of elements, while in CSS Here you can position elements more precisely. Netscape once proposed the Layer tag, which is very good for precise layout, but it was not recognized by the W3C. The W3C proposed a function similar to the Layer tag in CSS.
position attribute:
The position attribute is used to determine the position type of the element. For details, see attributes:
Attribute name: 'position'
Attribute value: absolute | relative | static
Initial value: static
Suitable objects: All elements
Whether to inherit: no
Percentage remarks: Prohibited
The attribute values ​​respectively represent:
absolute: absolute position on the screen.
relative: relative position on the screen.
static: inherent position.
direction attribute:
The direction attribute determines the arrangement direction of the BOX. For details, see attributes:
Attribute name: 'direction'
Attribute value: ltr| rtl
Initial value: ltr
Suitable Object: All elements
Whether to inherit: yes
Percentage Note: Prohibited
float and clear attributes:
In HTML, you can choose the floating position of the picture. Now the BOX object can also choose to float through CSS. location.改变BOX的float属性，BOX将飘浮在其他元素的左或右方：  
属性名称: 'float'  
属性值: left| right|none  
初始值: none  
适合对象: 所有元素  
是否继承: no  
百分比备注: 被禁止  
例如：  
  
  

  
  
Some sample text that has no other...  
  
相反的，使用clear属性将禁止元素在BOX的左方或右方飘浮：  
属性名称: 'clear'  
属性值: left| right|both|none  
初始值: none  
适合对象: 所有元素  
是否继承: no  
百分比备注: 被禁止  
绝对位置属性：  
绝对位置属性有四个属性：top、right、bottom和left，属性值为长度单位或百分数：  
属性名称: 'top'、'right'、'bottom'、'left'  
属性值: ||auto  
初始值: none  
适合对象: 所有元素  
是否继承: no  
百分比备注: 被禁止  
利用以上属性，用户就可以精确定义元素的位置，如：  

  
I used two red hyphens to serve as a change bar. They  
will "float" to the left of the line containing THIS  
--  
word.

z-index attribute:
Allows overlapping display of elements in CSS, so there is a problem of display order. The z-index attribute describes the front and rear position of the element. If the computer screen is regarded as an X-Y plane, Then the Z axis is perpendicular to the screen, and z-index uses an integer to represent the front and back position of the element. The larger the value, it will be displayed in a relatively front position, and CSS agrees to use negative numbers in z-index.
Attribute name: 'z-index'
Attribute value: auto|
Initial value: auto
Suitable object: Elements using the position attribute
Whether to inherit: no
Percentage remarks: Prohibited
width attribute:
Specifies the width attribute of BOX, so that the width of the BOX does not depend on the content it contains:
Attribute name: 'width'
Attribute value: | The min-width and max-width properties are also provided to make the width of the BOX between the minimum width and the maximum width. Attribute name: 'min-width'
Attribute value:
|

Initial value: 0
Suitable objects: all
Whether to inherit: no
Percentage remarks : Depends on the width of the parent element Attribute name: 'max-width' Attribute value:
|

Initial value: 100%
Suitable objects: all
Whether to inherit: no
Percentage Note: Depends on the width of the parent element height attribute: The same BOX also has a height attribute to control its own height:
Attribute name: 'height'
Attribute value:
|
| auto
Initial value: auto
Suitable object: block element
Whether to inherit: no
Percentage Note: Depends on the height of the parent element The min-height and max-height properties are also provided in CSS to make the height of the BOX between the minimum height and the maximum height. Attribute name: 'min-height'
Attribute value:
|

Initial value: 0
Suitable objects: all
Whether to inherit: no
Percentage remarks : Depends on the height of the parent element Attribute name: 'max-height' Attribute value:
|

Initial value: 100%
Suitable object: all
Whether to inherit: no
Percentage Note: Depends on the height of the parent element overflow attribute: When specifying the width and height of an element, if the area of ​​the element is not enough to display the entire content, overflow will be used Attributes:
Attribute name: 'overflow'
Attribute value: visible | hidden | scroll | auto
Initial value: visible
Suitable object: element's position attribute
Whether to inherit: no
Percentage Note: Prohibited
The meaning of the attribute value is as follows:
visible: Expand the area to display all content.
hidden: Hide content that is out of range.
scroll: Displays a scroll bar on the right side of the element.
auto: When the content exceeds the area of ​​the element, the scroll bar is displayed.
clip attribute:
CSS also provides a clip attribute, which can cut the element area into various shapes, but currently only a square one is provided:
Attribute name: 'clip'
Attribute value:
| auto
Initial value: auto
Suitable element: The position attribute of the element is set to absolute
Whether to inherit: no
Percentage Note: Prohibited
The value is rect(top right bottom left).
line-height and vertical-align attributes:
The line-height attribute can specify the line spacing inside the element, using length units or percentages:
Attribute name: 'line-height'
Attribute value: normal | | | >For example, in the following example, although the expression is different, the result is the same: DIV { line-height: 1.2; font-size: 10pt }
DIV { line-height: 1.2em; font-size: 10pt }
DIV { line-height: 120%; font-size: 10pt }
The vertical-align attribute determines the display of the element in the vertical position:
Attribute name: 'vertical-align'
Attribute value: baseline | sub | super | top | text-top | middle | bottom | text-bottom |
|

Initial value: baseline
Suitable object: inline elements
Suitable for inheritance: no
Percentage Note: Depends on the line-height attribute of the element. The meaning of the attribute value is as follows: baseline: Aligned with the baseline of the element.
middle: Aligned to the middle of the element.
sub: The word sinks.
super: word rises.
text-top: Align the text at the top.
text-bottom: Text bottom alignment.
Top: Aligned with the highest element in this row.
Bottom: Aligned with the lowest element in this row.
Visibility attribute:
This attribute is used to control the display or hiding of elements:
Attribute name: 'visibility'
Attribute value: inherit | visible | hidden
Initial value: inherit
Suitable objects: All elements
Whether to inherit: If the value is inherit, the parent element attributes are inherited
Percentage Note: Prohibited
4. Color and Background (Color and Background) attributes:
Introduced here About how to set the foreground color, background color and picture in CSS.
color attribute:
color attribute is used to set the foreground color of the element:
Attribute name: 'color'
Attribute value:

Initial value: based on the user's initial value Defined
Suitable objects: All elements
Whether to inherit: yes
Percentage Note: Prohibited
The value of the color attribute can be a hexadecimal value, the rgb() function or a color name recognized by CSS. For example: EM { color: red }
EM { color: rgb(255,0,0)}
Background attribute:
background-color attribute is used to set the background color. The initial value is Transparent:
Attribute name: 'background-color'
Attribute value:
| transparent
Initial value: transparent
Suitable object: all elements
Whether to inherit: no
Percentage Note: Forbidden
The backgroud-image attribute is used to set the background image: Attribute name: 'background-image'
Attribute value:
| none
Initial value: none
Suitable objects: All elements
Inherited or not: no
Percentage remarks: Prohibited
The url can be an absolute address or a relative address, for example: BODY { background-image: url( marble.gif) }
P { background-image: none }
The above two attributes can also be achieved using ordinary HTML attributes. The following attributes are CSS extensions to the original HTML.
The background-repeat attribute is used to describe the repeated arrangement of background images:
Attribute name: 'background-repeat'
Attribute value: repeat | repeat-x | repeat-y | no-repeat
Initial value: repeat
Suitable objects: All elements
Whether to inherit: no
Percentage Remarks: Prohibited
The meaning of the attribute value is:
repeat: two along the X-axis and Y-axis The direction repeats the image.
repeat-x: Repeat the image along the X-axis direction.
repeat-y: Repeat the image along the Y-axis direction.
none: No duplicate images.
For example:
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
}
/* means repeating the image along the Y axis" pendant.gif", and the rest uses red as the background color*/
The background-attachment attribute indicates how the background image is displayed when the entire document is scrolled. It has two attribute values: fixed and scroll. Fixed is equivalent to the watermark effect in IE4, which means that when dragging the document, the background is relatively static, while scroll scrolls with the document. The
background-position attribute is used to specify the position where the background image is displayed:
Attribute name: 'background-position'
Attribute value: [ | ]{1,2} | [top | center | bottom] | | [left | center | right]
Initial value: 0% 0%
Suitable object: container element
Whether to inherit: no
Percentage remarks: refer to the size of the element itself
The attribute value meaning is:
"top left" and "left top" mean "0% 0%". ​
"top", "top center" and "center top" mean "50% 0%".
"right top" and "top right" both mean "100% 0%".
"left", "left center" and "center left" mean "0% 50%".
"center" and "center center" mean "50% 50%".
"right", "right center" and "center right" all mean "100% 50%".
"bottom left" and "left bottom" mean "0% 100%".
"bottom", "bottom center" and "center bottom" all mean "50% 100%"
"bottom right" and "right bottom" mean "100% 100%".
For example:
BODY { background: url(banner.jpeg) right top } /* 100% 0% */
BODY { background: url(banner.jpeg) top center } /* 50% 0 % */
BODY { background: url(banner.jpeg) center } /* 50% 50% */
BODY { background: url(banner.jpeg) bottom } /* 50% 100% */
The background attribute is a shortcut to the above background attributes. The attributes and order are as follows:
Attribute name: 'background'
Attribute value: | | | | | | | |
Suitable objects: all elements
Inherited or not: no
Percentage Note: Only allowed in background-position
CSS2 Quick Reference No. 4
Keywords: Others
5. Font (Font) attributes:
Various attributes about fonts are defined here.
The font-family attribute defines the name of the font, which can be the name of a font or the name of a type of font. The name of the font must be exactly the same as that in the computer system:
Attribute name: 'font- family'
Attribute value: [[ | ],]* [ | ]
Initial value: Depends on user definition
Suitable object: all elements
Whether to inherit: yes
Percentage Note: Prohibited
If there are no fonts required by the style sheet in some computer systems, you can set a secondary font just in case. For example:
BODY { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif }
family-name refers to a certain font, such as Heisi Mincho W3, generic-family refers to a certain type of font, Such as serif.
The font-style attribute describes the degree of slant of the font:
Attribute name: 'font-style'
Attribute value: normal | italic | oblique
Initial value: normal
Suitable objects: all elements
Whether to inherit: yes
Percentage remarks: prohibited
font-variant attribute:
Attribute name: 'font-variant'
Attribute value: normal | small-caps
Initial value : normal
Suitable for: All elements
Whether to inherit: yes
Percentage Note: Forbidden
Lowercase letters in an element using the small-caps attribute will appear smaller than normal uppercase letters Some.
The font-weight attribute is used to describe the font weight.
Attribute name: 'font-weight'
Attribute value: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Initial value: normal
Suitable objects: all elements
Whether to inherit: yes
Percentage remarks: prohibited
100 to 900 represents 9 different font weights, 400 represents normal, 700 represents bold, and 900 is the heaviest font , bolder or lighter indicates that the font weight is one level higher or lower than the parent element. For example, if the parent element has a font weight of 400, then bolder represents a font weight of 500. If the parent element itself has a font weight of 9 00, then after bolder, the font weight will still be 900, same for lighter. Some fonts do not have a full range of weights from 100 to 900, maybe from 300 to 700, so the minimum and maximum weights are also 300 to 700. For example:
P { font-weight: normal } /* 400 */
H1 { font-weight: 700 } /* bold */ The
font-size attribute describes the size of the font:
attribute Name: 'font-size'
Attribute value: | | | Percentage note: relative to parent element's font size
This attribute can use absolute size or relative size. Absolute size can be used, as shown by the following keywords:
xx-small | x-small | small | medium | large |
Relative size can be described using: larger or smaller.
For example:
P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5 em } The
Font attribute is a shortcut to the above attributes. The attributes are as follows:
Attribute name: 'font'
Attribute value: [ [ | | | | ]? [/ font: 12pt/14pt sans-serif } P { font: 80% sans-serif } P { font: x-large/110% "new century schoolbook", serif } P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }
6. Text (Text) attributes:
The attributes here will affect the text display in the WEB document.
text-indent attribute describes the indentation degree of text:
Attribute name: 'text-indent'
Attribute value:
|

Initial value: 0
Suitable for objects : Container element
Whether to inherit: yes
Percentage Note: Depends on the width of the parent element
The following example shows that the indent value of the paragraph is 3em: P { text-indent: 3em } Alignment attribute indicates the alignment of text:
Attribute name: 'alignment'
Attribute value: left | right | center | justify
Initial value: as defined by user
Suitable object: block-level elements
Whether to inherit: yes
Percentage remarks: prohibited underline | | overline | | line-through | | blink ]
Initial value: none
Suitable objects: all elements
Whether to inherit: no (see clarification below)
Percentage remarks: prohibited
The meanings of the attribute values ​​are:
underline: underline.
overline: underline.
line-through: delete the line.
blink: Blink (like the function of the blink tag in Navigator)
The text-shadow attribute can add a shadow effect to the text:
Attribute name: 'text-shadow'
Attribute value: none |
[,
]*
Initial value: none
Suitable objects: all
Whether to inherit: No
Percentage Note: Only valid when describing transparency
For example:
P { text-shadow: black }
The above example will display a black shadow on the lower right side of the text, and the shadow will increase the area of ​​the BOX.
The letter-spacing attribute indicates the word spacing of the text: Attribute name: 'letter-spacing'
Attribute value: normal | | auto
Initial value: normal
Suitable objects: all elements
Whether to inherit: yes
Percentage Note: Prohibited 'word-spacing'
Attribute value: normal |

Initial value: normal
Suitable objects: all elements
Whether to inherit: yes Percentage remarks: prohibited
For example :
H1 { word-spacing: 1em }
text-transform attribute can display the text in the BOX in the specified uppercase or lowercase form:
Attribute name: 'text-transform'
Attribute value : capitalize | uppercase | lowercase | none
Initial value: none
Suitable objects: all elements
Whether to inherit: yes
Percentage note: prohibited
The meaning of the attribute value is:
capitalize : Capitalize the first letter of each sentence in the BOX.
uppercase: Change all letters in BOX to uppercase.
lowercase: Change all letters in BOX to lowercase.
The White-space attribute describes how to display spaces in text. In HTML, spaces are omitted, which means that no matter how many spaces you enter at the beginning of a paragraph mark, it will be invalid. There are two ways to enter spaces. There are two methods, one is to directly enter the code of the space " ", or use the

 tag. There are also attributes similar to pre in CSS: 
Attribute name: 'white-space' 
Attribute value: normal | pre | nowrap 
Initial value: normal 
Suitable object: container element 
Whether to inherit: yes 
Percentage note: prohibited 
For example: 
PRE { white-space: pre } 
P { white-space: normal } 

CSS2 Quick Reference 5 
Keywords: Others 
7. List attributes: 
The attributes here are used to describe lists (list ) a series of attributes. 
list-style-type attribute describes the symbol used before each item in the list: 
Attribute name: 'list-style-type' 
Attribute value: disc | circle | square | decimal | lower- roman | upper-roman | lower-alpha | upper-alpha | none 
Initial value: disc 
Suitable object: list element 
Whether to inherit: yes 
Percentage remarks: prohibited The meaning is: 
disc: round cake shape. 
circle: hollow circle. 
square: Square. 
decimal: decimal value. 
lower-roman: lowercase Roman numerals. 
upper-roman: Uppercase Roman numerals. 
lower-alpha: lowercase Greek letters. 
upper-alpha: uppercase Greek letters. 
For example: 
 

 
 
 This is the first item. 
 This is the second item. 
 This is the third item. 


 


 
You can also use list -style-image replaces the symbols in front of the list with graphics: 
Attribute name: 'list-style-image' 
Attribute value:  | none 
Initial value: none 
Suitable object: List element 
 Whether to inherit: yes  Percentage Note: Forbidden 

 can be an absolute address or a relative address.
list-style-position屬性用來描述清單的位置顯示：   
屬性名稱: 'list-style-position'   
屬性值: inside | outside   
初始值: outside 物件: 列表元素   
是否繼承: yes   
百分比備註: 被禁止   
屬性值outside和inside分別表示在BOX外部顯示或內部顯示，例如：   
   
UL { list-style: outside }   UL.compact { list-style: inside }  
 o>. > second list item comes second   
   


   


first 世界🎜>
   
list- style屬性為上述屬性的捷徑：   
屬性名稱: 'list-style'   
屬性值: 
 | | 
 | | 
 物件: 列表元素   
是否繼承: yes   
百分比備註: 被禁止   
例如：   
UL { list-style ~ UL { list-style: circle outside } /* 對任何UL內部的UL標記有效*/   8、表格屬性：   由於表格中的大部分屬性已經在以上的各類屬性中探討過了，所以這裡只有兩個屬性介紹：   row-span屬性描述表格跨越的行的數目：   
屬性名稱: 'row-span'   
屬性值: 
   
初始值 
初始值。 '   
屬性值: 
   
初始值: 1   
適合對象: 表格元素   
是否繼承: no   百分比備註 百分比備註記🎜>cursor屬性，使用者可以指定在某個元素上要使用的遊標形狀：   
屬性名稱: 'cursor'   
屬性值: auto | crosshair | default | pointer auto | crosshair | default | pointer auto | crosshair | default resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | 是否繼承: yes   
百分比備註: 被禁止   
屬性值分別代表滑鼠指標在windows操作裡的各種形狀，另外還可以指定指標圖示的url位址，不過CSS仍暫時不支援ani動畫遊標。 
到此，所有關於CSS現有的屬性都介紹完了（還有一些關於聽覺方面的樣式單，就不再作介紹），本文也該結束了，雖然現在支持樣式單的瀏覽器種類還不多，但也佔了大半，樣式單遲早會成為瀏覽器的統一標準，原因有兩個：一、樣式單是W 3C唯一接受的樣式標準，而且沒有任何跡象表明W3C會把javascript樣式單作為樣式單標準；二則是CSS有效的解決了把事件引入元素的問題，配合腳本程序，是動態HTML不可缺少的一部分，嘗試著用樣式單建立W eb頁，你會發現它真的很方便。希望我的這些努力能為你熟練樣式單盡一點力。