层叠样式表（级联样式表）：Cascading Style SheetSEO
CSS : 表现（美化图片）
字体，颜色，边距，高度，宽度，背景图片，网页浮动…
CSS 1.0
CSS 2.0 DIV（块）+ CSS, HTML与CSS结构分离的思想，网页变得简单，SEO
CSS 2.1 浮动，定位
CSS 3.0 圆角，阴影，动画…浏览器兼容性
可在HTML页面直接编写CSS：
<style> ...... </style>可产生一个link链接，单独一个页面编写CSS（更加规范）：
<link rel="stylesheet" href="...(CSS页面地址)">CSS的优势：
1.内容与结构分离
2.网页结构表现统一，可以实现复用
3.样式十分丰富
4.建议使用独立于HTML的CSS文件
5.利用SEO，容易被搜索引擎收录
作用：选择页面上的某一个或者某一类元素
1.标签选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> h1{ color: red; } p{ color: blue; } </style> </head> <body> <h1>学习Java</h1> <p>CSS</p> </body> </html>2.类选择器 class
class="…"
用“.”选中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .标题{ color: blue; } .LOL{ color: red; } </style> </head> <body> <h1 class="标题">学习Java</h1> <p class="LOL">CSS</p> </body> </html>3.id选择器
id="…"
用“#”选中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #标题{ color: blue; } #LOL{ color: red; } </style> </head> <body> <h1 id="标题">学习Java</h1> <p id="LOL">CSS</p> </body> </html>1.后代选择器：
某个元素后面所有与您选中的元素类型相同的元素都会被选中
body p{ color: red; }body后面所有p标签元素都会被选中
2.子选择器
某个元素后面仅一代与您选中的元素类型相同的元素都会被选中
body>p{ color: red; }跟在body后面一代的p标签会被选中。
假如body内有个列表，列表内又设置了p标签，那么这里的p标签将不会被选中。（这就是仅一代的含义）
3.弟弟选择器
某元素下一位您所选择类型的元素，且是同代的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #LOL+p{ color: red; } </style> </head> <body> <h1 id="标题">学习Java</h1> <p id="LOL">CSS</p> <p id="OL">CSS</p> </body> </html>会选中id为“OL”的p标签，且是同代的。
4.通用选择器
选中某元素后面“您所选择类型的同代的所有”元素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #LOL~p{ color: red; } </style> </head> <body> <h1 id="标题">学习Java</h1> <p id="LOL">CSS</p> <p id="OL">CSS</p> <p class="OL">CSS</p> <p class="OL">CSS</p> </body> </html>会选中id为“LOL”后面所有同一代的p标签元素。
1.选中所有带有“[]”内属性的元素：
a[id]{ background: yellow; }（选中了所有带有id属性的元素）
2.选中属性等于“[]”内标明的内容的元素：
a[id=wangwei]{ background: aqua; }(选中了id=wangwei的元素)
3.选中所有class属性包含"links"的元素
a[class*="links"]{ background: rebeccapurple; }（“*=”表示“包含”，而“=”表示“等于”）
4.选中所有以“http”开头的“href”属性的元素
a[href^=http]{ background: red; }5.选中所有以“uk”结尾的“href”属性的元素
a[href$=uk]{ background: red; } <span id="wangwei">简</span>
用id为“wangwei”的span标记“简”。
font-family: 楷体;
color: red;
font-size: 50px;
font-weight: bolder;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ font-family: 楷体; color: red; } h1{ font-size: 50px; } .xuanjie{ font-weight: bolder; } #wangwei{ color: aqua; } </style> </head> <body> <h1>故事<span id="wangwei">简</span>介</h1> <p class="xuanjie"> 平静安详的元泱境界 </p> <p> 在偏远的兽国窝窝乡 </p> </body> </html>color rgb rgba
文本居中：text-align = center
缩进两个字：text-indent: 2em
此行有5个字这么高（行内字符不会上下居中）：height: 5em
此行有5个字这么高（行内字符会上下居中）：line-height: 5em
text-decoration
vertical-align: middle
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> h1{ color: rgba(0,255,255,1); text-align: center; } p{ text-indent: 2em; /*background: red;*/ /*height: 5em;*/ line-height: 5em; text-decoration: overline red; } a{ text-decoration: none; } </style> </head> <body> <h1>故事简介</h1> <p><a href="">MMDD</a></p> <p> 平静安详的元泱境界 </p> <p> 在偏远的兽国窝窝乡 </p> </body> </html>1.a:hover{}
a:hover{ color: red; font-size: 2em; }鼠标悬停时字体将做出改变
2.a:active
a:active{ color: green; }鼠标按住时字体将做出改变
3.阴影
.asd{ text-shadow: red 10px 10px 3px; }字体会有阴影效果：颜色，向上，下偏移，清晰度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a{ text-decoration: none; color: black; } a:hover{ color: red; font-size: 2em; } a:active{ color: green; } .asd{ text-shadow: red 10px 10px 3px; } </style> </head> <body> <a href=""> <img src="../tupian/digeng.png" alt=""> </a> <p> <a href="">大卫·科波菲尔</a> </p> <p> <a href="">作者：许安杰的引路人</a> </p> <p class="asd"> 售价：99元 </p> </body>1.div划分模块
<div>...</div>CSS代码：
#nav{ width: 14em; background: darkgray; } .title{ font-size: 18px; font-weight: bold; text-indent: 1em; line-height: 30px; background: red; } ul li{ height: 30px; list-style: none; text-indent: 1em; } a{ text-decoration: none; font-size: 14px; color: black; } a:hover{ color: orange; text-decoration: underline; }HTML代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="xuexi.css"> </head> <body> <div id="nav"> <p class="title">全部商品分类</p> <ul class="JS_navCtn cate_menu"> <li> <a href="//shouji.jd.com/">手机</a> <a href="//wt.jd.com">运营商</a> <a href="//shuma.jd.com/">数码</a> </li> <li> <a href="//diannao.jd.com/">电脑</a> <a href="//bg.jd.com">办公</a> </li> <li> <a href="//channel.jd.com/home.html">家居</a> <a href="//channel.jd.com/furniture.html">家具</a> <a href="//jzjc.jd.com/">家装</a> <a href="//channel.jd.com/kitchenware.html">厨具</a> </li> <li> <a href="//channel.jd.com/1315-1342.html">男装</a> <a href="//channel.jd.com/1315-1343.html">女装</a> <a href="//phat.jd.com/10-156.html">童装</a> <a href="//channel.jd.com/1315-1345.html">内衣</a> </li> </ul> </div> </body> </html>（这星期时间有点匆忙，就只写到这里了。。。）
