前端CSS基础选择器及文字文本相关属性

#博学谷IT学习技术支持#

一、CSS基础认知

（一）CSS的介绍：层叠样式表

作用：给页面中的html标签设置样式

（二）CSS语法规则：选择器（CSS属性）

注意点：1、标点符号都是英文状态下的

        2、每一个样式的键值对写完之后，最后需要写分号

（三）CSS初体验：css写在style标签中，style标签一般写在head标签里面，title标签下面

常见的属性：

1、文字的颜色--color

2、文字的大小--font-size

3、背景颜色--background-color

4、宽度--width

5、高度--height

（四）CSS引入方式

1、内嵌样式

A、书写位置：css写在style标签中，style标签写在head标签里面，title标签的下面

B、作用范围：当前页面

C、使用场景：小案例、小demo  

2、外联样式

A、书写位置：css写在一个单独的.css文件中，此时需要通过link标签引入

B、作用范围：多个页面（谁引入，谁就生效）

C、使用场景：项目中使用

3、行内样式

A、书写位置：css写在标签的style属性中

B、作用范围：当前标签

C、使用场景：在基础班是不用，之后配合js一起使用

二、基础选择器

（一）选择器的作用：选中页面中对应的标签（找她），方便后续设置样式（改她）

（二）标签选择器

      1、结构：标签名（CSS）

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

      3、注意点：找的是一类标签，不能单独找到某一个；标签选择器无论嵌套关系有多深，都能找到对应的标签

（三）类选择器

1、结构：标签名（CSS）

      2、作用：找到页面中所有带有该类名标签，设置样式

      3、注意点：所有的标签都有class属性，class属性的属性值就叫做类名；一个标签可以有多个类名，类名之间通过空格隔开；一个类选择器可以同时选中多个标签

（四）id选择器

1、结构：#id属性值 {css}

      2、作用：找到页面中带有该id属性值的标签，设置样式

      3、注意点：id属性值相当于是身份证号码，在一个页面中是唯一的，不可重复的！！！一个标签上只能有一个id属性值；一个id选择器只能选中

（五）类与id选择器的区别

1、class类名与id属性值的区别：class类名相当于姓名，可以重复，一个标签可以同时有多个class类名；id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值

      2、类选择器与id选择器的区别：类选择器以.开头；id选择器以#开头     3、实际开发的情况：类选择器用的最多；id一般配合js使用，除非特

情况，否则不要使用id设置样式；实际开发中会遇到冗余代码的抽取问题

（六）通配符选择器

1、结构：* {css}

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

      3、注意点：针对于大型的项目，一般不会使用通配符选择器，可能会比较消耗浏览器的性能；之后可能在基础班的小页面中去除标签的默认margin和padding

三、总结

今天的学习总结就到这里了，接下来我会继续往下学，下次给大家分享CSS文字文本相关属性。