- 三种在HTML中添加CSS方法
1 使用行内样式,即直接在标签内使用样式属性
2 在文件头部使用样式标签<style>
3 在头部链接样式表stylesheet
- 举例
1 使用行内样式
要求:修改链接样式
<li><a style="color: green;" href="contact.html">Contact Us</a></li>
<!...行内样式,对所有链接进行颜色设定,该方法不推荐,很麻烦!但可使用行内样式覆盖不同样式...>
<li><a href="prices/freshwater-fish-prices.html">Price List</a></li>
<li><a href="http://www.163.com" target="_blank">Link to Netease Web</a></li>
<li><a href="downloads/all-prices.pdf">Download C++ book</a></li>
缺点:若网页上有一百多个链接,想要所有链接都显示红色,则需要在网页中每个a标签中添加style属性,工作量大;
偶尔情况下,可使用行内样式覆盖不同样式;
2 在head标签中添加style标签
要求:修改导航部分的链接显示颜色为红色
步骤:先找到导航部分对应ID,即navigation,在head标签内添加"#navigation",再加上标签a表示对navigation ID中的a标签进行样式修改;然后以花括号将样式修改括起来;
<head>
<meta charset="utf-8" />
<meta name="keywords" content="fish, smelly, trout, shark">
<meta name="description" content="We shell the smelliest fish online, guranteed!">
<title>my first web page</title>
<style>
#navigation a{
color: red;
}
</style>
</head>
缺点:假设有50多个网页,每个网页的每个链接都想变成红色,则需要在每个网页的head标签内添加style标签,工作量大;
3 在head标签内添加link标签
link标签中,属性rel表示该网页与stylesheet关联,属性style表示链接文件的类型是text/css文件,属性href指定链接地址;
<head>
<meta charset="utf-8" />
<meta name="keywords" content="fish, smelly, trout, shark">
<meta name="description" content="We shell the smelliest fish online, guranteed!">
<title>my first web page</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<!...CSS链接标签,浏览器会根据CSS引用去开发者或用户指定的地址得到CSS文件来设计网页...>
<!...链接标签与该HTML文件关联,是样式表,以CSS文本类型,寻找CSS文件的地址...>
</head>
每个网页都含有该语句,则在main.css中有所变化,这些网页都会相应变化;
h1{
color: blue;
text-decoration: underline; /*h1标签有下划线*/
text-transform: uppercase; /*h1标签以大写字母显示*/
}