css基础

一、盒子模型

二、使用

1.内部插入
-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>我的 CSS 测试</title>
<style>
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>这是我的第一个 CSS 示例</p>
</body>
</html>

2.外部使用
-

1
2
3
4
5
6
7
8
9
10
11
12
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>我的 CSS 测试</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Hello World!</h1>
<p>这是我的第一个 CSS 示例</p>
</body>
</html>

3.全局模式
-

1
2
3
<!doctype html>
@import url("g.css");
</html>

三、属性

轮廓属性(Outline)

属性	描述
outline	设置元素轮廓的所有四个边的宽度，样式和颜色。
outline-color	设置轮廓的颜色。
`[outline-offset](https://www.cainiaojc.com/css-reference/css3-outline-offset-property.html)`	设置轮廓和元素边框之间的空间。
`[outline-style](https://www.cainiaojc.com/css-reference/css-outline-style-property.html)`	设置轮廓样式。
`[outline-width](https://www.cainiaojc.com/css-reference/css-outline-width-property.html)`	设置轮廓的宽度。

动画属性(Animation)

属性	描述
animation	指定基于关键帧的动画。
animation-delay	指定动画何时开始。
animation-direction	指定动画是否应在交替的循环中反向播放。
animation-duration	指定动画完成一个周期应花费的秒数或毫秒数。
animation-fill-mode	指定CSS动画在执行之前和之后应如何将样式应用于其目标。
animation-iteration-count	指定在停止之前动画循环应播放的次数。
animation-name	指定应用于所选元素的已定义动画的名称。
animation-play-state	指定动画是运行还是暂停。
animation-timing-function	指定CSS动画在每个周期内应如何进行。

背景属性(Background)

属性	描述
background	在一个声明中定义各种背景属性。
background-attachment	指定背景图像是在视口中固定还是滚动。
`[background-clip](https://www.cainiaojc.com/css-reference/css3-background-clip-property.html)`	指定背景的绘制区域。
`[background-color](https://www.cainiaojc.com/css-reference/css-background-color-property.html)`	定义元素的背景色。
`[background-image](https://www.cainiaojc.com/css-reference/css-background-image-property.html)`	定义元素的背景图像。
`[background-origin](https://www.cainiaojc.com/css-reference/css3-background-origin-property.html)`	指定背景图像的定位区域。
`[background-position](https://www.cainiaojc.com/css-reference/css-background-position-property.html)`	定义背景图像的原点。
`[background-repeat](https://www.cainiaojc.com/css-reference/css-background-repeat-property.html)`	指定是否/如何平铺背景图像。
`[background-size](https://www.cainiaojc.com/css-reference/css3-background-size-property.html)`	指定背景图像的大小。

边框属性(Border)

