CSS概述
css的概述
1. css 层叠样式表（cascading style sheets）
2. 样式的出现是为了解决内容和表现分离
3. 样式的出现极大的提高工作效率
4. 样式通常存储在外部样式表中
5. 多个样式表可以层叠为一（层叠样式表）
CSS 语法：
1.CSS规则由2个主要部分组成：1.选择器 2.声明 一条或者多条的声明
2. 每条声明由一个属性和一个值组成 属性就是我们说的样式属性 属性和属性值被冒号分开 后面由分号结束（注意和HTML的属性和属性值的写法不一样）
CSS 三大选择器：
1.标签选择器 2. class 类选择器 3. id选择器
1. 标签选择器：
例子：
p{
font-size:33px;
属性 ：属性值；一条声明
color:red; 两条声明
}
2. 类选择器：
有个关键字
例子：
<p class="aa">你好，我是你朋友</p>
记住用 . 号表示类选择器 .aa{
声明......
}
3. id选择器:(一个元素在一个页面最好只使用一次)
关键字 id
例子：
<p id="hhh">sfas</p>
记住用 # 号表示id选择器 #hhh{
声明......
}
选择器优先级：
标签选择器<类选择器<id选择器
CSS 三大引用方式:
1.行内样式
2.内嵌式
3.外部引用
1.行内样式：使用关键字style 属性来引入CSS样式
例如：
<p style="color:"20px;">sjlajlk</p>
行内样式 直接在HTML标签插入 style 这个属性 来设置样式
２.嵌入式
写在<head>
里面加入<style>
...里面书写CSSd样式
</style>
</head>
优点：方便在页面中修改
缺点：不利于多个页面代码共享与维修 对内容的表现和分离不够透彻
3.外部引用样式：
首先我的要一个CSS样式表
然后把编号写好的样式引用到我的HTML中来
HTML 引用外部样式拥有2种方式
1.链接式 2.导入式
1.链接式：<head>
<link herf="css文件路径" rel="使用外部样式表" type="文件类型"/>
</head>
2.导入式：<style>
@import url("css文件路径");
</style>
链接式和导入式的区别：
<link>标签属性XHTML @import 属于CSS2.1
使用链接式导入CSS文件 先加载到网页中 然后再进行编译
而使用导入式 是客户端先显示HTML的结构 再把CSS文件加载到网页中
@import 属于 CSS2.1特有的 对于不兼容2.1的浏览器来说是无效的
三大引用方式优先等级：
外部引用<内嵌式<行内样式
CSS原则：就近原则 谁离我近 就听谁的
下面还有四个选择器
1.通用选择器：用*符号代表所有的标签
语法：*{声明......}
2.交集选择器：由两个选择器构成，选中二者各ID选择器，选择器之间不能有空格自元素范围的交集，
第一个必须是标签选择器，第二个必须是类选择器或者ID选择器，选择器之间不能有空格，必须连续书写。
语法：<p id="ss">莫笑农家腊酒浑，丰年留客足鸡豚。</p>
<style type="text/css">
p#ss{声明}
</style>
3.并集选择器：由多个标签构成，但每个元素用逗号隔开。
例如：
p,h1,#ss,b...{声明.....}
4.后现代选择器：外面元素包含里面的元素，里面的元素就是外面元素的后代。
例如：
<p>丰年留<strong>客足</strong>鸡豚。</p>
<style>
p strong{声明......}
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
/*给所有li标签加样式*/
ul li{color:red; list-style:none;}
/*给ul的子标签li加样式*/
ul>li{color:orange;}
ul ol li>b{color:blue; font-weight:normal;}
/*给ul后面第一li标签加样式,给第二加样式，就再加li*/
ul+li{background-color:blue; width:300px;}
/*给ul后面所有的li加样式，其实就是给ul后面标签加样式*/
ul~li{background-color:purple; width:300px;}
</style>
</head>
<body>
<h2>CSS的 高级特性</h2>
<ul>
<li>竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。</li>
<li>回首向来萧瑟处，归去，也无风雨也无晴。</li>
<li>陌上花开，可缓缓归矣。</li>
<ol>
<li>物是人非事事休，欲语泪先流。</li>
<li><b>相顾无言，惟有泪千行。</b></li>
</ol>
</ul>
<li>风住尘香花已尽，日晚倦梳头。</li>
<li>闻说双溪春尚好，也拟泛轻舟，</li>
<li>十年生死两茫茫。不思量。自难忘。</li>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
/*CSS选择符种类*/
/*通配符*/
*{color:red;}
/*后现代选择器*/
h5 strong{font-size:16px;color:blue;}
/*交集选择器*/
p#oo{color:yellow;}
/*并集选择器*/
h1,h2,h3,h4,div,ul{color:purple;}
li{list-style:none;}
</style>
</head>
<body>
<strong>很久很久</strong>
<h5>陌上花开蝴蝶飞，<strong>很久很久</strong>江山犹似昔人非。</h5>
<b>遗民几度垂垂老，</b>
<h4 class="a4">游女长歌缓缓归。</h4>
<h3>三界</h3>
<h2>二介</h2>
<h1>犹教缓缓妾还家。</h1>
<p id="oo">
陌上山花无数开，路人争看翠辇来。
</p>
<div>若为留得堂堂在，</div>
<ul>
<li>生前富贵草头露</li>
<li>身后风流陌上花。</li>
<li>已作迟迟君去鲁，</li>
</ul>
</body>
</html>
<伪类>
<!DOCTYPE html>
<html>
<head>
<title>伪类</title>
<meta charset="utf-8"/>
<style>
ul{list-style-image:url("file:./雪花.png") }
ul li a{text-decoration:none; float:left; border:1px solid gray; line-height:30px;}
a:link{color:black;}
a:visited{color:black;}
a:active{color:red;font-size:20px;}
a:hover{background-color:blue;}
</style>
</head>
<!--
link 代表未被访问过
visited 已经访问过后
active 当用户激活时（就是当鼠标点击的时候）
hover 其鼠标悬停时
-->
<body>
<ul>
<li><a href="#">id选择器</a></li>
<li><a href="#">类选择器</a></li>
<li><a href="#">标签选择器</a></li>
<li><a href="#">伪类</a></li>
</ul>
</body>
</html>
