文章目录
01.css简介
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./02.css书写位置.css">
</head>
<body>
<!-- 网页分成三个部分
html 结构 30个左右标签，先用一段时间
css 表现 外在显示的样子
js 行为
html 超文本语言
css -层叠样式表
—网页是一个多层的结构，css可以给每一层结构设置样式，
最终你看到的是最上面的一层
你要找的事，找对追求目标，然后各种花招追求她（他） -->
</body>
</html>
02.css书写位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!--书写位置、各自的优缺点 -->
<!--第二种方式：内部样式表
书写位置：head标签内部，写一个style标签，通过选择器选中对应的html结构，
在花括号里面书写css样式，可以写多组样式，样式之间用；隔开,
最后一个样式后可以不加分隔号，但一般都加上
优缺点：
缺点：复用率不高
注意：css比较多的时候，不推荐使用
但教学期间，用的可能比较多
-->
<style>
p {
color: black;
font-size: 50px;
background-color: pink;
}
</style>
<!-- 第三种方式：外部样式表
书写位置：在html文件外，新建一个.css文件，在css文件里通过选择器选中
对应的html结构，在花括号里面书写css样式,
然后在head标签内写一个link标签将对应的css文件引入到html文件内
注意：推荐使用
-->
<link rel="stylesheet" href="./02.css书写位置.css">
</head>
<body>
<!-- 第一种方式：内联样式/行内样式
书写位置：开始标签 style属性，讲css样式写在style属性值里面
可以写多个样式，只要用分隔号；隔开即可
优缺点：
优点：有针对性
缺点：1、结构和表现耦合了
2、修改起来不方便
注意：不推荐使用
-->
<!--
css语法：样式名，样式值
color 设置字体的颜色 red green yellow
font-size 设置字体的大小 px 默认的字体大小是16px
background-color 设置背景颜色 red green yellow
-->
<div style="color: yellow; font-size: 32px; background-color: green">德韩极老尚啦安救是航中，知才陛，太后太。</div>
<div style="color: yellow; font-size: 32px; background-color: green">少俭子夹评他，导密。</div>
<div style="color: yellow; font-size: 32px; background-color: green">磊要杀足都骨场，屯。</div>
<p>磊书放台五勇而郭骨玉护使司上若说谷人快。</p>
<p>变白惜君其定亲春平曰设弄给国，我爱苟有。</p>
<p>了第程迷洪不是未本汪在年竟生秦自撒，认。</p>
<h1>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut, iste.</h1>
<h1>Lorem ipsum dolor sit amet.</h1>
<h1>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</h1>
</body>
</html>
03.css语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css语法</title>
<style type="text/css">
/* css注释符号 */
/*
CSS的注释，作用和HTML注释类似，只不过它必须编写在style标签中，或者是css文件中
CSS的语法：
选择器 声明块
选择器：有多种选择器
声明块：具体的css样式，是写在花括号里面
样式的结构：名值对结构（样式名：样式值；），可以写多组样式，用分隔号隔开
*/
</style>
</head>
<body>
<!-- 注释符号 -->
</body>
</html>
04.css常用选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>选择器</title>
<style>
/* 四种常用的选择器 */
/* 需求一：标题变红色 */
/* 1、元素选择器（标签选择器）
作用：选中对应标签的内容
语法：标签名{css样式····}
例子：h1{}，h3{},p{}
*/
h1 {
color: red;
}
/* 需求二：将第一句诗变绿色 */
/* 2、id选择器
作用：选中对应id属性值的内容
语法：#id属性值{}
例子：#p1{},#p2{}····
注意：id属性值不能重复使用
*/
#p1 {
color: green;
}
/* 需求三：将第二句诗也变绿色 */
/* 3、class选择器
class选择器的用法跟id选择器是一样，只不过class属性值可以重复使用
作用：选中对应class属性值的内容
语法：.class属性值{}
注意：class属性值可以起多个，中间用空格隔开即开
例子：.s1{},.ss{},.pp{}
*/
.s1 {
color: orange;
}
/* 需求四：给所有的标签字体变为24px */
/* 4、通配选择器
作用：选中所有的标签，进行设置
语法：*{}
*/
* {
font-size: 24px;
}
</style>
</head>
<body>
<div>
<h1>登高</h1>
<h3>杜甫</h3>
<p id="p1">风急天高猿啸哀，渚清沙白鸟飞回。</p>
<p class="s1">无边落木萧萧下，不尽长江滚滚来。</p>
<p class="s1">万里悲秋常作客，百年多病独登台。</p>
<p>艰难苦恨繁霜鬓，潦倒新停浊酒杯。</p>
</div>
</body>
</html>
05.css复合选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 复合选择器两种 交集选择器，并集选择器 */
/* 需求一：将class为red的诗句变为红色，同时将class为red的div字体变为24px */
/* 1、交集选择器
作用：选中同时符合多个条件的内容
语法：选择器1选择器2选择器3····{}
注意：如果选择器当中有元素选择器，元素选择器必须要放在最前面
例子：p#p1.pp{},div.ss{}
*/
.red {
color: red;
}
div.red {
font-size: 34px;
}
/* 需求二：将h1,h3字体颜色变为棕色*/
/* 2、并集选择器（群组选择器）
作用：同时选中对应的内容
语法：选择器1,选择器2,选择器3····{}
例子：.red,#red1,div,p{}
*/
h1,
h3 {
color: orange;
}
</style>
</head>
<body>
<h1>满江红·写怀</h1>
<h3>岳飞·宋</h3>
<p class="red">怒发冲冠，凭栏处、潇潇雨歇。</p>
<div class="red">抬望眼，仰天长啸，壮怀激烈。</div>
<div>三十功名尘与土，八千里路云和月。</div>
<p>莫等闲，白了少年头，空悲切！</p>
<p>靖康耻，犹未雪。臣子恨，何时灭！</p>
<p>驾长车，踏破贺兰山缺。</p>
<p>壮志饥餐胡虏肉，笑谈渴饮匈奴血。</p>
<p>待从头、收拾旧山河，朝天阙。</p>
</body>
</html>
06.关系选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 用关系选择器来选中 */
/* 需求一：为div的子元素h2设置一个字体颜色红色 */
/* 1、子元素选择器
作用：通过指定的父元素找到指定的子元素
语法：父元素>子元素{}
例子：#red>.green{}, .pp>em{}
*/
div>h2 {
color: red;
}
/* 需求二：div里的span元素字体都变为30px */
/* 2、后代选择器
作用：通过指定的祖先元素找到指定的后代元素
语法：祖先元素 后代元素{}
例子：.class .red{},#red p{}
*/
#cs span {
font-size: 30px;
}
/* 需求三:通过衣服p标签找到生鲜区,加背景色粉丝*/
/*
3、下一个兄弟选择器
作用：通过指定的兄长找到紧挨着我的一个兄弟
语法：兄+弟{} */
.p1+span {
background-color: pink;
}
/* 需求四:
通过衣服区找到下面所有的兄弟，设置字体颜色棕色*/
/*
4、选择下面所有的兄弟(前面的不选)
作用：通过指定的兄长找到下面所有的兄弟
语法：兄～弟{}
例子：#red～.p1{}
*/
.p1~span {
color: orange;
}
</style>
</head>
<body>
<div id="cs">
大超市
<h2>日常用品区</h2>
<h2>美妆区</h2>
<p class="p1">衣服区
<span>女装
<em>上衣</em>
<em>裤子</em>
<em>裙子</em>
</span>
<span>男装</span>
<span>童装</span>
</p>
<span>生鲜区</span>
<span>零食区</span>
</div>
<p>小超市</p>
<h2>就身自他。</h2>
<!-- 元素之间的关系
父子关系
父元素 直接包含子元素的元素
子元素 直接被父元素包含的元素
祖先后代关系
祖先元素 直接或间接包含元素的元素，包括父元素
后代元素 直接或间接被包含的元素，包括子元素
兄弟关系
拥有共同父元素的元素
-->
</body>
</html>
07.属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>属性选择器</title>
<style>
/* 需求一：有title属性的p标签，颜色变为红色 */
/*
1:属性选择器
通过确定属性以及属性值来选中对应的内容，例如id属性，class属性，src属性，href属性
语法：[属性名]{} 选择含有指定属性的元素
[属性名=属性值]{} 选择含有指定属性和属性值的元素
[属性名^=属性值]{} 选择属性值以指定值开头的元素
[属性名$=属性值]{} 选择属性值以指定值结尾的元素
[属性名*=属性值]{} 选择属性值含有某值的元素
*/
/* [id] {
background-color: green;
}
p[title] {
color: red;
}
[title=ab]{
color: orange;
}
[title^=ab]{
font-size: 30px;
}
[title$=ab]{
background-color: pink;
} */
[title*=abc] {
color: palevioletred;
}
</style>
</head>
<body>
<h1 title="a" id="abcd">满江红·写怀</h1>
<h3 title="ab">岳飞·宋</h3>
<p>····</p>
<p title="abc">靖康耻，犹未雪。臣子恨，何时灭！</p>
<p title="abcdab">驾长车，踏破贺兰山缺。</p>
<p>壮志饥餐胡虏肉，笑谈渴饮匈奴血。</p>
<p>待从头、收拾旧山河，朝天阙。</p>
</body>
</html>
08.伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 需求一：将ul里的第一个li自动一直设置为红色 */
/* 一 、伪类（不存在的类，特殊的类）
定义：不真实存在的类，是一种特殊的类，它表示的元素的一种状态，不是固定某一定
例如：第一名，倒数第一名，鼠标悬浮，鼠标点击等
常见的伪类选择器
语法使用‘:’开头
:first-child 第一个元素
:last-child 最后一个元素
:nth-child() 选中第几个元素
特殊值：
2n或even 偶数
2n+1或odd 奇数
—以上这些伪类都是根据所有的子元素进行排序
:first-of-type 第一个元素
:last-of-type 最后一个元素
:nth-of-type() 选中第几个元素
—功能跟上面相似，不同的是，这是在同类型的子元素中去选择
*/
/* 二、:not() 否定伪类
-将符合条件的元素从选择器中去除 */
/* 需求二：给所有诗句加背景色，除了l1 */
span:first-child {
color: red;
}
li:not(#l1) {
background-color: green;
}
li {
/* 去除li的项目符号 */
list-style: none;
}
a {
/* 去除a标签的下划线 */
text-decoration: none;
}
h1 {
/* 增加下划线 */
text-decoration: underline;
}
</style>
</head>
<body>
<a href="#">超链接</a>
<h1>沁园春·雪</h1>
<h3>毛泽东</h3>
<ul>
<!-- <span>测试</span> -->
<li>一代天骄，成吉思汗，只识弯弓射大雕。</li>
<li>北国风光，千里冰封，万里雪飘。</li>
<li>山舞银蛇，原驰蜡象，欲与天公试比高。</li>
<li id="l1">望长城内外，惟余莽莽；大河上下，顿失滔滔。</li>
<li>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</li>
<li>须晴日，看红装素裹，分外妖娆。</li>
<li>江山如此多娇，引无数英雄竞折腰。</li>
</ul>
</body>
</html>
09.a元素的伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 需求一：给未访问过的超链接加红色字体 */
/* 1、:link 没有访问过的状态 */
a:link {
color: orange;
}
/* 需求二：给访问过的超链接加绿色字体 */
/* 2、:visited 访问过的状态 */
a:visited {
color: green;
/* 以下样式不生效 */
font-size: 50px;
background-color: pink;
}
/*
注意：
1、:link和:visited 是a标签独有的伪类
2、由于隐私问题，:link和:visited只能设置字体颜色
*/
/* 需求三：鼠标移入，链接字体变大到30px */
/* 3、:hover 鼠标移入的状态 */
a:hover {
font-size: 30px;
}
h1:hover {
color: green;
background-color: hotpink;
}
/* 需求四：鼠标点击后，增加背景色pink */
/* 4、:active 鼠标点击后的状态 */
a:active {
background-color: pink;
}
div:active {
color: red;
}
/*
注意：
:hover和:active 针对所有的元素
*/
</style>
</head>
<body>
<div>得龄</div>
<h1>将王大量。</h1>
<a href="#">空链接1</a>
<a href="https://baidu.com">百度</a>
<a href="https://jd.com">京东</a>
</body>
</html>
10.伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 需求一：让文章的首字母一直为字体为24px */
/* 1、::first-letter 第一个字母 */
/* 需求二：让文章的第一行添加背景色黄色 */
/* 2、::first-line 第一行 */
/* 需求三：让选中的内容，字体为红色 */
/* 3、::selection 选中的内容 */
/* 需求四：在元素开始的位置前+'abc' */
/* 4、::before 在元素的最前面
必须要配合content样式名使用 */
/* 4、::after 在元素的最后面
必须要配合content样式名使用 */
p::first-letter {
font-size: 34px;
}
p::first-line {
background-color: yellow;
}
p::selection {
color: red;
}
p::before {
content: "你好";
}
p::after {
content: '你也好啊';
}
</style>
</head>
<body>
<q>hello</q>
<p>
sit amet consectetur adipisicing elit. Porro fugiat maiores sit ex expedita beatae, sint quisquam amet quod
cupiditate, tempora omnis impedit deleniti, iure fuga illo quibusdam. Alias,
soluta?
</p>
</body>
</html>
11.继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 样式的继承（继承祖先的资产）
定义：给父元素或者祖先元素设置有关样式，它会继承到子元素或后代元素上，
优势：一般情况下，样式的继承是对我们开发是有利，不需要额外调整
注意：不是所有的样式都能继承，一般情况布局上样式
*/
/* 共同的祖先元素，设置统一的字体大小、字体颜色、行高、字体等 */
body {
font-size: 12px;
color: red;
}
p {
color: blue;
font-size: 30px;
}
</style>
</head>
<body>
<p>
我是一个p元素
<span>我是p元素的span元素
<em>我是span里面的em元素，我也可以继承</em>
</span>
</p>
<span>我是p元素外的span元素，我不会继承</span>
</body>
</html>
12.选择器的权重
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- 经典面试题：你常用的选择器有哪些？能否说一下他们之间的权重问题？ -->
<!--
样式冲突：给同一个元素设置相同的样式名，不一样的样式值，最终哪个样式有效果，
是看选择器的权重，谁的权重高，就有效果
选择器的权重
内联样式 1000
id选择器 100
class选择器/属性选择器 10
元素选择器 1
通配选择器 0
继承样式 没有权重
注意：
1、如果选择器的权重一样，那么谁靠下，就谁生效
2、要让所有选择器的权重相加，最终谁大听谁的
3、所有的选择器权重相加，最高也不会超过上一等级的权重,如再多的类选择器权重相加，也不会超过id选择器权重
4、在并集选择器（群组选择器）当中，选择器权重是各算各的,最终谁大听谁的
5、!important 是最高的权重 但慎用
一般情况下，可以测试使用,测试是否是选择器权重的问题
-->
<!--
如果样式设置不成功：
1、你没选中
2、选择器权重问题 !important进行测试
-->
<!-- 需求：设置div的背景色 -->
<style>
/* body{
background-color: lawngreen;
} */
/* *{
background-color: rgb(82, 82, 228);
} */
/* div,.dd{
background-color: green;
}*/
/* .dd.d1.d1.d3{
background-color: red;
} */
/* #dv{
background-color: pink;
} */
/* [id]{
background-color: hotpink;
} */
.dd>span {
color: green;
}
#dv span {
color: red;
}
</style>
</head>
<body>
<!--style="background-color:blue;" -->
<div id="dv" class="dd d1 d2 d3 d3 d4">
我是div元素
<span>我是div中的span元素</span>
<em>我是div中的em元素</em>
</div>
</body>
</html>
<!-- 选择器的权重
内联样式 1000
id选择器 100
类和伪类选择器/属性选择器 10
元素选择器 1
通配符、子选择器、相邻选择器等。如*、>、+ 0000
继承的样式 没有优先级
!important 最高优先级
注意：
比较优先级时，需要将所有选择器的优先级进行相加计算，最后优先级越高，则优先显示
(并集选择器)分组选择器是单独计算的
如果优先级计算后相同，此时则优先使用靠下的样式
选择器的累加，不会超过上一级数量级，例如：类选择器再高也不会超过id选择器 量变达不到质变
一般来说：
选择器越具体，优先级越高
!important 慎用
-->
13.display
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
background-color: pink;
/* 将元素转成行内元素 */
/* display: inline; */
/* 设置元素的宽度 */
width: 300px;
/* 设置元素的高度 */
height: 200px;
}
em {
background-color: green;
/* 将元素转成块元素 */
/* display: block; */
/* 将元素转成行内块元素 */
display: inline-block;
width: 300px;
height: 200px;
}
/*
display 实现元素之间的相互转换
可选值：
block 将元素转成块元素
inline 将元素转成行内元素
inline-block 将元素转成行内块元素
none 隐藏元素
*/
em:hover~p {
display: block;
}
p {
/* 隐藏元素 */
display: none;
}
section {
width: 100px;
height: 100px;
background-color: greenyellow;
}
/* 需求一：鼠标移入section，更换背景色红色 */
/* 需求二：strong文字隐藏，鼠标点击section的时候，strong出现 */
section:hover {
background-color: red;
}
strong {
display: none;
}
section:active>strong {
display: block;
}
</style>
</head>
<body>
<!--
元素分类
块元素
1、独占一行
2、宽度是父元素或祖先元素内容区宽度
3、高度是被内容撑开
可以自定义宽高
行内元素
1、不会独占一行
2、宽高都是被内容撑开，不可以自定义宽高
行内块元素
兼具块元素和行内元素的特点，即不会独占一行，可以设置宽高
-->
<!-- <div>
攻血变中希读通之让。
</div>
<span>言拆小今。</span>
<em>Lorem, ipsum dolor.</em>
<span>span乌但派交，能书其讨。</span>
<p>郭冒因导世郭使，否。</p> -->
<section>
<strong>地有韩德。</strong>
</section>
</body>
</html>
补充
a链接去除下划线
a{
text-decoration:none;
}
列表去除前面的小圆点或数字
li {
list-style: none;
}
394
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
