【web】css引入方式总结

一、css引入方式

1. 行间（内联样式）权重：1000
2. 内部
3. 外部（项目中最常用的）

二、 常用样式

1. width（宽度） height（高度）记得加单位；
2. color：（字体颜色）
3. font-size（字体大小）：默认16px，最小支持8px；
4. font-weight（字体粗细）：默认400，取值范围100-900；
5. font-family（字体样式）；
6. opacity（透明度）：取值范围0~1；
7. background-color（背景颜色）：颜色单词，十六进制，rgb（red 0-255，green 0-255，blue 0-255），都是255白色，都是0黑色；
8. rgba（0-255，0-255，0-255，0-1）；
9. opacity和rgba（）设置透明色区别：opacity是背景颜色和文本内容都透明，rgba（）是背景颜色透明。

三、 样式补充

1. list-style：none；（去除无序列表和有序列表的默认样式）；
2. text-indent：（首行缩进）
3. text-decoration：none underline overline line-through；（下划线 上划线 贯穿线）；
4. letter-spacing：（字体间距）； word-spacing：（单词间距）；
5. text-transform：capitalized uppercase lowercase；（大小写转换 首字母大写 全部大写 全部小写）。

四、背景图片设置

1. background-image：url（）：背景图片url中放置图片路径（绝对、相对、网络）；
2. background-repeat：no-repeat； 背景图片是否重复，默认重复；
3. background-position：center center； 调整背景图片的位置，第一个值代表水平方向，第二个值代表垂直或竖直方向，center（居中）;
4. backgrouond-size：cover； 调整背景图片的大小，第一个值代表背景图片的宽度，第二个值代表背景图片的高度，cover（覆盖）。

五、 居中问题

5.1、快属性居中问题

1. 水平居中：自己设置 margin：0 auto；
2. 垂直居中：没有快捷方式（父元素的高度减去子元素的高度除以二）。

5.2、非快属性居中问题

1. 水平居中：给父元素设置text-algin：center；
2. 单行文本垂直居中：给父元素设置line-height：（父元素的高度）

六、 三种属性标签互相转换

1. display：inline-block；将标签转换为行块属性；
2. display：inline；将标签转换为行属性；
3. display：block； 将标签转换为块属性。

七 雪碧图（图片精灵）

优点：减少项目中加载图片的个数，优化性能。