1.CSS
1.1简介
CSS 是一种描述 HTML 文档样式的语言。
作用:为HTML便签添加样式，让它变的好看。
html的作用是添加语义。
css的作用是添加样式。
css学习选择器和属性。
1.2语法结构
选择器 (属性1:值; 属性2:值; 属性3:值;) --> 声明块
选择器:指向您需要设置样式的 HTML 元素/标签。
声明块:包含一条或多条,用分号分隔的声明。
每条声明都包含一个CSS属性名称和一个值，以冒号分隔。
多条CSS声明用分号分隔，声明块用花括号括起来。
1.3引入方式
HTML代码渲染样式需要先引用css代码.
引用的方式有三种:
1.HTML文档中style标签内直接书写 (临时使用)
2.使用link标签引用外部css文件 (最正规的方式,解耦合)
3.在HTML标签的style属性中书写 (临时使用，不推荐使用)
1.直接书写
在head标签内使用style标签.
内部直接书写（临时使用）
<head>
···
<style type="text/css">
选择器（标签）{
属性:值;
key:value;
···
}
</style>
</head>
分号不要省略。
style 标签中，默认带有 type="text/css" 告诉浏览器这个是css文件,可以省略不写。
2.外部引入
link便签引用外部css文件
<link rel="stylesheet" href="01.css">
3.行内书写
在HTML标签的style属性中书写 可以称为 行内式
<h1 style="color: chartreuse">书写样式1</h1>
这个方式是最不推荐的,html只需要为文字添加语意就可以了,
css才是设置样式的.分工明确!
1.4css注释
/* 单行注释 */
/*
多行注释1
多行注释2
/*
通常使用css样式的时候也会用来注释划定样式区域，
（因为HTML代码多，对应的css代码也很多）
/* 博客园首页的css样式文件 */
/* 顶部导航条样式 */
···
/* 左侧菜单栏样式*/
···
/* 右侧菜单栏样式 */
···
2.基本选择器
css 为标签设置样式,需要先通过选择器来匹配标签,在设置样式.
基本选择器:
1.标签选择器
2.id选择器
3.类选择器
4.通用选择器
2.1标签选择器
1.介绍
依据标签的名字找到标签。
标签选择器会选后，当前页面的所有该标签都被选中。
2.格式
标签名称 {
属性:值;
···
}
3.演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签签选择器</title>
<style>
h1 {
color: red; /* 设置标签的文字的颜色 */
}
h3 {
color: aqua;
}
</style>
</head>
<body>
<h1>石灰吟</h1>
<h6>作者:于谦</h6>
<h3>千锤万凿出深山，烈火焚烧若等闲。</h3>
<h3>粉骨碎身浑不怕，要留清白在人间。</h3>
</body>
</html>
2.2id选择器
1.介绍
依据标签的id属性值找到标签。
在html中id属性的值可以当做是唯一的标识.
注意:
1.id选择器需要加上#号。
2.每个标签都有id属性，同一个页面中id不能重复。
3.id值只能由字母/数字/下划线组成，不能以数字开头，也不能与标签名重名。
4.一般情况下不会使用id，在前端中id是留给js使用的。
2.格式
#id {
属性: 值;
}
3.演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style>
#d1 {
color: red; /* 设置标签的文字的颜色 */
}
#d2 {
color: aqua;
}
</style>
</head>
<body>
<h1>石灰吟</h1>
<h6>作者:于谦</h6>
<h3 id="d1">千锤万凿出深山，烈火焚烧若等闲。</h3>
<h3 id="d2">粉骨碎身浑不怕，要留清白在人间。</h3>
</body>
</html>
2.3类选择器
1.介绍
依据标签的class属性值找到标签。
一般用于批量设置.
注意:
1.类选择器需要加上.号。
2.每个标签都有class属性，类名可以重复。
3.类名只能由字母/数字/下划线组成，不能以数字开头，也不能与标签名重名。
4.类名是给标签设置样式的，CSS使用。
5.标签可以绑定多个类名，类名之间用空格隔开。
<标签 class="类名1 类名2 ···">
2.格式
.类名 {
属性:值;
}
3.演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
.c1 {
color: red; /* 设置标签的文字的颜色 */
}
.c2 {
color: aqua;
}
.typeface {
font-family: '楷体'; /* 设置标签的文字的字体 */
}
</style>
</head>
<body>
<h1>石灰吟</h1>
<h6 class="c1">作者:于谦</h6>
<h3 class="c2 typeface">千锤万凿出深山，烈火焚烧若等闲。</h3>
<h3>粉骨碎身浑不怕，要留清白在人间。</h3>
</body>
</html>
2.4通用选择器
1.介绍
为当前页面所有的标签设置属性。
注意:
1.使用*通配符,找到当前html的所有标签.(也被称为通配符选择器.)
2.使用后会遍历所有的标签，当标签比较多的时候，性能会变差，开发者一帮不会去使用。
（后续学习其他的方案去解决这些问题。）
2.格式
* {
属性:值;
}
3.演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通配符选择器</title>
<style>
* {
color: red; /* 设置标签的文字的字体 */
}
</style>
</head>
<body>
<h1>标题</h1>
<p>1</p>
<p>2</p>
<ul>
<li>
<p>3.1</p>
<p>3.2</p>
</li>
</ul>
</body>
</html>
3.组合选择器
在前端将便签的嵌套用亲戚关系来描述层级。
嵌套的关系定义:
1.后代选择器 空格
2.儿子选择器 >
3.毗邻选择器 +
4.弟弟选择器 ~
3.1后代选择器
1.介绍
后代标签包括了儿子标签，孙子标签 ···
后代选择器可以指定特定的后代标签.(默认是所有)
注意点:
1.后代选中器使用空格隔开。
2.标签名称 id 类可以进行任意组合。
3.顺序-->: 标签名称 #id .类名.
2.格式
格式:
标签名称 #id .类名 {
属性:值;
}
3.演示
1.标签组合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器(标签组合)</title>
<style>
ul li p {
color: red;
}
body p {
font-size: 30px;
}
</style>
</head>
<body>
<p>段落一</p>
<p>段落二</p>
<ul>
<li><p>段落三</p></li>
</ul>
</body>
</html>
2.id组合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器(id组合)</title>
<style>
#d1 #d2 {
color: #04ff00;
}
#d11 #d12 #d13 {
color: red;
}
</style>
</head>
<body>
<p>段落一</p>
<ul id="d1">
<li id="d2">
<p>段落二</p>
</li>
</ul>
<ul id="d11">
<li id="d12">
<p id="d13">段落三</p>
</li>
</ul>
</body>
</html>
3.类名组合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器(类组合)</title>
<style>
.c1 .c2 .c3 {
color: red;
}
</style>
</head>
<body>
<p>段落一</p>
<p>段落二</p>
<ul class="c1">
<li class="c2">
<p class="c3">段落三</p>
</li>
</ul>
</body>
</html>
4.混合组合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器(混合组合)</title>
<style>
ul #d1 .c1 {
color: red;
}
</style>
</head>
<body>
<p>段落一</p>
<ul>
<li id="d1">
<p class="c1">段落二</p>
</li>
</ul>
</body>
</html>
3.2儿子选择器
1.介绍
为标签的儿子标签，设置属性。
注意点:
1.子元素之间需要使用>号。
2.选择器可以是 标签/id/类 名称 任意组合。
2.格式
父标签>儿子标签{
属性: 值;
}
3.演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器(标签组合)</title>
<style>
ul > li > p {
color: red;
}
body > p {
font-size: 30px;
}
</style>
</head>
<body>
<p>段落一</p>
<ul>
<li><p>段落二</p></li>
</ul>
<p>段落三</p>
</body>
</html>
3.3毗邻选择器
1.介绍
同级紧跟在自己标签后面的第一个标签。(CSS2)
注意:
1.相邻兄弟选择器必须使用+号连接。
2.格式
标签+标签 {
属性: 值;
}
3.演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>毗邻选择器</title>
<style>
h1 + p {
color: red;
}
</style>
</head>
<body>
<h1>标题</h1>
<p>第一段落</p>
<p>第二段落</p>
<p>第三段落</p>
</body>
</html>
3.4弟弟选择器
1.介绍
同级自己标签后面的所有选中的标签。(CSS3)
注意:
1. 通用兄弟选择器必须使用~号连接。
2.格式
标签~标签 { /* 指定的弟弟 */
属性: 值;
}
标签~* { /* 所有的弟弟 */
属性: 值;
}
3.演示
1.指定弟弟标签演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弟弟选择器</title>
<style>
h1 ~ p { /* 指定 弟弟p标签 */
color: red;
}
</style>
</head>
<body>
<h1>标题</h1>
<p>第一段落</p>
<p>第二段落</p>
<p>第三段落</p>
<spa>xxx</spa>
</body>
</html>
2.所有弟弟标签演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弟弟选择器</title>
<style>
span ~ * { /* 指定 所有弟弟标签 */
color: red;
}
</style>
</head>
<body>
<h1>标题</h1>
<span>123</span>
<p>第一段落</p>
<p>第二段落</p>
<p>第三段落</p>
</body>
</html>
4.集合选择器
集合选择器:
1.交集选择器
2.并集选择器
4.1交集选择器
1.介绍
找到多个标签中,属性相同的的标签.
注意:
1.选择器中间没有符号。
2.选择器可以是 标签/id/类 名称 任意组合。
2.格式
选择器1选择器2 { /* 连写 */
属性:值;
}
3.演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>交集选择器</title>
<style>
p.c1 {
color: red;
}
.c1#d1 {
color: aqua;
}
</style>
</head>
<body>
<h1 class="c1" id="d1">标题</h1>
<p>第一段落</p>
<p class="c1">第二段落</p>
<p>第三段落</p>
<p class="c1">第四段落</p>
<p>第五段落</p>
</body>
</html>
4.2并集选择器
1.介绍
选中的多个标签设置一个属性。
注意点:
1.并集选择器使用,号连接.
2.选择器可以是 标签/id/类 名称 任意组合.
2.格式
选择器1, 选择器2 {
属性: 值;
}
3.演示
1.同类型选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>并集选择器1</title>
<style>
.c1, .c2 {
color: red;
}
</style>
</head>
<body>
<h1 class="c1">标题</h1>
<p class="c2">第一段落</p>
<p>第二段落</p>
<p>第三段落</p>
</body>
</html>
2.不同类型选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>并集选择器2</title>
<style>
#d1, .c1, span p span{
color: red;
}
</style>
</head>
<body>
<div id="d1">div</div>
<p class="c1">p</p>
<span>span
<p>p
<span> p内span </span>
</p>
</span>
</body>
</html>
5.序列选择器
CSS3中新增加且具有代表性的选择器。
序列选择器: (同类型指定的相同的标签)
1.不同类型序列选择器 (不区分类型)
2.同类型序列选择器 (区分类型)
5.1不同类型序选择器
1.介绍
其父元素的第几个标签.
注意:
1.使用冒号:分隔.
2.冒号前面的标签必须和序号对上才满足条件.(设置的样式只针对冒号前面的标签)
2.不区分类型.
2.格式
其父元素的第一一个子元素
标签:first-child {属性:值;}
其父元素的最后一个子元素
标签:last-child {属性:值;}
其父元素的第n个标签
标签:nth-child(n) {属性:值;}
其父元素的倒数第n个标签
标签:nth-last-child(n) {属性:值;}
父元素中只存在唯一一个标签
标签:only-child {属性:值; }
父元素中所有奇数标签
标签:nth-child(odd) {属性:值;}
父元素中所有偶数标签
标签:nth-child(even) {属性:值;}
公式条件
nth-child(xn+y) {属性:值;}
x 与 y 为自定义数字,
n为数字从0开始递增。
2n+0 2*0+0 = 0 2n+1 2*0+1 = 1
2n+0 2*1+0 = 2 2n+1 2*1+1 = 3
3.演示
1.序选择器
p标签直接写在body标签下last-child不行,写在一个div标签内测试.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>序选择器</title>
<style>
p:first-child { /*其父元素的第一一个子元素*/
color: red;
}
p:last-child { /* 需要嵌套在div标签内才能生效*/
color: gold;
}
p:nth-child(2) { /*其父元素的第n个标签*/
color: greenyellow;
}
span:nth-last-child(4) { /*其父元素的倒数第n个标签*/
color: aqua;
}
</style>
</head>
<body>
<div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<span>s1</span>
<p>p4</p>
<p>p5</p>
<p>p6</p>
</div>
</body>
</html>
2.唯一选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>唯一选择器</title>
<style>
p:only-child {
color: red;
}
</style>
</head>
<body>
<p>1段落</p>
<ul>
<li>
<p>2.1段落</p> <!--不区分类型,父元素中只存在唯一一个p标签-->
</li>
</ul>
</body>
</html>
3.奇偶选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>奇偶选择器</title>
<style>
p:nth-child(odd) {
color: red;
}
p:nth-child(even) {
color: blue;
}
</style>
</head>
<body>
<div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
<span>s1</span>
<span>s2</span>
</div>
</body>
</html>
4.公式条件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>公式条件</title>
<style>
p:nth-child(2n+1) {
color: red;
}
</style>
</head>
<body>
<div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
</div>
</body>
</html>
5.2同类型序列选择器
1.介绍
其父元素的第一一个子元素
注意:
1.使用冒号:分隔.
2.冒号前面的标签必须和序号对上才满足条件.
3.区分类型。
2.格式
其父元素下同级同类型的第一个标签
标签:first-fo-tyoe {属性:值;}
其父元素下同级同类型的最后一个标签
标签:last-fo-tyoe {属性:值;}
其父元素下同级同类型的第n个标签
标签:nth-fo-type(n) {属性:值;}
其父元素下同级同类型的倒数第n个标签
标签:nth-last-fo-type(n) {属性:值;}
父元素中同类型标签只存在一个
only-of-type {属性:值;}
3.演示
1.序列选择器_区分类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>序列选择器_同类型下</title>
<style>
p:first-of-type { /*其父元素下同级同类型的第一个标签*/
color: red;
}
p:last-of-type { /*其父元素下同级同类型的最后一个标签*/
color: #ffaa00;
}
p:nth-of-type(2) { /*其父元素下同级同类型的第n个标签*/
color: #04ff00;
}
p:nth-last-of-type(2) { /*其父元素下同级同类型的倒数第n个标签*/
color: blue;
}
</style>
</head>
<body>
<div>
<span>s1</span>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<span>s2</span>
<p>p6</p>
</div>
</body>
</html>
2.唯一选择器_区分类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>唯一选择器</title>
<style>
p:only-of-type {
color: red;
}
</style>
</head>
<body>
<p>1段落</p>
<ul>
<li>
<p>2.1段落</p> <!--区分类型,父元素中只存在唯一一个p标签-->
</li>
</ul>
</body>
</html>
6.属性选择器
标签中包含属性:
1.只匹配属性
2.匹配属性与值
6.1匹配属性
1.介绍
标签中只包含属性即可.
2.格式
标签 [属性] {
属性:值;
}
3.演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>只包含属性</title>
<style>
p[id] {
color: red;
}
</style>
</head>
<body>
<p id="d1">1</p>
<p>2</p>
<p id="d2">3</p>
<p>4</p>
<p id="d3">5</p>
</body>
</html>
6.2匹配属性与值
1.介绍
标签中包含属性=值.
2.格式
标签 [属性=值] {
属性:值;
}
3.演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性=值</title>
<style>
p[class=c1] {
color: red;
}
</style>
</head>
<body>
<p class="c1">1</p>
<p>2</p>
<p class="c1">3</p>
<p>4</p>
<p class="c2">5</p>
</body>
</html>
7.条件匹配
条件匹配选择器:
1.属性的取值以什么开头
2.属性的取值以什么结尾
3.属性的取值包含某个值
7.1以什么开头
1.介绍
属性的取值以什么开头.
2.格式
CSS2
[属性|=值] {
属性:值;
}
CSS3 替代上面这个
[属性^=值] {
属性:值;
}
区别:
CSS2中的只能找到value开头，并且value是被-隔开的。
CSS3中的只能找到value开头的都可以找到。
3.演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>以什么值开头</title>
<style>
img[alt^=abc] {
color: red;
}
img[alt|=abc] {
font-size: 30px;
}
</style>
</head>
<body>
<img src="" alt="abc-1"> <!--符合-->
<img src="" alt="abc2"> <!--符合-->
<img src="" alt="abc 3"> <!--符合-->
<img src="" alt="xxx">
</body>
</html>
7.2以什么结尾
1.介绍
属性的取值以什么结尾
2.格式
CSS3
[属性$=值] {
属性:值;
}
3.演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>以什么值结尾</title>
<style>
img[alt$=a] {
color: red;
}
</style>
</head>
<body>
<img src="" alt="1-a"> <!--符合-->
<img src="" alt="2 a"> <!--符合-->
<img src="" alt="3a"> <!--符合-->
<img src="" alt="xa"> <!--符合-->
<img src="" alt="xx">
</body>
</html>
7.3属性值包含某个值
1.介绍
属性的取值包含某个值
2.格式
CSS2
[属性~=值] {
属性:值;
}
CSS3 替代上面这个
[属性*=值] {
属性:值;
}
区别:
CSS2中的只能找到独立的单词，左右两边被空格隔开。
CSS3中的只要是包含value就能找到。
3.演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>包含某个值</title>
<style>
img[alt*=abc] {
color: red;
}
img[alt~=abc] {
font-size: 30px;
}
</style>
</head>
<body>
<img src="" alt="qqq abc xxx"> <!--符合-->
<img src="" alt="www-abc-xxx"> <!--符合-->
<img src="" alt="abcdef"> <!--符合-->
<img src="" alt="qqqabc"> <!--符合-->
<img src="" alt="xxxxx">
</body>
</html>
8.伪类选择器
8.1作用
1. :link 访问前的样式设置，在一个浏览器调开过一次就失效了，换一个浏览器获取换一个网址。
2. :hover 悬浮的样式设置
3. :active 点击的样式设置
4. :visited 访问后的样式设置
5. :focus input框获取焦点（光标在输入框内）
8.2演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
a:link{ /*访问之前的状态*/
color: red;
}
a:hover{ /*鼠标悬浮态*/
color: green;
}
a:active{ /*激活态 鼠标点击不松开态*/
color: blue;
}
a:visited{ /*访问之后的状态*/
color: dimgrey;
}
p:hover{
color:hotpink;
}
input:focus{ /* input框获取焦点（光标在输入框内）*/
background-color: greenyellow;
}
</style>
</head>
<body>
<!-- a标签为链接标签 -->
<a href="https://www.jd.com"> 在不在 </a>
<p>效果展示</p>
姓名:<input type="text">
</body>
</html>
9.伪元素选择器
9.1作用
1. :first-letter 作用于文本的第一个文字。
2. :before 在文本首部插入文本，文本不可选中。
3. :after 在文本尾部插入文本，文本不可选中。
before 与 after 通常是用来清除浮动的影响:父标签塌陷问题。
4. font-size:48px; 字体大小设置
9.2演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素选择器</title>
<style>
p:first-letter{
font-size: 22px; /*设置字体大小 22像素*/
color: red;
}
p:before{
content: '我自问:'; /*在文本开头插入文本内容，鼠标无法选中*/
color: blue;
}
p:after{
content:'睡吧，明天在学习！';
color: darkgray;
}
</style>
</head>
<body>
<p>今天学习了吗？</p>
</body>
</html>
1723
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
