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种以像素为度量为单位的设置方式(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是一个介乎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 Explorer7,Mozilla Firefox等,对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; /* for firefox */
*background:red; /* for IE6 */
}
</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;
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"可以区别所有IE和FireFox.
"*" IE6、IE7可以识别.IE8、FireFox不能.
"_" IE6可以识别"_",IE7、IE8、FireFox不能.
<metahttp-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
在程序里加上这句话的意思就是:IE8里显示的布局和IE7里一样!
- CSS style属性大全
- CSS属性代码大全
- CSS 样式属性大全
- CSS属性大全
- CSS属性代码大全
- CSS属性大全
- CSS stytle属性大全
- CSS常用属性大全
- CSS属性大全
- CSS 属性大全
- CSS 属性大全
- css属性标签大全。
- CSS属性大全
- CSS style属性大全
- CSS属性代码大全
- css属性大全
- CSS属性大全
- CSS 属性大全
- zoj 1133 || poj 1142 Smith Numbers
- ListActivity与Activity的使用与区别
- 测试一下动态棋谱 这个垃圾CSDN博客, 编辑的时候显示正常, 发表之后只有代码, 妈的
- 从G1到冻酸奶Froyo
- http://acm.hdu.edu.cn/showproblem.php?pid=1041
- CSS属性大全
- 电脑接上电源直接开机的问题
- Debian 6.0将支持非Linux内核选择
- 第一篇博客
- rhel5下的yum安装配置方法(转&&修)
- 被FileOutputStream的append参数搞死了……
- 珍惜,努力
- 32位CPU寄存器和汇编指令
- Mozilla拟效仿谷歌Chrome对火狐采取强制升级