HTML加入CSS

来源：互联网发布：米思米2015选型软件编辑：程序博客网时间：2024/06/05 19:27

三种在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标签以大写字母显示*/}

0 0