文章目录
为网页添加样式
术语解释
h1{
color:red;
background-color: aquamarine;
text-align: center;
}
css规则 = 选择器 + 声明块
选择器
选择器:选中元素
1.id选择器:选中的是对应id的元素
2.元素选择器
3.类选择器
声明块
出现在大括号中
css代码书写位置
1.内部样式表
书写在style元素中
2.内联样式表,元素样式表
直接书写在元素的style元素中
3.外部样式表[推荐]
讲样式书写到独立的css文件中
1).外部样式表可以解决多页面样式重复的问题
2).有利于浏览器缓存,提高页面响应元素
3).有利于代码分离,更容易阅读和维护
常见样式声明
1.color
元素内部的文字颜色
预设值:定义好的单词
三原色,色值:光学三原色(红,绿,蓝),每个颜色可以使用0-255之间的数字来表达
rgb表示法:
rgb(0,255,0)
hex表示法(16进制):
#008c8c(红绿蓝)
2.background-color
背景颜色
3.font-size
元素内部文字的尺寸大小
1).px:像素,简单的理解为文字的高度占多少像素
2).em:相对单位,相对于父元素的字体大小
每个元素必须有字体大小,如果没有生命,则直接使用父元素的字体大小,如果没有父元素(html),则使用基准字号
user agent UA 用户代理器
4.font-weight
文字粗细程度,可以取值数字,可以取值为预设值
strong元素,默认加粗
5.font-family
文字类型
必须用户计算机中存在的字体才会有效
使用多个字体,以匹配不同环境
sans-serif:非衬线字体
6.font-style
字体样式,通常用于设置斜体
i元素,默认样式是倾斜字体;实际使用中,通常用他表示一个图标(icon)
em元素,默认斜体
7.text-decoration
文本修饰,给文本加线
a元素
del元素:错误的内容
s元素:过期的内容
8.text-indent
首行文本缩进
9.line-height
每行文本的高度,该值越高,每行文本距离越大
设置行高为容器的高度可以让单行文本垂直居中
行高可以设置为纯数字,表示相对于当前元素的字体大小
10.width
宽度
11.height
高度
12.letter-spacing
文字间隙
13.text-align
元素内部文字水平排列方式
选择器
精准的选中想要的元素
简单选择器
1.id选择器
2.元素选择器
3.类选择器
4.通配符选择器
*,表示选中所有元素
5.属性选择器
根据属性名属性值选中元素,[属性名]
6.伪类选择器(顺序)
link: 超链接未访问时地址
visited:超链接访问后的状态
hover:鼠标悬停状态
active:激活状态,鼠标按下状态
7.伪元素选择器
before:
after:
选择器的组合
1.并且
2.后代元素 —— 空格
3.子元素 —— >
4.相邻兄弟元素 —— +
5.兄弟元素 —— ~
选择器的并列
多个选择器,用逗号分隔
语法糖
层叠
声明冲突:同一个样式,多次应用到同一个元素
层叠:解决声明冲突的过程,浏览器自动处理(权重计算)
1.比较重要性
重要性从高到低:
作者样式表:开发者书写的样式
1).作者样式表中的!important样式
2).作者样式表中的普通样式
3).浏览器默认样式表中的样式
2.比较特殊性
看选择器
总体规则:选择器选择的范围越窄,越特殊
具体规则:通过选择器,计算出一个四位数
千位:如果是内联元素,记为1,否则记为0
百位:等于选择器中所有id选择器的数量
十位:等于选择器中所有类选择器,属性选择器,伪类选择器的数量
个位:等于选择器中所有元素选择器,伪元素选择器数量
3.比较源次序
代码书写靠后的胜出
应用
1.重置样式表
书写一些作者样式,覆盖浏览器默认样式
常见的重置样式表:normallize.css,reset.css,meyer.css
继承
子元素会继承父元素的某些css属性
通常跟文字,字体有关的元素可以被继承
属性值的计算过程
一个元素一个元素一次渲染,顺序按照页面文档的树形目录结构进行
渲染每个元素的前提条件:该元素的所有css属性必须有值
一个元素,从所有属性都没有值,到所有属性都有值,这个计算过程,叫做属性值的计算。
计算过程
1.确定声明值
参考样式中没有冲突的声明,作为css属性值
2.层叠冲突
对样式表有冲突的声明,使用层叠规则,确定css属性值
3.使用继承
对仍然没有值的属性,若可以继承,则继承父元素的值
4.使用默认值
对仍然没有值的属性,使用默认值
特殊的两个css取值
- inherit:强制继承
- initial:初始值,将该属性设置为默认值
盒模型
box:盒子,每个元素在页面中都会生成一个矩形区域(盒子)
盒子类型:
1.行盒,display等于inline的元素
2.块盒,display等于block的元素
行盒在页面中不换行,块盒独占一行
display默认属性为行盒
浏览器默认样式表设置的块盒:容器元素,h,p
常见的行盒:span,a,img,video,audio
盒子的组成部分
无论是行盒,还是块盒,都由下面几个部分组成,从内到外分别是
1.内容 content
width,height,设置的是盒子内容的宽高
内容部分通常叫做整个盒子的内容盒 content-box
2.填充(内边距) padding
盒子边框到盒子内容的距离
padding-left,padding-right,padding-top,padding-bottom
padding:简写属性
padding:上 右 下 左
填充区 + 内容区 = 填充盒 padding-box
3.边框 bored
边框 = 边框样式 + 边框宽度 + 边框颜色
border-style
border-weight
border-color
边框 + 填充区 + 内容区 = 边框盒 border-box
4。外边距 margin
边框到其他盒子的距离
速写属性margin
盒模型应用
改变宽高范围
默认情况下,width 和 height 设置的是内容盒宽高。
页面重构师
衡量设计稿的尺寸时,往往使用的是边框盒,但设置width和height时是内容盒
1.精确计算
2.css3:box-sizing
改变背景覆盖范围
默认情况下,背景覆盖边框盒
可以通过background-clip进行修改
溢出处理
overflow,控制内容溢出边框盒后的处理方式
hidden:隐藏
scroll:滚动条
auto:自动
断词处理
word-break,会影响文字在什么位置被截断
normal:普通。CJK字符(文字位置截断),非CJK字符(单词位置截断)
break-all:截断所有。所有文字都在文字处截断
keep-all:保持所有,所有文字都在单词之间截断
空白处理
white-space:nowrap
text-overflow: ellipsis
pre元素:white-space:pre 不会进行空白折叠
行盒的盒模型
常见的行盒:包含具体内容的元素
span,strong,em,i,img,vedio,audio
显著特点
1.盒子沿着内容延伸
2.行盒不能设置宽高
调整行盒的宽高,应该使用字体大小,行高,字体类型间接调整
3.内边距
水平方向有效,垂直方向仅会影响背景,不会实际占据空间。
4.边框
水平方向有效,垂直方向仅会影响背景,不会实际占据空间。
5.外边距
同上
行块盒
display:inline-block的盒子
1.不独占一行
2.盒模型中所有尺寸都有效
空白折叠
空白折叠发生在行盒内部(行块盒) 或 行盒之间
可替换元素盒非可替换元素
大部分元素,页面上显示的结果,取决于元素内容,成为非可替换元素
少部分元素,页面上显示的结果,取决于元素属性,成为可替换元素
img,vedio,audio
绝大部分可替换元素均为行盒
可替换元素类似于行块盒,盒模型中所有尺寸都有效
object-fit
常规流
盒模型:规定单个盒子的规则
视觉格式化模型(布局规则):页面中的多个盒子排列规则
视觉格式化模型:大体上将页面中盒子的排列方式分为三种方式
1.常规流
2.浮动
3.定位
##常规流布局
常规流,文档流,普通文档流,常规文档流
所有元素默认情况下,都属于常规流布局
总体规则:块盒独占一行,行盒水平依次排列
包含块:每个盒子都有他的包含块,包含块决定了盒子的排列区域
绝大部分情况下,盒子的包含块,为其父元素的内容盒
块盒
1.每个块盒的总宽度,必须刚好等于包含块的宽度
宽度的默认值是auto
margin的取值也可以为auto
auto:将剩余空间吸收掉
width吸收能力强于auto
若宽度,边框,内边距,外边距计算后,仍有剩余空间,该剩余空间被margin-right吸收
在常规流中,块盒在其包含块中居中,可以定宽,然后左右margin设为auto
2.每个块盒垂直方向上的auto值
height:auto, 适应内容的高度
margin:auto,表示0
3.百分比取值
padding,宽高,margin可以取值为百分比
以上的所有百分比相对于包含块的宽度
高度的百分比:
1.包含块的高度是否取决于子元素高度,设置百分比无效
2.包含块的高度不取决于子元素的高度,百分比相对于父元素高度
4.上下外边距的合并
两个常规流块盒,上下外边距相邻,会进行合并
两个外边距取最大值
浮动
应用场景
1.文字环绕
2.横向排列
浮动的基本特点
修改float属性值为:
- left:左浮动,元素靠上靠左
- right:右浮动,元素靠上靠右
默认值为none
- 当一个元素浮动后,元素必定为块盒(更改display属性为block)
- 浮动元素的包含块,和常规流一样,为父元素的内容盒
盒子尺寸
- 宽度为auto时,表示为适应内容宽度
- 高度为auto时,与常规流一致,适应内容的高度
- margin为auto时,为0
- 边框,内边框,百分比设置与常规流一样
盒子排列
- 左浮动的盒子靠上靠左排列,右浮动的盒子考上靠右浮动
- 浮动盒子在包含块中排列时,会避开常规流盒子
- 常规流盒子排列时,无视浮动盒子
- 行盒在排列时,会避开浮动盒子
- 外边距合并不会发生
如果文字没有在行盒中,浏览器会直接生成一个行盒包裹文字,该行盒叫做匿名行盒
高度坍塌
高度坍塌的根源:常规流盒子的自动高度,在计算时,不会考虑浮动盒子
清除浮动,涉及css属性:clear
- 默认值:none
- left:清除左浮动,该元素必须出现在前面所有左浮动盒子的下方
- right
- both:清除左右浮动
定位
涉及的css属性:position
position属性
- 默认值:static,静态定位(不定位)
- relative:相对定位
- absoluted: 绝对定位
- fixed:固定定位
一个元素,只要position的取值不是static,认为该元素是一个定位元素
定位元素会脱离文档流(相对定位除外)
一个脱离了文档流的元素:
- 文档流中的元素摆放时,会忽略脱离了文档流的元素
- 计算高度时,会忽略脱离了文档流的元素
相对定位
不会导致元素脱离文档流,只是让元素在原来位置上进行偏移
可以通过四个css属性设置其位置:
- left:
- right:
- top:
- bottom:
盒子的偏移不会对其他盒子产生任何影响。
绝对定位
- 宽高为auto,适应内容
- 包含块变化:找祖先元素中第一个定位元素,该元素的填充和为其包含块.若找不到,则他的包含块为整个网页
固定定位
其他情况和绝对定位完全一样。
包含快不同:固定为视口(浏览器的可视化窗口)
定位下的居中
某个方向居中:
- 定宽
- 讲左右距离设置为0
- 将左右margin设置为auto
绝对定位和固定定位中,margin为auto,会自动吸收剩余空间
多个元素堆叠时
堆叠上下文
设置z-index,通常情况下,该值越大,越靠近用户
只有定位元素设置z-index有效
z-index可以是负数,如果遇到常规流元素,浮动元素,则会被其覆盖
补充
- 绝对定位,固定定位元素一定是块盒
- 绝对定位,固定定位元素一定不是浮动
- 没有外边距合并