目录
1.css的引入方式
1.1内联样式,行内引入
- 直接给标签添加style属性,用来给当前元素添加样式
- style属性内部是以键值对的形式组成
- 特点:优先级相对较高,仅次于 !important
- 缺点:代码冗余,不好维护
<!-- 内联式引入 -->
<div style="width: 400px; height:400px; background:pink ;">内容</div>
<div style="width: 400px; height:400px; background:pink ;">内容</div>
1.2嵌入式,头部引入
- 使用style标签引入,其内部就是css的书写区域
- style标签建议放在head标签中,可以减少重绘重排
- 优点:样式统一在style中,可以通过选择器控制一个或多个元素,便于维护和修改;实现了结构和样式相分离;减少代码冗余
<!-- 头部引入 -->
<style>
div{
width:400px;
height:400px;
background:pink;
}
p{
width: 200px;
height:200px;
background:goldenrod
}
</style>
1.3外部引入
- 创建一个新的css文件用来书写样式
- 通过link标签将css文件引入到当前网页中(link标签的使用位置和style一致)
- link标签:rel:stylesheet,link引入的css和当前html文档进行关联;href,css的路径
- 优点:一个文件可以控制多个网页,便于维护
<!-- 外部引入 -->
<link rel="stylesheet" href="./03_外部引入.css">
2.基础选择器
2.1id选择器
- 给被选择的元素添加一个id值属性,值是独一无二的
- id值在当前网页中不许重复,id或者class都必须以字母开头,不许有汉字,不能有带有广告的英文单词
- 除第一位外后面可以跟数字,连字符(_,-),见名之意
- 多个单词出现推荐小驼峰命名法,或者连字符连接
- 用 “ #id值 ”来选择拥有当前id值的元素
- id选择器只能选择当前网页中的一个或零个元素
<!-- id选择器 -->
<style>
#content{
width:600px;
height:200px;
background:pink;
}
</style>
<body>
<div>
<p id="content">内容1</p>
<p>内容2</p>
<p>内容3</p>
<p id="font">内容4</p>
</div>
</body>
2.2类选择器
- 想要同时选择一个或多个元素,可以给元素取一个相同的类名
- 设置class属性,值的取名规则和id一致
- 用“ .class值 ”来选择拥有当前class值的元素
- 如果一个元素想要有多个类名,则写在同一个class中用空格隔开
- 用类选择器的要多,因为类的优先级低于id的,所有通常用id选择器做层叠效果
<!-- 类选择器 -->
<style>
.content{
height:100px;
background:pink;
}
.font{
font-size:30px;
}
</style>
<body>
<div>
<p class="content">内容1</p>
<p>内容2</p>
<p class="font">内容3</p>
<p class="content font">内容4</p>
</div>
</body>
2.3标签名选择器
- 直接在css中使用标签名来选择元素(会选中当前页面中所有使用这个标签的元素)
- 标签名选择器一般不会独立使用,会和其他选择器组成复杂选择器使用
<!-- 标签名选择器 -->
<style>
p{
width:100px;
height:100px;
background:pink;
}
</style>
<body>
<div>
<p>con1</p>
<p>con1</p>
<h2>con1</h2>
<p>con1</p>
<div>con1</div>
</div>
2.4通配符选择器
- 通配符选择器就是“ * ”号,代表匹配网页中的所有元素
- 常用在控制所有元素、清除默认样式
- 要控制所有元素性能不好,通常很少使用
<!-- 通配符选择器 -->
<style>
* {
color:pink;
}
</style>
<div>
<p>p1</p>
<p>p2</p>
<h2>h2</h2>
<p>p3</p>
<div>div1</div>
</div>
2.5 !important
- 作用是设置某一个样式规则的,优先级最高
- 一般不使用,主要用来救急
<style>
.content{
width: 600px;
height: 100px;
background-color:pink !important; /* !important作用指定某一样式的优先级最高 */
}
</style>
<body>
<div>
<p>1</p>
<p>2</p>
<p class="content" style="background:red;">3</p>
</div>
</body>
3.优先级
!important > 行内样式 > id选择器 > 类选择器 > 标签名选择器 > 通配符 > 默认 > 继承
4.复杂选择器
4.1后代选择器
- 后代选择器使用空格间隔开,用来选择某个元素下的所有后代元素,无论嵌套在多少层内
<style>
.test { /* 后代选择器 */
color:pink;
width: 100px;
height: 100px;
}
</style>
<div>
<ol class="test">
<li>1</li>
<li>2</li>
</ol>
<ol>
<li>3</li>
<li>4</li>
</ol>
</div>
4.2子代选择器
- 子代选择器使用“ > ”好间隔开,用来选择某个元素的直接子元素,不会选择嵌套在更深层级的
<style>
.a > p {
width: 30px;
height: 30px;
color: blueviolet; /* 字的颜色会继承 */
background-color: red;
}
</style>
<div class="a">
<p>
111
<span>span</span>
</p>
<p>222</p>
<p>333</p>
</div>
4.3相邻兄弟选择器
- 相邻兄弟选择器用“ + ”间隔
<style>
.title + p {
color: coral;
}
/* h2不会被选上,因为它没有紧贴着test */
.test + h2 {
color: red;
}
</style>
<div>
<h1 class="title">标题h1</h1>
<p>内容1</p>
<p class="test">内容2</p>
<p>内容3</p>
<h2>标题2</h2>
</div>
4.4通用兄弟选择器
- 相邻兄弟选择器用“ ~ ”间隔
<style>
.content > .title ~ p {
background-color: red;
}
.title ~ h2 {
background-color: aqua;
}
</style>
<div class="content">
<h1 class="title">标题</h1>
<p>内容1</p>
<p>内容2</p>
<p>内容3</p>
<h2>标题2</h2>
</div>
4.5交集选择器
- 由两个选择器直接连接构成,选择二者各自范围内的交集
- 第一个一般是标签名选择器或类选择器,第二个必须是类别选择器或者ID选择器,两个选择器之间不能有空格,必须连续书写
<style>
.page p.test1 {
color: white;
background-color: red;
}
.page p#test2 {
background-color: aqua;
}
</style>
<div class="page">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p class="test1">5</p>
<p>6</p>
<p id="test2">7</p>
<p>8</p>
</div>
4.6群组选择器
- 将多个选择器使用逗号隔开,可以同时对多个选择器设置样式
- 如果对个元素有相同的样式,方法有两种:使用一个共同的类名;使用群组选择器
- 如果多个元素有相同的样式,也有不同的样式,可以把相同的样式提炼到一个群组选择器中,其他的各自写各自的
<!-- 一 -->
<style>
.list1 li,
.list2 li
{
width: 300px;
height: 80px;
background-color: bisque;
}
</style>
<!-- 二 -->
<style>
.item
{
width: 300px;
height: 80px;
background-color: bisque;
}
.list1 {
color: blue;
}
.list2{
color: brown;
}
</style>