CSS
文章目录
1 CSS简介
-
现在目前来讲HTML5应该会是最后一个版本，以后更新直接往HTML5里更新，CSS3用于设置样式，CSS里各个样式是按不同模块区分的，不同模块可能会有不同的版本。
-
回顾：一个网页分为三部分，结构，表现和行为，CSS用于表示网页，设置样式，字体颜色，图片大小等等。
-
CSS中文叫做：层叠样式表，网页实际上是多层的结构，通过CSS来为网页的每一个样式设置样式，最终看到最上面的一层。
1.1 内联样式（行内样式）
<--!such as -->
第一种方式*（内联样式，行内样式）*：
在标签内部通过style属性来设置元素的样式，style对应的样式值就是所谓的css结构
<p style="color:red;front-size:60px" >
这是一句话
</p>
不推荐使用上面的第一种表达，因为每次设置样式都需要重新申明，过于麻烦,当样式发生变化时，不便于维护，开发时绝对不要使用内联样式。
1.2 内部样式表
<style>
p{
/*p表示p元素，对页面内所有的p元素生效*/
color:green;
font-size:50px;
/*里面的内容对于所有的p元素内的内容生效*/
}
</style>
第二种方式：
- 将样式编写到head中的style标签里，然后通过CSS选择器来选中元素并为其设置各种样式，可以同时为多个标签设置样式，并且修改时只需要修改一处即可
- 内部样式表更加方便重复使用
- 但内部样式表只能对一个网页使用，它里面的样式不能将页面进行复用
1.3 外部样式表
<link rel="stylesheet" href="./style.css">
stylesheet----样式表
href="路径"
第三种方式（外部样式表）：
- 可以将CSS样式编写到一个外部的CSS文件中，然后通过link标签来引入外部的CSS文件
- 外部样式表需要通过link标签进行引入，意味着只要想使用这些样式的网页都可以对其进行引用，使样式可以在不同的页面之间进行复用
- 将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户体验
2 CSS语法
2.1CSS注释
style里面的不属于HTML代码
需要遵守CSS的代码规范
/* */
相当于
<!-- -->
生成注释快捷键ctrl+/
2.2 基本语法
CSS基本语法：
- 选择器
- 声明块
2.2.1 选择器
通过选择器可以选中页面中的指定元素
比如p的作用就是选中页面中所有的p元素
such as
p{
color: red;
font-size: 40px;
}
h1{
color: green;
}
2.2.2 声明块
声明块，通过声明块来指定要为元素设置的样式
- 声明块由一个一个的声明组成
- 声明是一个名值对结构
- 一个样式名对应一个样式值，名和值之间以:连接，以;结尾
h1{
color: green;
}
3 CSS常用选择器
3.1 元素选择器
- 作用：根据标签名来选中指定的元素
- 语法：标签名
- 例子：p{}，h1{}，div{}
p{
color: red;
}
h1{
color: green;
}
<h1 class="blue abc">我是标题</h1>
<p>少小离家老大回</p>
那想单独控制其中里面的一个实例改变颜色该怎么做？
解决方法：将其命名为id
3.2 ID选择器
- 作用：根据元素的id属性值选中一个元素
- 语法：#id属性值()
- 例子：#box()，#red()
#red{
color: red;
}
<p id="red">儿童相见不相识</p>
同名id同时并不一定能够一起重复使用，js里的id只会负责一个，为了避免隐患，故不要重复使用同一名
3.3 类选择器
作用：
- 根据元素的class属性值选中一组元素
- 语法：.class属性值
- class是一个标签的属性，它与id类似，不同的是它可以重复使用，可以通过class属性来为元素分组，可以同时为一个元素指定多个class属性
.blue{
color: blue;
}
<p class="blue">秋水共长天一色</p>
<p class="blue">落霞与孤鹜齐飞</p>
<h1 class="blue abc">我是标题</h1>
一个元素指定多个class，class之间用空格隔开
3.4 通配选择器
作用：
- 选中页面中的所有元素
- 语法：*
*{
color: red;
}
效果为全页面
3.5 复合选择器
3.5.1 交集选择器
将class为red的元素设置为红色（字体）
<div class="red">我是div</div>
<p class="red">我是p元素</p>
传统：
.red{
color: red;
}
要将class为red的div字体大小设置为30px
复合：
div.red
{
font-size:30px;
}
- 作用：选中同时复合多个条件的元素
- 语法：选择器1选择器2选择器 3选择器n{}
- 注意点：交集选择器中如果有元素选择器，必须使用元素选择器开头
.a.b.c{
color: blue
}
<div class="red2 a b c">我是div2</div>
3.5.2 选择器分组（并集选择器）
h1, span{
color: green
}
选择器分组（并集选择器）
-
作用：同时选择多个选择器对应的元素
-
语法：选择器1,选择器2,选择器3,选择器n{}
#b1,.p1,h1,span,div.red{}
3.6 关系选择器
<div class="box">
我是一个div
<p>
我是div中的p元素
<span>我是p元素中的span</span>
</p>
<span>我是div中的span元素</span>
</div>
父元素
- 直接包含子元素的元素叫做父元素
子元素
- 直接被父元素包含的元素是子元素
祖先元素
-
直接或间接包含后代元素的元素叫做祖先元素
-
一个元素的父元素也是它的祖先元素
后代元素
-
直接或间接被祖先元素包含的元素叫做后代元素
-
子元素也是后代元素
兄弟元素
- 拥有相同父元素的元素是兄弟元素
3.6.1 子元素选择器
为div的子元素span设置一个字体颜色红色
（为div直接包含的span设置一个字体颜色）
div.box > span{
color: orange;
}
子元素选择器：
- 作用：选中指定父元素的指定子元素
- 语法：父元素>子元素（可以一直写，子元素的子元素）
- 加一个class就可以指定你想要的div的子元素
3.6.2 后代元素选择器
div span{
color: skyblue
}
后代元素选择器：
-
作用：选中指定元素内的指定后代元素
-
语法：祖先 后代（可以一直写，后代的后代）
3.6.3 兄弟元素选择器
p + span{
color: red;
}
p ~ span{
color: red;
}
选择下一个兄弟
- 语法：前一个 + 下一个
选择下边所有的兄弟
- 语法：兄 ~ 弟
3.7 属性选择器
<style>
/* p[title]{ */
/* p[title=abc]{ */
/* p[title^=abc]{ */
/* p[title$=abc]{ */
p[title*=e]{
color: orange;
}
</style>
<body>
<p title="abc">少小离家老大回</p>
<p title="abcdef">乡音无改鬓毛衰</p>
<p title="helloabc">儿童相见不相识</p>
<p>笑问客从何处来</p>
<p>秋水共长天一色</p>
<p>落霞与孤鹜齐飞</p>
</body>
- 作用：根据元素的属性值选中一组元素
- 语法：
-
[属性名] 选择含有指定属性的元素
-
[属性名=属性值] 选择含有指定属性和属性值的元素
-
[属性名^=属性值] 选择属性值以指定值开头的元素
-
[属性名$=属性值] 选择属性值以指定值结尾的元素
-
[属性名*=属性值] 选择属性值中含有某值的元素的元素
3.8 伪类选择器
-
伪类（不存在的类，特殊的类）
-
伪类用来描述一个元素的特殊状态，比如：第一个子元素、被点击的元素、鼠标移入的元素.…
-
伪类一般情况下都是使用:开头
-
:first-child 第一个子元素
ul > li:first-child{
color: red;
}
- :last-child 最后一个子元素
ul > li:last-child{
color: red;
}
-
:nth-child() 选中第n个子元素
-
n：第n个，n的范围0到正无穷
-
2n或even：选中偶数位的元素
-
2n+1或odd：选中奇数位的元素
ul > li:nth-child(2n+1){
color: red;
}
ul > li:nth-child(even){
color: red;
}
-
以上这些伪类都是根据所有的子元素进行排序的
-
:first-of-type 同类型中的第一个子元素
ul > li:first-of-type{
color: red;
}
-
:last-of-type 同类型中的最后一个子元素
-
:nth-of-type() 选中同类型中的第n个子元素
ul > li:not(:nth-of-type(3)){
color: yellowgreen;
}
-
这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序的
-
:not()否定伪类，将符合条件的元素从选择器中去除
3.8.1关于超链接与伪类
-
:link 未访问的链接
-
:visited 已访问的链接
-
由于隐私的原因，所以visited这个伪类只能修改链接的颜色
-
:hover 鼠标悬停的链接
-
:active 鼠标点击的链接
a:link{
color:red;
}
a:visited{
font-size :50px;
color:orange;
}
a:hover{
color:aqua;
font-size: 50px;
}
a:active{
color:yellowgreen;
}
3.9 伪元素选择器
伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）
伪元素使用 :: 开头
- ::first-letter 表示第一个字母
p::first-letter{
font-size: 50px;
}
- ::first-line 表示第一行
p::first-line{
background-color: yellow;
}
- ::selection 表示选中的内容
p::selection{
background-color:greenyellow;
}
- ::before 元素的开始
div::before{
content:'abc';
color: red;
}
content插入的内容无法选中
- ::after 元素的最后
div::after{
content:'qwq';
color: green;
}
- before 和 after 必须结合content属性来使用
<q>hello</q>
<div>Hello how are you</div>
"hello"出现在内容里，出现双引号，自动带上，因为before的作用，< q >表示短引用
4.0 餐厅选择器
一个小练习
扫一扫
1831
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
