CSS 语法也叫CSS规则，则选择器和一组声明组成。
选择器指向的HTML元素，包含元素名，元素的属性如class、ID等。
声明块包含由分号分隔的一个或多个声明。
每个声明包括CSS属性名称和一个值，以冒号隔开。
一个CSS声明以分号结束，声明块是用大括号包围。
上面的示例中，将标题1改为红色，字体大小为24个像素。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS语法</title> <style> h1{ color:red;font-size:24px; } </style></head><body><h1>利永贞网</h1><h2>学编程，上利永贞网</h2><p>study hard, improve every day</p></body></html> |
CSS 样式写在哪里？
有三种方式放置CSS样式
- 放在HTML开始标签内
- 放在HTML文件头部
- 放在外部
以上3个地方都可以放CSS。它们的优先顺序也是从上到下，HTML开始标签内的CSS优先级最高，其次是在HTML文件头部的CSS，外部的CSS和HTML文件头部的CSS优先级是一样的（若有不同，则是它们出现的顺序，后面出现的CSS会覆盖前面出现的CSS）。
HTML开始标签内的CSS示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>样式放在HTML标签内</title></head><body><h1 style="color:red;font-size:24px;">利永贞网</h1><h2>学编程，上利永贞网</h2><p>study hard, improve every day</p></body></html> |
在HTML开始标签添加属性style，属性值就是CSS声明，包括属性和值，多对属性/值之间使用分号隔开。
属性style和它的值使用=相连，值使用引号括起来。
Head标签内的CSS示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>样式放在heead标签内</title> <style> h1 {color:red;font-size:24px;} </style></head><body><h1>利永贞网</h1><h2>学编程，上利永贞网</h2><p>study hard, improve every day</p></body></html> |
将CSS规则写在<style>标签内。
<style>标签放在</head>结束标签前。
link外部CSS
将多数相同的CSS保存到一个.css后缀的文本文件里，可以节省大量工作。
将这.css后缀的文本引入到HTML文件，使用link标签。
|
1
|
<link rel="stylesheet" type="text/css" href="style.css"> |
href指向css新式的路径，通常使用相对路径。也可以使用绝对路径（现在流行的CDN）。
CDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。
使用CDN的link外部CSS示例：
|
1
|
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"> |
针对移动设备
|
1
|
<link rel="stylesheet" href="css/mobile-device.css" media="screen and (max-device- 720px)" type="text/css" /> |
@import外部CSS
@import 规则，用于从其他样式表导入样式规则。@import 规则写在xxx.css文件内。
@import 规则 可以将多个CSS文件合并到一个CSS文件内使用。
语法如下：
|
1
2
|
@import url;@import url list-of-media-queries; |
参数说明：
url 是一个表示要引入资源位置的 <string> 或者 <uri> 。 这个 URL 可以是绝对路径或者相对路径。 要注意的是这个 URL 不需要指明一个文件； 可以只指明包名，然后合适的文件会被自动选择。
list-of-media-queries 是一个逗号分隔的媒体查询条件列表，决定通过URL引入的CSS规则在什么条件下应用。如果浏览器不支持列表中的任何一条媒体查询条件，就不会引入URL指明的CSS文件。
示例：
|
1
2
3
4
5
6
|
@import url("fineprint.css") print;@import url("bluish.css") projection, tv;@import 'custom.css';@import "common.css" screen, projection;@import url('landscape.css') screen and (orientation:landscape); |