第二章：CSS基础---字体四件套、文本属性、列表属性、边框属性、背景属性、img引入的图片和背景图的区别、伪类选择器、元素类型、浮动类型

<1..字体四件套>

    （1）字体大小

                font-size:数字px;默认大小16px 一般设置字体大小为偶数

    （2）字体加粗 font-weight

                bold 加粗

               100-900 整百不带单位 100-300偏细 400-500 正常 600-900加粗

                normal 正常 去掉加粗效果

    （3）字体倾斜 font-style

                italic 倾斜

                normal 正常 去掉倾斜效果

    （4）字体类型 font-family

                可以是中文,一般用引号引起，默认微软雅黑

                可以是英文,多个单词的英文用引号引起来，一个单词可以不引

                多个字体类型之间用,隔开，依次从左到右执行，有哪个显示哪个，都没则显示默认值

<2..文本属性>

    （1）文本颜色 color:颜色单词/十六进制b(0-255,0-255,0-255)

                二进制(01)

                八进制(0-7)

                十六进制(0123456789abcdef)

    （2）文本首行缩进 text-indent:数值px

    （3）文本修饰 text-decoration

                underline 下划线

                overline 上划线

                line-through 删除线

                none 去掉修饰(的线)

    （4）文本的水平位置 text-align:left/center/right

    （5）行高 line-height:数值/数值px

                只设置数值代表行高是字体大小的该倍数

                增大行和行之间的距离

                利用行高的值和容器高度一样，可以实现垂直居中

    （6）字体复合写法 font:字体加粗 字体倾斜 字体大小/行高  字体类型

                字体加粗 字体倾斜两个没有顺序,值可选

                字体大小和字体类型必须存在

    （7）字符间距 letter-spacing:数值px;

                中文：字和字之间的距离

                英文：字母之间的距离

    （8）词间距 word-spacing:数值px

    （9）大小写转换 text-transform

                uppercase 全部大写

                lowercase 全部小写

                capitalize 首字母大写

    （10）鼠标样式 cursor

                pointer 手型

                wait 等待

                help 帮助

<3..列表属性>

    （1）列表符号类型 list-style-type:disc(默认实心圆)(空心圆)/square(实心方块)none(去掉列表符号)

    （2） 列表符号位置 list-style-position:outside(默认值,在li外面)/inside(在li里面)

    （3）列表图片 list-style-image:url(图片路径)

    （4）复合写法 list-style:列表符号类型 列表符号位置 列表图片;

                没有顺序

                可以只存在一个值,其他两个值就是默认值

<4..边框属性>

    （1）分开的写法(针对四周)

                 a. 边框样式 border-style:solid(实线)/dashed(虚线)/dotted(点状线)/double(双实线)

                 b. 边框宽度(粗细) border-width:数值px

                 c. 边框颜色 border-color:颜色值;默认跟随字体颜色

    （2）复合写法 border:边框样式  边框宽度 边框颜色; (常用)

                 没有顺序

                边框样式是必须的

    （3）单方向的边框 border-方向(top/right/bottom/left):边框样式  边框宽度 边框颜色;

    （4）去掉某个方向的边框 border-方向(top/right/bottom/left):none/0;要写在复合写法的后面

<5..背景属性>

    （1）背景色 background-color: transparent(默认值,透明色)/颜色值;

    （2）背景图 background-image: url(背景图路径)

    （3）背景图重复(平铺) background-repeat:repeat(都重复,默认值)/repeat-x/repeat-y/no-repeat

    （4） 背景图位置 background-position:水平 垂直;

                 数值px 向右和向下为正

                关键字 水平:left/center/right 垂直 top/center/bottom

                只写一个数值px 代表水平方向 垂直方向是居中的

                写关键字的话,另一个对应的方向是居中的

    （5）复合写法

        background: 背景色 背景图  背景图重复 背景图位置;

                没有顺序

                背景色 背景图存在一个就行

<6..img引入的图片和背景图的区别>

    （1）img引入图片占位置,背景图不占位置

    （2）要保证插背景图的容器有大小,不然背景图没地方显示

    （3）页面中小图标一般使用背景图插入,其他用img插入

<7..伪类(鼠标某种状态)选择器>

    （1） 超链接选择器:link{}  超链接没有访问之前

    （2）超链接选择器:visited{} 超链接访问后

    （3）元素:hover{} 鼠标滑过 针对所有的元素

    （4）元素:active{} 鼠标按下(激活)  针对所有的元素

规则:

    （1）如果同时要给超链接添加四种状态的话,必须按照爱(love)恨(hate)原则

    （2）伪类选择器权重为10,权重值高才会修改掉原来的样式

<8..元素类型>

    （1）根据html语法划分标签类型

                双标签

                单标签

    （2）根据css语法划分元素类型

                元素类型

                    1） 块级元素(div/p/h1-h6/ul/ol/li/dl/dd/dt/table)

                        a. 可以设置宽高

                        b. 独占一行(自动换行)

                        c. 块级元素一般作为容器去包裹其他元素,p标签不能包裹块级元素(包括他自己)

                        d. 块级元素水平居中margin:auto;(在父元素内居中)

                    2） 内联元素(span/a/b/strong/i/em/del/ins/u/sup/sub)

                        a. 不可以设置宽度

                        b. 在同一行显示

                        c. 内联元素标签之间的回车会产生一个小缝隙

                                                代码写在同一行

                                                将回车部分注释

                        d. 内联元素水平居中:将内联元素整体当作是字,一般在外面套一个块级元素,设置 text-align:center;

                    3） 内联块元素(img)

                        a. 可以设置宽高

                        b. 在同一行显示

                        c. 内联块元素标签之间的回车会产生一个小缝隙

                                               代码写在同一行

                                                将回车部分注释

                       d. 内联块元素水平居中:将内联块元素整体当作是字,一般在外面套一个块级元素,设置text-align:center;

    （3）元素类型的转换(转换后会拥有该种元素类型的特点)

                display: block(块级)/inline(内联元素)/inline-block(内联块)

<9..浮动属性>

      （1）float:none(默认值,不浮动)/left(左浮动)/right(右浮动)

                                应用场景: 让纵向排列的元素横向排列,且中间没有缝隙

                1. 给横向排列的元素整体左浮动(靠左)

                2. 给横向排列的元素整体右浮动(靠右)

                3. 给元素一左(左浮动)一右(右浮动)排列

    特点:

                1. 浮动元素在父元素内活动，且后面浮动的元素不会超过前面浮动的元素

                2. 添加浮动元素会 脱离文档流,不占位置，后面的元素或挪动上来，浮动元素会遮挡住该元素，但是不会遮挡里面的文字

                3. 浮动元素放不下后会自动换到下一行，左浮动换行后靠左边，右浮动换行后靠右边

                4. 浮动元素的前面如果有高度超出的情况的话，浮动元素就浮不过去了

清除浮动(前面元素浮动后,会影响到后面正常的元素)

    概念: 清除浮动元素带给自己的影响

            clear:none(不清除,默认值)/left(清除左浮动)/right(清除右浮动)/both(清除左右的浮动)

    三角形

    div{

        width:0px;height:0px;

        border:数值px solid transparent;

        border-方向: 数值px solid 颜色;

    }