属性	描述
`[border](https://www.cainiaojc.com/css-reference/css-border-property.html)`	设置元素边框所有四个侧面的宽度，样式和颜色。
`[border-bottom](https://www.cainiaojc.com/css-reference/css-border-bottom-property.html)`	设置元素底部边框的宽度，样式和颜色。
`[border-bottom-color](https://www.cainiaojc.com/css-reference/css-border-bottom-color-property.html)`	设置元素底部边框的颜色。
`[border-bottom-left-radius](https://www.cainiaojc.com/css-reference/css3-border-bottom-left-radius-property.html)`	定义元素的左下边界角的形状。
`[border-bottom-right-radius](https://www.cainiaojc.com/css-reference/css3-border-bottom-right-radius-property.html)`	定义元素右下边界的形状。
`[border-bottom-style](https://www.cainiaojc.com/css-reference/css-border-bottom-style-property.html)`	设置元素底部边框的样式。
`[border-bottom-width](https://www.cainiaojc.com/css-reference/css-border-bottom-width-property.html)`	设置元素底部边框的宽度。
`[border-color](https://www.cainiaojc.com/css-reference/css-border-color-property.html)`	设置元素所有四个侧面的边框颜色。
`[border-image](https://www.cainiaojc.com/css-reference/css3-border-image-property.html)`	指定如何使用图像代替边框样式。
`[border-image-outset](https://www.cainiaojc.com/css-reference/css3-border-image-outset-property.html)`	指定边框图像区域超出边框超出范围的数量。
`[border-image-repeat](https://www.cainiaojc.com/css-reference/css3-border-image-repeat-property.html)`	指定图像边框应重复，四舍五入还是拉伸。
`[border-image-slice](https://www.cainiaojc.com/css-reference/css3-border-image-slice-property.html)`	指定图像边框的向内偏移。
`[border-image-source](https://www.cainiaojc.com/css-reference/css3-border-image-source-property.html)`	指定要用作边框的图像的位置。
`[border-image-width](https://www.cainiaojc.com/css-reference/css3-border-image-width-property.html)`	指定图像边框的宽度。
`[border-left](https://www.cainiaojc.com/css-reference/css-border-left-property.html)`	设置元素左边框的宽度，样式和颜色。
`[border-left-color](https://www.cainiaojc.com/css-reference/css-border-left-color-property.html)`	设置元素的左边框的颜色。
`[border-left-style](https://www.cainiaojc.com/css-reference/css-border-left-style-property.html)`	设置元素左边框的样式。
`[border-left-width](https://www.cainiaojc.com/css-reference/css-border-left-width-property.html)`	设置元素左边框的宽度。
`[border-radius](https://www.cainiaojc.com/css-reference/css3-border-radius-property.html)`	定义元素边界角的形状。
`[border-right](https://www.cainiaojc.com/css-reference/css-border-right-property.html)`	设置元素右边框的宽度，样式和颜色。
`[border-right-color](https://www.cainiaojc.com/css-reference/css-border-right-color-property.html)`	设置元素右边框的颜色。
`[border-right-style](https://www.cainiaojc.com/css-reference/css-border-right-style-property.html)`	设置元素右边框的样式。
`[border-right-width](https://www.cainiaojc.com/css-reference/css-border-right-width-property.html)`	设置元素右边框的宽度。
`[border-style](https://www.cainiaojc.com/css-reference/css-border-style-property.html)`	在元素的所有四个面上设置边框的样式。
`[border-top](https://www.cainiaojc.com/css-reference/css-border-top-property.html)`	设置元素顶部边框的宽度，样式和颜色。
`[border-top-color](https://www.cainiaojc.com/css-reference/css-border-top-color-property.html)`	设置元素顶部边框的颜色。
`[border-top-left-radius](https://www.cainiaojc.com/css-reference/css3-border-top-left-radius-property.html)`	定义元素左上角的形状。
`[border-top-right-radius](https://www.cainiaojc.com/css-reference/css3-border-top-right-radius-property.html)`	定义元素的右上边界角的形状。
`[border-top-style](https://www.cainiaojc.com/css-reference/css-border-top-style-property.html)`	设置元素顶部边框的样式。
`[border-top-width](https://www.cainiaojc.com/css-reference/css-border-top-width-property.html)`	设置元素顶部边框的宽度。
`[border-width](https://www.cainiaojc.com/css-reference/css-border-width-property.html)`	设置元素所有四个侧面的边框宽度。

颜色属性(Color)

属性	描述
`[color](https://www.cainiaojc.com/css-reference/css-color-property.html)`	指定元素文本的颜色。
`[opacity](https://www.cainiaojc.com/css-reference/css3-opacity-property.html)`	指定元素的透明度。

尺寸属性(Size)

属性	描述
`[height](https://www.cainiaojc.com/css-reference/css-height-property.html)`	指定元素的高度。
`[max-height](https://www.cainiaojc.com/css-reference/css-max-height-property.html)`	指定元素的最大高度。
`[max-width](https://www.cainiaojc.com/css-reference/css-max-width-property.html)`	指定元素的最大宽度。
`[min-height](https://www.cainiaojc.com/css-reference/css-min-height-property.html)`	指定元素的最小高度。
`[min-width](https://www.cainiaojc.com/css-reference/css-min-width-property.html)`	指定元素的最小宽度。
`[width](https://www.cainiaojc.com/css-reference/css-width-property.html)`	指定元素的宽度。

