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

HTML加入CSS

2016-05-05 19:03 513 查看
三种在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标签以大写字母显示*/
}


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航