2Unit
2 Unit学习路径
- 基础认知
- 基础选择器
- 字体和文本样式
- Chrome调试工具
- 综合案例
- 源代码链接: gitee.com/gotoworlk/w…
基础认知
简单介绍:
CSS 层叠样式表,主要用于修饰html元素,展现更好看的页面.
CSS写在哪里:
css 写在style标签中,style标签一般写在head标签里面,title标签下面.
css 也可以写在标签元素的属性上,这里不过多赘述可以百度看下
css 还可以通过外部css文件引入样式,可以是本地文件也可以是网络文件
选择器的优先级
- ID 选择器， 如 #id{}
- 类选择器， 如 .class{}
- 属性选择器， 如 a[href="segmentfault.com"]{}
- 伪类选择器， 如 :hover{}
- 伪元素选择器， 如 ::before{}
- 标签选择器， 如 span{}
- 通配选择器， 如 *{}
样式层叠优先级
内联样式>style>外部引用 如果是在style中给相同属性添加样式,哪个样式靠近元素,哪个生效
基础选择器
选择器书写结构如:
选择器 {
属性: 属性值;
...
}
标签选择器: 标签名 {}
类选择器: .类名{}
ID选择器: #ID {}
通配符选择器: * {}
文字样式
1. 字体大小: font-size
2. 字体粗细: font-weiight
3. 字体样式: font-style
4. 字体类型: font-family,可以设置多个字体样式,前面的不生效自动命中后面的,如果都没有就用浏览器自带的
5. 字体样式复写: font 属性连写(忽略)
| 属性名 | 属性值 |
|---|---|
| font-style | italic表示斜体,normal表示正常字体 |
| font-weiight | 100-900,数值越大字体越粗 |
| font-family | "Times New Roman","Georgia","Serif" |
| font-size | 非纯数字需要跟单位,如15px像素单位,或者1em以文字默认大小单位 |
文本样式
1. text-indent: 文本缩进
2. text-align: 文本对齐方式,类似居中,默认居左
3. text-decoration: 文本修饰
4. line-height: 用于控制上下行之间的高度
5. color: 文本颜色
| 属性名 | 属性值 |
|---|---|
| text-indent | 非纯数字需要跟单位,如10px或1em |
| text-align | 文本对齐,如left,center,right |
| text-decoration | 给文本添加underline下划线,ine-through删除线,overline上划线,none无装饰线 |
| line-height | 非纯数字需要跟单位,如10px |
| color | 颜色名称,rgb,rgba,16进制 |
外边距
1. margin: 上 下 左 右
可以根据需求,设置单边外边距,如margin-top等,可以通过margin: 0 auto; 设置标签元素居中
外边距属性:
1. 非纯数字需要带单位,如1px
复杂选择器
1. 后代选择器: 选择器1 选择器2 {}
2. 子选择器: 父选择器 > 子选择器... {}
3. 多种类选择器: 标签选择器1, .类选择器2,... {}
4. 伪类选择器: 标签:伪类选择器 {}
伪类选择器列表地址: https://www.cnblogs.com/aure/p/16567342.html
背景相关属性
1. 背景颜色,默认背景颜色是透明的.或者通过将属性值设置为transparent设置元素透明
2. 背景图片,默认是水平和垂直方向平铺
3. 背景平铺,默认平铺
4. 背景位置
5. 背景相关属性连写
背景颜色:
| 属性名 | 属性值 |
|---|---|
| background-color | 颜色名称,rgb,rgba,16进制 |
| background-image | url('图片本地地址或者网络连接') |
| background-repeat | repeat默认水平和垂直方向都平铺,no-repeat不平铺,repeat-x沿着水平方向平铺,repeat-y沿着垂直方向平铺 |
| background-position | 参考下图 |
背景图片和图片标签有什么区别? 背景图片需要给元素设置宽高,无法默认撑开盒子大小,图片标签默认使用图片大小
元素的显示模式
元素分为三种显示模式:
1. 行内模式
2. 块模式(独占一行)
3. 行内块模式
使用场景:
有些场景下我们需要让一行内放入多个div,这样的话需要更改下元素的显示模式,可以使用display: inline-block; 这样就可以让多个块元素放在同一行内
display: inline行内模式,inline-block行内块元素,block块元素
盒子模型
简述:
1. 页面中的每一个标签,都可以看做是一个盒子,通过盒子在页面的布局进行布局
2. 浏览器渲染网页,会将网页中的元素看做是一个个的矩形区域,所以称之为盒子
3. 清除默认样式,默认浏览器会有默认样式,我们可以通过css清除掉默认的css样式
盒子的组成:
css 中规定每个盒子分别由:内容区域content,内边距区域padding,边框区域border,外边距区域margin构成,这就是盒子模型
盒子居中:
通过margin: 0 auto; 设置当前盒子进行居中显示效果
内减模式:
通过给元素设置box-sizing: border-box; 后续所有添加的边框不会向外计算,会从内容区进行减少
外边距折叠问题:
上下块级元素,之间的外边距会产生重叠,不会累加,最终取值取两者最大值.
解决办法:
1. 给父元素设置border-top 或者padding-top(分隔父子元素的margin-top)
2. 给父元素设置overflow: hidden
3. 转换成行内块元素
4. 设置浮动
结构伪类选择器:
能够使用结构伪类选择器在HTML中定位元素
作用与优势:
作用: 根据元素在HTML中的结构关系查找元素
优势: 减少对于HTML中类的依赖,有利于保持代码整洁
场景: 常用于查找某个父级选择器中的子元素
| 结构伪类选择器 | 说明 |
|---|---|
| E:first-child{} | 匹配父元素中第一个子元素,并且是E元素 |
| E:last-child{} | 匹配父元素中最后一个子元素,并且是E元素 |
| E:nth-child(n){} | 匹配父元素中第n个子元素,并且是E元素 |
| E:nth-last-child(n){} | 匹配父元素中倒数第n个子元素,并且是E元素 |
结构伪类选择器注意:
nth(从0开始取值,括号中可以填写算数公式)
如偶数: 2n,even.
基数: 2n+1,2n-1,odd.
找到前5个: -n+5
找到从第5个往后: n+5
伪元素选择器:
伪元素: 一般页面中的非主体内容可以使用为元素
区别:
1. 元素: HTML设置的标签
2. 伪元素: 由CSS模拟出的标签结果
种类:
::before 在父元素内容的最前添加一个伪元素
::after 在父元素内容的最后一个添加一个伪元素
注意点:
1. 必须设置content属性才能生效
2. 伪元素默认是行内元素
标准流:
标准流: 又称文档流,是浏览器在渲染显示网页内容时默认采用的一套排版规则,规定了应该以何种方式排列元素
常见标准流排版规则:
1. 块级元素: 从上往下,垂直布局,独占一行
2. 行内元素 或 行内块元素: 从左往右,水平布局,空间不够自动折行
浮动:
- 浮动的作用
作用:
1. 网页布局:浮动可以让多个块级元素在同一行内排列,不在占据标准流位置,可以覆盖标准流
2. 图文环绕:可以用于文字环绕图片,给图片加浮动属性即可
2. 浮动的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动特点</title>
<style>
#v1 {
width: 300px;
height: 300px;
background-color: red;
float: left; /* 开启左浮动 */
}
#v2 {
width: 300px;
height: 300px;
background-color: blue;
float: left; /* 开启左浮动 */
}
</style>
</head>
<body>
<div id="v1">第一个元素</div>
<div id="v2">第二个元素</div>
</body>
</html>
- 清除浮动
影响: 清除浮动带来的影响,如果子元素浮动了,此时子元素不能撑开标准流的块级元素
原因: 子元素浮动后脱标不占位置
目的: 需要父元素根据子元素内容高度进而增高
解决办法:
1. 直接给父元素高度,但无法自适应根据子元素高度增高
2. 给添加的块级元素设置clear: both; 缺点会在页面中额外添加标签,使结构变得复杂
clear: both; 作用是清除浮动元素的左右两侧浮动的影响
3. 单伪元素清除法,添加在浮动元素的父级写法:
.clearfix::after{
content: '';
display: block;
clear: both;
/* 补充代码: 在网页中看不到伪元素 */
height: 0;
visibility: hidden;
}
4. 双伪元素清除法,添加在浮动元素的父级写法:(可以解决外边距塌陷)
.clearfix::before,
.clearfix::after{
content: '';
display: table;
}
.clearfix::after{
clear: both;
}
5. overflow: hidden;清除法(也可以解决外边距塌陷问题)
图片对齐方式:
vertical-align: middle; 居中对齐图片
vertical-align: top; 居上对齐图片
vertical-align: bottom; 居下对齐图片
vertical-align: baseline; 默认,基线对齐
定位
将网页元素固定在某个位置,且元素层级最高,在其他布局方法层级之上,也可以让盒子固定在屏幕上的某个位置.
设置定位方式: position: 属性值;
设置偏移值: 开启定位方式后,需要通过属性设置偏移值;
| 属性名 | 属性值 | 说明 |
|---|---|---|
| position | relative | 相对定位,相对原有左上角坐标进行偏移 |
| position | absolute | 绝对定位,根据开启定位的祖先元素进行绝对偏移定位 |
| position | fixed | 固定定位,固定在浏览器某个位置 |
| position | static | 静态定位,默认 |
| 属性名 | 属性值 | 说明 |
|---|---|---|
| left | 数字带单位 | 从左向右偏移指定数值 |
| top | 数字带单位 | 从上向下偏移指定数值 |
| bottom | 数字带单位 | 从下向上偏移指定数值 |
| right | 数字带单位 | 从右向左偏移指定数值 |
定位类型:
1. 绝对定位: 根据父级以上开启定位的元素作为原点对象,脱离文档标准流
2. 相对定位: 根据自己左上角作为原点偏移,相对定位不会脱离标准流
3. 固定定位: 浏览器可视化窗口固定
定位元素层级
1. 标准 > 浮动 > 固定
2. 默认情况下,定位的元素,后写的优先级更高
3. 定位元素需要更改优先级通过z-index: 整数;取值越大,显示顺序越靠上默认是0
装饰
光标类型
鼠标样式: 用于修饰鼠标的样子
| 属性名 | 属性值 | 说明 |
|---|---|---|
| cursor | default | 默认值,通常是剪头 |
| cursor | pointer | 小手效果,提示点击 |
| cursor | text | 工字型,提示输入 |
| cursor | move | 十字光标,提示拖动 |
边框圆角
border-radius: 数字+px / 百分比;
溢出部分显示效果
overflow:
visible 默认值,溢出部分课件
hidden 溢出部分隐藏
scroll 无论是否溢出,都显示滚动条
auto 根据是否溢出,自动显示或隐藏滚动条
元素的透明
opacity:
0-1 之间的数字, 1表示完全不透明,0 表示完全透明
精灵图的使用步骤
精灵图的使用步骤:
1. 创建一个盒子,设置盒子的尺寸和小图尺寸相同
2. 将精灵图设置为盒子的背景图片
3. 修改背景图位置
通过PxCook测量小图片左上角坐标,分别取负值设置给盒子的background-position: x y;
背景图片大小
作用: 设置背景图片的大小,
语法: background-size: 宽度 高度;
取值:
数字+px 简单方便 常用
百分比 相当于当前盒子的自身宽高百分比
contain 包含,将背景图片等比缩放,知道不会超出盒子的最大
cover 覆盖,将背景图片等比例缩放,直到刚好填满整个盒子没有空白
盒子阴影
作用: 给盒子添加阴影效果
属性名: box-shadow
取值:
h-shadow 必须,水平偏移量,允许负值
v-shadow 必须,垂直偏移量,允许负值
blur 可选,模糊度
spread 可选,阴影扩大
color 可选,阴影颜色
inset 可选,将阴影改为内部阴影
实际使用:
box-shadow: 5px 5px 20px 15px gray inset;
动画过渡
作用: 让元素的样式慢慢的变化, 常用于配合hover 使用,增强网页交互体验
属性名: transition ,注意谁变化谁加,不是给hover加
常见取值:
过渡的属性: all 所有能过渡的属性都过渡, 具体属性名如 width: 只有width过渡效果
过渡的时长: 数字+s(秒)
过渡代码示例
.box {
width: 200px;
height: 200px;
background-color: pink;
box-shadow: 5px 5px 20px 15px gray inset;
/* 可以写all 表示.box:hover中的所有属性全部生效*/
transition: all 3s;
/* 可以写多个或单个属性 表示.box:hover中的width属性生效*/
transition: width 3s,box-shadow 3s,background-color 3s;
}
.box:hover {
box-shadow: 5px 5px 20px 15px gray;
width: 300px;
background-color: red;
}
SEO 三大标签(搜索引擎优化)
作用: 优化当前网页被搜索后的结果排名靠前
提升SEO常见方法:
1. 竞价排名
2. 将网页制作成HTML后缀
3. 标签语义化(在合适的地方使用合适的标签)
三大标签☞ :
title: 网页标题标签
description: 网页描述标签
keywords: 网页关键词标签
icon 图标
将ico格式图片放在项目根目录下,通过下面代码引入
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
案例
列表样式案例
完成以下图片中的内容:
/* css 区域 */
ul>li {
/* 修改li标签的显示样式 */
display: inline-block;
width: 80px;
height: 40px;
text-align: center;
line-height: 40px;
background-color: red;
}
a {
color: white;
text-decoration: none;
}
li:hover {
background-color: orange;
}
<!--html区域-->
<ul>
<li><a href="">导航1</a></li>
<li><a href="">导航2</a></li>
<li><a href="">导航3</a></li>
<li><a href="">导航4</a></li>
</ul>
新浪导航案例
完成以下图片内容:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>新浪导航</title>
</head>
<style>
* {
list-style: none;
padding: 0;
margin: 0;
}
#tou {
height: 4px;
background-color: orange;
}
#sina {
height: 50px;
background-color: gainsboro;
}
#sina > ul > li {
display: inline-block;
width: 90px;
height: 50px;
text-align: center;
line-height: 50px;
}
a {
text-decoration: none;
color: black;
display: inline-block;
}
a:hover {
background-color: lightgray;
color: orange;
}
</style>
<body>
<!-- 新浪导航 -->
<div id="tou"></div>
<div id="sina">
<ul>
<li><a href="">新浪导航</a></li>
<li><a href="">新浪导航</a></li>
<li><a href="">新浪导航</a></li>
<li><a href="">新浪导航</a></li>
</ul>
</div>
</body>
</html>