内容属性(Content)

属性	描述
`[content](https://www.cainiaojc.com/css-reference/css-content-property.html)`	插入生成的内容。
`[quotes](https://www.cainiaojc.com/css-reference/css-quotes-property.html)`	指定嵌入引号的引号。
`[counter-reset](https://www.cainiaojc.com/css-reference/css-counter-reset-property.html)`	创建或重置一个或多个计数器。
`[counter-increment](https://www.cainiaojc.com/css-reference/css-counter-increment-property.html)`	递增一个或多个计数器值。

弹性Flex盒子布局(Flex)

属性	描述
`[align-content](https://www.cainiaojc.com/css-reference/css3-align-content-property.html)`	指定伸缩容器中伸缩容器的项目的对齐方式。
`[align-items](https://www.cainiaojc.com/css-reference/css3-align-items-property.html)`	为flex容器中的项目指定默认对齐方式。
`[align-self](https://www.cainiaojc.com/css-reference/css3-align-self-property.html)`	指定弹性容器中选定项目的对齐方式。
`[flex](https://www.cainiaojc.com/css-reference/css3-flex-property.html)`	指定弹性长度的分量。
`[flex-basis](https://www.cainiaojc.com/css-reference/css3-flex-basis-property.html)`	指定弹性项目的初始主要尺寸。
`[flex-direction](https://www.cainiaojc.com/css-reference/css3-flex-direction-property.html)`	指定弹性项目的方向。
`[flex-flow](https://www.cainiaojc.com/css-reference/css3-flex-flow-property.html)`	`[flex-direction](https://www.cainiaojc.com/css-reference/css3-flex-direction-property.html)`和`[flex-wrap](https://www.cainiaojc.com/css-reference/css3-flex-wrap-property.html)`属性的简写属性。
`[flex-grow](https://www.cainiaojc.com/css-reference/css3-flex-grow-property.html)`	指定弹性项目相对于弹性容器内其他项目的增长方式。
`[flex-shrink](https://www.cainiaojc.com/css-reference/css3-flex-shrink-property.html)`	指定flex项目相对于flex容器内其他项目的收缩方式。
`[flex-wrap](https://www.cainiaojc.com/css-reference/css3-flex-wrap-property.html)`	指定是否应包装柔性物品。
`[justify-content](https://www.cainiaojc.com/css-reference/css3-justify-content-property.html)`	指定在解决了任何弹性长度和自动页边距之后，弹性项目如何沿弹性容器的主轴对齐。
`[order](https://www.cainiaojc.com/css-reference/css3-order-property.html)`	指定弹性项目在弹性容器中的显示和布局顺序。

字体属性(Fonts)

属性	描述
`[font](https://www.cainiaojc.com/css-reference/css-font-property.html)`	在一个声明中定义各种字体属性。
`[font-family](https://www.cainiaojc.com/css-reference/css-font-family-property.html)`	定义元素的字体列表。
`[font-size](https://www.cainiaojc.com/css-reference/css-font-size-property.html)`	定义文本的字体大小。
`[font-size-adjust](https://www.cainiaojc.com/css-reference/css3-font-size-adjust-property.html)`	发生字体回退时，保留文本的可读性。
`[font-stretch](https://www.cainiaojc.com/css-reference/css3-font-stretch-property.html)`	从字体中选择一个普通的，压缩的或扩展的字体。
`[font-style](https://www.cainiaojc.com/css-reference/css-font-style-property.html)`	定义文本的字体样式。
`[font-variant](https://www.cainiaojc.com/css-reference/css-font-variant-property.html)`	指定字体变体。
`[font-weight](https://www.cainiaojc.com/css-reference/css-font-weight-property.html)`	指定文本的字体粗细。

列表项属性(Lists)

