CSS简介与选择器

CSS简介与选择器

1.CSS简介

• 什么是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规则集

选择器（Selector）HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 div 元素）。要给不同元素添加样式只需要更改选择器就行了。

声明（Declaration）一个单独的规则，如 background-color: blue; 用来指定添加样式元素的属性。

属性（Properties）改变 HTML 元素样式的途径。（本例中 background-color 就是

元素的属性。）CSS 中，由编写人员决定修改哪个属性以改变规则。

属性的值（Property value）在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值（我们除了 blue 之外还有很多属性值可以用于 background-color ）。

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

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的引入方式

- 内联样式(行内样式)

缺点：样式与结构冗余

优点：优先级较高

内联样式表就是把css代码直接写在现有的HTML标签中，具体的使用方法如下面所示：

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

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

<div style