CSS属性大全

原创 2010年08月08日 19:02:00

<!-- /* 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 种以像素为度量为单位的设置方式( 100 200 300 400 500 600 700 800 900 )。
「字体风格」( 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 ), 带有显示值目录项元素

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

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

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

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

 

12 css hack

由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,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;

             IE6 IE7 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 不能.

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

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

asp设置Excel单元格类型为文本

.xlsText{mso-style-parent:style0;mso-number-format:"\@";}     /* 设置单元格类型为文本*/           respons...

S2SH整合步骤

Normal 0 7.8 磅 0 2 false false false Microsof...
  • qq28193
  • qq28193
  • 2010年04月29日 12:50
  • 328

vb.net读取xml文件中的节点内容

呵呵,先声明一下,会的就不用看了,本人的水平很菜,也就用xml文件配置一下软件中的一些参数.xml文件中的内容如下: 15 14 通过一个函数来读取data结点下的值,...
  • wjbych
  • wjbych
  • 2012年01月10日 17:04
  • 2366

VB中对EXCEL的各种操作

全面控制 Excel 首先创建 Excel 对象,使用ComObj: Dim ExcelID as Excel.Application Set ExcelID as new Excel.Applica...
  • wzk456
  • wzk456
  • 2017年02月08日 15:20
  • 2423

css属性大全

  • 2013年06月04日 09:36
  • 9KB
  • 下载

CSS属性大全

  • 2014年07月12日 08:32
  • 33KB
  • 下载

个人整理CSS属性大全~~~~~~~

字体属性:(font) 大小 font-size: x-large;(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD 样式 font-style: obli...

css属性大全

  • 2013年03月20日 11:24
  • 146KB
  • 下载

css属性大全

  • 2012年03月03日 00:02
  • 9KB
  • 下载

css属性标签大全。

CSS样式属性1、字体属性(type)font-family(使用什么字体)font-style(字体的样式,是否斜体):normal/italic/obliquefont-variant(字体大小写...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS属性大全
举报原因:
原因补充:

(最多只允许输入30个字)