目录
1.初识CSS
CSS定义:叠样式表
作用:美化html标签
写法:CSS属性是写在style标签中,作为head标签的子标签
CSS引入方式:
- 内嵌式:写在head标签中,作用范围为当前页面,小案例使用
- 外联式:CSS写在一个单独的.css文件中,通过link标签在网页中引入 作用范围为多个页面,项目中常用
- 行内式 :CSS写在标签的style属性中,作用范围是当前标签,一般配合js使用
2.基础选择器
2.1标签选择器
语法:标签名 { CSS属性}
作用:通过标签名,找到页面中所有这类标签,设置样式
📖Note:
- 标签选择器选择的是一类标签,不是单独的一个
- 标签选择器无论嵌套关系有多深,都能找到对应的标签
2.2类选择器
语法:.类名{ CSS属性}
作用:通过类名,找到页面中所有带有这个类名的标签,设置样式
📖Note:
- 所有标签上都有class属性,class属性的属性值称为类名
- 类名可以由数字,字母,下划线,中划线组成,但不能以数字或者中划线开头
- 一个标签可以同时有多个类名,类名之间用空格隔开
- 类名可以重复,一个类选择器可以同时选中多个标签
2.3id选择器
语法:#id属性值 { CSS属性}
作用:通过id属性值,找到页面中带有这个id属性值的标签,设置样式
📖Note:
- 所有标签上都有id属性
- id属性类似于身份证号码,在一个页面中是唯一的,不能重复的
- 一个标签上只能有一个id属性值
- 一个id选择器只能选中一个标签
- 一般配合js添加动态效果
2.4通配符选择器
语法:*{ CSS属性}
作用:找到页面中所有的标签,设置样式
📖Note:
- 开发中很少使用,小页面中使用它去除标签默认的margin和padding样式
3.字体文本相关样式
3.1字体样式
font-size | 字体大小 |
font-weight | 字体粗细 |
font-style | 字体样式 |
font-family | 字体类型 |
font属性连写 | 字体类型 |
1️⃣font-size :数字px
- 谷歌浏览器默认大小是16px
2️⃣font-weight:正常400,加粗700
- 关键字取值:normal 正常 bold 加粗
- 数字取值:100~900的整百数
3️⃣font-style:字体是否倾斜
- normal正常 italic倾斜
4️⃣font-family:字体
渲染规则:
- 从左往右按顺序查找,如果电脑中未安装该字体,则显示下一个字体
- 如果都不支持,此时会根据操作系统,显示最后字体系列的默认字体
- 如果字体名称中存在多个单词,推荐使用引号包裹
- 最后一项字体系列不需要引号包裹
- 尽量使用常见字体,保证所有用户的网页正常显示
- windows系统默认微软雅黑
5️⃣样式的层叠问题?
- 同一个标签设置了多个样式,后边设置的覆盖前边的
6️⃣font相关属性的连写
- 顺序:font: style weight size family
- 把单独的样式写在连写的下面
- 把单独的样式写在连写的里面
- 省略只能省略前两个
3.2文本样式
text-indent | 文本缩进 |
text-align | 文本水平对齐方式 |
text-decoration | 文本修饰 |
text-indent 取值:
- 数字+px
- 数字+em(1em = 当前标签的font-size的大小)通常设置2em,就是首行缩进2个字符
text-align取值:
属性值 效果 left 左对齐 center 居中对齐 right 右对齐 如果需要让文本水平居中,text-align属性给文本所在标签(文本的父元素)设置
水平居中方法总结:
text-align:center能让哪些元素水平居中?
文本,span标签,a标签,input标签,img标签
以上元素水平居中,需要给其的父元素设置
text-decoration取值:
属性值 效果 underline 下划线 line-through 删除线 overline 上划线 none 无装饰线 开发中会使用text-decoration:none;清除a标签的下划线
3.3line-height行高
属性名:line-height
作用:控制一行的上下行间距 两行文本间的距离
取值:
- 数字+px
- 倍数:当前标签font-size的倍数
应用:
- 让单行文本垂直居中可以设置line-height:文字父元素高度
- 网页精准布局时,会设置line-height:1 可以取消上下间距
行高也可以使用font复合属性
行高font连写的注意点:
如果同时设置了行高和font连写,注意覆盖问题
font:style weight size/line-height family
行高的拓展使用,内容的垂直居中(只适用于单行文字垂直居中)
3.4颜色的常见取值
文字颜色/背景颜色
颜色表示方式 | 表示含义 | 属性值 |
关键词 | 预定义的颜色名 | red,green,blue,yellow..... |
rgb表示法 | 红绿蓝三原色 每项取值范围:0~255 | rgb(0,0,0),rgb(255,255,255) |
rgba表示法 | 红绿蓝三原色+a表示透明度 取值范围0~1 | rgba(10,20,255,0.5) |
十六进制表示法 | #开头,将数字转化为十六进制表示 | #ff0000,#e92322 |
3.5标签水平居中方法
如果需要让div,p,h大盒子水平居中,通过margin: 0 auto实现
📖Note:
- div,p,h大盒子水平居中,直接给当前元素本身设置即可
- margin: 0 auto一般针对于固定宽度的盒子;如果大盒子没有设置宽度,此时会默认占满父元素的宽度
4.选择器进阶
4.1复合选择器
4.1.1后代选择器
作用:根据html标签的嵌套关系,选择父元素后代中满足条件的元素
语法:选择器1 选择器2 {CSS}
结果:在选择器1所找到标签的后代中,找到满足选择器2的标签,设置样式
📖Note:
- 后代包括:儿子,孙子,重孙子......
- 后代选择器中,选择器与选择器之间通过空格隔开
4.1.2子代选择器
作用:根据html标签的嵌套关系,选择父元素 子代中 满足条件的元素
语法:选择器1>选择器2 {CSS}
结果:在选择器1所找到标签的子代中,找到满足选择器2的标签,设置样式
📖Note:
- 子代只包括:儿子
- 子代选择器中,选择器与选择器之间通过 > 隔开
4.2并集选择器
作用:同时选择多组标签,设置相同的样式
语法:选择器1 ,选择器2 {CSS}
结果:找到选择器1和选择器2选中的标签,设置样式
📖Note:
- 并集选择器中的每组选择之间通过 , 分隔
- 并集选择器中的每组选择器可以是基础选择器或者复合选择器
- 并集选择器中的每组选择器通常一行写一个,提高代码的可读性
4.3交集选择器
作用:选中页面中,同时满足多个选择器的标签
选择器语法:选择器1选择器2 {CSS}
结果:既又原则,找到页面中既能被选择器1选中,又能被选择器2选中的标签,设置样式
📖Note:
- 交集选择器中的每组选择器之间是紧挨着的,中间没有分隔符号
- 交集选择器中如果有标签选择器,标签选择器必须写在最前面
4.4hover伪类选择器
作用:选中鼠标悬停在元素上的状态,设置样式
语法:选择器:hover{CSS}
📖Note:
- 伪类选择器选中可以对任意标签设置
4.5Emmet语法
作用:通过简写,快速生成代码
提示css属性:一般情况都是首字母
种类 | 示例 | 效果 |
标签名 | div | <div></div> |
类选择器 | .red | <div class="red"></div> |
id选择器 | #one | <div id="one"></div> |
交集选择器 | p.red#one | <div class="red" id="one"></div> |
子代选择器 | ul>li | <ul> <li></li> </ul> |
内部文本 | ul>li{内容} | <ul> <li>内容</li> </ul> |
创建多个 | ul>li*2 | <ul> <li></li> <li></li> </ul> |
......... |
5.背景属性
5.1背景颜色
属性名:background-color(bgc)
属性值:关键字,rgb表示法,rgba表示法,十六进制
📖Note:
- 背景颜色默认值是透明:rgba(0,0,0,0) transparent为透明色
- 背景颜色不会影响盒子大小,并且能清除显示盒子的大小和位置,一般会在布局中先给盒子设置背景颜色
5.2背景图片
属性名:background-img(bgi)
📖Note:
- 背景图片中url中可以省略引号
- 背景图片默认在水平和垂直方向平铺
- 背景图片仅仅是指给盒子起到装饰效果,类似于背景颜色,是不能撑大盒子的
5.3背景平铺
属性名:background-repeat(bgr)
属性值:
取值 效果 repeat 默认值,水平和垂直方向都平铺 no-repeat 不平铺 repeat-x 沿水平方向平铺 repeat-y 沿垂直方向平铺
5.4背景位置
属性名:background-position(bgp)
语法:background-position:水平方向位置 垂直方向位置
属性值:
1️⃣方向名称
- 水平方向:left,center,right
- 垂直方向:top,center,bottom
2️⃣数字+px(坐标系)
- 原点(0,0)盒子的左上角
- x轴:水平向右
- y轴:垂直向下
数字+px设置时:正值和负值
📖Note:
- 图片默认显示在左上角
- 方位名词取值和坐标取值可以混合使用,第一个取值表示水平,第二个取值表示垂直
背景相关属性连写:
推荐书写顺序:background:color img repeat position
可以按需求省略
特殊情况:在PC端,如果盒子大小和背景图片大小一样,此时可以直接写background:url()
📖Note:
如果需要设置单独的样式和连写
- 要么把单独的样式写在连写的下面
- 要么把单独的样式写在连写的里面
顺序问题:
- position如果使用方向名称表示,水平和垂直顺序也能交换
- position如果使用数字+px表示,水平和垂直顺序就不能交换
img和背景图片的区别?
- img是一个标签,不设置宽高默认以原尺寸显示插入图,实现网页中比较重要的图片
- div+背景图,需要设置div的宽高,背景图是装饰的CSS样式,不能撑开div标签,实现装饰性的,不太重要的图
6.元素显示模式
6.1元素的三种显示模式
块级元素
1️⃣显示特点:
- 独占一行(一行只能显示一个)
- 宽度默认是父元素的宽度,高度默认由内容撑开
- 可以自定义宽度和高度
2️⃣代表标签:div,p,h系列,ul,li,dl,dt,dd,form,header,nav,footer...
行内元素
1️⃣显示特点:
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以自定义宽度和高度
2️⃣代表标签:a,span,b,u,i,strong,ins,em,del....
测试显示模式:加宽加高加背景色
行内块元素
1️⃣显示特点:
- 一行可以显示多个
- 可以自定义宽度和高度
2️⃣代表标签:input,textarea,button,select
特殊情况:img标签有行内块元素的特点,但是chrome调试工具中显示结果是inline
元素显示模式转换
目的:改变元素默认的显示特点,让元素符合布局要求
语法:
属性 效果 使用频率 display:block 转换成块级元素 较多 display:inline-block 转换成行内块元素 较多 display:inline 转换成行内元素 较少
6.2HTML嵌套规范:
嵌套规范:
- 块级元素一般会作为大容器,可以嵌套:文本,块级元素,行内元素,行内块元素等,但是:p标签中不要嵌套div,p,h等块级元素
- a标签内部可以嵌套任意元素,但是:a标签不能嵌套a标签
7.CSS三大特性
7.1CSS的继承性
特性:子元素有默认继承父元素样式的特点
可以继承的常见属性(文字控制属性都可以继承,标签控制属性一般都不能继承)
- color,font-style,font-weight,font-size,font-family
- text-indent,text-align
- line-height
📖Note:
- 可以通过调试工具判断样式是否可以继承
继承失效的特殊情况
如果元素有浏览器默认样式,此时继承性依然存在,但显示自己的默认样式
- a标签的color会继承失效
- h标签的font-size会继承失效
7.2CSS的层叠性
特性:
- 给同一个标签设置不同的样式,此时样式会层层叠加,共同作用在标签上
- 给同一个标签设置相同的样式,此时样式会层层覆盖,最终写在最后的样式会生效
📖Note:
- 当样式冲突时,只有当选择器优先级相同时,才能通过层叠性判断结果
7.3CSS的优先级
特性:不同选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低的选择器样式
优先级公式:
继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
📖Note:
- !important写在属性值的后面,分号的前面
- !important不能提升继承的优先级,只要是继承优先级最低
- 实际开发中不建议使用!important
当一个标签使用了多个选择器,样式冲突的时候,到底谁生效?
权重叠加计算
场景:如果是复合选择器,此时要通过权重叠加计算方法,判断出最终哪个选择器优先级最高会生效
权重叠加公式:每一级之间不存在进位
复合选择器中:
- 第一级:行内样式的个数
- 第二级:id选择器的个数
- 第三级:类选择器的个数
- 第四级:标签选择器的个数
比较规则:
- 先比较第一级数字,如果比较出来了,之后统统不看
- 如果第一级数字相同,则比较第二级数字,如果比较出来了,之后统统不看
- ... ...
- 如果最终所有数字都相同,表示优先级相同,则比较层叠性
📖Note:
- !important如果不是继承,则权重最高
- 全是继承的特殊情况:先继承父级
8.盒子模型
盒子的概念:
页面中的每一个标签,都可以看作是一个盒子,通过盒子的视角更方便的进行布局
浏览器在渲染(显示)网页时,会将网页中的元素看作是一个个的矩形区域,形象的称之为盒子
盒子模型:
CSS中规定每个盒子分别由:内容区域(content),内边距区域(padding),边框区域(border),外边框区域(margin)构成
8.1内容的宽度和高度
作用:利用width和height属性默认设置的是盒子 内容区域 的大小
8.2边框border
属性名:border
属性值:单个取值的连写,取值之间以空格隔开
如:border: 2px solid #000; //黑色的2像素的实线
属性值 | 效果 |
solid | 实线 |
dashed | 虚线 |
dotted | 点线 |
单方向边框
场景:只给盒子的某个方向单独设计边框
属性名:border-方位名词
属性值:连写的取值
边框的单个属性:
作用 属性名 属性值 边框粗细 border-width 数字+px 边框样式 border-style 实线,虚线,点线 边框颜色 border-color 颜色取值 很少单独使用,一般都使用复合属性设置
盒子实际大小计算公式:
需求:盒子尺寸400*400,背景绿色,边框10px,黑色
盒子实际大小初级计算公式:
CSS属性设置width和height时,盒子的需求宽高分别减去边框*2
8.3内边距padding
可以设置四个方向的内边距
padding属性可以当作复合属性使用,表示单独设置某个方向的内边距
padding最多取四个值:上下左右四个方向
padding也会撑大盒子
CSS属性设置width和height时,盒子的需求宽高分别减去内边距*2
8.4CSS3模型:自动内减
操作:给盒子设置属性box-sizing:border-box;
优点:浏览器会自动计算多余大小,自动在内容中减去
8.5外边距margin
也可以当作复合属性使用
8.6清除默认的内外边距
场景:浏览器会默认给部分标签设置默认的margin和padding,一般在项目开始前需要先清除这些默认的,后续自己设置
如:
- body标签有默认的margin:8px
- p标签有默认的上下margin
- ul标签默认有上下的margin和padding-left
清除默认样式:
8.7版心居中
版心:网页的有效内容 版心居中
效果:一个大div在浏览器网页居中对齐
外边距折叠-合并现象
场景:垂直布局的块级元素,上下的margin会合并
结果:最终两者距离为margin的最大值
解决方法:只给其中一个盒子设置margin就好
外边距折叠-塌陷现象
场景:互相嵌套的块级元素,子元素的margin-top会作用在父元素上
结果:导致父元素一起往下移动
解决方法:
- 给父元素设置border-top或者padding-top(分隔父子元素的margin-top)
- 给父元素设置overflow: hidden
- 转换成行内块元素
- 设置浮动
行内元素的内外边距问题
问题:如果想要通过margin和padding改变行内标签的垂直方向位置,无法生效
即行内标签的margin-top和margin-bottom,padding-top和padding-bottom无法生效
解决方案:添加line-height,改变垂直方向的位置
9.浮动
9.1结构伪类选择器
作用:根据元素在html中的结构关系查找元素
优势:减少对html中类的依赖,有利于保持代码整洁
场景:常用于查找某父级选择器中的子元素
选择器 | 说明 |
E:first-child {} | 匹配父元素中第一个子元素,并且是E元素 |
E:last-child {} | 匹配父元素中最后一个子元素,并且是E元素 |
E:nth-child(n) {} | 匹配父元素中第n个子元素,并且是E元素 |
E:nth-last-child(n) {} | 匹配父元素中倒数第n个子元素,并且是E元素 |
n的注意点:
- n为1,2,3,4,5,6......
- 通常n可以组成常见公式
功能 | 公式 |
偶数 | 2n、even |
奇数 | 2n+1,2n-1,odd |
找到前五个 | -n+5 |
找到从第五个往后 | n+5 |
结构伪类选择器的易错点:
问题:在下列代码中,如果要找到第一个a标签,如何去查找?
9.2伪元素
伪元素:一般页面中的非主体内容可以使用伪元素(装饰性的元素)
区别:
- 元素:html设置的标签
- 伪元素:由CSS模拟出标签的效果
种类:
伪元素 作用 ::before 在父元素内容的最前添加一个伪元素 ::after 在父元素内容的最后添加一个伪元素 📖Note:
- 必须设置content属性才能生效
- 伪元素默认是行内元素
9.3浮动
标准流:又称文档流,是浏览器在渲染显示网页内容时默认采用的一套排版规则,规定了应该以何种方式排列元素
常见标准流排版规则:
- 块级元素:从上往下,垂直布局,独占一行
- 行内元素,行内块元素:从左往右,水平布局,空间不够自动折行
实现两个div在一行排列:
1️⃣块级元素转换成行内块元素
浏览器解析行内块或行内标签的时候,如果标签换行书写,会产生一个空格的距离,所以转行成行内块的方式不能完美实现
2️⃣浮动:让块级标签完美地在一行排列
- 浮动早期:图文环绕
- 现在:网页布局
浮动的特点:
1️⃣浮动元素会脱离标准流(简称"脱标"),在标准流中不占位置
2️⃣浮动元素比标准流高半个级别,可以覆盖标准流中的元素
3️⃣浮动找浮动,下一个浮动元素会在上一个浮动元素后面排列
- 浮动的标签顶对齐,可以使用margin属性移动
4️⃣浮动元素有特殊的显示效果
- 一行可以显示多个
- 可以设置宽高
📖Note:
- 浮动后的标签具备行内块的特点,并且比行内块更高级
- 浮动后的元素不能通过text-align:center或者margin:0 auto居中
- 浮动的优先级高于margin
CSS属性推荐书写顺序:浏览器执行效率更高
- 浮动或display
- 盒子模型相关属性:margin border padding 宽高背景色
- 文字样式
9.4清除浮动
清除浮动:清除浮动给其他元素带来的影响
影响:
- 如果子元素浮动了,此时子元素不能撑开标准流的块级父元素
- 父子级标签,子级浮动,父级没有高度,后面的标准流盒子会受影响
原因:子元素浮动后脱标,不占位置
目的:需要父元素有高度,从而不影响其他网页元素的布局
清除浮动的方法:
1️⃣直接设置父元素的高度
优点:简单粗暴,方便
缺点:有些布局不能固定父元素高度,如:新闻列表,京东推荐模块
2️⃣额外标签法
操作:
- 在父元素内容的最后添加一个块级元素
- 给添加的块级元素设置clear:both
缺点:在页面外添加额外的标签,会让页面的html结构变复杂
3️⃣单伪元素清楚法
操作:用伪元素替代了额外标签
基本写法:
.clearfix::after { content: ''; display: block; clear: both; }
补充写法:
.clearfix::after { content: ''; /* 伪元素添加的标签是行内的 */ display: block; clear: both; /* 补充:在网页中看不到伪元素 解决兼容性问题*/ height: 0; visibility: hidden; }
优点:项目中使用,直接给标签加类即可清除浮动
4️⃣双伪元素清除法:
优点:项目中使用,直接给标签添加类即可清除浮动
/* .clearfix::before解决外边距塌陷问题 */
/* 外边距塌陷问题 父子标签都是块级,子级加margin会影响父级的位置 */
.clearfix::before,
.clearfix::after {
content: '';
/* 转换显示模式 */
display: table;
}
/* 真正清除浮动的标签 */
.clearfix::after {
clear: both;
}
5️⃣给父元素设置overflow:hidden
操作:直接给父元素设置overflow:hidden
10.定位
10.1定位的介绍
可以让元素自由的摆放在网页的任意位置,一般用于 盒子之间 的层叠情况
定位的常见应用场景:
- 可以解决盒子与盒子之间的层叠问题:定位之后的元素层级更高,可以层叠在其他盒子的上面
- 可以让盒子始终固定在屏幕的某个位置
10.2定位的使用
1️⃣设置定位方式
属性名:position
常见属性值:
定位方式 属性值 静态定位 static 相对定位 relative 绝对定位 absolute 固定定位 fixed 2️⃣设置偏移值
- 偏移值设置分两个方向,水平和垂直方向各选一个使用即可;即left和right选一个,top和bottom选一个
- 选取的原则一般是就近原则(离哪边近用哪个)
10.2.1静态定位
静态定位:默认值,就是之前的标准流
语法:position:static
📖Note:
- 静态定位就是之前的标准流,不能通过方位属性进行移动
- 之后说的定位不包括静态定位,一般特指:相对定位,绝对定位,固定定位
10.2.2相对定位
介绍:自恋型定位,相对于自己之前的位置进行移动
语法:position:relative
特点:
- 需要配合方位属性实现移动:如果left和right都有,以left为准;top和bottom都有,以top为准
- 不改变标签的显示模式
- 相对于自己原来的位置进行移动
- 在页面中占位置:即没有脱标
应用场景:
- 配合绝对定位(子绝父相)
- 用于小范围的移动
10.2.3绝对定位
介绍:拼爹型定位,相对于非静态定位的父元素进行定位移动
代码:position:absolute
绝对定位:
- 先找已经定位的父级,如果有这样的父级。就以这个父级为参照物进行定位
- 有父级,父级没有定位,这时以浏览器窗口为参照物进行定位
特点:
- 需要配合方位属性实现移动
- 改变了标签的显示模式特点(如div设置绝对定位后显示模式变成行内块元素)
- 默认相对于浏览器可视区域进行移动
- 在页面中不占位置:已经脱标
应用场景:
- 配合相对定位
10.2.4子绝父相
一般都会参照一个有定位的父级进行设置
父级的定位为相对定位,自己为绝对定位
绝对定位查找父级的方式,就近找定位的父级,如果查找不到这样的父级,就以浏览器窗口为参照物进行定位
案例:使用子绝父相,让子盒子在父盒子中水平居中
垂直居中与水平居中相似
案例2:给图片添加遮罩效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 父级:相对定位 */
.banner {
position: relative;
margin: 0 auto;
width: 400px;
height: 400px;
}
/* 子级:绝对定位 */
.mask {
position: absolute;
left: 0;
bottom: 0;
/* 绝对定位的盒子显示模式为行内块元素的特点 加宽高不生效 */
/* 子级和父级的宽度相同 */
width: 100%;
height: 100px;
background-color: rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="banner">
<img src="./pic2.jpg" alt="">
<!-- 遮罩 -->
<div class="mask"></div>
</div>
</body>
</html>
10.2.5固定定位
介绍:死心眼型定位,相对于浏览器窗口进行定位移动
代码:position:fixed
特点:
- 需要配合方位属性实现移动
- 相对于浏览器可视区域进行移动
- 具备行内块元素的特点
- 在页面中不占位置:已经脱标
应用场景:
- 让盒子固定在屏幕的某个位置
10.3元素的层级关系
不同布局方式元素的层级关系:
- 标准流<浮动<定位
不同定位之间的层级关系:
- 绝对定位,相对定位,固定定位默认层级相同
- 此时html中写在下面的元素层级更高,会覆盖上面的元素
默认情况下,定位的盒子,后来者居上
z-index属性可以改变元素的层级
z-index属性:整数
z-index属性值取值越大,显示顺序越靠上
📖Note:
- z-index的默认值是0
- z-index的使用必须配合定位使用,其他情况不生效
11.装饰
11.1垂直对齐方式
基线:浏览器在文字类型元素排版中存在用于对齐的基线(baseline)
浏览器在处理行内标签和行内块标签的时候,默认按照文字去解析,基线对齐
问题:当图片和文字在一行中显示的时候,底部不是对齐的
场景:解决行内/行内块元素的垂直对齐问题
属性名:vertical-align
属性值:
属性值 效果 baseline 默认,基线对齐 top 顶部对齐 middle 中部对齐 bottom 底部对齐 📖Note:
- 图和文本垂直居中,选中图添加vertical-align属性
- 子级和父级:给子级标签添加vertical-align属性
11.2光标类型
场景:设置鼠标光标在元素上时显示的样式
属性名:cursor
常见属性值:
属性值 效果 default 默认值,通常是箭头 pointer 小手效果,提示用户可以点击 text 工字形,提示用户可以选择文字 move 十字光标,提示用户可以挪动
11.3边框圆角
场景:让盒子的四个角变得圆润,增加页面细节,提升用户体验
属性名:border-radius
常见取值:数字+px、百分比
原理:
赋值规则:从左上角开始赋值,顺时针赋值,没有赋值的看对角
边框圆角的常见应用:
1️⃣画一个正圆:用户头像
- 盒子必须是正方形
- 设置边框圆角为盒子宽高的一半 border-radius: 50%
- border-radius最大为50% 盒子尺寸的一半
2️⃣胶囊按钮:
- 盒子形状为长方形
- border-radius设置为高度的一半
11.4overflow溢出部分显示效果
溢出部分:指的是盒子内容部分所超出盒子范围的区域
场景:控制内容溢出部分的显示效果,如:显示,隐藏,滚动条.....
属性名:overflow
常见属性值:
属性值 效果 visible 默认值,溢出部分可见 hidden 溢出部分隐藏 scroll 无论是否溢出,都显示滚动条 auto 根据是否溢出,自动显示或隐藏滚动条
auto和scroll的区别:
- auto根据内容决定是否显示滚动条
- scroll总是会添加滚动条
11.5元素本身隐藏
场景:让某元素本身在屏幕中不可见,如:鼠标hover之后元素隐藏
常见属性:
- visibility:hidden
- display:none
区别:
- visibility属性占位
- display属性不占位
12.CSS样式拓展
12.1.元素整体透明度
场景:让某元素整体(包括内容)一起变透明
属性名:opacity
属性值:0~1之间的数字
- 1:表示完全不透明
- 0:表示完全透明
📖Note:
- opacity会使盒子连同内容一起透明
- opacity不常用,设置透明度常用rgba
12.2.边框合并
场景:让相邻的表格边框进行合并,得到细线边框效果
代码:border-collapse: collapse;
12.3.用CSS画三角形
利用盒子边框完成
步骤:
- 设置一个盒子
- 设置四周不同颜色的边框
- 将盒子宽高设置为0,仅保留边框
12.4.焦点伪类选择器
场景:用于选中元素获取焦点时的状态,常用于表单控件
选择器语法:
效果:表单控件获取焦点时默认显示外部的轮廓线
12.5属性选择器
场景:通过元素上的HTML属性来选择元素,常用于选择input标签
选择器语法:
选择器 功能 E[attr] 选择具有attr属性的E元素 E[attr="val"] 选择具有attr属性并且属性值为val的E元素
12.6精灵图
场景:项目中将多张小图片,合并成一张大图片,这张大图片称为精灵图
优点:减少服务器发送次数,减轻服务器压力,提高页面加载速度
使用步骤:
- 创建一个盒子,设置盒子的尺寸和小图尺寸相同
- 将精灵图设置为盒子的背景图片
- 修改背景图的位置:通过PxCook测量小图片左上角坐标,分别取负值设置给盒子的background-position: x y;
12.7背景图片大小
作用:设置背景图片的大小
语法:background-size: 宽度 高度;
取值:
取值 场景 数字+px 简单方便,常用 百分比 相当于当前盒子自身的宽高百分比 contain 包含,将背景图片等比例缩放,直到不会超出盒子的最大 cover 覆盖,将背景图片等比例缩放,直到刚好填满整个盒子没有空白
background连写:
完整连写:background: color image() repeat position/size;
注意:
background-size和background连写同时设置时,需要注意覆盖问题
解决:
- 要么单独的样式写在连写的下面
- 要么单独的样式写在连写的里面
12.8盒子阴影
作用:给盒子添加阴影效果,体现页面细节
属性名:box-shadow
取值:
参数 作用 h-shadow 必须,水平偏移量,允许负值 v-shadow 必须,垂直偏移量,允许负值 blur 可选,模糊度 spread 可选,阴影扩大 color 可选,阴影扩大 inset 可选,将阴影改为内部阴影
12.9过渡
作用:让元素的样式慢慢的变化,常配合hover使用,增强网页交互体验
属性名:transition
常见取值:
参数 取值 过渡的属性 all:所有能过渡的属性都过渡、具体属性名如:width:只有width有过渡 过渡的时长 数字+s(秒) 📖Note:
- 过渡需要:默认状态和hover状态样式不同。才能有过渡效果
- transition属性给需要过渡的元素本身加
- transition属性设置在不同的状态中,效果不同
①给默认状态设置,鼠标移入移出都有过渡效果
②给hover状态设置,鼠标移入有过渡效果,移出没有过渡效果
13.项目前置认知
网页与网站的关系:
网页:相当于每页纸
网站:相当于一本书
骨架结构标签
<!DOCTYPE html>文档类型声明,告诉浏览器该网页的HTML版本
<!DOCTYPE html> HTML5
<html lang="en">标识网页使用的语言
作用:搜索引擎归类+浏览器翻译
常见语言:zh-CN简体中文/en英文
<meta charset="UTF-8">标识网页使用的字符编码
作用:保存和打开的字符编码需要统一设置,负责可能出现乱码
常见字符编码:
UTF-8:万国码,国际化的字符编码,收录了全球语言的文字
GB2312:6000+汉字
GBK:20000+汉字
注意:开发中统一使用UTF-8字符编码
<meta name="viewport" content="width=device-width, initial-scale=1.0">
解决浏览器兼容性问题,宽度=设备宽度 移动端网页的时候要用
SEO
SEO(Seaech Engine Optimization):搜索引擎优化
作用:让网站在搜索引擎上的排名更靠钱
提升SEO的常见方法:
1.竞价排名
2.将网页制作成html后缀
3.标签语义化
SEO三大标签:
- title :网页标题标签
- description:网页描述标签
- keywords:网页关键词标签
ico图标设置
场景:显示在标签页标题左侧的小图标,习惯使用.ico格式的图标
常见代码:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">