第二章 选择符和属性
1.类别选择符(Class selectors):你要给网页施加规则,首先你要选择给什么施加规则
类别选择符 让你对一个给定的类别 应用CSS,如果我们有下面这条CSS规则:
p.bold{ font-weight:bold;} //1:p表示段落 2:p.bold表示是bold类别的段落 3:整句话的意思是 给bold类别的段落施加规则
再加上下面的HTML:
<p class="bold">这个段落应用的是粗体</p> //class="bold" 定义的一个bold类别
看到的结果应该是:这个段落应用的是粗体
2.ID选择符:id选择符有点像类别选择符,只不过每一页只能用在一个元素上,如果给定一下CSS规则
p#bold { font-weight:bold} //#是id选择符的标识
加上这个HTML:
<p id="bold">这个段落应用的是粗体</p> //id="bold" 定义的一个id为bold的p标签
看到的结果应该是:这个段落应用的是粗体
3.群选择符:你可以为多个选择应用一套选择符
<style type="text/css"> p,h1 { //p和h1是群选择符,指定所有的段落和1号标题 应用这套规则 text-align:right;}//指定段落,标题的对齐方式 </style>
每个选择符之间用逗号隔开
甚至你还可以在群选择符中惨杂ID选择符,类选择符
<html> <head> <title>first_rule演示</title> <style type="text/css"> p,h1 { text-align:right;} </style> </head> <body> <h1>群选择符演示</h1> <p class="red">这是个<em>段落</em>。</p>
<p class="red">第二个段落。</p>
</body> </html>
4.颜色:在CSS中你可以用颜色属性 来 指定 任意元素的颜色
1) p { color:red;} 设置段落的字体颜色为红色,直接用关键字red来改变color的属性值
2) h1 { color: rgb(255,0,0)}} 用RGB方式
5.背景颜色
p{background-color:green;}//设置段落的背景颜色为绿色
6.布局四属性:用CSS做布局,有几个属性之间的关系,你一定要明白,要不然很容易混淆
Content:它可以是图片,文本,可以是任何元素
Padding:
Margin:指一个border与另一个border之间的距离,即边间距
7.边框(比如在网页中插入一个图片,图片四周就有个边框)
在CSS中你可以用关键字来指定边框宽度
border-width:thin border-width:medium border-width:thick 其中thin,medium,thick是关键字
也可用具体的数值来指定边框宽度
border-width:10px