css学习笔记1

一、CSS基础

1.CSS简介

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

简单理解：CSS可以美化HTML，让HTML更漂亮。

核心思想：HTML搭建结构，CSS添加样式，实现了：结构与样式的分离。

2.CSS的编写位置

2.1行内样式

• 写在标签的style属性中，（又称：内联样式）。

• 语法：

  <h1 style="color: red;font-size: 60px;">欢迎学习CSS</h1>
  

• 注意点：

  1. style属性的值不能随便写，要符合CSS语法规范，是名：值；的形式。
  2. 行内样式表，只能控制当前标签的样式，对其他标签无效。

• 存在的问题：

  书写繁琐、样式不能复用、并且没有体现：结构和样式分离的思想，不推荐大量使用，只有对当前元素添加简单样式时，才偶尔使用。

2.2内部样式

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

• 语法：

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

• 注意点：

  1. “style”标签理论上可以放在HTML文档的任何地方，但一般都放在“head”标签中。
  2. 此种写法：样式可以复用、代码结构清晰。

• 存在的问题：

  1. 并没有实现结构与样式完全分离。
  2. 多个HTML页面无法复用样式。

2.3外部样式

• 写在单独的.css文件中，随后在HTML文件中引入使用。

• 语法：

  1. 新建一个扩展名为.css的样式文件，把所有CSS代码都放入此文件中。

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

  2. 在HTML文件中引入.css文件

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

• 注意点：

  1. link标签要写在head标签中。
  2. link标签属性说明：
     • href：引入的文档来自于哪里
     • rel：（relation：关系）说明引入的文档与当前文档之间的关系。
  3. 外部样式的优势：样式可以复用、结构清晰、可触发浏览器的缓存机制，提高访问速度，实现了结构与样式的完全分离。
  4. 实际开发中，这是最推荐的方式！

3.样式表的优先级

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

  1. 内部样式、外部样式，这二者的优先级相同，且后面的会覆盖前面的。
  2. 同一个样式表中，优先级也和编写顺序有关，且后面的会覆盖前面的。

4.CSS语法规范

CSS语法规范由两部分组成：

• 选择器：找到要添加样式的元素。

• 声明块：设置具体的样式（声明块是由一个或多个声明组成的），声明的格式为：属性名：属性值；

• 注意：

  1. 最后一个声明后的分号理论上能省略，但最好写上。
  2. 选择器和声明块之间，属性名与属性值之间，均有一个空格，理论上能省略，但最好写上。

  

• 注释的写法：

  h1 {
      /* 给h1添加样式 */
      color: red;
      font-size: 60px;
  }
  

5.CSS代码风格

• 展开风格——开发时推荐，便于维护和调试。

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

• 紧凑风格——项目上线时推荐，可减少文件体积。

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

• 备注：

  项目上线时，我们会通过工具（webpack）将【展开风格】的代码，变成【紧凑风格】，这样可以减小文件体积，节约网络流量，同时也能让用户打开网页时速度更快。