一，CSS的主要了解内容
CSS 语法由三部分构成：选择器、属性和值：
selector {property: value}
body {color: blue}选择器 (selector) 通常是你希望定义的 HTML 元素或标签，属性 (property) 是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）：
1.选择器
2.css常用属性介绍
3.div + css 重点
1.什么是CSS
层叠样式表（CSS）是描述标记语言页面格式的标准（或语言），CSS 使开发人员能够分离内容和可视元素，以实现更好的页面控制和灵活性 CSS 文件通常通过 HTML 文件中的链接附加到 HTML 文件。
2.学习 div + css 优点
a、能够使代码bai精简，使用div+css布局使代码很是精简
b、提升了网页访问速度，div+css布局较传统的Table布局比较，减少了许多代码，其浏览访问速度自然得以提升，从而提升了网站的用户体验度。
c、a有利于优化。采用div-css布局的网站对于搜索引擎很是友好，简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取b。
d、浏览器兼容性 。DIV+CSS更容易出现多种浏览器不兼容的问题，主要原因是不同的浏览器对web标准默认值不同。
e、需要注意的是，网页不喜欢一个页面有太多的css代码，否则同样会影响蜘蛛的爬行，影响搜索引擎的收录，所以采用外部调用的方式调用CSS是非常不错的方法。
f、若非必须太多花哨的网站，采用CSS布局，同样可以到达所想要的效果。如网站导航中的文字颜色变化、css下拉菜单等。
4.什么是选择器，为什么要学选择器
CSS选择器用于选择你想要的元素的样式的模式。
对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。
HTML页面中的元素就是通过CSS选择器进行控制的
5. 选择器
这里有个小分类
基本选择器 标签选择器 类选择器 Id选择器
复合选择器 后代选择器 并集选择器 全局选择器
这六种选择器使用情况比较多，后代选择器在大型
a. 类选择器 前面以”.”来标志
<style type="text/css">
.demoDiv{
color:#FF0000;
}
</style>
<div class="demoDiv">
<p class="demoDiv">.的位置是选中，然后设置属性与属性值
<div>,<p>中是定义class的位置
b. 标签选择器
决定哪些标签采用相应的CSS样式
<style type="text/css">
p{
color: blue;
}
</style>
<p class="test">齐天大圣</p>标签选择器的话 直接
<style type="text/css">
p{
color： red；
}
</style>
<p class="test">
齐天大圣
啦啦啦
</p>
使用标签名定位就行 eg： p{} span{}
c. Id选择器
根据元素ID来选择元素，具有唯一性，这意味着同一id在同一文档页面中只能出现一次
<style type="text/css">
#teste{
color: brown;
}
</style>
<div id = "teste">
啦啦啦
</div>
这里给三个基本选择器的一个运行情况，这里是整个代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
h3{
color: yellow;
}
.test{
color: green;
}
#teste{
color: brown;
}
</style>
</head>
<body>
<div id = "teste">
Id选择器
</div>
<p class="test">
类选择器
</p>
<h3 >
标签选择器
</h3>
</body>
</html>
根据不同选择器的选择一一表明了我们期待的颜色与选择标签
这里三个基本标签就免不了遇到优先级问题
你也可以一一测试 他们优先级情况 Id>类选择器>标签选择器>默认样式
默认样式就是黑白体的系统默认情况
d. 后代选择器
也称为包含选择器，用来选择特定元素或元素组的后代，将对父元素的选择放在前面，对子元素的选择放在后面，中间加一个空格分开。后代选择器中的元素不仅仅只能有两个，对于多层祖先后代关系，可以有多个空格加以分开，如id为a、b、c的三个元素，则后代选择器可以写成#a #b #c{}的形式，只要对祖先元素的选择在后代元素之前、中间以空格分开即可。
<style>
.father.child{
color:#0000CC;
}
</style>
<p class="father">
黑色
<label class="child">蓝色
<b>也是蓝色</b>
</label>
</p>e. 交集 ， 并集选择器
简单说就是令代码结构更加简洁，可以一起修改的属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>高级选择器</title>
<style>
/*交集选择器*/
/*既是P标签，类名称text的元素字体变为红色*/
p.text{
color: red;
}
/*并集选择器*/
/*让container下的所有元素内容为蓝色*/
#container p,span,em,strong{
color: blue;
}
</style>
</head>
<body>
<!--交集选择器-多个选择器包含的元素-->
<p>好好学习1</p>
<p class="text">好好学习2</p>
<p class="text">好好学习3</p>
<p>好好学习4</p>
<!--并集选择器-多个选择所有匹配的元素-->
<div id="container">
<p>好好学习1</p>
<span>好好学习2</span><br>
<em>好好学习3</em><br>
<strong>好好学习4</strong>
</div>
</body>
</html>
f . 全局选择器 把所有html表签的默认样式设置到初始样式
设置所有标签使用同一样式，用*表示。如：*{margin：0；padding：0}
通配符选择器 一般在开发中将其设置在public.css文件中 *{margin:0 0;} 一般用来重置样式
这里还有其他一些选择器，就不做具体介绍了
g. 子选择器
子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一个后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择
h. 伪类选择器
有时候还会需要用文档以外的其他条件来应用元素的样式，比如鼠标悬停等。这时候我们就需要用到伪类了
i. 相邻同胞选择器
我们可能还希望找到兄弟两个当中的一个，如一个标题h1元素后面紧跟了两个段落p元素，我们想定位第一个段落p元素，对它应用样式。我们就可以使用相邻同胞选择器
CSS
h1 + p {color:blue}
HTML
<h1>brother</h1>
<p>brother</p>当然选择器肯定不是只有这些，这些是使用情况比较广泛的几种，如果遇到其他情况可以去文档里面寻找，或者百度搜寻
6.style标签 与style属性 style属性值
正如上面css优点里面写的内部代码会加重搜索器的效率 ，所以我们更加提倡使用外部css代码
1.创建一个css文件，建立外部样式表
.css
#parent span,h4{
color: rgb(200,25,23);
}
#parent li{
color: #008000;
}
.testes{
color: yellow;
}这里是css里面具体情况，不要将 style 样式也写入那样会报错的哦
那现在的情况就是在html里面如何访问外部数据了
CSS引入到html中有以下三种方法：1- 内联、2-内部样式表、3-外部样式表
内联
<body style="background-color: gray">
在标签内style=" " 内部样式表
<style type="text/css">
p {color:red;} <!--内部样式表-->
</style>
用style标签，将要进行css控制的属性放在标签内 外部样式表 （两种）
<link rel="stylesheet" type="text/css" href="mystyle.css">
在head标签内，并且用link标签来引入你要加载的css文件 <style type="text/css">
@import url(wcss.css); /*这里是通过@import引用CSS的样式内容*/
</style> url就是href 的路径，两种引用外部样式表的情况
优先级：靠近优先 层叠情况 相当于一层层叠加，后运行的会将前面的覆盖掉，所以是靠近优先
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
