菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 王文博-20221013-CSS样式2 [打印本页]

作者: 博5237 时间: 2022-10-13 23:42
标题: 王文博-20221013-CSS样式2
一、今日学习内容
1、CSS的复合选择器：
概念：是对基本选择器进行组合而成的选择器
1.1、复合选择器分类：
1.1.1、后代选择器：
概念：有包含选择器，可以从父级元素里面符合条件的子元素
例：div P{color:red;font-size:50px;}
语法规范：
元素1和元素2之间用空格隔开
元素1是父极，元素2是子级，最终选择子级
元素2可以使儿子也可以是孙子，只要是元素1的子级就行
元素1和元素2可以使任意的基础选择器
1.1.2、子选择器：
概念：会选择父级元素最近一级的元素
例：div>p{color:red;font-size:50px;}
语法规范：元素1和元素2之间用>隔开
元素1为父级，元素2是子级，最终选择元素二
元素2是亲儿子，也是距离元素1最近的元素最近一级的元素2，孙子、重孙都不会能被选择
1.1.3、并列选择器：
概念：多组并列标签组成，用逗号分开
1.2.1、伪类选择器：
主要是给链接器选择效果样式
伪类名称示例说明
:link a:link 选择所有未被访问过的链接
:hover a:hover 选择鼠标悬浮于链接时
:active a:active 选择点击链接时的样式
:visited a:visited 选择所有被访问链接
例：a:link{color:red;}
注意：链接顺序lvha的顺序，不然会影响链接效果
1.2.2、focus伪类选择器（焦点伪类选择器）：
例：标签:focus{color:red;}
焦点伪类选择器：获取光标所在位置，进行样式变化，主要针对表单元素
伪类选择器总结：
1、伪类和css的类一样，可以附加在其他的选择器上
2、向其他选择日期附加伪类选择器是，必须选择要支撑选择器所声明的状态，否则没有效果
2、CSS的元素显示模式
2.1分类：
2.1.1、块级元素：常见的块级元素：h1-h6、P、div、ul、ol、li标签等等
特点：独占一行
高度宽度可控制（内外边距可以控制）
宽度默认父级宽度的100%
块级元素内可以放弃他快级或行内元素
注意：文字类元素内不能放块级标签
比如：p标签和h1-h6标签，不能放div标签
2.1.2、行内元素：常见的行内元素：a、strong、b、em、i、del、span是典型的行内元素
特点：一行可以显示多个
无法设置宽高
默认的宽度和高度，是他本身内容的宽高
行内元素只能容纳文本或者其他元素
注意：链接连不能在放链接
特殊情况在a标签内放其他块级元素，最好将a标签转化为块级元素
2.1.3、行内块元素：常见的行内快级元素：img、input、td等等
特点：和相邻的行内快级元素在一行上，但他们之间会有空白间隙，一行可以显示多个
默认是他本身内容的宽度
高度宽度可以设置
2.2、元素显示模式的转换
行内元素转化为块级元素：display:bloy;
块级元素转化为行内样式：display:inline;
转化为行内块样式：display:inline-bloy;
文字的垂直居中：css没有提供文字垂直居中代码，
文字行高设置和父级相同高度
3、CSS背景属性
背景颜色：background-color：来设置，默认transparent（透明）
背景图片：background-image：url(路径地址)
背景平铺：background-repeat：不平铺：no-repeat 纵向平铺：repeat-y 横向平铺：repeat-x 默认平铺：repeat
背景图片定位：background-position：x,y; 顶部居中：top center 左部居中：left center
如果只写了一个方位名词，则另一方向默认居中
方位名词书写顺序不影响实际结果
像素定位：以当前div左上角为起点，两个值的话，第一位X轴，第二位Y轴
一个值的话，默认X轴，Y轴的话，默认居中
单位名词和像素值可以混合使用，前面设置X轴，后面Y轴
总结：1、参数是方位名词的时候，
如指定两个值都是方位名词，则两个值先后顺序没有关系
只指定了一个方位名词，则另一个省略，默认center
2、参数是精准像素单位
参数为具体像素是，第一个为X坐标，第二个Y坐标
如果指定一个数值，则肯定是X轴坐标，Y轴默认居中
3、参数混合式用
第一个参数为X轴坐标，第二个为Y轴坐标
图片附着：background-attachment：
默认滚动：scroll 跟随屏幕滚动而滚动
固定位置：fixed 背景不跟随屏幕滚动
4、CSS三大特性：
4.1、层叠性：概念：是相同的选择器给设置相同的样式，新的样式会覆盖掉就得样式
原则：样式冲突，遵循就近原则，那个样式理解构近，就执行哪一个样式
样式不冲突则都会执行
4.2、继承性：概念：子标签会继承父标签的某些样式，比如文本颜色字号等等，子承父业
4.3、优先级（权重）：概念：选择器相同时，执行层叠性选择器不同时，执行继承性
选择器选择器权重
继承和* 0,0,0,0
元素选择器 0,0,0,1
类选择器 0,0,1,0
ID选择器 0,1,0,0
行内样式 1,0,0,0
!important 无穷大
注意点：1、权重是由四位数字组成，但不会进位
2、可理解为类选择器永远大于元素选择器，以此类推
3、从左往右进行判断，如果某一位相同，那么判断下一位
4、继承的权重是0，不管父级权重多高，子元素继承得到的权重都为0

二、今日问题

三、解决方法

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)