1.各种选择器
相同样式下，4等级最高：
1浏览器缺省设置
2外部样式表（link rel=""）
3内部样式表（位于 <head> 标签内部的style{}）
4内联样式（在 HTML 元素内部，在内部的sytle=""）
注意：在对input做内部样式表时，发现内部样式表优先级比内联样式高！！！（还没解决）
font-family: Verdana, sans-serif; //在定义字体样式时，在后面添加sans-serif保证用户浏览是无法提供verdana字体，则使用默认字体。
派生选择器,例：
li strong {
font-style: italic;
font-weight: normal;
}
//表示如果字体同时满足在列表li中，又使用了strong元素，则使用上述样式。
//<li>我是正常的。<strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong>我是正常的。</li>
id和class区别
one page only have one same id，but one page can have too much smae class 。
id选择器（对应#声明）
被用于派生选择器
#sidebar p { //也有这种写法 p#sidebar{
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
//应用于id=“sidebar”的div或表格单元中，对内部的元素p【全部】进行修饰
#sidebar {
border: 1px dotted #000;
padding: 10px;
}
//对div等直接使用。
类选择器（class，对应.声明）
.center {text-align: center}
被用于派生服务器
.fancy td {
color: #f60;
background: #666;
}
//应用于class=“fancy”的div或表格单元中，对内部的元素td【全部】进行修饰
td.fancy {
color: #f60;
background: #666;
}
//应用于class=“fancy”的【单个】td中，其他元素用了无效。
css属性选择器
<!DOCTYPE html>
<html>
<head>
<title>CSS属性选择器</title>
<meta charset="utf-8">
<style type="text/css"> [title]{/*大众设定*/ color:red; } [title="eee"]{/*单值设定*/ color: blue; } [title~=ddd]{/*多值设定*/ color: black; } input[type="text"]{ width: 40px;/*内部样式表优先级竟然比内联样式高*/ background-color:yellow; } [lang|=en]{/*开头设定*/ color: green; } </style>
</head>
<body>
<p title="redcolor">title是红色字</p>
<p title="eee">title是红色字,但值是eee的是蓝色的</p>
<p title="ddd b">title是红色字,但值是ddd+空格+其他字符的是黑色的</p>
<p lang="en-us">以en开头+横杠+其他字符的都是绿色</p>
<form>
<input type="text" name="aab" value="什么鬼" size="30" /><!-- size是字符 -->
</form>
</body>
</html>2.ccs背景样式
背景色：background-color：red;
背景图像：background-image:url(/i/xxx.jpg); （默认是none表示没放任何图像。）
背景重复：background-repeat:repeat-y; (本行需要结合背景图像使用。还有repeat-x横铺，repeat-xy全铺，no-repeat不重复)
背景位置：background-position:center; (还有top,bottom,right,left,top left,top right，buttom left,buttom right)
背景位置-百分比：background-posion:50% 50%; (原点(0%,0%)在视窗左上角)
背景位置-长度值（像素）:background-posion:50px 100px; (原点(0px,0px)在视窗左上角)
背景不随下来滚动：background-attachment:fixed
背景有颜色又在中间插入图片(类似声明)：background：red url(/i/xxx.jpg) no-repeat fixed center;
3.css文本样式
文本颜色：color：red；
缩进文本：text-indent:5em; (正值是向右缩进，可以是负值，em是字体相对长度)
缩进文本-百分比：text-indent:20% （如果div的宽度是500x，即100px）
缩进文本-继承：
div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
<div id="outer">
<div id="inner">some text. some text. some text. //根据500px*10缩进50px
<p>this is a paragragh.</p>
</div>
</div
水平对齐：text-align:center; (还有left，right，justify两端对齐) (<center>会讲整个元素居中，text-align只是文本。)
单词间隔：word-spacing:30px; (默认是normal，正值增大左右间隔，负值减少)
字母间隔：letter-spacing:30px; (默认是normal，正值增大左右间隔，负值减少间距)
行高：line-height：150% （50px像素,2数值，）
字符转换：text-transform:uppercase; (uppercase大写，lowercase小写，capitalize首字母大写，none默认的无)
文本装饰: text-decoration:underline; (none默认（链接除外），underline下划线，overline上划线，line-through贯穿文字，blink闪烁)
忽略空白符: white-space:normal; （会合并所有的空白符（空格），并忽略换行符，正常情况已经是这样）
防止空白符：white-space:nowrap; （防止元素中的文本换行，除非使用了一个 br 元素）
保留空白符:white-space:pre; (保留空白符（空格）和换行符)（pre-wrap还允许自动换行，pre-line保留自动换行，换行符，但合并空白符）
文本方向；direction:ltr; (从左往右，rtl从右往左。开启条件：unicode-bidi属性设置为embed或bidi-override才会应用direction属性)
4.CSS字体样式
字体类型：font-family:Georigia,serif; (Georigia是规定字体，serif是通用字体，如果用户没有Georigia字体，会用serif代替，字体有空格#&的，用单引号括住)
字体倾斜：font-style:italic; (斜体显示，oblique倾斜显示，normal正常显示)
字体变形：font-variant:small-caps; (小型大写字母，另一种是normal)
字体size：font-size:60px; (1em=16px;建议使用默认h 和p)
字体size（兼容所有浏览器）：(如果没有body中设置百分比，在ie中3.75em也可能与其他浏览器大小不一样)
body{font-size:100%;}
h2{font-size:3.75em;}
字体粗细:font-weight:bold; (或900)
字体样式结合：font:italic bold 12px/30px arial.sans-serif; (不知道为啥，在ie中，没有12px/30px那项，字体的italic无效)
5.CSS链接样式
不同状态下的链接-颜色：
//以下4个顺序不能变
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */
不同状态下的链接-下横线：text-decoration:underline; (值none表示无)
不同状态下的链接-背景颜色：background-color:red;
不同状态下的链接-字体大小: font-size:150%;
不同状态下的链接-字体类型:text-family:'微软雅黑';
6.CSS列表样式
列表标志：ul{list-style-type:square;} (实心方，disc实心圆，circle空心圆，none无；；；有序列表ol：decimal数字,lower-roman罗马i，upper-roman罗马I，lower-alpha小写字母,upper-alpha大写字母)
列表图像: ul li{list-style-image:url(xxx.jpg);}
列表标志位置:list-style-position:inside; （默认outside，如果在ul中设置了padding=0，）
列表样式结合: li{list-style:url(xxx.jpg) square inside;}
7.CSS表格样式
边框：table,td,th{border:1px solid blue; }
单一边框：table{border-collapse:collapse; } （折叠，separate默认分开，不懂看紧跟下图）
宽高:width:100%;height:50px;
内文本水平对齐：text-align:right;
内文本垂直对齐：vertical-align:bottom;
内边距：padding:15px;
外边距：margin：15px;
水平垂直边距：border-spacing：10px 50px; （水平边距，垂直边距。前提是border-collapse:separate;）
表格标题位置:caption{caption-side:bottom;}
隐藏空单元格上的边框和背景：empty-cells:hide; （默认show）
固定死边框：table-layout:fixed; （默认automatic）
8.CSS轮廓样式
元素轮廓(用于div,p等在border外再添加一层边框)
outline:#00ff00 thick dotted;
//样式风格
p.dotted {outline-style: dotted} 短虚线
p.dashed {outline-style: dashed} 长虚线
p.solid {outline-style: solid} 实线
p.double {outline-style: double} 薄实线
p.groove {outline-style: groove}
p.ridge {outline-style: ridge}
p.inset {outline-style: inset}
p.outset {outline-style: outset}
//宽度
outline-width:thin; （thick，3px）
//颜色
outline-color:red;
9.CSS边距样式
内边距：
对全部方向：padding：2cm；
对上下和左右两个方向:padding：1cm 2.5cm； （上右，值复制后，呈现是1cm，2.5cm，1cm，2.5cm）
对上右下左4个方向分别：padding：1cm 20% 2em 2cm； （上右下左）
单独对其中一个方向：padding-left：2cm；
边框：
线条颜色：border-color: blue rgb(25%,35%,45%) #909090 red; （如果没设置颜色，边框颜色就是父级文本的颜色。单边是border-top-color：）
线条类型：p.aside {border-style: solid dotted dashed double;} （上右下左顺序，实线，点线，虚线，双实线，单边是border-top-style：）
线条宽度：border-width：5px； （也有4个方向设置法，前提border不等于none，单边是border-top-width：）
注意：如果边框线条类型设置为none（默认值），线条长度就没意义且不存在了。图片按钮：a:link img {border-style: outset;} （好像有10仲）
有宽度无颜色边框：border-color：transparent;
样式结合：border:3px soild red;
外边距：
设置：合内边距设置方法相同。
注意：Netscape 和 IE 对 body 标签定义的默认边距（margin）值是 8px。而 Opera 不是这样。相反地，Opera 将内部填充（padding）的默认值定义为 8px，因此如果希望对整个网站的边缘部分进行调整，并将之正确显示于 Opera 中，那么必须对 body 的 padding 进行自定义。
10.外边框合并
外边距合并：只有普通文档流中块框（p）的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
11.定位
相对定位：
position:relative;
left:-20px; (相对正常情况向左偏移20px，正值则向右)
绝对定位：
//会遮挡正常元素（h，p）
position:absolute;
left:100px; （只设置left属性下，会根据代码放置位置而产生top边距）
top:150px;
固定定位：
//不随页面下拉而移动
position:fixed;
left:5px;
top:5px;
滚动条机制：
div.a{
overflow:scroll; （无论内容是否溢出都添加滚动条，hidden隐藏溢出内容，auto自动判断是否添加滚动条）
}
设置元素形状：
img.x{
position:absolute;
clip:rect(0px 100px 150px 10px)
//图片左上角为原点（0.0），rect（上边界相对原点x轴的距离，右边界相对原点y轴的距离，下边界相对原点x轴的距离，左边界相对原点y轴距离）
}
图片在文本中的位置：
img.top {vertical-align:text-top} （图片上边界对齐当行文本顶部）
img.bottom {vertical-align:text-bottom} （图片下边界对齐当行文本底部）
图片置于文本之下：
img.x{
z-index:-1 (默认是0,更高级是1)
}
浮动：
2.无表格页面：
<!DOCTYPE html>
<html>
<head>
<title>无表格页面</title>
<meta charset="utf-8">
<style type="text/css">
div.container{
width: 100%;
margin:0px;
border: 1px soild gray;
}
div.header,div.footer{
padding: 0.5em;
color:white;
background-color: gray;
clear: left;
}
h1.header{
padding: 0;
margin: 0;
}
div.left{
float: left;
width: 160px;
margin:0;
padding: 1em;
}
div.content{
margin-left: 190px;
border-left: 1px solid gray;
padding: 1em;
}
</style>
</head>
<body>
<div class="container">
<div class="header"><h1 class="header">标题</h1></div>
<div class="left"><p>这是侧栏这是侧栏这是侧栏这是侧栏这是侧栏这是侧栏这是侧栏这是侧栏这是侧栏这是侧栏这是侧栏这是侧栏这是侧栏这是侧栏</p></div>
<div class="content">
<h2>这是内容栏</h2>
<p>这是内容栏的段落这是内容栏的段落这是内容栏的段落这是内容栏的段落这是内容栏的段落这是内容栏的段落这是</p>
</div>
<div class="footer"><p>Copyright 2017 by HJC design</p><p>因为浮动元素（添加了float属性的）脱离文档流，而class=container的div内部有文档流（如p，h等）才会占用空间显示样式，因此如果div中只有浮动元素的话，可以添加待用clear属性的空的div在结尾来产生文档流</p></div>
</div>
</body>
</html>结果：
12.选择器
多类选择器
.important{color:red;}
.warn{font-style:Italic;}
.important.warn(background-color:gary;)
<p class="important warn">aaa</p>
//段落p同时满足color：red；font-style=Italic；和background-color=gray；3个样式。
属性选择器
//对于带有alt属性的图片应用样式
img[alt]{color:red;}
//对于带有href属性且其值中包含www.zhilaiwu.com都应用样式
a[href=*"www.zhilaiwu.com/news"]{color:red;}
//^=匹配以指定值开头，$=匹配以指定值结尾，|=以指定值开头（比如img）和包含这种形式(img-1),(img-2)。
后代选择器（标志：空格）
//属性只要在容器class为sidebar的div里面即可
div.sidebar a:link {color:white;}
子元素选择器（标志：>）
//属性必须紧跟容器下一级，不能下两级（容器中容器的容器）
h1>strong{color:red;}
//<h1>aa<strong>aaa</strong></h1> 这是可以的
//<h1>aa<em><strong>aaa</strong></em></h1> 这是不可以的
相邻兄弟选择器（标志：+）
//有同一个父类，h1和p是相邻的。p应用样式
h1+p{color:red;}
//子元素选择器和相邻兄弟选择器结合使用
//body下的table中，有相邻的h1和p，p应用样式
body>table h1+p{color:red;}
13.伪类和伪元素
伪类(表示：:)
input:focus{} 单鼠标点击输入框之后，该输入框应用样式
p:first-child{} 第一次出现段落p
*:lang{} 带有lang属性的*元素
a:active{} 鼠标正在点击的链接
a:hover{} 当鼠标在链接上
a:link{} 未被访问的链接
a:visited{} 已被访问的链接
伪元素(表示：:)
p.article:first-line{} 对class=article的p元素中第一行应用样式
p:first-letter{} 文本首字母，优先级高于line
h1:before{content:url(/i/xxx.jpg)} 在元素h1前插入一张图片
*:after{} 在元素*后插入
14.元素对齐
margin:1px auto; //居中对齐，确保左右方向是auto，需htm5文档声明
.x{ //绝对定位方法（靠右），必须html5文档声明，否则i8前版本会为滚条留17px边距
position:absolute;
right:0px;
width:300px;
}
float:right; //浮动靠右，必须html5文档声明，否则i8前版本会为滚条留17px边距
15.尺寸设置
图片像素设大小：img.big{height:160px;} （会同时改变宽和高，单独weight也会同时改变宽高，50%百分比,auto正常）
设置最大高度：max-height:10px; (min-height最小高度,可用百分比，)
设置最大宽度：max-weight:300px; (min-weight最小宽度,可用百分比，)
行高: line-height:90%; (可使用像素，可使用数值1.5(倍))
16.元素隐藏
display:inline; (变成内联元素（也称为行内元素），如<img，<a等变成div等)
display:none; （不会显示在视窗里）
display:block; (变成块状元素，比如将行内元素<span>变成块状)
visibility:visible; （元素可见）
visibility:hidden; (元素不可见)
tr.coll{visibility:collapse;} 删除class=coll的tr整行，也可用于td整列。
17.鼠标指针变化
<span style="cursor:auto; ">Auto</span> 键盘输入标志,鼠标指针变化
Crosshair 大十字
Default 不变
Pointer 手指
Move 移动符号
e-resize 左右移动符号 n-resize
ne-resize 右上移动符号 sw-resize
nw-resize 左上移动符号 se-resize
n-resize 上下移动符号 sresize
text 键盘输入标志
wait 等待标志
help 问号标志
18.导航（类似苹果官网，但放大页面没有响应式效果）
<!DOCTYPE html>
<html>
<head>
<title>导航栏设置</title>
<meta charset="utf-8">
<style type="text/css">
ul{
list-style-type: none; /*取消列表标志*/
margin:0px; /*取消框原规定的外边界*/
margin-left:25%;
padding:0px; /*取消框原规定的内边界*/
padding-bottom: 50px;
width: 50%;
}
a{
/*链接a默认是行内元素，li默认是块元素*/
display: block; /*用于设置宽度，行内元素无法设置宽度*/
width: 170px; /*每块170px宽*/
float: left; /*开启浮动*/
color: white; /*字体颜色白色*/
font-size: 1.5em; /*字体1.5倍于默认字体*/
text-decoration:none; /*取消下横杠*/
text-align: center; /*字体居中*/
padding:10px; /*扩大内边距*/
}
a:hover{
background-color: red; /*当鼠标在链接上时背景变红色*/
}
div.nav{ /*之后直接用<nav>代替div*/
background-color: purple;
opacity: 0.6; /*透明60%*/
position: fixed; /*固定定位*/
top: 0px;
left:0px;
width:100%;
}
</style>
</head>
<body style="background: url(test.jpg);">
<div class="nav">
<ul>
<li><a href="#Home">首页</a></li>
<li><a href="#AboutUs">关于我们</a></li>
<li><a href="#News">新闻</a></li>
<li><a href="#Cooperation">合作加盟</a></li>
<li><a href="#OnlineShop">在线商城</a></li>
</ul>
</div>
<p>为了展示下拉效果</p><p>为了展示下拉效果</p><p>为了展示下拉效果</p><p>为了展示下拉效果</p><p>为了展示下拉效果</p><p>为了展示下拉效果</p><p>为了展示下拉效果</p><p>为了展示下拉效果</p><p>为了展示下拉效果</p><p>为了展示下拉效果</p><p>为了展示下拉效果</p><p>为了展示下拉效果</p><p>为了展示下拉效果</p><p>为了展示下拉效果</p><p>为了展示下拉效果</p><p>为了展示下拉效果</p><p>为了展示下拉效果</p><p>为了展示下拉效果</p><p>为了展示下拉效果</p><p>为了展示下拉效果</p><p>为了展示下拉效果</p><p>为了展示下拉效果</p><p>为了展示下拉效果</p><p>为了展示下拉效果</p><p>为了展示下拉效果</p><p>为了展示下拉效果</p><p>为了展示下拉效果</p><p>为了展示下拉效果</p><p>为了展示下拉效果</p><p>为了展示下拉效果</p><p>为了展示下拉效果</p><p>为了展示下拉效果</p><p>为了展示下拉效果</p><p>为了展示下拉效果</p>
</body>
</html>结果：
19.图片库
<!DOCTYPE html>
<html>
<head>
<title>图片库</title>
<meta charset="utf-8">
<style type="text/css">
div.img{
margin:3px;
border:1px solid #bebebe;
height:auto; /*这个div的宽高会根据内容的大小而变化*/
width: auto;
float: left;
text-align: center;
}
div.img img{
display: inline;
margin: 3px;
border: 1px solid #bebebe;
}
div.img a:hover img{
border:1px solid #333333;
}
div.desc{
text-align: center;
font-weight: normal;
font-size: 12px;
margin: 10px 5px;
}
</style>
</head>
<body>
<div class="img">
<a href="#" >
<img src="test.jpg" alt="test" width="200" height="150">
</a>
<div class="desc">什么鬼</div>
</div>
<div class="img">
<a href="#" >
<img src="向日葵.png" alt="xiangrikui" width="200" height="150">
</a>
<div class="desc">向日葵</div>
</div>
<div class="img">
<a href="#" >
<img src="捕获.png" alt="buhuo" width="200" height="150">
</a>
<div class="desc">捕获</div>
</div>
</body>
</html>结果：
