font-size: 文字大小
color： 顏色
solid： 边框线
text-align: 間距
center： 文字放在中間
<head> 网页头部
<title> 网页标题
<link> 引用
<style> 样式
<em> 强调斜体
<strong> 自己加粗
<span> 是一个区块标签，它类似div，class标签，定义一个小块元素，只不过这个标签签是没有语义的
<br/> 相当于回车
<hr/> 加分割线
<blockquote> 长引用
空格
<addreass> 斜体
<code> 代码为一行代码时
<pre> 代码为多行代码时
<q> 双引号
<ul><li> 没有前后顺序
<ol><li> 有序列表
<div> 逻辑部分
<div id="版块名称">…</div> 每一板块具有唯一性
<table> 表格的开始
<tbody>当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。
<tr> 表格的一行
<td> 表格一单元格
<th> 表格表头
<caption> 标题内容
text-shadow： 阴影 可以同时上多个颜色
-webkit-gradient(linear,10% 10%,100% 100%,color-stop(0.14,#35b550),color-stop(0.5,#8aca8c),color-stop(1,#2d85ca)) 颜色渐变功能
<table summary> 标题摘要
<body bgcolor="blue">(设置背景颜色）
<body background="……jpg">（设置背景图片）
div.class 寻找用于class德尔div
div .class 寻找div里面的class
<body background="……jpg" background-repeat:repeat-x：background-position：x轴 y轴(图片的位置)>
repeat-x:水平铺展
repeat-y：垂直平铺
repeat：水平垂直平铺
no-repeat：不平铺
<style type="text/css">
table tr td,th{border:1px solid #000;} 添加单元表格
</style>
table{
margin:0 auto; 让表格居中
}
ul{list-style:none;margin:0;padding:0;}
li{float:left;display:inline;margin-right:8px;}
<a href="" target_blank>文本</a>打开新窗口
<a href="" target_self>文本</a> 在本窗口打开
<a href="" target_parent>文本</a>父窗口
<a href="" target_top>文本</a> 整个浏览器窗口
邮箱地址： malito 例：<a href="mailto:yy@imooc.com">发送</a>
抄送地址：cc= 例：<a href="mailto:yy@imooc.com？cc=dsdsa@imooc.com">发送</a>
密件抄送 bcc= 例：<a href="mailto:yy@imooc.com？bcc=dsdsa@imooc.com">发送</a>
多个收件人、抄送、密件抄送人 ; 例<a href="mailto:yy@imooc.comp;ppdsdsa@imooc.com">发送</a>
邮件主题 snnject= 例：<a href="mailto:yy@imooc.com？subject=发送邮件">发送</a>
邮件内容 body= 例：<a href="mailto:yy@imooc.com？body=欢迎来到慕课网">发送</a>
<form>
<form method="post/get两种穿线方式" action="网址">
<label for="控件id名称">
<input type="text（显示）/password（密码）/submit（提交按钮）/radio(单选）/checked（多选）/reset（重置）/ button(默认按钮没有任何效果)/file（上传文件）
/email（邮箱）/url（网址）/number（数字）/number（滑块）/image（图片）"
name="名称"
maxlength="20":锁定text和password的最大字符，默认无限大
size="5"：默认宽度
value="显示当前文本"
disabled="disabled" 锁定
readonly="readonly" 只读 />
<input type="image（图片）" src=""/>
<input type="number（数字）" min="0"(允许的最小值) max="0"(允许的最大值) step="10"（规定合法数字间隔）/>
<input type="number（滑块）" min="0"(允许的最小值) max="0"(允许的最大值) step="10"（规定合法数字间隔）/>
<input type="radio（单选）/checkbox（hidden多选）" value="值" name="名称" onclick="contxt()"（点击事件）
checked="checked（默认选择）"/>
</label>
</form>
<textarea rows="行数" cols="列数">文本</textarea>
</form>
<select> 选项： <select size="5"(行数) multiple="multiple（按住ctrl可以多选）"。>
<option value="提交值"selected="selected（默认选择）"。>运动</option>
</select>
内联式的css
<style type="text/css">
p{
display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。
visibility:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。
word-spacing:50px： 单词间距；
letter-spacing:20px: 字母间距；
border-radius: 50px; 边界半径
overflow:hidden; 溢出隐藏；
display：inline-block： 内联块；
clear：both; 清除浮动
line-height:2em; 设置行间距（行高）
border:1px solid red; 添加边框样式
color:red; 设置文字颜色
background:pink; 上背景色
a{display:block;} 内联元素a转换为块状元素
border-radius:8px; 使边框变圆
line-height:40px; 行高
max-height:20px 设置元素的最大高度。
opacity （css3）透明度
vertical-align:middle： 垂直居中；
vertical-align： 垂直对齐；
white-space:pre 空白会被浏览器保留"
z-index:100 优先级（只在相对和绝对布局有用
nth-of -type() 同级数列选中
frameborder:1 1有边框 0无边框
background-repeat:repeat-x; 重复方式：x轴重复；no-repeat 不重复
background-position:3px center; 背景位置水平位置 垂直位置
font-size:20px; 设置文字字号
font-family:"微软雅黑"; 设置字体样式
font-weight:bold; 设置字体加粗
font-weight:normal; 设置字体变细
font-style:italic; 设置为斜体样式；
text-decoration:underline： 文字设置下划线；
text-decoration:none 删除下划线
text-decoration:line-through： 删除线；
text-indent:2em： 缩进；（注意：2em的意思就是文字的2倍大小。）
align——表示左右居中——left，center，right 控制位置
valign——控制上下居中——left，center，right
boeder:1px solid #000 下划线
在ul里面white-space: nowrap; 不遇到《br/>不会换行
no-repeat 不重复
transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate
ul li{list-style:none;
padding:0;
margin:0; }
a:hover img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8;}
filter 设置平台IE半透明效果样式，值1-100，值越小越透明，设置IE8以前的透明使用
opacity 设置IE半透明效果样式，值0.1-1，值越小越透明，设置IE8以后版本的透明使用
-moz-opacity 对非IE浏览器设置，比如火狐，语法与IE相同
none不使用项目符号
disc实心圆，默认值
circle空心圆
square实心方块
decimal阿拉伯数字
lower-roman小写罗马数字
upper-roman大写罗马数字
lower-alpha小写英文字母
upper-alpha大写英文字母
鼠标经过它时候的效果：
a:link {color: #FF0000} /* 未访问时的状态 */；
a:visited {color: #00FF00} /* 已访问过的状态 */；
a:hover {color: #FF00FF} /* 鼠标移动到链接上时的状态 */；
a:active {color: #0000FF} /* 鼠标按下去时的状态 */；
}
display属性值:
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为行内元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row 此元素会作为一个表格行显示（类似 <tr>）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column 此元素会作为一个单元格列显示（类似 <col>）
table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption 此元素会作为一个表格标题显示（类似 <caption>）
inherit 规定应该从父元素继承 display 属性的值。
</style>
内联式的css span style="color:red" 这里文字是红色。</p>
外部式的css <link href="aaa" rel="stylesheet" type="text/css" /> 新建一个文件 文件名需和href一样
标签选择器： p{color:red;}
类选择器： .a{color:red;} <span class="a"> stress为变量，前面要加英文句号（.） 可多次使用
ID选择器： #a{color:red;} <span id="a"> ID唯一性， 前面加# 具有唯一性
子选择器； p>span{color:red;} <p><span>aaa</span>saaa</p> 用于选择指定标签元素的第一代子元素。(即右边的值会变化)
后代选择器： p span{color:red;} <p><span>aaa</span>saaa</p> 用于选择指定标签元素下的后辈元素 （选取从左边到右边所有的值）
通用选择器： * {color:red;} 它的作用是匹配html中所有标签元素
伪类选择器： a:hover{color:red;} <a href="http://www.imooc.com"> 鼠标滑过的状态来设置字体颜色
分组选择器： p,h1{color:red;} 同时运用多个元素
权值规则：
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。
p{color:red!important;}!important具有最高值
<img src="http://…….jpg"
style="100px;height:100px;"margin-top:10px; margin-left:10px 或（position:absolute(绝对定位); left:100（左右）px; top（高）:100px;）/（控制图片大小和位置）>
三种定位方式position
absolute绝对定位:让它去哪就去哪
relative相对定位:人走了,但是心还在那里.
fixed固定定位: 不管水怎么流,船还是被栓在那里.在浏览器中的位置是固定的，不会因浏览器中的滚动条滚动而变化。
clip: rect(0px, 78px, 156px, 0px); 剪切定义用于其它定位上面 （左上右上右下左下）
多次动画
a{ 20px（%）; 宽
height：20px（%）：高
float:left; fudong
margin:（0px 0px 0px 0px ） 上右下左距离 在为顶块元素用auto即可居中
background：red 背景颜色
box-shadow:1px 1px 15px red; 盒子的阴影（宽 高 盒子本身阴影 颜色）
text-shadow; 文字的阴影（宽 高 文字本身阴影 颜色）
animation:a 5s; 动画多少秒完成
animation-iteration-count:infinite; 多次运行 }
@keyframes a 可以设置帧数
{0% {background:#fff; height:20px;} 初始
25% {background:#4285f4; height:60px;} 变长
50% {background:#079246; height:300px;} 变长
100% {background:#fff;height:20px;} 回到原来 帧数的变化}
一次动画
a{
display:inline-block;
20px;
height:20px;
text-align:center;
border-style（边框样式）常见样式有：dashed（虚线）| dotted（点线）|solid（实线）。
margin:2px;
box-shadow:1px 1px 8px;
border:4px solid #586;
border-radius:8px; 圆角
a:hover{
background-color:#990；
border:4px solid #586;
border-radius:8px;
transition: box-shadow 1s, background 1s；
}
盒模型
（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
padding 内编剧、
margin 外边距
width 内容宽度
border 边框
border-bottom:1px solid red;下
border-top:1px solid red; 上
border-right:1px solid red; 右
border-left:1px solid red; 左 边框
*{ margin:0; padding:0; }
em { font-style:normal; }
li { list-style:none; }
a { text-decoration:none; }
img { border:none; vertical-align:top; }
table { border-collapse:collapse; }
input,textarea { outline:none; }
textarea { resize:none; overflow:auto; }
body { font-size:12px; font-family:"微软雅黑"; }
CSS 规定的定位机制有三种，分别是标准文档流、浮动及绝对定位。
W3C标准：
1、结构化标准语言（HTML和XML）
2、表现标准语言（CSS）
3、行为标准化语言（DOM和ECMAScript）
倡导结构、样式、行为分离
CSS的三种定位机制：
1、标准文档流（Normal flow）
-- 从上到下，从左到右，输出文档内容；
-- 由块级元素和行级元素组成
块级元素：（1）从左到右撑满页面，独占一行；（2）触碰到页面边缘时，会自动换行；（3）常见的块级元素：div、ul、li、dl、dt、p...
行级元素：（1）能在同一行内显示；（2）不会改变HTML文档结构；（3）常见的行级元素：span、strong、img、input...
块级元素和行级元素都是盒子模型。
2、浮动（Floats）
3、绝对定位（Absolute positioning）
盒子3D模型分为五层
第一层border 第二层 content+padding 第三层 background-image 第四层 background-color 第五层 margin
盒子模型分为 边框 border 内边距 padding 外边距 margin 内容content。
margin的auto属性原理:(浏览器的宽度-外包含层的宽度)/2=外边距 时不能在使用浮动及定位
float属性三个值:left-左浮动<br>
right-右浮动<br>
none-不浮动
特点:元素会左移,右移,知道触碰到容器为止.但却仍会出于标准文档流中.只对下一个有用
清除浮动的常用方法：
1、clear属性——常用clear：both；clear：left；或者clear：right。
2、同时设置width：100%（或固定宽度）+overflow（移出属性）:hidden；（一般情况下对受到浮动影响的元素设置这些属性）；
空标签无意义(如<br />)，不建议使用此方法清除浮动。
自适应的布局
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css"
media="screen and (min- 400px) and (max-device- 600px)"
href="smallScreen.css" />
如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。
除了用html标签加载CSS文件，还可以在现有CSS文件中加载。
菜单
<html>
<ul>
<li class="main">菜单
<ul>
<li>子菜单</li>
<li>子菜单</li>
</ul>
</li>
<li class="main">菜单
<ul>
<li>子菜单</li>
<li>子菜单</li>
</ul>
</li>
<li class="main">菜单
<ul>
<li>子菜单</li>
<li>子菜单</li>
</ul>
</li>
</ul>