1 简介
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一个
2 语法
2.1 CSS 规则
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
每条声明由一个属性和一个值组成。
每个属性有一个值。属性和值被冒号分开。
CSS声明总是以分号(;)结束，声明总以大括号({})括起来
2.2 CSS 注释
CSS注释以 /* 开始, 以 **/ 结束
3 选择器
3.1 id选择器
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">#app1 {width: 300px;height: 300px;background-color: red;}</style></head><body><div id="app1">我是div1</div></body></html>
3.2 class选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.app1 {
width: 300px;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div class="app1">
我是div1
</div>
</body>
</html>
3.3 元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div {
width: 300px;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div >
我是div1
</div>
</body>
</html>
3.4 选择器分组
h2, p {
color:gray;
}
3.5 属性选择器
a[href] {color:red;}
a[href*="w3school.com.cn"] {color: red;}
| 类型 | 描述 |
|---|---|
| [abc^=”def”] | 选择 abc 属性值以 “def” 开头的所有元素 |
| [abc$=”def”] | 选择 abc 属性值以 “def” 结尾的所有元素 |
| [abc*=”def”] | 选择 abc 属性值中包含子串 “def” 的所有元素 |
3.6 后代选择器
h1 em {color:red;}
3.7 子元素选择器
h1 > strong {color:red;}
3.8 相邻兄弟选择器
h1 + p {margin-top:50px;}
3.9 伪类
| 属性 | 描述 |
|---|---|
| :active | 向被激活的元素添加样式。 |
| :focus | 向拥有键盘输入焦点的元素添加样式。 |
| :hover | 当鼠标悬浮在元素上方时，向元素添加样式。 |
| :link | 向未被访问的链接添加样式。 |
| :visited | 向已被访问的链接添加样式。 |
| :first-child | 向元素的第一个子元素添加样式。 |
| :lang | 向带有指定 lang 属性的元素添加样式。 |
3.10 伪元素
| 性 | 描述 |
|---|---|
| :first-letter | 向文本的第一个字母添加特殊样式。 |
| :first-line | 向文本的首行添加特殊样式。 |
| :before | 在元素之前添加内容。 |
| :after | 在元素之后添加内容。 |
4 引入
4.1 内联样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div style="width: 300px;height: 300px;background-color: red;">
我是div1
</div>
</body>
</html>
4.2 内部样式表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div {
width: 300px;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div >
我是div1
</div>
</body>
</html>
4.1 外部样式表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
</head>
<body>
<div>
我是div1
</div>
</body>
</html>
new_file.css
div{
width: 30px;
height: 300px;
background: red;
}
5 CSS样式
5.1 背景
- 背景色background-color
- 背景图片background-image
- 背景重复background-repeat
- 水平repeat-x
- 垂直repeat-y
- 背景定位background-position
- top
- bottom
- left
- right
- center
- 背景关联background-attachment
- 背景裁切background-clip：border-box;
- 背景裁切background-origin: border-box;
5.2 文本
- 文本缩进text-indent
- 水平对齐 text-align
- 字间隔word-spacing
- 字母间隔letter-spacing
- 字母转换text-transform
- 转为全大写uppercase
- 转为全小写 lowercase
- 文本装饰text-decoration
- none
- underline
- overline
- line-through
- blink
- 处理空白符white-space | 值 | 空白符 | 换行符 | 自动换行 | | —- | —- | —- | —- | | pre-line | 合并 | 保留 | 允许 | | normal | 合并 | 忽略 | 允许 | | nowrap | 合并 | 忽略 | 不允许 | | pre | 保留 | 保留 | 不允许 | | pre-wrap | 保留 | 保留 | 允许 |
5.3 字体
- 通用字体font-family
- 字体风格font-style
- 文本正常显示normal
- 斜体italic
- 倾斜oblique
- 字体变形font-variant设定小型大写字母
- 文本加粗font-weight
- 文本大小font-size
5.4 链接
- a:link - 普通的、未被访问的链接
- a:visited - 用户已访问的链接
- a:hover - 鼠标指针位于链接的上方
- a:active - 链接被点击的时刻
5.5 列表
- 简写属性list-style
- 将图象设置为列表项标志list-style-image
- 设置列表中列表项标志的位置list-style-type
5.6 表格
- 是否将表格边框折叠为单一边框border-collapse
- width
- height
- 水平对齐text-align
- 垂直对齐vertical-align
5.7 轮廓outline
| 性 | 描述 |
|---|---|
| outline | 在一个声明中设置所有的轮廓属性。 |
| outline-color | 设置轮廓的颜色。 |
| outline-style | 设置轮廓的样式。 |
| outline-width | 设置轮廓的宽度。 |
6 盒子模型
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式
去除浏览器的默认样式
* {
margin: 0;
padding: 0;
}
元素的总宽度应该这样计算：
元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距
元素的总高度应该这样计算：
元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距
7 定位 (Positioning)
- static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。 - relative 相对定位
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。 - absolute 绝对定位
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 - fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
8 浮动 float
| 值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。 |
| none | 默认值。允许浮动元素出现在两侧。 |
| inherit | 规定应该从父元素继承 clear 属性的值。 |
9 高级
9.1 水平对齐
- margin 属性来水平对齐
- position 属性进行左和右对齐
- float 属性来进行左和右对齐
9.2 尺寸 (Dimension)
| 属性 | 描述 |
|---|---|
| height | 设置元素的高度。 |
| line-height | 设置行高。 |
| max-height | 设置元素的最大高度。 |
| max-width | 设置元素的最大宽度。 |
| min-height | 设置元素的最小高度。 |
| min-width | 设置元素的最小宽度。 |
| width | 设置元素的宽度。 |
9.3 分类 (Classification)
CSS 分类属性允许你规定如何以及在何处显示元素。
| 属性 | 描述 |
|---|---|
| clear | 设置一个元素的侧面是否允许其他的浮动元素。 |
| cursor | 规定当指向某元素之上时显示的指针类型。 |
| display | 设置是否及如何显示元素。 |
| float | 定义元素在哪个方向浮动。 |
| position | 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 |
| visibility | 设置元素是否可见或不可见。 |
10 css3边框
- 圆角边框border-radius
- 阴影box-shadow
- 图片边框border-image
11 CSS3 背景
- 规定背景图片的尺寸background-size
- 规定背景图片的定位区域background-origin 、
- 规定背景的绘制区域background-clip
12 CSS3 文本效果
- 文本阴影text-shadow
- 允许对长的不可分割的单词进行分割并换行到下一行word-wrap
- 文本的换行规则text-wrap
- 文本的轮廓text-outline
- text-align 设置为 “justify” 时所使用的对齐方法text-justify
- 文本应用重点标记以及重点标记的前景色text-emphasis
13 CSS3 字体
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
@font-face{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'); /* IE9+ */
}
div{
font-family:myFirstFont;
}
</style>
</head>
<body>
</body>
</html>
14 CSS3 2D 转换
对元素进行移动、缩放、转动、拉长或拉伸。
- translate() 元素从其当前位置移动
- rotate() 元素顺时针旋转给定的角度
- scale() 元素的尺寸会增加或减少
- skew() 元素翻转给定的角度
- matrix() 把所有 2D 转换方法组合在一起 | 函数 | 描述 | | —- | —- | | matrix(n,n,n,n,n,n) | 定义 2D 转换，使用六个值的矩阵。 | | translate(x,y) | 定义 2D 转换，沿着 X 和 Y 轴移动元素。 | | translateX(n) | 定义 2D 转换，沿着 X 轴移动元素。 | | translateY(n) | 定义 2D 转换，沿着 Y 轴移动元素。 | | scale(x,y) | 定义 2D 缩放转换，改变元素的宽度和高度。 | | scaleX(n) | 定义 2D 缩放转换，改变元素的宽度。 | | scaleY(n) | 定义 2D 缩放转换，改变元素的高度。 | | rotate(angle) | 定义 2D 旋转，在参数中规定角度。 | | skew(x-angle,y-angle) | 定义 2D 倾斜转换，沿着 X 和 Y 轴。 | | skewX(angle) | 定义 2D 倾斜转换，沿着 X 轴。 | | skewY(angle) | 定义 2D 倾斜转换，沿着 Y 轴。 |
15 CSS3 3D 转换
- rotateX() 元素围绕其 X 轴以给定的度数进行旋转
- rotateY() 元素围绕其Y 轴以给定的度数进行旋转 | 属性 | 描述 | | —- | —- | | transform | 向元素应用 2D 或 3D 转换。 | | transform-origin | 允许你改变被转换元素的位置。 | | transform-style | 规定被嵌套元素 在 3D 空间中显示。 | | perspective | 规定 3D 元素的透视效果。 | | perspective-origin | 规定 3D 元素的底部位置。 | | backface-visibility | 定义元素在不面对屏幕时是否可见。 |
16 过渡
| 属性 | 描述 |
|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 “ease”。 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 |
17 CSS3 动画
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
- 规定动画的名称
- 规定动画的时长
请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
| 属性 | 描述 |
|---|---|
| @keyframes | 规定动画。 |
| animation | 所有动画属性的简写属性，除了 animation-play-state 属性。 |
| animation-name | 规定 @keyframes 动画的名称。 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 |
| animation-timing-function | 规定动画的速度曲线。默认是 “ease”。 |
| animation-delay | 规定动画何时开始。默认是 0。 |
| animation-iteration-count | 规定动画被播放的次数。默认是 1。 |
| animation-direction | 规定动画是否在下一周期逆向地播放。默认是 “normal”。 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是 “running”。 |
| animation-fill-mode | 规定对象动画时间之外的状态。 |
18 CSS3 多列
- column-count 规定元素应该被分隔的列数
- column-gap 规定列之间的间隔
- column-rule 设置列之间的宽度、样式和颜色规则
19 CSS3 用户界面
- resize 是否可由用户调整元素尺寸
- box-sizing 以确切的方式定义适应某个区域的具体内容
- outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓
若有收获，就点个赞吧
0 人点赞
