css + html
法3：外部样式表（引用一个样式表文件）
如何在一个HTML文档里引用一个外部样式表文件（style.css）呢？答案是：在HTML文档里创建一个指向外部样式表文件的链接（link）即可，就像下面这样：
<linkrel="stylesheet" type="text/css" href="style/style.css/>
代码必须被插入HTML代码的头部（header），即放在标签<head>和标签</head>之间
法2：内部样式表（style元素）
为HTML应用CSS的另一种方法是采用HTML元素style。比如像这样
http://zh.html.net/tutorials/css/lesson3.asp
font属性的值应按以下次序书写：
font-style | font-variant | font-weight | font-size | font-family
text property
text-align,text-indent,text-transform,text-space
linkproperty:CSS允许你根据链接是未访问的、已访问的、活动的、是否有鼠标悬停等分别定义不同的属性。这样，我们便可为网站增添奇特而有用的效果。你需要通过伪类（pseudo-class）来控制这些效果。
伪类（pseudo-class）令你可以在为HTML元素定义CSS属性的时候将条件和事件考虑在内
<p><ahref="/tutorials/css/lesson6_ex2.asp">这是一个访问过的链接</a></p>
a:visited {color: #660099; }
a:link
a:hover
a:hover {text-transform: uppercase; font-weight:bold; color:blue;background-color:yellow; }
元素的分类与标识（class和id）
有时，你希望对特定元素或者特定一组元素应用特殊的样式。在这一课，我们将深入学习如何利用class和id来为所选元素指定属性。
a {color: blue; } a.whitewine { color: #FFBB00; }
<p>制造白葡萄酒的葡萄：</p><ul> <li><a href="ri.htm" class="whitewine">雷司令（Riesling）</a></li><li><a href="ch.htm" class="whitewine">夏敦埃（Chardonnay）</a></li><li><a href="pb.htm" class="whitewine">白比诺（PinotBlanc）</a></li> </ul>
利用id标识元素
<h2 id="c1-2">第1.2节</h2> #c1-2 {color: red; }
第8课：组织元素（span和div)
<p>早睡早起
使人<spanclass="benefit">健康</span>、
<spanclass="benefit">富裕</span>
和<spanclass="benefit">聪颖</span>。</p
span.benefit {color:red; } 为span元素添加样式。不过正如我们在上一课所学的，如果采用id的话，你必须为这三个span元素各自分别指定一个唯一的id
span的使用局限在一个块元素内，而div可以被用来组织一个或多个块元素。
#democrats {background:blue; } #republicans { background:red; }
<divid="democrats"> <ul> <li>富兰克林·D·罗斯福</li><li>哈利·S·杜鲁门</li><li>约翰·F·肯尼迪</li><li>林登·B·约翰逊</li><li>吉米·卡特</li><li>比尔·克林顿</li></ul> </div>
第9课：盒状模型
body {margin-top:100px; margin-right:40px; margin-bottom:10px; margin-left:70px; }
为与素设置内边距
内边距（padding）也可以被理解成“填充物”。这样理解是合理的，因为内边距并不影响元素间的距离，它只定义元素的内容与元素边框之间的距离
h1 {background: yellow; padding: 20px 20px 20px 80px; } h2 { background: orange; padding-left:120px; }
第11课：边框
h1 {border-width: thick; border-style: dotted; border-color:gold; }
12：高度和宽度
div.box{ width: 200px; border: 1px solid black; background: orange; }
第13课：浮动元素（float
第14课：元素的定位
CSS定位令你可以将一个元素精确地放在页面上你所指定的地方。联合使用定位与浮动（参见第13课），你将能够创建多种高级而精确的布
h1 {position:absolute; top: 100px; left: 200px; }
第15课：用z-index进行层次堆叠
html
<p>用于段落</p><b>显示粗体文本</b><h1>标题</h1><h2>子标题</h2><h3>子子标题</h3>
写一些文字<br/>重起一行再写一些文字
另一个空元素是<hr/>，它的作用是画一条水平线
<i>斜体</i><small>小字体</small><br /> 换行 <hr/> 水平线 <ul>无序列表</ul><ol>有序列表</ol><li>列表项</li>
第7课：属性
<ahref="http://www.html.net/">这是一个指向HTML.net的链接</a>
<imgsrc="logo.gif" alt="HTML.net logo">
<imgsrc="logo.gif" title="上HTML.net网站学习HTML"> 如果你把鼠标光标停留在该图片上（别点击它），提示文字“上HTML.net网站学习HTML”便会出现。
另外两个重要的属性是width和height
表格：<tableborder="1" width="30%">宽度是屏幕宽度的30％
表格有很多属性，比如下面这两个：
align：指定整个表格、某行或某个单元格里内容的水平对齐方式，比如左对齐、居中或右对齐。
valign：指定某个单元格里内容的垂直对齐方式，比如靠上、置中或靠下
colspan和rowspan这两个属性用于创建特殊的表格
<html><head> <title>我的第一个CSS页面</title> <style type="text/css"> h1{font-size:30px; font-family:宋体;} h2 {font-size:15px; font-family:黑体;} p{font-size:8px; font-family:"隶书";} </style></head> <body> <h1>我的第一个CSS页面</h1> <h2>欢迎参观我的第一个CSS页面</h2><p>你可以在这里了解CSS的原理</p></body> </html>
要将CSS嵌入文档，你只需通过标签<styletype="text/css">告诉浏览器该段为CSS即可
浙公网安备 33010602011771号