CSS基础知识&基础选择器

一、CSS：cascading style sheets 层叠样式表，规定了HTML标签在网页上的显示方式。
1）使用HTML写样式的痛点：
1.代码比较臃肿。
2.可读性比较差。
3.不便于维护。
4.对搜索引擎不友好，搜索引擎更关心内容。

2）使用css的优点：
1.代码比较简洁
2.可读性比较强
3.便于维护
4.更关心内容，对搜索引擎比较友好。

3）CSS基础语法：
选择器{
属性: 属性值;（声明）
属性: 属性值;
}
选择器：选择页面中哪些元素去做样式的修改。
声明：要做什么样的样式修改。均由属性和属性值组成的。中间用 ：， 结尾用 ；。

4）css分为五类：文本，盒子，浮动，定位，背景。css对缩进和空格不敏感，可通过合理缩进来提高代码的可读性
1.文本：
字体，大小，颜色。
2. 盒子：宽，高，背景色，边框、

5）CSS书写位置：行内式，内嵌式，外链式，导入式。
1. 行内式写法：直接写在标签style属性中 例：【p style=“color: #000; font-size: 20px”>我爱我的祖国</p】
优点：写法简单。
缺点：1.结构和样式没有分离。
2.只对当前的标签生效，不能够复用，开发中不推荐使用。

2. 内嵌式写法：使用style标签，写在head标签内。CSS属性写在style标签内。
  <style>
      .....
  </style>
    优点：结构和样式分离，样式可以复用 
    缺点：1.如果样式比较多，页面代码会比较多。 
         2.只对当前页面生效。
3.外链式：写法：<link rel="stylesheet" href="css/demo.css"> 通过link标签，引入外部的css文件。
    优点：
      1.结构和样式分离。
      2.样式可以复用。
      3.可以多个页面使用。
4.导入式
  写法：
  <style>
     @import url(css/demo.css);
   </style>

注：外链式和导入式区别：
外链式：会先加载css，再去加载HTML页面。
导入式：会先加载HTML页面，再加载css。故不推荐使用导入式，使用最多的是外链式。
二、选择器：选择页面上的元素进行样式的修改。
1.标签选择器：
通过标签名来选择相应的标签，会选择页面中所有的相应标签，不管嵌套关系是怎么样的。
用途：a标签，li标签。利用标签选择器，进行默认样式的初始化。
由于标签选择器会选择页面中所有的相应标签，实际工作中，不会用来更改某一个标签的样式。

2.ID选择器：
    通过给标签设置一个ID值，然后通过ID值来选择标签。一个页面中ID值唯一，ID选择器只会选择一个标签。
  格式：
     #id值{
      声明；
    }   
  写法规范：以字母开头，后面可以是数字、下划线、横线。
  缺点：
     假如有多个标签，有相同样式，使用ID选择器的时候，需要分别给他们设置ID值，然后再重复的设置一样的样式。
     id常用场景：不是用来设置样式，配合js去添加事件的。 
3.类选择器
     通过标签的class属性来选择相应的标签，选择的是拥有相同class属性的标签元素。CSS书写样式中最常用的选择器。
  格式：
   .class属性值{
     声明;
   }
  class属性值：
     可以多个、可重复，命名规则同ID值。以字母开头，后面可以是数字、下划线、横线。
4.通配符：*
  格式：
     *{
      声明；
    }  
  注：可选择包括body在内的所有标签。无论标签是否有相应属性，均会去执行一次。因效率不高，不常用。