CSS属性大全

来源:互联网 发布:手机鉴别真伪软件 编辑:程序博客网 时间:2024/05/16 18:26

<!-- /* Font Definitions */ @font-face{font-family:宋体;panose-1:2 1 6 0 3 1 1 1 1 1;mso-font-alt:SimSun;mso-font-charset:134;mso-generic-font-family:auto;mso-font-pitch:variable;mso-font-signature:3 680460288 22 0 262145 0;}@font-face{font-family:"Cambria Math";panose-1:2 4 5 3 5 4 6 3 2 4;mso-font-charset:1;mso-generic-font-family:roman;mso-font-format:other;mso-font-pitch:variable;mso-font-signature:0 0 0 0 0 0;}@font-face{font-family:"/@宋体";panose-1:2 1 6 0 3 1 1 1 1 1;mso-font-charset:134;mso-generic-font-family:auto;mso-font-pitch:variable;mso-font-signature:3 680460288 22 0 262145 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal{mso-style-unhide:no;mso-style-qformat:yes;mso-style-parent:"";margin:0cm;margin-bottom:.0001pt;text-align:justify;text-justify:inter-ideograph;mso-pagination:none;font-size:10.5pt;mso-bidi-font-size:12.0pt;font-family:"Times New Roman","serif";mso-fareast-font-family:宋体;mso-font-kerning:1.0pt;}h2{mso-style-unhide:no;mso-style-qformat:yes;mso-style-link:"标题 2 Char";mso-margin-top-alt:auto;margin-right:0cm;mso-margin-bottom-alt:auto;margin-left:0cm;mso-pagination:widow-orphan;mso-outline-level:2;font-size:18.0pt;font-family:宋体;mso-bidi-font-family:宋体;font-weight:bold;}p{mso-style-unhide:no;mso-margin-top-alt:auto;margin-right:0cm;mso-margin-bottom-alt:auto;margin-left:0cm;mso-pagination:widow-orphan;font-size:12.0pt;font-family:宋体;mso-bidi-font-family:宋体;}span.2Char{mso-style-name:"标题 2 Char";mso-style-unhide:no;mso-style-locked:yes;mso-style-link:"标题 2";mso-ansi-font-size:18.0pt;mso-bidi-font-size:18.0pt;font-family:宋体;mso-ascii-font-family:宋体;mso-hansi-font-family:宋体;mso-bidi-font-family:宋体;font-weight:bold;}.MsoChpDefault{mso-style-type:export-only;mso-default-props:yes;font-size:10.0pt;mso-ansi-font-size:10.0pt;mso-bidi-font-size:10.0pt;mso-ascii-font-family:"Times New Roman";mso-fareast-font-family:宋体;mso-hansi-font-family:"Times New Roman";mso-font-kerning:0pt;} /* Page Definitions */ @page{mso-page-border-surround-header:no;mso-page-border-surround-footer:no;}@page Section1{size:595.3pt 841.9pt;margin:72.0pt 90.0pt 72.0pt 90.0pt;mso-header-margin:42.55pt;mso-footer-margin:49.6pt;mso-paper-source:0;layout-grid:15.6pt;}div.Section1{page:Section1;} /* List Definitions */ @list l0{mso-list-id:89129785;mso-list-type:hybrid;mso-list-template-ids:1479438276 -807381700 67698713 67698715 67698703 67698713 67698715 67698703 67698713 67698715;}@list l0:level1{mso-level-tab-stop:18.0pt;mso-level-number-position:left;margin-left:18.0pt;text-indent:-18.0pt;}@list l1{mso-list-id:1567646801;mso-list-type:hybrid;mso-list-template-ids:-450604218 480439880 67698713 67698715 67698703 67698713 67698715 67698703 67698713 67698715;}@list l1:level1{mso-level-start-at:5;mso-level-text:%1.;mso-level-tab-stop:36.0pt;mso-level-number-position:left;text-indent:-36.0pt;}ol{margin-bottom:0cm;}ul{margin-bottom:0cm;}-->

CSS 属性大全

1.文字属性

「字体族科」(font-family),设定时,需考虑浏览器中有无该字体。
「字体大小」(font-size),注意度量单位。《绝对大小》|《相对大小》|《长度》|《百分比》(一般设置双数)
「字体加粗」(font-weight),除了 normal(正常)、bold(粗体)、bolder(特粗)、lighter(细体)外,还有9种以像素为度量为单位的设置方式(100200300400500600700800900)。
「字体风格」(font-style),也就是字型。

normal : 正常的字体
italic :
斜体。对于没有斜体变量的特殊字体,将应用oblique
oblique :
倾斜的字体

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

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

「字体」(font),《字体风格》|《字体变形》|《字体加粗》|《字体大小》|《行高》|《字体族科》

2.文本属性

「文字间距」(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:blure background-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 /*所有超链接*/
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

5.边框

「边框宽度」(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>

<li>项目1</li>

<li>项目2</li>

<li>项目3</li>

</ol>

表现为:

 

1.项目1

2.项目2

3.项目3

 

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

<ul>

<li>项目1</li>

<li>项目2</li>

<li>项目3</li>

</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 bottom left),即:
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),带有显示值目录项元素

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

11css 单位

  [长度单位]

        有效的相对单位

  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是一个介乎0255之间的整数(如,rgb(0,204,0)

      Rgb(y%,y%,y%)y是一个介乎0.0100.0之间的整数(如,rgb(0%,80%,0%)

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

 

12css hack

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

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

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

CSS Hack的原理是什么?

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

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

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

CSS Hack的写法!

比如要分辨IE6firefox两种浏览器,可以这样写:

  <style>

  div{

  background:green; /* for firefox */

  *background:red; /* for IE6 */

  }

  </style>

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

  解释一下:

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

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

  CSS hack:区分IE6IE7firefox

  区别不同浏览器,CSS hack写法:

  区别IE6FF

  background:orange;*background:blue;

  区别IE6IE7

  background:green !important;background:blue;

  区别IE7FF

  background:orange; *background:green;

  区别FFIE7IE6

   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;

             IE6IE7 FF

  *           √ √ ×

  !important  × √ √

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

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

  #demo {width:100px;} /*FIREFOX,IE6,IE7执行.*/

  *html #demo {width:120px;} /*会被IE6执行,之前的定义会被后来的覆盖,所以#demo的宽度在IE6就为120px; */

  *+html #demo {width:130px;} /*会被IE7执行*/

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

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

  FIREFOX:100px;

  ie6:120px;

  ie7:130px;

  IE8 最新css hack

  "/9" 例:"border:1px/9;".这里的"/9"可以区别所有IEFireFox.

  "*" IE6IE7可以识别.IE8FireFox不能.

  "_" IE6可以识别"_",IE7IE8FireFox不能.

<metahttp-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

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