属性	描述
`[list-style](https://www.cainiaojc.com/css-reference/css-list-style-property.html)`	定义列表和列表元素的显示样式。
`[list-style-image](https://www.cainiaojc.com/css-reference/css-list-style-image-property.html)`	指定用作列表项标记的图像。
`[list-style-position](https://www.cainiaojc.com/css-reference/css-list-style-position-property.html)`	指定列表项标记的位置。
`[list-style-type](https://www.cainiaojc.com/css-reference/css-list-style-type-property.html)`	指定列表项的标记样式。

边距属性(Margin)

属性	描述
`[margin](https://www.cainiaojc.com/css-reference/css-margin-property.html)`	在元素的所有四个面上设置边距。
`[margin-bottom](https://www.cainiaojc.com/css-reference/css-margin-bottom-property.html)`	设置元素的底边距。
`[margin-left](https://www.cainiaojc.com/css-reference/css-margin-left-property.html)`	设置元素的左边距。
`[margin-right](https://www.cainiaojc.com/css-reference/css-margin-right-property.html)`	设置元素的右边距。
`[margin-top](https://www.cainiaojc.com/css-reference/css-margin-top-property.html)`	设置元素的上边距。

多列布局属性(Column)

属性	描述
`[column-count](https://www.cainiaojc.com/css-reference/css3-column-count-property.html)`	指定多列元素中的列数。
`[column-fill](https://www.cainiaojc.com/css-reference/css3-column-fill-property.html)`	指定如何填充列。
`[column-gap](https://www.cainiaojc.com/css-reference/css3-column-gap-property.html)`	指定多列元素中各列之间的间隔。
`[column-rule](https://www.cainiaojc.com/css-reference/css3-column-rule-property.html)`	指定在多列元素的每一列之间绘制的直线或“规则”。
`[column-rule-color](https://www.cainiaojc.com/css-reference/css3-column-rule-color-property.html)`	指定在多列布局中的列之间绘制的规则的颜色。
`[column-rule-style](https://www.cainiaojc.com/css-reference/css3-column-rule-style-property.html)`	指定在多列布局中的列之间绘制的规则的样式。
`[column-rule-width](https://www.cainiaojc.com/css-reference/css3-column-rule-width-property.html)`	指定在多列布局中的列之间绘制的规则的宽度。
`[column-span](https://www.cainiaojc.com/css-reference/css3-column-span-property.html)`	指定元素在多列布局中跨越多少列。
`[column-width](https://www.cainiaojc.com/css-reference/css3-column-width-property.html)`	指定多列元素中列的最佳宽度。
`[columns](https://www.cainiaojc.com/css-reference/css3-columns-property.html)`	用于设置`[column-width](https://www.cainiaojc.com/css-reference/css3-column-width-property.html)`和`[column-count](https://www.cainiaojc.com/css-reference/css3-column-count-property.html)`属性的简写属性。

填充属性(Padding)

属性	描述
`[padding](https://www.cainiaojc.com/css-reference/css-padding-property.html)`	在元素的所有四个面上设置填充。
`[padding-bottom](https://www.cainiaojc.com/css-reference/css-padding-bottom-property.html)`	将填充设置为元素的底侧。
`[padding-left](https://www.cainiaojc.com/css-reference/css-padding-left-property.html)`	将填充设置为元素的左侧。
`[padding-right](https://www.cainiaojc.com/css-reference/css-padding-right-property.html)`	将填充设置为元素的右侧。
`[padding-top](https://www.cainiaojc.com/css-reference/css-padding-top-property.html)`	将填充设置为元素的顶部。

打印属性(Print)

属性	描述
`[page-break-after](https://www.cainiaojc.com/css-reference/css-page-break-after-property.html)`	在元素之后插入分页符。
`[page-break-before](https://www.cainiaojc.com/css-reference/css-page-break-before-property.html)`	在元素之前插入分页符。
`[page-break-inside](https://www.cainiaojc.com/css-reference/css-page-break-inside-property.html)`	在元素内插入分页符。

表属性(Table)

