一、标签名选择器
标签名选择器的格式是:
标签名{
属性:值;
}
示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS选择器</title>
<style type="text/css">
div{
border:1px solid yellow;
color: blue;
font-size: 30px;
}
span{
border:5px dashed blue;
color:yellow;
font-size:20px;
}
</style>
</head>
<body>
<!--
在所有div标签上修改字体颜色为蓝色,字体大小30个像素。边框为1像素黄色实线。
并且修改所有span 标签的字体颜色为黄色,字体大小20个像素。边框为5像素蓝色虚线。
-->
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
</body>
</html>
二、ID选择器
id
选择器的格式是:
#id 属性值
{
属性:值;
}
id
选择器,通过
id
属性选择性的去使用这个样式
示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ID选择器</title>
<style type="text/css">
#id001{
color:blue;
font-size: 30px;
border:1px yellow solid;
}
#id002{
color:red;
font-size: 20px;
border:5px blue dotted;
}
</style>
</head>
<body>
<!--
分别定义两个 div 标签,
第一个div 标签定义 id 为 id001 ,然后根据id 属性定义css样式修改字体颜色为蓝色,
字体大小30个像素。边框为1像素黄色实线。
第二个div 标签定义 id 为 id002 ,然后根据id 属性定义css样式 修改的字体颜色为红色,字体大小20个像素。边框为5像素蓝色点线。
-->
<div id="id001">div标签1</div>
<div id="id002">div标签2</div>
</body>
</html>
三、class选择器(类选择器)
class
类型选择器的格式是:
.class
属性值
{
属性:值;
}
class
类型选择器,可以通过
class
属性有效的选择性地去使用这个样式
示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class类型选择器</title>
<style type="text/css">
.class01{
color: blue;
font-size: 30px;
border: 1px yellow solid;
}
.class02{
color: grey;
font-size: 26px;
border: 1px red solid;
}
</style>
</head>
<body>
<!--
1:修改 class 属性值为 class01的 span 或 div 标签,字体颜色为蓝色,字体大小30个像素。边框为1像素黄色实线。
2:修改 class 属性值为 class02的 div 标签,字体颜色为灰色,字体大小26个像素。边框为1像素红色实线。
-->
<div class="class01">div标签class01</div>
<div class="class02">div标签</div>
<span class="class01">span标签class01</span>
<span>span标签2</span>
</body>
</html>
四、组合选择器
组合选择器的格式是:
选择器 1
,选择器
2
,选择器
n{
属性:值;
}
组合选择器可以让多个选择器共用同一个 css 样式代码
示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class类型选择器</title>
<style type="text/css">
.class01,#id01{
color:blue;
font-size: 20px;
border:1px yellow solid;
}
</style>
</head>
<body>
<!--
1:修改 class="class01" 的div 标签 和 id="id01" 所有的span标签,
字体颜色为蓝色,字体大小20个像素。边框为1像素黄色实线。
-->
<div class="class01">div标签class01</div> <br />
<span id="id01">span 标签</span> <br />
<div>div标签</div> <br />
<div>div标签id01</div> <br />
</body>
</html>
五、常用样式
示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>06-css常用样式.html</title>
<style type="text/css">
div{
color: red; /*字体颜色*/
border: 1px yellow solid; /*边框*/
width: 300px; /*宽度*/
height: 300px; /*高度*/
background-color: blue; /*背景颜色*/
font-size: 30px; /*字体大小*/
margin-left: auto; /*DIV 居中*/
margin-right: auto;
text-align: center; /*文本居中*/
}
table{
border:1px red solid; /*设置边框*/
border-collapse: collapse; /*将边框合并*/
}
td{
border:1px red solid; /*设置边框*/
}
a{
text-decoration:none; /*超连接去下划线*/
}
ul{ /*列表去除修饰*/
list-style:none;
}
</style>
</head>
<body>
<ul>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
</ul>
<table>
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
</table>
<a href="http://www.baidu.com">百度</a>
<div>我是div标签</div>
</body>
</html>