这是我参与「第五届青训营」伴学笔记创作活动的第 15 天

CSS简介

1. HTML只关注内容的语义，可以完成简单的美化，但代码十分臃肿和麻烦；
   CSS（Cascading Style Sheets）负责网页的美化,又称CSS样式表；
   设置文字内容的字体、大小和对齐方式，图片宽高、边框样式和边距，以及版面的布局和外观显示样式；
   两者实现了结构（HTML）和样式（CSS）分离。

2. CSS由两个主要的部分构成：选择器和一条或者多条声明；---> 体验CSS语法规范.html
   选择器：选择哪个标签进行美化 --- 根据不同需求把不同标签选出来美化
   声明：如何美化，样式说明   以“键值对”的形式---【color: red;】

---

选择器

选择器分为“基础选择器”和“复合选择器”

1. 基础选择器：由单个选择器组成 ---> 3、基础选择器.html

2. 标签选择器：用HTML标签名称作为选择器，为某一类标签指定统一的样式；

  类选择器：可以差异化选择不同的标签，单独选择一个或者几个标签；【不能用标签名字做类名】
           类选择器-多类名---可以在class属性中写多个类名，但多个类名必须用空格分开 

  id选择器：以id属性来设置id选择器，以“#”来定义；
           与类选择器相似，但id属性只能在每个HTML文件中出现一次，即只能调用一次

  通配符选择器：以“*”来定义,用于修改页面的左右标签---不需要调用，自动使用
              但当通配符选择器里的样式与标签原来定义的样式冲突时，选择原来的标签；

3. 复合选择器：由两个或多个基础选择器，通过不同的方式组合 ---> 7、复合选择器.html

4. 后代选择器：又称包含选择器，可以选择父元素里面的子元素，外层标签在前内层标签在后，中间空格分开

5. 子选择器：只能选择最近一级的子元素，亲儿子（后代选择器可以孙子） 用>隔开

6. 并集选择器：可以选择多组标签，同时定义相同的样式，通常用于集体声明,用,分割

7. 伪类选择器：向某些选择器添加特殊效果，比如给链接、文字添加效果，用::表示

• before:

• after:

8. 链接伪类： 必须LVHA的顺序写（love hate），因为元素的就近原则

• a:link  选择所有未被访问的链接

• a:visited  选择所有已被访问的链接

• a:hover  选择鼠标指针位于其上的链接

• a:active  选择活动链接（鼠标按下未弹起的链接）

     focus伪类选择器：用于选取获得焦点的表单元素

9. 组合选择器

• 并且：两者直接连着写即可

<p> 1 <p>
<p class='red'> 2 <p>
  
  
p {
  text-indent:2em;
  line-height:2;
}
  
复合选择器：标签选择器+类选择器
p.red {
  text-indent:2em;
  line-height:2;
}

• 后代元素：两个选择器之间加空格（可以选择孙子）
• 子元素：两个选择器之间加>（只能选择直接后代，儿子）
• 相邻兄弟元素：两个选择器之间加+

 /* 并集选择器 */
      .And + li {
        color: coral;
      }
.and后面紧跟li

• 兄弟元素：两个选择器之间用~隔开

 /* 兄弟选择器 */
       .And ~li {
        color: coral;
      }
.and后面的li。 不论是否是相邻

---

字体系列属性

---> 4、字体系列.html

1. font-family 字体属性   多个字体之间用英文逗号隔开，多个单词构成的一种字体用引号包起来sans-serif非衬线字体

2. font-size 字体大小属性

3. font-weight 字体粗细属性  normal(400)、bold（700）、bolder、

4. font-Style 字体风格  斜体（italic）、正常（normal）、