CSS 语法

CSS 语法也叫CSS规则，则选择器和一组声明组成。

选择器指向的HTML元素，包含元素名，元素的属性如class、ID等。

声明块包含由分号分隔的一个或多个声明。

每个声明包括CSS属性名称和一个值，以冒号隔开。

一个CSS声明以分号结束，声明块是用大括号包围。

上面的示例中，将标题1改为红色，字体大小为24个像素。

<!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示例：

<!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示例：

<!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>标签内。

link外部CSS

将多数相同的CSS保存到一个.css后缀的文本文件里，可以节省大量工作。

将这.css后缀的文本引入到HTML文件，使用link标签。

<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">`

针对移动设备

<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文件内使用。

语法如下：

@import url;
@import url list-of-media-queries;

参数说明：

url 是一个表示要引入资源位置的 <string> 或者 <uri> 。这个 URL 可以是绝对路径或者相对路径。要注意的是这个 URL 不需要指明一个文件；可以只指明包名，然后合适的文件会被自动选择。
list-of-media-queries 是一个逗号分隔的媒体查询条件列表，决定通过URL引入的CSS规则在什么条件下应用。如果浏览器不支持列表中的任何一条媒体查询条件，就不会引入URL指明的CSS文件。

示例：

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);