HTML5与CSS样式应用
本文介绍了HTML5中使用CSS样式的三种方法：内联样式、内部样式表及外部样式表，并通过实例展示了如何有效利用这些方法提升网页设计质量。
要最大限度的发挥HTML5的功能，必须熟悉CSS标准。（初级仅作练习...大神绕道啦）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Html5 feature Detection</title> </head> <body> 有三种在网页中使用样式的方法 <br> 一种是直接把样式信息嵌入到元素里，这就要用到style属性； <h1 style="color: green">Inline styles are sloppy Styles</h1> <br> 这种标记非常方便，但会另标签杂乱无章 </body> </html>
效果：
第二种是把全部样式嵌入到<style>元素里，而这个<style>元素要放到页面的<head>部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>stylesheet</title>
<style>
...
</style>
</head>
<body>
<h1>Is it right?</h1>
</body>
</html>
这样写代码能够把样式与代码分开，但最终它们还是在一个文件夹里。这种方式一次性的样式（也就是不想在其他页面中重用的样式），也适合简单的测试和示例。但是，对于真正的专业站点而言，这种做法是不值得提倡，因为页面因此会变得臃肿不堪。
第三种方式是使用<link>元素在<head>部分链接外部样式表文件。下面例子告诉浏览器应用名为tostyle.css的外部样式表中的样式：
<head>
<meta charset="UTF-8">
<title>stylesheet</title>
<link rel="stylesheet" type="text/css" href="tostyle.css">
</head>
这种方式最常用，效果也最好。
例如简单小示例：
styleexercise.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>stylesheet</title>
<link rel="stylesheet" href="css/tostyle.css">
</head>
<body>
<div class="h1">It is ...</div>
<h1>I like it!</h1>
<div class="h2">The second one is...</div>
<h2>I dislike it!</h2>
<a href="www.baidu.com"></a>
<h3 class="Art">html5 is ....</h3>
<p class="Topic">This topic is about ....</p>
</body>
</html>
其样式表：tostyle.css
@charset "utf-8";
/*selector {
property: value;
property:value;
}*/
h1 {
text-align: center;
color: green;
background-color: blue;
}
h2 {
text-align: center;
text-decoration: none;
position: relative;
display: block;
color: red;
background: #946AA5;
}
.Art {
font-family: Garamond, serif;
font-size: 24px;
color: #DD7900;
text-align: center;
}
p.Topic {
font-weight: 54px;
font-size: 50px;
background: #5DB731;
text-align: center;
}
效果：
基础小练习（大神路过忽略~~~）
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
