CSS笔记

CSS

引言

• CSS的全称为：层叠样式表（Cascading Style Sheets）。
• CSS也是一种标记语言，用于给HTML设置样式，比如文字的大小、文字的颜色、元素宽高等.....

属性方法参考

1、CSS的编写位置

• 行内样式(内联样式)

  <h1 style="color:red;font-size:40px">.....</h1>
  

• 内部样式

  • 写在html页面内部，将所有的CSS代码提取出来，单独放在<style>标签中。

  <style>
      h1 {
          color:red;
          font-size:40px;
      }
  </style>
  

• 外部样式（实际开发中最常用的引入方式）

  • 写在单独的CSS文件之中，以.css结尾，将所有的CSS代码都放置在此文件之中，并通过link标签进行引用进来。

  • 1.新建一个以.css结尾的文件，将所有的css样式放置在文件之中。

    h1 {
        color:red;
        font-size:40px
    }
    

  • 2.在HTML文件中引用.css文件。

    <link rel="stylesheet" href="./xxx/ss.css">
    

2、样式的优先级

• 优先级规则：行内样式 > 内部样式 = 外部样式

  内部样式和外部样式优先级相同，后写的样式会覆盖前面的样式（“后来者居上”）。

3、CSS的基本选择器

• 通配选择器（一般用于清除默认样式）

  /* 选中所有元素 */
  * {
      color:range;
      font-size:40px;
  }
  

• 元素选择器（选中元素/标签）

  /* 选中所有h1元素*/
  h1 {
      color:range;
      font-size:40px;
  }
  /* 选中页面的所有p元素 */
  p {
      color:blue;
      font-size:50px;
  }
  

• 类选择器（元素中class的值）

  /* 选中所有class的值为speak的元素 */
  /* class的值可以有多个：class="test1 test2" */
  .speak {
      color:red;
  }
  /* 选中所有class的值为answer的元素 */
  .answer {
      color:blue;
  }
  

• ID选择器（元素中id的值）

  /* 选中id值为earthy的元素 */
  #earthy {
      color:red;
      font-size:60px;
  }
  

  注意：id属性值：不要用数字开头命名，不要包含空格，区分大小写，页面中id值是唯一的。

4、CSS的复合选择器

• 交集选择器（选中符合多个条件的元素）

  /* 选中：类名为beauty的p元素，为此种写法用的非常多！ */
  p.beauty {
      color:blue;
  }
  /* 选中：类名包含rich和beauty的元素 */
  .rich.beauty {
      color:green;
  }
  

• 并集选择器（选中多个选择器对应的元素，通过逗号隔开）

  /* 选中id为peiqi，或类名为rich，或类名为beauty的元素 */
  #peiqi,.rich,.beauty {
  font-size: 40px;
  background-color: skyblue;
  width: 200px;
  }
  

• 后代选择器（选中指定元素中，符合要求的后代元素不管，嵌套几层）

  /* 选中ul中的所有li */
  ul li {
  	color: red;
  }
  /* 选中ul中所有li中的a */
  ul li a {
  	color: orange;
  }
  /* 选中类名为subject元素中的所有li */
  .subject li {
  	color: blue;
  }
  /* 选中类名为subject元素中的所有类名为front-end的li */
  .subject li.front-end {
  	color: blue;
  }
  

• 子代选择器（先写父，再写子，父亲的嵌套下一层）

  /* div中的子代a元素 */
  div>a {
  	color: red;
  }
  /* 类名为persons的元素中的子代a元素 */
  .persons>a{
  	color: red;
  }
  

• 兄弟选择器

  • 相邻兄弟选择器（选中指定元素符合条件的相邻兄弟元素）

    /* 选中div后相邻的兄弟p元素 */
    div+p {
    	color:red;
    }
    

  • 通用兄弟选择器（选中指定元素的所有兄弟元素）

    /* 选中div后的所有的兄弟p元素 */
    div~p {
    	color:red;
    }
    

• 属性选择器（选中属性值符合一定要求的元素）

  /* 选中具有title属性的元素 */
  div[title]{color:red;}
  
  /* 选中title属性值为atguigu的元素 */
  div[title="atguigu"]{color:red;}
  
  /* 选中title属性值以a开头的元素 */
  div[title^="a"]{color:red;}
  
  /* 选中title属性值以u结尾的元素 */
  div[title$="u"]{color:red;}
  
  /* 选中title属性值包含g的元素 */
  div[title*="g"]{color:red;}
  

5、伪类选择器（常用的）

• 作用：选中特殊状态的元素
• 常用的伪类选择器：
  • 动态伪类：
    1. :link超链接未被访问的状态。
    2. :visited超链接访问过的状态。
    3. :hover鼠标悬停在元素上的状态。
    4. :active元素激活的状态。
  • 结构伪类：
    1. :first-child所有兄弟元素的第一个。
    2. :last-child所有兄弟元素的最后一个。
    3. :nth-child(n)所有兄弟元素的第n个。
    4. :first-of-type所有同类型兄弟元素中的第一个。
    5. :last-of-type所有同类型兄弟元素中的最后一个。
    6. :nth-of-type(n)所有同类型兄弟元素中的 第n个。

6、伪元素选择器（常用的）

• 作用：选中元素的一些特殊位置。
• 常用的伪元素选择器：
  1. ::first-letter选中元素的第一个文字。
  2. ::first-line选中元素的第一行文字。
  3. ::selection选中被鼠标选中的内容。
  4. ::placeholder选中输入框的提示文字。
  5. ::before在元素最开始的位置，创建一个子元素（必须用 content 属性指定内容）。
  6. ::after在元素最后的位置，擦黄健一个子元素（必须用content属性指定内容）

注意：行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器。

7、CSS的三大特性

1. 层叠性

   • 概念：如果发生了样式冲突，那就会根据一定的规则（选择器优先级），进行样式的层叠（覆

     盖）。

     什么是样式冲突？ —— 元素的同一个样式名，被设置了不同的值，这就是冲突

2. 继承性

   • 概念：元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。

   • 规则：优先继承离得近的。

   • 常见的可继承属性：

     text-?? ， font-?? ， line-?? 、 color ......

3. 优先级

   • 简单来看：!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器 > 继承的样式。

   • 严格来看：需要计算权重。