使用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);