Transcript 樣式單
樣式單（Styling Sheet）
樣式單是什麼？
樣式單的優點與缺點
加入樣式單的方式
行間樣式單
內嵌樣式單
外部樣式單
基本概念
樣式種類
樣式單是什麼？
樣式單是一種設定文字格式與版面布置的規格。
主要目的：用於網頁的排版，使得內容與外觀得以隔離。
W3C 在 1996 年 12 月公布 CSS1 樣式單語法與功能
的標準。
http://www.w3.org/pub/WWW/TR/REC-CSS1
W3C 在 1998 年 5 月公布 CSS2 樣式單語法與功能的
標準。
http://www.w3.org/pub/WWW/TR/REC-CSS2
樣式單的簡單範例
我們以底下的簡單 HTML 文件為例：
<HTML>
<HEAD>
<TITLE>Bach’s home page</TITLE>
</HEAD>
<BODY>
<H1>Bach’s home page</H1>
<P>Johann Sebastian Bach was a prolific composer.</P>
</BODY>
</HTML>
CSS 規則
假定想把 H1 元件的文字顏色改成藍色，我們可以使用以下的 CSS
規則：
H1 {color:blue}
CSS 規則由兩個部分所組成：
選擇項（selector）：如上例中的 H1。
宣告（declaration）：如上例中的 color:blue。
宣告又是由兩個部分所組成：
屬性（property）：如上例中的 color。
屬性值（value）：如上例中的 blue。
嵌入 CSS 規則
我們可以用好幾種方法把 CSS 規則加入網頁中。底下我們採用嵌入樣式
的方法：
<HTML>
<HEAD>
<TITLE>Bach’s home page</TITLE>
<STYLE type="text/css">
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>Bach’s home page</H1>
<P>Johann Sebastian Bach was a prolific composer.</P>
</BODY>
</HTML>
連結外部的 CSS 規則
通常我們會把 CSS 規則存在另一個檔案中，然後用 LINK 標籤連結
進來，如下例所示：
<HTML>
<HEAD>
<TITLE>Bach’s home page</TITLE>
<LINK rel="stylesheet" href="bach.css" type="text/css">
</HEAD>
<BODY>
<H1>Bach’s home page</H1>
<P>Johann Sebastian Bach was a prolific composer.</P>
</BODY>
</HTML>
CSS 規則的繼承
<HTML>
<HEAD>
<TITLE>Bach’s home page</TITLE>
<STYLE type="text/css">
BODY { color: red }
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>Bach’s home page</H1>
<P>Johann Sebastian Bach was a prolific composer.</p>
</BODY>
</HTML>
在前一頁的例子中，CSS 規則 BODY { color: red } 把網頁文字設為
紅色。由於 P 元件是 BODY 元件的子元件，因此 P 元件會繼承 BODY
元件的樣式設定。這使得 P 元件中的文字亦為紅色，即使我們並未設定
其樣式。
HTML
HEAD
TITLE
BODY
STYLE
H1
P
CSS 屬性範例
無樣式設定
CSS 提供超過 100 個屬性讓我們做各
種不同的排版設定。比方說：以下的樣
式會產生右下圖所示的結果。
<STYLE type="text/css">
BODY {
font-family: "Gill Sans", sans-serif;
font-size: 12pt;
margin: 3em;
}
</STYLE>
有樣式設定
樣式單的優點
可微調字與字之間的距離。
可調整行高
可調整各種邊界的寬度或高度
表格設計更具有彈性
使得網頁排版更簡單一致。
樣式單的缺點
不是每一種瀏覽器都完整地支援樣式單的功能。
譬如： Netscape 4.X 瀏覽器只支援少部份的功
能，而 IE. 4.0 則支援了大半的功能。
不過 IE5 和 Netscape 5 將完全支援樣式單的
功能。
加入樣式單的方式
行間樣式單（inline styling sheet）
內嵌樣式單（embedded styling sheet）
外部樣式單（external styling sheet）
行間樣式單
在 HTML 的元件中，以 style 屬性來設定樣式。
優點：最簡單易用的一種。
缺點：
提供的功能大部分都可用傳統的HTML屬性來達成
影響僅涵蓋元件的範圍
繁瑣
行間樣式單的格式
在 HTML 的標簽內加入樣式屬性。
樣式屬性的格式如下：
STYLE = ”屬性一:屬性值; 屬性二:屬性值; …”
屬性的設定必須含括在雙引號（”）之間。
屬性與屬性值之間以英文冒號（:）隔開
不同的屬性設定以英文分號（;）隔開。
行間樣式單的範例
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT=
"text/html; charset=Big5">
<TITLE>行間樣式單</TITLE>
</HEAD>
<BODY>
<P STYLE=“font:14pt 新細明體”>此段利用行間樣式單
將文字的大小設為 14 點。</P>
<P STYLE=“font:32pt 標楷體”>此段利用行間樣式單將
文字的大小設為 32 點。</P>
</BODY>
</HTML>
內嵌樣式單
樣式單定義於網頁<HEAD>元件 內。
優點：
影響範圍涵蓋整份網頁
網頁排版效果一致
缺點
無法同時應用於排版多張網頁
內嵌樣式單的格式
所有樣式的定義均設定於 <STYLE> 及
</STYLE> 之間。
<STYLE> 要在 <HEAD> 元件內。
定義 HTML 元件的樣式。
樣式定義中的欄位，以分號 (；)分隔。
欄位與設定值之間是用冒號 (：) 分隔。
樣式的設定需用大括號({})括起來。
內嵌樣式單的範例
<HEAD>
...
<STYLE><!-BODY { background:#FFFFFF; color:#000000;
margin-top:.25in; margin-left:.75in; margin-right:.75in}
H3 {font:14pt 新細明體; color:#0000FF}
P {font:12pt 標楷體; text-indent:0.5in}
A {color:#FF0000}
--></STYLE>
</HEAD>
<BODY>
...
外部樣式單
樣式單不直接附在HTML原始檔中，而是存於一
個以 .css為副檔名的檔案中
優點：影響範圍可及多張網頁
缺點：稍嫌複雜
外部樣式單的格式
將樣式單的設定儲存在一個.css 檔之中。
在 HTML 原始檔的 HEAD 元件中加入以下的
LINK 標籤：
<LINK rel=stylesheet
href= 外部樣式單檔案的 URL
type="text/css” >
.css 的範例
<!-- 檔案名稱：style.css -->
<STYLE><!-Body {background:#FFFFFF;color:#000000;
margin-top: 0.25in; margin-left:.74in; margin-right:.75in}
H3 {font:14pt 華康中黑體; color: #0000FF}
P {font:12pt 新細明體; text-indent: 0.5in}
A {color:#FF000}
--></STYLE>
連結外部樣式單
<HEAD>
...
<TITLE>外部樣式單</TITLE>
<LINK rel=stylesheet href="style.css" type="text/css">
</HEAD>
<BODY>
...
基本概念
文件樹（Document Tree）
選擇項（Selector）
樣式的定義方式
繼承
文件樹（Document Tree）
The tree of elements encoded in the source document. Each element in this
tree has exactly one parent, with the exception of the root element, which
has none.
HTML
HEAD
TITLE
BODY
STYLE
H1
P
選擇項（Selector）
選擇項可用來區隔相同元件的樣式。
選擇項可分成以下三種方式：
類別（CLASS）
識別名稱（ID）
語境（Contextual）
組合（Grouping）
若樣式宣告都一樣，我們可以把選擇項合併寫在一起，並用逗號分隔。
譬如以下的三條 CSS 規則：
H1 { font-family: sans-serif }
H2 { font-family: sans-serif }
H3 { font-family: sans-serif }
可合併寫成如下的一條 CSS 規則：
H1, H2, H3 { font-family: sans-serif }
選擇項一覽表
Pattern
Meaning
*
Matches any element (i.e., the universal selector).
E
Matches any E element (i.e., an element of type E).
Type selectors
EF
Matches any F element that is a descendant of an E element.
Descendant selectors
E>F
Matches element E when E is the first
child of its parent.
E+F
Matches any F element immediately preceded by an ekement E.
E:link
E:visited
E:active
E:hover
E:focus
E:lang(c)
Matches element E if E is the source anchor of a
hyperlink of which the target is not yet visited
(:link) or already visited (:visited).
Matches E during certain user actions.
Matches element of type E if it is in (human)
language c (the document language specifies how
language is determined).
E[foo]
Matches any E element with the "foo"attribute set
(whatever the value).
E[foo="warning"]
Matches any E element whose "foo“ attribute value
is exactly equal to "warning".
E[foo~="warning"] Matches any E element whose "foo“ attribute value
is a list of space-separated values, one of
which is exactly equal to "warning".
E[lang|="en"]
Matches any E element whose "lang“ attribute has a
hyphen-separated list of values beginning (from the left)
with "en".
E.myclass
The same as E[class~="myclass"].
E#myid
Matches any E element ID equal to "myid".
Universal Selector
The universal selector, written "*", matches the name of any element type. It
matches any single element in the document tree.
If the universal selector is not the only component of a simple selector, the "*"
may be omitted. For example:
• *[LANG=fr] and [LANG=fr] are equivalent.
• *.myclass and .myclass are equivalent.
• *#myid and #myid are equivalent.
Type Selectors
A type selector matches the name of a document language element type. A
type selector matches every instance of the element type in the document tree.
Example:
The following rule matches all H1 elements in the document tree:
H1 { font-family: sans-serif }
Descendant selectors
At times, authors may want selectors to match an element that is the
descendant of another element in the document tree (e.g., "Match those EM
elements that are contained by an H1 element"). Descendant selectors express
such a relationship in a pattern. A descendant selector is made up of two or
more selectors separated by whitespace. A descendant selector of the form
"A B" matches when an element B is an arbitrary descendant of some
ancestor element A.
範例：
For example, consider the following rules:
H1 { color: red }
EM { color: red }
Although the intention of these rules is to add emphasis to text by changing its
color, the effect will be lost in a case such as:
<H1>This headline is <EM>very</EM> important</H1>
We address this case by supplementing the previous rules with a rule that sets
the text color to blue whenever an EM occurs anywhere within an H1:
H1 { color: red }
EM { color: red }
H1 EM { color: blue }
範例：
The following selector:
DIV * P
matches a P element that is a grandchild or later descendant of a DIV element.
Note the whitespace on either side of the "*".
範例：
The selector in the following rule, which combines descendant and attribute
selectors, matches any element that (1) has the "href" attribute set and (2) is
inside a P that is itself inside a DIV:
DIV P *[href]
Child selectors
A child selector matches when an element is the child of some element. A
child selector is made up of two or more selectors separated by ">".
範例：
The following rule sets the style of all P elements that are children of BODY:
BODY > P { line-height: 1.3 }
範例：
The following example combines descendant selectors and child selectors:
DIV OL>LI P
It matches a P element that is a descendant of an LI; the LI element must be
the child of an OL element; the OL element must be a descendant of a DIV.
Adjacent sibling selectors
Adjacent sibling selectors have the following syntax: E1 + E2, where E2
is the subject of the selector. The selector matches if E1 and E2 share the
same parent in the document tree and E1 immediately precedes E2.
In some contexts, adjacent elements generate formatting objects whose
presentation is handled automatically (e.g., collapsing vertical margins
between adjacent boxes). The "+" selector allows authors to specify
additional style to adjacent elements.
範例：
The following rule states that when a P element immediately follows a MATH
element, it should not be indented:
MATH + P { text-indent: 0 }
範例：
The next example reduces the vertical space separating an H1 and an H2 that
immediately follows it:
H1 + H2 { margin-top: -5mm }
範例：
The following rule is similar to the one in the previous example, except that it
adds an attribute selector. Thus, special formatting only occurs when H1 has
class="opener":
H1.opener + H2 { margin-top: -5mm }
Matching attributes and attribute values
[att]
Match when the element sets the "att" attribute, whatever the
value of the attribute.
[att=val]
Match when the element’s "att" attribute value is exactly
"val".
[att~=val] Match when the element’s "att" attribute value is a spaceseparated list of "words", one of which is exactly "val". If
this selector is used, the words in the value must not contain
spaces (since they are separated by spaces).
[att|=val] Match when the element’s "att" attribute value is a hyphenseparated list of "words", beginning with "val". The match
always starts at the beginning of the attribute value. This is
primarily intended to allow language subcode matches (e.g.,
the "lang" attribute in HTML) as described in RFC 1766.
範例：
the following attribute selector matches all H1 elements that specify the "title"
attribute, whatever its value:
H1[title] { color: blue; }
範例：
In the following example, the selector matches all SPAN elements whose
"class" attribute has exactly the value "example":
SPAN[class=example] { color: blue; }
範例：
Here, the selector matches all SPAN elements whose "hello" attribute has
exactly the value "Cleveland" and whose "goodbye" attribute has exactly the
value "Columbus":
SPAN[hello="Cleveland"][goodbye="Columbus"] { color: blue; }
範例：
The following selectors illustrate the differences between "=" and "~=". The first
selector will match, for example, the value "copyright copyleft copyeditor"
for the "rel" attribute. The second selector will only match when the "href"
attribute has the value "http://www.w3.org/".
A[rel~="copyright"]
A[href="http://www.w3.org/"]
範例：
The following rule hides all elements for which the value of the "lang" attribute
is "fr" (i.e., the language is French).
*[LANG=fr] { display : none }
Class selectors
For style sheets used with HTML, authors may use the dot (.) notation as an
alternative to the "~=" notation when atching on the "class" attribute. Thus,
for HTML, "DIV.value" and "DIV[class~=value]" have the same
meaning. The attribute value must immediately follow the ".".
範例：
For example, we can assign style information to all elements with
class~="pastoral" as follows:
*.pastoral { color: green } /* all elements with class~=pastoral */
or just
.pastoral { color: green } /* all elements with class~=pastoral */
範例：
The following assigns style only to H1 elements with class~="pastoral":
H1.pastoral { color: green } /* H1 elements with class~=pastoral */
Given these rules, the first H1 instance below would not have green text, while
the second would:
<H1>Not green</H1>
<H1 class="pastoral">Very green</H1>
To match a subset of "class" values, each value must be preceded
by a ".", in any order.
範例：
For example, the following rule matches any P element whose "class"
attribute has been assigned a list of space-separated values that includes
"pastoral" and "marine":
P.pastoral.marine { color: green }
This rule matches when class="pastoral blue aqua marine" but does
not match for class="pastoral blue".
ID selectors
What makes attributes of type ID special is that no two such attributes can have
the same value; an ID attribute can be used to uniquely identify its element. In
HTML all ID attributes are named "id".
The ID attribute allows authors to assign an identifier to one element instance in
the document tree. CSS ID selectors match an element instance based on its
identifier. A CSS ID selector contains a "#" immediately followed by the ID
value.
範例：
The following ID selector matches the H1 element whose ID attribute has the
value "chapter1":
H1#chapter1 { text-align: center }
範例：
In the following example, the style rule matches the element that has the ID
value "z98y". The rule will thus match for the P element:
<HEAD>
<TITLE>Match P</TITLE>
<STYLE type="text/css">
*#z98y { letter-spacing: 0.3em }
</STYLE>
</HEAD>
<BODY>
<P id=z98y>Wide text</P>
</BODY>
範例：
However, the style rule will only match an H1 element that has an ID value of
"z98y". The rule will not match the P element in this example:
<HEAD>
<TITLE>Match H1 only</TITLE>
<STYLE type="text/css">
H1#z98y { letter-spacing: 0.5em }
</STYLE>
</HEAD>
<BODY>
<P id=z98y>Wide text</P>
</BODY>
Pseudo-elements and pseudo-classes
In CSS2, style is normally attached to an element based on its position in the
document tree. This simple model is sufficient for many cases, but some
common publishing scenarios may not be possible due to the structure of the
document tree. For instance, in HTML 4.0, no element refers to the first line of
a paragraph, and therefore no simple CSS selector may refer to it.
CSS introduces the concepts of pseudo-elements and pseudo-classes to permit
formatting based on information that lies outside the document tree.
Pseudo-elements
Pseudo-elements create abstractions about the document tree beyond those
specified by the document language. For instance, document languages do
not offer mechanisms to access the first letter or first line of an element’s
content. CSS pseudo-elements allow style sheet designers to refer to this
otherwise inaccessible information. Pseudo-elements may also provide style
sheet designers a way to assign style to content that does not exist in the
source document (e.g., the :before and :after pseudo-elements give access
to generated content).
:first-line pseudo-element
The :first-line pseudo-element applies special styles to the first formatted line
of a paragraph. For instance:
P:first-line { text-transform: uppercase }
The above rule means "change the letters of the first line of every paragraph to
uppercase". However, the selector "P:first-line" does not match any real
HTML element. It does match a pseudo-element that conforming user agents
will insert at the beginning of every paragraph.
範例：
<html>
<head>
<title>First line</title>
<STYLE type="text/css">
P { font-size: 12pt; line-height: 18pt }
P:first-line { text-transform: uppercase }
</STYLE></head>
<body>
<P>The first few words of an article in The Economist.</P>
</body>
</html>
:first-letter pseudo-element
The :first-letter pseudo-element may be used for "initial caps" and "drop
caps", which are common typographical effects. This type of initial letter is
similar to an inline-level element if its ’float’ property is ’none’, otherwise it
is similar to a floated element.
範例：
<HTML>
<HEAD>
<TITLE>Drop cap initial letter</TITLE>
<STYLE type="text/css">
P
{ font-size: 12pt; line-height: 18pt }
P:first-letter
SPAN
</STYLE>
</HEAD>
{ font-size: 200%; font-weight: bold;
float: left }
{ text-transform: uppercase }
<BODY>
<P><SPAN>The first</SPAN> few words of an article
in The Economist.</P>
</BODY>
</HTML>
範例：
<HTML>
<HEAD>
<TITLE>Initial cap the first letter</TITLE>
<STYLE type="text/css">
P
{ font-size: 12pt; line-height: 18pt }
P:first-letter
{ font-size: 200%; font-weight: bold }
SPAN
{ text-transform: uppercase }
</STYLE>
</HEAD>
<BODY>
<P><SPAN>The first</SPAN> few words of an article
in The Economist.</P>
</BODY>
</HTML>
:before and :after pseudo-elements
The :before and :after pseudo-elements can be used to insert generated
content before or after an element’s content.
（見以後的說明）
Pseudo-classes
Pseudo-classes classify elements on characteristics other than their name,
attributes or content; in principle characteristics that cannot be deduced from
the document tree. Pseudo-classes may be dynamic, in the sense that an
element may acquire or lose a pseudo-class while a user interacts with the
document. The exception is ’:first-child’, which can be deduced from the
document tree.
:first-child pseudo-class
The :first-child pseudo-class matches an element that is the first child of
some other element.
範例：
In the following example, the selector matches any P element that is the first child
of a DIV element. The rule suppresses indentation for the first paragraph of a DIV:
DIV > P:first-child { text-indent: 0 }
The link pseudo-classes: :link and :visited
User agents commonly display unvisited links differently from previously
visited ones. CSS provides the pseudo-classes ’:link’ and ’:visited’ to
distinguish them:
• The :link pseudo-class applies for links that have not yet been visited.
• The :visited pseudo-class applies once the link has been visited by the user.
範例：
If the following link:
<A class="external" href="http://out.side/">external link</A>
has been visited, this rule:
A.external:visited { color: blue }
will cause it to be blue.
The dynamic pseudo-classes: :hover, :active,
and :focus
The :hover pseudo-class applies while the user designates an element (with
some pointing device), but does not activate it. For example, a visual user
agent could apply this pseudo-class when the cursor (mouse pointer) hovers
over a box generated by the element.
The :active pseudo-class applies while an element is being activated by the
user. For example, between the times the user presses the mouse button and
releases it.
The :focus pseudo-class applies while an element has the focus (accepts
keyboard events or other forms of text input).
範例：
A:link { color: red }
/* unvisited links */
A:visited { color: blue }
/* visited links
*/
A:hover { color: yellow }
/* user hovers
*/
A:active { color: lime }
/* active links
*/
Note that the A:hover must be placed after the A:link and A:visited rules,
since otherwise the cascading rules will hide the ’color’ property of the
A:hover rule. Similarly, because A:active is placed after A:hover, the
active color (lime) will apply when the user both activates and hovers over
the A element.
樣式屬性值的種類
長度
百分比
顏色
URL
長度
長度屬性值的格式是：先寫正負號（+ 或 -，預設為 +）、次寫數值，
最後加上單位。長度單位有絕對或相對兩種形式。
絕對長度單位
cm
mm
in
pt
pc
centimeter（公分）
millimeter（公釐），1mm=0.1cm
inch（英吋），1in=2.54cm
points（點） ， 1pt=1/72in
pica（匹卡），1pc=12pt
相對長度單位
em
ex
px
目前字型的大小
目前字型中，字母 x 的高度（約為字型大小的一半）
像素
百分比
百分比屬性值的格式是：先寫正負號（+ 或 -，預設為 +）、次寫數
值，最後加上英文百分號字元（%）。當然，其中的數值必須介於 0
到100 之間。 百分比是一種相對的屬性值。通常百分比是相對於元件
的字型大小而言。
範例：
底下的規則把 P 元件的行高設定為字型大小的 1.2 倍。
P { line-height:120% }
顏色
顏色可以用名稱或 RGB 值兩種方式來指定顏色。 我們可以使用下表
所示的十六種顏色的名稱來指定顏色。
你也可以使用以下四種 RGB 值的格式來指定顏色：
#rrggbb
六位十六進位數字，其中的 rr, gg, 與 bb
分別指定紅綠藍三色的成分。它們的最小值
為 00 (0)，最大值 為 ff (255)。
#rgb
三位十六進位數字，其值代表 #rrggbb，而
非 #r0g0b0，譬如：#fb0 的值是
#ffbb00，而不是 #f0b000）。
rgb(r,g,b)
r, g, 與 b 分別為紅綠藍三色的成分值。它
們的值必須是 一個小於256的十進位正整數。
rgb(r%, g%, b%)
r%, g%, 與 b% 分別為紅綠藍三色的成分
百分比。
URL
URL 屬性值的格式為：url(網址)。譬如以下的樣式：
BODY {background:url(http://www.pu.edu.tw/welcome.gif)}
設定網頁背景使用 URL 為 http://www.pu.edu.tw/welcome.gif 的
圖片。
如果你使用檔案路徑 UR 於外部樣式單中，則該 URL 是相對於外部樣式
單所在的路徑，而非相對於使用該外部樣式單的網頁路徑。舉例來說，
假定某張網頁 web.html 所使用的外部樣式單 mystyle.css 含有以下
的樣式：
BODY {background:url(welcome.gif)}
則 welcome.gif 這個圖片檔案是與 mystyle.css 同目錄，而不是與
web.html 同目錄。
繼承（Inheritance）
延續外層元件或預設值的設定
<STYLE><!-H1{color:blue }
EM{font:20pt }
--><STYLE>
….
<BODY>
<H1>標題<EM>一</EM></H1>
…
</BODY>
…
字型屬性
font-family
型屬性）
font-style
（字形樣式）
font-variant
（字型變體）
（字
font-weight
（字型粗細）
font-size
（字型大小）
文字屬性
letter-spacing
（字元間距）
word-spacing
（字間距）
text-decoration
（文字裝飾）
text-transform
（文字轉換）
text-shadow
（文字陰影）
text-align
（文字水平對齊）
vertical-align
（垂直對齊）
text-indent
（文字內縮）
line-height
（行高）
white-space
（空白）
範例
<STYLE>
BODY{line-height:1.5em; text-indent:2em}
</STYLE>
<BODY>
…
</BODY>
顏色屬性
color
（顏色）
background-color
（背景顏色）
background-image
（設定背景圖片）
background-repeat
（背景複製方式）
background-position
（背景位置）
元件盒（Box）
HTML 的元件可區分為行間類（inline）與區塊類（block）。
前者用來設定字詞的格式，如 <EM>、<S>、<BIG> 等元件。
後者用來設定段落的格式，通常會佔據一塊矩形區域，如
<P>、<DIV>、<LI> 等元件。所謂元件盒即是指的區塊類元
件所佔據的矩形區域。
如下一頁所示，元件盒由外而內可區分為：邊界、框線、內
距、和內文共四層區域。我們可以用樣式單來設定這些區域
的大小，以及框線的樣式。
邊界（margin）
外框線（border）
內距（padding）
內文
邊界屬性之一
margin-top
（上邊界）
margin-right
（右邊界）
margin-bottom
（下邊界）
margin-left
（左邊界）
padding-top
（上內距）
padding-bottom
（下內距）
padding-left
（左內距）
border-top-width
（上邊框寬度）
border-right-width
（右邊框寬度）
border-bottom-width
（下邊框寬度）
border-left-width
（左邊框寬度）
邊界屬性之二
border-width
（邊框寬度）
border-color
（邊框顏色）
border-style
（邊框樣式）
border-top
（上邊框）
border-right
（右邊框）
border-bottom
（下邊框）
border-left
（左邊框）