1.CSS的概念
CSS：层叠表样式
页面中可能会有大量的元素（标签）需要去设置相同的样式，每个元素身上单独设置样式，造成大量的代码有冗余，降低开发效率。为了解决这个问题我们在页面中来批量设置样式，因此引出一门技术——CSS（批量来选中元素（标签），再设置样式）
div+CSS 方式定义网页结构，目前主流的网页开发方式
div：盒子模型，在使用table标签来布局页面时比较复杂且不灵活，引入盒子模型，就可以进行灵活的布局，可以满足页面多样的需求
2.常见的容器标签：div、p、span
< div>块级元素 一个元素占一行
< p> 块级元素 一个元素占一行
< span>行内元素
3.CSS的四种引入方式
方式一：在标签身上设置style属性来设置样式，只对当前标签生效
<div style="color: #DDD; background-color: #AAAFFF;">一个div</div>
方式二：通过< style>定义样式，可以在html的< head>标签中定义< style>标签，在其中为当前页面设定样式。
<head>
<style type="text/css">
div{color: red;
}
</style>
</head>
方式三：引入外部样式文件。可以在html的< head>标签中定义< link>标签，引入外部的css文件来修饰当前页面。
<link rel="stylesheet" href="1.css"></link>
方式四：可以通过@import url(xxx.css) 在css的内部引入一个css文件中定义的css样式片段。可以实现css代码的引入从而实现css代码的复用。
<head>
<style>
@import url(1.css);
</style>
</head>
4.CSS选择器：基本选择器、扩展选择器
基本选择器
1）id选择器：#id{}
#div1{
color:"red"
}
<div id="div1">一个div</div>
2）类选择器：.类名{}
.div{
color:#111AAA;
}
<div class=”div”>一个div</div>
3）标签选择器（通过html标签的名字来选择标签的选择器）：标签名{}
div｛
color:red;
｝
扩展选择器
1）后代元素选择器
选择父元素中的后代元素.
父元素选择器后代元素选择器{}
div span{}
选择div中所有的元素名span
2）子元素选择器
选择父元素中的子元素.
父元素选择器> 子元素的选择器{}
div>span{}
只能选择到儿子级别
3）相邻兄弟选择器
选择选择器选择到的元素的相邻的兄弟元素
选择器+兄弟元素名{}
div+span{}
只能选择下一个相邻的兄弟元素来设置样式
4）属性选择器
选择具有指定属性，或指定属性的值等与指定值的选择器.
选择器[属性名]{}选择div中有name属性的这些div
div[name]{}
选择器[属性名=‘属性值’]{}选择div中name属性值为"d"的div
div[name="d"]{}
5）分组选择器（多元素选择器）
将多个选择器的选择结果进行一个或 的操作.
选择器1,选择器2,…{}
#div，.class1，div+span{}
把多个选择器用，隔开，可以进行多样的选择
6）伪元素选择器
其实就在html中预先定义好的一些选择器。称为伪元素。是因为CSS的术语。
:link 未点击的状态
注：在不设置visited状态时active生效，否则会出现visited覆盖active效果
:visited 被点击过的状态
:hover 鼠标移动到元素之上但是仍然未点击的状态
:active 被鼠标点击着的状态
注意：
1.距离标签越近的CSS代码优先生效（就近原则）
2.当CSS代码设置的越具体越优先生效
1765
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
