你的位置:首页 > 网页设计

[网页设计]11月19号上午,css样式表


---恢复内容开始---

样式表:

    一。内联:写在body中    直接在内容的标签中添加style属性:例如<div >1234</div>

   二。内嵌:写在head中   一般写在标题标签的后面,添加<style type="text/css"></style>标签,p为需要改变的标签

                 

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>    /*style是双标签元素*/p{	background:#000}</style>

  三。外部样式表:新建一个css文件

                           在文件中右键,选择css样式,附加样式表。添加入之前新建的样式表。保存之后会出现一组link开始的标签

 

 

选择器:

1. 用标签做选择器:方法:以p标签为例,p{}

<style>p{      /*所有P标签改变的背景颜色*/	background:#000}</style>

2.class选择器:class的值可以相同,以"."开头<head>

<style>.a{          /*执行所有class的值为a的标签,改变属性*/	background:#9C0}</style></head><body><p ></p>  /*定义p标签的属性为a*/
<div></div>
</body>

</html>

3.id选择器:id的值不能重复,以"#"开头

<head><style>#a1{           /*id的值为a1的标签所包括的内容,改变属性*/	background:#000}</style></head><body><p id="a2"></p><p id="a1"></p>       /*定义该p标签的id为"a1"*/</body>

4.复合选择器:

(1)用逗号隔开,表示并列

<head><style>div,p{          /*所有div和p标签均执行此操作*/	background:#093}</style></head><body><div></div>         /*执行该标签,改变其背景颜色*/<p></p>            /*执行该标签,改变其背景颜色*/
<p></p> /*执行该标签,改变其背景颜色*/
</body>

(2)用空格隔开,表示后代 需要有包含关系

<head><style>div p{                  /*在div中的p标签,所执行的属性*/	background:#093}</style></head><body><div></div><p></p><p></p><div><p></p>         /*执行该标签,改变其背景颜色*/
</div>
</body>

(3)筛选:

<head><style>p.a3{           /*在所有p标签中,只执行klass的值为a3标签*/	background:#633}</style></head><body><div></div><p></p><p></p><div><p ></p><p ></p>    /*执行该标签,改变其背景颜色*/
</div> </body>

  

---恢复内容结束---

样式表:

    一。内联:写在body中    直接在内容的标签中添加style属性:例如<div >1234</div>

   二。内嵌:写在head中   一般写在标题标签的后面,添加<style type="text/css"></style>标签,p为需要改变的标签

                 

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>    /*style是双标签元素*/p{	background:#000}</style>

  三。外部样式表:新建一个css文件

                           在文件中右键,选择css样式,附加样式表。添加入之前新建的样式表。保存之后会出现一组link开始的标签

 

 

选择器:

1. 用标签做选择器:方法:以p标签为例,p{}

<style>p{      /*所有P标签改变的背景颜色*/	background:#000}</style>

2.class选择器:class的值可以相同,以"."开头<head>

<style>.a{          /*执行所有class的值为a的标签,改变属性*/	background:#9C0}</style></head><body><p ></p>  /*定义p标签的属性为a*/
<div></div>
</body>

</html>

3.id选择器:id的值不能重复,以"#"开头

<head><style>#a1{           /*id的值为a1的标签所包括的内容,改变属性*/	background:#000}</style></head><body><p id="a2"></p><p id="a1"></p>       /*定义该p标签的id为"a1"*/</body>

4.复合选择器:

(1)用逗号隔开,表示并列

<head><style>div,p{          /*所有div和p标签均执行此操作*/	background:#093}</style></head><body><div></div>         /*执行该标签,改变其背景颜色*/<p></p>            /*执行该标签,改变其背景颜色*/
<p></p> /*执行该标签,改变其背景颜色*/
</body>

(2)用空格隔开,表示后代 需要有包含关系

<head><style>div p{                  /*在div中的p标签,所执行的属性*/	background:#093}</style></head><body><div></div><p></p><p></p><div><p></p>         /*执行该标签,改变其背景颜色*/
</div>
</body>

(3)筛选:

<head><style>p.a3{           /*在所有p标签中,只执行klass的值为a3标签*/	background:#633}</style></head><body><div></div><p></p><p></p><div><p ></p><p ></p>    /*执行该标签,改变其背景颜色*/
</div> </body>