02_css
1、css简介
-层叠样式表
-网页实际上是好多层的结构，css为每一层设置样式，而最终我们看到的是最上面一层
总之，css用来设置网页中元素的样式
使用css修改元素的样式：
第一种方式：（内联样式）（行内样式）
使用标签内部style属性设置样式
缺点：
使用内联样式，样式只能对一个标签生效， 不方便维护，第二种方式——（内部样式表）
开发的时候不要用内联样式
<p style="color:red; font-size: 60px;">少小离家老大回，乡音无改鬓毛衰</p>
<p style="color:red; font-size: 60px;">少小离家老大回，乡音无改鬓毛衰</p>
<p style="color:red; font-size: 60px;">少小离家老大回，乡音无改鬓毛衰</p>
第二种方式：（内部样式表）
在header里面编写，用style标签
通过css选择器来选中元素为其设置样式
可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用
缺点：
不能跨页面进行使用，只能在当前页面使用，所以产生第三个方式——外部样式表
<style>
P{
color:green;
font-size: large;
}
h1{
color: red;
font-size: large;
}
</style>
第三种方式（外部样式表）（最佳）
-可以将css样式编写到一个外部css文件中，然后通过 link 标签引入外部的css文件
link属性：
rel:stylesheet:样式表
好处：
外部样式表通过link标签进行引用，意味着样式可以在不同页面间进行复用
-可以使用浏览器缓存机制，从而加快网页加载速度，提高用户体验
<link rel="stylesheet" href="./style.css">
<h1>回乡偶书</h1>
<p>少小离家老大回，乡音无改鬓毛衰</p>
<p>落霞与孤鹜齐飞，秋水共长天一色</p>
<p>少小离家老大回，乡音无改鬓毛衰</p>
<p>少小离家老大回，乡音无改鬓毛衰</p>
效果：
2、css语法
注释里面的内容自动被浏览器忽略
css基本语法： 选择器 声明块
-
选择器：通过选择器可以选定页面中的指定元素
- 比如P的作用就是选择页面中的所有p元素
-
声明块：通过声明块指定要为元素设置样式
-
P{color: aqua;}是一个声明块
-
由一个一个声明color: aqua;组成
-
声明块是一个名值对结构
- 一个样式名对应一个样式值——名：值；
-
P{
color: aqua;
}
h1{
color: blue;
}
<!--
style标签里面不遵守html的规范，遵守css里面的规范
css里面的注释
/**/
-->
3、选择器
css基本语法：
选择器 声明块
选择器：通过选择器可以选定页面中的指定元素
- 比如P的作用就是选择页面中的所有p元素
3.1、常见选择器
1、元素选择器
-
作用，根据标签名来选中指定的元素
-
语法，标签名{}
-
例子，p{} h1{} div{}
<style> p{ color:red; } h1{ color:green; } </style> <h1>标题</h1> <p>少小离家老大回</p> <p>乡音无改鬓毛衰</p>
2、id选择器
-
作用，根据id属性值选中一个元素
-
语法：#id属性值
-
例子，#box{} #red{}
-
绝对不可以折磨写，id必须是唯一的
-
<p id="blue">儿童相见不相识</p> <p id="blue">笑问客从何处来</p>
-
3、类选择器
-
作用，根据元素的class属性值选中一组元素
-
语法，.class属性值{}
-
例子，.green{}
-
可以为同一个元素指定多个class属性，空格隔开，class=“green abc”
-
（ class是一个标签的属性，他和id类似，但是class可以重复使用 可以通过class属性来为元素分组 ）
-
<style> /*将秋水。。。和落霞。。。设置为绿色*/ .green{ color: green; } .abc{ font-size: larger; } </style> <p class="green abc">秋水共长天一色</p> <p class="green">落霞与孤鹜齐飞</p>
-
4、通配选择器
-
作用，选中页面所有元素
-
语法，*{}
-
权重为0，有优先级
-
*{ color:yellow; }
14.2、复合选择器
交集选择器：
- 作用，选择同时复合多个条件的元素
- 语法，选择器1选择器2选择器3选择器n{}
- 注意点，交集选择器中如果有元素选择器，必须使用元素选择器开头
- 例子，div.red{}（元素选择器.class属性值）
- 元素选择器#id属性值{}（一般不会这么写，id属性值是唯一的
<style>
div.red{
font-size: larger;
}
.a.b.c{
color: red;
}
/* p#p1{
color: royalblue;
} */
</style>
<p class="red" id="p1">我是p元素</p>
<div class="red a b c">我是div</div>
并集选择器：（选择器分组）
-
作用，同时选择多个选择器对应的元素
-
语法，选择器1，选择器2，选择器3{}
-
例子，h1,span{}
-
<style> h6,span{ color: tomato; } </style> <span>我是span元素</span> <h6>我是h1元素</h6>两个都变绿色
关系选择器
子元素：
-被父元素直接包含的元素
父元素：
-直接包含子元素的元素
祖先元素：
-直接或间接包含后代元素的元素
- 一个元素的父元素也是他的祖先元素
后代元素：
-被祖先元素直接或间接包含的元素
-一个元素的子元素也是他的后代元素
兄弟元素：
-拥有相同父元素的元素是兄弟元素
子元素选择器：
-
作用，选中指定父元素的子元素（不包含孙子辈的）
-
语法，父元素 > 子元素
-
为div的子元素span设置蓝色
-
注意：
- （只有div的子元素变色，div里面的子元素p元素的span（相当于div的孙子辈）不会变）
- （所有div的子元素span都会变色）
- （如果指定某个div的子元素会变色，给div设置一个class=“box”,div.box > span{}
<style>
div > span{
color: hotpink;
}
</style>
<div>我是div元素
<p>我是div里面的p元素
<span>
我是p元素里面的span元素
</span>
</p>
<span>我是div里面的span元素</span>
</div>
<div class="box">我是第二个div元素
<span>
我是第二个div里面的span元素
</span>
</div>
div里的子元素span都变色，不包括孙子
div.box>span{
color: rgb(255, 115, 0);
}
后代元素选择器：
-
作用：选中指定祖先元素的后代元素
-
语法： 祖先元素 后代元素（中间空格）
-div span{}选中div里面的所有span元素，不管他是子元素还是孙子元素
-div > p > span{}选中孙子元素span
-
div span{ color: rgb(124, 0, 128); } div > p > span{ font-size: larger; }
-
选择下一个兄弟：
- 作用：选择某个元素下面紧挨的某个兄弟元素
- 语法：元素1 + 元素2
- 例子，div + p{}选择div元素下面紧挨的p元素
- -必须是紧挨和必须是在div后面
div+p{
color: greenyellow;
}
<div>div</div>
<p>少小离家老大回</p>
p变色
<div>div</div>
<span>我是隔开div和p的span</span>
<p>少小离家老大回</p>
p不变色
选择下面所有兄弟：
-
作用：选择某个元素下面的所有兄弟元素
-
语法：元素1 ~ 元素2
-
例子，div ~ p{}选择div元素下面的所有p元素
-
-中间有其他元素比如说span无影响
-
div ~ p{ color:rgb(35, 13, 233); } <div>div</div> <span>我是隔开div和p的span</span> <p>少小离家老大回</p> <p>乡音无改鬓毛衰</p> <span>儿童相见不相识</span> <p>错问客从谁家来</p> -
所有p都变色
-
14.3、属性选择器
属性选择器：
[属性名]选择含有属性值的元素
[属性名=属性值]选择含有指定属性和属性值的元素
[属性名^=属性值]选择指定属性以指定属性值 开头 的元素
[属性名$=属性值]选择指定属性以指定属性值 结尾 的元素
[属性名*=属性值]选择指定属性 含有 某指定属性值的元素
<h1 title="abc">标题</h1>
<p title="abcdef">少小离家老大回</p>
<p title="helloabc">乡音无改鬓毛衰</p>
<p title="aaaabcddd">儿童相见不相识</p>
<p>笑问客从何处来</p>
<p>秋水共长天一色</p>
<p>落霞与孤鹜齐飞</p>
14.4、伪类选择器
解决问题：把ul列表的第一个li设置成红色？如果第一行是span第二行是li变红吗？
伪类选择器：用来描述一个元素的特殊状态
比如：鼠标移入的元素、被点击的元素、第一个元素…
一般以:开头
- :first-child 选中第一个元素
- :last-child 选中最后一个元素
- :nth-child(n) 选中第n个元素
特殊值：
n 取值范围是0到正无穷
odd或者2n+1 奇数个元素
even或者2n 偶数个元素
上面的伪类选择器是在所有子元素里面排序不光有li还有span，所以当span是第一个元素时，li就不是第一个元素
如果想在同一个类型的子元素排序使用下面的伪类选择器
- :first-of-type
- :last-of-type
- :nth-of-type
这几个的功能和上面的类似，只不过他们是对同类型元素进行排序
一些其他的伪类选择器：
- :not 表示不被包含在选择器里面
:first-child使用方法和效果
<style>
ul>li:first-child{
color:red;
}
</style>
<ul><!-- ul>li*4直接生成这个列表结构 -->
<li>第零个</li>
<li class="red">第一个</li><!-- 之前是使用class但是没有办法一直使当前第一个li变红 -->
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
</ul>
<ul>
<span>我是此ul第一个元素</span>
<li>第零个</li>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
</ul>
:first-of-type使用方法和效果
<style>
ul>li:first-of-type{
color:red;
}
</style>
<ul><!-- ul>li*4直接生成这个列表结构 -->
<li>第零个</li>
<li class="red">第一个</li><!-- 之前是使用class但是没有办法一直使当前第一个li变红 -->
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
</ul>
<ul>
<span>我是此ul第一个元素</span>
<li>第零个</li>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
</ul>
:not使用方法和效果
<style>
ul>li:not(:first-of-type){
color:red;
}
</style>
除了第三个，其他都变成salmon色
14.5、超链接伪类选择器
1、访问过的链接
2、未访问的链接
四个重要的超链接伪类选择器
-
：link 表示没访问过的链接也就是正常的链接
-
:visited 表示已访问过的链接
由于隐私的原因，只可改变字体的颜色不可改变大小
-
:hover 用来表示鼠标移入的状态
-
:active 表示鼠标点击
前两个是a特有，后两个哪个元素都可以设置
:link的用法和效果
<style>
a:link{
color: red;
font-size: larger;
/* 由于他表示正常的链接所以未访问过的和访问过得都会变字号 */
}
</style>
:visited的用法和效果
<style>
:visited{
color: blue;
font-size: large;
/* 字体大小不会显示 */
}
</style>
:hover的用法和效果（鼠标移入）
<style>
:hover{
color: sandybrown;
}
</style>
:active的用法和效果（点的时候不松手）
<style>
a:active{
background-color:yellow;
}
</style>
14.6、伪元素选择器
解决 首字母下沉的问题
定义：伪元素表示一些特殊的并不真实存在的元素（特殊位置)
用法： 使用::开头
几个常见的伪元素选择器：
-
::first-letter表示第一个字母 -
::first-line表示第一行 -
::selection表示选中的文字内容 -
::before表示开始位置 -
::after表示结束位置 这两个必须结合content属性使用
content属性里的内容不可被选中
q元素自带::before和::after
::first-letter和::first-line用法和效果
P::first-letter{
color: sandybrown;
font-size: larger;
}
P::first-line{
background-color: springgreen;
}
::selection用法和效果
P::selection{
background-color:red;
}
div::before{
color: aqua;
/* 单写一行这个color没有效果 */
content: 'abcde';
}
div::after{
content: 'abcde';
}
<div>hello hello how are you</div>
4、样式的继承
样式的继承：
1. 我们为一个元素设置的样式也会应用到其后代元素身上
2.发生在祖先和后代元素之间的
3.好处：
继承的设计是为了方便开发，
利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，
这样只需设置一次就可以让所有元素都获取此样式
4.注意：
并不是所有的样式都会被继承
比如 背景相关的 布局相关的等
在zeal里看inherit 是yes还是no
<style>
p{
color:aqua;
/* background-color: blue; */
}
</style>
<p>
我是一个p元素
<span>我是p元素里的span元素
<!-- 子元素 -->
<em>我是span里的em</em>
<!-- 后代元素 -->
</span>
</span>
</p>
5、选择器的权重
样式冲突
-使用不同选择器选中相同的元素，并且为相同的样式设置不同的值此时会发生样式冲突。
-发生样式冲突，应用哪个样式有选择器的权重（优先级）决定 （越具体，优先级越高）
权重：
内联样式 1000 1,0,0,0
id选择器 100 0,1,0,0
类和伪类选择器 10 0,0,1,0
元素选择器 1 0,0,0,1
通配选择器 0 0,0,0,0
继承的样式 无优先级
#box1{
background-color:coral
}
div{
background-color:yellow
}
.red{
background-color: red;
}
比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高则越优先显示
div#box1{
background-color:rgb(0, 255, 128)
}
分组选择器单独计算
选择器的累加不会超过其最大的数量级，类选择器在高也不会超过id选择器
如果优先级相同，则优先使用靠下的样式
.red{
background-color: red;
}
.d1{
background-color: purple;
}
继承样式无优先级
div{
font-size: 50px;
}
*{
font-size: 20px;
}
在某一个样式后面加一个!important ,则此时该样式会获取最大优先级，甚至超过内联样式(慎重使用)
.red{
background-color: red !important
}
.d1{
background-color: purple
}
6、像素和百分比、em和rem
长度单位：
像素
-屏幕（显示器）实际上是有一个一个小点点构成的
-不同屏幕的像素大小是不同的，像素越小的屏幕显示效果越清晰（类比毛孔和皮肤）
-所以同样的200px在不同的设备下显示效果不一样
.box1{
width:200px;
height: 200px;
background-color: coral;
}
百分比
-可以将属性值设置相对于父元素属性的百分比（父元素不严谨，后面会讲）
-好处：可以使子元素跟随父元素的改变而改变
/* .box2{
width:100px;
height:100px;
background-color:blue;
} */
.box2{
width:50%;
height:50%;
background-color:blue;
}
/* 上面这两个一样*/
em：
-em是相对于元素字体大小来计算的
-1em = 1font-size
-em会根据字体大小改变而改变
rem:
-rem是根据根元素html字体大小来计算
.box3{
font-size: 10px; /* 根据这里变化而变化 */
width:10em;
height:10em;
background-color:purple;
}
html{
font-size: 30px;/* 根据这里变化而变化 */
}
.box4{
/* font-size: 30px; */
width:10rem;
height:10rem;
background-color:rgb(0, 92, 128);
}
<body>
<div class="box1">
<div class="box2"> </div>
</div>
<div class="box3"> </div>
<div class="box4"> </div>
</body>
7、RGB值、HSL值
颜色单位：
在css中直接使用英文名来设置各种颜色
比如 red blue yellow green…
但是在css中直接使用英文名十分不方便
RGB值：
-RGB是通过三种颜色不同浓度调配出来的颜色
-R-red G-green B-blue
-每一种颜色范围在0 - 255（0% - 100%)之间
-语法：RGB（红，绿，蓝)
RGBA:
-就是在rgb基础上加了一个a表示不透明度
-需要四个值，前三个和rgb一样，第四个表示不透明度
1 完全不透明 0 表示完全透明 .5表示半透明 
十六进制的rgb值：
-语法：#红绿蓝
-颜色浓度通过 00-ff
-两位两位相同可以简写
#aabbcc --> #abc
#ffff00 --> #ff0
HSL值 HSLA值 （工业上多）
h 色相（0-360）（圆形调色板)
s 饱和度 颜色浓度（0%-100%）
l 亮度 颜色亮度 （0%-100%）
1002
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
