CSS就是Cascading Style Sheet，它可以用来设定怎样显示网页中的element。
HTML 4.0以上支援CSS。
简单一点来说就是CSS可以帮我们省略掉很多重复的HTML code，也可以让网页的element更加统一。
比如说我们的网页中有很多个段落（paragraph），我们使用了HTML中的<p>来分段。
可是如果我们没有使用CSS而每一段都想要有同样的显示格式，我们的HTML code会是这样：
<p align="center"><font face="Arial" color="red">This is paragraph 1.</font></p>
<p align="center"><font face="Arial" color="red">This is paragraph 2.</font></p>
可是如果我们使用了CSS的话，我们的HTML code将是这样：
<head>
<style type="text/css">
p
{
font-family:"Arial";
color:red;
text-align:center;
}
</style>
</head>
<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
有没有注意到你只需要设定一次CSS中的<p>element，就可以在整个网页中简单地控制<p>tag的element？
这样可以省去web designer修改和整理网页所需的时间。
CSS的Syntax
CSS由三个部分组成：selector，property和value：
selector {property:value}
通常selector就i是你想设定的HTML element名称，property就是相关element的attribute名称，而value就是attribute可接受的数值。
例子：
<body bgcolor="blue">
...
</body>
可以被写成：
<head><style type="text/css">
body
{
background-color:blue;
}
</style>
<body>
...
</body>
注：body是selector，background-color是property，blue就是value。
除此之外，CSS也允许使用class和id来自定义selector。
id selector
比如你的HTML里有element的id叫做para1：
This is paragraph 1.
你可以在CSS的selector名称的前面加入#来使用：#para1 {
font-family:"Arial";
color:red;
text-align:center;
}
class selector
比如你的HTML里有element的class叫做para1：<p class="para1">This is paragraph 1.</p>
你可以在CSS的selector名称的前面加入.来使用：
.para1 {
font-family:"Arial";
color:red;
text-align:center;
}
id和class不同的地方就是id是unique的，只能被element define一次；而class是可以被element重复define。
怎样在CSS中加入comment？
CSS中的comment由/*开始，由*/结束。
body
{
/*This is a comment.*/
background-color:blue;
}
三种把CSS嵌入HTML的方法：External style sheet，Internal style sheet和Inline style。
External style sheet是将所有define的CSS储存在另一个.CSS的file里，然后用<link>tag衔接CSS。
例子：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
Internal style sheet就是把CSS写在<head>和</head>之间。
Inline style是把CSS直接写在element里，可是这样做让CSS失去了它省略的好处。
例子：
<p style="font-family:Arial;color:red;text-align:center">This is paragraph 1.</p>
注：如果HTML里拥有超过一个设定同样element的CSS出现，那么最后被render的CSS将会显示其效果。
No comments:
Post a Comment