这是我参与8月更文挑战的第9天，活动详情查看：8月更文挑战
语法规范
选择器 {属性名:属性值;......}
引入方式
- 外链，使用link标签内引入外部css文件
- 内嵌，使用style标签满载style标签中书写css代码
- 行内，使用标签属性style属性，在该属性的属性值中书写CSS代码
- 三种引入方式的优先级根据样式离目标标签的距离远近决定，离目标标签的距离越近优先级越高
选择器
- 作用：告知浏览器是为哪一个标签设置样式
- 标签选择器
- ID选择器
- CLASS选择器
- （根据www.ruanyifeng.com/blog/2009/0…连接中的内容整理所有的选择器）
基本选择器
- 通用选择器
- 元素选择器
- 类选择器
- ID选择器
- 属性选择器
分组选择器
- 选择器列表
组合器
- 后代组合器
- 直接子代组合器
- 一般兄弟组合器
- 紧邻兄弟组合器
- 列组合器
伪选择器
- 伪类
- 伪元素
常用属性分类以及具体属性和属性值
- 长度单位
- px 绝对大小（相对于像素点）
- em 相对大小（相对于父级元素的字体大小，如果没有设置那就是浏览器的默认字体大小16px）
- rem 相对大小（永远相对于html元素中设置的字体大小，如果没有设置那就是浏览器的默认字体大小16px ）
- vw/vh 相对大小 相对于视口大小，视口的宽为100vw视口高为100vh
- 盒子属性
- margin：Xpx auto 水平居中
- padding
- border
- width：所设置的值一定是不包含padding的
- height：所设置的值一定是不包含padding的
\
\
- （根据上图整理 属性 属性值 以及看效果）
- 字体属性
- font-size: 数值+尺寸单位 意义：设置字体大小
- 当高度与行高一致的时候 即为垂直据中
- 显示与隐藏属性
- display（虽然看不到也不占据页面上的空间还是会加载）
- hidden
- visibility（看不到但是占据页面中的空间也同样会加载）
- hidden
- 定位属性
-
position：只要是设置为非normal值 都会脱离文档流 可以通过left right top bottom 设置其位置
-
relative 意义：该定位设置以后 如果不设置位置属性 那么实际上不会有任何变化 因为该属性虽然脱离了文档流但是依然呢保留原有位置 移动的参考点是页面的左上角
-
absolute 意义：该定位设置以后 如果不设置位置属性 他原有的位置也会被替代，所以必须要使用位置属性进行调整 一定的参考点是离他最近的一个非normal定位的直系长辈元素的左上角（因此 relative一般为需要absolute的元素提供参考点）
-
fixed 意义：定在一个位置 不找原有文档流 同时不随文档流滚动而滚动
- 坐标系
- 页面坐标系：以左上角为原点，右是X轴的正方向，下是Y轴的正方向
- 数学坐标系
- 弹性盒子属性 按照www.jianshu.com/p/ce5d23ec1…a整理该部分的属性以及属性值
- 按需引入特特定CSS
- 媒体查询
- 屏幕的分类
- 超小屏幕 0-768px
- 小屏幕 768-992px
- 中屏幕 992-1200px
- 大屏 1200-无穷
@media screen and (min-width: 768px) and (max-width: 992px) { // CSS 代码 .name { font-size: 12px } }
响应式布局（手机页面）的总结
- 媒体查询/使用link标签按需引入CSS
- 相对单位
- 设置窗口与视口
文本属性
line-height:
设置行高
| normal | 默认。设置合理的行间距。 |
|---|---|
| number | 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。 |
| length | 设置固定的行间距。 |
| % | 基于当前字体尺寸的百分比行间距。 |
| inherit | 规定应该从父元素继承 line-height 属性的值。 |
text-align:
指定元素文本的水平对齐方式
| left | 把文本排列到左边。默认值：由浏览器决定。 |
|---|---|
| right | 把文本排列到右边。 |
| center | 把文本排列到中间。 |
| justify | 实现两端对齐文本效果。 |
| inherit | 规定应该从父元素继承 text-align 属性的值。 |
text-decoration:
规定添加到文本的修饰，下划线、上划线、删除线等
| none | 默认。定义标准的文本。 |
|---|---|
| underline | 定义文本下的一条线。 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
| blink | 定义闪烁的文本。 |
| inherit | 规定应该从父元素继承 text-decoration 属性的值。 |
背景属性
background 属性:
背景缩写属性可以在一个声明中设置所有的背景属性。
可以设置的属性分别是：background-color、background-position、background-size、background-repeat、background-origin、background-clip、background-attachment 和 background-image。
background-position
| - top left
- top center- top right
- center left- center center
- center right- bottom left
- bottom center- bottom right | 如果您仅规定了一个关键词，那么第二个值将是"center"。默认值：0% 0%。 | | ------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | | x% y% | 第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。 | | xpos ypos | 第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值，另一个值将是50%。您可以混合使用 % 和 position 值。 |
background-size
| length | 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。 |
|---|---|
| percentage | 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。 |
| cover | 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 |
| contain | 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 |
background-repeat
| repeat | 默认。背景图像将在垂直方向和水平方向重复。 |
|---|---|
| repeat-x | 背景图像将在水平方向重复。 |
| repeat-y | 背景图像将在垂直方向重复。 |
| no-repeat | 背景图像将仅显示一次。 |
| inherit | 规定应该从父元素继承 background-repeat 属性的设置。 |
background-clip
| border-box | 背景被裁剪到边框盒。 |
|---|---|
| padding-box | 背景被裁剪到内边距框。 |
| content-box | 背景被裁剪到内容框。 |
background-attachment
| scroll | 默认值。背景图像会随着页面其余部分的滚动而移动。 |
|---|---|
| fixed | 当页面的其余部分滚动时，背景图像不会移动。 |
background-image
| url('URL') | 指向图像的路径。 |
|---|---|
| none | 默认值。不显示背景图像。 |
| inherit | 规定应该从父元素继承 background-image 属性的设置。 |
定位属性
Position(定位)
static 定位
HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。
fixed 定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：
relative 定位
相对定位元素的定位是相对其正常位置。
absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于: （父相子绝）
sticky 定位
sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。
列表属性
| list-style | 简写属性。在一条声明中设置列表的所有属性。 |
|---|---|
| list-style-image | 指定图像作为列表项标记。 |
| list-style-position | 规定列表项标记（项目符号）的位置。 |
| list-style-type | 规定列表项标记的类型。 |
字体属性
| font-style | 规定字体样式。 |
|---|---|
| font-variant | 规定字体异体。 |
| font-weight | 规定字体粗细。 |
| font-size/line-height | 规定字体尺寸和行高。 |
| font-family | 规定字体系列。 |
font-style
| normal | 默认值。浏览器显示一个标准的字体样式。 |
|---|---|
| italic | 浏览器会显示一个斜体的字体样式。 |
| oblique | 浏览器会显示一个倾斜的字体样式。 |
| inherit | 规定应该从父元素继承字体样式。 |
font-variant
font-weight
| normal | 默认值。定义标准的字符。 |
|---|---|
| bold | 定义粗体字符。 |
| bolder | 定义更粗的字符。 |
| lighter | 定义更细的字符。 |
| - 100 |
- 200- 300
- 400- 500
- 600- 700
- 800- 900 | 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。 | | inherit | 规定应该从父元素继承字体的粗细。 |
font-size/line-height
| - xx-small
- x-small- small
- medium- large
- x-large- xx-large | 把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。默认值：medium。 | | ----------------------------------------------------------------------------- | ------------------------------------------------ | | smaller | 把 font-size 设置为比父元素更小的尺寸。 | | larger | 把 font-size 设置为比父元素更大的尺寸。 | | length | 把 font-size 设置为一个固定的值。 | | % | 把 font-size 设置为基于父元素的一个百分比值。 | | inherit | 规定应该从父元素继承字体尺寸。 |
font-family
| - family-name
- generic-family | 用于某个元素的字体族名称或/及类族名称的一个优先表。默认值：取决于浏览器。 | | -------------------------------------- | ------------------------------------- | | inherit | 规定应该从父元素继承字体系列。 |
