如果说HTML是搭建房子的原材料，比如钢铁，水泥，木头，那么CSS则是房子的设计图纸，也就是房子的样式，是古典园林风格还是哥特式建筑。
因此HTML与CSS是相辅相成的，只有HTML没有CSS，那么做出来的网页可读性差，交互性也差，缺乏美。只有CSS而没有HTML那么网页根本就是空谈。
下面用HTML于CSS搭建一个静态网页。
注意以下的元素可以理解为标签。
合法的HTML5
- ①一定要以<!doctype html>开头除非你在写HTML4和XHTML。
- ②<html>元素不能没有它，这是Web页面最顶层元素或者叫根元素，其它所有元素都嵌套其中。
- ③要使用head和bodyhead中要指出编码方式。
- ④head中一定要有title 。
CSS嵌入HTML
CSS嵌入HTML有两种方式，一种是在head中用style标记。
<head>
<style type="text/css">
......
</style>
</head>
|
1 2 3 4 5 |
<head> <style type="text/css"> ...... </style> </head> |
另外一种使用link标记，CSS中的rel属性指定了HTML文件与所链接文件之间的关系，即我们要创建一个样式表。
<link type="text/css" rel="stylesheet" href="newindex.css">
|
1 |
<link type="text/css" rel="stylesheet" href="newindex.css"> |
注意点：
样式表的顺序很重要，下面的会覆盖上面的
元素的ID
可以为任意元素增加一个ID属性，这样可以利用CSS为每个元素做不同的设计。
例如我为div指定一个属性
<div id=”main”></div>
元素的类
可以为不同元素指定一个类
<span class=”slogan”></span>
这里的span的类就是slogan
元素的CSS
用CSS为每个元素做不同的设计可以有以下几种方法（给出最常用的几种）
①对指定的元素进行设计（不使用ID）
body{
background-color: antiquewhite;
font-family: Georgia, "Times New Roman", Times,Serif;
font-size: small;
margin: 0px;
}
|
1 2 3 4 5 6 |
body{ background-color: antiquewhite; font-family: Georgia, "Times New Roman", Times,Serif; font-size: small; margin: 0px; } |
②根据ID进行设计
假设一个元素的ID是main
例如：<div id=”main”></div>
则CSS为：
#main{
background: azure top left;
font-size: 105%;
padding: 20px;
margin: 0px 330px 10px 10px;
}
|
1 2 3 4 5 6 |
#main{ background: azure top left; font-size: 105%; padding: 20px; margin: 0px 330px 10px 10px; } |
③根据类进行设计
假设一个元素的类是slogan
例如：<span class=”slogan”></span>
则CSS为：
.slogan{
color: indigo;
}
|
1 2 3 |
.slogan{ color: indigo; } |
④可以用逗号为不同的元素指定相同的CSS。
实例
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Starbuzz Coffee</title>
<link type="text/css" rel="stylesheet" href="newindex.css">
</head>
<body>
<header>
<p>
<img src="hyxd.JPG" alt="ok" width="180">
welcome to omegaxyz.com
</p>
<aside>
<p class="hside">
<img src="硅谷.JPG" width="200"><br>
<script type="text/javascript">
var s="this is sidebar";
for(var i=0;i<40;i++){
document.write(s+'<br>');
}
</script>
<span class="slogan">
FAST<br>
FRIENDLY<br>
</span>
</p>
<p>
You can extend your horizons and absorb others' perspectives.
As TED puts it: Ideas worth spreading. Find your own way. Have fun!
</p>
</aside>
</header>
<nav>
<ul>
<li><a href="omegaxyz.com">HOME</a></li>
<li><a href="omegaxyz.com">LINK</a></li>
<li><a href="omegaxyz.com">FRIEND</a></li>
<li><a href="omegaxyz.com">COMMENT</a></li>
<li><a href="omegaxyz.com">MAP</a></li>
</ul>
</nav>
<div id="main">
<h1>OmegaXYZ.com</h1>
<p>
<script type="text/javascript">
var s="Many people come out a good idea but lose it in seconds. What a pity!\n" +
" Sometimes we want to write. There may be several reasons here such as reminding, spreading or just seeking fun.\n" +
" And why is it beneficial to write and make a site? This website is established for recording the path of study\n" +
" and research in case one day I want to look back on the spark I got. You can find some useful information here to improve yourself.\n" +
" You can extend your horizons and absorb others' perspectives.\n" +
" As TED puts it: Ideas worth spreading. Find your own way. Have fun!";
for(var i=0; i<15;i++){
document.write(s);
}
</script>
</p>
</div>
<footer>
©2018 OmegaXYZ.com
<br>
this is fucking ok.
</footer>
</body>
</html>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Starbuzz Coffee</title> <link type="text/css" rel="stylesheet" href="newindex.css"> </head> <body> <header> <p> <img src="hyxd.JPG" alt="ok" width="180"> welcome to omegaxyz.com </p> <aside> <p class="hside"> <img src="硅谷.JPG" width="200"><br> <script type="text/javascript"> var s="this is sidebar"; for(var i=0;i<40;i++){ document.write(s+'<br>'); } </script> <span class="slogan"> FAST<br> FRIENDLY<br> </span> </p> <p> You can extend your horizons and absorb others' perspectives. As TED puts it: Ideas worth spreading. Find your own way. Have fun! </p> </aside> </header> <nav> <ul> <li><a href="omegaxyz.com">HOME</a></li> <li><a href="omegaxyz.com">LINK</a></li> <li><a href="omegaxyz.com">FRIEND</a></li> <li><a href="omegaxyz.com">COMMENT</a></li> <li><a href="omegaxyz.com">MAP</a></li> </ul> </nav> <div id="main"> <h1>OmegaXYZ.com</h1> <p> <script type="text/javascript"> var s="Many people come out a good idea but lose it in seconds. What a pity!\n" + " Sometimes we want to write. There may be several reasons here such as reminding, spreading or just seeking fun.\n" + " And why is it beneficial to write and make a site? This website is established for recording the path of study\n" + " and research in case one day I want to look back on the spark I got. You can find some useful information here to improve yourself.\n" + " You can extend your horizons and absorb others' perspectives.\n" + " As TED puts it: Ideas worth spreading. Find your own way. Have fun!"; for(var i=0; i<15;i++){ document.write(s); } </script> </p> </div> <footer> ©2018 OmegaXYZ.com <br> this is fucking ok. </footer> </body> </html> |
CSS
body{
background-color: antiquewhite;
font-family: Georgia, "Times New Roman", Times,Serif;
font-size: small;
margin: 0px;
}
header{
background-color: cornsilk;
text-align: center;
font-size: 10px;
height: 108px;
}
nav{
position: fixed;
top: 0;
}
#main{
background: azure top left;
font-size: 105%;
padding: 20px;
margin: 0px 330px 10px 10px;
}
aside{
background: chartreuse;
font-size: 105%;
padding: 15px;
margin: 0px 10px 10px 10px;
width: 280px;
float: right;
}
footer{
background-color: black;
color: azure;
text-align: center;
padding: 15px;
margin: 10px;
font-size: 90%;
clear: right;
}
h1{
font-size: 120%;
color: black;
}
.slogan{
color: indigo;
}
.hside{
text-align: center;
line-height: 1.8em;
}
nav{
background-color: aqua;
margin: 10px 10px 0px 10px;
}
nav ul{
list-style-type: none;
padding: 5px 0px 5px 0px;
}
nav ul li{
display: inline;
padding: 5px 10px 5px 10px;
}
nav ul li a:link, ul li a:visited{
color: red;
border-bottom: none;
font-weight: bold;
}
nav ul li.selected{
background-color: indigo;
}
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
body{ background-color: antiquewhite; font-family: Georgia, "Times New Roman", Times,Serif; font-size: small; margin: 0px; } header{ background-color: cornsilk; text-align: center; font-size: 10px; height: 108px; } nav{ position: fixed; top: 0; } #main{ background: azure top left; font-size: 105%; padding: 20px; margin: 0px 330px 10px 10px; } aside{ background: chartreuse; font-size: 105%; padding: 15px; margin: 0px 10px 10px 10px; width: 280px; float: right; } footer{ background-color: black; color: azure; text-align: center; padding: 15px; margin: 10px; font-size: 90%; clear: right; } h1{ font-size: 120%; color: black; } .slogan{ color: indigo; } .hside{ text-align: center; line-height: 1.8em; } nav{ background-color: aqua; margin: 10px 10px 0px 10px; } nav ul{ list-style-type: none; padding: 5px 0px 5px 0px; } nav ul li{ display: inline; padding: 5px 10px 5px 10px; } nav ul li a:link, ul li a:visited{ color: red; border-bottom: none; font-weight: bold; } nav ul li.selected{ background-color: indigo; } |
效果：（有点丑）