您的位置：首页 > Web前端 > CSS

在网页中添加样式

2015-12-03 20:10 447 查看

要最大限度的发挥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;
}

效果：

基础小练习（大神路过忽略~~~）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航