在現代web前端開發中HTML元素的外觀屬性值都要在級聯樣式表CSS里設置
級聯樣式表有三個層級，內聯樣式表，內部樣式表和外部樣式表
在任何一個層級樣式表中對外觀屬性值的修改都會體現在網頁里
當沖突發生時內聯樣式表的優先級最高，內部樣式表次之，外部樣式表優先級最低。
內聯樣式表把和某HTML元素的外觀屬性值以字符串形式寫在該HTML元素開始標簽的style屬性里面
字符串的語法形式如下：
在CSS中background-color屬性可以改變HTML元素內容的背景顏色信息
<!DOCTYPE html> <html> <body> <h1 style="background-color:DodgerBlue;">Hello World</h1> <p style="background-color:Tomato;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p> </body> </html>
在CSS中color屬性可以改變HTML元素內容的文字顏色信息
<!DOCTYPE html> <html> <body> <h3 style="color:Tomato;">Hello World</h3> <p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </body> </html>
在CSS中可以通過background-color屬性來設定元素背景的顏色，下面是一個例子：
<!DOCTYPE html> <html> <body> <h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1> <h1 style="background-color:#ff6347;">#ff6347</h1> </body> </html>
顏色既可以用十進制RGB值來表示，也可以用16進制RGB值來表示
十六進制前面要加#號，ff在16進制中代表255、63在16進制中代表99、47在16進制中代表71
在CSS中可以給塊元素添加邊框線，
並通過border-width屬性指定邊框線的粗細（例如2px），
通過border-style屬性指定邊框線的樣式(例如solid, 實線)
通過border-color屬性指定邊框線的顏色（例如Tomato）。
本來賦值語句應該是border-width:2px; border-style:solid; border-color:Tomato;
為了節省筆墨，可以把這三個屬性的賦值語句簡化成border:2px solid Tomato;
<!DOCTYPE html> <html> <body> <h1 style="border: 2px solid Tomato;">Hello World</h1> <h1 style="border: 2px solid DodgerBlue;">Hello World</h1> <h1 style="border: 2px solid Violet;">Hello World</h1> </body> </html>
border-style除了可以賦值為實線solid外，還可以設置成虛線dotted或dashed和雙實線double等。
<!DOCTYPE html> <html> <body> <h1 style="border: 2px double Tomato;">Hello World</h1> <h1 style="border: 2px dotted DodgerBlue;">Hello World</h1> <h1 style="border: 2px dashed Violet;">Hello World</h1> </body> </html>
也許有的同學會問， 邊框分為上邊框下邊框左邊框右邊框，我能不能單獨指定其中某個方向的邊框的外觀呢
答案是肯定的，可以通過border-top-style，border-right-style,border-bottom-style和border-left-style來指定
上邊框，右邊框，下邊框和左邊框的樣式。
<!DOCTYPE html> <html> <head> </head> <body> <p style="border-top-style: dotted;border-bottom-style: solid;">2 different border styles.</p> </body> </html>
另外，可以指定某個方向上邊框的寬度、樣式和顏色信息
<!DOCTYPE html> <html> <head> <style> p { border-left: 6px solid red; background-color: lightgrey; } </style> </head> <body> <h2 style="border-left: 6px solid red;background-color: lightgrey;">The border-left Property</h2> </body> </html>
