HTML+CSS
1.HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
2.CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化、或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
3.JavaScript使用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。
4.<h1></h1>是标题标签，<p></p>是段落标签。
5.<img src=http://img.mukewang.com/52b4113500018cf102000200.jpg">这是添加图片。
6.一个网页的代码的基本格式是：
<html>
<head> </head>
<title>……</title>在标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中
<script>……</script>
<style>……</style>
<link>
<meta>
<body> </body>网页上要展示出来的内容要放在body标签中
<h1>
<p></p>文章的段落标签。每一段落首尾都应有一对p标签
<a>
<img>
</html>
7.代码的注释帮助程序员标注代码的用途。
<!--注释文字-->
8.<hx>标签
标题标签一共有六个。h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且重要性递减。
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
h1标签字号最大并依次递减。
9.<em>表示强调用斜体表示。
<strong>表示更强烈的强调，用粗体表示。
<em>需要强调的文本</em>
<strong>需要强调的文本</strong>
10.使用span 标签为文字设置单独样式
例子：将美国梦设置成蓝色。
<span>美国梦</span>
span{
color:blue;
}
11.<q>标签，短文本引用
<q>庄生晓梦迷蝴蝶，望帝春心托杜鹃。</q>
效果：“庄生晓梦迷蝴蝶，望帝春心托杜鹃。”
12.<blockquote>标签，长文本引用
<bolckquote>引用文本</blockquote>
浏览器对<blockquote>标签的解析是缩进样式。
13.使用<br>标签分行显示文本
<br>作用是换行。也可以写成是<br/>。这是单独使用的。不是成对使用的。
14.为网页中添加一些空格。使用
表示一个空格，若使用n个，则需写n个 注意后面的分号。
15.<hr/>用于添加分隔的横线。单独出现。
16.<address>……</address>为网页加入地址信息，在浏览器中默认显示为斜体。
17.在网页中显示一些计算机专业的编程代码，当代码为一行 代码时，可以使用<code>标签。<code>代码语言</code>
18.使用<pre>标签为网页加入大段代码。<pre>大段代码</pre>在浏览器中显示时，会保留源代码中的空格和换行。
19.使用ul，添加新闻信息列表。
<ul>
<li>信息</li>
<li>信息</li>
</ul>
ul-li在网页显示默认样式一般为：每项li前都自带一个圆点。
20.使用ol,添加图书销售排行榜。
<ol>
<li>信息</li>
<li>信息</li>
</ol>
ol在网页中显示的默认样式一般为：每项li前都自带一个序号，序号默认从1开始。
21.div在排版中的作用
在网页制作过程中，可以把一些独立的逻辑部分划分出来，放在一个div标签中，这个div标签的作用就相当于一个容器。逻辑部分就是页面上相互关联的一组元素。如网页中的独立的栏目板块，就是一个典型的逻辑部分。
22.给div命名，是逻辑更加清晰。
<div id=”hotList”>……</div>
23.<table>标签，认识网页上的表格
创建表格的四个元素table,tbody,tr,th,td
<table></table>整个表格以<table>标记开始，以</table>标记结束。
<tbody></tbody>当表格内容非常多时，表格会下载一点就显示一点，但如果加上tbody就要等表格内容全部下载完才会显示。
<tr></tr>表格的一行，所以有几对tr就有几行。
<td></td>表格的一个单元格，一行中包含几个td就说明有几列。
<th></th>表格的头部的一个单元格，表格表头。
Table表格没有添加css样式之前，在浏览器中显示是没有表格线的。
表头，也就是th标签中的文本默认为粗体并且居中显示。
24.用css样式，为表格加入边框。在head中加入。
<style type=”text/css”>
Table tr td,th{border:1px solid #000；}
</style>
25.caption标签，为表格添加标题和摘要
<table summary=”这个表格描述了怡安街小学三年级，从一班到三班所有学生的数学成绩”></table>
<caption>怡安街小学三年级数学成绩表</caption>
<tr>
<th></th>……
摘要的内容是不会在浏览器中显示出来的，他的作用是增加表格的可读性（语义化），是搜索引擎更好的读懂表格内容。
26.使用<a>标签，连接到另一个页面。
例如：前端面试心法（鼠标滑过“前端面试心法”显示“点我”链接到页面“http://www.imooc.com/code/315”）
<a href=”http://www.imooc.com/code/315” title=”点我”>
有超链接的文本
</a>
若无链接，则使用#；只要为文本加入<a>标签，文字的颜色就自动变成蓝色，被点击过的文本颜色为紫色。
27.在新建浏览器窗口打开链接。
<a>标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开。
<a href=”http://www.imooc.com/code/316” target=”_blank”>
有超链接的文本
</a>
target前一定要加空格
_blank 在新的浏览器界面中打开
_top 在当前窗体打开链接，并替换当前的整个窗体
28.使用mailto在网页中链接Email地址
使用mailto能让访问者便捷向网站管理者发送电子邮件。
邮箱地址mailto:浏览器会自动调用默认的客户端电子邮件程序，并在收件人框中自动填上收件人的地址
抄送地址：cc=在收件人后用cc=,可以填写抄送地址
密件抄送地址：bcc=在收件人地址后用bcc=地址，可以填上密件抄送地址
对各收件人、抄送、密件抄送人；用分号隔开多个收件人的地址，可以实现发送给多个收件人功能
邮件主题：subject =用subject =添加邮件主题
邮件内容：body=用body=添加邮件的内容
如果mailto后面同时有多个参数的话，第一个参数必须以?开头后面的参数每一个都以&分隔
例子：
<a href=”mailto:yy@imooc.com”?subject=”观看了不起的盖比茨有感”&body=”你好，对此，我有些看法”>发送</a>发送电子邮件给我
29.认识<img>标签，为网页插入图片。
<img src=”图片地址” alt=”下载失败时替换的文本” title=”提示文本”>
alt:制定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
title提供图像可见时对图像的描述（鼠标滑过图片时显示的文本）；
30.使用表单标签，与用户互动。网站怎样与用户进行交互？答案是是HTML表单（form）表单是可以把浏览者输入的数据传送到服务器端，这样服务器程序就可以处理表单传过来的数据。
<form method=”传送方式” action=”服务器文件”>
<form>是成对出现的。
action浏览器输入的数据被传送到的地方，比如一个PHP页面
method数据传送的方式
例子：
<form method=”post” action=”save.php”>
<label for=”username”> 用户名：</label>
<input type=”text” name=”username” id=”username” value=””/>
<label for=”pass”>密码:</label>
<input type=”password” name=”pass” id=”pass” value=””/>
<input type=”submit” value=”确定” name=”submit”/>
<input type=”reset” value=”重置” name=”reset” />
</form>
设置登录名和密码界面
31.当用户要在表单中键入字母、数字内容时，就会用到人本输入框。文本框也可以转换为密码输入框。
<form>
<input type=”text/password” name=”名称” value=”文本”/>
</form>
type:当type=”text”时，输入框为文本输入框；
当type=”password”时，输入框为密码输入框；
name:为文本输入框命名，以备后台程序ASP、PHP使用。
value: 为文本输入框设置默认值。
例子：
<form method="post" action="save.php">
账户:
<input type="text" name="myName"/>
<br>
密码:
<input type="password" name="pass"/>
</form>
32.文本域，支持多行文本输入，当用户需要在表单中输入大段文字时，需要用到文本输入域。
<textarea rows=”行数” cols=”列数”> 文本</textarea>
<textarea>标签是成对出现的。
在<textarea></textarea>标签之间可以输入默认值。
例子：
<form method=”post” action=”save.php”>
<label>个人简介<label>
<textarea rows=”50” cols=”40” >请在这里输入内容</textarea>
<input type=”submit” name=”submit” value=”确定”>
<input type=”reset” name=”reset” value=”重置”>
</form>
33.使用单选框、复选框，让用户选择。
<input type=”radio/checkbox” value=”值” name=”姓名” checked=”checked”>
type当type为”radio”时，控件为单选框；当type为”checkbox”时，控件为复选框；
checked 当设置checked=”checked”时，该选项被默认选中。
注意：同一组的单选按钮，name取值一定要一致。
34.使用下拉列表框，节省空间
<option value=”读书” >读书</option>
第一个读书为向服务器提交的值；第二个读书时显示的值。
例子：
<form method=”post” action=”save.php” >
<label>爱好</label>
<select>
<option value=”看书” >看书</option>
<option value=”旅游”>旅游</option>
<option value=”运动” selected=”selected”>运动</option>
</select>
</form>
35.使用下拉列表进行多选。
<form method=”post” action=”sace.php”>
<label>爱好</label>
<select multiple=”multiple”>
<option value=”读书”>读书</option>
<option value=”打球”>打球</option>
</select>
</form>
按下ctrl同时进行单击。
36.使用提交按钮提交数据。
<input type=”submit” value=”提交”>
例子：
<from method=”post” action=”save.php”>
<label for=”myName”>姓名：</label>
<input type=”text” value=”” name=”myName”>
<inout type=”submit” value=”提交” name=”submitbtn”>
</form>
37.使用重置按钮，重置表单信息
<input type=”reset” value=”重置”>
只有当type 的值设置成reset时，按钮才有重置作用。
38.form表单中的label标签。
<label for=”控件id名称”>
标签的for属性中的值应当与相关控件的id 属性值一定要相同.
<form method=”post” action=”save.php”>
<label for=”male”>男</label>
<input type=”radio” name=”gender” id=”male”>
</form>
39.认识CSS样式。全称是层叠样式表。主要用于定义HTML内容在浏览器内的显示样式，如文字大小，颜色，字体加粗等
例子：
p{
font-size:12px;
color:red;
font-weight:bold;
}
40.CSS样式代码插入的形式来看基本可以分为3种：内联式、嵌入式、外部式。内联式：把CSS代码直接写在现有的HTML标签中，如下面的代码：
<p style=”color:red”>这里的文字是红色。</p>
<p style=”color:red;font-size:12px”>这里的文字是红色。</p>
如果有多条CSS样式代码设置可以写在一起，中间用分号隔开。
41.嵌入式css样式，写在前面的文件中。
例子：将多段文字设置字体颜色。
<style type=”text/css”>
span {
color:red;
}
</style>
嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间。
42.外部式CSS样式，写在单独的一个文件中。
<link href=”style.css” rel=”stylesheet” type=”text/css”>
Style.css
span {
color:red;
font-size:20px;
}
在需要CSS样式的地方加入<span></span>
注意：
1.css 样式文件名称以有意义的英文字母命名，如：main.css
2.rel=”stylesheet” type=”text/css”是固定写法不可修改
3.<link>标签位置一般写在<head>标签之内。
43.三种方法的优先级：内联式>嵌入式>外部式
根据就近原则离被设置元素越近优先级别越高。
44.什么是选择器？
每一条CSS样式声明有两部分组成，形式如下：
选择器{
样式；
}
45标签选择器
标签选择器就是html代码中的标签。如<html><body><h1><p>
例子：
p{font-size:12px; line-height:1.6em;}
上面CSS样式代码的作用：为P标签设置12px字号，行间距设置为1.6em的样式。
46.类选择器
类选择器在CSS样式编码中是最常用到的。
语法：
.类选择器{CSS样式代码}
注意：
1.英文圆点开头。
2.其中类选择器可以任意起名（但不要其中文名字）
3.使用方法：
第一步：使用合适的标签需要修饰的内容标记起来，如下：
<span>胆小如鼠</span>
第二步：使用class=”类选择器”为标签设置一个类。
<span class=”stress” >胆小如鼠</span>
第三步：设置类选择器的CSS样式，如下：
.stress{ color:red;}
注意这属于嵌入式CSS样式应放入<style type=”text/css”></style>
47.ID选择器
与类选择器的区别：
1.为标签设置id=”ID名称’，而不是class=”类名”
2.ID选择器前面是#，不是英文.
48.类选择器与ID选择器的区别。
1.ID选择器只能在文档中使用一次。类选择器可以使用多次
2.可以使用类选择器词列表方法为一个元素同时设置多个样式。但ID选择器不行。
例子：
.stress{
color:red;
}
.bigsize{
font-size:25px;
}
<p>到了<span class=”stress bigsize”>三年级</span>下学期时……</p>
49.子选择器。>用于选择指定标签元素的第一代子元素。
例子：
.food>li {border: 1px solid red;}
这行代码会使class名为food下的子元素li加入红色实现边框。
<ul class=”food”>
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
</ul>
</li>
<ul>
注意此处是嵌套的<ul><li>使用子选择器是对第一代元素进行选择。是将水果（香蕉苹果）都加上红色实线，而不是单独的香蕉或者苹果。即只作用于孩子，而不作用于孙子。
50.包含（后代）选择器
包含选择器，加入空格，用于选择指定标签元素下的后辈元素。
>作用于元素的第一代后代，空格作用于元素的所有后代。
51.通用选择器
通用选择器是功能最强大的选择器，它使用一个*指定，它的作用是匹配html中的所有标签。
53.伪类选择符。
它允许给html不存在的标签设置样式，比如说我们给html中一个标签元素的鼠标滑过状态来设置字体颜色。
a: hover{ color :red;}
<a href="http://www.imooc.com”>胆小如鼠</a>
在<style></style>中写。
54.分组选择符。当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，）如下代码为将h1,span标签同时设置字体颜色为红色。
h1,span{ color: red}
它相当于下面两行代码：
h1{ color:red;}
span{color:red}
55.继承。
继承是一种规则，它允许样式不仅应用于某个特定的html标签元素，而且应用于其后代。
P{ color : red;}
<p>三年级时，我还是一个<span>胆小如鼠</span>的女孩。</p>
p中的文本与span 中的文本都设置成了红色。
但有的不具有继承性。
P{border: 1px solid red;}
<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。
只是给p标签设置了边框，对于子元素span是没起到作用的。
56.特殊性
为同一个元素设置不同的CSS样式代码，那么元素会启用哪一个呢
这是由权值来决定的。标签的权值为1，类选择符的权值为10.ID选择器的权值是100.集成的权值最低。
#footer .note p{ color:yellow}/*权值为100+10+1=111*/
57.层叠。在html文件中对于同一个元素可以有多个CSS样式存在，当有相同权重的样式存在时，会根据这些CSS样式的前后顺序来决定，处于最后面的CSS样式会被应用。
P<color:red;}
P<color:green;}
<p class="first”>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。
胆小如鼠会显示为绿色。
58.重要性。特殊情况下需要为某些样式设置具有最高的权值。用!important
P{color:red ;!important}/*!important应在分号之后*/
P{color:green}
<p class=”first”>三年级时，我还是一个<span>胆小如鼠</span>的女生。</p>
这时p段落中的文本会显示红色。
59.文字排版-字体
为网页中的文字设置为微软雅黑
body{ font-family:”Micosoft Yahei;}
60.文字排版-字号颜色。
body{font-size:12px;color:#666;}
61.文字排版-粗体
a{font-weight:bold;}
62.文字排版-斜体
a{font-style:italic;}
63文字排版-下划线
p{ text-decoration:underline;}
64.文字排版-删除线
.oldPrice{ text-decoration:line-through;}
65.段落排版-缩进
p{ text-indent:2em;}
66.段落排版-行间距（行高）
P{line-height:1.5em;}
67.段落排版--中文字间距、字母间距
P{letter-spacing:50px;}/*文字间隔或字母间隔*/
P{word-spacing:50px;}/*单词间隔*/
68.段落排版-对齐
h1{text-align:center;}/*left.right*/
69.元素分类。
分为块状元素，内联元素，块状内联元素。
块状元素：
<div><p><h1><ol><ul><dl><table><address><blockquote><form>
常用的内联元素有：
<a><span><br><i><em><strong><label><q><var><cite><code>
常用的内敛块状元素有：
<img><input>
70.块级元素。
在html中<div><h1><form><ul><li>都是块级元素。设置display:block 就是将元素显示为块级元素。
a{display:block;}
块级元素的特点：
1.每一个块级元素都从新的一行开始，并且其后的元素也另起一行
2.元素的宽度，高度，行高以及顶和底边距都可设置
3.元素宽度在不设置的情况下，是它本身父容器的100%
71.元素分类--内联元素。
可以将块状元素通过display：inline转换为内联元素，从而使div元素具有内联元素的特点。
div{
display:inline;
}
<div>我要变成内敛元素<div>
内联元素的特点：
1.和其他元素都在一行上。
2.元素的高度，宽度及顶部和底部边距不可设置。
3.元素的宽度就是它包含的文字和图片的宽度，不可改变。
72.元素分类-内敛块状元素。
兼具内联元素和块状元素的特点。代码：display:inline-block.
Inline-block的特点是：
1.和其他元素都在一行
2.元素的高度，宽度以及顶和底边距都可设置。
73.盒模型
页面元素<div>
padding蛋糕与盒子的距离
margin 两个盒子距离
padding-top padding-bottom padding-left padding-right
块级标签都具备盒子模型的特征。
74.盒模型--边框
盒子模型的边框就是围绕着内容及补白的线，这条线可以设置它的粗细，样式和颜色。
div{
border:2px solid red;
}
注意：
1.border-style(边框样式）常见样式有：
dashed虚线 dotted点线solid实线
2.border-color(边框颜色）中的颜色可设置为十六进制颜色。如：
border-color:#888//前面的#不要忘掉
3.border-width(边框宽度）中的宽度也可以设置为：
thin |medium|thick(但不是很常用）最常用是像素。
75.盒模型--边框
CSS样式允许只为一个方向的边框设置样式。
border-top:1px solid red;
border-right:1px solid red;
76.盒模型--宽度和高度
元素实际的宽度=左边界margin-left+左边框border-lift+左填充padding-left+内容宽度width+右填充padding-right+右边框border-right+右边界margin-right
div{
width:200px;
padding:20px;
border:1px solid red;
margin: 10px;
}
<body>
<div>文本内容</div>
77.盒模型--填充
元素内容与边框直接按是可以设置距离的，称之为填充，填充按顺时针顺序：上右下左。不可颠倒
div{padding :20px 10px 15px 30px}
78.盒模型--边界
元素与其他元素之间的距离可以使用边界来设置。边界也是可分为上右下左。
div{margin:20px 10px 15px 30px;}
上下左右都设置为10px
div{margin:10px;}
上下边界都为10px可以这么写：
div{margin:10px 20px;}
padding在边框里margin在边框外。
79.CSS布局模型
CSS包含三种布局模型：Flow 流动模型 float 浮动模型 Layer 层模型
80.流动模型（一)
流动模型是默认的网页布局模式。
第一点块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
（二）内联元素都会在所处的包含元素内从做到右水平分布显示。（内联元素可不像块状元素这么霸道占一行）
81.浮动模型
设置元素浮动可以是两个块状元素并排显示。
在div 中设置float:left;
例如：
div {
width: 200px;
height:200px;
border:2px red solid;
float:left;
}
<div id=”div1”></div>
<div id=”div2”></div>
82.什么是层模型
层布局模型可以像photoshop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（positioning )属性来支持层布局模型
层布局模型有三种模型：
1.绝对定位：（position:absolute）
2.相对定位：（position:relative）
3.固定定位：（position: fixed）
83.层模型--绝对定位
使用position:absolute这条语句的作用将元素从文档流中拖出来，然后使用left,right,top,bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位，如果不存在这样的包含快，则相对于body元素，即相对于浏览器窗口。
如下面代码可以实现div元素相对于浏览器窗口向右移动100px,向下移动50px;
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
<div id=”div1”></div>
84.层模型--相对定位
如果想为元素设置层模型中的相对定位，需要设置position:relative.它通过left,right,top,bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按station(float)方式生成一个元素（并且元素想层一样浮动起来）然后相对于以前的位置移动，移动的方向和幅度由left,right,top,bottom属性确定，偏移前的位置保留不动。
如下面的代码相对于以前的位置向下移动50px,向右移动100px.
#div{
Width:200px;
Height:200px;
Border:2px red solid;
Position:relative;
Left:100px;
Top:50px;
}
<div id=”div1”></div>
85.层模型--固定定位
Fixed:表示固定定位，与absolute定位类型相似，单它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，他不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动溜啦你窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会随文档流动影响，这与background-attachment:fixed;属性功能相同。一下代码可以实现相对与浏览器视图向右移动100px,向下移动50px.并且拖动滚动条时固定不变。
#div{
Width:200px;
Height:200px;
Border:2px red solid;
Position:fixed;
Left:100px;
Top:50px;
}
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>
86.relative与absolute组合使用
可以实现相对于其他元素进行定位
1.参照定位的元素必须是相对定位元素的前辈元素：
<div id=”box1”<!--参照定位的元素-->
<div id=”box2”>相对参照元素进行定位</div>
<!--相对定位元素-->
</div>
其中box1是box2的父元素
2.参照定位的元素必须加入position:relative;
#box1{
width:200px;
height:200px;
position:relative;
}
3.定位元素加入position:absolute,便可以使用top,bottom,left,right来进行偏移定位。
#box2{
position:absolute;
top:20px;
left:30px;
}
87.盒模型代码简写
三种缩写方法：
1.如果top,right.bottom.left的值相同，如下面代码：
margin :10px 10px 10px 10px
可缩写为
margin:10px;
2.如果top,和bottom值相同，left right 值相同如下面代码；
margin:10px 20px 10px 20px;
可缩写为：
Margin:10px 20px;
3.如果leftright 相同,如下面代码
Margin:10px 20px 30px;
可缩写为：
Margin:10px 20px 30px;
注意：padding border 的缩写方法与margin
(如果写了一个，那就是四个都一样，写了两个，是上下一样左右一样，如果写了三个，省略了右的参数，说明右的参数和左相同)
88.颜色值的缩写
当你设置是16进制的色彩值时，如果前两位相同，可以缩写一半。
例子：
P{color:#000000;}
可以缩写为：
P{color:#000;}
例子2：
P{color:336699;}
可以缩写为：
P{color:369;}
89.字体缩写
Body{
Font-style:italic;
Font-variant:mall-caps;
Font-weight:bold;
Line-height:1.5em;
Font-family:”宋体”,san-serif;
}
这么多代码可以缩写为一句：
body{
font-italic small-caps bold 12px/1.5em “宋体”,sans-serif;
}
1.使用这一简写方式至少要指定font-size 和font-family属性，其他的属性（如 font-weight，font-style，font-varient，line-height)如未指定将自动使用默认值
2.在缩写是font-size line-height中间要加入“/”
3.一般情况下中文网站经常用
Body{
Font-12px/1.5em “宋体” ,sans-serif;
}
只是有字号，行间距，中文字体，英文字体设置；
90颜色值
P{color:rgb(133,45,200);}
P{color:rgb(20%,33%,25%);}
十六进制颜色。
是比较普遍使用的方法。其原理是RGB设置。每一项的值是由0-255变成了十六进制00-ff
P{color:#00fff;}
91.长度值。
长度单位总结一下是em\m\%
P{font-size:12px;text-indent:2em;}
上面代码就是可以实现首行缩进24px
下面注意一个特殊情况：
但当font-size设置单位为em时，此时计算的标准以p的父元素的font-size为基础。
p{font-size:14px;}
Span{font-size:0.8em;}
其中0.8em就是24px
92.水平居中显示--行内元素
<body>
<div class=”textCenter”>我想要在父容器中水平居中显示。</div>
</body>
<style>
.txtCenter{
Text-align:center;
}
</style>
93.水平居中显示-定宽块状元素，
满足定宽和块状两个条件的元素可以通过设置”左右margin”值为“auto”来实现居中的。
<body>
<div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
<style>
div{
border:1px solid red;/*为了显示居中效果明显为div设置了边框*/
width:200px;/*定宽,此条件不可缺少*/
margin:20px auto;/*margin-left与margin-right设置为auto*/
}
</style>
94.水平居中总结--不定宽块状元素方法
不定宽块状元素：块状元素的宽度width不固定
三种居中方法：
1.加入table标签
2.设置display:inline方法：与第一种类似，显示类型设为行内元素，进行不定宽元素的属性设置
3.设置position:relative和left:50%利用相对定位的方式，将元素向左偏移50%，即可达到居中的目的。
第一种方法：第一步：
为需要设置的居中元素外面加入一个table标签（包括<tbody><tr><td>）
第二步：为这个table 设置“左右margin居中”（这个和定宽块状元素的方法一样）
<div>
<table>
<tbody>
<tr><td>
<ul>
<li>我是第一行文本</li>
<li>我是第二行文本</li>
<li>我是第三行文本</li>
</ul>
</td></tr>
</tbody>
</table>
<style>
table{
border:1px solid;
margin:0 auto;
}
</style>
95.水平居中总结-不定宽块状元素方法
第二种方法：改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果。如下例子：
html代码：
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
css代码：
<style>
.container{
text-align:center;
}/* margin:0;padding:0（消除文本与div边框之间的间隙）*/
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}/* margin-right:8px（设置li文本之间的间隔）*/
.container li{
margin-right:8px;
display:inline;
}
</style>
这种方法相比第一种方法的优势是不用增加无语义标签，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。
96.水平居中总结-不定宽块状元素方法
除了前两节讲到的插入table标签，以及改变元素的display类型，可以使不定宽块状元素水平居中之外，本节介绍第3种实现这种效果的方法，设置浮动和相对定位来实现。
方法三：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
我们可以这样理解：假想ul层的父层（即下面例子中的div层）中间有条平分线将ul层的父层（div层）平均分为两份，ul层的css代码是将ul层的最左端与ul层的父层（div层）的平分线对齐；而li层的css代码则是将li层的平分线与ul层的最左端（也是div层的平分线）对齐，从而实现li层的居中。
代码如下：
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
css代码：
<style>
.container{
float:left;
position:relative;
left:50%
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>
这三种方法使用得都非常广泛，各有优缺点，具体选用哪种方法，可以视具体情况而定
97垂直居中-父元素高度确定的单行文本
我们在实际工作中也会遇到需要设置垂直居中的场景，比如好多报纸的文章标题在左右一侧时，常常会设置为垂直居中，为了用户体验性好。
这里我们又得分两种情况：父元素高度确定的单行文本，以及父元素高度确定的多行文本。
本节我们先来看第一种父元素高度确定的单行文本, 怎么设置它为垂直居中呢？
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )。
line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。
这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。
如下代码：
<div class="container">
hi,imooc!
</div>
css代码：
<style>
.container{
height:100px;
line-height:100px;
background:#999;
}
</style>
98垂直居中-父元素高度确定的多行文本（方法一）
父元素高度确定的多行文本、图片等的竖直居中的方法有两种：
方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。下面看一下例子：
html代码：
<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>
css代码：
table td{height:500px;background:#ccc}
因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。
99.垂直居中-父元素高度确定的多行文本（方法二）
除了上一节讲到的插入table标签，可以使父元素高度确定的多行文本垂直居中之外，本节介绍另外一种实现这种效果的方法。但这种方法兼容性比较差，只是提供大家学习参考。
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差。
html代码：
<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>
css代码：
<style>
.container{
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>
这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7而且这样修改display的block变成了table-cell，破坏了原有的块状元素的性质。
100.隐性改变display类型
有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：
1. position : absolute
2. float : left 或 float:right
简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。
如下面的代码，小伙伴们都知道 a 标签是 行内元素 ，所以设置它的 width 是 没有效果的，但是设置为 position:absolute 以后，就可以了。
<div class="container">
<a href="#" title="">进入课程请单击这里</a>
</div>
css代码
<style>
.container a{
position:absolute;
width:200px;
background:#ccc;
}
</style>
扫一扫
4106
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
