样式表:
一。内联:写在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>