CSS基础
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
- 前言
- 一、CSS样式规则
- 二、CSS引入方式
-
- 1.行内样式表 (不建议使用)
- 2.内部样式表（内联样式）
- 3.外部样式表
- 4.三种样式表总结
- 三、CSS字体属性
- 四、CSS文本属性
-
- 4.1 color 文本颜色
- 4.2 text-align 文本对齐方式
- 4.3 text-decoration 文本修饰
- 4.4 text-transform 文本转换
- 4.5 text-indent 文本缩进
- 4.6 text-shadow 文本阴影
- 4.7 direction 文本方向
- 4.8 letter-spacing 字符间距
- 4.9 word-spacing 字间距
- 4.10 line-height 行高
- 4.11 word-break
- 4.12 white-space
- 4.12 overflow
- 4.13 text-overflow
- 五、CSS注释
- 六、基础选择器
-
- 6.1 标签选择器（元素选择器）
- 6.2 id选择器
- 6.3 类选择器
- 6.4 多类名选择器
- 6.5 通配符选择器
- 6.6 伪类选择器
-
- (1) 链接伪类选择器
- (2) 结构伪类选择器（CSS3）
- (3) 目标伪类选择器
- 七、CSS复合选择器
-
- 7.1 交集选择器
- 7.2 并集选择器
- 7.3 兄弟选择器
- 7.4 后代选择器
- 7.5 子元素选择器
- 7.6 属性选择器
- 7.7 伪元素选择器（CSS3）
- 八、CSS三大特性
-
- （1）CSS层叠性
- （2）CSS继承性
- （3）CSS优先级
- 九、标签显示模式
-
- （1）块级元素（block-level）
- （2）行内元素（inline-level）
- （3）行内块元素（inline-block）
- （4）标签显示模式转换 display
- 十、CSS背景（background）
-
- 10.1 背景颜色（background-color）
- 10.2 背景图片（background-image）
- 10.3 背景平铺（background-repeat）
- 10.4 背景位置（background-position）
- 10.5 背景附着（background-attachment）
- 10.6 背景简写
- 10.7 背景颜色透明（CSS3）
- 10.8 背景缩放（CSS3）
- 10.9 多背景（CSS3）
- 10.10 背景颜色渐变（CSS3）
- 10.11 凹凸文字
- 10.12 空心文字
- 10.13 精灵图（雪碧图）
- 十一 盒子模型（CSS重点）
-
- 11.1 盒子模型简介
- 11.2 盒子模型（Box Model）
-
- (1) 标准盒模型
- (2) IE盒模型
- (3) 总结
- (4) 盒子边框（border）
- (5) 内边距（padding）
- (6) 外边距（margin）
- (7) 外边距合并
- (8) 盒子阴影
- 十二 浮动（Float）
-
- 12.1 什么是文档流？
- 12.2 什么是浮动？
- 12.3 清除浮动
- 十三 定位
-
- 13.1 元素的定位属性
- 13.2 叠放次序（z-index）
- 十四 布局中的对齐方式
- 十五 CSS3转换 transform
-
- 2D转换
- 3D转换
- 十六 CSS3过渡 transition
- 十七 CSS3动画 animation
-
- 17.1 使用方法
-
- (1) 语法from to
- (2) 百分比
- 17.2 动画运动(animation-timing-function)
- 17.3 动画延时(animation-delay)
- 17.4 循环次数animation-iteration-count
- 17.5 反向运动animation-direction
- 17.6 animation-play-state暂停或停止
- 十八 CSS3多列显示
-
- （1）column-count（CSS3）
- （2）column-width（CSS3）
- （3）column-span(CSS3)
- （4）column-gap（CSS3）
- （5）column-rule（CSS3）
- （6）columns（CSS3）
- （7）多列实现div布局
- 十九 CSS3 弹性盒子(Flex Box)
- 二十 CSS3多媒体查询 Media Queries
-
- （1）多媒体查询语法
- （2）CSS3多媒体类型
- （3）常用的条件
- （4）媒体查询两种方式
- 二十一 移动端布局
-
- （1）布局概念
- （2）基本概念
-
- 1、物理像素
- 2、设备像素比(device pixel ratio)
- 3、视网膜屏幕Retina
- 4、视口 viewport
-
- （1）布局视口layout viewport
- （2）布局视口layout viewport
- （3）理想视口ideal viewport
- （4）meta视口标签
- 5、rem单位
- 二十二 calc计算属性
-
- （1）calc() 只作用于属性值
- （2）CSS很多长度都可以与calc()一起使用
- （3）calc()的数学运算符
前言
CSS用于控制网页的样式和布局, 修饰页面效果，可以配合脚本语言动态的对网页各元素进行格式化，提升用户体验性，接下来让我们详细看看CSS是如何将网页美容的。
一、CSS样式规则
CSS规则主要由两个主要部分构成：选择器，以及一条或多条声明。
- 选择器用于指定css样式作用的HTML对象，花括号内是对该对象设置的具体样式。
- 属性和属性值之间以“键值对”的形式出现。
- 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
- 属性和属性值之间用英文“：”连接。
- 多个键值对之间使用英文“；”区分。
p { /*选择器*/
color: red; /*声明*/
font-size: 14px; /*声明*/
}
二、CSS引入方式
1.行内样式表 (不建议使用)
直接在标签的属性中使用style声明，在style属性中添加css声明即可。
这是一个行内样式表的css
2.内部样式表（内联样式）
定义在head或body标签中,使用style标签
3.外部样式表
定义在外部的css文件中，需要在head中引入相应的css文件
(1）html文件中：使用link来导入css文件
CSS外部样式引入
/*关联外部的css样式文件*/
/*type:定义链接文档的类型，在这里需要指定为"text/css",表示链接的外部文件为css样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet"，表示被链接的文档是一个样式表文件。
href：定义所链接外部样式表文件的url，可以是相对路径，也可以是绝对路径。*/
(2）css文件中：定义CSS样式
p {
background-color: blue;
color: red;
}
4.三种样式表总结
3种样式表的优先级：
1、行内样式表 > 内部样式表 = 外部样式表
2、当内部样式表和外部样式表同时存在时，采用 就近原则 来使用样式
三、CSS字体属性
| 字体属性 | 描述 |
|---|---|
| font-size：字号大小 | 用于设置字号 |
| font-family：字体 | 用于设置字体 |
| font-weight：字体粗细 | 用于设置字体粗细 |
| font-style：字体风格 | 用于定义字体风格如设置斜体、倾斜或正常字体 |
| font-variant | 规定字体异体 |
font-style 可用属性值如下：
- normal：默认值，浏览器会显示标准的字体样式。
- italic：浏览器会显示斜体的字体样式。
- oblique：浏览器会显示倾斜的字体样式。
font-variant 可用属性值如下：
- normal：默认值。浏览器会显示一个标准的字体。
- small-caps： 浏览器会显示小型大写字母的字体。
- inherit： 规定应该从父元素继承 font-variant 属性的值。
四、CSS文本属性
| 文本属性 | 描述 |
|---|---|
| color | 用于指定文本的颜色 |
| text-align | 指定元素文本的水平对齐方式 |
| text-decoration | 用于对文本添加修饰，如下划线、删除线等 |
| text-transform | 用于转换文本的大小写 |
| text-indent | 规定文本块(块级中的文本)中首行文本的缩进 |
| text-shadow | 用于设置文本的阴影效果 |
| direction | 用于指定文本的方向 |
| letter-spacing | 用于增加或减少字符间的空白（字符间距）主要用于汉字 |
| word-spacing | 用于增加或减少单词与单词之间的空白 主要用于英文段落 |
| line-height | 用于设置文字行与文字行之间的距离 |
| word-break | 规定自动换行的处理方法 |
4.1 color 文本颜色
color属性有3种表现形式：
- color-name：使用颜色名称，如：red, transparent
- hex-number：使用十六进制数表示，取值是0~f，每个颜色使用两位表示，如：#ff0000表示红色 0-9 a:10 b:11 c:12 d:13 e:14 f:15
- rgb-number：使用rgb颜色值表示，取值0~255，如rgb(255,0,0)，rgba(100%, 0%, 0%, .5)
- rgba：在rgb上多了一给a，表示透明度，取值0~1完全透明完全不透明
标题1
标题2
标题3
标题3
4.2 text-align 文本对齐方式
text-align用于指定元素文本的水平对齐方式，取值有left、right、center、justify（两端对齐文本）
标题1
标题2
标题3
这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落
4.3 text-decoration 文本修饰
text-decoration用于对文本添加修饰，如下划线、删除线等。有如下取值：
- none：默认，定义标准的文本，没有任何修饰。
- underline：定义在文本下方的一条线
- overline：定义在文本上方的一条线
- line-through：定义穿过文本的一条线
4.4 text-transform 文本转换
text-transform用于转换文本的大小写（主要用于英文），其取值有：
- none：默认
- capitalize：文本中每个单词以大写字母开头
- uppercase：所有单词字母都大写
- lowercase：所有单词字母都小写
4.5 text-indent 文本缩进
text-indent 属性规定文本块(块级中的文本)中首行文本的缩进。取值有：
- 数值：表示像素值
- 百分比：基于父元素宽度的百分比的缩进。
注意： 负值是允许的。如果值是负数，将第一行左缩进。
小技巧： 首行缩进2字符使用 2em
4.6 text-shadow 文本阴影
text-shadow用于设置文本的阴影效果。语法格式是
text-shadow: h-shadow v-shadow blur color;
text-shadow: h-shadow v-shadow blur color;
h-shadow：必需。水平阴影的位置。允许负值。horizontal， X轴往右是正值
v-shadow：必需。垂直阴影的位置。允许负值。 vertical，Y轴向下是正值
blur：可选。模糊的距离。
color：可选。阴影的颜色。
4.7 direction 文本方向
CSS中direction属性决定了HTML文字渲染方向
direction 用于指定文本的方向。取值如下：
-
ltr：默认的，文本方向从左到右 left to right
-
rtl：文本方向从右到左。right to left
4.8 letter-spacing 字符间距
letter-spacing 属性增加或减少字符间的空白（字符间距），使用数值表示，可以是负数。主要用于汉字
如果用于英文段落 增加/减少字母之间的空白
4.9 word-spacing 字间距
word-spacing属性增加或减少单词与单词之间的空白，允许使用负值。主要用于英文段落
如果作用于中文，挨在一起的中文会被识别为一个单词
4.10 line-height 行高
line-height 用于设置文字行与文字行之间的距离。取值如下：
-
number：设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
-
length：设置固定的行间距 px em 。
-
%：基于当前字体尺寸的百分比行间距。
使用技巧：在一行的盒子内，我们设定行高等于盒子的高度，就可以是文字垂直居中。只适用于单行文本
4.11 word-break
规定自动换行的处理方法。通过使用 word-break 属性，可以让浏览器实现在任意位置的换行。
| 属性值 | 描述 |
|---|---|
| normal | 使用浏览器默认的换行规则。 |
| break-all | 允许在单词内换行(主要用于英语) |
| keep-all | 保持同行显示，不是中文日语韩语(CJK)其实和normal一样(主要用于CJK) |
keep-all: 所有“单词”一律不拆分换行可以理解为只有空格等可以触发自动换行
break-all：所有单词碰到边界一律拆分换行
4.12 white-space
设置元素对内容中的空格的处理方式
| 值 | 描述 |
|---|---|
| normal | 默认。文本空白 换行会被浏览器忽略。 |
| pre | 保留文本原样式 比如空格或换行 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到br标签为止。 |
| pre-wrap | 保留空白符序列，保留换行符。如果文本超出容器宽度处没有换行符自动换行 |
| pre-line | 合并空白符序列，保留换行符。如果文本超出容器宽度处没有换行符自动换行 |
| inherit | 规定应该从父元素继承 white-space 属性的值。 |
4.12 overflow
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
如果父元素宽高能够包含子元素 auto就不会出现滚动条 scroll 就会出现滚动条
4.13 text-overflow
用来控制超长溢出的文字内容的显示方式
| 值 | 描述 |
|---|---|
| clip | 修剪文本。 |
| ellipsis | 显示省略符号来代表被修剪的文本。 |
单行文本溢出
div{
width: 100px;
height: 100px;
border: 1px solid black;
/* 强制一行显示*/
white-space: nowrap;
/* 超出部分隐藏 */
overflow: hidden;
/* 超出部分省略号 */
text-overflow: ellipsis;
}
多行文本溢出显示省略号，有较大的兼容性，适合用于webkit浏览器或移动端（移动端内核大部分是webkit内核）
- -webkit-line-clamp：限制在一个块元素显示的文本的行数。为实现效果，它需要组合其他的WebKit属性。常见结合属性以下两点：
- display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
- -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
div{
width: 100px;
/* 不要设置高度 */
overflow: hidden;
text-overflow: ellipsis;
/* 1.必须结合的属性，将对象作为弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 2.是一个 不规范的属性，它没有出现在 CSS 规范草案中。限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他外来的WebKit属性 */
-webkit-line-clamp: 2;
/* 3.必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
}
五、CSS注释
css规则是使用 /*需要注释的内容*/ 进行注释的。
快捷键 ctrl + / 或者ctrl + shift + /
六、基础选择器
6.1 标签选择器（元素选择器）
标签选择器是指用HTML标签名作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
基本语法格式:
标签名{属性1：属性值1; 属性2：属性值2; ...}
优点：能快速为页面中同类型的标签统一样式
缺点：不能设计差异化样式。
span {
color: red;
}
div {
background-color: red;
}
6.2 id选择器
id选择器使用“#”进行标识，后面紧跟id名。
#id名{属性1：属性值1; 属性2：属性值2; ...}
<标签名 id="id值">
注意：元素的id值是唯一的，只能对应于文档中某一个具体的元素。
6.3 类选择器
类选择器使用“.”（英文点）进行标识，后面紧跟类名。
.类名{属性1：属性值1; 属性2：属性值2; ...}
<标签名 class="类名">
相对于ID选择器，类选择器的类名可以是多个，并且一个类名可以对应多个元素，可以为元素对象定义单独或相同的样式。
6.4 多类名选择器
可以给标签指定多个类名，类名之间用空格隔开。
红色
红色加粗
6.5 通配符选择器
通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。
基本语法格式:
* {属性1：属性值1; 属性2：属性值2; ...}
通常使用它来清楚HTML元素的默认边距。
* {
margin: 0; /*定义外边距*/
padding: 0; /*定义内边距*/
}
6.6 伪类选择器
伪类选择器用于向某些选择器添加特殊的效果。
伪类选择器使用“:”冒号来表示
(1) 链接伪类选择器
链接伪类选择器主要针对于a标签
a:link /*未访问的链接*/
a:visited /*已访问的链接*/
a:hover /*鼠标移动到链接上*/
a:active /*选定的链接*/
注意：
- a:hover 必须在 a:link 和 a:visited 之后。
- a:active 必须在 a:hover 之后，需要严格按顺序才能看到效果。
- visited只能修改颜色，在未访问状态下设置了背景颜色的条件下 可以设置背景颜色 其他不能做改变
记忆方法：l o v e h a t e
(2) 结构伪类选择器（CSS3）
-
:first-child 获取第一个子元素
在 HTML 中，文本本身是 HTML 元素的父节点，HEAD 和 BODY 是 HTML 元素的子节点。
-
:last-child 获取最后一个子元素。注意：IE8不支持X:last-child。
-
:nth-child(n) 选取某个元素的一个或者多个特定的子元素。可以使用数字（n从1开始）、关键字（even偶数、odd奇数）或公式<2n-1>（n从0开始，当表达式的值小于等于0时，将不选择任何子元素）。
-
:nth-last-child(n) 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始获取。可以使用数字（n从1开始）、关键字（even偶数、odd奇数）或公式（n从0开始）。
-
:first-of-type 选择特定元素的第一个子元素
-
:last-of-type 选择特定元素的最后一个子元素
-
:nth-of-type(n) 只计算父元素中指定的某种类型的子元素
-
:nth-last-of-type(n) 只计算父元素中指定的某种类型的子元素，从这个元素的最后一个元素开始获取
-
:only-child 匹配没有任何兄弟元素的元素
-
:only-of-type 匹配所有元素 这个元素没有其他相同类型的兄弟元素
-
:empty 选择的元素里面没有任何的内容或子节点
-
:root 匹配文档的根节点 html
(3) 目标伪类选择器
:target选择器用于选取页面中的某个target元素。该元素的id被当做页面的超链接来使用。
七、CSS复合选择器
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的。
7.1 交集选择器
交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器或者id选择器，两个选择器之间不能有空格。
这是一个段落
p.blue {
color: blue;
}
7.2 并集选择器
并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器，都可以作为并集选择器的一部分，其中用并集选择器设置的样式是所有选择器会执行的样式
这是一个段落
这是一个段落
.p1,.p2,.p3{
color: blue;
}
7.3 兄弟选择器
兄弟选择器是CSS3.0新增的一个选择器，语法格式： **A~B **或者 A+B
- ‘+’选择器则表示某元素后相邻的兄弟元素，也就是紧挨着的，是单个的。
- ‘~’选择器则表示某元素后所有同级的指定元素，强调所有的。
这是一个段落
我是相邻的兄弟元素
这是一个段落
7.4 后代选择器
后代选择器又称为包含选择器，用来选择元素或元素组的后代。其写法就是把外层标签写在前面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
red
这是一个段落
这是一个段落
7.5 子元素选择器
子元素选择器只能选择作为其元素子元素的元素。其写法就是父亲标签写在前面，子级标签写在后面，中间跟一个“>”进行连接。
注意：这里的子元素表示亲儿子，不包含孙子、重孙子之类。
- 一级菜单
-
- 三级菜单
- 二级菜单
- 二级菜单
7.6 属性选择器
| 选择器 | 含义 |
|---|---|
| [attr] | 存在attr属性即可 |
| [attr=val] | 属性值完全等于val |
| [attr*=val] | 属性值里包含val字符并且在“任意”位置 |
| [attr^=val] | 属性值里包含val字符并且在“开始”位置 |
| [attr$=val] | 属性值里包含val字符并且在“结束”位置 |
7.7 伪元素选择器（CSS3）
- E::first-letter 块级文本的第一个单词或字
- E::first-line 块级文本的第一行
- E::selection 可改变选中文本的样式
- E::before和E::after 在E元素内部的开始位置和结束位置创建一个元素，该元素为行内元素，且必须结合content属性使用。
注意：before与after表示在盒子内部的前端和后端插入内容。
::-webkit-input-placeholder表示选择到input中的placeholder，为其设置样式
八、CSS三大特性
（1）CSS层叠性
是浏览器处理冲突的一个能力。如果一个css属性通过两个选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉
（2）CSS继承性
含义：指我们设置上级(父级)的CSS样式，上级（父级）及以下的子级（下级）都具有此属性。
特殊性：
-
并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承。
-
在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承 。
-
a标签的颜色和下划线的设置不能继承，必须对a标签本身进行设置。
-
h标签的字体大小/加粗效果不能修改，必须对h标签本身进行修改。(字体放大两倍)
（3）CSS优先级
含义：优先级表示当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定
优先级权重
1.同类型选择器：就近原则
2.不同类型选择器：按照：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
3.多个选择器混合时：通过计算权重判断
权重计算规则
（1）内联样式，如: style=””，权值为1，0，0，0。
（2）ID选择器，如：#content，权值为0，1，0，0。
（3）类，伪类和属性选择器，如.content E:link E[attr]，权值为0，0，1，0。
（4）元素选择器和伪元素选择器，如div p ::before，权值为0，0，0，1。
（5）通配符、子选择器、兄弟选择器等的。如*、>、+,权值为0，0，0，0。
（6）继承的样式没有权值。!important的权重最高
注意：单独使用一个选择器的时候，不能跨等级使css规则生效，也就是权重是在双方处于同一等级的情况下，才开始对比。
九、标签显示模式
HTML标签一般分为块标签和行内标签两种类型
（1）块级元素（block-level）
每个块元素通常都会独自占据一整行或多整行，可以对其设置高度、宽度、对齐等属性。常见块元素有
~、
、
- 、
- 、