06-CSS和选择器的详细用法

1.CSS3

• 什么是CSS
  CSS (Cascading Style Sheets) 层叠样式表，是一个用于修饰文档（可以是标记语言HTML，也可以是XML或者SVN）的语言，可以将文档以更优雅的形式呈现给用户。
• HTML和CSS之间的关系？
  HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
  CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
  HTML就像是一个人，而CSS就像是衣服和化妆品，用来装饰HTML。

2.CSS的引入方式

- 内联样式(行内样式)

缺点：样式与结构冗余

优点：优先级较高

内联样式表就是把css代码直接写在现有的HTML标签中，具体的使用方法如下面所示：

<div style="color:blue">设置文字的颜色为蓝色</div>

这里要注意：样式的内容写在元素的开始标签里，并且css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。多个css样式写在一起的效果如下面所示：

<div style="color:blue;font-size:15px">
    设置字体颜色为蓝色，并且字体大小为15px
</div>

这种样式只会对当前标签起作用，在测试的时候可以使用，不能对样式进行复用，不方便后期维护，不推荐使用

- 内部样式表

缺点：样式的复用率较低

优点：样式与结构分离

将样式表编写到head中的style标签中

<style>    
  p{        
    color:blue;        
    background-color:pink;    
  }
</style>

使用内部样式表，进一步将表现和结构分离，可以同时为多个元素设置样式，方便后期的维护
注意点:
-style标签要写在head标签的开始标签和结束标签之间(也就是和title标签是兄弟关系)

​ -设置样式时必须按照固定的格式来设置. key: value;其中:不能省略, 分号大多数情况下也不能省略

- 外部样式表

优点：样式与结构分离，解耦；样式的复用率高（框架:例如bootstrap）， 共用，定义好的css文件可以应用到多个页面中。

1.将样式表编写到外部的CSS文件中，然后通过link标签将外部文件引入

<link rel="stylesheet" type="text/css" href="文件的路径"/>

将样式编写到外部样式表中，可以在不同的页面中使用同一个样式表，完全将表现和结构分离，方便后期的维护，推荐使用的方式

2.@import url()，还可通过import方式导入CSS文件

@import引入方式会先加载html，再加载css；当网络环境较差时，会出导致页面效果较差的现象，所以该方式不建议使用；

<style>
	/*要写在style标签的最前面，否则不会生效 或者直接在外部css文件中直接使用*/
  @import url('./style.css');
</style>

- 引入方式的优先级

行内样式>内部样式/外部引入

​ 就近原则：哪一种设置方式距离元素最近，谁的优先级更高；

- CSS怎么学?

CSS的学习一共分为两大部分, 一个是CSS的选择器, 另一个是CSS的属性.

3.CSS选择器

选择器的分类和介绍

1.标签选择器 ：通过标签的名字去选择它，进行添加属性的操作。

2.id选择器 ：通过自己起的id名字来找它，进行添加属性的操作，使用前加#。

3.class选择器 ：通过class起的名字来找它，进行添加属性的操作，使用前加（ . ）。

4.后代选择器 ：选择一个标签包含的所有标签（含的多层关系）。

5.子代选择器 ：选择一个标签中的子标签（只有一种关系）。

1.标签选择器

作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性
格式:
标签名称{
属性:值;
}
注意点:
1.标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签
2.标签选择器无论标签藏得多深都能选中
3.只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input…)

2.id选择器

作用: 根据指定的id名称找到对应的标签, 然后设置属性
格式:
#id名称{
属性:值;
}
注意点:
1.每个HTML标签都有一个属性叫做id, 也就是说每个标签都可以设置id
2.在同一个界面中id的名称是不可以重复的
3.在编写id选择器时一定要在id名称前面加上#
4.id的名称是有一定的规范的
4.1 id的名称只能由字母/数字/下划线，a-z 0-9 _
4.2 id名称不能以数字开头
4.3 id名称不能是HTML标签的名称，不能是a h1 img input …
5.在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为id是留给js使用的

3.class选择器

作用: 根据指定的类名称找到对应的标签, 然后设置属性
​ 格式:
​ .类名{
​ 属性:值;
​ }

​ 注意点:
​ 1.每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名
2.在同一个界面中class的名称是可以重复的
​ 3.在编写class选择器时一定要在class名称前面加上.
​ 4.类名的命名规范和id名称的命名规范一样
5.类名就是专门用来给CSS设置样式的
​ 6.在HTML中每个标签可以同时绑定多个类名
​ 格式:
​ <标签名称 class=“类名1 类名2 …”>

​ 7.2 一个HTML标签只能绑定一个id名称
​ 一个HTML标签可以绑定多个class名称

​ 8.id选择器和class选择器区别?
​ id选择器是以#开头
​ class选择器是以.开头

​ 9.在企业开发中到底用id选择器还是用class选择器?
​ id一般情况下是给js使用的, 所以除非特殊情况, 否则不要使用id去设置样式

​ 10.在企业开发中一个开发人员对类的使用可以看出这个开发人员的技术水平
​ 一般情况在企业开发中注重冗余代码的抽取, 可以将一些公共的代码抽取到一个类选择器中, 然后让标签和这个类选择器绑定即可

4.后代选择器

作用: 找到指定标签的所有特定的后代标签, 设置属性
​ 格式:
​ 选择器1 选择器2{
​ 属性:值;
​ }
​ 先找到所有名称叫做"选择器1"的标签, 然后再在这个标签下面去查找所有名称叫做"选择器2"的标签, 然后在设置属性
​ 例如：div p{}

​ 注意点:
​ 1.后代选择器必须用空格隔开
​ 2.后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代
​ 3.后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器
​ 4.后代选择器可以通过空格一直延续下去

5.子代选择器

作用: 找到指定标签中所有特定的直接子元素, 然后设置属性
​ 格式:
​ 选择器1>选择器2{
​ 属性:值;
​ }

​ 注意点:
​ 1.子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
​ 2.子元素选择器之间需要用>符号连接, 并且不能有空格
​ 3.子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器
​ 4.子元素选择器可以通过>符号一直延续下去

​ 5.后代选择器和子元素选择器之间的区别?
​ -后代选择器使用空格作为连接符号
​ 子元素选择器使用>作为连接符号
​ -后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中儿子/孙子…, 只要是被放到指定标签中的特定标签都会被选中
​ 子元素选择器只会选中指定标签中, 所有的特定的直接标签, 也就是只会选中特定的儿子标签

​ 6.后代选择器和子元素选择器之间的共同点
​ -后代选择器和子元素选择器都可以使用标签名称/id名称/class名称来作为选择器
​ -后代选择器和子元素选择器都可以通过各自的连接符号一直延续下去
​ 选择器1>选择器2>选择器3>选择器4{}
​ 7.在企业开发中如何选择
​ 如果想选中指定标签中的所有特定的标签, 那么就使用后代选择器
​ 如果只想选中指定标签中的所有特定儿子标签, 那么就使用子元素选择器