CSS语法范
2021/11/19 23:13:44
本文主要是介绍CSS语法范，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
文章目录
- 1、CSS简介
- 2、CSS语法规范
- 3、CSS代码风格
- 3.1、样式格式书写
- 3.2、样式大小写
- 3.3、空格规范
- 4、CSS基础选择器
- 4.1、选择器分类
- 4.2、标签选择器
- 4.3、类选择器
- 4.3.1、类选择器的使用
- 4.3.2、常用CSS命名规则
- 4.3.3、多类名使用方式
- 4.4、id选择器
- 4.5、class选择器和id选择器的区别
- 4.6、通配符选择器
- 5、字体属性
- 5.1、字体
- 5.2、字体大小
- 5.3、字体粗细
- 5.4、字体样式
- 5.5、字体复合属性
- 6、文本属性
- 6.1、文本颜色
- 6.2、文本对齐
- 6.3、文本装饰
- 6.4、文本缩进
- 6.5、行间距
- 7、CSS的引入方式
- 7.1、行内样式表（行内式）
- 7.2、内部表式表（嵌入式）
- 7.3、外部样式表
- 8、复合选择器
- 8.1、后代选择器
- 8.2、子选择器
- 8.3、并集选择器
- 8.4、伪类选择器
- 8.4.1、链接伪类选择器
- 8.4.2、链接伪类选择器的注意事项
- 8.4.3、focus伪类选择器
- 9、元素显示模式
- 9.1、什么是元素显示模式
- 9.2、元素显示模式的分类
- 9.2.1、块元素
- 9.2.2、行内元素
- 9.2.3、行内块元素
- 9.3、元素显示模式转换
- 9.3.1、行内元素转换成块元素
- 9.3.2、块无素转换成行内元素
- 9.3.3、转换成行内块
- 10、垂直居中
- 11、背景
- 11.1、背景颜色
- 11.2、背景图片
- 11.3、背景平铺
- 11.4、背景图片位置
- 11.5、背景图像固定（背景附着）
- 11.6、背景属性复合写法
- 11.7、背景色半透明
- 12、CSS的三大特性
- 12.1、层叠性
- 12.2、继承性
- 12.3、行高的继承性
- 12.4、优先级
- 13、盒子模型
- 13.1、盒子模型（Box Model）组成
- 13.2、边框（border）
- 13.2.1、边框样式
- 13.2.2、边框复合写法
- 13.2.3、边框各边设置
- 13.2.4、表格细线边框
- 13.3、页边距（padding）
- 13.3.1、页边距的使用
- 13.3.2、页边距（padding）复合写法
- 13.3.3、padding与盒子的大小
- 13.4、外边距（margin）
- 13.4.1、外边距的使用
- 13.4.2、外边距的复合写法
- 13.4.3、利用外边距让块级盒子水平居中
- 13.4.4、外边距合并
- 13.5、清除内外边距
- 14、去除列表前的小圆点或数字
- 15、圆角边框
- 15.1、圆角边框介绍
- 15.2、圆形盒子的实现
- 15.3、圆角矩形盒子的实现
- 16、盒子阴影
- 16.1、盒子阴影用法
- 16.2、鼠标经过盒子产生阴影
- 17、文字阴影
- 18、浮动
- 18.1、传统网页布局的三种方式
- 18.2、浮动基本语法
- 18.3、浮动的特性
- 18.4、常见网页布局
- 18.5、浮动布局的注意点
- 18.6、清除浮动
- 18.7、清除浮动方法
- 18.7.1、 额外标签法
- 18.7.2、父级添加overflow属性
- 18.7.3、父级添加:atfer伪元素
- 18.7.4、双伪元素清除浮动
- 19、定位
- 19.1、为什么需要定位
- 19.2、定位组成
- 19.3、静态定位sttic
- 19.4、相对定位relative
- 19.5、绝对定位absolute
- 19.6、子绝父相原则
- 19.7、固定定位fixed
- 19.8、粘性定位sticky
- 19.9、定位的叠放顺序
- 19.10、绝对定位的盒子居中
- 19.11、定位的特殊性
- 20、CSS属性书写顺序
- 21、图片格式
- 21.1、常见图片格式
- 21.2、插件切图
- 22、元素的显示与隐藏
- 22.1、display属性
- 22.2、visibility属性
- 22.3、overflow属性
- 23、精灵图
- 23.1、精灵图产生的原因
- 23.2、精灵图（sprites）原理
- 23.3、精灵图使用
- 24、字体图标
- 24.1、字体图标的产生
- 24.2、字体图标的使用
- 24.2.1、字体图标的下载
- 24.2.2、字体图标的引入
- 24.2.3、字体文体格式
- 24.2.1、字体图标的追加
1、CSS简介
- CSS是层叠样式表（Cascading Style Sheets）的简称。
- 也称CSS样式表或级联样式表。
- CSS也是一种标记语言。
- 美化HTML。
2、CSS语法规范
- CSS规则由两个主要部分构成：选择器以及一条或多条声明。
- CSS一般写在标签中
<html>
<head>
<title>Document</title>
<style>
p{
color:red;
front-size:12px;
}
</style>
</head>
<body>
</body>
</html>
3、CSS代码风格
3.1、样式格式书写
- 紧湊格式
p{ color:red;front-size:12px; }
- 展开格式，推荐使用这种格式
p{
color:red;
front-size:12px;
}
3.2、样式大小写
- 样式选择器、属性名、属性值推荐使用小写字母，特殊情况除外。
3.3、空格规范
- 属性值前面，冒号后面，保留一个空格
- 选择器（标签）和大括号之间保留一个空格
4、CSS基础选择器
4.1、选择器分类
选择器可分为：
- 基础选择器
- 复合选择器
基础选择器由单个选择器组成
基础选择器包括：
- 标签选择器
- 类选择器
- id选择器
- 通配符选择器
4.2、标签选择器
- 指用HTML标签名称作为选择器
<style>
p {
color: red;
front-size: 12px;
}
div {
div: green;
}
</style>
4.3、类选择器
4.3.1、类选择器的使用
- 若想差异化单独选一个或者某几个标签，可以使用类选择器。
- 结构需要用class属性来调用class类
- 类选择器使用“.”（英文点号）进行标识，后面紧跟类名（需自定义）
- 不能用关键字作为类名
<head>
<title>类选择器</title>
<style>
.red {
color: red;
}
</style>
</head>
<body>
<h1>区块链技术</h1>
<ul>
<li>BTC</li>
<li>ETC</li>
<li class="red">Pi Network</li>
</ul>
</body>
4.3.2、常用CSS命名规则
常用CSS命名规则
| 常用类名 | 命名 | 功能 | 命名 | 导航 | 命名 | 页面结构 | 命名 |
|---|---|---|---|---|---|---|---|
| 头 | header | 标志 | logo | 导航 | nav | 容器 | container |
| 内容 | content/container | 广告 | banner | 主导航 | mainbav | 页头 | header |
| 尾 | footer | 登陆 | login | 子导航 | subnav | 内容 | content/container |
| 导航 | nav | 登录条 | loginbar | 顶导航 | topnav | 页面主体 | main |
| 侧栏 | sidebar | 注册 | regsiter | 边导航 | sidebar | 页尾 | footer |
| 栏目 | column | 搜索 | search | 左导航 | leftsidebar | 导航 | nav |
| 页面外围控制整体布局宽度 | wrapper | 功能区 | shop | 右导航 | rightsidebar | 侧栏 | sidebar |
| 左右中 | left right center | 标题 | title | 菜单 | menu | 栏目 | column |
| 登录条 | loginbar | 加入 | joinus | 子菜单 | submenu | 页面外围控制整体布局宽度 | wrapper |
| 标志 | logo | 状态 | status | 标题 | title | 左右中 | left right center |
| 广告 | banner | 按钮 | btn | 摘要 | summary | ||
| 页面主体 | main | 滚动 | scroll | ||||
| 热点 | hot | 标签页 | tab | ||||
| 新闻 | news | 文章列表 | list | ||||
| 下载 | download | 提示信息 | msg | ||||
| 子导航 | subnav | 当前的 | current | ||||
| 菜单 | menu | 小技巧 | tips | ||||
| 子菜单 | submenu | 图标 | icon | ||||
| 搜索 | search | 注释 | note | ||||
| 友情链接 | friendlink | 指南 | guild | ||||
| 页脚 | footer | 服务 | service | ||||
| 版权 | copyright | 热点 | hot | ||||
| 滚动 | scroll | 新闻 | news | ||||
| 内容 | content | 下载 | download | ||||
| 标签页 | tab | 投票 | vote | ||||
| 文章列表 | list | 合作伙伴 | partner | ||||
| 提示信息 | msg | 友情链接 | link | ||||
| 小技巧 | tips | 版权 | copyright | ||||
| 栏目标题 | title | ||||||
| 加入 | joinus | ||||||
| 指南 | guild | ||||||
| 服务 | service | ||||||
| 注册 | regsiter | ||||||
| 状态 | status | ||||||
| 投票 | vote | ||||||
| 合作伙伴 | partner |
4.3.3、多类名使用方式
- 标签class属性中写多个类名
- 类名中间必须用空格分开
- 该标签分别具有这些类名的样式
<head>
<title>多类名使用</title>
<style>
.box {
width: 100px;
height: 100px;
}
.red {
background-color:red;
}
.green {
background-color: green;
}
</style>
</head>
<body>
<div class="box red"></div>
<div class="box green"></div>
<div class="box red"></div>
</body>
4.4、id选择器
- 可为标有特定id的HTML元素指定样式
- HTML元素以id属性来设置id选择器
- CSS中id选择器以“#”来定义
<head>
<title>Document</title>
<style>
#red {
background-color:red;
}
</style>
</head>
<body>
<div id="red"></div>
</body>
4.5、class选择器和id选择器的区别
- id属性唯一，经常和JavaScript搭配使用
- class属性可以重命
4.6、通配符选择器
- 使用“*”选取页面中所有元素（标签）
- 不需要调用，自动给所有元素使用样式
* {
background-color:red;
margin: 0;
padding: 0;
}
5、字体属性
- Fonts（字体）属性用于定义字体、大小、粗细和文字样式（如斜体）
5.1、字体
- 使用font-family属性定义文本字体
- 各种字体之间必须使用英文状态下的逗号隔开
- 字体若由多个单词组成加英文单引号
- 尽量使用系统默认自带字体，保证在任何用户浏览器均能正确显示
- 写多个字体的好处是，当第一个字体不存在时，会选用第二个字体，依次类推
- 当所有设置字体均不存在，则使用用户浏览器默认字体显示
body {
font-family: 'Microsoft Yahei',‘Times New Roman’,Arial,微软雅墨，‘Hiragino Sans GB’；
}
5.2、字体大小
- 使用font-size属性定义字体大小
- px（像素）大小是网页最常用的单位
- 谷歌浏览器默认文字大小为16px
- 不同浏览器可能默认显示字体大小不一致
-可以给body指定整个页面文字大小
-标题标签比较特殊，需要单独指定文字大小
body {
font-size: 16px；
}
5.3、字体粗细
- 使用font-weight属性设置文本字体粗细
| 属性值 | 描述 |
|---|---|
| normal | 默认值（不加粗） |
| bold | 定义粗体（加粗） |
| 100-900 | 1、400等同于normal 2、700等同于bold 3、这个数字后面不跟单位 |
.bold {
font-weight: bold;
}
/*700后面不要加单位*/
.bold {
font-weight: 700;
}
5.4、字体样式
- 使用fon-style属性设置文本的风格
| 属性值 | 描述 |
|---|---|
| normal | 1、默认值，标准的字体样式 2、可以使倾斜字体变的不倾斜 |
| italic | 显示斜体的字体样式 |
.p {
font-style: italic;
}
5.5、字体复合属性
- 字体属性可以把以上文字样式综合来写，更节约代码。
- 使用font属性时，必须严格按上面语法格式中的顺序书写
- 不能更换顺序
- 各个属性间以空格隔开
- 不需要设置的属性可以省略
- 必须保留font-size和font-family属性，否则font属性将不起作用
/* font: font-style font-weight font-size/line-height font-family; */
body {
font:italic 700 16px/20px 'Microsoft Yahei'
}
6、文本属性
6.1、文本颜色
color属性用于定义文本颜色
| 颜色表示方法 | 属性值 |
|---|---|
| 预定义的颜色值 | 如red、green、blue |
| 十六进制 | #FF0000 |
| RGB代码 | rgb(255,0,0)或rgb(100%,0%,0%) |
6.2、文本对齐
text-align属性用于设置元素内文本内容的水平对齐方式。
| 属性值 | 描述 |
|---|---|
| left | 左对齐（默认值） |
| right | 右对齐 |
| center | 居中对齐 |
6.3、文本装饰
text-decoration属性规定添加到文本的修饰。- 可以给文本添加下划线、删除线、上划线等。
| 属性值 | 描述 |
|---|---|
| none | 1、默认。没有装饰线（最常用） 2、可以去除链接的下划线 |
| underline | 下划线。链接a自带下划线（常用） |
| overline | 上划线（几乎不用） |
| line-through | 删除线 |
6.4、文本缩进
text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。em是一个对相单位，就是当前元素1个文字的大小，- 如果当前元素没有设置大小，
em则会按照父元素的1个文字大小进行设定
p {
text-indent: 20px;
}
或者
p {
text-indent: 2em;
}
6.5、行间距
p {
/*如果字体是16px,则上间距=下间距=2px*/
text-height: 20px;
}
line-height属性用于设置行间的距离（行高）。- 可以控制文字行与行之间的距离。
- 行间距改变的是上间距和下间距的高度。
- 行间距不会改变文本高度。
7、CSS的引入方式
CSS的三种样式表:
- 行内样式表（行内式）
- 内部样式表（嵌入式）
- 外部样式表（链接式）
7.1、行内样式表（行内式）
- 行内样式表（内联样式表）是在元素标签内部的
style属性中设定CSS样式 - 适合修改简单样式。
- 也称为行内式样式表。
<p style="color: red; front-size: 16px;">锄禾日当午，汗滴河下土</p>
7.2、内部表式表（嵌入式）
- 写到html页面内部
- 将所有的CSS代码抽取出来，单独放到一个
<style></style>标签中 <style></style>标签理论上可以放在HTML文档的任何地方, 但一般会放在文档的<head></head>标签中。- 此种方式方便控制当前整个页面中的元素样式设置。
- 代码结构清晰，但并没有实现结构与样式完全分离。
- 内部样式表设定CSS，通常也称为嵌入式引入。
7.3、外部样式表
- 核心是样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用。
引入外部样式表分为两步：
- 新建一个后缀名为.css的样式文件，把所有CSS代码都放入此文件中。
- 在HTML页面中，使用标签引入这个文件
<head>
<title>外部样式表</title>
<link rel="stylesheet" href="style.css" >
</head>
| 属性 | 作用 |
|---|---|
| rel | 1、定义当前文档与被链接文档之间的关系 2、这里需要指定为stylesheet，表示被链接的文档是一个样式表文件 |
| href | 定义所链接的外部样式表文件的URL |
8、复合选择器
- 由两个或多个基础选择器，通过不同的方式组合而成。
包括：
- 后代选择器
- 子选择器
- 并集选择器
- 伪类选择器
8.1、后代选择器
<!--语法规则-->
元素1 元素2 {样式声明}
- 又称包含选择器
- 元素2是元素1的后代元素，最终选择的是元素2
- 元素1和元素2中间用空格隔开
- 元素2也可以是孙子元素，只要是包含在元素1中间的元素，都可以选择
<style>
ul li{
color: red;
}
</style>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
- 元素1、元素2可以是任意基础选择器的组合
<style>
.name li{
color: red;
}
</style>
<ul class="name">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
8.2、子选择器
- 只能选择最近一级子元素，即只能选亲儿子元素
- 语法规则：
元素1>元素2 {样式声明}
- 元素2是元素1的亲儿子，最终选择的是元素2
- 元素1和元素2中间用
>隔开 - 元素2必须是元素1的亲儿子，孙子、重孙子都不行
<style>
div>a{
color: red;
}
</style>
<div>
<a href="#">儿子</a>
<p>
<a href="#">孙子</a>
</p>
</div>
8.3、并集选择器
- 可以选择多组标签，同时为其定义相同样式
- 通过英文逗号
，连接 ，可以理解为和的意思- 任何形式的选择器都可以作为并集选择器的一部分
- 语法：
元素1,元素2{样式声明}
<style>
div,
p,
.pig li {
color: red;
}
</style>
<body>
<div>熊大</div>
<p>熊二</p>
<ul class="pig">
<li>佩奇</li>
<li>乔治</li>
<li>小恐龙</li>
</ul>
</body>
8.4、伪类选择器
- 选择第1个或第n个元素
- 用
:表示，如:hover、:first-child
8.4.1、链接伪类选择器
| 选择器 | 描述 |
|---|---|
a:link | 选择所有未被访问的链接 |
a:visited | 选择所有已被访问的链接 |
a:hover | 选择鼠标指针位于其上的链接 |
a:active | 选择活动链接（鼠标按下未弹起的链接） |
<style>
a:link {
color: red;
text-decoration: none;
}
</style>
<a href="#">佩奇</a>
8.4.2、链接伪类选择器的注意事项
- 为确保生效，需按照LVHA的顺序声明
:link、:visited、:hover、:active - 因
a链接在浏览器中具有默认样式，故实际工作中需要给链接单独指定样式 - 开发中使用最多的写法如下：
<style>
/*所有链接*/
a {
color: gray;
}
/*鼠标经过*/
a:hover {
color: red;
}
</style>
8.4.3、focus伪类选择器
:focus伪类选择器用于选择获得焦点的表单元素
<style>
input:focus {
background-color: blue;
}
</style>
9、元素显示模式
9.1、什么是元素显示模式
- 就是元素（标签）以什么方式显示
- 比如
<div>独占一行 - 比如一行可放多个
<span> - HTML元素一般分为块元素和行内元素两种类型
9.2、元素显示模式的分类
9.2.1、块元素
- 常见的快元素有
<h1>、<p>、<div>、<ul>、<ol>、<li>等 - 其中
<div>是最典型的块元素
块元素的特点：
- 独占一行。
- 高度、宽度、外边距和内边距都可以控制。
- 宽度默认是容器（父级宽度）的100%。
- 是一个容器及盒子，里面可以放行内元素或者块元素。
注意事项：
- 文字类的元素内不能使用块元素
<p>标签主要用于存放文字，因此其内不能放<div><h1>~<h6>等都是文字类元素，其内也不能放块元素。
9.2.2、行内元素
- 常见的行内元素有
<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>。 - 是最典型的行内元素。
- 行内元素有时也被称为内联元素。
行内元素的特点：
- 一行可放多个行内元素
- 高、宽直接设置是无效的
- 默认宽度就是其本身内容的宽度
- 行内元素只能容纳文本或其行内元素
注意事项：
- 链接里面不能再放链接
<a>里面可以放块元素，但是给<a>转换一下块级模式最案例
9.2.3、行内块元素
- 行内元素中有几个特殊的标签
<img />、<input />、<td>、 - 它们同时具有块元素和行内元素的特点
- 有些资料称它们为行内块元素。
行内块元素的特点：
- 相邻行内块元素在一行上，但是他们之间会有空白缝隙。一行可显示多个（行内元素特点）
- 默认宽度就是它本身内容的宽度（行内元素特点）
- 高度、行高、外边距及内边距都可以控制（块元素特点）
9.3、元素显示模式转换
- 特殊情况下，需要元素模式转换
- 如想要增加链接
<a>的触发范围 - 如
<a>转换成块元素后，就可以为其设置宽度和高度。
9.3.1、行内元素转换成块元素
- 使用
display: block; - 行内元素转换成块元素以后，可为其设置宽度和高度
- 行内元素转换成块元素以后，也会独占一行
<style>
a {
width: 100px;
height: 50px;
display: block;
}
</style>
<a href="#">佩奇</a>
9.3.2、块无素转换成行内元素
- 使用
display: inline; - 块元素转换成行内行素后，将不再独占一行
- 块元素转换成行内行素后，也不能为其设置高度和宽度
<style>
div {
display: inline;
}
</style>
<div>佩奇</div>
<div>乔治</div>
9.3.3、转换成行内块
- 使用
display:inline-block;
<style>
span {
width: 100px;
height: 30px;
display: inline-block;
}
</style>
<span>佩奇</span>
10、垂直居中
- CSS中没有提供文字垂直居中的代码，可以使用一个小技巧实现
- 解决方案：让文字的行高等于盒子的高度，即可实现。
- 文字的行高<盒子高度，文字偏上
- 文字的行高>盒子高度，文字偏下
- 文字的行高
line-height - 盒子的高度
height
<style>
span {
width: 100px;
height: 500px;
display: block;
line-height: 10px;
background-color: red;
}
</style>
<span>佩奇</span>
<span>佩奇</span>
11、背景
11.1、背景颜色
| 背景颜色 | 描述 |
|---|---|
background-color:transparent; | 背景透明色 |
background-color:red; | 背景红色 |
background-color:#fff; | 背景白色 |
background-color:#ffffff; | 背景白色 |
11.2、背景图片
background-image属性描述了元素的背景图像。- 常见于logo、装饰性小图片或者超大背景图片。
- 优点是便于控制位置。
<style>
div {
width: 300px;
height: 300px;
background-image: url(images/logo.png);
}
</style>
<div></div>
| 参数值 | 作用 |
|---|---|
| none | 无背景图（默认） |
| url | 使用绝对或相对地址指定背景图像 |
11.3、背景平铺
- 使用
background-repeat属性设置
| 参数值 | 说明 |
|---|---|
| repeat | 1、背景图像在纵向和横向上平铺。 2、默认平铺 |
| no-repeat | 背景图像不平铺 |
| repeat-x | 背景图像在横向上平铺 |
| repeat-y | 背景图像在纵向上平铺 |
<style>
div {
width: 300px;
height: 300px;
background-image: url(images/logo.png);
background-repeat: no-repeat;
}
</style>
<div></div>
11.4、背景图片位置
-
使用
background-position属性。 -
语法
background-position: x y;
-
参数可以使用方位名词或精确单位。
| 参数值 | 说明 |
|---|---|
| length | 百分数 |
| position | top、center、botton、left、center、right方位名词 |
参数是方位名词：
-
如果指定的两个值都是方位名词，则两个值前后顺序无关，如
left top和top left效果一样/*靠上居中*/ background-position: center top;
-
如果只指定了一个方位名词，则第二个值默认居中对齐
/*靠上居中*/ background-position: top;
参数是精确单位：
-
如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标
background-position: 20px 50px;
-
如果只指定了一个数值，那该数值一定是x坐标，另一个坐标默认垂直居中
参数是混合单位：
- 如果是指定的两个值是精确单位和方位名词混合使用，刚第一个值是x坐标，第二个值是y坐标。
background-position: 20px center;
11.5、背景图像固定（背景附着）
- 设置背景图像是否固定或者随着页面滚动
- 使用
background-attachment属性 - 语法：
background-attachment: scroll|fixed
| 参数 | 作用 |
|---|---|
| scroll | 背景图像随内容滚动 |
| fixed | 背景图像固定 |
11.6、背景属性复合写法
-
background-color、background-image、background-repeat、background-position、background-attachment五个属性可以合并简写 -
合并简写在同一个属性
background -
没有特定书写顺序
-
习惯约定：
background: 背景颜色 背景图片 背景平铺 背景图像滚动 背景图片位置
例如：
background: red url(images/logo.png) no-repeat fixed center top;
11.7、背景色半透明
background: rgba(0, 0, 0, 0.3);
- 最后一个参数是alpha透明度，取值范围在0~1之间
- 习惯把0.3的0省略，写为
background: rgba(0, 0, 0, .3); - 盒子背景色半透明，盒子里面的内容不受影响
- CSS3新增属性，IE9及以上版本浏览器才支持
12、CSS的三大特性
- 层叠性
- 继承性
- 优先则
12.1、层叠性
-
给相同选择器设置不同样式，此时一个样式会覆盖（层叠）另一个冲突的产式
层叠性原则： -
样式冲突，后面的样式会覆盖前面的样式。
-
样式不冲突，不会层叠
/*color样式冲突，会层叠*/ /*font-size样式不冲突，不会层叠*/ <style> div { color: red; font-size: 20px; } div { color: blue; } </style>
12.2、继承性
- 子标签会继承父标签的某些样式.
- 子元素可以继承父元素的样式：
text-、font-、line-这些开头的元素属性，以及color属性
<style>
div {
color: red;
font-size: 20px;
}
</style>
<div>
<p>锄禾日当午</p>
</div>
- 上面代码p标签会继承div的样式
12.3、行高的继承性
body{
font:12px/1.5 'Microsoft YaiHei'
}
- 子元素可以继承父元素的行高
- 行高可以跟单位也可以不跟
- 如果子元素没有设置行高，则会继承父元素的行高为1.5
- 此时子元素的行高是，当前子元素的文字大小*1.5
<style>
bddy {
font: 12px/1.5 'Microsoft YaiHei';
}
div {
font-size: 14px;
}
</style>
<body>
<div>佩奇</div>
<p>乔治</p>
</body>
- 上面代码
p和div是body的子元素- 子元素
p和div都继承了父元素body的行高1.5 div标签font-size=14px，故其行高=14*1.5=21pxp标签 font-size继承自body，font-size=12px，故其行高=12*1.5=18px- body行高1.5，这种写法的最大优势就是面面子元素可以根据自己文字大小自动调整行高。
12.4、优先级
- 当多个选择器指向同一个元素，就会有优先级的产生
- 选择器相同，则执行层叠性
- 选择器不同，则根据选择器权重执行
- 继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0
选择器权重如下
| 选择器 | 权重 |
|---|---|
继承或者* | 0,0,0,0 |
| 元素选择器 | 0,0,0,1 |
| 类选择器、伪类选择器 | 0,0,1,0 |
| id选择器 | 0,1,0,0 |
行内样式style="" | 1,0,0,0 |
| !important重要的 | 无穷大 |
<style>
.name {
color: red;
}
div {
color: rebeccapurple!important;
}
#chuhe {
color:blue;
}
</style>
<div class="name" id="chuhe" style="color: violet">锄禾日当午</div>
权重的叠加
<style>
ul li {
color: red;
}
li {
color: blue
}
</style>
<ul>
<li></li>
</ul>
- 上面代码
ul li的权重为0,0,0,1+0,0,0,1=0,0,0,2li的权重为0,0,0,1- 故执行
color: red;
13、盒子模型
页面布局三大核心：
- 盒子模型
- 浮动
- 定位
13.1、盒子模型（Box Model）组成
- 边框border
- 外边距margin
- 内边距padding
- 内容content
13.2、边框（border）
-
使用border设置元素边框
-
边框有三部分组成：边框宽度（粗细）、边框样式、边框颜色
-
边框会影响盒子的大小。
-
语法：
border: border-width || border-style || border-color
| 属性 | 作用 |
|---|---|
| border-width | 1、定义边框粗细 2、单位是px |
| border-style | 边框的样式 |
| border-color | 边框颜色 |
13.2.1、边框样式
border-style值：
| 属性 | 描述 |
|---|---|
| none | 默认无边框 |
| dashed | 虚线边框 |
| dotted | 点线边框 |
| solid | 实线边框 |
| double | 定义两个边框。两个边框的宽度和border-width的值相同 |
| groove | 定义3D沟槽边框。效果取决于边框颜色。 |
| ridge | 定义3D脊边框。交果取决于边框颜色。 |
| inset | 定义一个3D的嵌入边框。效果取决于边框颜色。 |
| outset | 定义一个突出边框。效果取决于边框颜色值 |
13.2.2、边框复合写法
语法：
/*没有顺序*/ border: 1px solid red;
13.2.3、边框各边设置
语法：
border-top: 1px solid red; border-bottom: 1px solid red; border-left: 1px solid red; border-right: 1px solid red;
实例：
上边框为红色，其余边为蓝色。
<style>
div {
width: 200px;
height: 200px;
border:1px solid blue;
border-top:1px solid red;
}
</style>
<div>
</div>
13.2.4、表格细线边框
-
border-collapse属性控制浏览器绘制表格边框的方式。 -
它控制相邻单元格的边框。
-
语法：
border-collapse: collapse;
-
collapse是合并的意思。
-
border-collapse: collapse;表示相邻边框合并在一起。
<style>
table {
width: 500px;
height: 300px;
}
table,
td,
th {
border: 1px solid red;
border-collapse: collapse;
}
</style>
<table>
<tr>
<th>序号</th>
<th>标题</th>
</tr>
<tr>
<td>1</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td></td>
</tr>
</table>
13.3、页边距（padding）
13.3.1、页边距的使用
- 使用
padding属性设置内边距，即边框与内容之间的距离
| 属性 | 作用 |
|---|---|
| padding-left | 左内边距 |
| padding-right | 右内边距 |
| padding-top | 上内边距 |
| padding-bottom | 下内边距 |
13.3.2、页边距（padding）复合写法
| 值的个数 | 表达意思 |
|---|---|
padding: 5px; | 1个值，代表上下左右都有5像素内边距 |
padding: 5px 10px; | 2个值，代表上下内边距是5 像素，左右内边距是10px |
padding: 5px 10px 20px; | 3个值，代表上内边距5像素，左右内边距10像素，下内边距20像素 |
padding: 5px 10px 20px 30px; | 4个值，上5像素，右10像素，下20像素，左30像素，顺时针 |
13.3.3、padding与盒子的大小
- padding会影响盒子的大小。
padding不会影响盒子的大小的情况：
- 下面代码
- p继承父标签div的宽度width=300px;
- 但是并未直接给p标签指定宽度
- 此时padding不会影响p的宽度，依然是width=300px
- 如果直接给p标签指定宽度，哪怕是指定的宽度和父标签一样，padding依然会影响盒子大小
<style>
div {
width: 300px;
height: 100px;
background-color: purple;
}
p {
padding: 30px;
background-color: skyblue;
}
</style>
<div>
<p></p>
</div>
13.4、外边距（margin）
13.4.1、外边距的使用
- 使用
margin设置外边距 - 控制盒子与盒子之间的距离
| 属性 | 作用 |
|---|---|
| margin-left | 左外边距 |
| margin-right | 右外边距 |
| margin-top | 上外边距 |
| margin-bottom | 下外边距 |
13.4.2、外边距的复合写法
| 值的个数 | 表达意思 |
|---|---|
margin: 5px; | 1个值，代表上下左右都有5像素外边距 |
margin: 5px 10px; | 2个值，代表上下外边距是5 像素，左右外边距是10px |
margin: 5px 10px 20px; | 3个值，代表上外边距5像素，左右外边距10像素，下内外距20像素 |
margin: 5px 10px 20px 30px; | 4个值，上5像素，右10像素，下20像素，左30像素，顺时针 |
13.4.3、利用外边距让块级盒子水平居中
必须满足两个条件：
- 盒子必须指定了宽度（width）
- 盒子左右的外边距都设置为auto
常见的写法
-
以下三种都可以：
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;
-
以上方法是让块级元素水平居中
-
行内元素或者行内块元素水平居中给其父元素添加
text-align:center;即可。
13.4.4、外边距合并
- 使用margin定义块元素的垂直外边距时，可能会引起外边距的合并。
- 对于两个嵌套关系（你子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方案：- 可以为父元素定义上边距
border:1px solid transparent; - 可以为父元素定义上内边距
padding:1px; - 可以为父素添加
overflow:hidden; - 还有其它方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题。
- 浮动的盒子不会有外边距合并
- 可以为父元素定义上边距
13.5、清除内外边距
-
网页元素很多带有默认的内外边距。
-
不同浏览器默认值也不一致。
-
因此布局前要清除下网页元素的内外边距。
<style> * { padding: 0; margin: 0; } </style>
注意：
- 行内元素为了照顾兼容性，尽量只设置左右内外边距，
- 不要设置上下内外边距（因为设置了也可能不生效）。
- 需要设置可以转换为块级和行内块元素。
14、去除列表前的小圆点或数字
li {
list-style: none;
}
15、圆角边框
15.1、圆角边框介绍
-
CSS3中新增
-
IE9及以上显示
-
对整体页面布局无影响，不用担心兼容性。
-
语法：
/*length可以是像素也可以是百分比*/ border-radius: length;
-
如：
border-radius: 10px;
border-radius: 50%;
圆角边框分开写法：
| 属性 | 描述 |
|---|---|
| border-top-left-radius | 左上角 |
| border-top-right-radius | 右上角 |
| border-bottom-right-radius | 右下角 |
| border-bottom-left-radius | 左下角 |
圆角边框复合写法：
| 写法 | 描述 |
|---|---|
| border-radius: 10px; | 一个值，所有倒角半径都是10px |
| border-radius: 10px 20px; | 两个值， |
| border-radius: 10px 20px 30px; | 三个值， |
| border-radius: 10px 20px 30px 40px; | 四个值，左上角，右上角，右下角，左下角，顺时针 |
15.2、圆形盒子的实现
- 下面代码
- 宽、高相同即为一个正方形盒子
- 设置倒角的半径与宽/2、高/2相等即
border-radius: 100px; - 也可以设置
border-radius: 50%;同样可以做出圆形盒子。
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
border-radius: 100px;
}
</style>
<div></div>
15.3、圆角矩形盒子的实现
<style>
div {
width: 500px;
height: 200px;
background-color: pink;
border-radius: 100px;
}
</style>
<div></div>
- 如果是个矩形可以设置倒半径为高度的一半
16、盒子阴影
16.1、盒子阴影用法
-
CSS3中新增
-
IE9及以上显示
-
对整体页面布局无影响，不用担心兼容性。
-
使用
box-shadow属性为盒子添加阴影 -
语法：
box-shadow:h-shadow v-shadow blur spread color inset;
| 参数 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置，允许负值 |
| v-shadow | 必需。垂直阴影的位置，允许负值 |
| blur | 可选。模糊距离。 |
| spread | 可选。阴影的尺寸。 |
| color | 可选。阴影的颜色。 |
| inset | 可选。将外部阴影outset改为内部阴影 |
-
默认的是外阴影（outset），但是不可以写这个单词，否则会导致阴影无效。
-
盒子阴影不占用空间，不会影响其他盒子排列。
box-shadow: 10px 10px 10px 10px rgba(0,0,0,.3);
16.2、鼠标经过盒子产生阴影
- hover不仅仅是只可以用在链接上。比如
div:hover等。
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
div:hover {
box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .3);
}
</style>
<div></div>
17、文字阴影
-
- CSS3中新增
-
IE9及以上显示
-
对整体页面布局无影响，不用担心兼容性。
-
使用
text-shadow属性将阴影用于文本。 -
语法：
text-shadow: h-shadow v-shadow blur color;
| 参数 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置，允许负值 |
| v-shadow | 必需。垂直阴影的位置，允许负值 |
| blur | 可选。模糊距离。 |
| color | 可选。阴影的颜色。 |
18、浮动
18.1、传统网页布局的三种方式
- 标准流（普通流/文档流）：标签按照规定默认方式排列。
- 浮动
- 定位
网页布局准则：
- 多个块元素纵向排列用标准流。
- 多个块元素横向排列用浮动。
18.2、浮动基本语法
-
float属性用于创建浮动边框，将其移动到一边，直到左边缘或右边缘触及另一个浮动框的边缘。
-
语法：
选择器{float: 属性值}
| 参数值 | 描述 |
|---|---|
| none | 默认值。元素不浮动 |
| left | 向左浮动 |
| right | 向右浮动 |
18.3、浮动的特性
- 浮动元素会脱离标准流（脱标）。
- 浮动的元素会一行内显示并且元素顶部对齐。
- 浮动的元素会具有行内块元素的特性。
- 浮动的盒子不再保留原先的位置。
- 如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。
- 浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动盒子，多出的盒子会别起一行对齐。
- 浮动元素具有行内块元素特性。
- 如果行内元素有了浮动，则不需要转换成块元素或行内块元素，就可以直接给高度和宽度。
- 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
- 浮动的盒子中间没有缝隙，是紧挨在一起的。
- 行内元素同理。
18.4、常见网页布局
18.5、浮动布局的注意点
一、浮动和标准流的父盒子搭配
- 先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。
二、一个元素浮动了，理论上其余兄弟元素也要浮动。
- 一个盒子里面有多个盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动，以防止引起问题。
- 浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标准流。
18.6、清除浮动
一、为什么清除浮动？
- 父级盒子很多情况下，不便给高度，但是盒子浮动又不占有位置，会导致父级盒子高度为0，此时会影响下面的标准流盒子。
- 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响。
二、清除浮动的本质
- 清除浮动的本质就是清除浮动元素造成的影响。
- 如果父盒子本身有高度，则不需要清除浮动。
- 清除浮动后，父级元素会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流元素了。
三、清除浮动的策
- 闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。
四、语法：
选择器 {clear:属性值}
| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
| right | 不允许右侧有浮动元素（清除右侧浮动的影响） |
| both | 同时清除左右两侧浮动的影响 |
- 实际工作中，几乎只用
clear:both;
18.7、清除浮动方法
清除浮动有以下四种：
- 额外标签法也称为隔墙法，是W3C推荐的做法。
- 父级添加overflow属性。
- 父级添加after伪元素。
- 父级添加双伪元素。
18.7.1、 额外标签法
- 在浮动元素末尾添加一个空的标签。例如
<div style="clear: both"></div> - 注意：要求这个新的空标签必须是块元素。
<style>
.box {
width: 300px;
border: 1px solid blue;
background-color: skyblue;
margin: 0 auto;
}
.one {
width: 100px;
height: 100px;
float: left;
background-color: pink
}
.two {
width: 100px;
height: 100px;
float: left;
background-color: pink;
}
.three {
width: 100px;
height: 100px;
background-color: red;
margin: 0 auto;
}
.clear {
clear: both;
}
</style>
<div class="box">
<div class="one">1</div>
<div class="two">2</div>
<div class="clear"></div>
</div>
<div class="three">3</div>
18.7.2、父级添加overflow属性
- 给父级添加overflow属性，将其属性值设置为hidden、auto、scroll
- 缺点：无法显示溢出的部分
<style>
.box {
width: 300px;
border: 1px solid blue;
background-color: skyblue;
margin: 0 auto;
/*清除浮动*/
overflow: hidden;
}
.one {
width: 100px;
height: 100px;
float: left;
background-color: pink
}
.two {
width: 100px;
height: 100px;
float: left;
background-color: pink;
}
.three {
width: 100px;
height: 120px;
background-color: red;
margin: 0 auto;
}
</style>
<div class="box">
<div class="one">1</div>
<div class="two">2</div>
</div>
<div class="three">3</div>
18.7.3、父级添加:atfer伪元素
-
:after方式是客外标签法的升级版。也是给父元素添加。 -
语法：
.clearfix::after{ content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix{ /*IE6、7专有*/ *zoom: 1; }
父级添加:atfer伪元素:
<style>
.box {
width: 300px;
border: 1px solid blue;
background-color: skyblue;
margin: 0 auto;
}
.one {
width: 100px;
height: 100px;
float: left;
background-color: pink
}
.two {
width: 100px;
height: 100px;
float: left;
background-color: pink;
}
.three {
width: 100px;
height: 120px;
background-color: red;
margin: 0 auto;
}
.clearfix::after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/*IE6、7专有*/
*zoom: 1;
}
</style>
<div class="box clearfix">
<div class="one">1</div>
<div class="two">2</div>
</div>
<div class="three">3</div>
18.7.4、双伪元素清除浮动
- 给父元素添加。
- 代表网站：小米、腾讯。
- 语法：
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
双伪元素清除浮动示例：
<style>
/*以下为双伪无素清除浮动*/
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/*IE6、7专有*/
.clearfix {
*zoom: 1;
}
/*以上为双伪无素清除浮动*/
.box {
width: 800px;
border: 1px solid blue;
margin: 0 auto;
}
.one {
width: 100px;
height: 100px;
float: left;
background-color: pink
}
.two {
width: 100px;
height: 120px;
background-color: red;
margin: 0 auto;
}
</style>
<div class="box clearfix">
<div class="one">1</div>
<div class="one">2</div>
</div>
<div class="two">3</div>
19、定位
19.1、为什么需要定位
- 某个元素可以自由的在一个盒子内移动位置，并且压住其它盒子。
- 滚动窗口时，盒子是固定在屏幕某个位置。
19.2、定位组成
- 定位是将盒子定在某一个位置。
- 定位=定位模式+边偏移
一、定位模式
- 定位模式决定元素的定位方式，它通过CSS的
position属性来设置，其值可分为四个：
| 值 | 描述 |
|---|---|
sttic | 静态定位 |
relative | 相对定位 |
absolute | 绝对定位 |
fixed | 固定定位 |
二、边偏移
- 就是定位的盒子移动到最终位置。
- 有top、bottom、left和right四个属性。
19.3、静态定位sttic
-
默认的定位方式，无定位的意思。
-
语法：
选择器{position:static;} -
静态定位按照标准流特性摆放位置，它没有边偏移。
-
静态定位在布局时很少用到。
19.4、相对定位relative
-
元素在移动位置时，是相对于它原来的位置来说的。
-
原来在标准的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来的位置）
-
语法：
选择器{position:relative;}
示例：
.box{
position: relative;
top: 100px;
left: 100px;
}
19.5、绝对定位absolute
-
元素在移动位置时，相对于它的祖先元素来说的。
-
语法：
选择器{position:absolute;}
绝对定位的特点：
- 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）。
- 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
- 绝对定位不再占有原先的位置（脱标）。
19.6、子绝父相原则
- 子级元素使用绝对定位，父级元素则需要相对定位。
- 子级元素使用绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响到其他兄弟盒子。
- 子绝父相是因为，父级元素需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位。
- 绝对定位不占有原来位置，相对定位占有原来位置。
- 子绝父相只是相对使用较多，并不是完全要遵照这个原则。
19.7、固定定位fixed
-
元素固定于浏览器可视区的位置
-
主要使用场景：可使浏览器页面滚动时元素的位置不变。
-
语法：
选择器{position:fixed;}
一、固定定位的特点：
1、 以浏览器的可视窗口为参照点移动元素。
- 跟父元素没有关系
- 不随滚动条滚动
2、 固定定位不占有原来位置。
- 固定定位也是脱标的。
- 固定定位可以看做是一种特殊的绝对定位。
二、固定定位小技巧：固定在版心右侧位置
算法：
-
让固定定位的小盒子left:50%，走到浏览器可视区（也是版心）的一半位置。
-
让固定定位的盒子margin-left:版心宽度的一半距离。就可以固定在版心右侧对齐了。
三、示例：
<style>
.w {
width: 1000px;
height: 2000px;
margin: 100px auto;
background-color: skyblue;
}
.fixed {
position: fixed;
left: 50%;
margin-left: 500px;
width: 50px;
height: 30px;
background-color: pink;
}
</style>
<div class="fixed"></div>
<div class="w"></div>
19.8、粘性定位sticky
-
粘性定位可以认为是相对定位和固定定位的混合。
-
不常用，兼容性差。
-
IE不支持。
-
语法：
选择器{position:sticky;top:10px;}
一、粘性定位的特点：
- 以浏览器的可视窗口为参照点移动元素（固定定位特点）
- 粘性定位占有原先的位置（相对定位特点）。
- 必须添加top、left、right、bottom其中一个才有效。
19.9、定位的叠放顺序
-
使用
z-index来控制盒子的前后次序（Z轴）。 -
语法:
选择器{z-index:1;} -
数值可以是正整数、负整数或0
-
默认是auto，数值越大，盒子越靠上。
-
如果属性相同，则按书写顺序，后来者居上。
-
数字后面不能加单位。
-
只有定位的盒子才有z-index属性。
19.10、绝对定位的盒子居中
- 加了绝对定位的盒子不能通过
margin:0 auto;设置水平居中。 - 可以用下面的方法现水平居中。
- 垂直居中方法雷同。
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 200px;
height: 200px;
background-color: skyblue;
position: absolute;
/*让盒子左移动50%*/
left: 50%;
/*让盒子左移自身宽度的一半*/
margin-left: -100px;
}
</style>
<div class="box"></div>
19.11、定位的特殊性
- 行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
- 块级元素添加绝对或者固定定位，如果不给宽度和高度，默认大小是内容的大小。
- 脱标的盒子不会触发外边距塌陷。
浮动元素、绝对定位（固定定位）的元素都不会触发外边距合并的问题。 - 绝对定位（固定定位）会完全压住盒子。
浮动元素，只会压住它下面标准流的盒子，但不会压住标准流盒子里面的文字（图片）。
浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素。
20、CSS属性书写顺序
建议遵循以下顺序：
1、布局定位：display、position、float、clear、visibility、overflow（建议display第一个写，毕竟关系到模式）
2、自身属性：width、height、margin、padding、border、background
3、文本属性：color、font、text-decoration、text-align、vertical-align、white-space、break-word
4、其它属性(CSS3)：content、cursor、border-radius、box-shadow、text-shadow、background:linear-gradient…
21、图片格式
21.1、常见图片格式
- jpg图像格式：JPEG(JPG)对色彩信息保留较好，高清、颜色较多，产品类图片常用。
- gif图像格式：GIF格式最多只能存储256色，通常用来显示简单图形及字体，但可以保存透明背景和动画效果，常用于一些图片小动画效果。
- png图像格式：一种新兴的网络图形格合，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景。如果要切成背景透明图片，请选择png格式。
- PSD图像格式：Photoshop专用格式，可存放图层、通道、遮罩等多种设计稿。
21.2、插件切图
- Cutterman是一款运行在Photoshop中的插件。
- 官网：http://www.cutterman.cn/zn/cutterman
22、元素的显示与隐藏
- display显示隐藏
- visibility显示隐藏
- overflow溢出显示隐藏
22.1、display属性
- 用于设置一个元素应如何显示。
| 值 | 作用 |
|---|---|
| none | 1、隐藏对象。 2、隐藏后不占有位置。 |
| block | 除了转换为块级元素之外，同时还有显示元素的意思。 |
22.2、visibility属性
| 值 | 作用 |
|---|---|
| visible | 元素可见 |
| hidden | 1、元素隐藏. 2、隐藏元素后，继续占有原来的位置 |
22.3、overflow属性
| 值 | 作用 |
|---|---|
| visible | 显示全部内容 |
| auto | 1、此为body对象和textarea的默认值。 2、在需要时添加滚动条。 |
| hidden | 不显示超过对象尺寸的内容 |
| scroll | 总是显示滚动条 |
- 如果有定位的盒子，需慎用overflow:hidden，因为它会隐藏多余的部分。
23、精灵图
23.1、精灵图产生的原因
- 为了有效减少服务器接收和发送请求的次数，提高页面的加载速度 ，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。
23.2、精灵图（sprites）原理
- 使用精灵图核心：主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
- 这个大图片称为sprites、精灵图或者雪碧图。
- 移动背景图片位置，此时可以使用
background-position。 - 移动的距离就是这个目标图片的x和y坐标。
23.3、精灵图使用
- 给盒子的背景图片移动位置，来显示需要的图标。
- 使用方法：参考下面代码。
background:url(images/sprites.png) no-repeat -100px -50px;
24、字体图标
24.1、字体图标的产生
一、字体图标使用场景：
主要显示网页中通用、常用的小图标。
二、精灵图有诸多优点，但缺点也很明显：
- 图片文件相对较大。
- 图片本身放大和缩小会失真。
- 图片制作完毕想要更换相对复杂。
三、为了解决上述问题，有一种技术就是字体图标iconfont。
- 字休图标为前端开发人员提供了一种方便高效的图标使用方式，展示的是图标，本质属于字体。
四、字体图标的优点
- 轻量级：一个图标字体要比图像小。一旦字体加载，图标马上渲染，减少了服务器请求.
- 灵活性：本质是文字，可以随意更改颜色、产生阴影、透明效果、旋转等。
- 兼容性：几乎支持所有浏览器。
注意：字体图标不能完全替代精灵图。
24.2、字体图标的使用
24.2.1、字体图标的下载
- icomoon字库：http://icomoon.io
icoMoon成立于2011年，推出了第一个自定义图标字体生成器，它允许用户选择所需要的图标，使它们成一字型。该字库内容种类繁多，唯一的遗憾是国外服务器，打开速度较慢。 - 阿里iconfont字库：http://www.iconfont.cn
阿里妈妈M2UX的一个iconfont字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。重点，免费。
24.2.2、字体图标的引入
- 把下载好的字体图标文件里的fonts文件夹放入页面根目录
- 在CSS样式中全局声明字体：简单理解就是把这些字体文件通过CSS引入到我们页面中。
- 一定注意字体路径的问题。
<style>
@font-face {
font-family: 'icommoon';
src: url('../fonts/neues_bauen_demo-webfont.eot');
src: url('../fonts/neues_bauen_demo-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/neues_bauen_demo-webfont.woff') format('woff'),
url('../fonts/neues_bauen_demo-webfont.ttf') format('truetype'),
url('../fonts/neues_bauen_demo-webfont.svg#NeuesBauenDemo') format('svg');
font-weight: normal;
font-style: normal;
}
span{
/*指定的定体要和声明的字体一致*/
font-family: icommoon;
font-style: 100px;
color:red
}
</style>
<span></span>
24.2.3、字体文体格式
不同浏览器所支持的字体格式是不一样的，字体图标之所以兼容，是因为包含了主流浏览器支持的字体文件。
- TureType（.ttf）格式：.ttf字体是Windows和Mac最常见的字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、IOSMobile\Safari4.2+
- Web Open Font Format（.woff）格式：.woff字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Sfari3.6+、Opera11.1+
- Embedded Open Type（.eot）格式：.eot字体是IE志用字体，支持这种字体的浏览器有IE4+;
- SVG（.svg）格式：.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、IOSMobile Safari3.2+
24.2.1、字体图标的追加
把selection.json重新上传，然后选中自己想要的新的图标，重新下载压缩包，并替换原来的文件即可。
这篇关于CSS语法范的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-11-14CSS-Module学习：轻松入门指南
- 2024-11-12CSS9资料入门指南
- 2024-11-12CSS浮动资料详解：初学者指南
- 2024-11-12CSS选择器资料详解与实战教程
- 2024-11-12CSS样式资料：初学者必备指南
- 2024-11-11CSS项目实战：从入门到上手
- 2024-11-11CSS定位项目实战：新手指南
- 2024-11-11CSS浮动项目实战：初学者指南
- 2024-11-11CSS选择器项目实战：从入门到上手
- 2024-11-11CSS样式项目实战：新手入门指南
