前端【css】

css引入方式

1.行间（内联样式)

2.内部引入  內部外部没有优先级之分 谁在后面就听谁的

3.引入外部样式(项目中最常用）

 常用样式

            width:宽度

            height:高度 记得加单位px

            color：字体颜色

            font-size：字体大小 默认16px 最小支持8px

            font-weight；字体粗细 默认400 取值范围100-900 没有单位

            font-family:字体样式

            opacity；透明度 取值范围0-1

            background

            -color；背景颜色 颜色单词 十六进制#000000（黑） #ffffff（白）

             rgb（red  0-255，green  0-255，blue  0-255）

            都是255白色 都是0黑色 rgba（0-255，0-255，0-255，0-1）

            opacity和rgba（）设置透明度的区别

            opacity：背景颜色和文本内容都透明 rgba（）只有背景颜色透明

            list-style:none;去除无序列表和有序列表的默认样式

            text-indent:首行缩进值

            text-decoration:(none 去除标签下划线 underline 加下划线 overline 加上划线 line-through贯穿线）

            letter-spacing:字体间距

            word-spacing:单词间距

            text-transform:大小写转换 （ capitalize首字母大写 uppercase全部大写  lowercase全部小写）

三种属性标签互相转换

display:

             inline-block 将标签转换为行块属性

            display:inline 将标签转换为行属性

            display:block 将标签转换为块属性

雪碧图

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

居中问题

块属性

    1.水平居中 自己设置margin:0 auto

    2.垂直居中 没有快捷方式（目前）

非块属性

1.水平居中 给父元素设置text-algin：center

2.单行文本垂直居中 给父元素设置line-height：父元素的高度