前端CSS样式基础（一）

学习目标：

• css内部引入
• 外部引入
• 行间引入
• 雪碧图
• 居中问题
• 三种属性标签

---

学习内容：

一、CSS的引入方式

（1)内部引入：

         常用样式：

            1.width: 宽度 记得加单位px；

            2.height：高度

            3.color: 字体颜色；

            4.font-size:字体大小 默认16px,最小支持8px;

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

            6.font-family:字体样式；

            7.opacity:透明度  取值范围0-1  没有单位；

            8.rgb：三原色（red：0-255 green：0-255 blue：0-255）都是255白色 都是0黑色

            9.rgba(0-255,0-255,0-255,0-1)

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

            11.text-indent:首行缩进；

            12.

text-decoration:	none  去除下划线
	underline 下划线
	overline   上划线
	letter-spacing  字体间距
	word-spacing    单词间距
	ne-through   字体上的划线/贯穿线

             13.

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

              14.组合选择器 每个选择器之间用逗号隔开  例：ul,ol{}

background-image:	背景图片   url中放置图片路径（绝对 相对  网络）
background-color:	背景颜色  颜色单词    十六进制#000000/#ffffff
background-repect:	设置背景图片是否重复 默认重复
background-position:	调整背景图片的位置
	第一个位置代表水平方向 第二个位置代表竖直方向  向右为正 向下为正
background-size:	调整背景图片的大小
	第一个值代表背景图片的宽度   第二值代表背景图片的高度

    (2)引入外部样式：

        Eg: link rel="stylesheet" href="css/one.css"

        内部和外部没有优先级之分 谁在后面听谁的

        1.行间引入（内联样式）权重1000  

        2.内容引入 

        3.外部引入(项目中最常用的)      

 补充：外部和内部引入方式没有权重高低之分 文档后面的会覆盖文档前面的

---

二、雪碧图

     1.url中放置背景图片的路径

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

三、居中问题

      后代选择器 父选择器 子选择器:

      1.块属性:

          1).水平居中 块元素自己设置 margin:0 auto

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

      2.非块属性:

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

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

四、三种属性标签

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