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