css样式表

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

新老客户大回馈,云服务器低至5折

样式表:

    一。内联:写在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>       /*执行该标签,改变其背景颜色*/
</div> </body>

  

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:清除浮动方法解析

下一篇:仿写一个简单的网站,以及初学前端的一点感悟