Early Web, HTML is a very limited language, this language does not care about appearance, it is only a small, simple tagging mechanism. With the advent of Mosaic web browser, the site began to emerge everywhere. Increased demand for changing the appearance of the page, thus increasing the like <font>and <big>the marker elements and the like. A few years later, most of the sites marked almost entirely of tables and font elements, and the content to be shown not to convey any real meaning, the reduced availability of the document, and not easy to maintain. So in 1995, W3C released a draft of CSS, trying to solve the problem of mixed structure and style. In 1996, W3C CSS1 officially launched in 1998, began to launch CSS2.2001年从CSS3, CSS this language is divided into separate modules, each separate grade, and contains only a small part; in 2011 began to design CSS4
This article will focus on the introduction of CSS styles, including between an external style sheet, style sheets, and internal row style three ways
Note: CSS syntax is very simple, but easily overlooked point is that a semicolon can not be omitted (except the last one style)
External style sheet
[Use] link marker
In the link tags and rel href attribute is required, type and property of media attribute can be omitted
<link rel="stylesheet" type="text/css" href="sheet1.css" media="all" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="sheet1.css">
<title>Document</title>
</head>
<body></body>
</html>
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
body{
background-color: red;
}
Note: stylesheet can not contain HTML markup, CSS and CSS rules only comment
/*若CSS文件中存在除了CSS样式和CSS注释的其他标记，则会导致在该标记后面的CSS样式将无法被识别*/
<style></style>
body{
background-color: red;
}
Only supports CSS comments / ** / written, does not support the wording //
[More style sheets]
A document may be associated with multiple style sheets, and if so, only use the rel is initially displays document the link labeled stylesheet
<link rel="stylesheet" href="sheet1.css" />
<link rel="stylesheet" href="sheet2.css" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="sheet1.css">
<link rel="stylesheet" href="sheet2.css">
<title>Document</title>
</head>
<body>
</body>
</html>
/*sheet1*/
body{
background-color: red;
}
/*sheet2*/
body{
height: 100px;
border: 10px solid black;
}
[Candidate] style sheets
Set the rel attribute alternate stylesheet can define a candidate for the style sheet only when the user selects this style sheet will be used to document performance. If the browser can use the candidate stylesheets, it uses the title attribute value of the link element to generate a candidate list of styles can be viewed in the menu bar -> select styles. (IE and firefox support)
Note: If a candidate is not set stylesheet title, then it will not appear in the candidate list of styles, it can not be cited
<link rel="stylesheet" type="text/css" href="sheet1.css" />
<link rel="alternate stylesheet" type="text/css" href="sheet2.css" title="sheet2"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="sheet1.css" />
<link rel="alternate stylesheet" type="text/css" href="sheet2.css" title="sheet2"/>
<title>Document</title>
</head>
<body>
</body>
</html>
/*sheet1*/
body{
background-color: red;
}
/*sheet2*/
body{
height: 100px;
border: 10px solid black;
}
Internal style sheet
[Use] the style element
Internal style sheets need to use
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body{
background-color: red;
}
</style>
<title>Document</title>
</head>
<body>
</body>
</html>
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
[More style tags]
The document may appear more style tags and style rules consistent with Cascading Style Rules
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body{
background-color: red;
}
</style>
<style>
body{
background-color: blue;
height: 100px;
border: 10px solid black;
}
</style>
<title>Document</title>
</head>
<body>
</body>
</html>
Usage @import directive]
与link类似，@import指令用于指示Web浏览器加载一个外部样式表，并在表现HTML文档时使用其样式。唯一的区别在于命令的具体语法和位置。@import指令常用于样式表需要使用另一个样式表中的样式的情况。
<style>
@import url(sheet2.css);
body{
background-color: red;
}
</style>
注意：@import必须出现在style元素中，且要放在其他CSS规则之前，否则将根本不起作用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/*将@import放置在CSS规则之后将不起使用*/
body{
background-color: red;
}
@import url(sheet2.css);
</style>
<title>Document</title>
</head>
<body>
</body>
</html>
【多个@import指令】
可以使用@import指令导入多个CSS样式表，且可以使用media来限制应用场景。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@import url(sheet1.css) all;
@import url(sheet2.css);
</style>
<title>Document</title>
</head>
<body>
</body>
</html>
行间样式
如果只是想为单个元素指定一些样式，可以使用HTML的style属性来设置一个行间样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body style="background-color: red; height: 100px; border: 10px solid black;" style="background-color: red;">
</body>
</html>
注意：行间样式若存在多个style属性，只能识别第一个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<!-- 只能识别第一个style属性的值，所以页面显示为红色-->
<body style="background-color: red; height: 100px; border: 10px solid black;" style="background-color: blue;">
</body>
</html>
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
点击：我们的前端学习圈
最后
关于CSS的优先级先后问题，与外部、内部、行间这三种引入CSS的方式关系不大，主要与重要性、特殊性和出现顺序有关。在重要性相等的情况下，行间样式的优先级最高，外部样式和内部样式无可比性。
注意：<style>标签和<link>标签可以写在<body>标签里面