属性	描述
`[border-collapse](https://www.cainiaojc.com/css-reference/css-border-collapse-property.html)`	指定是连接还是分隔表格单元格边界。
`[border-spacing](https://www.cainiaojc.com/css-reference/css-border-spacing-property.html)`	设置相邻表格单元格的边界之间的间距。
`[caption-side](https://www.cainiaojc.com/css-reference/css-caption-side-property.html)`	指定表格标题的位置。
`[empty-cells](https://www.cainiaojc.com/css-reference/css-empty-cells-property.html)`	显示或隐藏空表单元格的边框和背景。
`[table-layout](https://www.cainiaojc.com/css-reference/css-table-layout-property.html)`	指定表布局算法。

文字属性(Text)

属性	描述
`[direction](https://www.cainiaojc.com/css-reference/css-direction-property.html)`	定义文本方向/书写方向。
`[tab-size](https://www.cainiaojc.com/css-reference/css3-tab-size-property.html)`	指定制表符的长度。
`[text-align](https://www.cainiaojc.com/css-reference/css-text-align-property.html)`	设置内联内容的水平对齐方式。
`[text-align-last](https://www.cainiaojc.com/css-reference/css3-text-align-last-property.html)`	指定当`[text-align](https://www.cainiaojc.com/css-reference/css-text-align-property.html)`is 时如何对齐块的最后一行或强制换行符之前的行`justify`。
`[text-decoration](https://www.cainiaojc.com/css-reference/css-text-decoration-property.html)`	指定添加到文本的装饰。
`[text-decoration-color](https://www.cainiaojc.com/css-reference/css3-text-decoration-color-property.html)`	指定的颜色`[text-decoration-line](https://www.cainiaojc.com/css-reference/css3-text-decoration-line-property.html)`。
`[text-decoration-line](https://www.cainiaojc.com/css-reference/css3-text-decoration-line-property.html)`	指定将哪种线条装饰添加到元素。
`[text-decoration-style](https://www.cainiaojc.com/css-reference/css3-text-decoration-style-property.html)`	指定`[text-decoration-line](https://www.cainiaojc.com/css-reference/css3-text-decoration-line-property.html)`属性指定的线条样式
`[text-indent](https://www.cainiaojc.com/css-reference/css-text-indent-property.html)`	缩进文本的第一行。
`[text-justify](https://www.cainiaojc.com/css-reference/css3-text-justify-property.html)`	指定当`[text-align](https://www.cainiaojc.com/css-reference/css-text-align-property.html)`属性设置为时要使用的对正方法`justify`。
`[text-overflow](https://www.cainiaojc.com/css-reference/css3-text-overflow-property.html)`	指定当文本内容溢出块容器时将如何显示。
`[text-shadow](https://www.cainiaojc.com/css-reference/css3-text-shadow-property.html)`	将一个或多个阴影应用于元素的文本内容。
`[text-transform](https://www.cainiaojc.com/css-reference/css-text-transform-property.html)`	转换文本的大小写。
`[line-height](https://www.cainiaojc.com/css-reference/css-line-height-property.html)`	设置文本行之间的高度。
`[vertical-align](https://www.cainiaojc.com/css-reference/css-vertical-align-property.html)`	设置元素相对于当前文本基线的垂直位置。
`[letter-spacing](https://www.cainiaojc.com/css-reference/css-letter-spacing-property.html)`	设置字母之间的额外间距。
`[word-spacing](https://www.cainiaojc.com/css-reference/css-word-spacing-property.html)`	设置单词之间的间距。
`[white-space](https://www.cainiaojc.com/css-reference/css-white-space-property.html)`	指定如何处理元素内的空白。
`[word-break](https://www.cainiaojc.com/css-reference/css3-word-break-property.html)`	指定如何在单词内换行。
`[word-wrap](https://www.cainiaojc.com/css-reference/css3-word-wrap-property.html)`	指定在内容超出其容器边界时是否中断单词。

转换属性(Transform)

