菁英数字科技(猩码)-猩码学苑-专注软件开发人才菁英教育
标题: 张建斌-2022.11.13 [打印本页]
作者: IT5353 时间: 2022-11-13 23:45
标题: 张建斌-2022.11.13
一. CSS的复合选择器
1. 什么是复合选择器:复合选择是建立在基础选择器,进行组合
2. 后代选择器:后代选择器是可以选择父元素里面的子元素,外层标签写在前面,内存标签写在后面,中间用空格隔开
语法:元素1元素2{样式声明}:元素1是父级,元素2是子级,可以是儿子,只要是元素1的后代:元素1和2可以是任意的基础选择器
3. 子选择器:子元素选择器只能作为某元素的最近的一级子元素,就是亲儿子选择器
语法:元素1>元素2 {样式声明};元素1和元素2用大于号来隔开;元素2必须是亲儿子,孙子都不行。
4. 并集选择器:可以选择多组标签,指定同样的样式,集体声明
注意点:没一组选择器之间用逗号隔开;每一组可以是任意类型的选择器,基础选择器,复合选择器都行。
5. 伪类选择器:
链接伪类选择器:link选择所有未被访问过的链接; :visited 选择所有已经访问过的链接; :hover 悬停时的状态: :active 点击时的样式
如果给其他选择器添加伪类,这个选择器必须有伪类的状态,否则不可以使用,工作中用的多的是hover 链接用的最多
焦点伪类选择器:focus 语法:input:focus 一般焦点伪类选择器和input标签联合使用,因为input具有聚焦的状态。
二. CSS的元素显示模式
概念:元素在网页中的显示状态就是它本身的显示模式: h 和div 标签独占一行 span 标签一行多个
分类:
1.块元素:1.自己独占一行,宽度是父级宽度的百分之百
2.宽度默认是父级宽度的百分之百
3.本身也可以是盒子或者容器,里面可以放其他的内容或者块级元素
4.高度宽度都可以设置,内外边距也可以设置
块元素:h1-h6 ; div ; p ; ul ; ol; li ;
div 是最典型的块级元素
注意类:文字类的元素内不能套块级元素;比如; p标签不能放div标签
2.行内元素:
1.特点:1.相邻行内元素会在一行上进行显示
2. 行内元素宽高设置都是无效的
3. 行内元素宽高设置就是里面内容的宽高
4. 行内元素只能容纳文本或者其他的行内元素:例 : span里面不放div
5.相邻之间的行内元素之间会有一点空隙
2.常见的行内元素:a 。strong 。ins。em。span。
1.注意点:链接里面不可以再放链接
2.如果a标签内要放一个块级元素,要将a标签的显示模式转化为块级
3.行内块元素的特点:1.相邻的行内块元素在一行上显示,并且有空白缝隙(行内元素特点)2.默认宽度是它本身的内容宽度(行内元素特点)3.高度和宽度可以进行设置(块级元素的特点)
常见的行内块元素:inputimg td
注意点:
1.方位名词没有先后顺序,方位名词自带x和y轴的定位属性
2.如果只写了一个, 那么另一个默认居中
4. 1.如果用精确单位来定位背景图片,第一个值是x轴坐标二是
y轴坐标。
2.如果只写一个单位,就代表x轴的偏移像素,y轴代表默认
居中。
3.可以混合使用
5.背景图片的滚动:
1. background-attachment:属性值:scroll:默认值,随屏幕滚动,,,fixed:图片不随着滚动
6.背景的复合写法:background-color;background-image:background-repeat;background- attachment;background-position;
1.实际开发中采用复合写法。
6.背景半透明:
1. background:rgba(0,0,0,0.3)
1. a是alpha的缩写,代表透明度的意思,与之在0-1之间
2. 我们习惯0.3写成.3
3. 背景半透明指的是盒子半透明,对盒子里的内容不受影响
4. 背景半透明是CSS3里面新增的属性,旨在IE9上支持,但是在实际开发中不太关注兼容性的问题,正常使用就可以
三. CSS的三大特性
1. 层叠性
1.相同的选择器设置相同的样式,就会覆盖旧的样式
2.层叠性:样式冲突的时候,用新写的样式,就近原则
不冲突的时候,不层叠
2. 继承性:
1. 在CSS中,子标签会集成父标签的某些样式,比如文本颜色和字号等等
2. 可以被继承的属性:text-;font;line- ;color
3. 优先级
1. 概念:如果选择器相同,执行层叠性,如果不同,根据选择器的权重来执行。
2. 选择器的权重表:
3. 权重的注意点
1. 权重是由四组数字构成,但不会进位,简单理解,就是类选择器的权重永远大于元素选择器
2. 如果使用复合选择器,呢么就将复合选择器中的基础选择器的权重进行相加比较即可
3. 继承的权重是0,父元素的样式的权重在搞,对于子元素来说,继承下来的样式权重是0
欢迎光临 菁英数字科技(猩码)-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/) |
Powered by Discuz! X3.4 |