关于CSS(第一章-入门)

CSS（Casacding style Sheets）层叠样式表，用于修饰文档（可以是标记语言html，也可以是XML或者是SVN）的语言，可以将文档以更优雅的形式呈现给用户。

css语法

---

css声明

css语言的核心功能就是为特定的属性设定特点的值，css引擎通过计算出声明的每个属性来显示元素。css的属性和值都是大小写敏感的。（例如color属性变成COLOR系统便会识别不出）属性与属性值之间使用 “ ：” 隔开。例如：background color：red

css声明块

若多个css属性值写在一起，每个css声明通过一个分号隔开，最后一个css声明无需使用分号。使用{ }将多个声明括起来，这样就构成一个CSS声明块。

{
	background-color:red;
	background-style:none
}

css可读性

• 空白

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

  ---

• 注释

 /*这就是CSS的注释*/

---

• 速记写法

  类似于font,background,padding,border,margin这些都被称为速记属性。
  这些属性允许我们在一行中写多个属性值。速记属性可以节省时间，代码整洁。
  例如：
  padding:10px 15px 15px 15px; 等价于 padding-top:10px; padding-right:10px;padding-bottom:10px;padding-left:10px;
  (遵循上右下左的顺序设置）

---

css应用

如何将CSS作用于HTML？

浏览器将css规则应用到文档上，使css影响文档的显示。css规则由选择器和一系列的属性对组成，一系列的css规则就可以形成一个层叠样式表。

1. 内部style标签【内部样式表】
   将样式添加到head标签中的style标签里

<style></style>

2. 内联style属性【内联样式表】
   在元素中添加style属性

<div style="width:100px;height:100px;"></div>

3. 外部link导入【外部样式表】
   将样式单独抽离出来，写成一个css文件，在head标签中通过link标签导入

<link rel="stylesheet" href="">

4. @import导入
   将样式单独抽离出来，写成一个css文件，在style标签内通过@import导入路径

<style>
	@import './test.css';
</style>	

优先级：
行内样式 > 内联样式/外部引入 （就近原则）

---