第二章 选择符和属性

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 

 

 

 

 

 

 

 

 

 

 

posted @ 2013-04-16 14:15  springstudent  阅读(208)  评论(0编辑  收藏  举报