文章目录
- CSS学习
- 00. 使用CSS样式的方式
- 0.5 CSS引入方式总结
- 01. 定义样式表
- 02. 常见属性
- 03. 字体属性
- 04. 背景属性
- 05. 文本属性
- 06. 边框属性
- 07. 列表属性
- 08. CSS选择器
- 09. Chrome 调试工具
- 10. Emmet语法
- 11. CSS 复合选择器
- 12. CSS的元素显示模式
- 13. CSS的背景
- 14. CSS 的三大特性
- 15 盒子模型
- 16. CSS 浮动
- 17. 学成在线案例
- 18. CSS定位
- 19. CSS 高级技巧
- 20.HTML5 和CSS3提高
- 写在最后的话:
这里是一段防爬虫文本,请读者忽略。
本文原创首发于CSDN,作者IDYS
博客首页:https://blog.csdn.net/weixin_41633902/
本文链接:https://blog.csdn.net/weixin_41633902/article/details/115503008
未经授权,禁止转载!恶意转载,后果自负!尊重原创,远离剽窃!
CSS学习
00. 使用CSS样式的方式
0.0 HTML的局限性
-
HTML
,只关注内容的语义,而不会去在意内容的样式 -
CSS
是层级样式表(cascading style sheets
)的简称 -
有时我们也称之为
css
样式表或者级联表 -
CSS
也是一种标记语言 -
CSS
主要用于设置HTML
页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式 -
CSS
让我们的网页更加丰富多彩,布局更加灵活自如。简单理解:CSS
可以美化HTML
,让HTML
更加漂亮,让页面布局更加简单 -
总结:
HTML
主要做结构、显示元素内容CSS
美化HTML
,布局网页CSS
最大价值:由HTML
专注做结构呈现,样式交给CSS
,即结构(HTML)与样式(CSS)相分离
0.1 HTML <! DOCTYPE>声明标签
- 定义和用法:
<!DOCTYPE>
声明必须是HTML
文档的第一行,位于<html>
标签之前。<!DOCTYPE>
声明不是 HTML 标签;它是指示web
浏览器关于页面使用哪个HTML
版本进行编写的指令。在HTML 4.01
中,<!DOCTYPE>
声明引用DTD
,因为HTML 4.01
基于SGML
。DTD
规定了标记语言的规则,这样浏览器才能正确地呈现内容。HTML5
不基于SGML
,所以不需要引用DTD
。
0.2 内链(行内)样式表(行内式)
- 定义和用法
<body style="backgroud-color:green;margin:0 ;padding=0;">
</body>
style
其实就是标签的属性- 在双引号中间,写法要符合
CSS
规范- 可以控制当前的标签设置样式
- 由于书写繁琐,并且没有体现出结构与样式相分离的思想,所以不推荐大量使用,只要对当前元素添加简单样式的时候,可以考虑使用
0.3 嵌入式(内部)样式表(嵌入式)
- 定义和用法
<style type="text/css"></style>
<style>
标签理论上可以放在HTML
文档的任何地方,但是一般需要将样式放在<head></head>
中- 通过此种方式,可以方便控制当前整个页面的元素样式设置
- 使用内部样式表设定
CSS
,通常也被成为嵌入式引入,这种方式是我们练习时常用的方式
0.4 引入式(外部)样式表(链接式)
-
实际开发都是外部样式表,适合于样式比较多的情况,核心是:样式单独写到
CSS
文件中,之后把CSS
文件引入到HTML
页面中使用 -
引入外部样式表分为两步:
- 新建一个后缀名为
.css
的样式文件,把所有CSS
代码都放入此文件中。 - 在
HTML
页面中,使用<link>
标签引入这个文件
- 新建一个后缀名为
-
定义和用法
<link rel="StyleSheet" type="text/css" href="style.css">
- 属性说明
属性 | 作用 |
---|---|
rel | 定义当前文档与被链接文档之间的关系,在这里需要指定为stylesheet ,表示被链接的文档是一个样式表文件 |
herf | 定义所链接外部样式表文件的URL ,可以是相对路径,也可以是绝对路径 |
0.5 CSS引入方式总结
样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
---|---|---|---|---|
行内样式表 | 书写方便,权重高 | 结构样式混写 | 较多 | 控制一个标签 |
内部样式表 | 部分结构和样式想分离 | 没有彻底分离 | 较多 | 控制一个页面 |
外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多 | 控制多个页面 |
0.6 CSS 语法规范
-
CSS
规则由两个主要的部分构成:选择器以及一条或者多条声明。 -
例如:
h1 {
color:red;
font-size:25px;
}
/*
其中 p 为选择器
color:red 为声明
color 为属性
red 为值
*/
- 选择器,是用于指定
CSS
样式的HTML
标签,花括号内是对该对象设置的具体样式 - 属性和属性值以键值对的形式出现
- 属性是对指定的对象设置的样式属性,例如字体大小,文本颜色等
- 属性和属性值之间用英文
:
分开 - 多个键值对之间用英文
;
进行区分
0.7 CSS代码风格
- 展开格式:建议每一行一个声明,如:
p{
color: red;
font-size: 25px;
}
- 全部使用小写字母
- 属性值前面和冒号后面保留一个空格;选择器(标签)和大括号中间保留空格
01. 定义样式表
1.1 HTML标记定义
-
<p></p>
-
定义
<p>
的样式
p{
属性1:属性值1;
属性2:属性值2
}
p
可以叫做选择器,定义那个标记中的内容执行其中的样式,一个选择器可以控制若干个样式属性,他们之间需要用英语的“;”隔开,最后一个可以不应加”;“
1.2 Class 定义
- 用法:
<p class="p">
</p>
class
定义是以.
开始
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS learning</title>
<style type="text/CSS">
.p {
color: green;
font-size: 28px;
}
.p p{
color: red;
font-size: 40px;
}
.i {
color: yellow;
background-color: red
}
</style>
</head>
<body>
<div class="p">
hello world
<p>my name is li hua</p>
<i class="i">this is italics</i>
</div>
</body>
</html>
- 显示结果为
1.3 ID 选择器
ID
定义
<p id="p">
</p>
ID
定义是以#
开始的- 用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ID 选择器</title>
<style type="text/css">
#test {
color:blue;
font-size: 40px;
}
#test p{
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<div id="test">
<p>测试段落</p>
<u>测试下划线</u>
<br>
<i>测试斜体</i>
</div>
</body>
</html>
- 最终显示
1.4 优先级问题
-
ID
选择器 >Class
选择器 >HTML
标记 -
同级时选择离元素最近的一个
#p{ color:red}
#p{ color:#f60}
/* 执行颜色为 #f60 */
1.5 组合选择器(同时控制多个元素)
- 用法
h1,h2,h3,.div,#eye{ font-size: 14px; color:red;}
选择器组合可以使用“.”隔开
1.6 伪元素选择器
a:link
正常连接的样式a:hover
鼠标放上去的样式a:active
选择链接时的样式a:visited
已经访问的链接样式
02. 常见属性
2.1 颜色属性
color
属性定义文本的颜色
color:green
color:##ff6600
color:#f60 /* 简写式 */
rgb
颜色表示:color:rgb(红(r),绿(g),蓝(b))
,红®、绿(G)、蓝(B)每个的取值范围0~255
,也可以0%~100%
之间取值
红色
color:rgb(255,0,0)
绿色
color:rgb(0,255,0)
蓝色
color:rgb(0,0,255)
rgba
颜色显示:R
代表红色(Red)、Green
(绿色)、Blue
(蓝色)、和Alpha
的色彩空间透明度
color:rgba(255,255,255,1) /* 透明度取值范围为 0到1 */
- 演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>颜色属性</title>
<style type="text/css">
h1 {
color: rgba(0,0,0,1);
}
h2 {
color: rgba(0,0,0,0.75);
}
h3 {
color: rgba(0,0,0,0.5);
}
h4 {
color: rgba(0,0,0,0.25);
}
h5 {
color: rgba(0,0,0,0.0);
}
</style>
</head>
<body>
<h1>中文字体</h1>
<h2>中文字体</h2>
<h3>中文字体</h3>
<h4>中文字体</h4>
<h5>中文字体</h5>
</body>
</html>
- 最终显示结果
03. 字体属性
3.1 font-size
字体大小
px
:设置一个固定的值,px
(像素)大小是我们网页的最常用单位,谷歌浏览器默认文字大小为16px
,不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小。使用通配符*
去匹配修改字体大小,它对标题无效,标题标签字体大小需要%
:父元素的百分比smaller
:比父元素更小larger
:比父元素更大inherit
:继承父元素的
3.2 font-family
定义字体类型
font-family
:微软雅黑,serif
;- 可以使用
,
隔开,以确保当字体不存在的时候直接使用下一个 - 例如:
p{
font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif;
}
h1{
font-family: '宋体';
}
- 各种字体之间必须使用英文状态下的逗号隔开
- 一般情况下,如果有空格隔开的多个单词组成的字体,加引号
- 尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示
- 最常见的几个字体:
body
3.3 font-weight
字体加粗
-
normal
:默认值 -
bold
:粗体 -
lighter
:更粗 -
bolder
:更细 -
选项各有:100、200、300~900;
normal=400
;bold=700
,必使是整百数,注意后面不要带单位。正常字体相当于number
值等于400
3.4 font-style
字体样式
normal
:正常italic
:斜体oblique
:倾斜inherit
:继承
注意:平时我们很少给文字加斜体,反而要给斜体标签
(em, i)
改为不倾斜字体
3.5 font-variant
小型大写字母显示文本
normal
:标准small-caps
:小型大写字母显示文本inherit
:继承
3.6 font
字体复合属性
- 字体属性可以把以上文字样式综合来写,这样可以更节约代码
body{
font: font-style font-weight font-size/line-weight font-family;
}
使用
font
属性时,必须按上面语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格隔开不需要设置的属性可以省略(取默认值),但必须保留
font-size
和font-family
属性,否则font
属性将不起作用
3.7 字体属性总结
属性 | 表示 | 注意点 |
---|---|---|
font-size | 字号 | 我们通常使用的单位为px 像素,一定要跟上单位 |
font-family | 字体 | 实际工作按照团队约定来写字体 |
font-weight | 字体粗细 | 记住加粗是700 或者bold 不加粗是normal 或者400 ,记住数字不要带单位 |
font-style | 字体样式 | 记住倾斜是italic ,不倾斜是normal ,工作中我们最常用的是normal |
font | 字体连写 | 字体连写是有顺序的,不能随意换位置;其中字号和字体必须同时出现 |
04. 背景属性
4.1 background-color 背景颜色
4.2 backgroud-img 背景图片
backgroud-imgage:url(图片路径)
backgroud-images:none
4.3 `background-repeat 背景重复
repeat
:重复平铺满repeat-x
:向X
轴重复repeat-y
:向Y
轴重复no-repeat
:不重复
4.4 background-position 背景位置
- 横向(left、center、right)
- 纵向(top、center、bottom)
background-position:(x)(y)
- 基本演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>颜色属性</title>
<style type="text/css">
/*body{
background-image: url(./img/01.jpg);
background-repeat: no-repeat;
background-position: 100px 300px;
}*/
div{
height: 900px;
width: 900px;
background: red url(./img/01.jpg) no-repeat 100px 100px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
- 呈现结果
05. 文本属性
5.1 text-align 横向排列
left
:居左center
:居中right
:居右
5.2 line-height 文本行高
%
基于字体大小百分比设置行高- 数值设置固定值行高
5.3 text-indent 首行缩进
%
父元素的百分比px
固定值,默认0
inherit
继承em
是一个相对单位,就是当前元素(font-size
)1个文字的大小,如果当前元素没有设置大小,则会按照父元素的1
个文字大小text-indent
属性用来指定文本的第一行的缩进,通常是将段落的首行缩进
5.4 letter-spacing 字符间距
normal
:默认length
设置具体的数值(可以设置负值)inherit
继承
5.5 word-spacing 单词间距
normal
:默认px
设置固定值inherit
继承
5.6 direction 文字方向
ltr
从左到右,默认值rtl
:从右到左inherit
:继承
5.7 text-transform 文本大小写
none
:默认capitalize
:每个单词首字母大写开头uppercase
:定义仅有大写字母lowercase
:定义无大写字母,仅有小写字母inherit
:规定应该从父元素继承text-transform
属性的值
5.8 text-decoration 装饰文本
text-decoration
属性规定添加到文本的装饰,可以给文本添加下划线、删除线、上划线等,例如
div{
text-decoration: none;
}
- 属性值
属性值 | 描述 |
---|---|
none | 默认。没有装饰线(最常用) |
underline | 下划线。链接a 自带下划线(常用) |
overline | 上划线。(几乎不用) |
line-through | 删除线。(不常用) |
06. 边框属性
6.1 边框风格border-style
border-style
:统一风格(简写风格)- 边框风格样式的属性值
none
:无边框solid
:直线边框dashed
:虚线边框dotted
:点状边框double
:双线边框groove
:凸槽边框ridge
:垄状边框inset
:inset
边框outset
:ouset
边框inherit
:继承
6.2 边框宽度border-width
border-width
:统一风格border-top-width
:上边边框宽度border-bottom-width
:下边边框宽度border-left-width
:左边边框宽度border-right-width
:右边边框宽度
- 边框属性值
thin
:细边框medium
:中等边框thick
:粗边框px
:固定值的边框inherit
:继承
-
边框颜色
border-color
border-color
:统一风格
-
border-top-color
:上边边框颜色 -
border-bottom-color
:下边边框颜色 -
border-left-color
:左边边框颜色 -
border-right-color
:右边边框颜色 -
属性值
RGB
:rgb(255,255,255)
RGBA
:rgba(255,255,255,1)
- 颜色名:
red
- 十六位进制:
#ff0
、#ff0000
inherit
:继承
-
简写方式
border
:solid
、2px
、#f60
07. 列表属性
7.1 list-style-type
:标记的类型
none
:无标记disc
:默认。标记是实心圆circle
:标记是空心圆square
:标记是实心方块decimal
:标记是数字decimal-leading-zero
:0
开头的数字标记(01
,02
,03
等。)lower-roman
:小写罗马数字upper-roman
:大写罗马数字lower-alpha
:小写英文字母upper-alpha
:大写英文字母lower-greek
:小写拉丁字母lower-latin
:小写拉丁字母upper-latin
:大写拉丁字母hebrew
:传统的希伯来编号方式georgian
:传统的乔治亚编码方式armenian
:传统的亚美尼亚编号方式cjk-ideographic
:简单的表意数字
7.2 list-style-position 标记的位置
inside
:列表项目标记放置在文本以内,且环绕文本根据标记对齐outside
:默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐inherit
:规定应该从父元素继承list-style-position
属性的值
7.3 list-style-image
设置图像列表标记
-
list-style-image
URL
:图像路径none
:默认。无图形被显示inherit
:规定应该从父元素继承list-style-image
属性的值
7.4 简写方式
list-style:square inside url('/i/arrow.jpg');
08. CSS选择器
8.1 选择器分类
选择器可以分为两大类,分别为:
- 基础选择器
- 符合选择器
- 基础选择器是由单个选择器组成的
- 基础选择器又包括:标签选择器、类选择器、
id
选择器和通配符选择器
8.2 标签选择器
-
标签选择器(元素选择器)是指用
HTML
标签名称作为选择器,按标签名称分类,为页面某一类标签指定统一的CSS
样式 -
作用
- 标签选择器可以把某一类标签全部选择出来,比如所有的
<div>
标签和所有的<span>
标签
- 标签选择器可以把某一类标签全部选择出来,比如所有的
-
优点
- 能快速为页面中同类型的标签设置统一样式
-
缺点
- 不能设计差异化样式,只能选择全部的当前标签
8.3 类选择器
- 如果想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用类选择器
- 类选择器在
HTML
中以CSS
属性表示,在CSS
中,类选择器以一个点.
号显示
- 注意:
- 类选择器使用
.
(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的) - 可以理解为给这个标签起了一个名字,来表示
- 长名称或词组可以使用中横线来为选择器命令
- 不要使用纯数字或者中文命名,尽量使用英文字母来表示
- 命名要有意义,尽量使别人一眼就知道这个类名的目的
8.4 类选择器-多类名
- 我们可以给一个标签指定多个类名,从而达到更多的选择目的。这些类名都可以选出这个标签
- 简单理解就是一个标签有多个名字
- 多类名使用方式
<div class="red font35">idys</div>
- 在标签
class
属性中写多个类名 - 多个类名中间必须用空格分开
- 这些标签可以分别具有这些类名的样式
- 多类名开发中使用场景
- 可以把一些标签元素相同的样式(共同的部分)放到一个类里面
- 这些标签都可以调用这个公共的类,然后调用自己独有的类
8.5 id选择器
id
选择器可以为标有特定id
的HTML
元素指定特定的样式HTML
元素以id
属性来设置id
选择器,CSS
中id
选择器以#
来定义
- 语法:
#id-name{
属性1: 属性值1
}
- 例如:
#nav{
color: red;
}
注意:id
属性只能在每个HTML
文档中出现一次,口诀:样式#
定义,结构id
调用,只能调用一次,别人切勿使用
id
选择器和类选择器的区别
- 类选择器(
class
)好比人的名字,一个人可以有多个名字,同时一个名字也可以被多个人使用 id
选择器好比人的身份证号码,全中国是唯一的,不得重复
8.6 通配符选择器
在css
中,通配符选择器使用*
定义,它表示选取页面中所有元素(标签)
- 语法
* {
属性1: 属性值1;
}
通配符选择器不需要调用,自动就给所有的元素使用样式
8.7 基础选择器总结
基础选择器 | 作用 | 特点 | 使用情况 |
---|---|---|---|
标签选择器 | 可以选出所有相同的标签,比如p | 不能差异化选择 | 较多 |
类选择器 | 可以选出一个或多个标签 | 可以根据需求选择 | 非常多 |
id 选择器 | 一次只能选择1 个标签 | ID 属性只能在每个HTML 文档中出现一次 | 一般情况和js 搭配 |
通配符选择器 | 选择所有标签 | 选择的太多,有部分不需要 | 特殊情况使用 |
09. Chrome 调试工具
Ctrl+滚轮
可以放大开发者工具代码大小- 左边是
HTML
元素结构,右边是CSS
样式 - 右边
CSS
样式可以改动数值(左右箭头或者直接输入)和查看颜色 Ctrl+0
复原浏览器- 如果点击元素,发现右侧没有样式引入,及有可能是类名或者样式引入错误
- 如果有样式,但是样式前面有黄色叹号提示,则是样式属性书写错误
10. Emmet语法
10.1 前述
Emmet
语法的前身是Zen coding
,它使用缩写,来提高html/css
的编写速度,VS code
内部已经集成该语法
10.2 快速生成HTML
结构语法
- 生成标签直接输入标签名,按
tab
键即可,比如:div
然后tab
键,就可以生成<div></div>
- 如果想要生成多个相同标签,加上
*
就可以了,比如:div*3
就可以快速生成3个div
标签 - 如果有父子级关系标签,就可以用
>
,比如ul>li
就可以了 - 如果有兄弟关系的标签,用
+
就可以了,比如div+p
- 如果生成带有类名或者
id
名字的,直接写.demo
或者#two
然后tab
键就可以了 - 如果生成的
div
类名是有顺序的,可以用自增符号$
- 如果想要在生成的标签内部写内容可以用
{}
表示
生成基本的
html
文档可以使用html:5
然后安装tab
键或者输入!
然后安装tab
键
.demo
后按住tab
键,会生成div
标签class
书写为demo
- 当你输入
.demo$*5
会出现如下
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>
- 输入
div{你是gay}*5
会出现如下内容
<div>你是gay</div>
<div>你是gay</div>
<div>你是gay</div>
<div>你是gay</div>
<div>你是gay</div>
- 输入
p.demo${我是基佬}*10
,会出现如下内容
<p class="demo1">我是基佬</p>
<p class="demo2">我是基佬</p>
<p class="demo3">我是基佬</p>
<p class="demo4">我是基佬</p>
<p class="demo5">我是基佬</p>
<p class="demo6">我是基佬</p>
<p class="demo7">我是基佬</p>
<p class="demo8">我是基佬</p>
<p class="demo9">我是基佬</p>
<p class="demo10">我是基佬</p>
10.3 CSS快速生成语法
- 输入
w200
,按住tab
键会出现
width: 200px;
- 输入
ti200
会出现
text-indent: 200px;
10.4 快速格式化代码
-
VS Code
快速格式化代码:shift+alt+f
-
也可以设置当我们保存页面的时候自动格式化代码
- 【文件】->【首选项】->【设置】
- 搜索
emmet.include
、 - 在
settings.json
下【用户】中添加如下语句
"editor.formatOnType": true,
"editor.formatOnSave": true
只需要设置一次即可,以后都可以自动保存格式化代码
- 新版本直接搜索在设置项搜索
format
,然后勾选对应的保存时格式化即可
11. CSS 复合选择器
11.1 什么是复合选择器
在CSS
中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基础选择器进行组合形成的
-
复合选择器可以更准确、更高效的选择目标元素(标签)
-
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的
-
常用的复合选择器包括:
- 后代选择器
- 子选择器
- 并集选择器
- 伪类选择器
11.2 后代选择器(重要)
- 后代选择器又称之为包括选择器,可以选择父元素里面子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代
元素1 元素2 { 样式声明 }
上述语法表示选择元素1里面的所有元素2(后代元素)
- 例如
ul li { 样式声明 }
/*
选择ul 里面所有的li标签元素
*/
-
元素1和元素2中间用空格隔开
-
元素1是父级,元素2是子级,最终选择的是元素2
-
元素可以是儿子,也可以是孙子等,只要是元素1的后代即可
-
元素1和元素2可以是任意基础选择器
11.3 子选择器(重要)
子元素选择器(子选择器)只能作为某元素的最近一级子元素,简单理解就是选亲儿子元素
- 语法:
元素1>元素2 {样式声明}
- 元素1和元素2中间用大于号隔开
- 元素1是父级,元素2是子级,最终选择的是元素2
- 元素2必须是亲儿子,其孙子、重孙子之类的都不归他管,你也可以叫他亲儿子选择器
11.4 并级选择器(重要)
- 并级选择器可以选择多组标签,同时为它们定义相同的样式。通常用于集体声明
- 并集选择器是各选择器通过英文逗号
,
连接而成,任何形式的选择器都可以作为并集选择器的一部分 - 语法:
元素1,元素2 {样式声明}
上述语法表示选择元素1和元素2
- 例如:
ul,div {样式声明}
- 元素1和元素2中间用逗号隔开
约定的语法规范,我们并集选择器喜欢竖着写。一定要注意,最后一个选择器不需要加逗号
元素1和元素2中间用逗号隔开
逗号可以理解为和的意思
并集选择器通常用于集体声明
11.5 伪类选择器
-
伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加效果,或选择第1个,第n个元素
-
伪类选择器书写最大的特点是用冒号
:
表示,比如:hover
、:first-child
-
伪类选择器很多,比如有链接伪类、结构伪类等,所以这里先给大家讲解常用的链接伪类选择器
11.5 链接伪类选择器
a:link
:选择所有未被访问的链接a:visited
:选择所有已经被访问的链接a:hover
:选择鼠标指针位于其上的链接a:active
:选择活动链接(鼠标按下未弹起的链接)
- 链接伪类选择器注意事项
- 为了确保生效,请按照
LVHA
的顺序声明:link-visited-hover-active
- 因为
a
链接在浏览器中具有默认样式,所有我们实际工作中都需要给链接单独指定样式
11.6 focus伪类选择器
:focus
伪类选择器用于选取获得焦点的表单元素
焦点就是光标,一般情况<input>
类表单元素才能获取,因此这个选择器也主要针对表单元素来说
input:focus {
background-color: orange;
color: white;
}
11.7 复合选择器总结
- 表格如下
选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
---|---|---|---|---|
后代选择器 | 用来选择后代元素 | 可以是子孙后代 | 较多 | 符号是空格.nav a |
子代选择器 | 选择最近一级元素 | 只选亲儿子 | 较少 | 符号是大于.nav>p |
并集选择器 | 选择某些相同样式的元素 | 可以用于集体声明 | 较多 | 符号是逗号.nav,.header |
链接伪类选择器 | 选择不同状态的链接 | 跟链接相关 | 较多 | 重点记住a{} 和a:hover |
:focus 选择器 | 选择获得光标的表单 | 跟表单有关 | 较少 | input:focus 记住这个写法 |
12. CSS的元素显示模式
12.1 前述
了解元素的显示模式可以更好的让我们布局页面
- 什么是元素的显示模式
- 元素显示模式的分类
- 元素显示模式的转换
12.2 什么是元素显示模式
- 作用:网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页
元素显示模式就是元素(标签)以什么方式进行显示,比如:div
自己占一行,比如一行可以放多个span
HTML
元素一般分为块元素和行内元素两种类型
12.3 块元素
常见的块级别元素有
<h1>~<h6>
<p>
<div>
<ul>
<ol>
<li>
其中,<div>
就是典型的块级元素
块级元素特点
- 独占一行
- 高度、宽度、外边距以及内边距都可以控制
- 宽度默认是容器(父级宽度)的
100%
- 是一个容器及盒子,里面可以放行内或者块级别元素
注意:
- 文字类的元素内不能使用块级元素
<p>
标签主要用于存放文字,因此<p>
里面不能放块级元素,特别是不能放<div>
- 同理,
<h1>~<h6>
等都是文字类块级标签,里面也不能放其他块级元素
12.4 行内元素
常见的行内元素有<a>
、<strong>
、<b>
、<em>
、<i>
、<del>
、<s>
、<ins>
、<u>
、<span>
等,其中<span>
标签是最典型的行内元素。有的地方也将行内元素称之为内联元素
行内元素特点
- 相邻行内元素在一行上,一行可以显示多个
- 高、宽直接设置是无效的
- 默认宽度就是它本身内容的宽度
- 行内元素只能容纳文本或其他行内元素
注意
- 链接里面不能再放链接
- 特殊情况下链接
<a>
里面可以放块级元素,但是给<a>
转换一下块级模式最安全
12.5 行内块元素
在行内元素中有几个特殊的标签—— <img>
、<input>
、<td>
,它们同时具有块级元素和行内元素的特点,有些资料称它们为行内块元素
行内块元素的特点
- 和相邻行内元素(行内块)在一行上,但是它们之间有空白缝隙。一行可以显示多个(行内元素特点)
- 默认宽度就是它本身内容的宽度(行内元素特点)
- 高度、行高、外边距以及内边距都可以控制(块级元素特点)
12.6 元素显示模式总结
元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
---|---|---|---|---|
块级元素 | 一行只能放一个块级元素 | 可以设置宽度和高度 | 容器的100% | 容器级可以包含任何标签 |
行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽度和高度 | 它本身内容的宽度 | 容纳文本或则其他行内元素 |
行内块元素 | 一行放多个行内块元素 | 可以设置宽度和高度 | 它本身内容的宽度 |
12.7 元素显示模式转换
- 特殊情况下,我们需要元素模式的转换,简单理解:一个模式的元素需要另外一个模式的特性
- 比如想要增加链接
<a>
的触发范围 - 转换为块元素:
display:block
- 转换为行内元素:
dispaly:line
- 转换为行内块元素:
display:inline-block
12.8 单行文字垂直居中的代码
CSS
没有给我们提供文字垂直居中的代码,这里我们可以使用一个小技巧来实现
解决方案:让文字的行高等于盒子的高度,就可以让文字在当前盒子内垂直居中
简单理解:行高的上空隙和下空隙把文字挤到中间了,如果行高小于盒子高度,文字会偏上,如果行高大于盒子高度,文字偏下
13. CSS的背景
通过CSS
背景属性,可以给页面元素添加背景样式
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等
13.1 背景图片
background-images
属性描述了元素的背景图像。实际开发常见于logo
或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置(精灵图也是一种运用场景)
background-images: none | url (url)
- 图表如下
参数值 | 作用 |
---|---|
none | 无背景图(默认的) |
url | 使用绝对或者相对地址指定背景图像 |
13.2 背景平铺
- 如果需要在
html
页面上对背景图片进行平铺、可以使用background-repeat
属性 background-repeat
属性值:repeat
:背景图像在纵向和横向上平铺(默认的)no-repeat
:背景图像不平铺repeat-x
:背景图像在横向上平铺repeat-y
:背景图像在纵向上平铺
- 页面元素既可以添加背景图片又可以添加背景颜色,只不过背景图片的图层会在背景颜色图层上边
13.3 背景图片位置
利用background-position
属性可以改变图片在背景中的位置
- 例如
background-position: x y;
参数代表的意思是 x坐标和y坐标。可以使用方位名词或者精确单位
参数值 | 说明 |
---|---|
length | 百分数 | 由浮点数字和单位标识符组成的长度值 |
position | top |
- 参数是方位名词
- 如果指定的两个值都是方位名词,则两个值前后顺序无关、比如:
left top
和top left
效果一致 - 如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐
- 参数是精确单位
- 如果参数值是精确坐标,那么第一个肯定是
x
坐标,第二个一定是y
坐标 - 如果只指定一个数值,那该数值一定是
x
坐标,另一个默认垂直居中
- 参数是混合单位
- 如果指定两个值是精确单位和方位名词混合使用,则第一个值是
x
坐标,第二个值是y
坐标
13.4 背景图像固定(背景附着)
background-attachment
属性设置背景图像是否固定或者随着页面的其余部分滚动background-attachment
后期可以制作视差滚动的效果
-
background-attachment:scroll | fixed
-
表格示意
参数 | 作用 |
---|---|
scroll | 背景图像是随着对象内容滚动 |
fixed | 背景图像固定 |
13.5 背景复合写法
当使用简写属性时,没有特定的书写顺序,一般习惯约定顺序为
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
transparent
属性用来指定全透明色彩
13.6 背景色半透明
CSS3
为我们提供了背景颜色半透明的效果
background: rgba(0,0,0,0.3)
- 最后一个参数是
alpha
透明度,取值范围在0~1
之间 - 我们习惯把
0.3
的0
省略掉,写为background: rgba(0,0,0,.3)
- 注意:背景半透明是指盒子背景半透明,盒子里面的内容不受影响
CSS3
新增属性,是IE9+
版本浏览器才支持的
13.7 背景总结
属性 | 作用 | 值 |
---|---|---|
background-color | 背景颜色 | 预定义的颜色值/十六进制/RGB 代码 |
background-image | 背景图片 | url(图片路径) |
background-repeat | 是否平铺 | repeat/no-repeat/repeat-x/repeat-y |
background-position | 背景位置 | length/position |
background-attachment | 背景附着 | scroll(背景滚动)/fixed(背景固定) |
背景简写 | 书写更简单 | 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置 |
背景色半透明 | 背景颜色半透明 | background: rgba(0,0,0,0.3) ;后面必须是4个值 |
背景图片:实际开发常见于logo
或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置。(精灵图也是一种运用场景)
14. CSS 的三大特性
css
有三个非常重要的三个特性:层叠性、继承性、优先级
14.1 层叠性
相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题
层叠性原则:
- 样式冲突,遵循的原则是就近原则,那个样式离结构近,就执行那个样式
- 样式不冲突,不会层叠
14.2 继承性
现实中的继承:我们继承了父亲的姓
CSS
中的继承:子标签会继承父标签的某些样式,如文本颜色和字号。简单的理解就是子承父业
子元素可以继承父元素的样式(text-
,font-
,line-
)这些元素开头的可以继承,以及color
属性
行高的继承性
body {
font: 12px/1.5 Microsoft YaHei;
}
/*
1.5 代表 1.5 倍行高
*/
- 行高可以跟单位也可以不跟单位
- 如果子元素没有设置行高,则会继承父元素的行高
1.5
- 此时子元素的行高是:当前子元素的文字大小
*1.5
14.3 优先级
当同一个元素指定多个选择器,就会有优先级的产生
- 选择器相同,则执行层叠性
- 选择器不同,则根据选择器权重执行
- 选择器权重如下表所示
选择器 | 选择器权重 |
---|---|
继承或者* | 0,0,0,0 |
元素选择器 | 0,0,0,1 |
类选择器,伪类选择器 | 0,0,1,0 |
ID 选择器 | 0,1,0,0 |
行内样式style="" | 1,0,0,0 |
!important 重要的 | 无穷大 |
- 基本演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>优先级演示</title>
<style>
#test {
background-color: red;
}
.demo {
background-color: purple;
}
div {
height: 300px;
width: 300px;
background-color: black: !important;
;
}
</style>
</head>
<body>
<div class="demo" id="test" style="background-color: orange;"></div>
</body>
</html>
优先级注意点
- 权重是有4组数字组成,但是不会有进位
- 可以理解为类选择器永远大于元素选择器,
id
选择器永远大于类选择器,以此类推 - 等级判断从左到右,如果某一位数值相同,则判断下一位数值
- 可以简单记忆法:通配符号和继承权重为
0
,标签选择器为1,类(伪类)选择器为10
,id
选择器100
,行内样式表为1000
,!important
无穷大 - 继承的权重是
0
,如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重都是0
a
链接浏览器默认制定了一个样式,蓝色。
权重叠加
权重叠加:如果是复合选择器,则会有权重叠加,需要计算权重
- 例如
ul li {
color: green;
text-decoration: none;
}
li {
color: blue;
text-decoration: none;
}
.nav {
color: yellow;
text-decoration: none;
list-style: none;
}
/*
ul li 的权重值为 0,0,0,1 + 0,0,0,1 = 0,0,0,2
li 的权重值为 0,0,0,1
.nav li 的权重值为 0,0,1,0 + 0,0,0,1 = 0,0,1,1
*/
权重可以叠加但是不会进位
计算下列选择器的权重
.nav ul li ---> 0,0,0,3
.nav ul l ---> 0,0,1,2
a:hover ---> 0,0,1,1
.nav a ---> 0,0,1,1
15 盒子模型
页面布局要学习三大核心,盒子模型,浮动和定位。学习好盒子模型能非常好的帮助我们布局页面
15.1 看透网页布局的本质
网页布局过程:
- 先准备好相关的网页元素,网页元素基本都是盒子
Box
- 利用
CSS
设置好盒子样式,然后摆放到相应位置 - 往盒子里面装内容
网页布局的核心本质:利用CSS
摆放盒子
15.2 盒子模型(Box Model)组成
所谓盒子模型:就是把HTML
页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器
CSS
盒子模型本质上是一个盒子,封装周围的HTML
元素,它包括:边框、外边距、内边距、和实际内容
border
content
内容padding
内边距- 外边距
margin
15.3 边框(border)
border可以设置元素的边框,边框有三部分组成:边框宽度(粗细)、边框样式、边框颜色
- 语法:
border: border-width || border-style || border-color
- 图表
属性 | 作用 |
---|---|
border-width | 定义边框粗细,单位是px |
border-style | 边框的样式 |
border-color | 边框颜色 |
border-style
边框样式属性
属性值 | 作用 |
---|---|
none | 无边框 |
solid | 直线边框 |
dashed | 虚线边框 |
dotted | 点状边框 |
double | 双线边框 |
groove | 凸槽边框 |
ridge | 垄状边框 |
inset | inset 边框 |
outset | ouset 边框 |
inherit | 继承 |
CSS
边框属性允许你指定一个元素边框的样式和颜色
边框简写
border: 1px solid red; 没有顺序
-
练习:给一个
200*200
的盒子,设置上边框为红色,其余边框为蓝色(提示:一定要注意边框的层叠性) -
作用答案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>边框属性</title>
<style>
div {
width: 200px;
height: 200px;
border: 5px solid blue;
border-top: 5px solid red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
15.4 表格的细线边框
border-collapse
属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框
- 语法
border-collapse: collapse;
collapse
单词是合并的意思border-collapse:collapse
;表示相邻边框合并在一起
15.5 边框会影响盒子实际大小
边框会额外增加盒子的实际大小。因此我们有两种方案解决:
- 测量盒子大小的时候,不含边框
- 如果测试的时候包含边框,则需要
width/height
减去边框宽度
15.6 内边距(padding)
padding用于设置内边距,即边框与内容之间的距离
- 图表如下:
属性 | 作用 |
---|---|
padding-left | 左内边距 |
padding-right | 右内边距 |
padding-top | 上内边距 |
padding-bottom | 下内边距 |
padding
属性(简写属性)可以有一到四个值
值的个数 | 表达含义 |
---|---|
padding:5px | 1 个值,代表上下左右都有5 像素内边距 |
padding:5px 10px | 2个值,代表上下内边距5 像素,左右内边距是10 像素 |
padding:5px 10px 20px | 3 个值,代表上内边距5 像素,左右内边距10 像素,下内边距20 像素 |
padding:5px 10px 20px 30px | 4 个值,代表上内边距5 像素,右内边距10像素,下内边距20 像素,左内边距30 像素 |
当我们给盒子指定padding
值之后,发生了2件事:
- 内容和边框有了距离,添加了内边距
padding
影响了盒子实际大小
也就是说,如果盒子已经有了宽度和高度,此时再指定内边框,会撑大盒子
解决方案
如果保证盒子跟效果图大小保持一致,则让width/height
减去多出来的内边距大小即可
如果盒子本身没有指定width/height
属性,则此时padding
不会撑开盒子大小
15.7 外边距(margin)
margin
属性用于设置外边距,即控制盒子和盒子之间的距离
属性 | 作用 |
---|---|
margin-left | 左外边距 |
margin-right | 右外边距 |
margin-top | 上外边距 |
margin-bottom | 下外边距 |
15.8 外边距典型应用
外边距可以让块级盒子水平居中,但是必须满足两个条件
- 盒子必须指定了宽度
- 盒子左右的外边距都设置为
auto
常见的写法,以下三种都可以
margin-left:auto; margin-right:auto
margin: auto
margin: 0 auto
行内元素或者行内块元素水平居中,只需要给其父元素添加
text-align: center
即可
15.9 外边距合并
- 使用
margin
定义块元素的垂直外边距时,可能会出现外边距的合并
相邻块元素垂直外边距的合并
当上下相邻的两个块元素(兄弟关系)相遇时,如果上面的块元素有下边距margin-bottom
,下面的元素有上边距margin-top
,则它们之间的垂直间距不是margin-bottom
与margin-top
之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并
解决方案:
尽量只给一个盒子添加margin
值
嵌套块元素垂直外边距的塌陷
对于两个嵌套关系(父子关系)的块元素,父元素有上边距同时子元素也有上边距,此时父元素会塌陷较大的外边距值
解决方案
- 可以为父元素定义上边框
- 可以为父元素定义内边框
- 可以为父元素添加
overflow:hidden
- 父元素设置
position: relative
,子元素设置为position: absolute
还有其他方法,比如浮动、固定。绝对定位的盒子不会有塌陷问题。
transparent
为透明色
15.10 清除内外边距
网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不一致。因此我们在布局前,首先要清除下网页元素的内外边距
* {
padding: 0;
margin: 0;
}
注意:行内元素为了照顾兼容性,尽量只设置左右外边距,不要设置上下内外边距。但是转换为块级和行内块元素就可以。
15.11 PS基本操作
- 文件-> 打开:可以打开我们要测量的图片
CTRL+R
:可以打开标尺,或者视图->标尺- 右击标尺,把里面的单位改为像素
Ctrl+加号(+)
可以放大视图,Ctrl+减号(-)
可以缩小视图- 按住空格键,鼠标可以变成小手,拖动
PS
视图 - 用选取拖动,可以测量大小
Ctrl+D
可以取消选区,或者在旁边空白处点击一下也可以取消选区s
15.12 总结
- 布局为啥不用别的盒子,我只想用
div
标签都是有语义的,合理的地方用合理的标签,比如产品标题就用h
- 为啥用这么多的类名
类名就是给每个盒子起了一个名字,可以更好的找到这个盒子,选取盒子更容易,后期维护也更方便
15.13 圆角边框
在CSS3
中,新增了圆角边框样式,这样我们的盒子就可以变圆角了。
border-radius
属性用于设置元素的外边框圆角
语法:
border-radius: length;
radius
半径(圆的半径)原理:(椭)圆与边框的交集形成圆角效果
radius
半径(圆的半径)原理:(椭)圆与边框的交集形成圆角效果
border-radius
后面也可以接百分数,如:50%
含义为宽度和高度的一半
圆角矩形border-radius
的设置:圆角矩形border-radius
设置为高度的一半
该属性是一个简写属性,可以跟四个值,分别代表左上角、右上角、右下角、左下角
分开写:border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius
15.14 盒子阴影
CSS3
中新增了盒子阴影,我们可以使用box-shadow
属性为盒子添加阴影
语法:
box-shadow: h-shadow v-shadow blur spread color inset;
- 图表
值 | 描 |
---|---|
h-shadown | 必需。水平阴影的位置。允许负值 |
v-shadow | 必须。垂直阴影的位置。允许负值 |
blur | 可以模糊距离 |
spread | 可选。阴影尺寸 |
color | 可选。阴影的颜色。请参阅CSS 颜色值 |
inset | 可选。将外部阴影(outset)改为内部阴影 |
轻灰色:
rgba(0,0,0,0.3)
默认的是外阴影(
outset
),但是不可以写这个单词,否则导致阴影无效盒子阴影不占用空间,不会影响其他盒子排列
div:hover
、span:hover
都代表鼠标经过该元素时,显现的效果
15.15 文字阴影
在CSS3
中,我们可以使用text-shadow
属性将阴影应用与文本
语法:
text-shadow: h-shadow v-shadow blur color
- 参考表格
值 | 描述 |
---|---|
h-shadow | 必需,水平阴影的位置。允许负值 |
v-shadow | 必需,垂直阴影的位置,允许负值 |
blur | 可选。模糊的距离 |
color | 可选。阴影的颜色 |
16. CSS 浮动
16.1 传统网页布局的三种方式
网页布局的本质-用CSS
来摆放盒子,把盒子摆放到相应位置
CSS
提供了三种传统布局方式(简单点,就是盒子如何进行排列顺序)
- 普通流(标准流)
- 浮动
- 定位
16.2 标准流(普通流、文档流)
- 块级元素会独占一行,从上到下顺序排列
- 常见元素:
div、hr、p、h1~h6、ul、ol、dl、form、table
- 行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行
- 常见元素:
span
、a
、i
、em
以上都是标准布局,我们前面学习的就是标准流,标准流是最基本的布局方式
16.3 为什么需要浮动
提问:我们用标准流能很方便的实现如下效果吗?
- 如何让多个块级盒子(div)水平排列成一行
- 利用浮动(
float
)
总结:有很多的布局效果,标准流没有办法完成,此时就可以利用浮动完成布局,因为浮动可以改变元素便签默认的排列方式。
浮动最典型的应用:可以让多个块级元素一行内排列显示
网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动
16.4 什么是浮动?
float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘及包含块或另一个浮动框的边缘
语法
选择器 {float:属性值;}
属性值 | 描述 |
---|---|
none | 元素不浮动(默认方式) |
left | 元素向左浮动 |
right | 元素向右浮动 |
16.5 浮动特性(重难点)
加了浮动之后的元素,会具有很多特性,需要我们掌握的。
- 浮动元素会脱离标准流(脱标)
- 浮动的元素会一行内显示并且元素顶部对齐
- 浮动的元素会具有行内块元素的特性
- 脱离标准普通流的控制(浮)移动到指定位置(动),俗称脱标
- 浮动的盒子不再保留原先的位置
- 如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并且顶端对齐排列
- 浮动元素会具有行内块元素特性:任何元素都可以浮动,不管原先是什么模式的元素,添加浮动之后具有行内块元素相似的特性
- 任何元素都可以浮动,不管原先是什么模式的元素,添加浮动之后具有行内块元素相似的特性
- 如果块级盒子没有设置宽度,默认宽度和父级一样宽,但是添加浮动后,它的大小根据内容来决定
- 浮动的盒子中间是没有缝隙的,是紧挨着一起的
注意:浮动的元素是相互靠在一起的(不会有缝隙),如果父级宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐
任何元素都可以浮动,不管原先是什么模式的元素,添加浮动之后具有行内块元素相似的特性
如果行内元素有了浮动,则不需要转换行内级/行内块元素就可以直接给高度和宽度
16.6 浮动元素经常和标准流父级搭配使用
为了约束元素位置,我们网页布局一般采取的策略是:
先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置。复合网页布局第一准则
16.7 浮动布局注意点
- 浮动和标准流的父盒子搭配
先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置
- 一个元素浮动了,理论上其余的兄弟元素也要浮动
一个盒子里面有多个子盒子,如果其中一个盒子浮动了,那么其他兄弟也应该浮动,以防止引起问题
浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流
16.8 思考题
我们前面浮动元素都有一个标准流父元素,它们有一个共同的特点,都是有高度的。
但是,所以父盒子都必须给高度吗?
理想中的状态,让子盒子撑开父元素,有多少孩子,我父元素就有多高
16.9 清除浮动
- 为什么需要清除浮动?
由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占位置,最后父级高度为0
,就会影响下面的标准流盒子
由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响
- 清除浮动的本质
-
清除浮动的本质就是清除浮动元素造成的影响
-
如果父盒子本身有高度,则不需要清除浮动
-
清除浮动只会,父级别聚会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了
语法:
选择器 {clear:属性值}
属性值 | 描述 |
---|---|
left | 不允许左侧有浮动元素(清除左侧浮动的影响) |
right | 不允许右侧有浮动元素(清除右侧浮动的影响) |
both | 同时清除左右两侧浮动的影响 |
我们实际工作中,几乎只用
clear:both
清除浮动的策略是:闭合浮动
16.10 清除浮动的方法
- 额外标签法,也称之为隔墙法,是
W3C
推荐的做法 - 父级添加
overflow
属性 - 父级添加
after
伪元素 - 父级添加双伪元素
16.11 额外标签法
额外标签法也称之为隔墙法,是W3C
推荐的做法
额外标签法会在浮动元素末尾添加一个空的标签。例如<div style="clear:both"></div>
,或者其他标签,如<br />
等
- 优点:通俗易懂
- 缺点:添加许多无意义的标签,结构较差
这个标签必须是块级元素,不能是行内元素
- 总结
- 清除浮动的本质是?
清除浮动的本质是清除浮动元素脱离标准流造成的影响
- 清除浮动的策略是?
闭合浮动,只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子
- 什么是额外标签法
隔墙法,就是在最后一个浮动的子元素后面添加一个额外标签,添加清除浮动样式。实际工作可能会遇到,但是不常用
16.12 清除浮动 —— 父级添加 overflow
可以给父级添加overflow
属性,将其属性值设置为hidden
、auto
或者scroll
- 优点:代码简洁
- 缺点:无法显示溢出的部分
16.13 清除浮动 —— :after 伪元素法
:after
方式是额外标签法的升级版。也是给父元素添加
- 演示:
.clearfix:after {
content: "." ;
display: block ;
height: 0 ;
clear: both ;
visibility: hidden ;
}
.clearfix {
/* IE6 IE7 专用*/
*zoom: 1;
}
- 优点:没有增加标签,结构更加简单
- 缺点:照顾低版本浏览器
- 代表网站:百度、淘宝、网易
16.14 清除浮动——双伪元素清除浮动
/*声明清除浮动的样式*/
.clearfix:before,.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom: 1; /*ie6,7 专门清除浮动的样式*/
}
- 优点:代码更加简洁
- 缺点:照顾低版本浏览器
- 代表网站:小米、腾讯
16.15 清除浮动总结
- 为什么需要清除浮动?
- 父级没高度
- 子盒子浮动了
- 影响下面布局了,我们就应该清除浮动
- 表格归纳:
清除浮动的方式 | 优点 | 缺点 |
---|---|---|
额外标签法(隔墙法) | 通俗易懂,书写方便 | 添加许多无意义的标签,结构化较差 |
父级overflow | 书写简单 | 溢出隐藏 |
父级after 伪元素 | 结构语义化正确 | 由于IE6-7 不支持:after ,兼容性问题 |
父级双伪元素 | 结构语义化正确 | 由于IE6-7 不支持:after ,兼容性问题 |
16.15 PS切图
16.15.1 常见的图片格式
jpg
图像格式:jpeg(jpg)
对色彩的信息保留较好,高清,颜色较多,我们产品类的图片经常用jpg
格式的gif
图像格式:gif
格式最多只能存储256
色,所以通常用来显示简单图形及字体,但是可以保存透明背景和动画效果,实际经常用于一些图片小动画效果png
图像格式是一种新兴的网络图形格式,结合了GIF
和jpeg
的优点,具有存储形式丰富的特点,能够保持透明背景。如果想要切成背景透明的图片,请选择png
格式PSD
图像格式是photoshop
的专用格式,里面可以存放图层、通道、遮罩等多种设计稿。对我们前端人员来说,最大的优点就是我们可以直接从上面复制文字,获得图片,还可以测量大小和距离
16.15.2 图层切图
最简单的切图方式:右击图层-> 快速导出为png
但是很多情况下,我们需要合并图层再导出
- 选中需要的图层:图层菜单->合并图层(
Ctrl+e
) - 右击->快速导出为
PNG
16.15.3 切片切图
- 利用切片选择图片
利用切片工具手动划出
- 导出选择的图片
文件菜单->导出->存储为WEB设备所用格式->选择我们要的图片格式->存储
16.15.4 PS插件切图
cutterman
是一款运行在photoshop
中的插件,能够自动将你需要的图层进行输出,以替代传统的手工“导出web”所用格式以及使用切片工具挨个切图的繁琐流程
16.16 CSS 书写顺序(重要)
建议遵循以下顺序:
- 布局定位属性:
display
/position
/float
/clear
/visibility
/overflow
(建议display
第一个写,毕竟关系到模式) - 自身属性:
width/height/margin/padding/border/background
- 文本属性:
color/font/text-decoration/text-align/vertical-align/white-space/break-word
- 其他属性
CSS3
:content/cursor/border-radius/border-shadow/text-shadow/background:liner-gradient
17. 学成在线案例
17.1 准备素材和工具
- 学成在线
PSD
源文件 - 开发工具=
PS(切图)/cutterman插件
+vscode
(代码)+chrome
(测试)
17.2 案例准备工作
我们本次采取结构与样式相分离的思想
- 创建
study
目录文件夹(用于存放我们这个页面的相关内容) - 用
VSCODE
打开这个目录文件夹 study
目录内新建images
文件夹,用于保存图片- 新建首页文件
index.html
(以后我们的网站首页统一规定为index.html
) - 新建
style.css
样式文件,我们本次采用外链样式表 - 将样式引入到我们的
HTML
页面中 - 样式表写入清除内外边距的样式,来检测样式表是否引入成功
17.3 页面布局整体思路
为了提高网页制作的效率,布局时通常有以下的整体思路:
- 必须确定页面的版心(可视区),我们测量可得知
- 分析页面中的行模块,以及每个行模块中的列模块。
- 一行中的列模块经常浮动布局,先确定每个列的大小,之后确定列的位置,页面布局第二准则
- 制作
HTML
结构。我们遵循,先有结构,后有样式的原则,结构永远最重要 - 先理清布局结构,再写代码尤为重要。这需要我们多写多积累
导航栏注意点:
实际开发中,我们不会直接用链接a
而是li
包含(li+a
)的做法
li+a
语义更加清晰,一看这就是有条理的列表型内容- 如果直接用a,搜索引擎容易辨别为有堆砌关键字嫌疑(故意堆砌关键字容易被搜索引擎降权),从而影响网站权重
注意:
- 让导航栏一行显示,给
li
加浮动,因为li
是块级元素,需要一行显示 - 这个
nav
导航栏可以不给宽度,将来可以继续添加其余文件、 - 因为导航栏里面文字不一样多,所以最好给链接
a
左右padding
撑开盒子,而不是指定宽度
行内块元素之间是有缝隙的
18. CSS定位
18.1 定位
18.1.1 为什么需要定位
- 浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子
- 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子
18.1.2 定位组成
定位:将盒子定在某一个位置,所以定位也是在排放盒子,按照定位的方式移动盒子
定位=定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置
- 定位模式
定位模式决定元素的定位方式,它通过CSS
的position
属性来设置,其值可以分为四个
值 | 语义 |
---|---|
static | 静态定位 |
relative | 相对定位 |
absolute | 绝对定位 |
fixed | 固定定位 |
- 边偏移
边偏移就是定位的盒子移动到最终位置,有top
、bottom
、left
、right
4个属性
边偏移属性 | 描述 |
---|---|
top | 顶部偏移量,定义元素相对于其父元素上边线的距离 |
bottom | 底部偏移量,定义元素相对于其父元素下边线的距离 |
left | 左部偏移量,定义元素相对于其父元素左边线的距离 |
right | 右部偏移量,定义元素相对于其父元素右边线的距离 |
18.1.3 静态定位static(了解)
静态定位是元素的默认定位方式,无定位的意思
语法:
选择器 {position: static}
-
静态定位按照标准流特性摆放位置,它没有边偏移
-
静态定位在布局时很少用到
18.1.4 相对定位 relative (重要)
相对定位是元素在移动位置的时候,是相对于它原来的位置来说的(自恋型)
语法:
选择器 { position:relative; }
相对定位的特点:务必记住
- 它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)
- 原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它(不脱标,继续保留原来位置)
因此,相对定位并没有脱标,它最典型的应用是给绝对定位当爹的
18.1.5 绝对定位 absolute(重要)
绝对定位是元素在移动位置的时候,是相对于它祖先元素来说的(拼爹型)
语法:
选择器 {position: absolute}
绝对定位的特点:(务必记住)
- 如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位
- 如果祖先元素有定位(相对、绝对、固定定位),则以最近一级的有定位祖先元素为参照点移动位置
- 绝对定位不再占用原先的位置(脱标)
18.1.6 子绝父相的由来
弄清除这个口诀,就明白了绝对定位和相对定位的使用场景
这个子绝父相太重要了,是我们学习定位的口诀,是定位中最常用的一种方式,这句话的意思是:子级是绝对定位的话,父级要用相对定位
- 子级绝对定位,不会占用位置,可以放到父盒子里面任何一个地方,不会影响其他的兄弟盒子
- 父盒子需要加定位限制子盒子在父盒子内显示
- 父盒子布局时,需要占有位置,因此父亲只能是相对定位
这就是子绝父相的由来,所以相对定位经常用来作为绝对定位的父级
总结:因为父级需要占有位置,因此是相对定位,子盒子不需要占有位置,则是绝对定位
18.1.7 固定定位 fixed (重要)
固定定位是元素固定与浏览器可视区的位置。主要使用场景:可以在浏览器滚动时元素的位置不会改变。
语法:
选择器 {position: fixed}
固定定位的特点:(务必记住)
- 以浏览器的可视窗口为参照点移动元素
- 跟父元素没有任何关系
- 不随滚动条滚动
- 固定定位不在占有原先的位置
- 固定定位也是脱标,其实固定定位也可以看做是一种特殊的绝对定位
固定定位小技巧:固定在版心右侧位置
小算法:
- 让固定定位的盒子
left:50%
,走到浏览器可视区(也可以看做版心)的一半位置 - 让固定定位的盒子
margin-left
:版心宽度的一半距离。多走版心宽度的一半位置
就可以让固定定位的盒子贴着版心右侧对齐了
18.1.8 粘性定位(了解)
粘性定位可以被认为是相对定位与固定定位的混合,sticky
粘性的
语法:
选择器 { position: sticky; top: 10px }
粘性定位的特点:
- 以浏览器的可视窗口为参照点移动元素(固定定位特点)
- 粘性定位占有原先的位置(相对定位特点)
- 必须添加
top
、left
、right
、bottom
其中一个才有效
跟页面滚动搭配。兼容性较差,IE
不支持
18.1.19 定位总结
定位模式 | 是否脱标 | 移动位置 |
---|---|---|
static | 否 | 不能使用边偏移 |
relative 相对定位 | 否(占有位置) | 相对于自身移动位置 |
absolute 绝对定位 | 是(不占有位置) | 带有定位的父级 |
fixed 固定定位 | 是(不占有位置) | 浏览器可视区 |
sticky | 否(占有位置) | 浏览器可视区 |
18.1.10 定位叠放次序 z-index
在使用定位布局时,可能会出现盒子重叠的情况。此时,可以使用z-index
来控制盒子的前后次序(z
轴)
语法:
选择器 {z-index: 1}
数值可以是正整数、负整数或0
,默认是auto
,数值越大,盒子越靠上
如果属性值相同,则按照书写顺序,后来居上
数字后面不能加单位
只有定位的盒子才有z-index
属性
18.1.11 定位的扩展
绝对定位的盒子不能通过margin:0 auto
水平居中,但是可以通过以下计算方法实现水平和垂直居中
left:50%
:让盒子的左侧移动到父级元素的水平中心位置margin-left:-100px
:让盒子向左移动自身宽度的一半。
18.1.12 定位的特殊特性
绝对定位和固定定位也和浮动类似
- 行内元素添加绝对或者固定定位,可以直接设置高度和宽度
- 块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小
浮动元素、绝对定位(固定定位)元素都不会触发外边距合并的问题
18.1.13 绝对定位(固定定位)会完全压住盒子
浮动元素不同,之后压住它下面标准流的盒子,但是不会压住下面标准流盒子里面的文字(图片)
但是绝对定位(固定定位)会压住下面标准流所有的内容
浮动之所以不会压住文字,因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素
18.2 综合案例总结
- 加了绝对定位的盒子可以直接设置高度和宽度
- 一个盒子如果既有
left
属性也有right
属性,则默认会执行left
属性,同理top
,bottom
同时存在会执行top
属性(先上后下,先左后右)
通过盒子模型,清除知道大部分html
标签是一个盒子
通过CSS
浮动、定位可以让每个盒子排列成为网页
一个完整的网页,是标准流、浮动、定位一起完成布局的,每个都有自己的专门用法
- 标准流
可以让盒子上下排列或者左右排列,垂直的块级盒子显示就用标准流布局
- 浮动
可以让多个块级元素一行显示或者左右对齐盒子,多个块级盒子水平显示就用浮动布局
- 定位
定位最大的特点是有层叠的概念,就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局
18.3 元素的显示与隐藏
类似网站广告,当我们点击关闭就不见了,但是当我们重新刷新页面,会重新出现
本质:让一个元素在页面中隐藏或者显示出来
display
显示隐藏visibility
显示隐藏overflow
溢出显示隐藏
18.3.1 display属性
display
属性用于设置一个元素应如何显示
display:none
隐藏对象display:block
除了转换为块级元素之外,同时还有显示元素的意思
display
隐藏元素后,不再占有原来的位置
后面应用及其广泛,搭配JS
可以做很多网页特效
18.3.2 visibility 可见性
visibility
属性用于指定一个元素应是可见还是隐藏
visibility:visible
元素可视visibility:hidden
元素隐藏
visibility
隐藏元素后,继续占有原来的位置
如果隐藏元素想要原来位置,就用visibility:hidden
如果隐藏元素不想要原来位置,就用display:none
(用处更多 重点)
18.3.3 overflow 溢出
overflow
属性指定了如果内容溢出一个元素的框(超过其指定高度及其宽度)时,会发生什么
overflow:scroll
溢出的部分显示滚动条,不溢出也显示滚动条overflow:auto
溢出的部分显示滚动条,不溢出不显示滚动条
属性值 | 描述 |
---|---|
visible | 不剪切内容也不添加滚动条 |
hidden | 不显示超过对象尺寸的内容,超出的部分隐藏掉 |
scroll | 不管超出内容与否,总是显示滚动条 |
auto | 超出自动显示滚动条,不超出不显示滚动条 |
一般情况下,我们都不想让溢出的内容显示出来,因为溢出的部分会影响布局
但是如果有定位的盒子,请慎用overflow:hidden
,因为它会隐藏多余的部分
display
显示隐藏元素,但是不保留位置visibility
显示隐藏元素,保留原来的位置overflow
溢出显示隐藏,但是只是对于溢出的部分处理
19. CSS 高级技巧
19.1 精灵图
19.1.1 为什么需要精灵图
一个网页中往往会应用很多小的背景图作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度
因此,为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度,出现了CSS
精灵技术(也称CSS Sprites
、CSS
雪碧)
核心原理:将网页中的一些小背景图像整合到一张大图中,这样服务器只需要一次请求就可以了
19.1.2 精灵图(sprites)的使用
使用精灵图核心
- 精灵技术主要针对于背景图片使用,就是把多个小背景图片整合到一张大图片中。
- 这个大图片也成为
sprites
精灵图或者雪碧图 - 移动背景图片位置,此时可以使用
background-position
- 移动的距离就是这个目标图片
x
和y
坐标。 - 因为一般情况下都是往上往左移动,所以数值是负值
19.1.3 字体图标的产生
字体图标使用场景:主要用于显示网页中通用、常用的一些小图标
精灵图是有诸多优点的,但是缺点明显
- 图片文件还是比较大的
- 图片本身放大和缩小会失真
- 一旦图片制作完毕想要更换非常复杂
此时,有一种技术的出现很好的解决了以上问题,就是字体图标iconfont
字体图标可以为前端工程师提供一种方便高效的图标使用方式,展示的是图标,本质属于字体。
19.1.4 字体图标的优点
轻量级:一个图标字体要比一系列的图像要小。一旦字体加载了,图标就会马上渲染出来,减少服务器请求
灵活性:本质其实是文字,可以很随意的改变颜色、产生阴影、透明效果、旋转等
兼容性:几乎支持所有的浏览器,请放心使用
总结:
- 如果遇到一些结构和样式比较简单的小图标,就用字体图标
- 如果遇到一些结构和样式复杂一点的小图片,就用精灵图
字体图标是一些网页常见的小图标,我们直接网上下载即可。因此使用可以分为
- 字体图标下载
- 字体图标引入(引入到我们
HTML
页面中) - 字体图标的追加(以后添加新的小图标)
推荐下载网站
icmoon
字库http://icomoon.io
- 阿里
iconfont
字库http://www.iconfont.cn/
19.2.3 字体文件格式
不同浏览器所支持的字体格式是不一样的,字体图标之所以兼容,就是因为包含了主流浏览器支持的字体文件。
TureType(.ttf)
格式,.ttf
字体是Windows
和Mac
的最常见的字体,支持这种字体的浏览器有IE9+
、Firefox3.5+
、Chrome4+
、Safari3+
、Opera10+
、iOS Mobile
、Safari4.2+
;Web Open Font Format(.woff)
格式woff
字体,支持这种字体的浏览器有IE9+
、Firefox3.5+
、Chrome6+
、Safari3.6+
、Opera11.1+
;Embedded Open Type(.eot)
格式.eot
字体是IE
专用字体,支持这种字体的浏览器有IE4+
;SVG(.SVG)
格式.svg
字体是基于SVG
字体渲染的一种格式,支持这种字体的浏览器有Chrome4+
、Safari3.1+
、Opera10.0+
、iOS Mobile Safari3.2+
;
19.2.4 字体图标的引入
- 在
CSS
样式中全局声明字体,简单理解把这些字体通过CSS
引入到我们页面中
一定注意字体文件路径的问题
19.2.5字体图标的追加
如果工作中,原来的字体图标不够用了,我们需要添加新的字体图标到原来的字体文件中。
把压缩包里面的selection.json
重新上传,然后选中自己想要的新图标,重新下载压缩包,并且替换原来的文件即可
19.3 CSS三角
网页中常见一些三角形,使用CSS
直接画出来就可以,不必做成图片或者字体图标
一张图,你就知道CSS
三角是怎么来的了,做法如下:
- 当代码如下时呈现如下图形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid green;
border-right: 100px solid yellow;
border-bottom: 100px solid blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- 图示如下
所以当你需要呈现三角形时,只需要让一边有颜色其他三边透明即可
- 代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS三角图标</title>
<style>
div {
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border: 200px solid transparent;
border-top-color: skyblue;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
- 此时呈现三角形
19.4 CSS用户界面样式
19.4.1 鼠标样式cursor
li {cursor: pointer;}
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状
属性值 | 描述 |
---|---|
default | 小白 默认 |
pointer | 小手 |
move | 移动 |
text | 文本 |
not-allowed | 禁止 |
19.4.2 轮廓线 outline
给表单添加outline:0;
或者outline:none;
样式之后,就可以去掉默认的蓝色边框。
input { outline:none; }
19.4.3 防止拖拽文本域 resize
实际开发中,我们文本域右下角是不可以拖拽的
textarea {
resize: none
}
19.5 vertical-align 属性应用
CSS
的vertical-align
属性使用场景:经常用于设置图片或者表单(行内块元素)和文字垂直对齐
官方解释:用于设置一个元素的垂直对齐方式,但是它只针对于行内元素或者行内块元素有效
语法:
vertical-align: baseline | top | middle | bottom
值 | 描述 |
---|---|
baseline | 默认。元素放置在父元素的基线上 |
top | 把元素的顶端与行中最高元素的顶端对齐 |
middle | 把此元素放置在父元素的中部 |
bottom | 把元素的顶端与行中最低元素的底端对齐 |
图片、表单都属于行内块元素,默认的vertical-align
是基线对齐
默认文字与图片是基线对齐
此时可以给图片、表单这些行内块元素的vertical-align
属性设置为middle
就可以让文字和图片垂直居中对齐了
19.5.1 解决图片底部默认空白缝隙问题
bug
:图片侧会有一个空白缝隙,原因是行内块元素会和文字的基线对齐
主要解决方法有两种:
-
给图片添加
vertical-align:middle | top | bottom
(提倡使用的) -
把图片转换为块级元素
display:block
只有行内元素和行内块元素才有
vertical
属性
19.6 溢出的文字省略号显示
- 单行文本溢出显示省略号
- 多行文本溢出显示省略号
- 单行文本溢出显示省略号–必须满足三个条件
-
先强制一行内显示文本
white-sapce:nowrap;
(默认normal
自动换行) -
超出的部分隐藏
overflow:hidden;
-
文字用省略号替代超出的部分
text-overflow:ellipsis;
white-space:normal
如果文字显示不开自动换行
- 多行文本溢出显示省略号
多行文本溢出显示省略号,有较大兼容性问题,适合于webKit
浏览器或移动端(移动端大部分是webKit
内核)
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; /* 弹性伸缩盒子模型显示 */
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
更推荐让后台人员来做这个效果,因为后台人员可以设置显示多少个字,操作更为简单
19.7 常见布局技巧
巧妙利用一个技术更快更好的布局
margin
负值的运用- 文字围绕浮动元素
- 行内块的巧妙运用
css
三角强化
19.7.1 margin负值的运用
- 让每个盒子
margin
往左侧移动-1px
正好压住相邻盒子边框 - 鼠标经过某个盒子的时候,提高当前盒子的层级即可(如果没有定位,则加相对定位(保留位置),如果有定位,则加
z-index
)
- 情况一:其他无定位
ul li {
float: left;
margin-left: -1px;
list-style: none;
width: 200px;
height: 350px;
border: 1px solid orange;
}
ul li:hover {
position: relative;
border: 1px solid red;
}
- 情况二:其他有定位加
z-index
ul li {
position: relative;
float: left;
margin-left: -1px;
list-style: none;
width: 200px;
height: 350px;
border: 1px solid orange;
}
ul li:hover {
z-index: 1;
border: 1px solid red;
}
19.7.2 CSS三角强化
代码:
.box {
height: 0;
width: 0;
border-color: transparent blue transparent transparent;
border-style: solid;
border-width: 100px 50px 0 0;
}
此时会得到一个直角三角形
19.7.3 练习:价格栏制作
- 代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>价格秒杀</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 250px;
height: 45px;
border: 2px solid red;
margin: 40px auto;
}
.current-price {
display: inline-block;
position: relative;
width: 150px;
background-color: red;
font-size: 18px;
color: white;
text-align: center;
line-height: 45px;
font-weight: 700;
}
.current-price i {
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-color: transparent white transparent transparent;
border-width: 45px 10px 0 0;
border-style: solid;
}
.box span {
width: 100px;
color: grey;
font-size: 14px;
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="box">
<div class="current-price">¥1678
<i></i>
</div>
<span>¥1920</span>
</div>
</body>
</html>
- 效果图
19.8 CSS初始化
不同浏览器对有些便签的默认值是不同的,为了消除不同浏览器对HTML
文本呈现的差异,照顾浏览器的兼容,我们需要对CSS
初始化
简单理解:CSS
初始化是指重设浏览器的样式(也称为CSS reset
)
每个网页都必须首先进行CSS
初始化。
这里我们以京东css
初始化代码为例
Unicode
编码字体
把中文字体的名称用相应的Unicode
编码来代替,这样就可以有效的避免浏览器解释CSS
代码时候出现乱码的问题
比如:
\9ED1\4F53
:黑衣
5B8B\4F53
:宋体
\5FAE\8F6F\96C5\9ED1
:微软雅黑
- 初始化代码
/* 把我们所有标签的内外边距清零 */
* {
margin: 0;
padding: 0
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
font-style: normal
}
/* 去掉li 的小圆点 */
li {
list-style: none
}
img {
/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
border: 0;
/* 取消图片底侧有空白缝隙的问题 */
vertical-align: middle
}
button {
/* 当我们鼠标经过button 按钮的时候,鼠标变成小手 */
cursor: pointer
}
a {
color: #666;
text-decoration: none
}
a:hover {
color: #c81623
}
button,
input {
/* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}
body {
/* CSS3 抗锯齿形 让文字显示的更加清晰 */
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #666
}
.hide,
.none {
display: none
}
/* 清除浮动 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}
20.HTML5 和CSS3提高
20.1 HTML5 新特性
HTML5
的新增特效主要是针对于以前的不足,增加了一些新的标签、新的表单和新的表单属性等
这些新特性都有兼容性问题,基本是IE9+
以上版本的浏览器才支持,如果不考虑兼容性问题,可以大量使用这些新特性
声明:
- 新特性增加了很多,但是我们专注于开发常用的新特性
20.1.1 HTML5 新增的语义化标签
以前布局,我们基本用div
来做,div
对于搜索引擎来说,是没有语义的
<div class="header"></div>
<div class="nav"></div>
<div class="content"></div>
<div class="footer"></div>
<header>
:头部标签nav
:导航标签<article>
:内容标签<selection>
:定义文档某个区域<aside>
:侧边栏标签footer
:尾部便签
注意:
- 这种语义化标准主要是针对搜索引擎的
- 这些新标签页面中可以使用多次
- 在
IE9
中,需要把这些元素转换为块级元素 - 其实,我们移动端更喜欢使用这些标签
HTML5
还增加了很多其他标签
20.1.2 HTML5 新增的多媒体标签
新增的多媒体标签主要包含两个:
- 音频:
<audio>
- 视频:
<video>
使用它们可以很方便的在页面中嵌入音频和视频,而不再去使用flash
和其他浏览器插件
- 视频
<video>
当前<video>
元素支持三种视频格式,尽量使用mp4
格式
浏览器 | MP4 | WebM | Ogg |
---|---|---|---|
Internet explorer | YES | NO | NO |
Chrome | YES | YES | YES |
Firefox | YES 从Firefox21版本开始,Linux系统从Firefox30开始 | YES | YES |
Safari | YES | NO | NO |
Opera | YES,从Opera25版本开始 | YES | YES |
语法:
<video src="文件地址" controls="controls"></video>
写法二:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>
<video>
常见属性
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则视频在就绪后自动播放(谷歌浏览器需要添加muted 来解决自动播放问题)。 |
controls | controls | 如果出现该属性,则向用户显示播放控件,比如播放按钮。 |
height | pixels(像素) | 设置视频播放器的高度。 |
width | pixels(像素) | 设置视频播放器的宽度。 |
loop | loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放。 |
muted | muted | 如果出现该属性,视频的音频输出为静音。 |
poster | URL | 加载等待的画面图片 |
preload | auto(预先加载视频)metadata(当页面加载后仅加载音频/视频的元数据。)none(不预先加载视频) | 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性。 |
src | URL | 要播放的视频的 URL。 |
HTML5 在不使用插件的情况下,也可以原生的支持音频格式文件的播放,当然,支持的格式是有限的。
- 音频
<audio>
当前<audio>
元素支持三种音频格式
浏览器 | MP3 | Wav | Ogg |
---|---|---|---|
Internet Explorer 9+ | YES | NO | NO |
Chrome 6+ | YES | YES | YES |
Firefox 3.6+ | YES | YES | YES |
Safari 5+ | YES | YES | NO |
Opera 10+ | YES | YES | YES |
语法:
<audio src="文件地址" controls="controls"></audio>
其他写法
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
常见属性
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则音频在就绪后马上播放 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮 |
loop | loop | 如果出现该属性,则每当音频结束时重新开始播放 |
src | url | 要播放的音频的url |
- 谷歌浏览器把音频和视频自动播放禁止了
总结·:
- 音频标签和视频标签使用方式基本一致
- 浏览器支持情况不同
- 谷歌浏览器把音频和视频自动播放禁用了
- 我们可以给视频标签添加
muted
属性来静音播放视频,音频不可以(可以通过JavaScript解决) - 视频标签是重点,我们经常设置自动播放,不使用
controls
控件,循环和设置大小属性
20.1.3 HTML5 新增的input
类型
- 属性值
属性值 | 说明 |
---|---|
type="email" | 限制用户输入必须为Email 类型 |
type=url | 限制用户输入必须为URL 类型 |
type="date" | 限制用户输入必须为日期类型 |
type="time" | 限制用户输入必须为时间类型 |
type=month | 限制用户输入必须为月类型 |
type="week" | 限制用户输入必须为周类型 |
type="number" | 限制用户输入必须为数字类型 |
type="tel" | 手机号码 |
type="search" | 搜索框 |
type="color" | 生成一个颜色选择表单 |
20.1.4 HTML5 新增的表单属性
属性 | 值 | 说明 |
---|---|---|
required | required | 表单拥有该属性表示其内容不能为空,必填 |
placeholder | 提示文本 | 表单的提示信息 |
autofocus | autofocus | 自动聚焦属性,页面加载完成自动聚集到指定表单 |
autocomplete | off/on | 当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。默认已经打开,如autocomplete="on" ,关闭autocomplete="off" 需要放在表单内,同时加上name 属性,同时成功提交 |
multiple | multiple | 可以多选文件提交 |
可以痛过以下设置方式修改placeholder
里面的字体颜色:
input::placeholder {
color:pink
}
20.2 CSS3 新特性
20.2.1 CSS3 的现状
- 新增的
CSS3
特性有兼容性问题,IE9+
才支持 - 移动端支持优于
PC
端 - 不断改进中
- 应用相对广泛
- 现阶段主要学习:新增选择器和盒子模型以及其他特性
20.2.1.1 CSS3 新增选择器
CSS3
给我们新增了选择器,可以更加便捷,更加自由的选择目标元素
- 属性选择器
- 结构伪类选择器
- 伪元素选择器
20.2.2 属性选择器
属性选择器可以根据特性属性来选择元素。这样就可以不用借助于类或者是id
选择器
选择符 | 简介 |
---|---|
E[att] | 选择具有att 属性的E 元素 |
E[att="val"] | 选择具有att 属性且属性值等于val 的E 元素 |
E[att^="val"] | 选择具有att 属性且属性值以val 开头的E 元素 |
E[att$="val"] | 选择具有att 属性且属性值以val 结尾的E 元素 |
E[att*="val"] | 选择具有att 属性且属性值含有val 的E 元素 |
类选择器、属性选择器、伪类选择器、权重为
10
20.2.3 结构伪类选择器
结构伪类选择器主要根据文档结构来选择元素,常用于根据父级选择器里面的子元素
选择符 | 简介 |
---|---|
E:first-child | 匹配父元素中第一个子元素E |
E:last-child | 匹配父元素中最后一个子元素E |
E:nth-child(n) | 选择父元素的第n 个子元素,n 从1 开始计算 |
E:first-of-type | 选择父元素下同种标签的第一个元素,相当于E:nth-of-type(1) |
E:last-of-type | 选择父元素下同种标签的倒数第一个元素,相当于E:nth-last-of-type(1) |
E:nth-of-type(n) | 与:nth-child(n) 作用类似,用作选择使用同种标签的第n 个元素 |
nth-child(n)
选择某个父元素的一个或多个特定的子元素
n
可以是数字,关键字和公式- 如果
n
是数字,就是选择第n
个子元素,里面数字从1
开始 n
可以是关键字:even
偶数,odd
奇数n
可以是公式:常见的公式如下(如果n
是公式,则从0
开始计算,但是第0
个元素或者超出了元素的个数会被省略)
公式 | 取值 |
---|---|
2n | 偶数 |
2n+1 | 奇数 |
5n | 5、10、15 |
n+5 | 从第5个开始(包含第五个) |
-n+5 | 前5个(包含第5个) |
nth-child
会把所有的盒子都排列序号执行的时候首先看
nth-child()
之后回去再看前面的元素
nth-of-type
会把指定元素的盒子排列序号执行的时候首先看指定的元素,之后再看
nth-of-type
是第几个孩子
区别:
nth-child
对父元素里面所有孩子排序选择(序号是固定的)先找到第n
个孩子,然后看看是否和E
匹配nth-of-type
对父元素里面指定子元素进行排序选择。先去匹配E
,然后再根据E
找到第n
个孩子
小结
- 结构伪类选择器一般用于选择父级里面的第几个孩子
nth-child
对父元素里面所有孩子排序选择(序号是固定的)先找到第n
个孩子,然后看看是否和E
匹配nth-of-type
对父元素里面指定子元素进行排序选择,先去匹配E
,然后再根据E
找第n
个孩子- 关于
nth-child(n)
我们要知道是从0开始计算的,要记住常用的公式 - 如果是无序列表,我们肯定用
nth-child
更多 - 类选择器、属性选择器、伪类选择器,权重为10
20.2.4 伪元素选择器(重点)
选择符 | 简介 |
---|---|
::before | 在元素内部的前面插入内容 |
::after | 在元素内部的后面插入内容 |
注意:
before
和after
创建一个元素,但是属于行内元素- 新创建的这个元素在文档树中是找不到的,所以我们称为伪元素
- 语法:
element::before{}
before
和after
必须有content
属性,后面的内容使用单引号括起来before
在父元素内容的前面创建元素,after
在父元素内容的后面插入元素- 伪元素选择器和标签选择器一样,权重为
1
伪元素选择器使用场景1:伪元素字体图标
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7y92vs');
src: url('fonts/icomoon.eot?7y92vs#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7y92vs') format('truetype'),
url('fonts/icomoon.woff?7y92vs') format('woff'),
url('fonts/icomoon.svg?7y92vs#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
.box {
position: relative;
width: 300px;
height: 100px;
border: 2px solid tomato;
}
.box::before {
position: absolute;
bottom: 10px;
right: 10px;
font-family: 'icomoon';
color: tomato;
content: "\e900";
font-size: 30px;
}
伪元素选择器使用场景:伪元素清除浮动
后面两种伪元素清除浮动算是第一种额外标签法的一个升级和优化
.clearfix:after {
content: "", /* 伪元素必须写的属性*/
display: block; /*插入的元素必须是快级*/
height: 0; /*不要看见这个元素*/
clear:both; /*核心代码清除浮动*/
visibility:hidden; /*不要看见这个元素*/
}
后面两种伪元素清除浮动算是第一种额外便签法的升级和优化
.clearfix:before,.clearfix:after{
content:"";
display:table; /* 转换为块级元素并且一行显示*/
}
.clearfix:after {
clear:both;
}
20.2.5 CSSS3 盒子模型
CSS3
中可以通过box-sizing
来指定盒模型,有2个值:即可指定为content-box
、border-box
,这样我们计算盒子大小的方式就发生了改变
可以分为两种情况
box-sizing
:conten-box
盒子大小为width+padding+border
(以前默认的)box-sizing:border-box
盒子大小为width
如果盒子模型我们改为了box-sizing:border-box
,那padding
和border
就不会撑大盒子了(前提padding
和border
不会超过width
宽度)
20.2.6 CSS3 其他特性(了解)
- 图片变模糊
- 计算盒子宽度
width:calc
函数
20.2.6.1 CSS3 滤镜filter
filter CSS
属性将模糊或颜色偏移等图形效果应用于元素
filter:函数()
例如:
filter:blur(5px);
blur模糊处理 数值越大越模糊
20.2.6.2 CSS3 calc 函数
calc()
此CSS
函数让你在声明CSS
属性值时执行一些计算
width:calc(100%-80%)
括号里面可以使用+ - * /
来计算
20.2.6.3 CSS3过渡(重点)
过渡(transition
)是CSS3
中具有颠覆性的特征之一,我们可以在不使用Flash
动画或JavaScript
的情况下,当元素从一种样式变换为另外一种样式时为元素添加效果。
过渡动画:是从一个状态渐渐的过渡到另外一个状态
可以让我们页面更加好看,更加动感十足,虽然低版本浏览器不支持(ie9)以下版本,但是不会影响页面布局
我们现在经常和:hover
一起搭配使用
transition: 要过渡的属性 花费的时间 运动曲线 何时开始;
- 属性:想要变化的
CSS
属性,宽度、高度、背景颜色、内外边距都可以,如果想要所有的属性都变化过渡,写一个all
就可以了 - 花费时间:单位是秒(必须写单位)比如
0.5s
- 运动曲线:默认是
ease
(可以省略) - 何时开始:单位是秒(必须写单位)可以设置延迟触发时间,默认
0
s(可以省略)
谁做过渡给谁加
20.3 广义的HTML5
- 广义的
HTML5
是HTML5
本身+CSS3
+JavaScript
- 这个集合有时候称为
HTML5
和朋友,通常缩写为html5
- 虽然
HTML5
的一些特性仍然不被某些浏览器支持,但是它是一种发展趋势
写在最后的话:
- 无论每个知识点的难易程度如何,我都会尽力将它描绘得足够细致
- 欢迎关注我的CSDN博客,IDYS’BLOG
- 持续更新内容:
linux基础 | 数据通信(路由交换,WLAN) | Python全栈 | 云计算 - 如果你有什么疑问,或者是难题。欢迎评论或者私信我。你若留言,我必回复!
- 虽然我现在还很渺小,但我会做好每一篇内容。谢谢关注!