【前言】
- 层叠样式表是一种用来表现HTML等文件样式的计算机语言
- 样式可以通过定义保存在外部.css文件中
- 提高工作效率
- 拥有对网页对象和模型样式编辑的能力
- 是一门样式表语言
- 选择器是让css作用于那些标签(查找要作用于标签的方法)
【基本选择器】
1.ID选择器
- 选择符是“#”
- 每个ID只对应一个元素,一个元素只对应一个ID
<title>Title</title>
<style>
#p{
color:red
}
#pa{
background:red
}
</style>
</head>
<body>
<p id="p">层叠样式表</p>
<p id="pa">叠层样式表</p>
</body>
浏览器显示如下:
2.类选择器
- 设置字体颜色
- 类选择器可以被多种标签使用
- 以一个点号显示
<style>
.red{
color:red
}
</style>
</head>
<body>
<p class="red">层叠</p>
<span class="red">样式</span>
<div class="red">表</div>
</body>
浏览器显示如下:
3.标签选择器
<title>Document</title>
<style type="text/css">
span{
color: red;
}
</style>
</head>
<body>
<p>我爱学习<span>前端</span>嘞</p>
</body>
浏览器显示如下:
【大小关系】
ID选择器>类选择器>标签选择器
<link href="html.css" rel="stylesheet">
<style type="text/css">
p{
color:red
}
</style>
</head>
<body>
<p>暮然回首,那人却在灯火阑珊处</p>
</body>
外部css连接
#div{
color:red
}
.div{
color:pink
}div{
color:greenyellow;
}
浏览器显示如下:
4.层次选择器
- 空格:同级的相同
- 大于(>):同上,空格换成>即可
- 加号(+):最接近它的兄弟变为定义的颜色
- 波浪线(~):表示兄弟们所有都为定义颜色
5.结构伪类选择器
6.属性选择器:
- 反三角(^):属性以某个字母开始
- (&):以某个字母结尾
<title>Title</title>
p[id$=c]{color:red}
<body>
<p id=“pa”>aa</p>
<p id=“pb”>aa</p>
<p id=“pc”>aa</p>
<p id=“pd”>aa</p>
<div id=“pa”>aa</div>
</body>
浏览器显示如下:
- 乘等于(*):包含某个字母 p[id*=c]{color:red}
7.表单选择器
8.字体选择器
- font-style::设置斜体字 p{font-style:italic:}
- font-weight:设置字体线条的粗细 p{font-weight:bold;}
- font-size:设置字体大小
- font-family:设置使用何样字体