html与css之间的关系
1、什么是HTML（超文本标记语言 Hyper Text Markup Language），HTML 是用来描述网页的一种语言。
2、CSS(层叠样式表 Cascading Style Sheets),样式定义如何显示 HTML 元素，语法为：selector {property：value} (选择符 {属性：值})。
3、JavaScript是一种脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。
对于一个网页，HTML定义网页的结构，CSS描述网页的样子，JavaScript设置一个很经典的例子是说HTML就像 一个人的骨骼、器官，而CSS就是人的皮肤，有了这两样也就构成了一个植物人了，加上javascript这个植物人就可以对外界刺激做出反应，可以思 考、运动、可以给自己整容化妆（改变CSS）等等，成为一个活生生的人。
如果说HTML是肉身、CSS就是皮相、Javascript就是灵魂。没有Javascript,HTML+CSS是植物人，没有Javascript、CSS是个毁容的植物人。
如果说HTML是建筑师，CSS就是干装修的，Javascript是魔术师。
HTML文件结构
HTML文档
<html>
<body>
<h1>First Heading</h1>
<p>first paragraph</p>
</body>
</html>< html> 与 < /html> 之间的文本描述网页 < body> 与 < /body> 之间的文本是可见的页面内容 < h1> 与 < /h1> 之间的文本被显示为标题 < p> 与 < /p> 之间的文本被显示为段落
html标签与元素
比如< p>这就是一个标签；< p>内容< /p>这就是一个元素，也就是说元素由一个开始的标签和结束的标签组成，用来包含某些内容;这里有一个值得注意的例外，即< br/>本身既是开始标签也是结束标签，但不包含任何内容，所以这只是个标签
标签
常用标签
HTML标题 Heading 是通过 < h1> - < h6> 等标签进行定义的；
HTML段落 paragraph 是通过 < p> 标签进行定义的；
HTML链接 链接 是通过 < a> 标签进行定义的；
HTML图像 image是通过 <img> 标签进行定义的
元素
元素的内容是开始标签与结束标签之间的内容
HTML样式
<html>
<body>
<h1 align="center">This is heading 1</h1>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
<p>上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。</p>
</body>
</html>HTML注释
语法：
<!--注释文字 -->
HTML链接
给文字添加超链接
<html>
<body>
<p>let's have an example</p>
<p>
<a href="http://www.php.cn">php中文网</a>
</p>
</body>
</html>给图片添加超链接
超链接的打开方式
打开方式分为在本页打开和在新的浏览器窗口打开，默认情况下，超级链接打开新页面的方式是自我覆盖（就是在本页打开）。根据浏览者的不同需要，读者可以指定超级链接的其他打开新窗口的方式。超级链接标签提供了target属性进行设置，取值分别为_self（自我覆盖，默认）、_blank（创建新窗口打开新页面）
超链接添加提示文字
有些时候超链接文字不足以说明点击以后所要链接的内容，所以这个时候我们就需要给超链接添加提示文字，设计到的属性就是title
超链接实现书签
要实现书签，你就要了解，什么是锚（anchor）。锚（anchor）是引自于船只上的锚，锚被抛下后，船只就不容易飘走、迷路。实际上锚就是用于在单个页面内不同位置的跳转，有的地方叫做书签。涉及到的标签当然还是< a>标签,超级链接标签的name属性用于定义锚的名称，一个页面可以定义多个锚，通过超级链接的href属性可以根据name跳转到对应的锚
<html>
<head>
<title>HTML</title>
</head>
<body style="font-size:20px">
<p style="text-align:center">网页书签</p>
<p>
<a href="#c1">网页一</a>
</p>
<p>
<a href="#c2">网页二</a>
</p>
<p>
<a href="#c3">网页三</a>
</p>
<p>
<a href="#c4">网页四</a>
</p>
<p>
<a href="#c5">网页五</a>
</p>
<h1><a name="c1"></a>网页链接一</h1>
<p>内容</p>
<p>lalalaalalal</p>
<p>lalalaalalal</p>
<h1><a name="c2"></a>网页链接二</h1>
<p>lalalaalalal</p>
<p>内容</p>
<p>lalalaalalal</p>
<h1><a name="c3"></a>网页链接三</h1>
<p>内容</p>
<p>lalalaalalal</p>
<p>lalalaalalal</p>
<h1><a name="c4"></a>网页链接四</h1>
<p>内容</p>
<p>lalalaalalal</p>
<p>lalalaalalal</p>
<h1><a name="c5"></a>c网页链接五</h1>
<p>lalalaalalal</p>
<p>lalalaalalal</p>
<p>内容</p>
</body>
</html>HTML表格
每个表格均有若干行（由 < tr> 标签定义），每行被分割为若干单元格（由 < td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。< th>标签用来定义表头。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等
<html>
<title >表格</title>
<body style="font-size:30px">
<p style="text-align:center">表格</p>
<table align="center" border="15" >
<tr>
<td align="center" colspan="2">第一行和第一列</td>
</tr>
<tr>
<td rowspan="2">第二行和第一列 </td>
<td>第二行和第二列 </td>
<td >第二行和第三列</td>
</tr>
<tr>
<td>第三行和第一列 </td>
<td>第三行和第二列 </td>
</tr>
</table>
</body>
</html>HTML图像
一般我们用到的就是插入图片，将图片多为背景，再者将图片作为链接。涉及到的标签就是< img> 接下来我们就动手开始写一个HTML文件加深了解 首先我们用浏览器在网页上下载几张图片（放到和HTML文件一个文件夹中）供后面使用
插入图像<img src="路径加文件名">
属性
align属性
width属性
height属性
创建图像映射
在这之前我们动手试验过将图片作为链接来使用，触发链接的方式就是点击图片的任何地方都可以链接到跳转地址，有时我们需要实现，点击图片的不同地方跳转到不同的地方。意思就是，一张图片我们可以创建带有可供点击区域的图像地图，其中每个区域就是一个超链接。涉及到的标签就是< map>标签，用来指定图片,< area>用来指定超链接区域
以一张图片作为地图， 在< area>标签中我们会涉及到shape ，coords， href属性，分别用来指定超链接区域形状，超链接区域坐标，还有超链接跳转地
shape属性的取值可以是：rect(矩形)、circle(圆形)、poly(多边形)和default(整个图像区域)。
coords属性对于矩形而言，coords有4个值，分别用逗号隔开，表示矩形区域左上角x坐标、左上角y坐标、右下角x坐标和右下角y坐标
<html>
<head>
<title>image test</title>
</head>
<body background="./qwe.gif">
<p>tap the li zi </p>
<img src="./julizi.png" usemap="#lizi"/>
<map name="lizi">
<area shape="rect" coords="50,10,100,60" href="img.html" target="_blank"
</map>
</body>
</html>HTML列表
有序列表
有序列表始于 < ol> 标签。每个列表项始于 < li> 标签。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等
<html>
<head>
<title>test</title>
</head>
<body style="font-size:20px;background-color:gray" >
<ol start="2">
<li>hadoop</li>
<li>linux</li>
<li>c </li>
</ol>
<ol type="a">
<li>hadoop</li>
<li>linux</li>
<li>c </li>
</ol>
<ol type="A">
<li>hadoop</li>
<li>linux</li>
<li>c </li>
</ol>
<ol type="i">
<li>hadoop</li>
<li>linux</li>
<li>c </li>
</ol>
<ol type="I">
<li>hadoop</li>
<li>linux</li>
<li>c </li>
</ol>
</body>
</html>无序列表
说完了有序列表，下面来讲讲无序列表。无序列表在HTML中还是很常用的。 无序列表始于 < ul> 标签。每个列表项始于 < li>（有序无序是一样的）。 无需列表排序的时候就是给每个列表项加各种小符号其中分为Disc（默认）实心黑点;Cirle小圈;square方点，与有序列表的属性都是用的一样的
定义列表
定义列表通常用于术语的定义和解释。定义列表由< dl>开始，术语由< dt>开始，解释说明有< dd>开始，< dd>....< /dd>里的文字缩进显示
HTML块元素
< div>用来定义文档中的分区或节（division/section），没有特定的含义
< span>用来组合文档中的行内元素，也没有特定的含义，当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性
HTML布局
<html>
<body bgcolor="gray">
<table width="1000">
<tr>
<td colspan="2" style="background-color: royalblue">
<h1 align="center">php中文网</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color: darkorange;width:300px">
<dl>
<dt>list of book</dt>
<dd>
<ol>
<li>hadoop</li>
<li>linux</li>
<li>c</li>
</ol>
</dd>
</dl>
</td>
<td style="background-color: forestgreen;height:500px;width:700px;">
<h1 style="font-size: 20px;text-align: center">the summary of the book</h1>
i will lead you to travel in the season of linux
</td>
</tr>
<tr>
<td colspan="2" style="background-color: powderblue;text-align:center;height: 100px">
good good study day day up</td>
</tr>
</table>
</body>
</html>再使用div布局
<html>
<head>
<style>
div#container{width:1000px}
div#header {background-color: royalblue ;height: 100px;text-align:center;font-size: 20px}
div#sidebar{background-color: darkorange;height:400px;width:300px;float:left;}
div#mainbody {background-color: forestgreen;height:400px;width:700px;float:left;}
div#footer {background-color: powderblue;height: 100px;clear:both;text-align:center;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>php中文网</h1>
</div>
<div id="sidebar">
<dl>
<dt>list of book</dt>
<dd>
<ol>
<li>hadoop</li>
<li>linux</li>
<li>c</li>
</ol>
</dd>
</dl>
</div>
<div id="mainbody">
<h1>the summary of the book</h1>
<p>i will lead you to travel in the season of linux</p>
</div>
<div id="footer">good good study day day up</div>
</div>
</body>
</html>HTML表单
网站怎样与用户进行交互？答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。
语法：
<form method="传送方式" action="服务器文件">
讲解：
1.<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。
2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
3.method ： 数据传送的方式（get/post）
<form method="post" action="save.php">
<label for="username">用户名:</label>
<input type="text" name="username" />
<label for="pass">密码:</label>
<input type="password" name="pass" />
</form>文本输入框、密码输入框
当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可以转化为密码输入框。
语法：
<form> <input type="text/password" name="名称" value="文本" /> </form>
1、type：
当type="text"时，输入框为文本输入框;
当type="password"时, 输入框为密码输入框。
2、name：为文本框命名，以备后台程序ASP 、PHP使用。
3、value：为文本输入框设置默认值。(一般起到提示作用)
<form>
姓名：
<input type="text" name="myName">
<br/>
密码：
<input type="password" name="pass">
</form>文本域，支持多行文本输入
当用户需要在表单中输入大段文字时，需要用到文本输入域。
语法：
<textarea rows="行数" cols="列数">文本</textarea>
1、<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。
2、cols ：多行输入域的列数。
3、rows ：多行输入域的行数。
4、在<textarea></textarea>标签之间可以输入默认值
<form method="post" action="save.php">
<label>联系我们</label>
<textarea cols="50" rows="10" >在这里输入内容...</textarea>
</form>使用单选框、复选框
在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。请看下面的例子:
语法：
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
1、type:
当 type="radio" 时，控件为单选框
当 type="checkbox" 时，控件为复选框
2、value：提交数据到服务器的值（后台程序PHP使用）
3、name：为控件命名，以备后台程序 ASP、PHP 使用
4、checked：当设置 checked="checked" 时，该选项被默认选中
下拉列表框
下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选
1、value：
2、selected="selected"：
设置selected="selected"属性，则该选项就被默认选中
使用下拉列表框进行多选
下拉列表也可以进行多选操作，在<select>标签中设置multiple="multiple"属性，就可以实现多选功能，在 windows 操作系统下，进行多选时按下Ctrl键同时进行单击
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>使用下拉列表框进行多选</title>
</head>
<body>
<form>
<laber>你觉得我帅吗？</laber><br />
<select multiple=multiple>
<option value="哎呀妈呀，贼帅了！"selected>哎呀妈呀，贼帅了！</option>
<option value="最帅！">最帅!</option>
<option value="宇宙无敌了！">宇宙无敌了！</option>
<option value="无人能比了！">无人能比了！</option>
</select>
</form>
</body>
</html>使用提交按钮，提交数据
在表单中有两种按钮可以使用，分别为：提交按钮、重置。这一小节讲解提交按钮：当用户需要提交表单信息到服务器时，需要用到提交按钮。
语法：
<input type="submit" value="提交">
type：只有当type值设置为submit时，按钮才有提交作用
value：按钮上显示的文字
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>提交按钮</title>
<style>
h1 {text-align:center;}
div {margin-left: auto;
margin-right: auto; width:500px;}
</style>
</head>
<body>
<div id="top">
<img src="https://www.baidu.com/img/bdlogo.png" title="sorry图片来源出问题">
</div>
<div id="banner">
<h1>公开调查问卷</h1>
</div>
<div id="reserch">
<form method="post" action="save.php">
<label for="myName">姓 名：</label>
<input type="text" value="" name="myName " /><br />
<label for="id">身份证号：</label>
<input type="text" value="" name="id" /> <br />
<hr />
<label for="gender">性别：</label>
<label>男</label>
<input type="radio" value="1" name="gender" />
<labe >女</label>
<input type="radio" value="2" name="gender" /><br>
<hr />
<label>爱好：</label>
<label>运动</label>
<input type="checkbox" value="sport" name="运动" />
<label>唱歌</label>
<input type="checkbox" value="singing" name="唱歌" />
<label>跳舞</label>
<input type="checkbox" value="dacing" name="跳舞" />
<label>看书</label>
<input type="checkbox" value="book" name="看书" /><br />
<hr />
<label>年龄段</label>
<select>
<option value="20"><20</option>
<option value="30">20-40</option>
<option value="40">>40</option>
</select><br />
<hr />
<label>喜欢的课程：</label>
<select multiple="multiple">
<option value="math">数学</option>
<option value="language">语言</option>
<option value="history">历史</option>
</select>
<br /> <hr />
<input type="submit" value="提交" name="submitBtn" />
</form>
</div>
</body>
</html>使用重置按钮，重置表单信息
当用户需要重置表单信息到初始时的状态时，比如用户输入“用户名”后，发现书写有误，可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以。
语法：
<input type="reset" value="重置">
type：只有当type值设置为reset时，按钮才有重置作用
value：按钮上显示的文字
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>重置按钮</title>
</head>
<body>
<form action="save.php" method="post" >
<laber>你觉得我帅吗？</laber><br />
<select>
<option value="哎呀妈呀，贼帅了！"selected>哎呀妈呀，贼帅了！</option>
<option value="最帅！">最帅!</option>
<option value="宇宙无敌了！">宇宙无敌了！</option>
<option value="无人能比了！">无人能比了！</option>
</select>
<input type="submit" value="确定" />
<input type="reset" value="重置" />
</form>
</body>
</html>form表单中的label标签
label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上)
语法：
<label for="控件id名称">
注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>form中的lable标签</title>
</head>
<body>
<form><h1>我的第一个网页</h1>
你的性别？<br>
<label for="male">男</label>
<input type="radio" name="sex" id="male" />
<label for="female">女</label>
<input type="radio" name="sex" id="female" />
<br />
你对什么运动感兴趣？<br>
<input type="checkbox" name"checkbox1" value="跑步">跑步
<input type="checkbox" name"checkbox2" value="打球" checked="checked">打球
<input type="checkbox" name"checkbox3" value="登山" checked="checked">登山
<input type="checkbox" name"checkbox4" value="健身">健身<br>
<label for="email">输入你的邮箱地址</label>
<input type="email" id="email" placeholder="Enter email">
<input type="reset" value="重置">
</form>
<img src ="http://e.hiphotos.baidu.com/image/w%3D400/sign=0648f314abd3fd1f3609a33a004f25ce/80cb39dbb6fd526654d55c2ea818972bd4073609.jpg">
</body>
</html>CSS
CSS 指的是层叠样式表（Cascading StyleSheet）。在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制
基础语法规则
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector {
declaration1;
declaration2;
...
declarationN;
}
选择器通常是您需要改变样式的 HTML 元素。 每条声明由一个属性和一个值组成。每个属性有一个值。属性和值被冒号分开。
selector {property: value
例如：
h1{
color:red;
font-size:14px;
}
如果值大于 1 个单词，则需要加引号
新建 index.html 和 MyCss.css 两个文件
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引外部资源 MyCss.css-->
<link rel="stylesheet" href="MyCss.css" type="text/css">
</head>
<body>
<h1>
PHP中文网
</h1>
</body>
</html>h1{
color: red;font-size: 50px;
}CSS注释
就像在Html的注释一样，在CSS中也有注释语句：用/*注释语句*/来标明（Html中使用<!--注释语句-->)。
有三种方法来进行CSS的注释
1、选择器（child selector）
如果你想在IE中隐藏一个CSS定义，可以使用子选择器。
css部分：
html>body p {
/* declarations */
}
2、“通配符”(*)
这种写法只有IE浏览器可以理解（对其他浏览器都隐藏）
css部分：
* html p {
/* declarations */
}
3、“反斜线”(\)
如果你希望IE/Win有效而IE/Mac隐藏，可以使用“反斜线”技巧。
css部分：
/* \*/
* html p {
declarations
}
/* */
内联式css样式
内联式css样式表就是把css代码直接写在现有的HTML标签(开始标签)中
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识html标签</title>
<style type="text/css">
span{
color:red;
}
</style>
</head>
<body>
<p>PHP中文网，<span style="color:blue">超酷的互联网</span>、IT技术免费学习平台，创新的网络一站式学习、实践体验；<span>服务及时贴心</span>，内容专业、<span>有趣易学</span>。专注服务互联网工程师快速成为技术高手！</p>
</body>
</html>嵌入式css样式
嵌入式css样式，就是可以把css样式代码写在<style type="text/css"></style>标签之间
<style type="text/css">
span{
color:red;
}
</style>嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间
外部式css样式
外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="mycss.css" type="text/css" rel="stylesheet">
</head>
<body>
<!--p 标签中嵌套了一个 a 标签，在下面的 css 引用过程中我们可以看到的.pclass a 即为 class 被用作派生选择器-->
<p class="pclass">这是一个 class 显示效果<a href="hhtp://www.php.cn">效果</a></p>
<div class="divclass">hello div</div>
</body>
</html>注意：
1、css样式文件名称以有意义的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
3、<link>标签位置一般写在<head>标签之内
三种方法的优先级
如果有一种情况：对于同一个元素我们同时用了三种方法设置css样式，那么哪种方法真正有效呢？在右边编辑器就出现了这种情况
1、使用内联式CSS设置“超酷的互联网”文字为粉色。
2、然后使用嵌入式CSS来设置文字为红色。
3、最后又使用外部式设置文字为蓝色（style.css文件中设置）。
但最终你可以观察到“超酷的互联网”这个短词的文本被设置为了粉色。因为这三种样式是有优先级的，记住他们的优先级：内联式 > 嵌入式 > 外部式
但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样，<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面（实际开发中也是这么写的）。感兴趣的小伙伴可以试一下，把它们调换顺序，再看他们的优先级是否变化。
其实总结来说，就是--就近原则（离被设置元素越近优先级别越高）
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>样式网页</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
span{
color:red;
}
</style>
</head>
<body>
<p>PHP中文网，<span style="color:pink">超酷的互联网</span>、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！</p>
</body>
</html>CSS背景
CSS文本
CSS 链接
CSS 链接的四种状态
a:link --普通的、未被访问的链接 a:visited --用户已访问的链接 a:hover --鼠标指针位于链接的上方 a:active --链接被点击的时刻
下面是 CSS 文件内容：
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */
CSS 设置链接背景颜色
这个一样的简单，修改对应的属性 background-color 就好。 我们动手实验的话，就将刚才的 CSS 文件替换或者添加：
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
修改链接下划线
不是所有的时候我们都需要链接下面的下划线，有时很影响美观。所以这里我们要在 link 属性中加入 text-decoration 属性
CSS 列表
列表类型
列表有无序，有序之分，无序列表又可以用不同的标记来区分。而 list-style-type 这个属性我们就可以用来控制标记类型
<ul class="circle">
<li>php中文网</li>
<li>php中文网</li>
</ul>
<ul class="square">
<li>php中文网</li>
<li>php中文网</li>
</ul>
<ol class="upper-roman">
<li>php中文网</li>
<li>php中文网</li>
</ol>
<ol class="lower-alpha">
<li>php中文网</li>
<li>php中文网</li>
</ol>ul.circle {list-style-type:circle}
ul.square {list-style-type:square}
ol.upper-roman {list-style-type:upper-roman}
ol.lower-alpha {list-style-type:lower-alpha}列表项图像
有时，常规的标志是不够的。你可能想对各标志使用一个图像，这可以利用 list-style-image 属性做到：
ul li {list-style-image : url(xxx.gif)}
只需要简单地使用一个 url() 值，就可以使用图像作为标志。
列表标志位置
CSS2.1 可以确定标志出现在列表项内容之外还是内容内部。这是利用 list-style-position 完成的。
简写列表样式
为简单起见，可以将以上 3 个列表样式属性合并为一个方便的属性：list-style，就像这样：
li {list-style : url(example.gif) square inside}
list-style 的值可以按任何顺序列出，而且这些值都可以忽略。只要提供了一个值，其它的就会填入其默认值
CSS表格
border-collapse ---设置是否把表格边框合并为单一的边框。
border-spacing ---设置分隔单元格边框的距离。
caption-side --- 设置表格标题的位置。
empty-cells ---设置是否显示表格中的空单元格。
table-layout ---设置显示单元、行和列的算法
CSS轮廓
涉及到的属性有：
outline 在一个声明中设置所有的轮廓属性。
outline-color 设置轮廓的颜色。
outline-style 设置轮廓的样式。
outline-width 设置轮廓的宽度
元素分类
在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有：
<img>、<input>
块级元素
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度
内联元素
内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变
内联块级元素
特点
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置
CSS盒子模型
盒子的组成包括： margin(外边距);border(边框);padding(内边距);content(内容) 正文框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素
盒子内边距
内边距在正文（content）外，边框（border）内。控制该区域最简单的属性是 padding 属性。padding 属性定义元素边框与元素内容之间的空白区域
<table border="1">
<tr>
<td>
<h1>正文</h1>
</td>
</tr>
</table>h1 {
padding-left: 5cm;
padding-right: 5cm;
padding-top: 30px;
padding-bottom: 30px;
}盒子边框
设置边框宽度
td {border-style: solid; border-width: 15px 5px 15px 5px;}
//或者
border-style: dashed;
border-top-width: 15px;
border-right-width: 5px;
border-bottom-width: 15px;
border-left-width: 5px;设置边框颜色
border-color: blue rgb(25%,35%,45%) #909090 red;盒子外边距
<div class="wb">
<div class="bk">
<div class="nj">
<div class="zw">
php中文网
</div>
</div>
</div>
</div>.wb{
margin: 100px;
}
.bk{
border-style: groove;
}
.nj{
padding: 10px;
}
.zw{
background-color: cornflowerblue;
}
盒子宽度与高度
盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。
因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界
元素的高度也是同理
div{
width:200px;
padding:20px;
border:1px solid red;
margin:10px;
}元素的实际长度为：10px+1px+20px+200px+20px+1px+10px=262px。在chrome浏览器下可查看元素盒模型，如下图：
盒子填充
元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)
div{padding:20px 10px 15px 30px;}
顺序一定不要搞混。可以分开写上面代码：
div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}
如果上、右、下、左的填充都为10px;可以这么写
div{padding:10px;}
如果上下填充一样为10px，左右一样为20px，可以这么写：
div{padding:10px 20px;}
盒子边界
元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码：
div{margin:20px 10px 15px 30px;}
也可以分开写：
div{
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;
}
如果上右下左的边界都为10px;可以这么写：
div{ margin:10px;}
如果上下边界一样为10px，左右一样为20px，可以这么写：
div{ margin:10px 20px;}
总结一下：padding和margin的区别，padding在边框里，margin在边框外
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>边距</title>
<style type="text/css">
div{
width:300px;
height:300px;
border:1px solid red;
}
#box1{margin-bottom:300px;}
</style>
</head>
<body>
<div id="box1">box1</div>
<div id="box2">box2</div>
</body>
</html>CSS定位
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置
CSS 有三种基本的定位机制：
普通流:
元素按照其在 HTML 中的位置顺序决定排布的过程
浮动:
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
绝对定位:
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
定位属性:
position,将元素放在一个静态的,相对的,绝对的,或固定的位置
通过对 top,left,right,bottom 这四个属性的赋值让元素向对应的方向偏移
overflow 设置元素溢出其区域发生的事情
clip 设置元素的显示形状,多用于图片
vertical-align 设置元素的垂直对其方式
z-index 设置元素的堆叠顺序
<div class="position1"></div>
<div class="position2"></div>
<p>PHP1</p>
<p>PHP2</p>
<p>PHP3</p>
<p>PHP4</p>.position1{
position: absolute;
left: 60px;
width: 100px;
height: 100px;
background-color: cornflowerblue;
z-index: 2;
}
.position2{
width: 100px;
height: 100px;
background-color: aquamarine;
position: relative;
left:10px;
top: 10px;
z-index: 1;
}CSS浮动
这里涉及到的属性就是 float,其值可以赋值为:
left:元素向左浮动 right:元素向右浮动 none:不浮动 inherit:从父级继承浮动的属性
还有一个就 clear 属性: 主要用于去掉向各方向的浮动属性(包括继承来的属性)
<div class="container">
<div class="qd"></div>
<div class="wd"></div>
<div class="ed"></div>
<div class="text">hello php</div>
</div>.qd{
width: 100px; height: 100px;
background-color: lightskyblue;
float: left;
}
.wd{
width: 100px;
height: 100px;
background-color: lightseagreen;
float: left;
}
.ed{
width: 100px; height: 100px;
background-color: lightsalmon;
float: right;
}
.text{ clear: both;
}CSS 尺寸
尺寸属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。 涉及到的属性有
height-- 设置元素的高度。 line-height --设置行高。 max-height-- 设置元素的最大高度。 max-width --设置元素的最大宽度。 min-height --设置元素的最小高度。 min-width --设置元素的最小宽度。 width --设置元素的宽度
.p1{ line-height: normal; width: 400px;
}.p2{ line-height: 50%; width: 400px;
}.p3{ line-height: 200%; width: 400px;
}CSS 导航栏
CSS图片
CSS继承
CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代
CSS特殊性
有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个？浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>特殊性</title>
<style type="text/css">
p{color:red;}
.first{color:green;}/*因为权值高显示为绿色*/
span{color:pink;}/*设置为粉色*/
p span{color:purple;}
</style>
</head>
<body>
<h1>勇气</h1>
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
</body>
</html>CSS层叠
层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。
元素选择器
最常见的选择器就是元素选择器,文档的元素就是最基本的选择器.
就像这些: h1{}. a{}等
css 文件可以这样实现:
h1{ color: cadetblue;
}
选择器分组
<h1>php中文网</h1>
<h2>php中文网</h2>
<h3>php中文网</h3>
<h4>php中文网</h4>h1{
color: cadetblue;
}
h2{
color: cadetblue;
}
h3{
color: cadetblue;
}
h4{
color: cadetblue;
}
//或者
h1,h2,h3,h4{
color: cadetblue;
}
//或者
*{ color: cadetblue;
}类选择器
类选择器允许以一种独立与文档元素的方式来制定样式
例如: .class{}(注意是点开头的哦,这是类选择器的标志,点后面是属性名,大括号里面就是具体的设置)
<p class="p1">php中文网</p>
<p class="p2">php中文网</p>
<p class="p3">php中文网</p>.p1{ color: cadetblue;
}.p2{ font-size: 20px;
}.p3{ font-style: italic;
}类选择器结合元素选择器
<h1 class="div">php中文网</h1>h1.div{color: cadetblue;
}多类选择器
<p class="p1 p2">php中文网</p>.p1.p2{ font-style: italic;
}id选择器
id 选择器的引入是用"#",就和类选择器的"."是一样的效果
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识html标签</title>
<style type="text/css">
</style>
</head>
<body>
<h1>勇气</h1>
<p>三年级时，我还是一个<span id="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<p>到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
</body>
</html>#stress{
color:red;
}在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别：
1、为标签设置id="ID名称"，而不是class="类名称"。
2、ID选择符的前面是井号（#）号，而不是英文圆点
属性选择器
对带有指定属性的 HTML 元素设置样式。
可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
注释：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择
属性选择器
下面的例子为带有 title 属性的所有元素设置样式：
[title]{color:red;}
属性和值选择器
下面的例子为 title="php" 的所有元素设置样式：
[title=php]{border:5px solid blue;}
属性和值选择器 - 多个值
下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：
[title~=hello] { color:red; }
下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：
[lang|=en] { color:red; }
设置表单的样式
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：
input[type="text"]{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}
input[type="button"]{
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}
包含（后代）选择器
这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。
总结：>作用于元素的第一代后代，空格作用于元素的所有后代
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>后代选择器</title>
<style type="text/css">
.first span{color:red;}
.food>li{
border:1px solid red;/*添加边框样式（粗细为1px， 颜色为红色的实线）*/
}
</style>
</head>
<body>
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>
</body>
</html>子选择器
大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码：
.food>li{border:1px solid red;}
这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框
派生选择器
派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。 比方说，你希望列表中的 strong 元素变为红色，而不是通常的黑色，可以这样定义一个派生选择器：
li strong{ color: red;
}
<!doctype html><html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="mycss.css" type="text/css">
<style>
li strong {
color:red;
}
</style>
</head>
<body>
<p><strong>我是黑色，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
<u1>
<li><strong>我是红色，这是因为 strong 元素位于 li 元素内。</strong></li>
</u1>
</body></html>
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
