一、CSS简介
初步了解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>
<body>
<!--
网页分成三个部分
html 结构 30个左右标签，先用一段时间
css 表现 外在显示的样子
js 行为
html 超文本语言
css -层叠样式表
-网页是一个多层的结构，css可以给每一层结构设置样式，最终你看到的是最上面的一层
你要找的事，找对追求目标，然后各种花招追求她
-->
</body>
</html>二、CSS书写位置
html文件
<!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: indigo;
font-size: 50px;
background-color: pink;
}
</style>
<!-- 第三种方式：外部样式表
书写位置：在html文件外，新建一个.css文件，在css文件里通过选择器选中对应的html结构，在花括号里面书写css样式，然后在head标签内写一个link标签
-->
<link rel="stylesheet" href="./02.css书写位置.css">
</head>
<body>
<!-- 第一种方式：内嵌样式、行内样式
书写位置：开始标签 style属性，讲css样式写在style属性里面
可以写多个样式，只要用分隔号;隔开即可
优缺点：
优点：有针对性
缺点：1.结构和表现耦合了
2.修改起来不方便
注意：不推荐使用
-->
<!--
css语法：样式名，样式值
color 设置字体的颜色 red green yellow
font-size 设置字体的大小 px
backg-color 设置背景颜色 red green yellow
-->
<div style="color: red; font: size 32px; background-color:yellow ">
病其失法他情同，流。
</div>
<div style="color: red; font: size 32px; background-color:yellow ">才老的道、己拿。</div>
<div style="color: red; font: size 32px; background-color:yellow ">卑的不说，韩看。</div>
<p>得即褒能本司，了路。</p>
<p>无谭向已于当虽因责我学以找便落严妙，你。</p>
<p>竟况非身我，临放首得赐人，馆谢锐，当韦。</p>
<h1>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, architecto?</h1>
<h1>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officiis tempore eum natus saepe sequi blanditiis fuga deleniti dolorum nihil aliquid repellendus aut eveniet iste at esse id, porro soluta. Labore.</h1>
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti quos nostrum voluptatum totam soluta modi?</h1>
</body>
</html>css文件
h1{
color: green;
font-size: 30px;
}三、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>
/* css注释符号 */
/*
css的注释，作用和html注释类似，只不过他必须编写在style标签中，或者是css文件中
css的语法：
选择器 申明块
选择器：有多种选择器
声明块:具体的css样式，是写在花括号里面
样式的结构：名值对结构（样式名：样式值；），可以写多组样式，用分隔号隔开
*/
</style>
</head>
<body>
</body>
</html>四、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>
/* 四种常用的选择器 */
/* 需求一：标题变红色 */
/* 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>五、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选择器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>六、关系选择器
<!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里的pan元素字体都变为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;
}
/*
选择器1 选择器2{} */
</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>七、属性选择器
<!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>
/* 需求一：有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>这是本日学习内容，难度相较于之前较大，需要更认真地学习
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
