属性选择符、字体样式和元素样式

属性选择符：

body内的代码如下：

<a href="##" class="columnNews">我的背景想变成红色</a>
<a href="##" class="columnVideo">我的背景想变成红色</a>
<a href="##" class="columnAboutUs">我的背景想变成红色</a><br/>
<a href="1.doc">我的背景想变成绿色</a>
<a href="2.doc">我的背景想变成绿色</a><br/>
<a href="##" title="this is a box">我的背景想变成蓝色</a>
<a href="##" title="box1">我的背景想变成蓝色</a>
<a href="##" title="there is two boxs">我的背景想变成蓝色</a>

<style type="text/css"></style>中代码如下：

E[att]　　　　　　　　选择具有att属性的E元素。

<style type="text/css">
a[class]{
        background-color: red; /*含class属性的背景颜色变红*/
    }

</style>

E[att="val"] 　　　　选择具有att属性且属性值等于val的E元素。　

a[class="columnAboutUs"]{
        background-color: red; /* class属性且属性值等于columnAboutUs的a元素背景变红。 */
    }

E[att~="val"]　　　　选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。

a[class~="columnAboutUs"]{
        background-color: red;/*选择具有class属性且属性值为一用空格分隔的字词列表，其中一个等于columnAboutUs的a元素（包含只有一个值且该值等于columnAboutUs的情况）。*/ 
}

E[att^="val"]　　　　　选择具有att属性且属性值为以val开头的字符串的E元素。

a[class^="col"]{
        background-color: red; /*class属性且属性值为以col开头的字符串的a元素*/ }

E[att$="val"]　　　　　选择具有att属性且属性值为以val结尾的字符串的E元素。

a[class$="s"]{
        background-color: red; /*class属性且属性值为以s结尾的字符串的a元素的背景色为红色。*/ }

E[att*="val"]　　　　选择具有att属性且属性值为包含val的字符串的E元素。

a[class$="s"]{
        background-color: red; /*class属性且属性值为包含s的字符串的所有a元素的背景色为红色。*/ }

E[att|="val"]　　　　　选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。

a[class|="columnNews"]{color:red}

字体样式：

1、 font-family

p{
    font-family:宋体;
}

2、font-size

p{
    font-size:14px;/*字体大小：14px*/

3、 font-weight　

p{
    font-weight:bold;/*加粗*/

4、 font-style

p{
    font-style:italic;/*斜体*/
}

　line-height：16px; 是行高的意思。这里的意思是行高是16px;

5、 font

可以和上面的几个字体样式缩写：p { font:italic bold 14px/16px 宋体}

6、color

p{
    color: red/*字体颜色为红色*/
}

7、 text-decoration

控制文本装饰线条

属性值有：none（取消默认值下划线）underline（下划线）overline（上划线）line-through（删除线）

<style type="text/css">
 
 p:first-of-type{
        text-decoration: overline; /*同类型第一个p标签为上划线*/
    }
    p:nth-of-type(2){
        text-decoration: line-through; /*同类型第二个p标签为删除线*/
    }
    p:last-of-type{
        text-decoration: underline; /*同类型最后一个p标签为下划线*/
    } 
</style>

<body>
　　<p>上划线</p>
　　<p>删除线</p>
　　<p>下划线</p>
</body>

8、 text-shadow

<style type="text/css">
     p{
        text-shadow:-5px 5px 10px red;
        font-size: 25px;
    }
    span{
        text-shadow:5px 5px 2px #000;
    } 
</style>

<body>
 <p> 我是有阴影的p标签   <span>我也有阴影</span></p>
<body>

效果如下：

9、 width （宽度）

比如：

p{100px;}
div{100px;}

10、 height（高度）

比如：

p{height:100px;}
div{height:100px;}

11、 margin （外边距）

　　margin-top 设置上边的外边距

margin-bottom 设置上边的外边距

margin-left 设置上边的外边距

margin-right 设置上边的外边距

div{ 100px; height:100px; margin-top:5px;}

缩写型式：

　　margin ：上边距(px) 右边距(px) 下边距(px) 左边距(px)

　　margin ：上下边距(px) 左右边距(px)

　　margin ：上边距(px) 左右边距(px) 下边距(px)

div{ 100px; height:100px; margin:5px 6PX 7PX 8PX;}

div{100px; height:100px; margin:0 auto}

div{100px; height:100px; margin-left:auto; margin-right:auto}

以上两个都是表示居中的意思

12、 padding（内边距）

padding-top 设置上边的内边距

padding-bottom 设置上边的内边距

padding-left 设置上边的内边距

padding-right 设置上边的内边距

div{ 100px; height:100px; padding-top:5px;}

缩写型式：

padding：上边距(px) 右边距(px) 下边距(px) 左边距(px)

　　padding：上下边距(px) 左右边距(px)

　　padding：上边距(px) 左右边距(px) 下边距(px)

div{ 100px; height:100px; padding:5px 6PX 7PX 8PX ;}

　　pading：5px;（上右下左的内边距都是5px。）

以下是一个有margin和padding的一个例子：

<style type="text/css">
.box{  150px;
        height: 150px;
        background-color: #ccc;
        font-size: 25px;
        border:3px solid red;
        padding-top: 50px;
        padding-left: 50px;
        margin-left: 200px;
        margin-top: 200px;
    }
</style>

<body>

<div class="box"> 我是内容</div>

</body>