1.1 CSS简介与基础选择器

声明：本人前端学习笔记的所有内容均为b站上pink老师课程的学习笔记，如果想详细了解的可以搜索以下网址：

1. H5C3+移动布局： 黑马程序员pink老师前端入门视频教程 HTML5+CSS3+移动端布局-flex布局rem布局响应式布局摹客蓝湖使用-简单有趣好玩
2. JavaScript系列 ：JavaScript基础语法-dom/bom-es6-jQuery-数据可视化echarts-包含笔记源码作业黑马程序员pink老师前端入门视频教程（持续更新）

1.CSS简介

美化网页，布局页面，是层叠样式表的简称

1.1 HTML的局限性

只关心内容的语义，没有任何装饰，虽然可以做简单的装饰，但是带来是无尽的臃肿和繁琐

总结：HTML主要做结构，显示元素内容

1.2 CSS-网页的美容师

CSS也是一种标记语言

CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图形的外观（宽高、边框样式、边距等）以及版面的布局和外观显示样式

CSS可以美化HTML，让HTML更漂亮，让页面布局更简单

重点：CSS最大价值：由HTML专注去做结构呈现，样式交给CSS，即结构（HTML）与样式（CSS）相分离。

1.3 CSS语法规范

CSS规则由两个主要的部分构成：选择器以及一条或多条声明。

• 选择器是主要用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
• 属性和属性值以键值对的形式出现（冒号分隔，分号结尾）
• 属性是对指定的对象设置的样式属性，例如字体大小、文字颜色等

1.4 CSS代码风格

• 样式格式风格（展开格式，更加直观）

• 样式大小写

  强烈推荐样式选择器，属性名、属性值关键字全部使用小写字母，特殊情况除外；

• 空格规范
  • 属性值前面，冒号后面，保留一个空格；
  • 选择器（标签）和大括号中间保留一个空格；

h3 {
    color: pink;
    font-size: 20px;
}
           

2.CSS选择器

2.1 CSS选择器的作用

选择器（选择符）就是根据不同需求把不同的标签选出来，简单来说，就是选择标签用的。

2.2 选择器的分类

选择器分为基础选择器和复合选择器两个大类

2.2.1 基础选择器

基础选择器是由单个选择器所组成，基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器。

• 标签选择器*：是指用HTML标签名称作为选择器，按标签名称分类，为页面中的某一类标签指定统一的CSS样式；

  标签名 {
      属性1： 属性值；
      属性2： 属性值；
  }
             

  优点：可以把某一类标签全部选出来，并快速为页面中同类型的标签设置统一样式。

  缺点：不能设置差异化样式，只能选择全部的当前标签。

• 类选择器：如果想要差异化选择不同的对象，单独选择一个或者几个标签，可以使用类选择器。

  .类名1 {                       //口诀：样式点定义，结构类（class）调用，一个或多个，开发最常用
  	属性1： 属性值1；
  }
  .red {
  	color： red;
  }
  
  <div class='red'> 变红色 </div>   <!---结构需要用class属性来调用class类的意思-->
             

  1.类选择器使用 “.” 进行标识，后面紧跟类名（自定义，不要使用纯数字、中文等命名，尽量使用英文字母来表示）

  2.长名称或者词组可以使用中横线来为选择器命名。

  • 类选择器：多类名

    可以给一个标签指定多个类名，从而达到更多的选择目的，例如：

    <div class='red font20'> 变红色，字体20 </div>   //在标签class属性中写多个类名，多个类名中间用空格分开
               

  • 多类名开发中使用场景（提高代码复用性）

    （1）可以把一些标签元素相同的样式放到一个类里面，从而节省代码，方便统一修改

    （2）这些标签都可以调用这个公共的类，然后再调用自己独有的类

• id 选择器：id选择器可以为标有特定id的HTML元素指定特定的样式

  HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义

  #id名 {
  	属性1： 属性值1；
  }
  #orange {
  	color: orange;
  }
  <div id="orange"> 林彦俊 </div>
             

  id选择器：样式#定义，结构id调用，只能调用一次，别人切勿使用
• 类选择器和id选择器的区别
  • 类选择器好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用
  • id选择器好比人的身份证号，全中国是唯一的，不能有重复
  • id选择器和类选择器的最大区别在于使用次数上
  • 类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用

• 通配符选择器

  在CSS中，通配符选择器使用“*“定义，它表示选取页面中的所有元素（标签）

  * {
      属性1： 属性值；
  }
             

  • 通配符选择器不需要调用，自动就给所有的元素使用样式
  • 特殊情况才使用