CSS定义
1. 定义:层叠样式表(CSS),是一种样式表语言,用来描述HTML文档的呈现(美化内容)。
2. 书写位置:title 标签下方添加 style 双标签,style 标签里面书写 CSS 代码。
3. 地位:CSS是开放网络的核心语言之一,有W3C规范实现跨浏览器的标准化。
、
4. 引入方式
①内部样式表:学习使用
CSS代码写在 style 标签里面
②外部样式表:开发使用
CSS代码写在单独的CSS文件中(.css)
在HTML中使用 link 标签引入
<link rel="stylesheet" href="./my.css>
③行内样式:配合JavaScript使用
<div style="color:red;font-size:20px;">这是div标签</div>
选择器
1. 作用:查找标签,设置样式。
2. 基础选择器:标签选择器、类选择器、id 选择器、通配符选择器
(1)标签选择器:使用标签名作为选择器 → 选中同名标签设置相同样式。
① 标签选择器选择的是一类标签,而不是单独某一个
②标签选择器无论嵌套关系多深,都能找到对应的标签
(2)类选择器:使用类名作为选择器 → 找到页面中所有带有这个类名的标签,设置样式
① 所有标签上都有class属性,class属性的属性值称为类名
② 一个标签可以同时拥有多个类名,类名之间以空格隔开
③ 类名可以重复,一个类选择器可以同时选中多个标签
④ 命名格式:.类名{属性值}(类名前面加个点 . )
(3)id 选择器:使用id作为选择器 → 找到页面中带有这个id属性值的标签,设置样式
① 所有标签上都有id属性
② id属性值在一个页面是唯一的,不可重复的
③ 一个标签上只能有一个id值
④ 一个id选择器只能选中一个标签
⑤ 命名格式:#id{属性值}
(4)通配符选择器:找到页面中所有的标签,设置样式
① 开发中使用极少
② 命名格式:*{属性值}
字体和文本样式
1. 字体样式
(1)字体大小
① 属性名:font-size
② 取值:数字+px
③ 注意点:谷歌浏览器默认字体大小为16px;单位px需要设置,否则无效。
(2)字体粗细
① 属性名:font-weight
② 取值:
③ 注意:不是所有字体都提供了九种粗细,因此部分取值页面无法显示;实际开发中以正常、加粗两种取值使用居多
(3)字体样式(是否倾斜)
① 属性名:font-style
② 取值:normal(正常),italic(倾斜)
(4)字体类型
① 属性名:font-family
② 常见取值:具体字体1,具体字体2,具体字体3……字体系列
具体字体:“Microsoft YaHei”、微软雅黑、黑体、宋体、楷体等……
字体系列:sans-serif、serif、monospace等……
③ 渲染规则:从左往右按照顺序查找,如果电脑中未安装该字体,则显示下一个字体;如果都不支持,此时会根据操作系统,显示最后字体系列的默认字体
④ 注意:如果字体名称中存在多个单词,推荐使用引号包裹;最后一项字体系列不需要引号包裹;网页开发时,尽量使用系统常见自带字体,保证不同用户浏览网页都可以正确显示。
⑤ 常见字体系列
(5)样式的层叠问题
给同一个标签设置了相同的样式时,此时样式会层叠,写在最下面的样式会生效。
(6)字体font相关属性的连写
① 属性名:font(符合属性)
② 取值:font:style weight size family;(顺序不能乱,一般四个值都要写,如果想要省略,只能省略前两个,style和weight,后两个不可省略,size和family)
2. 字体样式
(1)文本缩进
① 属性名:text-indent
② 取值:数字+px (或者 数字+em,1em=当前标签的font-size的大小)
(2)文本水平对齐方式
① 属性名:text-align
② 取值:left(左对齐)、center(居中对齐)、right(右对齐)
③ 注意:如果需要让文本水平居中,text-align属性给文本所在标签(文本的父元素)设置
(3)文本修饰
① 属性名:text-decoration
② 取值:underline(下划线)、line-through(删除线)、overline(上划线)、none(无装饰线)
③ 注意:通常使用 text-decoration:none 消除a标签默认的下划线
(4)行高
① 属性名:line-height
② 作用:控制一行的上下行间距,行高=上间距+文本高度+下间距
③ 取值:数字=px(或者 倍数,当前标签font-size的倍数)
④ 应用:让单行文本垂直居中可以设置 line-height:文字父元素高度像素;网页精准布局时,会设置 line-height:1 可以取消上下间距
⑤ 行高与font连写的注意点:如果设置了行高和font连写,注意覆盖问题,font:style weight size\line-height family,顺序不能乱(注意:size和line-height中间的 / 是语法的一部分,不是或的意思)
(5)颜色常见取值
(6)标签水平居中
选择器进阶
1. 后代选择器:空格
(1)作用:根据HTML标签的嵌套关系,选择父元素后代中满足条件的元素
(2)选择器语法:选择器1 选择器2 { css }
(3)结果:在选择器1中所找到标签的所有后代中,找到满足选择器2的标签,设置样式
(4)注意:
① 后代包括:儿子、孙子、重孙子……
② 后代选择器中,选择器与选择器之前通过 空格 隔开
③ 不同标签中,各个标签之间的嵌套关系,决定各个标签之间的父子关系
小tips:内联元素可以嵌套内联元素,块级元素可以嵌套部分块级元素并也能嵌套内联元素,但内联元素不能嵌套块级元素。块级元素为block,内联元素为inline,拥有“inline”特性的同时又拥有“block”的特性称为replace元素。
2. 子代选择器:>
(1)作用:根据HTML标签的嵌套关系,选择父元素中子代中满足条件的元素
(2)选择器语法:选择器1 > 选择器2 > …… > 选择器n { css }
(3)结果:在选择器1中标签的儿子中,找到满足选择器2的标签,再随后在选择器2的标签中找到选择器3的标签,以此类推,直至找到选择器n的标签,然后设置样式
(4)注意:
① 子代只包括:儿子
② 子代选择器中,选择器与选择器之间通过 > 隔开
3. 并集选择器:,
(1)作用:同时选择多组标签,设置相同的样式
(2)选择器语法:选择器1,选择器2 …… 选择器n { css }
(3)找到 选择器1和选择器2 选中的标签,设置样式
(4)注意:
① 并集选择器中的每组选择器之间通过 , 分隔
② 并集选择器中的每组选择器可以是基础选择器或者复合选择器
③ 并集选择器中的每组选择器通常一行写一个,提高代码的可读性
4. 交集选择器:
(1)作用:将选中同时满足前后两个选择器定义的元素
(2)选择器语法:选择器1选择器2 { css }
(3)结果:找到页面中 既能被选择器1选中,又能被选择器2选中的标签,设置样式
(4)注意:
① 交集选择器中的选择器之间是紧挨着的,没有东西分隔
② 交集选择器中如果有标签选择器,标签选择器必须写在最前面
③ 交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为 class 选择器,两个选择器之间不能有空格。
5. hover伪类选择器
(1)作用:选中鼠标悬停在元素上的状态,设置样式
(2)选择器语法:选择器:hover{ css }
(3)注意:
① 伪类选择器选中的元素的某种状态
② 任何标签都可以添加伪类
6. Emmet语法
(1)作用:通过简写语法,快速生成代码
(2)语法
背景相关属性
1. 背景颜色
(1) 属性名:background-color(bgc)
(2) 属性值:关键字、rgb表示法、rgba表示法、十六进制(颜色取值)
(3)注意
① 背景颜色默认值是透明:rgba(0,0,0,0)、transpatent
② 背景颜色不会影响盒子大小,并且还能够看清盒子的大小和位置,一般在布局中会习惯先给盒子设置背景颜色
2. 背景图片
(1)属性名:background-image(bgi)
(2)属性值:background-image:url('图片的路径');
(3)注意
① 背景图片中url中可以省略引号
② 背景图片默认是在水平和垂直方向平铺的
③ 背景图片仅仅是指给盒子起到装饰效果,类似于背景颜色,是不能撑开盒子的
3. 背景平铺
(1)属性名:background-repeat(bgr)
(2)属性值:
tips:背景图比背景色优先一级
4. 背景位置
(1)属性名:background-position(bgp—)
(2)属性值:background-position:水平方向位置 垂直方向位置;
(3)注意
① 方向名词取值和坐标取值可以混使用,第一个取值表示水平,第二个取值表示垂直
5. 背景相关属性连写
(1)属性名:background(bg)
(2)属性值:单个属性值的合写,取值之间以空格隔开
(3)书写顺序:background:color image repeat position
(4)省略问题:
① 可以按要求省略
② 特殊情况:在pc端,如果盒子大小和背景图片大小一样,此时可以直接写 background:url()
(5)注意
如果需要设置单独的样式和连写,要么把单独的样式写在连写的下面,要么把单独的样式写在连写的里面
6. img标签和背景图片的区别
① 方法一:直接写上img标签即可
img标签是一个标签,不设置宽高,默认会以原尺寸显示
② 方法二:div标签+背景图片
需要设置div的标签,因为背景图片只是装饰的CSS样式,不能撑开div标签
元素显示模式
1. 块级元素
(1)显示特点
① 独占一行
② 宽度默认是父元素的宽度,高度默认由内容撑开
③ 可以设置宽高
(2)代表标签:div、p、h系列,ul、li、dl、dt、dd、form、header、nav、footer……
2. 行内元素
(1)显示特点
① 一行可以显示多个
② 宽度和高度默认由内容撑开
③ 不可以设置宽高
(2)代表标签:a、span、b、u、i、s、strong、ins、em、del……
3. 行内快元素
(1)显示特点
① 一行可以显示多个
② 可以设置宽高
(2)代表标签:input、textarea、 button、select……
特殊情况:img标签内由行内块元素特点,但是Chrome调试工具中显示结果是inline
4. 元素显示模式转换
(1)目的:改变元素默认的显示特点,让元素符合布局要求
(2)语法
5. HTML嵌套规范注意点
(1)块级元素一般作为大容器,可以嵌套:文本、块级元素、行内元素、行内块元素等等……
注:p 标签中不要嵌套 div、p、h 等块级元素
(2)a 标签内部可以嵌套任意元素
注:a标签不能嵌套a标签
CSS特性
1. 继承性
(1)特性:子元素有默认继承父元素样式的特点
(2)可继承的常见属性(文字控制属性都可以继承)
① color
② font-style,font-weight、font-size、font-family
③ text-indent、text-align
④ line-height
⑤ ……
注:可以通过调式工具判断样式是否可以继承
(3)继承失败的特殊情况
如果元素有浏览器默认样式,此时继承性依然存在,但是优先显示浏览器的默认样式
① a 标签的color会继承失效
② h 系列标签的font-size会继承失效
2. 层叠性
(1)特性
① 给同一个标签设置不同的样式,此时样式会层叠叠加,会共同作用在标签上
② 给同一个标签设置相同的样式,此时样式会层叠覆盖,最终写在最后的样式会生效
(2)注意点
当样式冲突时,只有当选择器优先级相同时,才能通过层叠性判断结果
3. 优先级
(1)特性:不同选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低的选择器样式
(2)优先级公式:继承 < 通配符选择器 < 标签选择器 < id选择器 < 行内样式< !important
(3)注意
① !important 写在属性值的后面,分号的前面!
② !important 不能提升继承的优先级
③ 实际开发中不建议使用 !importan
CSS盒子模型
1. 权重叠加计算
样式冲突的时候才需要进行权重叠加计算
2. 善于利用调试工具找错
3. 盒子模型
(1)概念
① 页面中的每一个标签,都可看作是一个“盒子”,通过盒子的视角更方便的进行布局
② 浏览器在渲染页面时,会将网页中的元素看作是一个个的矩形区域,我们也形象的称之为“盒子”
(2)组成
CSS中规定,每个盒子由以下区域组成:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)构成
注意:
① 内边距指的是盒子的内容区与盒子边框之间的距离,内边距影响盒子的可见框的大小,元素的背景会延伸到内边距,
② 边框指是紧密贴合在盒子内容周围的线或者边界,可以用来控制盒子的形状、样式和颜色。
③ 外边距是盒子边框与周围元素之间的空白区域,可以用来控制盒子与其他元素之间的距离。
(3)内容区域(content)
① 作用:利用width和height属性默认设置是盒子内容区域的大小
② 属性:width/height
③ 常见取值:数字+px
(4)边框(border)
① 属性名:border
② 属性值:粗细,线条样式,颜色
单个取值的连写,不分顺序,取值之间以空格隔开。如:border:10px solid red;
③ 单方向边框设置
场景:只给盒子的某个方向单独设置边框
属性名:border-方位名词
属性值:连写的取值
④ 边框单个属性设置
作用:给设置边框粗细、边框样式、边框颜色效果
单个属性设置:border-属性名
⑤ 边框样式:
dotted:定义一个点线边框
dashed:定义一个虚线边框
solid:定义一个实线边框
double:定义两个边框。两个边框的宽度和 border-width 的值相同
groove:定义3D沟槽边框。效果取决于边框的颜色值
ridge:定义3D脊边框。效果取决于边框的颜色值
outset:定义一个3D突出边框。效果取决于边框的颜色值
注意:除了前三个边框样式,其他边框样式在开发中并不常见。
(5)内边距(padding)
① padding属性可以当做复合属性使用,表示单独设置某个方向的捏编剧,其中复合属性的顺序
可以为:上内边距,右内边距、下内边距、左内边距。
如:padding:10px,20px,40px,80px;
也可以为:上内边距、左右内边距、下内边距
如:padding:10px,20px,40px;
也可以为:上下内边距、左右内边距
如:padding:10px,20px;
② 遇到盒子可能会被撑开的情况,可以使用padding代替width,这样子盒子就会自动扩张,高度保持不变
③ 內减模式:当元素设置内边距和边框后,盒子在网页中的尺寸不变,会自动进行计算,从宽高中减去。
操作方法:给盒子设置属性box-sizing:border-box;即可。(常常在公共CSS中有,只需要在所需盒子标签中调用该class属性即可使用。
(6)外边距(margin)
① margin属性也可以当做复合属性使用,使用原理同padding
② 版心居中:将网页的有效内容居中显示,可以通过外边距进行设置,可以通过auto设置
<style>
div {
width:1000px;
height:300px;
background-color:pink;
margin:0 auto;
}
</style>
(7)外边距折叠现象
① 合并现象
场景:垂直布局的块级元素,上下的margin会合并
结果:最终两者距离为margin的最大值
解决方法:只给其中一个盒子设置margin即可
场景:互相嵌套的块级元素,子元素的margin-top会作用 在父级元素上
结果:导致父级元素一起往下运动
解决方法:
a. 给父元素设置border-top 或者 padding-top(分隔父子元素的margin-top)
b. 给父元素设置overflow:hidden
c. 转换成行内块元素
d.设置浮动
(8)行内元素的垂直内外边距
(9)清除默认样式
① 场景:浏览器会默认给部分标签设置默认的margin和padding,但一般在项目开始前需要先清楚这些标签默认的margin和padding,后续自己设置
<stytle>
* {
margin:0px;
padding:0px;
}
</stytle>
CSS浮动
1. 结构伪类选择器
(1)作用:根据元素在HTML中的结构关系查找元素
(2)优势:减少对于HTML中类的依赖,有利于保持代码的整洁
(3)场景:常用于查找某父级选择器中的子元素
(4)常见的选择器
注意:
① n为:0、1、2、3、4、5、6、……
② 通过n可以组成常见公式
③ 公式只能以n为开头,如-n+5,n+5;不能以数字开头,如5+(-n)、5-n、5+n。
2. 伪元素
(1)作用:可以通过使用伪元素显示一般网页中的非主体内容
(2)元素与伪元素的区别
元素:HTML设置的标签
伪元素:由CSS模拟出的标签效果
(3)语法
如:.father::before{ CSS }表示在father类元素前面添加伪元素内容
(4)注意
① 必须设置content属性才能生效
② 伪元素默认是行内元素
3. 标准流
(1)定义:又称为文档流,是浏览器在渲染显示网页内容时默认采用的一套排版规则,规定了应该以何种方式排列元素
(2)常见规则
① 块级元素:从上往下,垂直布局,独占一行
② 行内元素 或 行内块元素:从左往右,水平布局,空间不够自动折行
4. 浮动
(1)作用:使元素脱离文档流,按照指定的方向发生移动,遇到父级的边界或者相邻的浮动元素就会停下来
(2)目的:为了达到自己的布局目的,让指定元素定位在指定位置,并且可以设置浮动后的行级元素的宽高,我们就需要用到浮动。
(3)特点
① 浮动元素会脱离标准流(简称:脱标)在标准流中不占位置
② 浮动元素比标准流高半个级别,可以覆盖标准流中的元素
③ 下一个浮动元素会在上一个浮动元素后面左右浮动
④ 浮动一行可以显示多个,并且可以设置宽高
注意
① 浏览器解析行内块或行内标签的时候,如果标签换行书写会产生一个空格的举例
② 浮动的元素不能通过text-align:center或者margin:0 auto去居中
5. 清除浮动
(1)含义:清除浮动带来的影响(影响:如果子元素浮动了,此时子元素不能撑开标准流的块级父元素
(2)原因:子元素浮动后脱标 → 不占位置
(3)目的:需要父元素有高度,从而不影响其他网页元素的布局
(4)消除浮动的方法
① 设置父元素高度
A. 操作:直接给父元素设置高度
B. 优点:简单、方便
C. 缺点:有些布局中不能固定父元素的高度。如:新闻列表、京东推荐模块
② 额外标签法
A. 操作:
a. 在父元素内容的最后添加一个块级元素
b. 给添加的块级元素设置clear:both
B. 缺点:
会破坏网页原有的结构
③ 单伪元素清除法
A. 操作(为了兼容性可以使用第二种写法)
B. 优点: 项目中使用,直接给标签加类即可清除浮动
④ 双伪元素清楚法
A. 操作
clearfix::before是为了解决外边距塌陷问题
B. 优点:项目中使用,直接给标签加类即可清除浮动
⑤ 给父元素设置overflow:hidden
A. 操作:直接 给父元素设置overflow:hidden
B. 优点:方便
CSS属性书写顺序
1. 浮动 / display
2. 盒子模型:margin border padding 宽度高度背景色
3. 文字样式
CSS定位装饰
1. 网页常见布局方式
(1)标准流
① 块级元素独占一行 → 垂直布局
② 行内元素/行内块元素一行显示多个 → 水平布局
(2)浮动
可以让原本垂直布局的块级元素变成水平布局
(3)定位
① 可以让元素自由的摆放在网页的任意位置
② 一般用于盒子之间的叠层情况
2. 定位的常见应用场景
① 可以解决盒子与盒子之间的层叠问题
② 可以让盒子始终固定在屏幕中的某个位置
3. 使用定位的步骤
(1)设置定位方式
① 属性名:position
② 常见属性值
(2)设定偏移值
① 偏移值设置分为两个方向,水平和垂直方向各选一个使用即可
② 选择的原则一般是就近原则(离哪边近用哪个)
常见CSS定位装饰种类
1. 相对定位
(1)介绍:相对于自己之前的位置进行定位移动
(2)代码 position:relative
(3)特点
① 需要配合方位属性实现移动
② 相对于自己原来位置进行移动
③ 在网页中占位置 → 没有脱标
④ 如果有冲突方位的代码,则以left或top为准
(4)应用场景
① 配合绝对定位组CP(子绝父相)
② 用于小范围的移动
2. 绝对定位
(1)介绍:相对于非静态定位的父元素进行定位移动
(2)代码 position:absolute
(3)特点
① 需要配合方位属性实现移动
② 默认相对于浏览器可视区域进行移动(父元素未定位)
③ 当父元素进行过非静态定位后,子元素就会相对于父元素可视区域进行移动,父元素是广义的父元素,包含爷爷等关系
④ 在网页中不占位置 → 已经脱标了
⑤ 若仅给标签绝对定位,但是没有赋予具体的值,则该标签会停留在原本的位置,但是该标签会被移除文档流,其他元素会继续以它原本的位置进行布局。
⑥ 绝对定位后的盒子具备行内块的特点:加宽度高度生效,若没用宽度没用内容则盒子内容为0
(4)应用场景
配合相对定位组CP(子绝父相)
3. 固定定位
(1)介绍:相对于浏览器进行定位
(2)代码:position:fixed;
(3)特点:
① 需要配合方位属性实现移动
② 相对于浏览器可视区域进行移动
③ 在网页中不占位置 → 已经脱标
4. 居中
(1)介绍:使用子绝父相,让子盒子在父盒子中水平居中(父盒子任意宽度都能实现)
(2)绝对定位居中的代码
方法①:通过使用top,right,margin-top,margin-right进行居中
方法②: 通过使用top,right,translate进行居中
关于transform:translate(-50%,-50%)的用法:这是一个位移的属性,translateX在x轴方向上进行移动,反之translateY则是在y轴方向,而translate括号里的两个参数是先x后y的。其中,translate里面可以给具体数值,也可以给百分比,给百分比的意思是相对于自身宽度长度进行移动,translate(50%,50%)表示将元素往x轴移动自身宽度一半的距离,后再往y轴移动自身高度一半的距离。该方法不会改变元素的文档流位置,而是在视觉上移动元素,所以其他元素的布局不会受到影响。
5. 元素层级问题
(1)不同布局方式元素的层级关系:标准流<浮动<定位
(2)不同定位之间的层级关系:
① 相对、绝对、固定默认层级相同
② 此时HTML中写在下面的元素层级更高,会覆盖上面的元素
(3)改变元素的层级关系,语法:z-index,z-index后面接一个数字,没用单位,表示元素所在的层级,层级越高,元素显示的优先级就越高
6.垂直对齐方式
(1)基线概念:浏览器文字类型元素排版中存在用于对齐的基线(baseline)
(2)属性名:vertical-align
(3)属性值:
7. 光标类型
(1)场景:设置鼠标光标在元素上时显示的样式
(2)属性名:cursor
(3)常见属性值
8. 边框圆角设置
(1)场景:让盒子四个角变得圆润,增加网页细节,提升用户体验
(2)属性名:border-radius
(3)常见取值:数字+px、百分比
(4)赋值规则:从左上角开始赋值,然后顺时针赋值,没有赋值的看对角;
9. overflow溢出部分显示效果
(1)溢出部分:指的是盒子内容部分所超出盒子范围的区域
(2)场景:控制内容溢出部分的显示效果,如:显示、隐藏囊、滚动条……
(3)属性名:overflow
(4)常见属性值
使用这个属性隐藏元素,元素依旧占位,如果想要元素不占位隐藏,则使用display:none语法
10. 元素整体透明度
(1)场景:让某元素整体(包括内容)一起变透明
(2)属性名:opacity
(3)属性值:0~1之间的数字,1表示完全不透明,0表示完全透明
(4)注意点
① opacity会让元素整体变透明,包括里面的内容,如:文字、背景颜色等
其他知识
其他知识
1. 精灵图
(1)场景:项目中将多张小图片,合并成一张大图片,这张大图片称之为精灵图
(2)优点:减少服务器发送次数,减轻服务器的压力,提高网页加载速度
(3)步骤
① 创建一个盒子,设置盒子的尺寸和小图尺寸相同
② 将精灵图设置为盒子的背景图片
③ 修改背景图位置:通过PxCook测量小图片左上角坐标,分别取负值设置给盒子的background-position:xy
(4)注意
① 精灵图一般用行内标签
2. 背景图片大小
(1)作用:设置背景图片的大小
(2)background-size:宽度 高度;
(3)取值
(4)background连写拓展
background: color image repeat position/size;
3. 盒子阴影
(1)阴影:给盒子添加阴影效果,吸引用户注意,体现页面的制作细节
(2)属性名:box-shadow
(3)取值(除了inset,其余取值均为数字+px)
可以连写
box-shadow:h-shadow v-shadow blur spread color insert
4. 过渡
(1)作用:让元素的样式慢慢的变化,常配合hover使用,增强网页交互体验
(2)属性名:transition
(3)常见取值
(4)注意
① 过度需要:默认状态和hover状态样式不同,才能有过渡效果
② transition属性给需要过渡的元素本身加
③ transition属性设置在不同状态中,效果不同的
给默认状态设置,鼠标移入移出都有过渡效果
给hover状态设置,鼠标移入有过渡效果,移出没有过渡效果
5. HTML骨架标签
(1)DOCTYPE文档说明
<!DOCTYPE html>文档类型说明 ,告诉浏览器该网页的HTML版本
(2)网页语言
① <html lang="en">标识网页使用的语言
② 作用:搜索引擎归类+浏览器翻译
③ 常见语言:zh-CN简体中文、en英文