一.为网页添加样式
术语解释
h1{
color:red;
background-color:lightblue;
text-align: center;
}
CSS规则 = 选择器 + 声明块
1)选择器
选择器:选中元素(上面代码的h1)
在head元素中书写style,添加相关元素
- ID选择器:选中的是对应id值的元素(给下面的元素附加id,上面对应#+id名)
- 元素选择器(在style元素中添加h1,p和下面的元素所对应)(所有同名元素)
- 类选择器 class
在style里面添加.+类选择器的名字进行编写,再在下面需要该格式的元素起始标记中添加class=“”(灵活),可以同时加多个
2) 声明块
出现在大括号中
声明块中包含很多声明(属性),每一个声明(属性)表达了某一方面的样式。
属性名+属性值
color,background-color,text-align(文本对齐方式)
CSS代码书写位置
- 内部样式表(内容不多时使用,可以少读一个文件)
书写在style元素中
通常放在head元素中,为的是浏览器可以最先读取,也可以放在别的地方。
- 内联样式表,元素样式表(不太推荐)
直接书写在元素的style属性中,就不需要选择器了。直接写在起始处
<h1 style="color:red">
- 外部样式表[推荐]
将样式书写到独立的css文件中。
需要在head中添加link,在href中加入文件地址
优点
1). 外部样式可以解决多页面样式重复的问题
2). 有利于浏览器缓存,从而提高页面响应速度
3). 有利于代码分离(HTML和CSS),更容易阅读和维护
二. 常见样式声明
1. color
元素内部的文字颜色
预设值:定义好的单词
三原色,色值:光学三原色(红、绿、蓝),每个颜色可以使用0-255之间的数字来表达,色值。
rgb表示法(红绿蓝):
rgb(0, 255, 0)(绿色)
hex(16进制)表示法:
#红绿蓝(每个数字两位)
马尔斯绿:#008c8c
淘宝红:#ff4400, #f40(三位都相同可以简写)
黑色:#000000,#000
白色:#ffffff, #fff
红:#ff0000, #f00
绿:#00ff00, #0f0
蓝:#0000ff, #00f
紫:#f0f
青:#0ff
黄:#ff0
灰色:#ccc
2. background-color
元素背景颜色
3. font-size
元素内部文字的尺寸大小
值越大字越大。
1)px:像素,绝对单位,简单的理解为文字的高度占多少个像素。
2)em:相对单位,相对于父元素的字体大小
每个元素必须有字体大小,如果没有声明,则直接使用父元素的字体大小,如果没有父元素(html),则使用基准字号(浏览器里设置的字号)。
user agent,UA,用户代理(浏览器)
4. font-weight
文字粗细程度,可以取值数字,可以取值为预设值(normal,bold加粗【700】),有些字体不适配
strong,默认加粗。
5. font-family
文字类型
必须用户计算机中存在的字体才会有效。
使用多个字体,以匹配不同环境
font-family:consolas,翩翩体,微软雅黑
依次递推
建议再最后加上sans-serif,非衬线字体(字体的边缘没有被修饰),这是一个统称,随便选一个
sans-serif,非衬线字体
6. font-style
字体样式,通常用它设置斜体
font-style:italic;
font-style:normal;
i,em元素,默认样式,是倾斜字体; 实际使用中,通常用它表示一个图标(icon)
strong,默认加粗 ,也可以被替换
7. text-decoration
文本修饰,给文本加线。
line-trough,划过文字,给中间加条线
overline上加线
underline下加线
none啥都没有
a元素
del元素:错误的内容(之前写的有问题,加上这个元素将其删除掉),将del元素内容删去
s元素:过期的内容,默认样式是中间加一条线
8. text-indent
首行文本缩进,em是字符大小,px是像素值。
9. line-height
每行文本的高度,该值越大,每行文本的距离越大。
设置行高为容器的高度,可以让单行文本垂直居中
行高可以设置为纯数字,表示相对于当前元素的字体大小通常不使用em
line-height:1.5
10. width
宽度
11. height
高度
12. letter-space
文字间隙
13. text-align
left,center,right
元素内部文字的水平排列方式
三.选择器
选择器:帮助你精准的选中想要的元素
简单选择器
并不是要用上全部的选择器,而是根据自己的需要选择,提供更多可以使用的方法
- ID选择器
- 元素选择器
- 类选择器
- 通配符选择器
*,选中所有元素
*{
}
- 属性选择器
根据属性名和属性值选中元素
[href]{}
选中所有全部具有href属性的元素
但是
[href="https://www.baidu.com"]{}
这种情况只会选中百度元素。
属性元素的用法可以参照官方文档(搜索属性选择器mdn)
一个其他形式的选择器
[class~="b"]{color: red;}
<a class="a b c d" href="https://www.baidu.com">百度</a>
<a href="https:www.sina.com">新浪</a>
class中包含b,且b前后有分隔,则包含b属性的变色(没有空格就选不中)
6. 伪类选择器(常用且常用于超链接)
写伪类选择器都是元素加冒号
选中某些元素的某种状态
可以选择不添加伪类选择器,但如果添加,建议使用下面的元素顺序否则会出问题。
1)link: 超链接未访问时的状态
2)visited: 超链接访问过后的状态
3)hover: 鼠标悬停状态
如果不加内容选中所有内容,所以通常会添加内容
a:hover{
color:red;
}
此为选中鼠标悬停时的a元素
4)active:激活状态,鼠标按下状态
a:active{
color:red;
}
爱恨法则:love hate(四种选择器的首字母lvha)
- 伪元素选择器
生成并选中某个元素内部的第一个子元素或最后一个子元素
1.before:先在元素里面生成一个子元素,子元素没有名字,并且子元素一定是第一个元素,元素名字为before,在元素内部可以写一个特殊的属性为content(只有在before和after中使用),content表示元素的内容;该选择器选择修改元素样式的before,而不是span,所以span内部的文本内容不会改变样式。
2.after,同before。
span::before{
content: "《";
color: red;
}
span::after{
content: "》";
color: red;
}
选择器的组合(多个选择器组合在一起使用)
其实上面的span元素已经在组合,span是一个元素选择器,::before是伪元素选择器,二者在组合,组合起来达到并且的效果,选中span,并且选中的是第一个子元素
- 并且
a:hover{}
给元素添加内样式,使用元素名加.样式,例如p.red,会生成
<p class="red"></p>
- 后代元素 —— 两个选择器间加空格(应用广泛),精准选择元素
如果是空格加*号,则表示选择后代所有元素。
p元素里面不可以放列表ul
- 子元素 —— >,只可以选择子元素,不可以选择子元素的子元素
- 相邻兄弟元素 —— +
.spacial+li{color: #008c8c;}
则spacial下一个元素颜色发生改变。
6. 后面出现的所有兄弟元素 —— ~
css没有提供选择之前的东西
选择器的并列
多个选择器, 用逗号分隔
语法糖:并没有改变本质,只是为了方便使用和记忆,减轻负担
.spacial,p{color: red;}
两个选择器使用同样的格式,只是为了方便书写。
四. 层叠
声明冲突:同一个样式,多次应用到同一个元素,会产生冲突。
层叠(权重计算):解决声明冲突的过程,浏览器自动处理
经过以下三步完成层叠。
1. 比较重要性
重要性从高到底:
作者样式表:开发者书写的样式
1) 作者样式表中的!important样式,最重要最重要(可以覆盖全部样式,所以要谨慎使用)
2) 作者样式表中的普通样式
3) 浏览器默认样式表中的样式
2. 比较特殊性
看选择器
总体规则:选择器选中的范围越窄,越特殊
元素选择器比类选择器范围广。
具体规则:通过选择器,计算出一个4位数(x x x x)
- 千位:如果是内联样式(写在元素内部),记1,否则记0
内联样式直接胜出。
- 百位:等于选择器中所有id选择器的数量
- 十位:等于选择器中所有类选择器、属性选择器、伪类选择器的数量
- 个位:等于选择器中所有元素选择器、伪元素选择器的数量
3. 比较源次序
代码书写靠后的胜出
应用
- 重置样式表
书写一些作者样式,覆盖浏览器的默认样式
重置样式表 -> 浏览器的默认样式
常见的重置样式表:normalize.css、reset.css、meyer.css
- 爱恨法则
link > visited > hover > active
五 继承
子元素会继承父元素的某些CSS属性
通常,跟文字内容相关的属性都能被继承
可继承:color,font-size,font-weight,font-family,letter-space,text-align
不可继承:background-color,width
可以直接font后面加有关字体的属性,比如粗细,字体等等
六.属性值的计算过程
一个元素一个元素依次渲染,顺序按照页面文档的树形目录结构进行
渲染每个元素的前提条件:该元素的所有CSS属性必须有值
一个元素,从所有属性都没有值,到所有的属性都有值,这个计算过程,叫做属性值计算过程
属性值计算过程简介
1.确定声明值
参照样式表中没有冲突的声明,直接作为css属性值
2.层叠冲突
对样式表有冲突的声明使用层叠规则,确定css属性
a.比较重要性
b.比较特殊性
c.比较源次序
3.使用继承
对仍然没有值的属性,若可以继承,则继承父元素的值。
4.使用默认值
任然没有值的属性使用默认值。
eg:transparent透明
a元素为什么不继承?
a元素在浏览器的默认样式表里面已经完成了声明,所以直接第一步就完成了,不用进行到继承的步骤。
如果需要继承,则设置a{color:inherit;},进行强制继承,这其实是在进行第二步层叠冲突,并没有进行到第三步继承。
注:特殊的两个CSS取值:
- inherit:手动(强制)继承,将父元素的值取出应用到该元素
- initial:初始值,将该属性设置为默认值
七. 盒模型(以下主要讲的块盒)
box:盒子,每个元素在页面中都会生成一个矩形区域(盒子)
元素是html的概念,盒子是css的概念。
盒子类型:
- 行盒,display等于inline的元素
- 块盒,display等于block的元素
行盒在页面中不换行、块盒独占一行
display默认值为inline
浏览器默认样式表设置的块盒:容器元素、h1~h6、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. 边框 border
边框 = 边框样式 + 边框宽度 + 边框颜色
边框样式:border-style
边框宽度:border-width(也可以使用上右下左)
边框颜色:border-color(四个方向的颜色)
如果四个方向的边框都一样则可以使用
border:宽度 样式 颜色
边框+填充区+内容区 = 边框盒 border-box
4. 外边距 margin
边框到其他盒子的距离
margin-top、margin-left、margin-right、margin-bottom
速写属性margin
八.盒模型应用
1) 改变宽高范围
默认情况下,width 和 height 设置的是内容盒宽高。
页面重构师:将psd文件(设计稿)制作为静态页面
衡量设计稿尺寸的时候,往往使用的是边框盒,但设置width和height,则设置的是内容盒
- 精确计算(加减)
- CSS3:box-sizing,可以改变宽高的影响范围
content-box表示内容盒
box-sizing: border-box;
box-sizing:content-box;
第一个表示宽高表示边框盒;
第二个表示宽高表示内容盒。
2)改变背景覆盖范围
默认情况下,背景覆盖边框盒
可以通过background-clip进行修改
border-box背景覆盖边框盒;
content-box背景覆盖内容盒;
padding-box背景覆盖填充盒。
3)溢出处理
没有设置宽高的话,会默认的进行适应
overflow,控制内容溢出边框盒后的处理方式
1.visible:可见的
2.hidden:隐藏(溢出部分)
3.scroll:生成滚动条
4.auto:自动(需要时出现滚动条,不需要时消失)
4)断词规则(用的不多)
word-break,会影响文字在什么位置被截断换行
normal:普通。CJK字符(文字位置截断)(cjk表示中日韩),非CJK字符(单词位置截断)
break-all:截断所有。所有字符都在文字处截断
keep-all:保持所有。所有文字都在单词之间截断,连续中文则不会发生换行,否则出现空格。
5)空白处理
white-space: nowrap
空白字符的处理是不换行
white-space:pre,不会进行空白折叠
如果在一行溢出时需要加…则使用text-overflow:ellipsis(圆点的意思)
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
不换行,再隐藏,最后加点
九.行盒的盒模型
常见的行盒:包含具体内容的元素
span、strong、em、i、img、video、audio
显著特点
- 盒子沿着内容沿伸
- 行盒不能设置宽高
调整行盒的宽高,应该使用字体大小、行高、字体类型,间接调整。
行盒跟着内容走,行盒的宽高等于内容的宽高。
- 内边距(填充区)
水平方向有效,垂直方向仅会影响背景,不会实际占据空间。
- 边框
水平方向有效,垂直方向不会实际占据空间。
- 外边距(margin)
水平方向有效,垂直方向不会实际占据空间。
行块盒
display:inline-block 的盒子
- 不独占一行
- 盒模型中所有尺寸都有效(宽高等都变得有效)
空白折叠
空白折叠,发生在行盒(行块盒)内部 或 行盒(行块盒)之间
可替换元素 和 非可替换元素
大部分元素,页面上显示的结果,取决于元素内容,称为非可替换元素
少部分元素,页面上显示的结果,取决于元素属性,称为可替换元素
可替换元素:img、video、audio
绝大部分可替换元素均为行盒。
可替换元素类似于行块盒,盒模型中所有尺寸都有效。
object-fit:通常在图片中使用,表示图片的适应方式
取值有:contain(宽高比例不变,切保证图片不溢出)fill(填充满,为默认值)cover(将区域填充满,切比例不变,此时可能会损失图片的部分信息)
十. 常规流
盒模型:规定单个盒子的规则
视觉格式化模型(布局规则):页面中的多个盒子排列规则
视觉格式化模型,大体上将页面中盒子的排列分为三种方式:
- 常规流
- 浮动
- 定位
常规流布局
也称为常规流、文档流、普通文档流、常规文档流
块盒横向撑满包含块,纵向上有外边距的合并,行盒是上一个行盒的尾部接上下一个行盒的头
所有元素,默认情况下,都属于常规流布局
总体规则:块盒独占一行,行盒水平依次排列
包含块(containing block):每个盒子都有它的包含块,包含块决定了盒子的排列区域。
包含块类似于盒子的坐标系,盒子的位置取决于坐标系,决定盒子的活动范围
绝大部分情况下:盒子的包含块,为其父元素的内容盒
块盒
- 每个块盒的总宽度,必须刚好等于包含块的宽度(水平方向上)
宽度的默认值是auto
margin的取值也可以是auto,默认值0
auto:将剩余空间吸收掉
width吸收能力强于margin,都是auto的时候都给width
若宽度、边框、内边距、外边距计算后,仍然有剩余空间,该剩余空间被margin-right全部吸收
在常规流中,块盒在其包含块(活动范围,,即父元素的内容和)中居中,可以定宽(width)、然后左右margin设置为auto。
margin可以设置为负数
- 每个块盒垂直方向上的auto值
height:auto, 适应内容的高度
margin:auto, 表示0
- 百分比取值
padding、宽、margin可以取值为百分比
以上的所有百分比相对于包含块的宽度,都是相对于宽度,和高度没有任何关系
高度的百分比(比较特殊):
a. 判断包含块的高度是否取决于子元素的高度,如果是则设置子元素高度设置百分比无效,相当于没写,高度仍然是auto。
b. 包含块的高度(已经被设置)不取决于子元素的高度,百分比相对于父元素高度
- 上下外边距的合并
两个常规流块盒,上下外边距相邻,会进行合并。
合并之后两行中间的margin取两个外边距最大值。
父子元素margin相邻也要合并,必须紧紧相邻,只要中间有东西就不会合并。如果不想合并的话,可以在中间加上border,也可以把margin改为padding。
十一.浮动
视觉格式化模型,大体上将页面中盒子的排列分为三种方式:
- 常规流
- 浮动
- 定位
1)应用场景
- 文字环绕
- 横向排列
2)浮动的基本特点
修改float属性值为:
- left:左浮动,元素靠上靠左
- right:右浮动,元素靠上靠右
默认值为none(常规流)
- 当一个元素浮动后,元素必定为块盒(更改display属性为block)
- 浮动元素的包含块,和常规流一样,为父元素的内容盒
3)盒子尺寸
- 宽度为auto时,适应内容宽度,并没有要求撑满
- 高度为auto时,与常规流一致,适应内容的高度
- margin为auto,为0.
- 边框、内边距、百分比设置与常规流一样
4)盒子排列
- 左浮动的盒子靠上靠左排列
- 右浮动的盒子靠上靠右排列
- 浮动盒子在包含块中排列时,会避开常规流块盒
- 常规流块盒在排列时,无视浮动盒子,所以有可能被浮动盒子遮住
- 行盒在排列时,会避开浮动盒子
- 外边距合并不会发生
快速书写的方法div.item*10>{$}
如果文字没有在行盒中,浏览器会自动生成一个行盒包裹文字,该行盒叫做匿名行盒。
5)高度坍塌
高度坍塌的根源:常规流盒子的自动高度,在计算时,不会考虑浮动盒子,浮动脱离常规流
清除浮动,涉及css属性:clear
- 默认值:none
- left:清除左浮动,该元素必须出现在前面所有左浮动盒子的下方
- right:清除右浮动,该元素必须出现在前面所有右浮动盒子的下方
- both:清除左右浮动,该元素必须出现在前面所有浮动盒子的下方
十二.定位
视觉格式化模型,大体上将页面中盒子的排列分为三种方式:
- 常规流
- 浮动:float
- 定位:position
定位:手动控制元素在包含块中的精准位置
涉及的CSS属性:position
1)position属性
- 默认值:static,静态定位(不定位)
- relative:相对定位
- absolute:绝对定位
- fixed:固定定位
一个元素,只要position的取值不是static,认为该元素是一个定位元素。
定位元素会脱离文档流(即常规流)(相对定位除外)
一个脱离了文档流的元素:
- 文档流中的元素摆放时,会忽略脱离了文档流的元素
- 文档流中元素计算自动高度时,会忽略脱离了文档流的元素
a.相对定位(relative)
不会导致元素脱离文档流,只是让元素在原来位置上进行偏移。
可以通过四个CSS属性对设置其位置:
- left
- right
- top
- bottom
盒子的偏移不会对其他盒子造成任何影响。只是视觉效果上发生了偏差,实际盒子还在那里。
当出现矛盾时,同时出现上下以上为准,左右以左为准,但避免设置有矛盾的值。
b.绝对定位(absolute)
- 宽高为auto,适应内容
- 包含块变化:找祖先中第一个定位元素,该元素的填充盒为其包含块。若找不到,则它的包含块为整个网页(初始化包含块)
left表示这个绝对定位的元素,它的左边离包含块左边的距离。
使用举例:一张图片在另一张图片上方,使用绝对定位,精准定位图片位置,两个元素重叠。
有的相对定位元素的存在意义就是为了为绝对定位元素提供包含块
c.固定定位(fixed)
其他情况和绝对定位完全一样。
只有包含块(参照系)不同:固定为视口(浏览器的可视窗口,可以看到的区域),在滚动滚动条时定位元素位置不变。
2)绝对定位和固定定位中常见的做法
a.定位下的居中
相对定位不会脱离常规流,之前是浮动还是浮动,是常规流还是常规流,所以不需要考虑。
某个方向居中:
- 定宽(高)
- 将左右(上下)距离设置为0
- 将左右(上下)margin设置为auto
绝对定位和固定定位中,margin为auto时,会自动吸收剩余空间.
可以理解为左右都要挨着边框但是实现不了,所以只能靠margin来填充得以实现
b.多个定位元素重叠时
堆叠上下文
设置z-index(一条垂直穿过屏幕的线,电脑背后传过来,箭头指向用户),通常情况下,该值越大,越靠近用户,也就是值越大越靠前
只有定位元素设置z-index有效
z-index可以是负数,如果是负数,则遇到常规流、浮动元素,则会被其覆盖,默认情况下,会覆盖常规流和浮动元素
注:border-sizing为边框弧度,其值为50%时为圆
c.补充
- 绝对定位、固定定位元素一定是块盒
- 绝对定位、固定定位元素一定不是浮动,同时出现浮动元素会被强行改为none
- 没有外边距合并