本文介绍了CSS3的基本概念，强调了样式和结构的分离，指出选择器是连接HTML和CSS的关键。内容涵盖CSS的书写位置，如内嵌、外链和行内样式，并详细阐述了各种选择器的用法，包括标签选择器、ID选择器、类选择器、原子类、复合选择器和关系选择器。此外，还讨论了CSS选择器的权重规则。
一、CSS简介
CSS（Cascading Style Sheet， 层叠式样式表）是用来给HTML标签添加样式的语言。
CSS3是CSS的最新版本，增加了大量的样式、动画、3D特性和移动端特性。
1.前端三层
| 三层 | 语言 | 功能 |
|---|---|---|
| 结构层 | HTML | 搭建结构、放置部件、描述语义 |
| 样式层 | CSS | 美化页面、实现布局 |
| 行为层 | JavaScript | 实现交互效果、数据发送与接收、表单验证等 |
2.CSS样式和结构分离
CSS使样式和结构分离，样式和结构不用“混合着写”，而是彼此分开。
HTML就负责结构，CSS负责样式。
HTML和CSS怎么结合呢？----“选择器”就是两者的纽带。
3.CSS本质
CSS就是样式的清单。要书写合适的选择器，然后用选择器来指定元素的样式，并一条一条罗列出来。
CSS没有加减乘除、或与非、循环、判断。CSS不是编程，仅是直接了当的罗列样式。
背熟CSS的属性，非常的重要，属性的熟练程度，决定了做网页的速度。
4.CSS书写位置
1）内嵌式：在<head>的<style>标签中，书写CSS代码
<!--必须是head标签中-->
<head>
<!--用style标签包裹-->
<style>
#div1 {
font-size: 18px;
}
</style>
</head>
2）外链式：将代码单独保存为.css文件，再在HTML的<head>引入
<head>
<link rel="stylesheet" href="css/index.css">
</head>
3）行内式：通过标签的style属性来设置元素的样式
<div style="width: 100%;height: 30px;color: red;"></div>
5.总结
公共的：放在CSS文件，所有人可以引用它
页面单独使用：放在head里面
一行使用：放在某一行里面
同样的CSS样式顺序：从里到外
不同的CSS样式顺序：层叠
二、CSS选择器
1.标签选择器 ***
也称元素选择器、类型选择器。它直接使用元素的标签名当做选择器，选择的是页面上所有的该种标签，无论这个标签所处位置的深浅。
2.id选择器（单个）***
CSS选择器可以使用#id名称（井号+id的名称），来选择指定id的标签。
3.class选择器(一类）***
1）什么是class属性
class属性，表示“类名”。
<p class="success">操作成功！</p>
类名的命名规范，和id属性的命名规范相同。和id属性不同的是多个标签，可以有相同的类名。
CSS选择器可以使用.class名称（点号+class的名称），来选择指定class的标签。
2）多样化: 可以同时使用id、class，id优先级高
特点：多个标签可以是相同类名
<p class="success">操作成功！</p>
<ul>
<li>张三</li>
<li class="success">李四</li>
</ul>
<div>
<span class="success">无边落木萧萧下，不见长江滚滚来</span>
</div>
4.原子类（元素公用，定位为类）
在做网页项目前，可以将所有的常用字号、文字颜色、行高、外边距、内边距等，都设置为单独的类。
使用原子类：
定义原子类后，HTML标签就可以“按需选择”它的类名了，这样就可以非常快速的添加一些常见的样式。
<p class="f14 color-bule">长大后，我就成了你...</p>
5.复合选择器
复合选择器的分类：
| 选择器名称 | 示例 | 含义 |
|---|---|---|
| 后代选择器 | .box .spec | 选择类名为box的标签内部的类名为spec的标签 |
| 交集选择器 | li.spec | 选择既是li标签，也属于spec类的标签 |
| 并集选择器 | ul,ol | 选择所有ul和ol标签 |
1）后代选择器
类名c2的内部类名c3标签（儿子、孙子…）
2）交集选择器
选择含有.spec类的span标签，应该使用交集选择器
3）并集选择器
并集选择器也叫作分组选择器，逗号表示分组
6.关系选择器
三种关系选择器：
| 名称 | 示例 | 含义 |
|---|---|---|
| 子选择器 | div > p | div的子标签p |
| 相邻兄弟选择器 | img + p | 图片后面紧跟着的段落将被选中 |
| 通用兄弟选择器 | p~span | p元素之后的所有同层级span元素 |
7.层叠性权重
如果多个选择器定义的属性有冲突，CSS提供了严密的冲突处理规则：
id权重 > class权重 > 标签权重
三、CSS示例
元素选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器-普通选择器</title>
<style>
/*******************以下是标签选择器1/2/3********************/
/* span标签选择器（1），字体颜色为红色 */
span {
color: red;
}
/* ul 标签选择器（2），去掉列表前面的小圆点 */
ul {
list-style: none; /* 去掉无序列表前的小圆点 */
}
/* a标签选择器（3），去掉超链接的下划线 */
a {
/* 去掉超链接的下划线 */
text-decoration: none;
}
/*******************4.以下是ID选择器********************/
#part1 {
color: blue;
}
/*******************5/6/7.以下是样式选择器********************/
.success {
color: pink;
}
.spec {
font-weight: bold;
}
/*******************8.以下是原子类举例********************/
.f12 {
font-size: 12px;
}
.f14 {
font-size: 14px;
}
.f16 {
font-size: 16px;
}
.color-red {
color: red;
}
.color-blue {
color: blue;
}
.color-pink {
color: pink;
}
</style>
</head>
<body>
<!-- 1.标签选择器（一） -->
<h2>选择span标签</h2>
<div>
<p>一分耕耘一分收获，</p>
<span>未必！</span>
<p>九分耕耘一分收获，</p>
<p><span>一定。</span></p>
</div>
<!-- 2.标签选择器（二） -->
<h2>相思（去掉小圆点）</h2>
<ul >
<li>红豆生南国</li>
<li>春来发几枝</li>
<li>愿君多采撷</li>
<li>此物最相思</li>
</ul>
<!-- 3.标签选择器（三） -->
<h2>超链接（去掉下划线）</h2>
<div>
<a href="">百度一下</a>
</div>
<!-- 4.ID选择器 -->
<h2>ID选择器</h2>
<p id="part1">这里是第一部分内容</p>
<!-- 5.Class选择器 -->
<h2>Class选择器</h2>
<p class="success">
操作成功！
</p>
<!-- 6.多标签同一Class -->
<h2>多个标签同一个class</h2>
<p class="success">操作成功！</p>
<ul>
<li>张三</li>
<li class="success">李四</li>
</ul>
<div>
<span class="success">身无彩凤双飞翼，心有灵犀一点通</span>
</div>
<!-- 7.同一标签多个Class -->
<h2>同一标签多个class</h2>
<p class="success spec">
操作成功！
</p>
<!-- 8.使用原子类 -->
<p class="f14 color-blue">长大后，我就称了你...</p>
<br>
<br>
<br>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器-复合选择器</title>
<style>
/*******************1.以下是【复合选择器-后代选择器】举例1/2/3*****************/
.list li {
color:red;
}
.list ul li .top span { /*选择好几代*/
color:red;
}
/*******************4.以下是【复合选择器-交集选择器】举例********************/
span.spec {
font-size: 28px;
}
/*******************5.以下是【复合选择器-并集选择器】举例********************/
p, ul {
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<!-- 1.后代选择器 -->
<h2>古代四大美女</h2>
<ul class="list"> <!--父-->
<li>西施</li> <!--子-->
<li>王昭君</li>
<li>貂蝉</li>
<li>杨玉环</li>
</ul>
<!-- 2.后代选择器-不一定是儿子 -->
<h2>还是古代四大美女</h2>
<div class="list"> <!--父-->
<ul>
<li>西施</li> <!--孙子-->
<li>王昭君</li>
<li>貂蝉</li>
<li>杨玉环</li>
</ul>
</div>
<!-- 3.后代选择器-好几代 -->
<h2>还是古代四大美女</h2>
<div class="list"> <!--父-->
<ul> <!--子-->
<li> <!--孙-->
<p class="top"> <!--曾孙-->
<span>西施</span>(之首) <!--玄孙-->
</p>
</li>
<li>王昭君</li>
<li>貂蝉</li>
<li>杨玉环</li>
</ul>
</div>
<!-- 4.交集选择器 -->
<h2>交集选择器</h2>
<p>
世界加油！
<span class="spec">中国加油！</span>
</p>
<!-- 5.并集选择器(用并集选择器，设置p,ul标签的margin/padding)-->
<br>
<br>
<br>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器-关系选择器及属性选择器</title>
<style>
/* 1.子选择器，仅选择儿子。和空格不同 */
div>a{
color:blue;
}
/* 2.相邻兄弟选择器 */
img+p{
background:pink;
}
/* 3.通用兄弟选择器*/
p~span{
background: yellow;
}
/* 4.属性选择器 */
input[name="username"]{
color: red;
}
</style>
</head>
<body>
<!-- 1.【关系选择器-子选择器】 -->
<div>
<p><a href="">点我啊1</a></p>
<a href="">点我啊2</a>
</div>
<!-- 2.【关系选择器-相邻兄弟选择器】 -->
<div>
<img src="image/fj.png" width="100px">
<p>远亲不如近邻啊！</p>
<p>远亲真不如近邻啊！</p>
</div>
<!-- 3.【关系选择器-通用兄弟选择器】 -->
<div>
<p>第一段落</p>
<span>冬天过去了</span>
<span>春天还会远吗</span>
</div>
<!-- 4.属性选择器，input标签的name属性=username的，字体红色 -->
<div>
用户名：<input type="text" name="username" id="">
密码:<input type="text" name="password" id="">
</div>
<br>
<br>
<br>
</body>
</html>
伪元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪元素</title>
<style>
/* 1.在a标签的内容的前面，添加一个三角形 */
a::before {
content: "🔺";
}
p::after{
content: "！";
}
</style>
</head>
<body>
<!-- 伪元素1 -->
<a href="">超链接1</a>
<a href="">超链接2</a>
<a href="">超链接3</a>
<!-- 伪元素2 -->
<p>此地无银三百两</p>
<p>隔壁王二不曾偷</p>
</body>
</html>
颜色的四种表示法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>颜色的四种表示法</title>
<style>
/*
color 属性可设置文本内容的前景色
color 属性值表示方法有四种：英语单词、十六进制、rgb()、rgba()
1.英语单词表示法，仅用于学习时临时设置颜色，在工作中，由于追求精确，基本上不用该表示法
2.十六进制表示法，是所有设计软件中通用的颜色表示法，十六进制ff就是十进制的255，每种颜色分量都是0~255的数字
如果颜色值是 #112233 的形式，可以简写为：#123
3.rgb() 表示法格式为：color:rgb(xxx,xxx,xxx);
4.rgba() 表示法是在rgb()表示法的基础上，后面添加一个表示透明度的参数，值介于0~1之间，0表示纯透明，1表示纯实心
*/
/* 1.颜色英文表示法 */
.c1 {
color: red;
}
/* 2.颜色十六进制表示法 */
.c2 {
color: #ff00bb; /*可以简写为：f0b*/
}
/* 3.颜色rgb()表示法 */
.c3 {
color: rgb(255,0,183);
}
/* 4.颜色rgba()表示法 */
.c4 {
color: rgb(255,0,183,0.5);
}
</style>
</head>
<body>
<h2>静夜思</h2>
<p class="c1">床前明月光，</p>
<p class="c2">疑是地上霜。</p>
<p class="c3">举头望明月，</p>
<p class="c4">低头思故乡。</p>
</body>
</html>
文本样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本样式</title>
<style>
/*
font-size 属性用来设置文本字号，单位通常是px。此外还有：em、rem等单位
font-weight 属性设置字体的粗细程度，用的最多的通常是：normal 和bold 两个值
font-style 属性用于设置字体的倾斜，取值：italic（倾斜）、normal（不倾斜）
font-family 属性用于设置文本的字体，可以同时设置多个，后面的是备胎，
text-decoration 属性用于设置文本的修饰线（下划线、删除线），取值：underline（下划线）、line-through（删除线）
*/
p {
font-size: 32px;
font-weight: bold;/*加粗*/
font-style: italic;/*倾斜*/
font-family: "宋体";/*字体 Arial "Times New Roman" "宋体" */
text-decoration: underline;/*下划线*/
}
</style>
</head>
<body>
<h2>静夜思</h2>
<p>床前明月光，</p>
<p>疑是地上霜。</p>
<p>举头望明月，</p>
<p>低头思故乡。</p>
</body>
</html>
段落：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>段落</title>
<style>
/*
段落：一般有段落缩进、行高
如果设置行高=盒子高度，则可实现单行文本的垂直居中
*/
/* 1.设置缩进 */
p,div {
height: 50px;
text-indent: 2em;
border: pink solid 1px;
}
/* 2.定义行高(如果设置行高=盒子高度，则可实现单行文本的垂直居中) */
.lh50 {
line-height: 50px;
}
</style>
</head>
<body>
<h2>静夜思1</h2>
<p>床前明月光，</p>
<p class="lh50">疑是地上霜。</p>
<p>举头望明月，</p>
<p>低头思故乡。</p>
<h2>静夜思2</h2>
<div>床前明月光，</div>
<div class="lh50">疑是地上霜。</div>
<div>举头望明月，</div>
<div>低头思故乡。</div>
</body>
</html>
扫一扫
582
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
