文章目录
- 一、css代码代码格式
-
- 1、内联格式（不推荐）
- 2、内部格式（不推荐）
- [3、外部格式 （推荐）](#3、外部格式 （推荐）)
- 二、css样式选择器
- 三、样式表的组合
-
- [1、Multiple Selectors](#1、Multiple Selectors)
- [2、Hierachy Selectors](#2、Hierachy Selectors)
一、css代码代码格式
1、内联格式（不推荐）
写在html文件中，没有单独提取出来，没有做到结构和样式的分离;
每一个标签元素都有自己的css格式,每个标签元素中都有撰写自己的style属性，不利于复用；
例子：
xml
<h1 style="color:red;">
文本内容
</h1>2、内部格式（不推荐）
仍是写在html文件中，结构和样式没有做到完全分离，但就内联格式来说，相对较好；
将写在标签中的style属性提取出来，单独作为标签，标签书写的位置是不固定的，在head标签和body标签中均可；
例子：
xml
<html>
<head>
<style>
.bod{
color:red;
}
</style>
</head>
<body>
</body>
</html>3、外部格式 （推荐）
单独编写css文件以存储样式，结构（html）与样式完全分离，利于样式的复用，不同的html文件可以指定同一个css文件来控制样式。
如果三种选择器混在一起使用，则很难分辨html文件中每个元素的样式，所以一般只使用类选择器。
例子：
style.css文件内容：
css
.box {
color:red;
}html文件内容：
xml
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>通过link标签的书写内容就做到了html文件和css文件的关联，之后在html中就可以使用css的样式
二、css样式选择器
使用外部格式书写css代码实例
1、类型选择器
标签名字+大括号{}，大括号内书写样式
css
h1{
color:red;
}2、类选择器（推荐）
先写一个点'.'，然后写上类名+大括号{}，大括号内书写样式内容
前文内部格式和外部格式的代码例子中的css样式选择器就是类选择器
css
.box{
color:green;
}3、id选择器
先写一个'#'，然后写上id名字+大括号{}，大括号中书写样式内容
css
#id{
color:green;
}样式会存在冲突的情况，所以存在样式选择器的优先级：id选择器>类选择器>类型选择器
xml
<h1 class="box",id="id">
</h1>例如在这里，存在三种不同的样式选择器：类型选择器、类选择器、id选择器，样式就会优先选中id选择器，因为id选择器优先级最高；缺少id选择器，只使用了类选择器和类型选择器，则就会优先选中类选择器。
三、样式表的组合
前文提到的三种样式表的组合
1、Multiple Selectors
例子：
css
h1.container{
color:red;
}标签必须同时满足两个选择器的选择，既是标签h1，其类名又要是container
2、Hierachy Selectors
例子：
css
h1 .container{
color:red;
}（标签选择器和类选择器中有一个空格）
在h1标签中 的有个标签的类名是类选择器指定的名字，则修改这个标签的样式
外层是类型选择器，内层是类选择器
至此，结束。