1.CSS

1.CSS

推荐学习网站(w3school)–点击跳转

• 什么是CSS

  CSS (Cascading Style Sheets) 层叠样式表，是一个用于修饰文档（可以是标记语言HTML，也可以是XML或者SVN）的语言，可以将文档以更优雅的形式呈现给用户。

• HTML和CSS之间的关系？

  HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

  CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

  HTML就像是一个人，而CSS就像是衣服和化妆品，用来装饰HTML。

• 通过标签来修改样式的缺点:

  需要记忆哪些标签有哪些属性, 如果该标签没有这个属性, 那么设置了也没有效果。
  当需求变更时我们需要修改大量的代码才能满足现有的需求。
  HTML只有一个作用就是用来添加语义。

• 通过CSS来修改样式有什么好处?

  不用记忆哪些属性属于哪个标签。
  当需求变更时我们不需要修改大量的代码就可以满足需求。
  在前端开发中CSS只有一个作用, 就是用来修改样式。

2.语法

2.1 CSS声明（CSS declarations）

CSS语言的核心功能：为特定的属性设定特定的值

• CSS引擎通过计算出声明的每个属性来显示元素。
• CSS的属性和值都是大小写敏感的。属性与值通过“:”分隔开。
• 并不是所有的值都适用于同一个属性，不同的属性有一系列不同的值。
  

2.2 CSS声明块（ CSS declaration blocks）

将多个CSS声明写在一起，每个CSS声明通过“;”分隔开，最后一个css声明无需使用“;”分隔开。使用“{”“}”将多个CSS声明括起来，这样就构成了一个CSS声明块。

2.3 CSS规则集

选择器 : HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素。

声明 : 一个单独的规则，如 color: red; 用来指定添加样式元素的属性。

属性 : 改变 HTML 元素样式的途径。

属性的值 : 在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值

注意 :

• 每个规则集（除了选择器的部分）都应该包含在成对的大括号里{}。
• 在每个声明里要用冒号:将属性与属性值分隔开。
• 在每个规则集里要用分号;将各个声明分隔开。

2.4 CSS可读性

空白（ White space）

空白意味着实际空格、制表符和新行，可以添加空白使样式表更加可读。

注释（ Comments）

这里就是CSS的注释

速记写法（ Shorthand）

• 类似于font，background， padding， border， margin 这些都被称为速记属性。
• 这些属性允许在一行中写多个属性值。速记属性可以节省时间，使代码整洁。

例如：

border:1px solid red;

background-color:red;

padding: 10px 15px 15px 5px;
/*等价于padding-top: 10px; padding-right: 15px; padding-bottom: 15px; padding-left: 5px;*/

3.CSS的引入方式

3.1 内联样式(行内样式)

内联样式表：把css代码直接写在现有的HTML标签中

• 缺点：样式与结构冗余

• 优点：优先级较高

使用方法：

<div style="color:red">设置文字的颜色为红色</div>

实现效果：

注意：
样式的内容写在元素的开始标签里，并且css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用; 隔开。

多个css样式写在一起的效果如下面所示：

<div style="color:red;font-size:14px;font-weight: bold;">设置文字的颜色为红色</div>

实现效果：

3.2 内嵌样式

• 缺点：样式的复用率较低
• 优点：样式与结构分离

将样式表编写到head中的style标签中

<style type="text/css">  
  p{  
    color:red;  
    background-color:yellow;  
  }
</style>

使用内部样式表，进一步将表现和结构分离，可以同时为多个元素设置样式，方便后期的维护

注意点:

• style标签要写在head标签的开始标签和结束标签之间(也就是和title标签是兄弟关系)
• style标签中的type属性可以不用写, 默认就是type="text/css"
• 设置样式时必须按照固定的格式来设置 key: value;(其中:不能省略 , 分号大多数情况下也不能省略)

3.3 外部样式

优点：

• 样式与结构分离，解耦；
• 样式的复用率高（框架:例如bootstrap），
• 共用
• 定义好的css文件可以应用到多个页面中。

3.3.1 链接式：link标签（推荐）

将样式表编写到外部的CSS文件中，然后通过link标签将外部文件引入

<link rel="stylesheet" type="text/css" href="文件的路径"/>

将样式编写到外部样式表中，可以在不同的页面中使用同一个样式表，完全将表现和结构分离，方便后期的维护（推荐使用）

3.3.2 导入式：@import（不建议使用）

@import引入方式会先加载html，再加载css；当网络环境较差时，会出导致页面效果较差的现象，所以该方式不建议使用；

<style>
    /*要写在style标签的最前面，否则不会生效 或者直接在外部css文件中直接使用*/
  @import url('./style.css');
</style>

3.3.3 链接式link和导入式@import的区别

• 当HTML文件被加载时，link引入的文件会同时被加载，@import引用的文件则会等页面全部下载完毕之后再加载
• link 优先级高于 @import

3.4 引入方式的优先级

1. 就近原则：哪一种设置方式距离元素最近，谁的优先级更高；

2. 理论上：行内样式 > 内嵌样式 > 链接式link > 导入式@import

3. 实际上：内嵌、链接、导入在同一个文件头部，谁离相应的代码近，谁的优先级高（页面多种方式使用css样式引入）