我的前端学习之路——第六天css核心属性

1、字体大小

属性：font-size

属性值：有规定的属性值和常规属性值

        常规属性值设定时加单位

        浏览器默认字体大小为16px(使用谷歌浏览器默认设置，最小字体可调)

        建议设置字体大小为偶数

        属性值为0，可以不加单位

前端常用的单位：

        em        相对于父级进行计算

        pt        磅，常用硬件设备的单位

        rem        相对于HTML跟元素进行计算(重要，用于移动端)

        %         使用在宽高自适应

        deg        2D/3D角度值

 2、字体类型

属性：font-family

属性值：中文、英文。如微软雅黑。设置中文字体类型建议加引号

3、字体加粗/倾斜

回顾：标签

        加粗：b/strong

        倾斜：i/em

css属性：

        加粗：font-weight

        属性值 ：100-900的整百数（100-500常规字体，600-900加粗字体）

                        bold 加粗

                        bolder  更粗的

                        normal 正常的（重要，用来清除加粗标签的默认样式）

        倾斜：font-style

        属性值：italic  倾斜

                        oblique  更倾斜的

                        normal 正常的（重要，用来清除加粗标签的默认样式）

4、文本行高

属性：line-height (单行文本的行高)

文本在垂直方向居中：行高=高度  （高度是指父级元素的高度）

                                     行高>高度  文本往下移动

                                    行高<高度   文本往上移动（往上或往下对应的是居中的时候的位置）

5、文本属性的简写

属性：font

属性值：font-weight font-style font-size/line-height font-family

注意：font-weight和font-style 可以不写或者交换位置；font-size/line-height 固定写法，不能改变位置；font-family可以默认，但是不能不写

6、文本颜色

属性：color

属性值：表示方式有多种

        颜色单词

        十六进制

        rgb/rgba

前端正经的颜色网站：http://zhongguose.com/

7、文本修饰

文本修饰主要是下划线，删除线，上划线，首行缩进，字间距

属性：text-decoration

属性值：underline   下划线

        overline   上划线

        line-through 删除线

        none  清除下划线（重要）

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

首行缩进text-indent

        属性值：数字＋单位，可以接负值。常用text-indent=2em，首行缩颈两个字符。（em是相对于父级元素的大小的单位）

拓展：

        字间距 letter-spacing

        词间距 word-spacing

8、列表属性

注意：有序列表和无序列表都是有兼容问题的，主要针对低版本浏览器

1、定义列表的符号样式  list-style-type:disc(实心圆)/circle(空心圆)/square(实心方块)

2、使用图片作为列表符号  针对一些特殊符号，可以用图片的形式

                                        list-style-image:url(相对地址)

3、定义列表符号的位置  list-style-position:outside(外边)/inside(里边)

9、背景属性

1、背景颜色属性  background-color/background(简写)

        background-color:颜色单词/十六进制/rgb/rgba/hsl/hsla

2、背景图片

        background-image:url(相对路径)

        注意：当容器大于背景图片的时候，图片会进行平铺

                  当容器小于背景图片的时候，图片值显示一部分

                   当容器等于背景图片的时候，图片正常显示

拓展：关于图片的使用 img 和 background-img 的对比

        img：是HTML的结构，可以不需要容器

        background-img：是css属性，需要容器支持

3、背景平铺属性 background-repeat

       属性值：no-repeat        不平铺

                        repeat        平铺(默认值)

        repeat-x：水平方向平铺 / repeat-y 垂直方向平铺

4、背景图片定位 background-position

        属性值：  x轴：left right center

                        y轴：top bottom center

5、背景的固定 background-attachment

       属性值：scroll 滚动；fixed 固定

简写：background:颜色 图片 平铺 定位 固定