前言
这一章节讲了以下内容:
两个新的 HTML elelments:它们是
一些 shortcuts,用于简化对 font, border 和 margin 等的 properties 的参数的 specifying 更加 eaiser.
关于 pseudou-class 的介绍
关于
步骤如下:
Identifying logical sections
Using
Lableling the
Adding some style
设置
在这本书中,为了能够将段落有 order 的样子,于是对其 CSS 添加了一些style,这些 style 具体如下:
设置 width:200px;这个 property 有一个特点,那就是它只 specify the width for the content area only. 而不是整个box。
设置 text-align:center;这里的 text-align 会对齐所有在
descendent selector:在这里,我们只想要改变
的颜色,但是我们不想改变文章其他部分
的属性,同时,如果设置id,class就太繁琐,这个时候可以使用 descendents,在 CSS 中这样写: div h1{ color:black;} 这里 div是parent name,h1 是child name,中间用空格隔开。
line-height 参数的设置:可以通过 1em,%的方式设置,但是这样设置的话,是基于
中的文本文字的,这时候,标题的字比较大,padding 就会不足,可以用数字“1”代替,它的意思是 to change the line-height of each element in it.
一些shortcuts
padding 和 margin的简化
原来是这样的:
padding-top:0px;
padding-right:20px;
padding-bottom:10px;
padding-left:0px;
或者这样:
`margin-top:0px;
margin-right:20px;
margin-bottom:10px;
margin-left:0px;
现在只需要这样:
margin:top right bottom left;
如果两个对边相等,
可以这样:
margin:top,right;
如果四个相等,
可以
margin:20px;
关于 border,background 的 property 的设置:
boder 有很多参数,比如:
border-width
border-style
border-color
现在只需要这样:
border: solid thin #007e7e;
而且你可以 specify them in any order you like
background 有很多参数,比如:
background-color:
background-image;
background-repeat:
现在可以这样写:
background white url(images/cocktail.gif) repeat-x;
对于 font 的设置
font 的 property 的设置有顺序:
font:
font-style
font-variant
font-weight 这三个都是 optional 的
font-size/line height 这个必须有,line-height 是optional 的,但是要注意格式
font-family 用逗号隔开每个字体的名称
关于
用于inline element,把它们弄成一个 package ,
关于 element 的 psedo-class
element 有五个psedo-class:
a:link
a:visited
a:hover
a:focus
a:active
可以在 CSS 中对其设置相应的参数,比如当 hover 时,字体变成黄色:
a:hover
{ color:yellow;
}
这里的psedo-class 有两个特性:
state related:Browser 通过用户的状态来将 element 动态地将其纳入不同的 class
do not need to type in HTML:这是一个 class,但是不需要自己去定义。
关于cascade
当 Browser 打开一个网页的时候,可以存在多个 CSS 文件:包括 author 的,visitor 的 和 browser default 的。这时,因为对一个段落可能被很多 CSS 文件当作 selector,所以需要经过一系列的 sorting ,找到 more specific 的那一个,来用于显示,主要的步骤如下:
Sort for author, reader and browser
Sort for specify
When elements have same specify, sort again based on ordering in styelsheets.
如何确定 specify?
通过三位数确定:000 :
个位:是否包含 selector ,包含一个 +one point
十位:是否包含 class 或者 psedo class,包含一个+one point
百位:是否包含 id, 包含一个+one point