В начале Web, HTML является весьма ограниченным языком, этот язык не заботится о внешнем виде , это всего лишь маленький, простой механизм мечения. С появлением веб - браузера Mosaic, сайт начал появляться везде. Увеличение спроса на изменение внешнего вида страницы, тем самым увеличивая как <font>и <big>элементы маркеров и тому подобное. Несколько лет спустя, большинство сайтов отмечено почти полностью из таблиц и шрифтов элементов, а содержание будет показано не передавать какое - либо реальное значение, уменьшенное наличие документа, а не просто поддерживать. Таким образом , в 1995 году W3C выпустил черновик CSS, пытаясь решить проблему смешанной структуры и стиля. В 1996 году W3C CSS1 официально запущен в 1998 году, стал запуск CSS2.2001年从CSS3, CSS этот язык делится на отдельные модули, каждый отдельный класс, и содержит лишь небольшую часть, а в 2011 начал дизайн CSS4
В данной статье основное внимание будет уделено внедрению стилей CSS, в том числе между внешней таблицы стилей, таблицы стилей и внутреннего стиля строки тремя способами
Примечание: Синтаксис CSS очень прост, но легко упустить из вида, что точка с запятой не может быть опущена (за исключением последнего одного стиля)
Внешний лист стиль
[Использовать] ссылку маркер
В требуется ссылка теги и отн HREF атрибута, тип и свойства атрибута медиа могут быть опущены
<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;
}
Примечание: таблица стилей не может содержать HTML-разметки, CSS и CSS правила только комментарий
/*若CSS文件中存在除了CSS样式和CSS注释的其他标记，则会导致在该标记后面的CSS样式将无法被识别*/
<style></style>
body{
background-color: red;
}
Только поддерживает CSS комментарии / ** / записи, не поддерживает формулировку //
[Другие таблицы стилей]
Документ может быть связан с несколькими таблицами стилей, и если да, то используйте только отн изначально отображает документ ссылку маркированы таблицы стилей
<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;
}
[Кандидаты] таблицы стилей
Установите атрибут отна альтернативный стилей может определить кандидат на таблицу стилей только тогда, когда пользователь выбирает этот стиль лист будет использоваться для выполнения документа. Если браузер может использовать таблицы стилей кандидатов, он использует значение атрибута заголовка элемента связи для формирования списка кандидатов стилей можно увидеть в строке меню -> выберите стили. (IE поддержки и светлячок)
Примечание: Если кандидат не установлен заголовок таблицы стилей, то он не будет отображаться в списке кандидатов стилей, он не может быть процитирован
<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;
}
Внутренний лист стиль
[Использование] элемент стиля
Внутренние таблицы стилей нужно использовать
<!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，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
[Другие теги стиля]
Документ может показаться несколько тегов стиля и стиля правил в соответствии с правилами каскадных Style
<!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>
Использование @import директиву]
与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>标签里面
