CSS 创建
浏览器在读取到一个CSS的时候,会根据这些CSS来定义HTML的内容如何展示。
那么我们怎样添加样式呢?
有三种方法可以添加样式:
- 内联样式(Inline style)
- 内部样式表(Internal style sheet)
- 外部样式表(External style sheet)
那么内联样式怎么添加呢?
内联样式有一些缺陷,会损失掉样式表的优势,所以尽量不去使用内联样式呢,如果你的样式只在元素上使用一次,那你可以考虑使用内联。
我们通常使用style属性来定义内联样式,style属性中包含所有的CSS属性。
举例说明,我们怎样改变一个标题的颜色和右边的举例呢:
<h1 style="color:red;margin-right:5px">标题内容。</h1>
那么内部样式表怎么添加呢?
内部样式表我们一般使用在,有单个的文档需要一些特别的样式的时候。
我们通常使用
<head>
<style>
hr {color:red;}
p {margin-right:5px;}
body {color:url("images/test.gif");}
</style>
</head>
那么怎样添加外部样式表呢?
外部样式表一般用于,有很多的页面都需要使用样式的时候,我们可以定义一个通用的样式文件来灵活的改变整个页面的样式。举例说明:
<head>
<link rel="stylesheet" type="text/css" href="testStyle.css">
</head>
浏览器运行的时候会从testStyle.css中读取文件的样式,然后展示网页的内容。
举例文件样式表的样子:
p{color:red;}
test {margin-right:5px;}
test1 {background-image:url("/images/test.gif");}
注意: 不要在属性值与单位之间留有空格(如:“margin-right: 5 px” ),正确的写法是 “margin-right: 5px” 。