CSS2快速參考_CSS/HTML
- WBOY原創
- 2016-05-16 12:12:121666瀏覽
自從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.
利用和🎜>利用🎜>ID顯示內容。
其中.someclass代表類，#someID代表ID。類別和ID也可以和元素標記合用，例如：
p.bigFont {……}
則表示必須在某個為bigFont類別的P標記（
）才執行樣式單，同樣的也適合於ID。
為了簡化宣告某些重複屬性的標記，可以用「,」把不同的選擇器隔開，表示它們都表示成相同的屬性，如：
H1,H2 {color:red}
Div, p.mytext {……}
有時我們也希望能夠在特定的範圍內使樣式單生效：
p em {color:red}
元素標記間又空格隔開，表示表示在
和
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
Margin屬性：
Margin屬性分為margin-top、margin-right、margin-bottom、margin-left和margin五個屬性，分別表示BOX裡內容離邊框的距離，它的屬性值是數值單位，可以是長度、百分比或auto，margin甚至可以設為負值，造成B OX與BOX之間的重疊顯示，關於margin的屬性詳見下表：
屬性名稱: 'margin-top'、 'margin-right'、'margin-bottom'、'margin-left'
屬性值:
初始值: 0
適合物件: >百分比備註: 相對於BOX的寬度
例如：
H1 { margin-top: 2em }
H2 { margin-right 12.3%
H2 { margin-right 12.3%
H2 { margin-right 12.3%
H2 { margin-right 12.3%直接使用margin屬性，例如：
BODY { margin: 1em 2em 3em 2em}
等同於：
BODY {
等於：
BODY {
>margin-bottom:3em;
margin-left:2em;
}
margin屬性後面可以有四個值，中間用空格隔開（記住不是逗號），順序是「上右下順序左”，當然margin後面可以不足四個值，例如：
BODY { margin: 2em } /* 所有的margin都設為2em */ BODY { margin: ，右左margin為2em */
BODY { margin: 1em 2em 3em } /* 上margin為1em，右左margin為2em，下margin */製作BOX的邊框和內容之間插入多少空間，和margin屬性類似，它也分為上右下左和一個快捷方式padding，關於margin的屬性詳見下表：
屬性名稱: 'padding-top' 、'padding-right'、'padding-bottom'、'padding-left' 、'padding'
屬性值:
初始值: 0
適合物件:
適合物件: 繼承: no
百分比備註: 相對於BOX的寬度
例如：
BLOCKQUOTE { padding-top: 0.3em }
平常我們在查看HTML文件時，看到一段文字，並不會把它當作一個BOX，實際上BOX是有邊框的，只是平時不顯示出來罷了，而border屬性就是用來描述BOX邊框的。 Border屬性分為border-width、border-co lor和border-style，而這些屬性下面又有分支。
border-width屬性：
border-width屬性又分為：border-top-width、border-right-width、border-bottom-width、border-left-width、border-width屬性，border- width以長度表示為「thin/medium/thick」或長度單位表示，以下是b order-width屬性的詳細清單：
屬性名稱: 'border-top-width'、'border-right-width'、 'border-bottom-width'、'border-left-width'、'border-width'
屬性值:
初始值: medium
適合對象: : no
border-width為捷徑，順序為上右下左，數值之間以空格隔開。
border-color屬性：
border-color屬性用來顯示BOX邊框顏色，分為border-top-color、border-right-color、border-bottom-color、border-right-color、border- color屬性，屬性值為顏色，可用十六進位表示，也可用rg b()表示，屬性見下：
屬性名稱: 'border-top-color'、'border-right-color'、 'border-bottom-color'、'border-left-color'、
'border-color'
屬性值:
初始值: 元素顏色的初始值所有元素
是否繼承: no
百分比備註: 被禁止
border-style屬性：
border-style屬性用來設定BOX物件邊框的樣式，它的屬性值為CSS規定的關鍵字，平常看不到border是因為，初始值是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'
属性值:
初始值: 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屬性：
在CSS中允許元素的重疊顯示，這樣就有一個顯示順序的問題，z-index屬性描述了元素的前後位置，如果把電腦螢幕看作X-Y平面的話，那麼Z軸就是垂直於螢幕的，z-index使用整數表示元素的前後位置，數值越大，就會顯示在相對前方的位置，並且C SS同意在z-index中使用負數。
屬性名稱: 'z-index'
屬性值: auto|
初始值: auto
適合物件: 使用position屬性的元素百分比備註: 被禁止
width屬性：
規定BOX的width屬性，可以使BOX的寬度不依賴它所包含的內容的多少：
屬性名稱: 'width':
屬性值
屬性值 |
適合對象: 塊元素
是否繼承: no
SS也提供了min-width和max-width屬性，使得BOX的寬度在最小寬度和最大寬度之間。
屬性名稱: 'min-width'
屬性值:
|
屬性名稱: 'max-width'
屬性值:
|
初始值: 10%
初始值: 10%
是否繼承: no
相同的BOX還有height屬性控製本身的高度：
屬性名稱: 'height' >屬性值:
|
| auto
初始值: auto
適合對象: 塊元素
是否繼承:1no >在CSS中也提供了min-height和max-height屬性，使得BOX的高度在最小高度和最大高度之間。
屬性名稱: 'min-height'
初始值: 0 適合對象附註:依父元素的height而定
屬性名稱: 'max-height'
屬性值:
|
初始值:是否繼承: no
在規定元素的寬度和高度時，如果元素的面積不足以顯示全部內容的話就要用到overflow屬性：
屬性名稱: 'overflow'
屬性值: visible | hidden | scroll | auto
初始值: visible
適合對象: 元素的position屬性
是否繼承: no
visible：擴大面積以顯示所有內容。
hidden：隱藏超出範圍的內容。
scroll：在元素的右邊顯示一個捲軸。
auto：當內容超出元素面積時，顯示捲軸。
clip屬性：
CSS也提供了一種clip屬性，可以把元素區域剪切成各種形狀，但目前提供的只有方形一種：
屬性名稱: 'clip'
屬性值:
| auto
初始值: auto
適合元素: 元素的position屬性設為absolute
值為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 |
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.
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 the 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.
例如：
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
「在軸上重複圖片pendant.gif”，其餘部分以紅色為背景色*/
background-attachment屬性表示在滾動整個文件時，背景圖片的顯示方式。它的屬性值有兩種：fixed和scroll，fixed相當於IE4裡的水印效果，也就是說在拖曳文件時，背景相對是靜止的，scroll則和文檔一起滾動。
background-position屬性用來指定背景圖片顯示的位置：
屬性名稱: 'background-position'
屬性值: [
|
適合對象: 容器元素
是否繼承: no
百分比備註: refer to the size of the element itself
其中屬性值意義為：
「top left」與「left top」表示「0% 0%」。
「top」、「top center」和「center top」表示「50% 0%」。
「right top」和「top right」都表示「100% 0%」。
「left」、「left center」和「center left」表示「0% 50%」。
「center」和「center center」表示「50% 50%」。
「right」、「right center」和「center right」都表示「100% 50%」。
「bottom left」和「left bottom」表示「0% 100%」。
「bottom」、「bottom center」和「center bottom」都表示「50% 100%」
「bottom right」和「right bottom」表示「100% 100%」。
例如：
BODY { background: url(banner.jpeg) right top } /* 100% 0% */ BODY { background: url(banner.jpeg) center } /* 50% 50% */
BODY {00%: url(banner.jpeg 🎜>background屬性是上述背景屬性的捷徑，屬性與順序如下：
屬性名稱: 'background'
屬性值:
| |
| | | 適合對象: 所有元素 是否繼承: no 百分比備註: 只在background-position中容許使用 5.字體（Font）屬性：
這裡定義了關於字體的各種屬性。
font-family屬性定義字體的名稱，可以是一個字體的名稱，也可以是一類字體的名稱，字體的名稱一定要跟電腦系統裡的完全一樣：
屬性名稱: 'font- family'
屬性值: [[
|
],]* [
|
]
初始值: |
]
有些電腦系統中如果沒有樣式單要求的字體，可以再設一個次字體以備萬一。例如：
BODY { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif }
family-name是指確定的某一字體，如Heis-3Mgeneoo如serif。
font-style屬性描述字體的傾斜程度：
屬性名稱: 'font-style'
屬性值: normal | italic | oblique 初始值: italic | oblique
是否繼承: yes
百分比備註: 被禁止
font-variant屬性：
屬性名稱: 'font-variant' 適合對象: 所有元素
是否繼承: yes
百分比備註: 被禁止
一個使用了small-caps屬性的元素中的小寫字母看起來比正常的大寫字母看起來小字母的小字母。一些。
font-weight屬性用來描述字重。
屬性名: 'font-weight'
屬性值: normal | bold | bolder | lighter | 100 | 200 300 | 100 | 200 300 | 100 | 200 300 900
初始值: normal
適合對象: 所有元素
是否繼承: yes
百分比備註: 禁止
100到900代表9種不同的字重，400代表normal，700代表bold，900代表是最重的代表是最重的。 ，bolder或lighter表示字體的字重比父元素高或低一級，例如父元素字重為400，則bolder代表字重500，如果父元素本身字重為9 00，那麼bolder後，字重還是900，同樣的lighter也一樣。有些字體並沒有100到900那麼全的字重，也許是從300到700，那麼字重的最小和最大值也為300到700。例如：
P { font-weight: normal } /* 400 */
H1 { font-weight: 700 } /* bold { font-weight: 700 } /* bold { font-weight: 700 } /* bold { font-weight: 700 } /* bold { font>名稱: 'font-size'
屬性值:
|
|
|
初始值: med
百分比備註: relative to parent element's font size
此屬性可使用絕對大小，也可使用相對大小，其中絕對大小可使用，下列關鍵字表示：
xx-small | small | medium | large | x-large | xx-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.
The 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 Note: Prohibited
text-decoration attribute describes the modification method of text:
Attribute name: 'text-decoration'
Attribute value: none | underline | | overline | | line-through | | blink ]
Initial value: none
Applicable 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:
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
Attribute value 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.
You can also use list -style-image replaces the symbols at the front of the list with graphics:
This is the second item.
This is the third item.
Attribute name: 'list-style-image' Attribute value:
| none
Initial value: none
Suitable object: List element
Percentage Note: Forbidden
can be an absolute address or a relative address.
The list-style-position attribute is used to describe the position display of the list:
Attribute name: 'list-style-position'
Attribute value: inside | outside
Initial value: outside
Suitable Object: List element
Whether to inherit: yes
Percentage Note: Prohibited
The attribute values outside and inside represent display outside or inside the BOX respectively, for example:
UL { list-style: outside } UL.compact { list-style: inside }
first list item comes first
second list item comes second
first list item comes first
second list item comes second
list- The style attribute is a shortcut for the above attributes:
Attribute name: 'list-style' Attribute value: | | | |
Initial value: no
Suitable Object: List element
Whether to inherit: yes
Percentage Note: Prohibited
For example:
UL { list-style: upper-roman inside } /* Valid for any UL*/
UL ~ UL { list-style: circle outside } /* Valid for any UL mark inside UL*/
8. Table attributes:
Since most of the attributes in the table have been discussed in the above various attributes , so there are only two attributes introduced here:
row-span attribute describes the number of rows spanned by the table:
Attribute name: 'row-span'
Initial value : 1
Suitable objects: table elements
Whether to inherit: no
Percentage remarks: prohibited
column-span attribute describes the number of columns that the table spans:
Attribute name: 'column-span '
Initial value: 1
Suitable object: Table element
Whether to inherit: no
Percentage Note: Prohibited
9. User interface attributes:
cursor attribute, the user can specify the cursor shape to be used on an element:
Attribute name: 'cursor'
Initial value: auto
Suitable object: all elements
Whether to inherit: yes
Percentage Note: Prohibited Animated cursor.
At this point, all the existing properties of CSS have been introduced (there are also some auditory style sheets, which will not be introduced again). This article should come to an end, although the types of browsers that currently support style sheets are still limited. Not many, but they account for most of them. Style sheets will become a unified standard for browsers sooner or later. There are two reasons: 1. Style sheets are the only style standards accepted by W3C, and there is no sign that W3C will use JavaScript style sheets as a standard. Style sheet standards; secondly, CSS effectively solves the problem of introducing events into elements. Cooperating with scripts, it is an indispensable part of dynamic HTML. Try using style sheets to create Web pages, and you will find that it is really convenient. I hope my efforts can help you master the style sheets proficiently.