html、css入门笔记_006
6. CSS选择器?
1. ID选择器
#elem{} id="elem"
注:
1. ID是唯一值,在一个页面中只能出现一次,出现多次是不符合规范的。
2. 命名的规范,由字母、下划线、中划线、字母(并且第一个不能是数字)
3. 驼峰写法 : searchButton (小驼峰) SearchButton (大驼峰) searchSmallButton
短线写法:search-small-button
下划线写法:search_small_button
2. CLASS选择器
.elem{} class="elem"
注:
1. class选择器是可以复用的。
2. 可以添加多个class样式。
3. 多个样式的时候,样式的优先级根据CSS决定,而不是class属性中的顺序。
4. 标签+类的写法
3. 标签选择器(TAG选择器)
div{} <div></div>
使用的场景:
1. 去掉某些标签的默认样式时
2. 复杂的选择器中,如 层次选择器
4. 群组选择器(分组选择器)
可以通过逗号的方式,给多个不同的选择器添加统一的CSS样式,来达到代码的复用。
5. 通配选择器
*{ } -> div,ul,li,p,h1,h2....{}
注:尽量避免使用通配选择器,因为会给所有的标签添加样式,慎用。
使用的场景:
1. 去掉所有标签的默认样式时
6. 层次选择器
后代 M N { }
父子 M > N { }
兄弟 M ~ N { } 当前M下面的所有兄弟N标签
相邻 M + N { } 当前M下面相邻的N标签
7. 属性选择器
M[attr] {}
= : 完全匹配
*= : 部分匹配
^= : 起始匹配
$= : 结束匹配
[][][] : 组合匹配
8. 伪类选择器
M:伪类{}
:link 访问前的样式 ( 只能添加给a标签 )
:visited 访问后的样式 ( 只能添加给a标签 )
:hover 鼠标移入时的样式 (可以添加给所有的标签)
:active 鼠标按下时的样式 (可以添加给所有的标签)
注:
一般的网站都只设置
a{} ( link visited active ) a:hover{}
:after、:before 通过伪类的方式给元素添加一段文本内容,使用content属性
:checked、:disabled 、:focus 都是针对表单元素的
结构性伪类选择器
nth-of-type() nth-child()
角标是从1开始的,1表示第一项,2表示第二项 | n值 表示从0到无穷大
first-of-type
last-of-type
only-of-type
nth-of-type()和nth-child()之间的区别
type : 类型
child : 孩子
7. CSS继承?
文字相关的样式可以被继承
布局相关的样式不能被继承 ( 默认是不能继承的,但是可以设置继承属性 inherit 值 )
8. CSS优先级?
1. 相同样式优先级
当设置相同样式时,后面的优先级较高,但不建议出现重复设置样式的情况。
2. 内部样式与外部样式
内部样式与外部样式优先级相同,如果都设置了相同样式,那么后写的引入方式优先级高。
3. 单一样式优先级
style行间 > id > class > tag > * > 继承
注:style行间 权重 1000
id 权重 100
class 权重 10
tag 权重 1
4. !important
提升样式优先级,非规范方式,不建议使用。( 不能针对继承的属性进行优先级的提升 )
5. 标签+类与单类
标签+类 > 单类
6. 群组优先级
群组选择器与单一选择器的优先级相同,靠后写的优先级高。
7. 层次优先级
1. 权重比较
ul li .box p input{} 1 + 1 + 10 + 1 + 1
.hello span #elem{} 10 + 1 + 100
2. 约分比较
ul li .box p input{} li p input{}
.hello span #elem{} #elem{}
9. CSS盒子模型?
组成 : content -> padding -> border -> margin
物品 填充物 包装盒 盒子与盒子之间的间距
content : 内容区域 width和height组成的
padding : 内边距(内填充)
只写一个值: 30px (上下左右)
写两个值 : 30px 40px ( 上下、左右 )
写四个值 : 30px 40px 50px 60px(上、右、下、左)
单一样式只能写一个值:
padding-left
padding-right
padding-top
padding-bottom
margin : 外边距(外填充)
只写一个值: 30px (上下左右)
写两个值 : 30px 40px ( 上下、左右 )
写四个值 : 30px 40px 50px 60px(上、右、下、左)
单一样式只能写一个值:
margin-left
margin-right
margin-top
margin-bottom
注:
1. 背景色填充到margin以内的区域 (不包括margin区域)
2. 文字在content区域添加。
3. padding不能为负数,而margin可以为负数。
box-sizing:
盒尺寸,可以改变盒子模型的展示形态。
默认值: content-box : width、height -> content
border-box : width、height -> content padding border
使用的场景:
1. 不用再去计算一些值
2. 解决一些100%的问题
盒子模型的一些问题:
1. margin叠加问题,出现在上下margin同时存在的时候。会取上下中值较大的作为叠加的值。
2. margin传递问题,出现在嵌套的结构中,只是针对margin-top的问题。
扩展:
1. margin左右自适应是可以的 ,但是上下自适应是不行的。( 如果想实现上下自适应的话,需要在第二大部分来进行学习 )
2. width、height不设置的时候,对盒子模型的影响,会自动去计算容器的大小,节省代码。
10. 标签分类?
按类型
block : div、p、ul、li、h1 ...
1. 独占一行
2. 支持所有样式
3. 不写宽的时候,跟父元素的宽相同
4. 所占区域是一个矩形
inline : span 、a、em、strong、img ...
1. 挨在一起的
2. 有些样式不支持,例如:width、height、margin、padding
3. 不写宽的时候,宽度由内容决定
4. 所占的区域不一定是矩形
5. 内联标签之间会有空隙,原因:换行产生的
inline-block : input、select ...
1. 挨在一起,但是支持宽高
注:布局一般用块标签,修饰文本一般用内联标签
按内容
Flow:流内容
Metadata:元数据
Sectioning:分区
Heading:标题
Phrasing:措辞
Embedded:嵌入的
Interactive:互动的
(详情:https://www.w3.org/TR/html5/dom.html)
按显示
替换元素 :浏览器根据元素的标签和属性,来决定元素的具体显示内容。
img、input ...
非替换元素 : 将内容直接告诉浏览器,将其显示出来。
div、h1、p ...