【尚硅谷】Web前端零基础入门HTML5+CSS3基础教程丨初学者从入门到精通
01_CSS简介
网页分成三个部分：
结构（HTML）
表现（CSS）
行为（JavaScript）
CSS
—层叠样式表
-网页实际上是一个多层的结构，
通过CSS可以分别为网页的每一个层来设置样式，
而我们最终只是看到网页的最上边一层
-总之，CSS用来设置网页中元素的样式
<!--使用CSS来修改元素的样式
第一种方式（内联样式，行内样式）：
在标签内部通过style属性来设置元素的样式
问题：
使用内联样式，样式只能对一个标签生效，
如果希望影响到多个元素,须复制
并且当样式发生变化时，我们必须要一个一个的修改
注意：开发时绝对不要使用内联样式
-->
<p style="color:red;font-size:30px;">少小离家老大回，乡音未改鬓毛衰</p>
<!--
第二种方式：内部样式表
-将样式编写到head中的style标签里
然后通过CSS的选择器来选中元素并为其设置各种样式
可以同时为多个标签设置设置样式，并且修改时只需要修改一处即可全部应用
-内部样式更加方便对样式进行复用
-问题：
内部样式只能对一个网页起作用，它里面的样式不能跨页面进行复用
-->
<style>
p{color:green;font-size:50px;}
</style>
<body>
<p>少小离家老大回，乡音未改鬓毛衰</p>
<p>落霞与孤鹜齐飞，秋水共长天一色</p>
</body>
<!-->
第三种方式（外部样式表）
-可以将CSS样式编写到一个外部的文件.css中
然后通过link标签来引入外部的标签
-外部样式表需要通过link标签进行引入，意味着只要想使用这些样式的网页都可以进行引用
使样式可以在不同页面中进行复用
-将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，
从而加快网页的加载速度，提高用户的体验
-->
<link rel="stylesheet" href="./style.css"
02_CSS语法
<style>
/*
CSS中 的注释，注释内容会自动被浏览器忽略
*/
/*
CSS的基本语法:
选择器、声明块
选择器：通过选择器选中页面中的指定元素
比如p的作用就是选中页面中所有p的元素
声明块：通过声明块来指定要为元素设置的样式
声明块由一个一个的声明组成
声明是一个名值对结构
*/
p{
color:red;
font-size:40px;
}
h1{
color:green;
}
</style>
03_常用选择器
<style>
/*
将所有的段落设置为红色（字体）
元素选择器
作用：根据标签名来选中指定元素
语法：标签名{}
*/
p{
color:red;
}
h1{
color:green;
}
/*
将儿童相见不相识设置为红色
id选择器
作用：根据元素的ID属性值选中一个元素
语法：#id属性值{}
例子：#box{}
*/
#red{
color:red;
}
/*
将秋水……和落霞……设置为蓝色
类选择器
作用：根据元素的class属性值选中一组元素
语法：.class属性值
*/
.blue{
color:blue;
}
.abc{
font-size:20px;
}
/*
通配选择器
作用：选中页面中的所有元素
语法：*
*/
*{
color:red;
}
</style>
<body>
<h1 class="blue abc">我是标题</h1>
<p>少小离家老大回</p>
<p>乡音未改鬓毛衰</p>
<p id="red">儿童相见不相识</p>
<p>笑问客从何处来</p>
<!--
class是一个标签的属性，它和id类似，不同的是class可以重复使用
可以通过class属性来为元素分组
可以同时为一个元素指定多个class属性
-->
<p class="blue">秋水共长天一色</p>
<p class="blue">落霞与孤鹜齐飞</p>
</body>
04_复合选择器
<style>
/*
将class为red的元素设置为红色（字体）
*/
.red{
color:red;
}
/*
将class为red的div字体大小设置为30px
交集选择器
作用：选中同时复合多个条件的元素
语法：选择器1选择器2选择器3……{}
注意点：
交集选择器中如果有元素选择器，必须使用元素选择器开头
*/
div.red{
font-size:30px;
}
.a.b.c{
color:blue;
}
/*
选择器分组（并集选择器）
作用：同时选择多个选择器对应的元素
语法选择器1，选择器2……
*/
h1,span{
color:green;
}
</style>
<body>
<div class="red">我是div</div>
<p class="red">我是p元素</p>
<div class="a b c">我是div2</div>
<h1>标题</h1>
<span>哈哈</span>
</body>
05_关系选择器
<body>
<!--
父元素————直接包含子元素的元素
子元素————直接被父元素包含的元素
祖先元素————直接或间接包含后代元素的元素
一个元素的父元素也是它的祖先元素
后代元素————直接或间接被祖先元素包含的元素
子元素也是后代元素
兄弟元素————拥有相同父元素的元素
-->
<div.class="box">
我是一个div
<p>
我是div中的p元素
<span>
我是p元素中的span元素
</span>
</p>
<span>
我是div中的span元素
</span>
</div>
<span>
我是div外的span
</span>
</body>
<style>
/*
为div的子元素span设置一个字体颜色红色
（为div直接包含的span设置一个字体颜色）
子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素 > 子元素
*/
div.box > span{
color:orange;
}
</style>
/*
后代元素选择器
作用：选中指定元素的内的指定后代元素
语法：祖先 后代
*/
div.box span{
color:skyblue;
}
/*
选择下一个兄弟
语法：前一个 + 后一个
*/
p + span{
color: red;
}
/*
选择下面所有的兄弟
*/
p ~ span{
color: red;
}
06_属性选择器
<body>
<p title="abc">少小离家老大回</p>
<p title="helloabc">乡音未改鬓毛衰</p>
<p title="abcdef">儿童相见不相识</p>
<p title="hello">笑问客从何处来</p>
<p>秋水共长天一色</p>
<p>落霞与孤鹜齐飞</p>
</body>
<style>
/*
[属性名] 选择含有指定属性的元素
[属性名=属性值] 选择含有指定属性值和属性值的元素
[属性名^=属性值] 选择属性值以指定值开头的元素
[属性名￥=属性值] 选择属性值以指定值结尾的元素
[属性名*=属性值] 选择属性值含有某值的元素
*/
p[title^=abc]{
color:orange;
}
</style>
07_伪类选择器
<style>
/*
将ul里的第一个li设置为红色
*/
/*
伪类（不存在的类）
————用来描述一个元素的特殊状态
比如：第一个子元素、被点击的元素、鼠标移入的元素……
伪类一般情况下都是使用：开头
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child() 选中第n个子元素
特殊值：
n 第n个 n的范围0到正无穷
2n或even 表示选中偶数位的元素
2n+1或odd 表示选中奇数位的元素
以上这些伪类都是根据所有的子元素进行排序
:first-of-type
:last-of-type
:nth-of-type()
这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序
:not() 否定伪类
将符合条件的元素从选择器中去除
*/
ul > li:nth-child(1){
color:red;
}
ul > li:not(:nth-child(3)){
color:yellowgreen;
}
</style>
<body>
<ul>
<span>我是一个span</span>
<li>第零个</li>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
</body>
08_超链接的伪类
<style>
a:link{
color:#f51313;
}
/*
:visited 用来表示访问过的链接
由于隐私的原因，所以visited这个伪类只能修改链接的颜色
*/
a:visited{
font-size:50px;
}
/*
:active 用来表示鼠标点击的状态
*/
a:active{
color:yellowgreen;
}
/*
:hover 用来表示鼠标移入的状态
*/
a:hover{
color:paleturquoise;
font-size: 50px;
}
</style>
09_伪元素
<style>
p{
font-size:20px;
}
/*
伪元素：表示页面中一些特殊的并不真实存在的元素（特殊的位置）
伪元素的使用 :: 开头
::first-letter
::first-line 表示第一行
::selection 表示选中的内容
::before 表示元素的开始位置
::after 表示元素的结束
————before 和 after 必须结合属性使用
*/
p::first-letter{
font-size:50px;
}
p::first-line{
background-color: yellow;
}
p::selection{
background-color:green;
}
div::before{
content:'abc';
color:red;
}
div::after{
content:'haha';
color:blue;
}
div::before{
content:『;
}
div:after{
content:』;
}
</style>
<body>
<q>hello</q>
<div>Hello Hello How are you</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus illum, voluptatibus provident quaerat voluptates earum laboriosam reprehenderit omnis porro? Cupiditate unde dolores eum incidunt similique laboriosam tenetur perspiciatis porro voluptate?
</p>
</body>