本文详细介绍了CSS的三种引入方式（内联、嵌入式和外部），以及基础选择器如id选择器、类选择器、标签名选择器等的用法，还涵盖了优先级、复杂选择器如后代、子代、兄弟选择器和交集选择器的讲解，有助于初学者理解和掌握CSS基础。
目录
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>
262
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