属性	描述
`[backface-visibility](https://www.cainiaojc.com/css-reference/css3-backface-visibility-property.html)`	指定当面对用户时，转换后的元素的“背面”是否可见。
`[perspective](https://www.cainiaojc.com/css-reference/css3-perspective-property.html)`	定义从中查看对象的所有子元素的透视图。
`[perspective-origin](https://www.cainiaojc.com/css-reference/css3-perspective-origin-property.html)`	定义透视图属性的原点（3D空间的消失点）。
`[transform](https://www.cainiaojc.com/css-reference/css3-transform-property.html)`	将2D或3D变换应用于元素。
`[transform-origin](https://www.cainiaojc.com/css-reference/css3-transform-origin-property.html)`	定义元素的变换原点。
`[transform-style](https://www.cainiaojc.com/css-reference/css3-transform-style-property.html)`	指定如何在3D空间中渲染嵌套元素。

过渡属性(Transition)

属性	描述
`[transition](https://www.cainiaojc.com/css-reference/css3-transition-property.html)`	定义元素的两种状态之间的过渡。
`[transition-delay](https://www.cainiaojc.com/css-reference/css3-transition-delay-property.html)`	指定过渡效果何时开始。
`[transition-duration](https://www.cainiaojc.com/css-reference/css3-transition-duration-property.html)`	指定过渡效果要花费的秒数或毫秒数。
`[transition-property](https://www.cainiaojc.com/css-reference/css3-transition-property-property.html)`	指定应将过渡效果应用到的CSS属性的名称。
`[transition-timing-function](https://www.cainiaojc.com/css-reference/css3-transition-timing-function-property.html)`	指定过渡效果的速度曲线。

视觉格式属性

属性	描述
`[display](https://www.cainiaojc.com/css-reference/css-display-property.html)`	指定元素在屏幕上的显示方式。
`[position](https://www.cainiaojc.com/css-reference/css-position-property.html)`	指定如何定位元素。
`[top](https://www.cainiaojc.com/css-reference/css-top-property.html)`	指定所定位元素的上边缘的位置。
`[right](https://www.cainiaojc.com/css-reference/css-right-property.html)`	指定所定位元素的右边缘的位置。
`[bottom](https://www.cainiaojc.com/css-reference/css-bottom-property.html)`	指定所定位元素底边的位置。
`[left](https://www.cainiaojc.com/css-reference/css-left-property.html)`	指定定位元素左边缘的位置。
`[float](https://www.cainiaojc.com/css-reference/css-float-property.html)`	指定一个框是否应该浮动。
`[clear](https://www.cainiaojc.com/css-reference/css-clear-property.html)`	指定相对于浮动元素的元素位置。
`[z-index](https://www.cainiaojc.com/css-reference/css-z-index-property.html)`	指定定位元素的分层或堆叠顺序。
`[overflow](https://www.cainiaojc.com/css-reference/css-overflow-property.html)`	指定对溢出元素框的内容的处理。
`[overflow-x](https://www.cainiaojc.com/css-reference/css3-overflow-x-property.html)`	指定当内容超出元素内容区域的宽度时如何管理内容。
`[overflow-y](https://www.cainiaojc.com/css-reference/css3-overflow-y-property.html)`	指定当内容超出元素内容区域的高度时如何管理内容。
`[resize](https://www.cainiaojc.com/css-reference/css3-resize-property.html)`	指定元素是否可由用户调整大小。
`[clip](https://www.cainiaojc.com/css-reference/css-clip-property.html)`	定义裁剪区域。
`[visibility](https://www.cainiaojc.com/css-reference/css-visibility-property.html)`	指定一个元素是否可见。
`[cursor](https://www.cainiaojc.com/css-reference/css-cursor-property.html)`	指定游标的类型。
`[box-shadow](https://www.cainiaojc.com/css-reference/css3-box-shadow-property.html)`	将一个或多个阴影应用于元素的框。
`[box-sizing](https://www.cainiaojc.com/css-reference/css3-box-sizing-property.html)`	更改默认的CSS框模型。

四、样式选择器

元素选择器：div{属性:值}
ID选择器：#id{属性:值}
class选择器：.类名{属性:值}
子选择器：元数空格元数{属性:值}
后代选择器：元数 > 元数{属性:值}
属性选择器：元素[属性]{}
通配符选择器：*{属性:值}
群组选择器