CSS基础

一、基础认知

CSS：层叠样式表  ——>决定了样式美观

1.CSS初识

1.写在哪里？

css写在style标签中，style标签一般写在head标签里面，title标签下面

2.CSS引入方式

内嵌式：css写在style标签中

              作用范围：当前页面

               （style标签虽然可以写在页面任意位置，但是通常约定写在head标签中）

外链式：css写在单独的.css文件中

               作用范围：多个页面

                （需要通过link标签在网页中引入）

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

               作用范围：当前标签

                （配合js使用）

选择器{}

二、基础选择器

1.标签选择器

结构：标签名{css属性名：属性值；}

作用：通过标签名，找到页面中所有这类标签，设置样式

注意：

        1.标签选择器选择的是一类标签，而不表示单独某一个

        2.标签选择器无论嵌套关系有多深，都能找到对应的标签

2.类选择器

结构：.类名{css属性名：属性值；}

作用：通过类名，找到页面中所有带有这个类名的标签，设置样式

注意：

        1.所有标签上都有class属性，class属性的属性值成为类名（类似于名字）

        2.类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头

        3.一个标签可以同时有多个类名，类名之间以空格隔开

        4.类名可以重复，一个类选择器可以同时选中多个标签

3. id选择器

结构：#id属性值（CSS属性名：属性值）

作用：通过id属性值，在页面中找到带有这个id属性值的标签，设置样式

注意点：

1.所有标签上都有id属性

2.id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的

3.一个标签上只能有一个id属性值

4.一个id选择器只能选中一个标签

4.通配符选择器

结构：*{css属性名：属性值；}

作用：找到页面中所有的标签，设置样式

三、字体和文本样式

1.字体样式

属性名：font-size

取值：数字+px

注意点：1.谷歌浏览器默认文字大小是16px   2.单位需要设置，否则无

2.文本样式

1.文本缩进：text-indent

        属性名：text-indent

        取值：数字+px

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

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

        属性名：text-align

        取值：left——左         right——右        center——居中对齐

        Q：text-align：center能让哪些元素水平居中？

                1.文本        2.span标签、a标签        3.input标签、img标签

        注意：如果需要让以上元素水平居中，text-align属性给文本所在标签（文本的父元素）设置

3.文本修饰：text-decoration

        取值：underline——下划线（常用）        line-through——删除线        overline——上划线

                  none——无装饰线（常用）

        注意：开发中会使用text-decoration：none清除a标签默认的下划线

4.行高：line-height

        作用：控制两行之间的间距（一行的上下行间距）

        属性名：line-height

        取值：1.数字＋px        2.倍数（当前font-size的倍数）

        应用：1.让单行文本垂直居中可以设置line-height：文字父元素高度

                   2.网页精准布局时，会设置line-height：1    可以取消上下间距

        行高与font连写的注意点：1.如果同时设置了行高和font连写，注意覆盖问题

                                                   2.font：style weight size/line-height family

拓展：颜色的常见取值（了解）

        属性名：如：文字颜色：color

                              背景颜色：background-color

        属性值：

                关键词——预定义的颜色名——red、green、blue、yellow

                rgb表示法——红绿蓝三原色；每项取值范围：0~255——rgb（0,0,0）

                rgba表示法——红绿蓝三原色+a表示透明度，取值范围是0~1——rgba（225,225,225,0.5）

                十六进制表示法——#开头，将数字转换成十六进制表示——#000000简写：#000

拓展：标签水平居中方法总结 margin：0 auto

        如果需要让div、p、h（大盒子）水平居中：可以通过margin：0 auto 实现

        注意：1.如果需要让div、p、h（大盒子）水平居中，直接给当前元素本身设置即可

                   2.margin：0 auto一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度

补充：

div用来网页布局，一个页面可能用无数次，原则：如果使用div，尽量使用类名控制样式