css 知識點 --》 Border邊框
選擇器通常是您需要改變樣式的 HTML 元素。
每條宣告由一個屬性和一個值組成。
屬性（property）是您希望設定的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開。
CSS 註釋
註釋是用來解釋你的程式碼，並且可以隨意編輯它，瀏覽器會忽略它。
CSS註釋以 "/*" 開始, 以 "*/" 結束, 例項如下:
/*這是個註釋*/ p { text-align:center; /*這是另一個註釋*/ color:black; font-family:arial; }
CSS Id 和 Class
id 和 class 選擇器
如果你要在HTML元素中設定CSS樣式，你需要在元素中設定"id" 和 "class"選擇器。
如何插入樣式表
插入樣式表的方法有三種:
- 外部樣式表(External style sheet)
- 內部樣式表(Internal style sheet)
- 內聯樣式(Inline style)
外部樣式表
當樣式需要應用於很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個檔案來改變整個站點的外觀。
例項：
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
樣式表應該以 .css 副檔名進行儲存。下面是一個樣式表文件的例子：
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}
內部樣式表
當單個文件需要特殊的樣式時，就應該使用內部樣式表。你可以使用 <style> 標籤在文件頭部定義內部樣式表，就像這樣:
<head>
<style> hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
內聯樣式
由於要將表現和內容混雜在一起，內聯樣式會損失掉樣式表的許多優勢。請慎用這種方法，例如當樣式僅需要在一個元素上應用一次時。
要使用內聯樣式，你需要在相關的標籤內使用樣式（style）屬性。Style 屬性可以包含任何 CSS 屬性。本例展示如何改變段落的顏色和左外邊距：
<p style="color:sienna;margin-left:20px">這是一個段落。</p>
多重樣式
如果某些屬性在不同的樣式表中被同樣的選擇器定義，那麼屬性值將從更具體的樣式表中被繼承過來。
內聯樣式）Inline style > （內部樣式）Internal style sheet >（外部樣式）External style sheet > 瀏覽器預設樣式
CSS背景
可以利用 background-position 屬性改變影象在背景中的位置:
例項
body { background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:right top; }
簡寫屬性
例項
body {background:#ffffff url('img_tree.png') no-repeat right top;}
當使用簡寫屬性時，屬性值的順序為：:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
CSS 文字格式
文字顏色 例項：body {color:red;} h1 {color:#00ff00;} h2 {color:rgb(255,0,0);}
文字對齊方式：h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;} 當text-align設定為"justify"，每一行被展開為寬度相等，左，右外邊距是對齊（如雜誌和報紙）
文字修飾： text-decoration 屬性用來設定或刪除文字的裝飾。
例項：h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;}
文字轉換： p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;}
文字縮排： p {text-indent:50px;}
CSS 字型
在CSS中，有兩種型別的字體系列名稱：
- 通用字體系列 - 擁有相似外觀的字體系統組合（如 "Serif" 或 "Monospace"）
- 特定字體系列 - 一個特定的字體系列（如 "Times" 或 "Courier"）
Serif字型中字元在行的末端擁有額外的裝飾
"Sans"是指無 - 這些字型在末端沒有額外的裝飾
字體系列
font-family 屬性應該設定幾個字型名稱作為一種"後備"機制，如果瀏覽器不支援第一種字型，他將嘗試下一種字型
p{font-family:"Times New Roman", Times, serif;}
字型樣式：
p.normal {font-style:normal;}正常字型 p.italic {font-style:italic;}斜體 - 以斜體字顯示的文字 p.oblique {font-style:oblique;}傾斜的文字 - 文字向一邊傾斜（和斜體非常類似，但不太支援）
字型的大小：
font-size 屬性設定文字的大小：
h1 {font-size:40px;} h2 {font-size:30px;} p {font-size:14px;}
用em來設定字型大小：1em和當前字型大小相等。在瀏覽器中預設的文字大小是16px
h1 {font-size:2.5em;} /* 40px/16=2.5em */ h2 {font-size:1.875em;} /* 30px/16=1.875em */ p {font-size:0.875em;} /* 14px/16=0.875em */
CSS 連結
連結樣式：
- a:link - 正常，未訪問過的連結
- a:visited - 使用者已訪問過的連結
- a:hover - 當用戶滑鼠放在連結上時
- a:active - 連結被點選的那一刻
a:link {color:#000000;} /* 未訪問連結*/ a:visited {color:#00FF00;} /* 已訪問連結 */ a:hover {color:#FF00FF;} /* 滑鼠移動到連結上 */ a:active {color:#0000FF;} /* 滑鼠點選時 */
文字修飾：text-decoration 屬性主要用於刪除連結中的下劃線
a:link {text-decoration:none;} a:visited {text-decoration:none;} a:hover {text-decoration:underline;} a:active {text-decoration:underline;}
背景顏色：
a:link {background-color:#B2FF99;} a:visited {background-color:#FFFF85;} a:hover {background-color:#FF704D;} a:active {background-color:#FF704D;}
CSS 列表
列表：無序列表，有序列表
ist-style-type屬性指定列表項標記的型別是：ul.a {list-style-type: circle;} ul.b {list-style-type: square;} ol.c {list-style-type: upper-roman;} ol.d {list-style-type: lower-alpha;}
要指定列表項標記的影象，使用列表樣式影象屬性：ul { list-style-image: url('sqpurple.gif'); }
CSS 表格
表格邊框：指定CSS表格邊框，使用border屬性。table, th, td { border: 1px solid black; }
摺疊邊框：border-collapse 屬性設定表格的邊框是否被摺疊成一個單一的邊框或隔開：table { border-collapse:collapse; } table,th, td { border: 1px solid black; }
表格的寬度和高度：Width和height屬性定義表格的寬度和高度。table { width:100%; } th { height:50px; }
表格文字對齊方式：text-align屬性設定水平對齊方式，像左，右，或中心：td { text-align:right; }
表格顏色：下面的例子指定邊框的顏色，和th元素的文字和背景顏色：
table, td, th { border:1px solid green; } th { background-color:green; color:white; }
CSS 盒子模型
- Margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
- Border(邊框) - 圍繞在內邊距和內容外的邊框。
- Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
- Content(內容) - 盒子的內容，顯示文字和影象。
元素的高度與寬度：
div { width: 300px; border: 25px solid green; padding: 25px; margin: 25px; }
試想一下，你只有250畫素的空間。讓我們設定總寬度為250畫素的元素:
div { width: 220px; padding: 10px; border: 5px solid gray; margin: 0; }
CSS 邊框
邊框樣式：
邊框樣式屬性指定要顯示什麼樣的邊界。
border-style屬性用來定義邊框的樣式
border-style 值:
none: 預設無邊框
dotted: 定義一個點線邊框
dashed: 定義一個虛線邊框
solid: 定義實線邊框
double: 定義兩個邊框。 兩個邊框的寬度和 border-width 的值相同
groove: 定義3D溝槽邊框。效果取決於邊框的顏色值
ridge: 定義3D脊邊框。效果取決於邊框的顏色值
inset:定義一個3D的嵌入邊框。效果取決於邊框的顏色值
outset: 定義一個3D突出邊框。 效果取決於邊框的顏色值
您可以通過 border-width 屬性為邊框指定寬度。：
p.one { border-style:solid; border-width:5px; }
er-color屬性用於設定邊框的顏色。可以設定的顏色：
name - 指定顏色的名稱，如 "red"
RGB - 指定 RGB 值, 如 "rgb(255,0,0)
Hex - 指定16進位制值, 如 "#ff0000
p.one { border-style:solid; border-color:red; }
邊框-單獨設定各邊：
p { border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid; }
border-style屬性可以有1-4個值：
- border-style:dotted solid double dashed;
- 上邊框是 dotted
- 右邊框是 solid
- 底邊框是 double
- 左邊框是 dashed
- border-style:dotted solid double;
- 上邊框是 dotted
- 左、右邊框是 solid
- 底邊框是 double
- border-style:dotted solid;
- 上、底邊框是 dotted
- 右、左邊框是 solid
- border-style:dotted;
- 四面邊框是 dotted
上面的例子用了border-style。然而，它也可以和border-width 、 border-color一起使用。
邊框-簡寫屬性
上面的例子用了很多屬性來設定邊框。
你也可以在一個屬性中設定邊框。
你可以在"border"屬性中設定：
- border-width
- border-style (required)
- border-color