css权威指南(上)

替换元素指用来替换内容的部分并非由文档内容直接表示,最常见的是图片,与之对应的就是非替换内容

<img src="how.gif"/>

display展示的形式,常见的值none、inline(行内)、block(块)

<link rel="stylesheet" type="text/css" href="sheet1.css" media="all"/>

 

<style type="text/css">

  ...

</style>

 

<style type="text/css">

@import url(sheet2.css);  /*必须放在其他css规则之前,否则不起作用*/

h1{color:gray;}

</style>

 

向后兼容,对于不支持<style></style>的浏览器,将会以文本的形式显示css中的内容,解决方法:

<style type="text/css"><!--

@import url(sheet2.css);

h1{color:gray;}

--></style>

 

<p style="color:gray;">123456</p>

第二章  选择器

h1,h2,h3{color:red;background:yellow;}

*{color:red;background:yellow;}

p.warning{font-weight:bold;}

#lead-para{font-weight:bold;}

h1[class]{color:silver;}  //属性选择器,拥有class这个属性

h1[class="t1"]{color:silver;}  //属性选择器,拥有class这个属性,并且值等于“t1”

子串匹配选择器

[foo^="bar"]  /*选择foo属性以“bar”开头的所有属性*/

[foo$="bar"]  /*选择foo属性以“bar”结尾的所有属性*/

[foo*="bar"]  /*选择foo属性包含“bar”的所有属性*/

后代选择器

h1 em {color:gray;}

选择子元素

h1>em {color:gray;}

选择相邻兄弟元素

h1+p {color:gray;}  /*h1元素后的p元素*/

伪类选择器

:link未访问过的地址的锚

:visited已访问过的地址的锚

a #footer-copyright:visited{font-weight:normal;}

:focus拥有焦点时

:hover指针停留在元素上

:active被激活的元素(点击鼠标时)

顺序:link→:visited→:hover→:active

另一个静态伪类:first-child来选择元素的第一个子元素,这个很容易混淆

p:first-child{font-weight:bold;}  /*选择作为元素的第一个子元素<p>*/

结合伪类

a:link:hover{color:red;}  /*停留在未点击的链接上*/

伪元素选择器

p:first-letter{color:red;}  /*对首字母设置样式*/

:first-line{color:red;}

first-letter和:first-line只能应用到块级元素

所有伪元素只能放在选择器的最后面

设置在之前和之后元素的样式

h2:before{content:"[[";color:silver;}  /*在每个h2元素前加一对银色中括号*/

body:after{content:"The End.";}

第三章  结构和层叠

特殊性

一个元素有多个冲突的属性,取最高特殊性的声明

选择器中有ID属性值加0,1,0,0

选择器中有类属性值、属性选择或伪类加0,0,1,0

选择器有各个元素和伪元素加0,0,0,1

p em{color:purple;}  /*特殊性为0,0,0,2*/

声明和特殊性

每个内联样式的特殊性是1,0,0,0

重要性

p.dark{color:#333 !important;}

重要性与特殊性不比较(与非重要性比较),!important要放到声明的最后(分号之前,否则整条声明无效)

继承

继承会沿着文档树向下传播,大多数框模型属性(外边距、内边距和背景等)不能继承

继承的属性没有特殊性,为0,0,0,0

层叠

CSS让样式层叠在一起,是通过结合继承和特殊性做到的

第四章  值和单位


h1{color:rgb(100%,100%,100%);}  /*大于100%,小于0%将被转化为100%和0%*/

h1{color:rgb(255,255,255);}  /*同上转化为0和255*/

h1{color:#FF0000;}  /*00~FF*/

h1{color:#F00;}  /*会自动复制成两位:FF0000*/

绝对长度常用单位英寸(in)和点(pt)1in=72pt,厘米毫米米等

相对长度常用的有em(等于父元素字体的大小)、ex(相对于x的高度)和px(像素)

关键字

用于描述一个值的字

a:link,a:visited{text-decoration:none;}  /*这个none*/

inherit是所有属性共有的,使一个属性的值与父元素相同,多数情况下属性会自然继承,不必指定

第五章  字体

可以使用属性font-family指定文档的字体

body{font-family:sans-serif;}

body{font-family:Arial,sans-serif;}  /*若前一种字体不存在,则采用后一种字体*/

如果字体名称里包含空格、$#等类似符号,需要加引号

h2{font-family:wedgie,'Karrank',Klingon,fantasy;}

font-weight属性用于字体加粗,值有normal、bold、bolder、lighter、100、200、...inherit等

font-size,xx-small、x-small、small、medium(默认值)、large、x-large、inherit等

body{font-size:15px;}

body{font-size:120%;}

font-style字体风格,italic(带有一些变形的斜体)、oblique(生硬的变斜)、norma(默认)和inherit

font-variant字体变形,small-caps(首字母大写)、normal(默认)和inherit

font属性集合了所有的字体属性

h1{font-family:Verdana,Helvetica,Arial,sans-serif;font-size:30px;font-weight:900;font-style:italic;font-variant:normal;}

h1{font:30px 900 italic normal Verdana,Helvetica,Arial,sans-serif;}

在简写的font属性中,后两个值font-size必须在font-family之前(其它属性顺序不规定),并且这两个值一定存在,不然整条声明无效

可以使用系统的字体

caption标题icon图标menu菜单message-box对话框small-caption小控件status-bar窗口状态栏

button{font:caption;font-size:1em;}

第六章  文本属性

文本缩进text-indent属性,<length>(长度)<percentage>(按照父元素的百分比计算)inherit,行内元素和图像之类的替换元素无法应用text-indent属性

p{text-indent:3em;}  /*可以设置为负值,注意别超出左边界*/

水平对齐text-align属性,left(左对齐)、right(右对齐)、center(居中)、justify(两端对齐,会拉伸单个词或字的间隔)和inherit,同样只应用于块级元素

行高text-height指文本行基线之间的距离,而不是字体的大小,<length>、<percentage>、<number>、normal和inherit,行间距就是text-height减去font-size,再除2就是字的顶部和底部的留白

垂直对齐vertical-align,baseline(默认值:基线对齐)、sub(下标:基线以下)、super(基线以上)、bottom(底端对齐:行内框的底端与行框底端对齐)、text-bottom(文本底端对齐)、moddle(把行内元素框的中点与父元素基线上方0.5ex处的一个点对齐)、top(与bottom相反)和text-top(与text-bottom相反)

p{vertical-align:5px;}  /*将元素与对齐前上升5px,也可以是负数*/

字间距word-spacing,<length>、normal和inherit

字母间隔letter-spacing,<length>、normal和inherit

文本转换text-transform,uppercase、lowercase、capitalize(每个单词的首字母大写)、none和inherit

文本装饰text-decoration,none(关闭所有装饰)、underline(下划线)、overline(上划线)、line-through(中间划线)、blink(闪烁)和inherit

处理空白符white-space,会影响文档中的空格、换行和tab字符的处理,normal(默认:多个空白符合并为一个空格)、nowrap(除非使用了br元素,否则会防止元素中的文本换行)、pre(多个空白符不会被省略)、pre-wrap(保留多个空白符,文本会正常换行)、pre-line(与pre-wrap相反,省略空白符,保留换行符)和inherit

文本方向direction,ltr、rtl和inherit

posted @ 2014-06-24 20:09  庄昌宽  阅读(209)  评论(0编辑  收藏  举报