首页 > > 网页制作 > css >

css样式表

2018-06-24 00:40:20来源：未知阅读 ()

样式表：

一。内联：写在body中直接在内容的标签中添加style属性：例如<div style="...">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 class="a"></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 class="a4"></p>
<p class="a3"></p>       /*执行该标签，改变其背景颜色*/