CSS
文章目录
1 什么是CSS？
CSS（Cascading Style Sheet）------> 层叠样式表
用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
2 基本语法
CSS 样式由选择器和⼀条或多条以分号隔开的样式声明组成
每条声明的样式包含着⼀个 CSS属性和属性值
选择器名 {
属性: 属性值;
......
}
注意：
css声明要以分号;结束，声明以{}括起来
建议⼀⾏书写⼀个属性
若值为若⼲单词，则要给值加引号，如 font-family: “agency fb”;
例：
div{ background-color: red; }
CSS注释
/*注释内容*/
3 CSS选择器
在 CSS 中，选择器是⼀种模式，⽤于选择需要添加样式的元素
CSS选择器有很多，常用的有：
1 基本选择器
1 通用|通配选择器
选择所有 *
* {
......
}
2 标签|元素选择器
选择指定标签
元素标签 {
......
}
3 id选择器
选择设置过指定id属性值的元素 #
#id属性值 {
......
}
4 类选择器
选择设置过指定class属性值的元素 .
.class属性值 {
......
}
5 分组选择器
当几个元素样式属性⼀样时，可以共同调⽤⼀个声明，元素之间⽤逗号分隔 ,
选择器1,选择器2,... {
......
}
2 组合选择器
1 后代|派生选择器
⽤于选择指定标签元素下的后辈元素，以空格分隔
选择器1 选择器2 {
......
}
2 子元素选择器
⽤于选择指定标签元素的所有第⼀代⼦元素，以⼤于号分隔 >
选择器1 > 选择器2 {
......
}
3 相邻兄弟选择器
选择紧接在另⼀元素后的元素（不包括自己），且⼆者有相同⽗元素，以加号分隔 +
选择器1 + 选择器2 {
......
}
4 普通兄弟选择器
选择紧接在另⼀个元素后的所有元素（不包括自己），而且⼆者有相同的⽗元素，以波浪线分隔 ~
选择器1 ~ 选择器2 { ......}
3 CSS样式优先级
是根据选择器的精确度/权重来决定的，常见的权重如下，权重越⼤，优先级越⾼
元素选择器：1
类选择器：10
id选择器：100
内联样式：1000
内联样式 > id选择器 > 类选择器 > 元素选择器
4 引入样式方式
1 行内式|内联式
Inline Styles
在对象的标记内使用对象的style属性定义适用其的样式表属性。
示例代码：
<p style="color:red">这一行的字体颜色将显示为红色</p>
2 内部样式块对象
Embedding a Style Block
在HTML文档的<head>标记里插入一个<style>块对象。
示例代码：
<style> body{ background:#fff; color:#000; } p{ font-size:14px; }</style>
3 外联样式
Linking to a Style Sheet
先建立外部样式表文件*.css，然后使用HTML的link对象。
示例代码：
<link rel="stylesheet" href="*.css" />
3 常用属性
1 背景
CSS 背景属性用于定义HTML元素的背景效果
1、背景颜色：background-color
2、背景图片：background-image
3、背景重复：background-repeat
| 取值 | 说明 |
|---|---|
| repeat | 水平和垂直方向重复 |
| repeat-x | 只有水平位置重复 |
| repeat-y | 只有垂直位置重复 |
| no-repeat | 不重复 |
| inherit | 指定从父元素继承 |
2 文本
CSS 文本属性用于定义HTML元素的文本效果
1、文本颜色：color
2、文本对齐方式：text-algin
| 取值 | 说明 |
|---|---|
| center | 居中 |
| left | 左对齐 |
| right | 右对齐 |
3、文本修饰：text-decoration
| 取值 | 说明 |
|---|---|
| underline | 下划线（与u标签相同） |
| overline | 上划线 |
| line-through | 中划线（与del标签相同） |
| none | 关闭所有修饰 |
4、文本首行缩进：text-indent
p.ident2 { text-indent: 2em; }
em⼀个相对值，例如页面文本大小为17px,则2em就为17px*2
3 字体
1、字体类型：font-family
2、文本大小：font-size
3、字体风格：font-style
| 取值 | 说明 |
|---|---|
| normal | ⽂本正常显示 |
| italic | ⽂本斜体显示（与 i 标签相同） |
| oblique | 将文字强制倾斜 |
4、字体加粗：font-weight
bold：可以将⽂本设置为粗体
100 ~ 900：为字体指定了 9 级加粗度
100 对应最细的字体变形；
900 对应最粗的字体变形；
400 等价于 normal；
700 等价于 bold。
4 对齐方式（text-align）
规定元素中的⽂本的⽔平对⻬⽅式
| 取值 | 说明 |
|---|---|
| left | 左对齐 |
| right | 右对齐 |
| center | 居中对齐 |
| justify | 两端对齐 |
| inherit | 从父元素继承它的值 |
5 display属性
display 属性规定元素应该⽣成的框的类型
用于定义建⽴布局时元素⽣成的显示框类型
| 取值 | 说明 |
|---|---|
| none | 元素不会显示 |
| block | 元素将显示为块级元素，元素前后会带有换行符 |
| inline | 元素会被显示为内联元素，元素前后没有换行符（默认） |
| inline-block | 行内块元素 |
| list-item | 元素会作为列表显示 |
6 浮动（float）
| 取值 | 说明 |
|---|---|
| left | 左浮动 |
| right | 右浮动 |
| none | 不浮动 |
| inherit | 从父元素继承它的值 |
1、只有横向浮动，并没有纵向浮动
2、会将元素的display属性变更为block
3、浮动元素的后⼀个元素会围绕着浮动元素（典型运⽤是⽂字围绕图⽚）
4、浮动元素的前⼀个元素不会受到任何影响（如果你想让两个块状元素并排显示，必须让两个块状元素都应⽤
float）
4 定位(Position)
检索对象的定位方式
1 默认定位 static
无特殊定位，对象遵循正常文档流。
2 相对定位 relative
对象遵循正常文档流，参照物为自己，原位置保留。
3 绝对定位 absolute
对象脱离正常文档流，参照物为设置了postion属性的父元素，都没设置参照body，原位置不保留。
4 固定定位 fixed
对象脱离正常文档流，参照物为body或浏览器，原位置不保留
5 方向
上：top
右：right
下：botton
左：left
5 2D变换(transform)
设置或检索对象的转换
1 移动 translate
translate(<length>[, <length>]);指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
length：平移的距离
translateX(<length>);指定对象X轴（水平方向）的平移 translateY(<length>);指定对象Y轴（垂直方向）的平移
2 旋转 rotate
rotate(<angle>);指定对象的2D rotation（2D旋转），需先有transform-origin属性的定义
angle：角度
3 缩放 scale
scale(<number>[, <number>]);指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
scaleX(<number>);指定对象X轴的（水平方向）缩放 scaleY(<number>);指定对象Y轴的（垂直方向）缩放number<1：缩小
number>1：放大
4 扭曲 skew
skew(<angle> [, <angle>]);指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
skewX(<angle>);指定对象X轴的（水平方向）扭曲 skewY(<angle>);指定对象Y轴的（垂直方向）扭曲
5 设置原始点 transform-origin
transform-origin:0 0;
取值：
center①： 指定原点的横坐标为center
center②： 指定原点的纵坐标为center
left： 指定原点的横坐标为left
right： 指定原点的横坐标为right
top： 指定原点的纵坐标为top
bottom： 指定原点的纵坐标为bottom
- 该属性提供2个参数值
- 如果提供两个，第一个用于横坐标，第二个用于纵坐标
- 如果只提供一个，该值将用于横坐标；纵坐标将默认为50%
6 盒模型
1 边框 border
设置对象的边框
1 边框宽度 border-width
border-width:top right bottom left;
设置或检索对象的边框宽度
取值：
lenght：用长度值来定义边框的厚度。不允许负值
medium： 定义默认厚度的边框。
thin： 定义比默认厚度细的边框。
thick： 定义比默认厚度粗的边框。
2 边框颜色 border-color
设置或检索对象的边框颜色
border-color:top right botton left;
3 边框样式 border-style
设置或检索对象的边框样式
border-style:值;
取值：
none： 无轮廓。border-color与border-width将被忽略
hidden： 隐藏边框
dotted： 点状轮廓
dashed： 虚线轮廓
solid： 实线轮廓
double： 双线轮廓。两条单线与其间隔的和等于指定的border-width值
groove： 3D凹槽轮廓
ridge： 3D凸槽轮廓
inset： 3D凹边轮廓
outset： 3D凸边轮廓
4 圆角边框 border-radius
设置或检索对象使用圆角边框
border-radius: length | percentage ;
length： 用长度值设置对象的圆角半径长度。不允许负值
percentage： 用百分比设置对象的圆角半径长度。不允许负值
注意：
- 水平半径：如果提供全部四个参数值，将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。
- 如果只提供一个，将用于全部的于四个角。
- 如果提供两个，第一个用于上左(top-left)、下右(bottom-right)，第二个用于上右(top-right)、下左(bottom-left)。
- 如果提供三个，第一个用于上左(top-left)，第二个用于上右(top-right)、下左(bottom-left)，第三个用于下右(bottom-right)。 垂直半径也遵循以上4点。
5 边框图片 border-image
设置或检索对象的边框样式使用图像来填充
border-image：<border-image-source> <border-image-slice> <border-image-width> <border-image-outset> <border-image-repeat>
border-image 属性是一个简写属性，用于设置以下属性：
| 值 | 描述 |
|---|---|
| border-image-source | 用在边框的图片的路径。 |
| border-image-slice | 图片边框向内偏移。 |
| border-image-width | 图片边框的宽度。 |
| border-image-outse | 边框图像区域超出边框的量。 |
| border-image-repeat | 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。 |
2 内补白 padding
检索或设置对象四边的内部边距
padding:lenght | percentage;
length： 用长度值来定义内补白。不允许负值
percentage： 用百分比来定义内补白。不允许负值
其他属性：
padding-top：检索或设置对象顶边的内补白
padding-right：检索或设置对象右边的内补白
padding-bottom：检索或设置对下边的内补白
padding-left：检索或设置对象左边的内补白
3 外补白 margin
检索或设置对象四边的外延边距
margin:lenght | percentage;
length： 用长度值来定义外补白。不允许负值
percentage： 用百分比来定义外补白。不允许负值
其他属性：
margin-top：检索或设置对象顶边的外延边距
margin-right：检索或设置对象右边的外延边距
margin-bottom：检索或设置对下边的外延边距
margin-left：检索或设置对象左边的外延边距
注：当属性(border、padding、margin等)的值有四个时，
- 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
- 如果只提供一个，将用于全部的四边。
- 如果提供两个，第一个用于上、下，第二个用于左、右。
- 如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
4 阴影 shadow
1 边框阴影 box-shadow
设置或检索对象阴影
box-shadow: h-shadow v-shadow blur spread color inset;
| 值 | 说明 |
|---|---|
| 1.h-shadow | 必需的。水平阴影的位置。允许负值 |
| 2.v-shadow | 必需的。垂直阴影的位置。允许负值 |
| 3.blur | 可选。模糊距离 |
| 4.spread | 可选。阴影的大小 |
| 5.color | 可选。阴影的颜色 |
| 6.inset | 可选。从外层的阴影（开始时）改变阴影内侧阴影 |
2 文本阴影 text-shadow
设置或检索对象中文本文字阴影及模糊效果
text-shadow: h-shadow v-shadow blur color;
| 值 | 描述 |
|---|---|
| 1.h-shadow | 必需。水平阴影的位置。允许负值 |
| 2.v-shadow | 必需。垂直阴影的位置。允许负值 |
| 3.blur | 可选。模糊的距离 |
| 4.color | 可选。阴影的颜色 |
7 动画(animation)
复合属性。检索或设置对象所应用的动画特效
动画制作过程：
1.指定动画
animation: animationName .5s linear infinite;2.设置动画：
@keyframes animationName { 0%{transform:rotate(0deg);opacity:0;} 50%{transform:rotate(45deg);opacity:1;} 70%{transform:rotate(135deg);opacity:1;} 100%{transform:rotate(180deg);opacity:0;} }
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
animation的取值：
| 值 | 说明 | 取值 |
|---|---|---|
| animation-name | 指定要绑定到选择器的关键帧的名称 | none、keyframename |
| animation-duration | 动画指定需要多少秒或毫秒完成 | time（ms、s)、默认 0 |
| animation-timing-function | 设置动画将如何完成一个周期 | 见下表 |
| animation-delay | 设置动画在启动前的延迟间隔 | time（ms、s) 、默认 0 |
| animation-iteration-count | 定义动画的播放次数 | 见下表、默认 1 |
| animation-direction | 指定是否应该轮流反向播放动画 | 见下表 |
| animation-fill-mode | 规定当动画不播放时，要应用到元素的样式 | 见下表 |
| animation-play-state | 指定动画是否正在运行或已暂停 | 见下表 |
animation-timing-function的取值：
取值 描述 linear 动画从头到尾的速度是相同的。 ease 默认。动画以低速开始，然后加快，在结束前变慢。 ease-in 动画以低速开始。 ease-out 动画以低速结束。 ease-in-out 动画以低速开始和结束。 cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
animation-iteration-count的取值：
取值 描述 n 一个数字，定义应该播放多少次动画 infinite 指定动画应该播放无限次（永远）
animation-direction的取值：
值 描述 normal 默认值。动画按正常播放 reverse 动画反向播放 alternate 动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放 alternate-reverse 动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放 initial 设置该属性为它的默认值 inherit 从父元素继承该属性
animation-fill-mode的取值
值 描述 none 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素 forwards 在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值 backwards 动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 “normal” 或 “alternate” 时）或 to 关键帧中的值（当 animation-direction 为 “reverse” 或 “alternate-reverse” 时） both 动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性 initial 设置该属性为它的默认值 inherit 从父元素继承该属性
animation-play-state的取值
值 描述 paused 指定暂停动画 running 默认，指定正在运行的动画
1273
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
