使用css修改元素的样式
位置
- 第一种方式（内联样式，行内样式）：
1.在标签内部通过style属性来设置元素的样式
2.问题：使用内联样式，样式只能对一个标签生效
如果希望影响到多个元素，必须在每一个元素中都复制一遍。并且当样式发生变化时，我们必须要一个一个的修改，非常的不方便
3.注意：开发时绝对不要使用内联样式
<p style="color:red; font-size:60px;"></p>
- 第二种方式 (内部样式表)：
1.将样式编写到head中的style标签里
然后通过CSS的选择器来选中元素并未其设置各种样式
内部可以同时为多个标签设置样式，并且修改时只需要修改一处即可
2.内部样式表更加方便对样式进行复用
3.问题：我们的内部样式表只能对一个页面起作用，它里面的样式不能跨页面进行复用
<style>
p{
color:red;
font-size:60px;
}
</style>
- 第三种方式（外部样式表）：最佳实践
1.可以将CSS样式编写到一个外部的CSS文件中，然后通过 link 标签引入外部的CSS文件
2.外部样式表需要通过link标签进行引入，意味着只要想使用这些样式的网页都可以对其进行引用，使样式可以在不同页面之间进行复用
html页面：<link rel="stylesheet" href="./style.css">
style.css页面：
p{
color:tomato;
font-size:60px;
}
3.将样式编写到外部的css文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验
CSS的基本语法
- style标签中的内容要遵循CSS的基本语法
- CSS中的注释：
/* */ - CSS的基本语法：选择器 声明块
1.选择器：通过选择器可以选中页面中的指定元素
比如p的作用就是选中页面中所有的p元素
2.声明块：通过声明块来指定要为元素设置的样式
声明块由一个一个的声明组成
声明是一个名值对结构，一个样式名对应一个样式值，名和值之间以 ： 连接，以 ； 结尾
p{
color:tomato;
font-size:60px;
}
选择器
- 常用选择器
1.元素选择器
作用：根据标签名来选中指定的元素
语法：标签名{ }
例子：p{} h1{} div{}
<style>
p{
color:red;
}
</style>
- id选择器
作用：根据元素的id值选中一个元素
语法：#id属性值{}
例子：#box{} #red{}
<style>
#red{
color:red;
}
</style>
<body>
<p id="red">儿童相见不相识</p>
</body>
- 类选择器（class选择器）：
class是一个标签的属性，它和id类似，不同的是class可以重复使用，可以通过class属性来元素分组
可以为一个元素指定多个class属性，中间用空格隔开
作用：根据元素的class属性值选中一组元素
语法：.class属性值 - 通配选择器：
作用：选中页面中的所有元素
语法：*{}
复合选择器
-
交集选择器：
作用：选中同时复合多个条件的元素
语法：选择器1选择器2选择器3选择器n{}
注：交集选择器中如果有元素选择器，必须使用元素选择器开头 -
选择器分组（并集选择器）：
作用：同时选择多个选择器对应的元素
语法：选择器1，选择器2，选择器3，选择器n{}
关系选择器
<div>
我是一个div
<p>
我是div中的p元素
<span>我是div中的span元素</span>
</p>
<span>我是div中的span元素</span>
</div>
- 父元素：直接包含子元素的元素叫做父元素
子元素：直接被父元素包含的元素是子元素
祖先元素：
1.直接或间接包含后代元素的元素叫做祖先元素
2. 一个元素的父元素也是它的祖先元素；
后代元素：
1.直接或间接被祖先元素包含的元素叫做后代元素
2.子元素也是后代元素
兄弟元素：拥有相同父元素的元素是兄弟元素 - 为div的子元素span设置一个字体颜色红色（为div直接包含的span设置一个字体颜色）
子元素选择器：
1.作用选中指定父元素的指定子元素
2.语法：父元素 > 子元素
<style>
div > span{
color:red;
}
</style>
- 后代元素选择器：
1.作用：选中指定元素内的指定后代元素
2.语法：祖先 后代 - 可以连续写：如div > p >span{}
- 兄弟选择器：
1.选择下一个兄弟
语法：前一个 + 下一个
2.选择下面所有的兄弟
语法： 兄 ~ 弟
属性选择器
[属性值] 选择含有指定的元素
[属性名=属性值] 选择含有指定属性和属性值的元素
[属性名^=属性值] 选择属性值以指定值开头的元素
[属性名$=属性值] 选择属性值以指定值结尾的元素
[属性名*=属性值] 选择属性值中含有某值的元素的元素
<style>
p[title]{}
p[title^=abc]{}
p[title$=abc]{}
p[title*=abc]{
color:orange;
}
</style>
<body>
<p title="abc">少小离家老大回</p>
<p title="abcdef">乡音无改鬓毛衰</p>
<p title="helloabc">儿童相见不相识</p>
<p>笑问客从何处来</p>
<p>秋水共长天一色</p>
<p>落霞与孤鹜齐飞</p>
</body>
伪类选择器
伪类（不存在的类，特殊的类）
-
伪类用来描述一个元素的特殊状态
比如：第一个子元素、被点击的元素、鼠标移入的元素…… -
伪类一般情况下都是使用 : 开头
- :first-child 第一个子元素
- :last-child 最后一个子元素
- :nth-child(n) 选中第n个子元素
特殊值：
n 第n个 n的范围0到正无穷
2n 或 even 表示选中偶数位的元素
2n+1 或 odd表示选中奇数位的元素 - :first-of-type
- :last-of-type
- :nth-of-type()
这几个伪类的功能和上述的类似，不同点是他们在同类型元素中进行排序 - :not() 否定伪类
将符合条件的元素从选择器中去除
<style>
ul > li:first-child{
color:red;
}
ul > li:nth-child(even){
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>
</ul>
</body>
超链接的伪类
- :link 用来表示没访问过的链接（正常的链接）
a:link{
color:red;
}
- :visited 用来表示访问过的链接
由于隐私的原因，所以visited这个伪类只能修改链接的颜色
a:visited{
color:orange;
}
- :hover用来表示鼠标移入的状态
- :active用来表示鼠标点击
a:active{
color:yellowgreen;
}
<body>
<a href="https://www.baidu.com">访问过的链接</a>
<a href="https://www.baidu123.com">没访问过的链接</a>
</body>
伪元素选择器
伪元素，表示页面中一些特殊的并不真实的存在元素（特殊位置）
- 伪元素使用 :: 开头
- ::first-letter表示第一个字母
p::first-letter{
font-size:50px;
}
- ::first-line 表示第一行
- ::selection 表示选中的元素
- ::before 元素的开始
- ::after 元素的最后
- 注：before和after 必须结合content属性来使用
div::before{
content:'abc';
color:red;
}
<body>
<div>hello hello how are you</div>
<p>jedfchsjcmnjcdcjdn</p>
</body>
样式的继承
- 样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上
- 继承是发生在祖先后代之间的
- 继承的设计是为了方便我们开发的，利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，这样只需设置一次即可让所有的元素都具有该样式
- 注：并不是所有的样式都会被继承，比如：背景相关的、布局相关等这些样式都不会被继承。
选择器的权重
-
样式的冲突：当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此刻就发生了样式的冲突。
-
发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定
-
选择器的权重
内联样式 1，0，0，0
id选择器 0，1，0，0
类和伪类选择器 0，0，1，0
元素选择器 0，0，0，1
通配选择器 0，0，0，0
继承的样式 没有优先级 -
比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）；
选择器的累加不会超过其最大的数量级，类选择器在高也不会超过id选择器；
如果优先级计算后相同，此时则优先使用靠下的样式 -
可以在某一个样式的后边添加 !important,则此时该样式会获取到最高的优先级，甚至超过内敛样式
.d1{
backgroup-color:purple !important;
}
长度单位
像素：
-
屏幕（显示器）实际上是由一个一个的小点点构成的
-
不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
-
所以同样的200px在不同的设备下显示效果不一样
百分比： -
也可以将属性值设置为相对于其父元素属性的百分比
-
设置百分比也可以使子元素跟随父元素的改变而改变
em -
em是相对于元素的字体大小来计算的
-
1em=1font-size
-
em会根据字体大小的改变而改变
-
默认的时候1font-size=16px
rem -
rem是相对于跟元素的字体大小
注：em是相对于自身的，rem 是相对于html的字体大小
颜色单位
-
在CSS中可以直接使用颜色名来设置各种颜色
1.比如：red、orange、yellow、blue…… 2.但在CSS中直接使用颜色名是非常不方便的 -
RGB值
1.RGB通过三种颜色的不同浓度来调配出不同的颜色
2.R——red,G——green,B——blue
3.每一种颜色的范围在0 - 255（0%-100%）之间
语法：RNG(红色，绿色，蓝色)
- RGBA:
1.就是在RGB基础上增加了一个A表示不透明度
2.需要四个值，前三个和RGB一样，第四个表示不透明度
注：1表示完全不透明 0表示完全透明 .5表示半透明
- 十六进制的RGB值：
1.语法：#红色绿色蓝色
2.颜色浓度通过00-ff
如果颜色两位两位重复可以进行简写，如#aabbcc可以写成#abc
- HSL
H——色相（0-360）
S——饱和度，颜色的浓度（0%-100%）
L——亮度，颜色的亮度（0%-100%）
- HSLA
backgroup-color:red;
backgroup-color:rgb(255,0,0);
backgroup-color:rgba(106,153,85,.5);
backgroup-color:#ff0000;
backgroup-color:hsl(98,40%,40%);
backgroup-color:hsla(98,40%,40%,0.658);
200
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
