自從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中應該是這樣的：
這裡顯示紅色字
這裡顯示紅色字
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.
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:
Some sample text that has no other...
相反的，使用clear属性将禁止元素在BOX的左方或右方飘浮：
属性名称: 'clear'
属性值: left| right|both|none
初始值: none
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止
绝对位置属性：
绝对位置属性有四个属性：top、right、bottom和left，属性值为长度单位或百分数：
属性名称: 'top'、'right'、'bottom'、'left'
属性值:
初始值: 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:
Attribute value:
|
Initial value: 0
Suitable objects: all
Whether to inherit: no
Percentage remarks : Depends on the width of the parent element
|
Initial value: 100%
Suitable objects: all
Whether to inherit: no
Percentage Note: Depends on the width of the parent element
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
Attribute value:
|
Initial value: 0
Suitable objects: all
Whether to inherit: no
Percentage remarks : Depends on the height of the parent element
|
Initial value: 100%
Suitable object: all
Whether to inherit: no
Percentage Note: Depends on the height of the parent element
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
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 |
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
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: 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 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:
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: [
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:
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:
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 |
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
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.
Attribute name: 'list-style-image'
You can also use list -style-image replaces the symbols in front of the list with graphics:
Attribute value: | none
Initial value: none
Suitable object: List element
Whether to inherit: yes
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屬性為上述屬性的捷徑：
是否繼承: yes
屬性名稱: 'list-style'
| |
物件: 列表元素
百分比備註: 被禁止
例如：
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 |
百分比備註: 被禁止
屬性值分別代表滑鼠指標在windows操作裡的各種形狀，另外還可以指定指標圖示的url位址，不過CSS仍暫時不支援ani動畫遊標。
到此，所有關於CSS現有的屬性都介紹完了（還有一些關於聽覺方面的樣式單，就不再作介紹），本文也該結束了，雖然現在支持樣式單的瀏覽器種類還不多，但也佔了大半，樣式單遲早會成為瀏覽器的統一標準，原因有兩個：一、樣式單是W 3C唯一接受的樣式標準，而且沒有任何跡象表明W3C會把javascript樣式單作為樣式單標準；二則是CSS有效的解決了把事件引入元素的問題，配合腳本程序，是動態HTML不可缺少的一部分，嘗試著用樣式單建立W eb頁，你會發現它真的很方便。希望我的這些努力能為你熟練樣式單盡一點力。
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
