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即可