JavaWeb基礎總結之CSS
CSS 概述
- CSS 指層疊樣式表 (Cascading Style Sheets)
- 樣式定義如何顯示 HTML 元素
- 樣式通常儲存在樣式表中
- 把樣式新增到 HTML 4.0 中，是為了解決內容與表現分離的問題
- 外部樣式表可以極大提高工作效率
- 外部樣式表通常儲存在 CSS 檔案中
- 多個樣式定義可層疊為一
CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條宣告。
selector {declaration1; declaration2; ... declarationN }
選擇器的分組：
你可以對選擇器進行分組，這樣，被分組的選擇器就可以分享相同的宣告。用逗號將需要分組的選擇器分開。在下面的例子中，我們對所有的標題元素進行了分組。所有的標題元素都是綠色的。
h1,h2,h3,h4,h5,h6 {
color: green;
}樣式繼承及其問題：
在父元素中定義了樣式，其子元素是預設繼承的，此時如果子元素想要使用自己的樣式，只需要重寫子元素的樣式即可。
Css的選擇器：
（1）派生選擇器
通過依據元素在其位置的上下文關係來定義樣式，你可以使標記更加簡潔。派生選擇器允許你根據文件的上下文關係來確定某個標籤的樣式。通過合理地使用派生選擇器，我們可以使 HTML 程式碼變得更加整潔。比方說，你希望列表中的 strong 元素變為斜體字，而不是通常的粗體字，可以這樣定義一個派生選擇器：
li strong {
font-style: italic;
font-weight: normal;
}（2）id 選擇器
id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。id 選擇器以 "#" 來定義。
#red {color:red;}
#green {color:green;}<p id="red">這個段落是紅色。</p>
<p id="green">這個段落是綠色。</p>id選擇器除了單獨的使用，還能建立派生選擇器使用。
#sidebar p { font-style: italic; text-align: right; margin-top: 0.5em; } #sidebar h2 { font-size: 1em; font-weight: normal; font-style: italic; margin: 0; line-height: 1.5; text-align: right; }
在這裡，與頁面中的其他 p 元素明顯不同的是，sidebar 內的 p 元素得到了特殊的處理，同時，與頁面中其他所有 h2 元素明顯不同的是，sidebar 中的 h2 元素也得到了不同的特殊處理。
（3）CSS 類選擇器
.center {text-align: center}和 id 一樣，class 也可被用作派生選擇器：
.fancy td {
color: #f60;
background: #666;
}（4）屬性選擇器
對帶有指定屬性的 HTML 元素設定樣式。可以為擁有指定屬性的 HTML 元素設定樣式，而不僅限於 class 和 id 屬性。註釋：只有在規定了 !DOCTYPE 時，IE7 和 IE8 才支援屬性選擇器。在 IE6 及更低的版本中，不支援屬性選擇。
下面的例子為帶有 title 屬性的所有元素設定樣式：
[title]
{
color:red;
}下面的例子為 title="W3School" 的所有元素設定樣式：
[title=W3School]
{
border:5px solid blue;
}屬性和值選擇器 - 多個值：
<head>
<style type="text/css">
[title~=hello]
{
color:red;
}
</style>
</head>
<body>
<h1>可以應用樣式：</h1>
<h2 title="hello world">Hello world</h2>
<p title="student hello">Hello W3School students!</h1>
<hr />總結：屬性選擇器在為不帶有 class 或 id 的表單設定樣式時特別有用。
當讀到一個樣式表時，瀏覽器會根據它來格式化 HTML 文件。插入樣式表的方法有三種：
外部樣式表：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>內部樣式表：
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>內聯樣式：
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>Css常見的一些屬性：
padding（內邊距）： 屬性定義元素邊框與元素內容之間的空白區域。
h1 元素的各邊都有 10 畫素的內邊距：
h1 {padding: 10px;}也可以按照上、右、下、左的順序分別設定各邊的內邊距，各邊均可以使用不同的單位或百分比值：
h1 {padding: 10px 0.25em 2ex 20%;}margin（外邊距）：圍繞在元素邊框的空白區域是外邊距。設定外邊距會在元素外建立額外的“空白”。設定外邊距的最簡單的方法就是使用 margin 屬性，這個屬性接受任何長度單位、百分數值甚至負值。
h1 {margin : 0.25in;}margin的格式和padding設定一樣：
margin: top right bottom leftCSS position 屬性
| absolute | 生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。 |
| fixed | 生成絕對定位的元素，相對於瀏覽器視窗進行定位。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。 |
| relative | 生成相對定位的元素，相對於其正常位置進行定位。 因此，"left:20" 會向元素的 LEFT 位置新增 20 畫素。 |
| static | 預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 宣告）。 |
| inherit | 規定應該從父元素繼承 position 屬性的值。 |
position：absolute；將div從文件流中拖出。漂浮在上空。許多的網站上的漂浮著的廣告都是使用absolute定位。
position：relative：不會從文件六中拖出去，就是在二維空間裡面進行位置的改變，就是不會漂浮在上空。
圖片簽名：就是在圖片上顯示文字，用position：absolute就可以。
最後再總結一點常見的問答題：
（1）html中有一種呼叫css的方式@import url(div.css)這種方式一般不使用,共四種其他三種用過，css優先順序自上而下從外到內的優先順序是從低到高，類似於是函式重寫的感覺。
（2）css的四種選擇器：標籤選擇器，類選擇器，ID選擇器，偽類選擇器
（3）優先順序：盒子模型：div+css。
（4）關於更為細節的知識點，詳見css參考手冊
注：以上文章僅是個人學習過程總結，若有不當之處，望不吝賜教。