CSS基础

1.CSS引入方式：

        内嵌式：CSS写在style标签中（style标签虽然可以写在页面的任意位置，但是通常约定写在head标签中）；

        外联式：CSS写在一个单独的.css文件中（需要通过link标签在网页中引入）；

        行内式：CSS写在标签的style属性中。

注意：样式的层叠问题：如果给同一个标签设置了相同的属性，此时样式会层叠（覆盖），写在最下面的会生效，CSS层叠样式表，所谓的层叠即叠加的意思，表示样式可以一层一层的层叠覆盖。

---

 2.基础选择器：

        2.1 ：标签选择器：作用于所有指定标签的样式，无论关系嵌套有多深都能找到它，格式如下：

                标签{

                        css属性名:属性值;

                }

        2.2：类选择器：通过类名找到页面中所有带有该类名的标签设置样式；所有标签都有一个class属性，class属性的属性值称为类名，类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头；一个标签可以同时有多个类名，类名之间用空格隔开；类名可以重复，一个类选择器可以同时选中多个标签，格式如下：

                .类名{

                        css属性名:属性值;

                }

        2.3：id选择器：通过id属性值，找到页面中带有这个id 属性值的标签设置样式；所有的标签上都有id属性；id属性值类似于身份证号码，在一个页面中是唯一的，不可重复，一个标签上只能有一个id属性值，一个id选择器只能选中一个标签，格式如下：

                #id属性值{

                        css属性名:属性值;

                }

        注意：给多个标签设置同样的id属性添加样式，样式会发生改变虽然不会报错但是不符合规则，id属性一般不是用来设置样式的，一般配合JS使用获取对象

        2.4通配符选择器：可以找到页面所有标签设置样式，开发中极少用到，只会在极特殊的情况下才会用到，可能会用于去除标签默认的margin和padding，格式如下：

                *{

                        css属性名:属性值;

                }

---

 3.文字和文本样式：

        3.1 字体样式：

                3.1.1 字体大小：font-size

                        取值：数字+px

                        注意：谷歌浏览器默认文字大小为16px,单位需要设置否则无效

                3.1.2 字体粗细：font-weight

                        取值：1.关键字：正常为normal，加粗为bold；2.纯数字：100~900的整百数（400正常，700加粗）

                        注意：不是所有字体都提供了九种粗细，因此部分取值页面中无变化，实际开发中以正常和加粗两种用的较多

                3.1.3 字体样式（是否倾斜）：font-style

                        取值：正常（默认）：normal；倾斜：italic

                3.1.4 字体类型：font-family

                例如如下设置：

                3.1.5 字体类型：font属性连写

                        取值：

                                font:style weight size family;

                        省略要求：只能省略前两个（即style和weight），如果省略了相当于设置了默认值

                        注意：如果需要同时设置单独和连写形式，要么把单独的样式放在连写的下面，要么把单独的样式放在连写的里面

        3.2 文本样式：

                3.2.1 文本缩进：text-indeny

                        取值：数字+px 或者 数字+em（推荐：1em=当前标签的font-size的大小）

                3.2.2 文本水平对齐方式：text-align

                        取值：left表示左对齐；center表示居中对齐；right表示右对齐

                        center可以使文本、span标签、a标签、input标签、img标签居中，如果需要实现这

                  些元素水平居中，text-align:center需要给以上元素的父元素设置

                3.2.3 文本修饰：text-decoration

                        取值：underline下划线；line-through删除线；overline上划线；none无装饰线（常用，可去掉超链接标签a自带的下划线）

        3.3 行高：

                属性名：line-height

                取值：数字+px或倍数（当前标签font-size的倍数）

                注意：让单行文本垂直居中可以设置line-height：文字父元素高度；网页精准布局时会设

        置line-height:1可以取消上下间距

---

4.颜色取值：

        属性名：

                如：文字颜色：color；

                如：背景颜色：background-color；

                属性值：

5.标签水平居中： 

        如果需要让div、p、h（大盒子）水平居中，可设置margin:0 auto;实现

        注意：如果需要让div、p、h（大盒子）水平居中，直接给当前元素本身设置即可，margin:0 auto一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度