CSS常用样式 — font-weight
- 粗细 — font-weight
- 作用:设置文字是否加粗显示
- 属性名:font-weight,属于font属性的一个单一属性
- 属性值有两种方式:单词类型、数字类型
- 单词类型
属性值 | 说明 |
---|---|
normal | 默认值,定义标准字体 |
bold | 定义粗体字符,b、strong标签的默认值 |
bolder | 定义更粗的字体 |
lighter | 定义更细的字体 |
p {
font-weight: bold
}
- 数字类型
- 100-900之间的整百数字
- 数字越大,文字显示越粗
- 其中400等价于normal,700等价于bold
p {
font-weight: 700
}
CSS常用样式 — font-style
- 字体风格 — font-style
- 作用:设置文字是否斜体显示
- 属性名:font-style,属于font属性的一个单一属性
- 属性值:单词
属性值 | 说明 |
---|---|
normal | 设置正规的字体,大多数标签的默认值 |
italic | 设置斜体的文字,主要针对英文,要求英文以字体中的斜体样式显示 |
oblique | 设置倾斜的文字,只是将文字倾斜显示,与字体无关 |
p {
font-style:oblique
}
CSS常用样式 — line-height
- 行高 — line-height
- 作用:设置的是一行文字实际占有的高度,文字字号在行高中是垂直居中的
- 属性名:line-height,属于font属性的一个单一属性
属性值 | 说明 |
---|---|
px像素值 | 设置的行高的具体像素值 |
百分比数值 | 设置的本身字号像素值的百分比 |
p {
/* line-height: 34px */
line-height: 14%
}
实际应用中,行高的数值通过设计图获取,量取数值时需要使用一些辅助软件工具
CSS常用样式 — font综合属性
字体、字号、行高、加粗、斜体都是font综合属性的单一属性
font属性五个单一属性的值可以进行合写,属性值可以有2到多个,值之间用空格进行分隔
- 写法一:font进行综合书写时,必须有字号和字体参与,而且必须字号在前,字体在后,不能颠倒顺序
p {
font: 14px "宋体"
}
- 写法二:font属性经常对字体、字号、行高进行合写,书写顺序必须是字号、行高、字体,字号和行高之间必须用/进行分隔
p {
font: 14px/28px "宋体"
}
- 写法三:如果font属性设置加粗和斜体,两个属性值只能那个写在最前面,两个值之间可以互换位置。后面的字号、行高、字体不能更改位置
p {
/* font: bold italic 14px "宋体" */
font: italic bold 14px "宋体"
}
CSS常用样式 — text-align
严格来说,行高属于文本类样式,但因为可以与font合写,所以暂时归类在字体
- 水平对齐 — text-align
- 作用:设置文本水平方向的对齐
- 在盒子中,不论文本是单行还是多行,都会对应方向对齐
- 属性值:三个方向的单词
属性值 | 作用 |
---|---|
left | 居左对齐,大部分标签的默认值 |
center | 居中对齐 |
right | 居右对齐 |
p {
/* text-align: left */
/* text-align: center */
text-align: right
}
CSS常用样式 — text-decoration
- 文本修饰 — text-decoration
- 作用:设置文本整体是否有线条的修饰效果
属性值 | 作用 |
---|---|
none | 没有修饰,大部分标签的默认值 |
overline | 上划线 |
line-through | 中划线,删除线,<del>标签的默认值 |
underline | 下划线,<a>标签的默认值 |
p {
/* text-decoration: none */
/* text-decoration: overline */
/* text-decoration: line-through */
text-decoration: underline
}
CSS常用样式 — text-indent
- 文本缩进 — text-indent
- 作用:设置段落首行是否进行缩进
属性值 | 说明 |
---|---|
px单位 | 表示首行缩进多少像素 |
em单位 | 首行缩进几个中文字符的位置 |
百分比 | 表示缩进文字所在标签的父级标签的width属性的百分比 |
p {
/* text-indent: 10px */
/* text-indent: 20em */
text-indent: 40%
}
实际工作中,最常使用em为单位的属性值。
属性值区分正负,正数表示向右缩进,负数表示向左缩进。
盒模型概述
盒模型又叫框模型,包含了五个用来描述盒子位置、尺寸的属性,分别是宽度width、高度height、内边距padding、表框border、外边距margin。
- 常见盒模型区域
- 盒模型的属性中,根据不同属性的效果,可以划分区域
- 书写元素内容的区域:width + height
- 盒子可以实体化的区域:width + height + padding + border
- 盒子实际占位的位置:width + height + padding + border + margin
- 盒模型的属性中,根据不同属性的效果,可以划分区域
盒模型 — width
作用:设置可以添加元素内容的区域的宽度
属性值:
属性值 | 说明 |
---|---|
auto | 默认值,浏览器可计算出实际的宽度 |
px | 像素值定义的宽度 |
% | 定义参考父元素宽度width的百分比宽度 |
p {
/* width: auto */
/* width: 100px */
width: 100%
}
- 特殊应用
- 如果一个元素不添加width属性,默认属性值为auto,不同的元素浏览器会根据其特点自动计算出实际宽度,例如<div>元素等独占一行的,其width属性的值会自动盛满父元素的width区域,如果是<span>元素等不需要独占一行的,其width属性的值是内部元素内容自动撑开的宽度
- <body>元素比较特殊,不需要设置width属性,宽度会自动适应浏览器窗口的宽度
盒模型 — height
作用:设置可以添加元素内容的区域的高度
属性值:
属性值 | 说明 |
---|---|
auto | 默认值,浏览器可计算出实际的高度 |
px | 像素值定义的高度 |
% | 定义参考父元素宽度width的百分比高度 |
p {
/* height: auto */
/* height: 100px */
height: 100%
}
- 特殊应用
- 如果一个元素不添加height属性,默认属性值为auto,浏览器会自动计算出实际高度,也就是内部元素内容自动撑开的高度。元素的高度自适应内部的高度
盒模型 — padding
- 作用:设置的是元素的边框内部到宽高区域之间的距离
- 特点:可以去加载背景,不能书写嵌套的内容
- 属性值:常用px为单位的数值
- padding是一个复合属性,可以根据内边距的方向不同划分为四个方向的单一属性
p{
/* padding: 40px 四个方向为40px */
/* padding: 40px 30px 上下为40px 左右为30px */
/* padding: 40px 30px 20px 上为40px,左右为30px,下为20px */
/* padding: 40px 30px 20px 10px 上为40px,右为30px,下为20px,上为10px */
pading-top: 10px;
pading-right: 10px;
pading-bottom: 10px;
pading-left: 10px;
}
盒模型 — border
作用:设置的是内边距外面的边界区域,作为盒子的实体化的最外层
属性值;由三个值组成,分为显得宽度、线的形状、线的颜色
border属性是一个复合属性,根据划分依据不同可以有多种单一属性的划分方式
p {
border: 1px solid red
}
- border-width
- 作用:设置边框线的宽度
- 属性值:常用px形式的数值,四个方向都有边框,属性值类似于padding,也有四种值的写法
p {
/* border-width: 1px; 上下左右为1px */
/* border-width: 1px 2px; 上下为1px,左右为2px */
/* border-width: 1px 2px 3px; 上为1px,左右为2px,下为3px */
border-width: 1px 2px 3px 4px; 上为1px,右为2px,下为3px,左为4px
}
- border-style
- 作用:设置边框线条形状
- 属性值:形状的单词,总体也是类似padding的综合属性写法
- 属性值的单词可能性
属性值 | 说明 |
---|---|
none | 定义无边框 |
solid | 定义实线 |
dashed | 定义虚线。在大多数浏览器中呈现为实线 |
p{
/* border-style: none */
/* border-style: solid */
border-style: dashed
}
- 根据边框的方向划分
- border-top
- border-right
- border-bottom
- border-left
- 每一个单一属性都必须与复合属性border一致,设置三个属性值
p {
border-top: 1px solid red
border-right: 1px solid green
border-bottom: 1px solid blue
border-left: 1px solid yellow
}
- 根据方向和类型,进一步细分
- 类似border-top的单一方向属性,也可以根据属性值类型继续进行单一属性划分
- 单一属性写法:border-方向-类型
- 注意:细分时必须先写方向划分在写类型划分,否则属性名错误
p {
border-top-color: red
}
盒模型 — margin
作用:设置的是盒子与盒子之间的距离
特点:不能渲染背景
属性值:常用px为单位的数值
外边距的设置方式与内边距padding一模一样
- 单一属性
- margin-top: 20px
- margin-right: 20px
- margin-left: 20px
- margin-bottom: 20px
- 复合属性的四种写法
- margin: 10px 20px 30px 40px
- margin: 10px 20px 30px
- margin: 10px 20px
- margin: 10px
盒模型扩展 — 清除默认样式
- 大部分标签都有一个浏览器加载的默认样式,会对布局造成一些影响。为了避免默认样式对整体布局效果造成影响,一定要清除默认样式
- 盒模型属性中内外边距:大部分容器级标签都有默认边距,要么用标签选择器的并集方式,要么通配符清除
- <ul>和<ol>两种列表有默认的列表前缀:清除list-style属性
- <a>标签的默认样式,顺带设置页面中常用的a的公共样式:设置color和text-decoration
- 清除默认加粗效果:设置font-weight
- 还可以给<body>标签设置整体文字样式,让大部分后代标签全部去继承
/* 1 */
body,div,p,ul,ol,li,dl,dt,dd,td,th,a,h1,h2,h3,h4,h5,h6 {
margin: 0px;
padding: 0px;
}
* {
margin: 0px;
padding: 0px;
}
/* 2 */
ul,ol,li {
list-style: none;
}
/* 3 */
a {
color: black;
text-decoration: none;
}
/* 4 */
h1,h2,h3,h4,h5,h6,b,strong {
font-weight: normal
}
/* 5 */
body {
color: #666;
font-size: 14px;
font-family: "宋体"
}
盒模型扩展 — height应用
- 根据不同的需求,高度属性可以设置也可以不设置
- 如果设置了高度:盒子占有的高度位置就确定死了,后面的同级元素会紧挨着加载
- 如果不设置高度:会根据标签内部内容自动撑开
- 以<div>为例,根据情况不同选择是否设置高度
- 必须设置高度
- 设计图中盒子高度占位是固定的,后面同级元素在高度下面加载
- 自身盒子内部内容过多会溢出盒子区域
div { height: 200px; }
- overflow属性
- 设置了高度的盒子,如果内部元素的加载高度超过了父级,会出现溢出效果。可以通过一个溢出的属性overflow,进行溢出部分内容的显示效果设置
属性值 | 说明 |
---|---|
visible | 默认值,可见的可视的,溢出部分显示的 |
hidden | 溢出部分直接隐藏,隐藏超过边框范围的内容 |
scroll | 溢出的部分出现滚动条,可以拖动滚动条看到隐藏部分,多出盒子高度的部分不显示,不论有没有溢出,水平和垂直方向都会出现滚动条 |
auto | 自动的,如果没有溢出就正常显示,如果有溢出,溢出的方向自动出现滚动条 |
div {
height: 200px
/* overflow: visible */
/* overflow: hidden */
/* overflow: scroll */
overflow: auto
}
- 必须不设置高度
- 要求盒子高度必须自适应内部内容的高度
- 或者设置height的属性值是自动的
盒模型扩展 — 居中
文本水平居中
- 水平居中:text-align属性
- 不论单行或多行都可以设置
p {
text-align: center;
}
文本垂直居中
- 单行文本垂直居中:让文字行高line-height等于盒子高度height
p {
height: 20px;
line-height: 20px;
}
- 多行文本垂直居中:让元素高度自适应或者正好等于多行文字的高度,设置元素内边距上下值相同
p {
padding: 20px;
}
元素垂直居中
一个元素内部嵌套的子元素,在父元素中居中
- 垂直居中:与多行文字类似,让父元素高度自适应,子元素高度自动撑开父级的高度,再给父元素设置相同的上下边距。
p {
margin: 20px 0px;
}
元素水平居中
针对类似<div>样式上必须独占一行的盒子,如果子盒子宽度低于父盒子宽度,可以设置盒子的margin值,水平方向的值都设置为auto
div {
margin {
0 auto
}
}
原因:auto只在水平方向有作用,水平方向的marign如果设置为auto,边距会自动无限增大,直到撑满整个父元素除了子元素宽度之外剩余的区域,如果两个水平方向都是auto,两边都要无限大,只能达到一个平衡,两边距离相同,导致盒子居中
盒模型扩展 — 父子盒模型
- 一般情况下,一个父元素的内部可以放一个或多个子元素,而且多个子元素要排成一行显示,必须保证父元素的宽度一定要足够(不考虑溢出的情况)需要遵循一个设置尺寸的规律:所有子元素的宽度加在一起不能大于父元素的宽度width。
- 父元素的width >= 所有子元素width + padding + border + margin
- 如果不满足条件:要么多余的子元素掉下来不能在一排,要么溢出父元素>
特殊情况:盒模型自动内减
- 父子盒模型中,只有一个子元素,且子元素是类似<div>标签必须独占一行。
- 不设置子元素的width属性,子元素的width属性值会自动加载父级元素的width
- 如果同时设置了子元素水平方向的padding和border、margin,不需要手动去进行内减,子元素的width会自动收缩尺寸
- 子元素所有的水平方向的位置上所有属性的加和等于父元素的width
盒模型扩展 — margin塌陷现象
margin塌陷现象,在垂直方向如果有两个元素的外边距有相遇的,浏览器中加载的真正的外边距不是两个间距的加和,而是两个边距中值较大的,边距值小的塌陷到了边距值大的值内部
同级元素塌陷
上面的元素有下边距,下面的元素有上边距,两个边距相遇,真正的盒子间距离是较大的那个值
父子元素塌陷
- 父子元素之间也会出现margin塌陷,父元素和子元素都设置了同方向的margin-top值,两个属性之间没有其他的内容进行隔离,导致两个属性相遇,发生margin塌陷
- 本身父元素与上一个元素的距离是0,子元素如果设置了垂直方向的上边距,会带着父级一起掉下来
解决margin塌陷问题的方法
- 同级元素
- 如果两个元素垂直方向又兼具,只需要设置给一个元素,不要进行拆分
- 父子元素
- 让两个边距不要相遇,中间可以使用父元素border或padding将边距分隔开;更加常见的方法,父子盒模型之间的距离就不要用儿子的margin去踹出来,而是父级的padding挤出来
标准文档流
- 标准文档流,指的是元素排版布局过程中,元素会默认自动从左往右,从上往下的流式排版方式。前面内容发生了变化,后面的内容也会随着发生变化
- HTML就是一种标准文档流文件
- HTML中的标准文档流特点通过两种方式体现:微观现象和元素等级
微观现象
- 空白折叠现象
- 文字类的元素如果排在一行会出现一种高低不齐、底边对齐的效果
- 自动换行,元素内一行内容写满元素的width时会出现自动进行换行
元素等级
- 在标准流中,大部分元素是区分等级的,习惯将元素划分为几种常见的加载级别:块级元素、行内元素、行内块元素。
- 块级元素
- 大部分容器级标签包括p标签都是块级元素,不如<div>、<h1>等
- 块级元素可以设置宽高,在浏览器中正常加载
- 块级元素必须独占一行,不能与其他任何标签并排一行
- 块级元素如果不设置宽度,会自动撑满父级的width区域;高度不设置,会被内容自动撑开高度
- 行内元素
- 大部分的文本级标签,比如<span>、<a>、<b>等
- 行内元素不能正常加载宽度和高度属性,其他的盒模型属性虽然能设置,但是容易出现加载问题
- 行内元素可以与其他行内或行内块元素并一排显示
- 行内元素不论是否设置宽高,宽度和高度都只能被内容自动撑开
- 行内块元素
- 比如<img>、<input>等
- 行内块元素可以设置宽度和高度
- 行内块元素可以与其他的行内或行内块并排一行显示
- 行内块元素不可以设置宽高,要么以原始尺寸加载要么被内容自动撑开
- 行内块依据具有标准流的微观性质,例如空白折叠现象
显示模式 — display
标准文档流中的元素有自己默认的浏览器家在模式,但是加载模式不是一成不变的,后期可以通过display属性更改一个标签的显示模式
- 属性值:元素根据属性值不同,可以加载对应元素等级的显示模式的特点
属性值 | 作用 |
---|---|
block | 表示元素要以块级元素模式加载,具备块级特点 |
inline | 表示元素要以行内元素模式加载,具备行内特点 |
inline-block | 表示元素要以行内块元素模式加载,具备行内块特点 |
none | 表示元素及内部内容直接隐藏,让出原有标准流的位置 |
- 脱离文档流
- display属性更改的显示模式并没有改变标准流本质性质,页面还是只能从上往下加载,存在空白折叠现象等微观性质。要想实现更多的洁面布局效果需要脱离标准流的限制
- 脱离标准流的方式
- 浮动、绝对定位、相对定位
浮动定义
- 浮动是一种非常重要的布局属性
- 属性名:float,浮动、漂流的意思
- 属性值
- left — 左浮动
- right — 右浮动
- 作用:让元素脱离标准文档流,同一级的浮动的元素可以并排在一排显示
p {
/* float: left */
float: right
}
浮动的性质
- 浮动的元素脱离标准流
- 标准文档流特点:区分行快
- 块级元素:可以设置宽高,必须独占一行
- 行内元素:不能设置宽高,可以并排一行
- 浮动的元素脱离了标准流的限制,具备行块二象性,浮动的元素可以设置宽高,还可以并排一行,而且不会有空白折叠现象,如果元素不设置宽高,可以被元素内容自动撑开
- 标准文档流特点:区分行快
浮动性质 — 依次贴边
- 浮动属性值:left、right
- 浮动方向设置不同,进行布局时,加载位置方向不同
- 以left为例:
- 父元素宽度足够,所有子元素会按照HTML书写顺序,依次向左进行贴边
- 父元素左边 <-- 子元素1 <-- 子元素2 <-- 子元素3 <-- 子元素4
- 父元素宽度不够,例如不能放下一个子元素4,那么子元素4再贴边时,会跳过上一个子元素3,向更上一个子元素2进行贴边,如果子元素2后面位置不够,继续跳过子元素2向前面的子元素1进行贴边
- 如果子元素在跳过子元素3向更前面的子元素2贴边时,子元素2的高度不高于子元素3,子元素2没有延伸出一个高度的边让子元素4贴边,那么子元素4就会跳过子元素2向子元素1进行贴边
- 如果贴边的这个子元素4宽度小于子元素2,子元素2的高度低于子元素1和3,形成一个凹陷,子元素4会受前面子元素3高度影响,不会出现钻空现象
- 如果子元素1后面的距离也放不下子元素4,子元素4最终会铁道父元素左边,如果子元素4的宽度超过了父元素,只会出现溢出现象
- 右浮动与左浮动贴边效果是一致的,知识贴边方向不同。按照HTML书写顺序一次向右向上一个元素贴边,第一个元素贴父元素的右边
- 父元素宽度足够,所有子元素会按照HTML书写顺序,依次向左进行贴边
浮动性质 — 依次贴边应用
- 利用浮动的贴边应用性质,可以完成多种网页布局效果
- 平均分布的表格
- 导航栏效果
- 常见的电商或企业网站布局
浮动性质 — 没有margin塌陷、字围现象
没有margin塌陷
- margin塌陷现象出现在标准流中的,浮动元素已经脱离标准流,不在具有margin塌陷现象
- 元素浮动之后,脱离了当前文档流,会将原来占有的标准流位置让给后面的一个同级元素
- 由于浏览器中有兼容问题,不会使用这种属性制作压盖效果,真正的压盖效果试用后期学习的定位制作
- 如果没有特殊需求,不允许一个父元素中的子元素有的浮动有的不浮动,同级元素中有一个浮动其他的也要浮动
字围现象
- 与前面压盖效果结构类似,同级元素中前面的元素浮动,后面的元素不浮动,不浮动的元素内部还有一些文字,浮动的盒子1会压盖住盒子2的一部分,但是盒子2上的文字内容不会被覆盖,他会让开盒子1的位置,围绕他进行加载
- 可以利用字围现象制作一些特殊的图文混排布局效果
浮动存在的问题
- 标准流中的元素,不设置高度的情况下,都能被内部的标准流元素自动撑高。如果内部的子元素进行了浮动,浮动的子元素是撑不高标准流父亲的
- 父元素没有高度,会影响后面元素的标准流位置,如果浮动的子元素足够高时,有可能影响到后面浮动元素的贴边
清除浮动一
- 给标准流的父元素强制给一个合适的高度
- 解决:父元素有了高度,前面的浮动不能影响后面元素的标准流位置和贴边
- 问题:父元素高度不是自适应,一旦子元素高度变化,问题可能再次出现
- clear属性
- clear,清除
- 作用:清除标签元素自身受到前面的浮动元素的影响
- 属性值
- left — 清除前面左浮动带来的影响
- right — 清除前面右浮动带来的影响
- both — 清除前面所有浮动带来的影响
- 给彼岸准刘父元素添加clear属性,氟元素不收前面浮动影响,不会再占有浮动让出的位置
- 解决:浮动元素影响后面元素标准流位置和贴边
- 问题:父元素不能高度自适应,两个父元素之间如果有margin效果不正确
- 隔墙法
- 外墙法:在两个大的父盒子之间,添加一个空的div标签,标签上带有clear:both属性
- 解决:浮动影响后面元素标准流位置和贴边,模拟父元素间的距离
- 问题:父元素没有高度自适应
- 内墙法:在父元素内部,所有浮动子元素后面添加一个空的div标签,标签高度为0,添加clear属性
- 解决:父元素高度自适应,浮动影响后面的元素的位置和贴边
- 缺点:浮动是CSS样式属性带来的问题,内墙法使用HTML结构去辅助解决问题,如果页面中浮动元素很多,需要添加多个没有语义的空标签,造成HTML结构的冗余
- 外墙法:在两个大的父盒子之间,添加一个空的div标签,标签上带有clear:both属性
清除浮动二
- 伪类
- 本质是使用味蕾方法利用CSS代码书写一堵内墙
- 伪类选择器:通过选中的标签添加伪类,去选中标签的某个状态或位置
- :after:这个伪类表示选中的是某个标签内部的最后的位置
- 书写方法:前面必须加普通的选择器,后面连续书写伪类名称
- 将伪类添加给一个选中父盒子的选择器后面,一般给需要清除浮动的父盒子设置一个clearfix的类名
.clearfix:after {
content: "1"; /* 添加一个文字内容 */
display: block; /* 将文字转为块级元素 */
height: 0; /* 将盒子高度固定为0,避免影响父盒子高度 */
clear: both; /* 清除前面浮动影响 */
visibility: hidden; /* 将创建的元素占位置隐藏 */
}
- 溢出隐藏
- 小偏方:给内部有浮动的子元素的父元素添加溢出隐藏 overflow: fidden;属性,可以解决浮动的所有问题
- 元素高度设置后,overflow: hidden;效果是将超过高度的部分直接隐藏。
- 元素高度没有设置时,如果元素同时设置了overflow: hidden属性,元素会自适应内容的高度
- 高度自适应原因:一个元素没有设置高度,同时设置了溢出隐藏,浏览器在加载盒子尺寸时,遇到了溢出隐藏浏览器会强制性去检索内部的子元素的高度,不论子元素是标准流还是浮动,都会将最高的高度作为父盒子高度加载
- 浮动影响后面的元素:父元素有了高度后,可以管理住内部所有的浮动元素,不会延伸到后面标签中影响贴边
总结
- 如果父元素高度是固定的,建议使用height属性解决
- 如果父元素高度需要自适应,建议使用overflow属性解决浮动问题
a标签的伪类
- 概念
- 伪类和类之间有一定的相似之处,也存在明显的区别
- 普通的类:必须给标签设置对应的class属性值,才能选中标签,而且类选择器后面添加的属性,会立即加载到浏览器之上
- 伪类:不需要给标签添加任何属性,伪类名都是语法提前规定好的,书写时伪类必须搭配其他选择其适用,伪类选择器后面添加的样式不一定立即加载到浏览器之上,只有用户触发了对应的行为,伪类的样式才会立即加载
- 伪类选择器的权重与普通的类选择器相同
- 伪类选择器的写法:前面是普通的选择器,后面紧跟:伪类名
- 伪类和类之间有一定的相似之处,也存在明显的区别
- a标签可以根据用户行为不同,划分四种状态,通过a标签的伪类可以将四种状态选中设置为不同的样式效果,用户触发对应行为,就可以加载对应的样式
a:link {
color: gray /* 访问前状态 */
}
a:visited {
color: cyan /* 访问后状态 */
}
a:hover {
color: red /* 鼠标悬浮状态 */
}
a:active {
color: yellow /* 鼠标点击状态 */
}
- a标签的伪类书写顺序
- a标签上可能会同时触发2~3个状态,每个状态的属性都会进行加载,相同属性之间会发生层叠
- 伪类的权重是相同的,只能根据书写顺序,后写的层叠先写的,所以伪类书写顺序非常重要
- 要想让每个伪类的状态正常加载,书写顺序必须是:link — visited — hover — active
- a标签的伪类实际应用
- 一般会将访问前和访问后状态设置为一样的效果,保证页面的统一性,可以选择性的设置鼠标移上和鼠标点击状态
a:link,a:visited { color: #666; } a:hover { color: #f00; }
- 更加常用的一种设置方式如下:
- a标签任何普通的选择器,可以同时选中四种状态,可以将四种状态设置为相同的样式,属性可以设置所有的a默认显示的属性,包括盒模型、文字等。
- a:hover伪类选择器:设置鼠标移上时不一样的样式属性
a {
width: 150px;
height: 150px;
background-color: red;
}
a:hover {
background-color: yellow;
}
CSS常用样式 — 背景属性一
- 属性名:background-color
- 作用:在盒子区域添加背景颜色的修饰
- 加载区域:在border及以内加载背景颜色
- 属性值:颜色名、颜色值
p {
background-color: red;
}
- 属性名:background-image
- 作用:给盒子添加图片的背景修饰
- 加载范围:默认的加载到边框及以内部分。后期如果图片不重复加载,加载从border以内开始
- 属性值:url(图片路径)
- url:uniform resource locator,统一资源定位符,小括号内部书写查找图片的路径
p {
background-image: url(xl.jpg);
}
- 属性名:background-repeat
- 作用:设置添加的背景图是否要在盒子中重复进行加载
- 根据属性值不同,有四种重复加载方式
属性值 | 作用 |
---|---|
repeat | 重复,默认属性值,表示会使用背景图片重复加载填满整个盒子背景区域 |
no-repeat | 不重复,不论背景图是否大于盒子范围,都只加载一次图片 |
repeat--x | 水平重复,使用背景图片水平重复加载铺满第一行,垂直方向不重复 |
repeat--y | 垂直重复,使用背景图片垂直重复加载铺满第一列,水平方向不重复 |
p {
/* background-repeat: repeat; */
/* background-repeat: no-repeat; */
/* background-repeat: repeat-x; */
background-repeat: repeat-y;
}
CSS常用样式 — 背景属性二
- 属性名:background-position
- 作用:主要用于设置不重复的图片在背景区域的加载开始位置
- 属性值:三种写法,单词表示法、像素表示法、百分比表示法。不论哪种写法,属性值都有两个,值之间用空格间隔。
- 第一个值:表示背景图片在水平方向的位置
- 第二个值:表示背景图片在垂直方向的位置
- 单词表示法
- 属性值都是使用代表方向的单词进行书写
- 水平方向可选单词:left、center、right
- 垂直方向可选单词:top、center、bottom
- 单词表示图片与合资北京区域进行对应方向的对齐
p {
background-position: left top;
}
- 像素表示法
- 使用像素值作为背景定位的属性值
- 第一个属性值:像素是几,表示背景图片左上角针对border以内的左上顶点水平方向位移的距离
- 第二个属性值:像素是几,表示背景图片左上角针对border以内的坐上定点垂直方向位移的距离
- 注意点
- 像素值区分正负,正负代表位移方向不同
- 正:针对盒子的原点向右下移动
- 负:针对盒子的原点向左上移动
- 可以利用属性值为负数制作在小盒子中显示大的背景图的一部分
- 制作方法需要根据使用FW软件量取尺寸,读取数据
- 使用像素值作为背景定位的属性值
p {
background-position: 100 400;
}
- 百分比表示法
- 百分比表示法适用百分比数字作为属性值
- 100%代表的数值:
- 水平方向,等价于盒子的border以内的背景区域宽度减去图片宽度
- 垂直方向,等价于盒子的border以内的背景区域高度减去图片高度
- 100%代表的数值:
- 百分比表示法适用百分比数字作为属性值
CSS常用样式 — 背景属性三
- 属性名:background-attachment
- 作用:设置的是背景图片是否要随着页面或者盒子的滚动而滚动
属性值 | 说明 |
---|---|
scroll | 滚动的,表示背景图片与盒子保持相对位置不变,随着页面的滚动而滚走 |
fixed | 固定的,背景图的定位参考点从盒子border以内的左上顶点变为了浏览器窗口的左上顶点,页面滚动时,浏览器窗口的左上顶点是不变的,导致背景图固定在浏览器窗口的某个位置,不会随着页面滚动而滚走 |
p {
background-attachment: fixed;
}
CSS常用样式 — 背景属性四
- background属性可以将五个单一属性的值进行合写
- 属性值:可以有1-5个属性值,值之间用空格间隔,背景定位的两个属性值算作一个属性值,不能被分开也不能颠倒顺序。五个属性值之间可以互换位置
p {
background: url(xl.jpg) no-repeat center top fixed #fff;
}
- 注意事项
- 如果属性值没有设置完全,其他没有设置的单一属性会按照默认值加载
p { background: #fff; }
- 如果想去层叠综合属性中的一部分,其他的属性保持不变,最好使用单一属性写法进行层叠
p { background: url(xl.jpg) no-repeat center top fixed #fff; } p { background-attachment: scroll; }
背景应用 — 替换插入图
/* 方式1 */
<h1>
<a href="###" >
<img src="xl.jpg" />
</a>
</h1>
/* 方式2 */
<h1>
<a href="###" >这是优化过后的</a>
</h1>
h1 a {
display: block;
width: 150px;
height: 200px;
background: url(xl.jpg) no-repeat;
/* 消除文字方法1 */
font-size: 0px;
/* 消除文字方法2 */
text-indent: -10em;
overflow: hidden;
}
背景应用 — padding区域背景图
- 制作方法
- 在一个盒子中有背景图部分,而且有文字内容,文字会让开背景图区域进行加载,北京区域应该使用padding挤出位置
- 四个方向都可以设置
ul{
width: 300px;
padding-left: 10px;
border: 1px solid #333;
margin: 10px;
list-style: none;
font: 16px/32px "微软雅黑";
}
ul li {
padding-left: 20px;
background: url(xl.jpg) no-repeat left center;
}
<ul>
<li>新1闻1新1闻1新1闻1新1闻1新1闻</li>
<li>新2闻2新2闻2新2闻2新2闻2新2闻</li>
<li>新3闻3新3闻3新3闻3新3闻3新3闻</li>
<li>新4闻4新4闻4新4闻4新4闻4新4闻</li>
<li>新5闻5新5闻5新5闻5新5闻5新5闻</li>
</ul>
背景应用 — 精灵图
- 当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户。
- 然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称CSS Sprites、CSS雪碧)
- CSS精灵
- CSS精灵是一种处理网页背景图像的方式
- 它将一个页面涉及到所有零星背景图像都集中到一张大图中去,然后将大图应用于网页,这样,当用户访问该页面时,只需向服务发送一次请求,网页中的背景图像即可全部展示出来
- 通常情况下,这个有很多小的背景图像合成的大图被称为精灵图
- CSS精灵的技术依据
- 将网页中需要用到的小尺寸背景图制作成一张背景透明的PNG图片
- 利用北京定位技术,将精灵图的每个小图片加载到应用的标签上
- 制作精灵图的注意事项
- 精灵图上放的都是小的装饰性质的背景图片,插入图片不能往上放
- 精灵图的宽度取决于最宽的那个背景图片的标签宽度
- 精灵图可以横向摆放也可以纵向摆放,但是每个图片之间必须留够足够的空白,保证背景图片加载到一个标签内部时,不能出现多余内容。
- 在精灵图的最低端,尽量留一点空白,方便以后添加其他精灵图
- 可以使用一些在线工具,快速生成精灵图
p {
width: 100px;
height: 100px;
background: url(xl.jpg) no-repeat 100px 100px;
}
<p></p>
CSS3新增背景属性
- 背景半透明
- CSS3支持背景半透明的写法,颜色值增加了一种rgba模式
- rgba模式:在rgb基础上增加了一个不透明的设置,不透明度alpha取值范围在0-1之间,0表示完全透明,1表示完全不透明,0.5表示半透明。
p { background-color: rgba(255, 0, 0, 0.5) }
- 半透明也可以给文字和边框透明,都是rgba的格式来写
color: rgba(0, 0, 0, 0.3); border: 1px solid rgba(0, 0, 0, 0.3);
- 背景缩放
- 通过background-size设置背景图片的尺寸,就像我们设置的<img>的尺寸一样,在移动web开发中做屏幕适配应用非常广泛
属性值 | 说明 |
---|---|
px值 | 1-2个像素值,只设置1个值,垂直方向等比例拉伸;设置2个值,按照设置值加载 |
百分比 | 同像素值设置方法相同,设置百分比时,数值参照盒子的宽、高属性 |
cover | 自动调整缩放比例,把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。如有溢出部分则会隐藏 |
contain | 自动调整缩放比例,把图像扩展至最大尺寸,保证图片始终完整显示在背景区域 |
p {
background: url(xl.jpg);
background-size: 10px;
}
- 多背景
- CSS3中规定,一个盒子上,可以添加多个背景图片
- background-image的属性值书写时,以逗号分隔多背景的URL路径地址
- 注意:背景加载时,先写的背景压盖后写的背景图
p { background-image: url(xl.jpg), url(bg_xl.png) }
定位概述
- position
- 属性值
- relative — 相对定位
- absolute — 绝对定位
- fixed — 固定定位
- 作用
- 设置定位的元素,他需要根据某个参考元素发生位置的偏移
- 属性值
- 偏移量属性
- 水平方向:left、right
- 垂直方向:top、bottom
- 属性值:常用px为单位的数值,或者百分比。
相对定位
- 属性值:relative
- 参考元素:标签加载的原始位置。
- 必须搭配偏移量属性才能发生位置移动
.box {
position: relative;
left: 100px;
right: 100px;
}
- 性质
- 相对定位的元素不脱离标签的原始状态(标准流、浮动)不会让出原来占有的位置
- 元素显示效果上,原位留坑,形影分离
- 注意事项
- 偏移量属性区分正负
- 正数:偏移方向与属性名方向相反
- 负数:偏移方向与属性名方向相同
- 同一个方向,不能设置两个偏移量属性,如果水平方向同时设置了left和right属性,只会加载left属性。垂直方向只加载top属性。
- 由于相对定位的参考元素是自身,left的正值等价于right的负值,top的正值等价于bottom的负值
- 为了方便记忆,可以选择只使用left、top组合
- 偏移量属性区分正负
相对定位应用
- 由于相对定位元素比较稳定,不会随意让出位置,可以将相对定位的元素作为后期绝对定位的参考元素,就是所说的子绝父相的情况
- 相对定位比较稳定,可以在占有原始位置的情况下,对价在效果区域进行位置调整,进行微调设置。或者对文字进行微调
绝对定位一
- 属性值:absolute,绝对的意思
- 参考元素:参考的是距离最近的有定位的祖先元素,如果祖先都没有定位,参考<body>
- 必须去搭配偏移量属性才会发生位置的移动
p {
position: absolute;
top: 100px;
left: 100px;
}
- 性质
- 绝对定位的元素脱离标准流,会让出标准流位置,可以设置宽高,也可以随时定义位置,绝对定位的元素不设置宽高只能被内容撑开
- 注意
- 绝对定位的参考元素是不固定的,不同的参考元素以及不同的偏移量组合,会导致绝对定位元素的参考点不同,具体位移效果不同
- 以<body>为参考元素时,参考点的确定与偏移量方向有关
- 如果有top参与的定位,参考点就是<body>也免得左上顶点和右上顶点。自身的对比点是盒子的所有盒模型属性最外面的左上角或右上角
- 如果有bottom参与的绝对定位,参考点是<body>页面首屏的左下顶点或右下顶点。对比点是盒子的所有盒模型属性最外面的左下角或右下角
实际应用中,如果以<body>为参考元素,不同分辨率的浏览器中,绝对定位的元素位置是不同的,所以较少使用<body>作为参考元素
绝对定位二
- 祖先级为参考元素
- 如果祖先级中有定位的元素,就不会去参考<body>
- 参考元素:参考的是祖先元素中有任意定位的,在HTML结构中距离目标最近的祖先
.bigBox {
position: relative;
width: 500px;
height: 500px;
}
.bigBox div {
position: absolute;
width: 50px;
height: 50px;
}
根据绝对定位的参考元素的定位类型不同,有三种定位的组合方式:子绝父相、子绝父绝、子绝父固,由于相对定位的祖先级位置更稳定,大多使用子绝父相的情况
- 祖先元素参考点
- 如果绝对定位的参考元素是某个祖先级,参考点是盒子border以内的四个顶点,组合方向决定了参考点。绝对定位的元素只关心对比点和参考点之间的距离,会忽视参考元素的padding区域。
- left、top:参考点是祖先的border以内的左上顶点,对比点是盒子自身的左上角
- right、top:参考点是祖先的border以内的右上顶点,对比点是盒子自身的右上角
- left、bottom:参考点是祖先的border以内的左下顶点,对比点是盒子自身的左下角
- right、bottom:参考点是祖先的border以内的右下顶点,对比点是盒子自身的右下角
固定定位
- 属性值:fixed,固定的意思
- 参考元素:浏览器窗口
- 参考点:浏览器窗口的四个顶点。跟偏移量组合方向有关
- 由于浏览器窗口的四个顶点位置不会发生变化,会导致固定定位的元素会始终显示在定位位置
.box {
position: fixed;
right: 100px;
bottom: 100px;
}
- 性质
- 固定定位的元素脱离标准流,让出标准流位置,可以设置宽高,根据偏移量属性可以任意设置在浏览器窗口的位置。固定定位的元素会始终显示在浏览器窗口时
定位应用、压盖、居中
- 压盖效果
- 所有的定位类型都可以实现压盖效果
- 由于绝对定位的元素脱标,不占标准流位置,压盖效果更彻底,实际工作中,常见的是绝对定位制作的压盖
- 居中
- 定位的元素,如果想在参考元素中居中显示,有自己的居中方法:
- 第一步:在居中的方向使用一个偏移量属性,例如left,设置属性值为50%。导致图片的左顶点移动到参考元素的中心位置
- 第二步:给绝对定位的子盒子设置一个同方向的margin,例如margin-left,属性值为负的自身宽度的一半
- 定位的元素,如果想在参考元素中居中显示,有自己的居中方法:
- 扩展应用
- 解决标准流中,宽的子盒子在窄的父盒子中的居中,可以设置大的子盒子相对定位,利用相对定位居中的方法进行居中
- 浮动的元素居中,在不改变原始浮动状态情况下,可以利用相对定位居中方法
定位压盖顺序 z-index
- 默认的压盖顺序
- 定位的元素不区分定位类型,都会去压盖标准流或浮动的元素
- 如果都是定位的元素,在HTML中后写的定位压盖先写的定位
- 因此,书写代码是,需要注意压盖效果,必须合理设置HTML元素的书写顺序
- 自定义压盖顺序
- 如果想更改定位的元素的压盖顺序,可以设置一个z-index属性
- 属性值:数字
- 注意事项
- 属性值大地会压盖属性值小的,设置z-index属性的会压盖没有设置的
- 如果属性值相同,比较HTML书写顺序,后写的压盖先写的
- z-index属性只能设置给定位的元素才会生效,如果给没有定位的元素设置,不会生效
- 父子盒模型中,如果父子盒子都进行了定位,与其他的父子级有压盖的部分
- 父级盒子:如果不设置z-index,后写的压盖先写的;如果设置了z-index,值大的压盖小的
- 子级盒子:如果父级没有设置z-index属性,子级z-index大的会压盖小的;如果父级设置了z-index值,无论子级值是多少,都是父级的值大的子级压盖父级值小的子级,俗称“从父效应”
静态轮播图布局一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播</title>
<style>
* {
margin: 0px;
padding: 0px;
}
ul, ol {
list-style: none;
}
.box{
position: relative;
width: 880px;
height: 550px;
border: 1px solid black;
margin: 20px auto;
}
.imgBox>li {
position: absolute;
left: 0px;
top: 0px;
display: none;
}
.imgBox>li>img {
width: 880px;
height: 550px;
}
.imgBox>.current {
display: block;
}
</style>
</head>
<body>
<!-- 轮播图大结构 -->
<div class="box">
<!-- 图片列表 -->
<ul class="imgBox">
<li class="current">
<img src="img/1.jpg" alt="">
</li><li>
<img src="img/2.jpg" alt="">
</li><li>
<img src="img/3.jpeg" alt="">
</li>
</ul>
<!-- 按钮 -->
<div class="btn">
<a href="javascript:;" class="leftBtn"> < </a>
<a href="javascript:;" class="rightBtn"> > </a>
</div>
<!-- 小圆点 -->
<ol class="sub">
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
</div>
</body>
</html>
静态轮播图布局二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播</title>
<style>
* {
margin: 0px;
padding: 0px;
}
ul, ol {
list-style: none;
}
.box{
position: relative;
width: 880px;
height: 550px;
border: 1px solid black;
margin: 20px auto;
}
.imgBox>li {
position: absolute;
left: 0px;
top: 0px;
display: none;
}
.imgBox>li>img {
width: 880px;
height: 550px;
}
.imgBox>.current {
display: block;
}
.box .btn a {
position: absolute;
top: 50%;
width: 40px;
height: 40px;
background-color: rgba(211, 47, 47, 0.3);
margin-top: -20px;
font: 20px/40px "宋体";
text-align: center;
color: #f00;
text-decoration: none;
font-weight: bold;
}
.box .btn .leftBtn {
left: 20px;
}
.box .btn .rightBtn {
right: 20px;
}
.box .btn a:hover {
background-color: rgba(211, 47, 47, 0.6);
}
.box .sub {
position: absolute;
left: 100px;
bottom: 50px;
width: 120px;
}
.box .sub li {
float: left;
width: 20px;
height: 20px;
margin-right: 20px;
background-color:rgba(211, 47, 47, 0.6);
font: 12px/20px "微软雅黑";
text-align: center;
color: #666666;
cursor: pointer;
}
.box .sub .current {
background-color: yellow;
}
</style>
</head>
<body>
<!-- 轮播图大结构 -->
<div class="box">
<!-- 图片列表 -->
<ul class="imgBox">
<li class="current">
<img src="img/1.jpg" alt="">
</li><li>
<img src="img/2.jpg" alt="">
</li><li>
<img src="img/3.jpeg" alt="">
</li>
</ul>
<!-- 按钮 -->
<div class="btn">
<a href="javascript:;" class="leftBtn"> < </a>
<a href="javascript:;" class="rightBtn"> > </a>
</div>
<!-- 小圆点 -->
<ol class="sub">
<li class="current">1</li>
<li>2</li>
<li>3</li>
</ol>
</div>
</body>
</html>