CSS 属性大全 - html/css语言栏目：html.css

CSS 属性大全 - html/css语言栏目：html.css - 自学ph

来源：自学PHP网时间：2015-04-14 14:51 作者：阅读:次

[导读] CSS 属性大全文字属性「字体族科」（font-family），设定时，需考虑浏览器中有无该字体。「字体大小」（font-size），注意度量单位。《绝对大小》|《相对大小》|《长度》|《百分比》(一...

CSS 属性大全

文字属性

「字体族科」（font-family），设定时，需考虑浏览器中有无该字体。

「字体大小」（font-size），注意度量单位。《绝对大小》|《相对大小》|《长度》|《百分比》(一般设置双数)

「字体加粗」（font-weight），除了normal（正常）、bold（粗体）、bolder（特粗）、lighter（细体）外，还有9种以像素为度量为单位的设置方式（100，200，300，400，500，600，700，800，900）。

「字体风格」（font-style），也就是字型。

（

normal : 正常的字体

italic : 斜体。对于没有斜体变量的特殊字体，将应用oblique

oblique : 倾斜的字体

）

「字体变形」（font-variant），字体变形属性决定了字体显示是normal (普通) ，还是

Small-caps（小型大写字母）当文字中所有字母都是大写的时候，小型大写字母（值）会显示比小写字母稍大的大写字符。

文本属性

「文字间距」（word-spacing），主要用于控制文字间相隔的距离。有正常（normal）和值（自定义间隔值）两种选择方式。

「字母间距」（letter-spacing），其作用与字符间距类似，也有正常（normal）和值（自定义间隔值）两种选择方式。

「垂直对齐」（vertical-align），控制文字或图像相对于其母体元素的垂直位置。如将一个2×3像素的GIF图像同其母体元素文字的顶部垂直对齐，则该GIF图像将在该行文字的顶部显示。共有基线（baseline，将元素的基准线同母体元素的基准线对齐）、下标（sub，将元素以下标的形式显示）,上标（super，将元素以上标的形式显示）、顶部（top，将元素顶部同最高的母体元素对齐）、文本顶对齐（text-top，将元素的顶部同母体元素文字的顶部对齐）、中线对齐（middle，将元素的中点同母体元素的中点对齐）、底部（bottom，将元素的底部同最低的母体元素对齐）及值（自定义）等9种选择。

「文本排列」（text-align），设置块的水平对齐方式。共有左对齐（left）、右对齐（right）、居中（center）和均分（justify）等4种选择。

「行高」（line-height），就是行距。Normal |<数字> |<长度> |<百分比>

当值为数字时，行高由元素字体大小的量与该数字相乘所得。

百分比的值相对于元素的字体大小而定。

不允许使用负值。

「文本转换」（text-transform），这项属性能轻而易举地控制字母大小写，有首字大写（capitalize、大写（uppercase）、小写（lowercase）和无（none，使所有继承文字和变形参数被忽略，文字将以正常形式显示）等4种。

「文字缩进」（text-indent），控制块的缩进程度。<长度> |<百分比>

「空白间距」（white-space），在HTML中，空格是被省略的；在CSS中则使用属性（white-space）控制空格的输入。共有正常（normal）、保留（pre）和不换行（nowrap）等3种选择。

「修饰」（text-decoration），用于控制链接文本的显示形态，有下划线（underline）、无下划线（overline）、删除线（line-through）、闪烁（blink）和无（none，使上述效果均不会发生）等5种修饰方式。但IE4不支持文字闪烁。

3颜色及背景属性

[颜色」（color），设置颜色。Color:blure color:#00080 color:#0c0

「背景颜色」（background-color），设置背景颜色。background-color:blurebackground-color:#00080 background-color:#0c0

「背景图像」（background-image），设置网页背景图像。background-image:url(/images/xx.gif)

「背景重复」（background-repeat），控制背景图像的平铺方式，有不重复（no-repeat）、重复（repeat，沿水平、垂直方向平铺）、横向重复（repeat-X，图像沿水平方向平铺）和纵向重复（repeat-Y，沿图像垂直方向平铺）等4种选择。

「背景附件」（background-attachment），用于控制背景图像是否会随页面的滚动而一起滚动。有固定（fixd，文字滚动时，背景图像保质固定）和滚动（scroll，背景图像随文字内容一起滚动）两种选择。

「水平位置」/「垂直位置」（background-position），确定背景图像的水平、垂直位置

。共有左对齐（left）、右对齐（right）、顶部（top）、底部（bottom）、居中（center）和值（自定义背景图像的起点位置，可使用户对背景图像的位置做出更精确的控制）等6种选择。

[背景] （background），《背景颜色》||《背景图像》||《背景重复》||《背景附件》||《背景位置》

4.文字连接属性

a:link

a:visited

a:active

a:hover

鼠标光标样式：

链接手指cursor:pointer

十字体 cursor:crosshair

箭头朝下 cursor:s-resize

十字箭头 cursor:move

箭头朝右 cursor:move

加一问号 cursor:help

箭头朝左 cursor:w-resize

箭头朝上 cursor:n-resize

箭头朝右上 cursor:ne-resize

箭头朝左上 cursor:nw-resize

文字I型 cursor:text

箭头斜右下 cursor:se-resize

箭头斜左下 cursor:sw-resize

漏斗 cursor:wait

边框

「边框宽度」（border-width），控制边框的宽度，其中分为4个属性：border-top-width顶边框的宽度、border-right-width右边框的宽度、border-bottom-width底边框的宽度、border-left-width左边框的宽度。

「边框颜色」（border-color），设置各边框的颜色。若要使边框的四边显示不同的颜色，可在设置中分别列出。如，

p{: #ff0000 #009900 #0000ff #55cc00}

浏览器将四种颜色依次理解为：上边框、右边框、底边框和左边框（自上开始顺时针）。

「边框样式」（border-style），设定边框的样式，共有无（none）、虚线（dotted）、点划线线（dotted）、点划线（dashed）、实线（solid）、双线（double）、槽状（grove）、脊状（ridge）、凹陷（inset）和凸起（outset）等9种。

「边框样式」（border）,<边框宽度> |<边框样式> |<边框颜色>

6．「盒子」属性

「宽」（width），确定盒子本身的宽度，可以使盒子的宽度不依靠它所包含的内容多少。<长度> |<百分比> |<auto>

「高」（height），确定盒子本身的高度。<长度> |<auto>

「浮动」（float），设置块元素的浮动效果。（left）|(right)|(none)

「清除」（clear），用于清除设置的浮动效果。（left）|(right)|(none)|(both)

「边距」（margin），控制围绕边框的边距大小。其中包含4个属性：margin-top控制上边距的宽度、margin-right控制右边距的宽度、margin-bottom控制下边距的宽度、margin-left控制左边距的宽度。

「补白」（padding），确定围绕块元素的空格填充数量，其中包含4个属性「padding-top控制上留白的宽度、padding-right控制右留白的宽度、padding-bottom控制下留白宽度、padding-left控制左留白的宽度。

7．列表

1. 列表元素：

ol 有序列表。

<ol>

</ol>

表现为：

1.项目1

2.项目2

3.项目3

ul 无序列表，表现为li前面是大圆点而不是123

<ul>

</ul>

表现为：

项目1

项目2

项目3

很多人容易忽略 dl dt dd的用法

dl 内容块

dt 内容块的标题

dd 内容

可以这么写：

<dl>

<dt>标题title</dt>

<dd>内容content1</dd>

<dd>内容content2</dd>

</dl>

表现为：

标题

内容

（内容是缩进的！）

8．定位

「类型」（position），用于确定定位的类型，共有绝对（absolute）、相对（relative）和静态（static）等3种选择。

「Z 轴」（z-index），用于控制网页中块元素的叠放顺序，可为元素设置重叠效果。该属性的参数值使用纯整数，值为0时，元素在最下层，适用于绝对定位或相对定位的元素。

「显示」（visibility）使用该属性可将网页中的元素隐藏，共有继承（inherit，继承母体要素的可视性设置）、可见（visible）和隐藏（hidden）等3种选择。

「溢出」（overflow），在确定了元素的高度和宽度后，如果元素的面积不能全部显示元素中的内容时，该属性做一日和尚撞一天钟起作用了。其中共有可见（visible，扩大面积以显示所有内容）、隐藏（hidden，隐藏超出范围的内容）、滚动（scroll，在元素的右边显示一个滚动条）和自动（auto，当内容超出元素面积时，显示滚动条）等4种选择。

「定位」，当为元素确定了绝对定位类型后，该组属性决定元素在网页中的具体位置。该组属性包含4个子属性，分别是「左」（属性名为「left」，控制元素左边的起始位置）、「上」（属性名为「top」，控制元素上面的起始位置）、「宽」或「高」（与「盒子」类属性面板中「宽」或「高」的属性作用相同）。

「剪辑」（clip），当元素被指定为绝对定位类型后，该属性可以把元素区域切成各种形状，但目前提供的只有方形一种。属性值为rect(top right bottomleft)，即：

rect(top right bottom left)，属性值的单位为任何一种长度单位。

9． [display]

值描述

none 此元素不会被显示。

block 此元素将显示为块级元素，此元素前后会带有换行符。

inline 默认。此元素会被显示为内联元素，元素前后没有换行符。

inline-block 行内块元素。（CSS2.1 新增的值）

*display:inline; *zoom:1;

list-item 此元素会作为列表显示。

run-in 此元素会根据上下文作为块级元素或内联元素显示。

table 此元素会作为块级表格来显示（类似<table>），表格前后带有换行符。

inline-table 此元素会作为内联表格来显示（类似<table>），表格前后没有换行符。

table-row-group 此元素会作为一个或多个行的分组来显示（类似<tbody>）。

table-header-group 此元素会作为一个或多个行的分组来显示（类似<thead>）。

table-footer-group 此元素会作为一个或多个行的分组来显示（类似<tfoot>）。

table-row 此元素会作为一个表格行显示（类似 <tr>）。

table-column-group此元素会作为一个或多个列的分组来显示（类似<colgroup>）。

table-column 此元素会作为一个单元格列显示（类似 <col>）

table-cell 此元素会作为一个表格单元格显示（类似 <td> 和<th>）

table-caption 此元素会作为一个表格标题显示（类似 <caption>）

inherit 规定应该从父元素继承 display 属性的值。

10．[分类属性]

「空白」（white-space），用于决定元素内的空格

Normal(将多个空格折叠成一个)

Pre(不折叠成空格)

Nowrap(不允许换行，除非遇到<br/>标记)

「目录样式类型」（list-style-type），带有显示值目录项元素

「目录样式图像」（list-style-image），带有显示值目录项元素

list-style-image:url(图片地址)

「目录样式位置」（list-style-position），带有显示值目录项元素

Inside (内部) | outside（外部—初始值）

「目录样式」（list-style），带有显示值目录项元素

《目录样式类型》| 《目录样式类型》| 《目录样式图像》

11．css 单位

[长度单位]

有效的相对单位

em(元素字体的高度)

ex(x-height,字母“x”的高度)

px(像素，相对于屏幕的分辨率)

有效的绝对单位

in(英寸，1英寸=2.54厘米)

cm(厘米，1厘米=10毫米)

mm(米)

pt(点，1点=1/72英寸)

pc(帕，1帕=12点)

[百分比单位]

百分比值是相对于其他数值，同样地用于定义每个属性，最经常使用

的百分比值是相对于元素的字体大小。

[颜色单位]

颜色值是一个关键字或一个RGB格式的数字

#rrggbb | #rgb | rgb(x,x,x)x是一个介乎0到255之间的整数（如，rgb(0,204,0)）

Rgb(y%,y%,y%)y是一个介乎0.0到100.0之间的整数（如，rgb(0%,80%,0%)）

这例子指定的是同一个颜色

12．css hack

由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,MozillaFirefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。

　　这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。

这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,也叫写CSS hack。

CSS Hack的原理是什么?

　　由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。

　　比如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" *"，但不能识别下划线"_"，而firefox两个都不能认识。等等

书写顺序，一般是将识别能力强的浏览器的CSS写在后面。

CSS Hack的写法！

比如要分辨IE6和firefox两种浏览器，可以这样写：

　　<style>

　　div{

　　background:green;

　　*background:red;

　　}

　　</style>

　　我在IE6中看到是红色的，在firefox中看到是绿色的。

　　解释一下：

　　上面的css在firefox中，它是认识不了后面的那个带星号的东东是什么的，于是将它过滤掉，不予理睬，解析得到的结果是:div{background:green},于是理所当然这个div的背景是绿色的。

　　在IE6中呢，它两个background都能识别出来，它解析得到的结果是:div{background:green;background:red;},于是根据优先级别，处在后面的red的优先级高，于是当然这个div的背景颜色就是红色的了。

　　CSS hack:区分IE6，IE7，firefox

　　区别不同浏览器，CSS hack写法：

　　区别IE6与FF：

　　background:orange;*background:blue;

　　区别IE6与IE7：

　　background:green !important;background:blue;

　　区别IE7与FF：

　　background:orange; *background:green;

　　区别FF，IE7，IE6：

　　 background:orange;*background:green;_background:blue;

　　background:orange;*background:green!important;*background:blue;

　　注：IE都能识别*;标准浏览器(如FF)不能识别*；

　　IE6能识别*，某些情况下不能识别 !important,

　　-----------------------------------------------------------------------------------------------

　　IE6支持重定义中的!important，例如：

　　.yuanxin {color:#e00!important;}

　　.yuanxin {color:#000;}

　　你将会发现定义了样式class="yuanxin"时，在IE下，字体显示为红色（#e00）。

　　但不支持同一定义中的!important。例如：

　　.yuanxin {color:#e00!important;color:#000}

　　此时在IE6下不支持，你将会发现定义了样式class="yuanxin"时，字体显示为黑色（#000）。

　　-----------------------------------------------------------------------------------------------

　　IE7能识别*，也能识别!important;

　　FF不能识别*，但能识别!important;

IE6 IE7 FF

　　* √ √

　　!important √ √

　　浏览器优先级别:FF<IE7<IE6,CSShack书写顺序一般为FF IE7 IE6

　　以: " #demo {width:100px;} "为例;

　　#demo {width:100px;}

　　*html #demo {width:120px;}

　　*+html #demo {width:130px;}

　　---------------

　　所以最后,#demo的宽度在三个浏览器的解释为:

　　FIREFOX:100px;

　　ie6:120px;

　　ie7:130px;

　　IE8 最新css hack：

　　"9"　例:"border:1px 9;".这里的"9"可以区别所有IE和FireFox.

　　"*"　IE6、IE7可以识别.IE8、FireFox不能.

　　"_"　IE6可以识别"_",IE7、IE8、FireFox不能.

在程序里加上这句话的意思就是：IE8里显示的布局和IE7里一样！

常用的css属性大全

一、html标签

<pre>...</pre>文字格式化

<div>......</div>列块容器

字体大小变化 <fontsize=?>想输入的字</font>

字体颜色 <fontcolor="...">想输入的字</font>

字体变粗<b>想输入的字</b>

字体变斜<i>想输入的字</i>

字体加下划线<u>想输入的字</u>

对正中央ㄉ语法 <palign="center">内容</p>

对正左边ㄉ语法 <palign="left">内容</p>

对正右边ㄉ语法 <p align="right">内容</p>

字体删除线<s>想输入的字</s>

字体设置<font">字体名称">想输入的字</font>

打字机字体<tt>想输入的字</tt>

上标字<sup>想输入的字</sup>

下标字<sub>想输入的字</sub>

水平线 <hr color="...">

换行输入想输入的字<br>想输入的字

超链接 <ahref="想链接网址">链接地的名称</a>

<ahref="mailto:填入email">要显示的字打这里</a>网络邮寄标签

贴图 <img src="图形的网址">

跑马灯(循环) <marqueebehavior=scroll>想输入的字</marquee>

外部文件导入格式标签

CSS外部导入格式：

直接引用：

<!--

id{...}

-->

</style>

javascript - 加载外部.js独立文件：

二、CSS文字属性：

color : #999999;

font-family : 宋体,sans-serif;

font-size : 9pt;

font-style:itelic;

font-variant:small-caps;

letter-spacing : 1pt;

line-height : 200%;

font-weight:bold;

vertical-align:sub;

vertical-align:super;

text-decoration:line-through;

text-decoration:overline;

text-decoration:underline;

text-decoration:none;

text-transform : capitalize;

text-transform : uppercase;

text-transform : lowercase;

text-align:right;

text-align:left;

text-align:center;

text-align:justify;

vertical-align属性

vertical-align:top;

vertical-align:bottom;

vertical-align:middle;

vertical-align:text-top;

vertical-align:text-bottom;

三、CSS符号属性：

list-style-type:none;

list-style-type:decimal;

list-style-type:lower-roman;

list-style-type:upper-roman;

list-style-type:lower-alpha;

list-style-type:upper-alpha;

list-style-type:disc;

list-style-type:circle;

list-style-type:square;

list-style-image:url(/dot.gif);

list-style-position:outside;

list-style-position:inside;

四、CSS背景样式：

background-color:#F5E2EC;

background:transparent;

background-image : url(/image/bg.gif);

background-attachment : fixed;

background-repeat : repeat;

background-repeat : no-repeat;

background-repeat : repeat-x;

background-repeat : repeat-y;

指定背景位置

background-position : 90% 90%;

background-position : top;

background-position : buttom;

background-position : left;

background-position : right;

background-position : center;

五、CSS连接属性：

a:link

a:visited

a:active

a:hover

鼠标光标样式：

链接手指 CURSOR: hand

十字体 cursor:crosshair

箭头朝下 cursor:s-resize

十字箭头 cursor:move

箭头朝右 cursor:move

加一问号 cursor:help

箭头朝左 cursor:w-resize

箭头朝上 cursor:n-resize

箭头朝右上 cursor:ne-resize

箭头朝左上 cursor:nw-resize

文字I型 cursor:text

箭头斜右下 cursor:se-resize

箭头斜左下 cursor:sw-resize

漏斗 cursor:wait

光标图案(IE6) p {cursor:url("光标文件名.cur"),text;}

六、CSS框线一览表：

border-top : 1px solid #6699cc;

border-bottom : 1px solid #6699cc;

border-left : 1px solid #6699cc;

border-right : 1px solid #6699cc;

以上是建议书写方式,但也可以使用常规的方式如下:

border-top-color : #369

border-top-width :1px

border-top-style : solid

其他框线样式

solid

dotted

double

groove

ridge

inset

outset

七、CSS表单运用：

文字方块 <input type="text" name="T1"size="15">

按钮 <input type="submit" value="submit"name="B1">

复选框 <input type="checkbox"name="C1">

选择钮 <input type="radio" value="V1" checkedname="R1">

多行文字方块 <textarea rows="1" name="S1"cols="15"></textarea>

下拉式菜单 <select size="1"name="D1"><option>选项1</option>

八、CSS边界样式：

margin-top:10px;

margin-right:10px;

margin-bottom:10px;

margin-left:10px;

九、CSS边框空白

padding-top:10px;

padding-right:10px;

padding-bottom:10px;

padding-left:10px;

基本语法

　规则

选择符

任何HTML元素都可以是一个CSS1的选择符。选择符仅仅是指向特别样式的元素。例如， P { text-indent: 3em}

当中的选择符是P。

类选择符

单一个选择符能有不同的CLASS(类)，因而允许同一元素有不同样式。例如，一个网页制作者也许希望视其语言而定，用不同的颜色显示代码:

code.html { color: #191970 }

code.css { color: #4b0082 }

　以上的例子建立了两个类，css和html，供HTML的CODE元素使用。CLASS属性是用于在HTML中以指明元素的类，例如，

例如，code.html.proprietary是无效的。</p>

类的声明也可以无须相关的元素:

.note { font-size: small }

在这个例子，名为note的类可以被用于任何元素。

一个良好的习惯是在命名类的时候，根据它们的功能而不是根据它们的外观。上述例子中的note类也可以命名为small，但如果网页制作者决定改变这个类的样式，使得它不再是小字体的话，那么这个名字就变得毫无意义了。

ID 选择符

ID选择符个别地定义每个元素的成分。这种选择符应该尽量少用，因为他具有一定的局限。一个ID选择符的指定要有指示符"#"在名字前面。例如，ID选择符可以指定如下:

#svp94O { text-indent: 3em }

这点可以参考HTML中的ID属性:

　<PID=svp94O>文本缩进3em</P>

关联选择符

关联选择符只不过是一个用空格隔开的两个或更多的单一选择符组成的字符串。这些选择符可以指定一般属性，而且因为层叠顺序的规则，它们的优先权比单一的选择符大。例如，以下的上下文选择符

P EM { background: yellow }

是P EM。这个值表示段落中的强调文本会是黄色背景；而标题的强调文本则不受影响。

　声明

属性

一个属性被指定到选择符是为了使用它的样式。属性的例子包括颜色、边界和字体。

值

声明的值是一个属性接受的指定。例如，属性颜色能接受值red。

组合

为了减少样式表的重复声明，组合的选择符声明是允许的。例如，文档中所有的标题可以通过组合给出相同的声明:

H1, H2, H3, H4, H5, H6 {

color: red;

"" class=MsoNormal>　继承

实际上，所有在选择符中嵌套的选择符都会继承外层选择符指定的属性值，除非另外更改。例如，一个BODY定义了的颜色值也会应用到段落的文本中。

有些情况是内部选择符不继承周围的选择符的值，但理论上这些都是特殊的。例如，上边界属性是不会继承的；直觉上，一个段落不会有同文档BODY一样的上边界值。

　　注解

样式表里面的注解使用C语言编程中一样的约定方法去指定。CSS1注解的例子如以下格式:

伪类和伪元素

伪类和伪元素是特殊的类和元素，能自动地被支持CSS的浏览器所识别。伪类区别开不同种类的元素(例如，visitedlinks(已访问的连接)和activelinks(可激活连接)描述了两个定位锚(anchors)的类型)。伪元素指元素的一部分，例如段落的第一个字母。

伪类或伪元素规则的形式如

选择符:伪类 { 属性: 值 }

或

选择符:伪元素 { 属性: 值 }

伪类和伪元素不应用HTML的CLASS属性来指定。一般的类可以与伪类和伪元素一起使用，如下:

选择符.类: 伪类 { 属性: 值 }

或

选择符.类: 伪元素 { 属性: 值 }

定位锚伪类

　伪类可以指定A元素以不同的方式显示连接(links)、已访问连接(visited links)和可激活连接(activelinks)。定位锚元素可给出伪类link、visited或active。一个已访问连接可以定义为不同颜色的显示，甚至不同字体大小和风格。

一个有趣的效果是使当前(或“可激活”)连接以不同颜色、更大的字体显示。然后，当网页的已访问连接被重选时，又以不同颜色、更小字体显示。这个样式表的示例如下:

A:link { color: red }

A:active { color: blue; font-size: 125% }

A:visited { color: green; font-size: 85% }

首行伪元素

通常在报纸上的文章，例如Wall StreetJournal中的，文本的首行都会以粗印体而且全部大写地展示。CSS1包括了这个功能，将其作为一个伪元素。首行伪元素可以用于任何块级元素(例如P、H1等等)。以下是一个首行伪元素的例子:

　P:first-line {

　font-variant: small-caps;

　font-weight: bold }

首个字母伪元素

首个字母伪元素用于加大(dropcaps)和其他效果。含有已指定值选择符的文本的首个字母会按照指定的值展示。一个首个字母伪元素可以用于任何块级元素。例如:

　P:first-letter { font-size: 300%; float: left }

会比普通字体加大三倍。

　层叠顺序

当使用了多个样式表，样式表需要争夺特定选择符的控制权。在这些情况下，总会有样式表的规则能获得控制权。以下的特性将决定互相对立的样式表的结果。

　! important

规则可以用指定的! important特指为重要的。一个特指为重要的样式会凌驾于与之对立的其它相同权重的样式。同样地，当网页制作者和读者都指定了重要规则时，网页制作者的规则会超越读者的。以下是!important 声明的例子:

BODY { background: url(bar.gif) white;

　background-repeat: repeat-x ! important }

　Origin of Rules (Author's vs. Reader's)

正如以前所提及的，网页制作者和读者都有能力去指定样式表。当两者的规则发生冲突，网页制作者的规则会凌驾于读者的其它相同权重的规则。而网页制作者和读者的样式表都超越浏览器的内置样式表。

网页制作者应该小心地使用! important 规则，因为它们会超越用户任何的! important规则。例如，一个用户由于视觉关系，会要求大字体或指定的颜色，而且这样的用户会有可能声明确定的样式规则为!important，因为这些样式对于用户阅读网页是极为重要的。任何的! important规则会超越一般的规则，所以建议网页制作者使用一般的规则以确保有特殊样式需要的用户能阅读网页。

　选择符规则: 计算特性

基于它们的特性级别，样式表也可以超越与之冲突的样式表，一个较高特性的样式永远都凌驾于一个较低特性的样式。这只不过是计算选择符的指定个数的一个统计游戏。

统计选择符中的ID属性个数。

统计选择符中的CLASS属性个数。

统计选择符中的HTML标记名格式。

最后，按正确的顺序写出三个数字，不要加空格或逗号，得到一个三位数。(注意，你需要将数字转换成一个以三个数字结尾的更大的数。)相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。以下是一个按特性分类的选择符的列表:

#id1 {xxx}

UL UL LI.red {xxx}

LI.red {xxx}

LI {xxx}

特性的顺序

为了方便使用，当两个规则具同样权重时，取后面

有很多方法将样式表加入到HTML中，每个都带有自己的优点和缺点。新的HTML元素和属性已被加入以允许样式表与HTML文档更简易地组合起来。

　连接到一个外部的样式表

　嵌入一个样式表

　输入一个样式表

　内联样式

CLASS属性

ID属性

SPAN元素

DIV元素

关于认证的备注

　　-------------------------------------------------------------------------------

连接到一个外部的样式表

　一个外部的样式表可以通过HTML的LINK元素连接到HTML文档中:

<LINK>标记是放置在文档的HEAD部分。可选的TYPE属性用于指定媒体类型--text/css是一个层叠样式表--允许浏览器忽略它们不支持的样式表类型。为CSS文件配置服务器而将text/css当作Content-type内容发送出去也是一个好注意。

外部样式表不能含有任何像<HEAD>或<STYLE>这样的HTML的标记。样式表仅仅由样式规则或声明组成。一个单独由

P { margin: 2em }

组成的文件就可以用作外部样式表了。

<LINK>标记也有一个可选的MEDIA属性，用于指定样式表被接受的介质或媒体。允许的值有

screen (缺省值)，提交到计算机屏幕；

多样的媒体通过用逗号隔开的列表或值all指定。

Netscape Navigator 4.x错误地忽略除了screen值外的任何使用MEDIA值声明的连接或嵌入样式表。例如，MEDIA="screen,projection"会令到样式表被Navigator4.x忽略，尽管展示的设备是计算机的屏幕。Navigator 4.x 也忽略使用MEDIA=all声明的样式表。

REL属性用于定义连接的文件和HTML文档之间的关系。REL=StyleSheet指定一个固定或首选的样式而REL="AlternateStyleSheet"定义一个交互样式。固定样式在样式表激活时总被应用。缺少的TITLE属性，就像例子中的第一个<LINK>标记，定义一个固定样式。

一个首选样式会自动被应用，就像例子中的第二个<LINK>标记。REL=StyleSheet和一个TITLE属性的组合指定一个首选的样式。网页制作者不能指定多于一个的首选样式。

交互样式通过REL="AlternateStyleSheet"指出。例子中的第三个<LINK>标记定义一个交互样式，用户可以选择用来代替首选样式表。

　注意现在的浏览器一般都缺乏选择交互样式的能力。

单一的样式也可以通过多个样式表给出

在这个例子中，三个样式表组合成一个"Contemporary"样式，作为一个首选样式表被应用。要组合多个样式表成一个单一样式，必须在每个样式表中使用相同TITLE。

当样式被应用到很多的网页时，一个外部样式表是理想的。网页制作者使用外部样式表可以改变整个网站的外观而仅仅通过改变一个文件。同样的，大多数浏览器会保存外部样式表在缓冲区，从而如果样式表在缓冲区就避免了在展示网页时的延迟。

　Microsoft Internet Explorer 3 for Windows 95/NT4并不支持来自连接的样式表中的BODY背景图象或颜色。如果考虑到这个错误，网页制作者不妨提供另外的包括一个背景图象或颜色的结构，例如嵌入或内联样式，或使用BODY元素的BACKGROUND属性。

-------------------------------------------------------------------------------

嵌入一个样式表

一个样式表可以使用STYLE元素在文档中嵌入:

<!--

　BODY { background: url(foo.gif) red; color: black }

P EM { background: yellow; color: black }

.note { margin-left: 5em; margin-right: 5em }

　-->

　</STYLE>

STYLE元素放在文档的HEAD部分。必须的TYPE属性用于指定媒体类型，LINK元素也一样。同样地，TITLE和MEDIA属性也可以用STYLE指定。

旧版本的浏览器，并不能识别STYLE元素，会将其当作BODY的一部分照常展示其内容，从而使这些样式表对用户是可见的。要防止这样做，STYLE元素的内容要包含一个SGML注解()在里面，像上述例子那样。

嵌入的样式表可用于当一个文档具有独一无二的样式的时候。如果多个文档都使用同一样式表，那么外部样式表会更适用。

　-------------------------------------------------------------------------------

输入一个样式表

　一个样式表可以使用CSS的@import 声明被输入。这个声明用于一个CSS文件或内部的STYLE元素:

<!--

@import url(http://www.htmlhelp.com/style.css);

@import url(/stylesheets/punk.css);

DT { background: yellow; color: black }

-->

</STYLE>

　注意其它的CSS规则应该仍然包括在STYLE元素中，但所有的@import声明必须放在样式表的开始部分。任意在样式表中指定了的规则，其自身超越在输入样式表中对立的规则。例如上例，即使一个输入的样式表包含DT{ background: aqua }，定义项(definition terms)依然会是黄色的背景。

被输入的样式表的顺序对于它们怎样层叠是很重要的。在上述的例子中，如果style.css输入的样式表指定了STRONG元素会显示为红色而punk.css样式表指定了STRONG元素显示为黄色的话，那么后面的规则会获胜，而STRONG元素会显示为黄色。

输入的样式表对于模块性效果很有用处。例如，一个网站可以通过使用了的选择符分类样式表。一个simple.css样式表给出公共的元素像BODY、P、H1和H2。此外，一个extra.css样式表给出较少共通的元素像CODE、BLOCKQUOTE和DFN。一个tables.css样式表可以用于定义变革元素的规则。这三个样式表在需要的时候可以使用@import声明包括在HTML中。三个样式表也可以通过LINK元素组合。

　-------------------------------------------------------------------------------

　内联样式

样式可以使用STYLE属性内联。STYLE属性可以应用于任意BODY元素(包括BODY本身)，除了BASEFONT、PARAM和SCRIPT。这个属性将任何数量的CSS声明当作自己的值，而每个声明用分号隔开。以下是一个例子:

　<P STYLE="color: red;"> 这段的样式是红色的NewCenturySchoolbook字，如果字体可用的话。</P>

　注意在STYLE中New Century Schoolbook包含在单引号中，因为双引号被用作包含样式声明。

内联的样式比其他方法更加灵活。要使用内联样式，必须使用Content-Style-TypeHTTP页眉扩展对整个文档进行单独的样式表语言声明。使用内联CSS的网页制作者必须将text/css作为Content-Style-TypeHTTP页眉，或在HEAD部分包括以下标记:

因为和需要展示的内容混合在一起，内联样式会失去一些样式表的优点。同样地，内联样式默认地接受所有媒体，因为没有任何的为内联样式指定明确的媒体的语句。这种方法应该尽量少用，如当一个样式会应用在所有媒体到一个元素的个别情况。如果样式会被应用到单一元素的场合，但只能使用确认的媒体的话，使用ID属性代替STYLE属性。

　-------------------------------------------------------------------------------

CLASS属性

　CLASS属性用于指定元素属于何种样式的类。例如，样式表可以加入punk和warning类:

　.punk { color: lime; background: #ff80c0 }

　P.warning { font-weight: bolder; color: red; background: white}

　这些类可以使用CLASS属性在HTML中引用:

　<H1

在这个例子中，punk类可以用于任何BODY元素因为它在样式表中没有HTML元素关联。而在这个例子的样式表，warning类只能用于P元素。

　一个良好的习惯是在命名类的时候，根据它们的功能而不是根据它们的外观。上述例子中的warning类也可以命名为red，但如果网页制作者决定改变这个类的样式为别的颜色，或希望为那些使用PC喇叭的人定义为aural(听觉)样式的话，那么这个名字就变得毫无意义了。

　类会是应用样式到HTML文档中在结构上一样的部分的有效的办法。例如，本页使用类给CSS源代码和HTML源代码使用不同的样式。

-------------------------------------------------------------------------------

ID属性

　ID属性用于定义一个元素的独特的样式。一个CSS规则如

#wdg97 { font-size: larger }

可以通过ID属性应用到HTML中:

<P ID=wdg97>欢迎访问Web Design Group及TVwater 168!</P>

　整个文档当中的每个ID属性的值都必须是唯一的。其值必须是一个以字母开头紧接字母、识字或连字符。字母限于A-Z和a-z。

注意HTML4.0允许在ID属性中有句号，但CSS1不允许在ID选择符中有句号。也要注意CSS1允许Unicode字符161-255而且忽略Unicode字符为一个数字代码，但HTML4.0不允许这些字符在一个ID属性值当中。

当一个样式只需要在任何文档中应用一次时，使用ID是很适合的。ID与STYLE属性相比，在于ID允许指定媒体的样式，而且也可以被应用于多个文档(虽然每个文档只用一次)。

　-------------------------------------------------------------------------------

SPAN元素

SPAN元素被加入到HTML中以允许网页制作者给出样式但无须附加在一个HTML的结构元素上。SPAN在样式表中作为一个选择符使用，而且它也能接受STYLE、CLASS和ID属性。

SPAN是一个内联元素，所以它可以作为HTML中的元素如EM和STRONG使用。最重要的差别在于虽然EM和STRONG带有结构的意义，但SPAN就没有这样的意义。它的存在纯粹是应用样式，所以当样式表失效时它就没有任何的作用。

　一些SPAN例子如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.0//EN">

　<HTML>

<HEAD>

<TITLE>SPAN的例子</TITLE>

<!--

　.firstwords { font-variant: small-caps }

　-->

　</STYLE>

　</HEAD>

<BODY>

　<P><SPAN first fewwords</SPAN>前面是

　　段落中少数的文字，会是小型大写字母。样式也可以内联，如改变文

　　字的样式为<SPAN>Arial</SPAN>.</P>

　　-------------------------------------------------------------------------------

　　DIV元素

　　DIV元素在功能上与SPAN元素相似，最主要的差别在于DIV("division"，"部分"的简称)是一个块级元素。DIV可以包含段落、标题、表格甚至其它部分。这使DIV便于建立不同集成的类，如章节、摘要或备注。例如:

　　<DIV

　　<H1>Divisions/部分</H1>

　　<P>DIV元素在HTML 3.2中有定义，但HTML3.2中只有ALIGN属性能兼容。HTML4.0在属性中加入CLASS、STYLE、和ID属性。</P>

　　<P>因为DIV可以包含其他块级集成，在用于建立文档的大型章节例如本备注是很有用的。</P>

　　<P>要求关闭标记。</P>

　　</DIV>

　　-------------------------------------------------------------------------------

　　关于认证的备注

　　少数使用了CSS样式的文档能在HTML3.2(Wilbur)层(在WDG网站，译者注)得到认证。HTML3.2不会解释SPAN元素，也不解释CLASS、STYLE或ID属性，而且在LINK和STYLE元素中也很少支持TYPE和MEDIA属性。

　　这些有关的样式元素和属性对不支持的浏览器不会有害，因为它们能安全地忽略。文档使用这些元素和属性可以被认证防御于HTML4.0。

　　流氓报－流氓人生活的故事！流氓人的家园 !流氓人自己的报刊！http://www.t128qq.bokee.com/

显示

　　语法: display: <值>

　　允许值: block | inline | list-item | none

　　初始值: block

　　适用于: 所有对象

　　向下兼容: 否

　　显示属性允许使用四个值中的一个来定义一个元素:

　　block (在元素的前和后都会有换行)

　　inline (在元素的前和后都不会有换行)

　　list-item (与block相同, 但增加了目录项标记)

　　none (没有显示)

　　每个元素都典型地由浏览器基于HTML规格建议的展示形式给出一个缺省的显示值。

　　显示属性可能并不安全，因为它使用另外的不合适的格式显示元素。使用值none将关闭指定元素及其子元素的显示！

　　-------------------------------------------------------------------------------

　　空白

　　语法: white-space: <值>

　　允许值: normal | pre | nowrap

　　初始值: normal

　　适用于: 块级元素

　　向下兼容: 是

　　空白属性将决定如何处理元素内的空格. 该属性的值取以下三个中的一个:

　　normal (将多个空格折叠成一个)

　　pre (不折叠空格)

　　nowrap (不允许换行，除非遇到<BR>标记)

　　-------------------------------------------------------------------------------

　　目录样式类型

　　语法: list-style-type: <值>

　　初始值: disc

　　适用于: 带有显示值的目录项元素

　　向下兼容: 是

　　目录样式项属性指定目录项标记的类型，当目录样式图象值为none或当图象载入选项被关闭时使用。

　　例如:

　　LI.square { list-style-type: square }

　　UL.plain { list-style-type: none }

　　OL { list-style-type: upper-alpha }

　　OL OL { list-style-type: decimal }

　　OL OL OL { list-style-type: lower-roman }

　　-------------------------------------------------------------------------------

　　目录样式图象

　　语法: list-style-image: <值>

　　允许值: <url> | none

　　初始值: none

　　适用于: 带有显示值的目录项元素

　　向下兼容: 是

　　当图象载入选项打开时，目录样式图象属性在指定目录项标记使用哪个图象代替由目录样式类型属性指定的标记。

　　例如:

　　UL.check { list-style-image: url(/LI-markers/checkmark.gif)}

　　UL LI.x { list-style-image: url(x.png) }

　　-------------------------------------------------------------------------------

　　目录样式位置

　　语法: list-style-position: <值>

　　允许值: inside | outside

　　初始值: outside

　　适用于: 带有显示值的目录项元素

　　向下兼容: 是

　　目录样式位置属性可以取值inside(内部) oroutside(外部)，其中outside是缺省值。整个属性决定关于目录项的标记应放在那里。如果使用inside值，换行会移到标记下，而不是缩进。应用的例子如下:

　　Outside rendering:

　　* List item 1

　　second line of list item

　　Inside rendering:

　　* List item 1

　　second line of list item

　　-------------------------------------------------------------------------------

　　目录样式

　　语法: list-style: <值>

　　允许值: <目录样式类型> ||<目录样式位置> ||<url>

　　初始值: 未定义

　　适用于: 带有显示值的目录项元素

　　向下兼容: 是

　　目录样式属性是目录样式类型、目录样式位置，和目录样式图象属性的略写。

　　例如:

　　LI.square { list-style: square inside }

　　UL.plain { list-style: none }

　　UL.check { list-style: url(/LI-markers/checkmark.gif) circle}

　　OL { list-style: upper-alpha }

　　OL OL { list-style: lower-roman inside }

上边界

　　语法: margin-top: <值>

　　允许值: <长度> |<百分比> | auto

　　初始值: 0

　　适用于: 所有元素

　　向下兼容: 否

　　上边界属性用一个指定的长度或百分比值来设置元素的上边界。百分比值参考上级元素的宽度。允许使用负值边际。

　　例如，以下的规则将消除文件的上边界。

　　BODY { margin-top: 0 }

　　注意如果边界在垂直方向邻接(重叠)了，会改用其中最大的那个边界值。

　　-------------------------------------------------------------------------------

　　右边界

　　语法: margin-right: <值>

　　允许值: <长度> |<百分比> | auto

　　初始值: 0

　　适用于: 所有元素

　　向下兼容: 否

　　右边界属性用一个指定的长度或百分比值来设置元素的右边界。百分比值参考上级元素的宽度。允许使用负值边际。

　　例如:

　　P.narrow { margin-right: 50% }

　　注意如果边界在水平方向邻接(重叠)了，不会改用其它边界值。

　　-------------------------------------------------------------------------------

　　下边界

　　语法: margin-bottom: <值>

　　允许值: <长度> |<百分比> | auto

　　初始值: 0

　　适用于: 所有元素

　　向下兼容: 否

　　下边界属性用一个指定的长度或百分比值来设置元素的下边界。百分比值参考上级元素的宽度。允许使用负值边际。

　　例如:

　　DT { margin-bottom: 3em }

　　注意如果边界在垂直方向邻接(重叠)了，会改用其中最大的那个边界值。

　　-------------------------------------------------------------------------------

　　左边界

　　语法: margin-left: <值>

　　允许值: <长度> |<百分比> | auto

　　初始值: 0

　　适用于: 所有元素

　　向下兼容: 否

　　左边界属性用一个指定的长度或百分比值来设置元素的左边界。百分比值参考上级元素的宽度。允许使用负值边际。

　　例如:

　　ADDRESS { margin-left: 50% }

　　注意如果边界在水平方向邻接(重叠)了，不会改用其它边界值。

　　-------------------------------------------------------------------------------

　　边界

　　语法: margin: <值>

　　允许值: [ <长度> |<百分比> | auto ]{1,4}

　　初始值: 未定义

　　适用于: 所有元素

　　向下兼容: 否

　　边界属性用一到四个值来设置元素的边界，每个值都是长度、百分比或者自动。百分比值参考上级元素的宽度。允许使用负值边际。

　　如果四个值都给出了，它们分别被应用于上、右、下和左边界。如果只给出一个值，它被应用于所有边界。如果两个或三个值给出了，省略了的值与对边相等。

　　边界声明包括以下例子：

　　BODY { margin: 5em }

　　P { margin: 2em 4em }

　　DIV { margin: 1em 2em 3em 4em }

　　注意如果边界在垂直方向邻接(重叠)了，会改用其中最大的那个边界值。而水平方向则不会。

　　使用边界属性可以一次性地设置所有边界；也可以选择使用上边界、下边界、左边界和右边界属性。

　　-------------------------------------------------------------------------------

　　上补白

　　语法: padding-top: <值>

　　允许值: <长度> |<百分比>

　　初始值: 0

　　适用于: 所有对象

　　向下兼容: 否

　　上补白属性描述上边框和选择符的内容之间有多少间隔。该值可以是一个长度或百分比。百分比的值参考上级元素的宽度。不能使用负值。

　　-------------------------------------------------------------------------------

　　右补白

　　语法: padding-right: <值>

　　允许值: <长度> |<百分比>

　　初始值: 0

　　适用于: 所有对象

　　向下兼容: 否

　　右补白属性描述右边框和选择符的内容之间有多少间隔。该值可以是一个长度或百分比。百分比的值参考上级元素的宽度。不能使用负值。

　　-------------------------------------------------------------------------------

　　下补白

　　语法: padding-bottom: <值>

　　允许值: <长度> |<百分比>

　　初始值: 0

　　适用于: 所有对象

　　向下兼容: 否

　　下补白属性描述下边框和选择符的内容之间有多少间隔。该值可以是一个长度或百分比。百分比的值参考上级元素的宽度。不能使用负值。

　　-------------------------------------------------------------------------------

　　左补白

　　语法: padding-left: <值>

　　允许值: <长度> |<百分比>

　　初始值: 0

　　适用于: 所有对象

　　向下兼容: 否

cf-366C-Dima and Salad - html/css语言栏目：html.css - 自学

巧妙利用position达到简单防选中和防复制效果 -

子栏目

CSS 属性大全 - html/css语言栏目：html.css - 自学ph

最新评论

添加评论

更多文章推荐

添加评论