Java學習總結--044 CSS概述

CSS
1.1 CSS是什麼？
CSS指層疊樣式表（Cascading Style Sheets）
樣式定義如何顯示HTML元素
1）樣式通常存儲在樣式表【.CSS文件、CSS區域】中；
2）把樣式添加到HTML4.0中，是爲了解決內容與表現分離的問題；
3）外部樣式表可以極大提高工作效率；
4）外部樣式表通常存儲在CSS文件中；
5）多個樣式定義可層疊爲一；

1.2 CSS作用
1）樣式表解決了HTML的內容與表現分離；
2）使用樣式表極大的提高了工作效率；

1.3 CSS書寫規則
本語法
1）CSS規則主要由兩部分組成a.選擇器 b.一條或多條屬性聲明；
2）選擇器主要作用是爲了確定需要改變樣式的HTML元素；
3）每一條聲明由一個屬性和一個值組成，使用花括號來包圍聲明，屬性與值之間使用冒號（：）分開；
4）

書寫注意事項
1.如果值爲若干單詞，則要給值加引號；
2.多個聲明之間使用分號（；）分開；
3.CSS對大小寫不敏感，如果涉及到與HTML文檔一起使用時，class與id名稱對大小寫敏感；

1.4 導入CSS方式
第一種：內聯樣式表
1）要使用內聯樣式，需要在相關的標籤內使用樣式（style)屬性。style屬性可以包含任何CSS屬性；
2）例如：

3）注意：慎用這種方式，它將內容與顯示混合在一起，損失了樣式表的優勢；
4）一般情況下，這種方式只有在一個標籤上只應用一次樣式時纔會使用；

第二種 內部樣式表
1）可以使用

第三種：外部樣式表
1）如果想要在多個頁面使用同一個樣式表，可以使用外部樣式表來導入；
2）可以在html頁面上使用標籤來導入外部樣式表；
3）例如：

第四種：@import導入
1）這種方式也是外部導入

優先級問題
內聯樣式表 > 內部樣式表 > 外部樣式表

1.5 CSS選擇器
1）CSS選擇器主要是用於選擇需要添加樣式的html元素；
2）對於CSS來說，它的選擇器有很多，我們主要介紹一下幾種：
Id選擇器
Id選擇器使用#引入，它引入的是id屬性中的值。
HTML標籤：id是可以重複；

類選擇器
類選擇器使用時，需要在類名前面加一個（.）

僞類
1.CSS僞類用於向某些選擇器添加特殊效果；
2.下面介紹一下錨僞類；
在支持CSS的瀏覽器中，鏈接的不同狀態都可以不同的方式顯示；
這些狀態包括：活動狀態，已被訪問狀態，未被訪問狀態，和鼠標懸停狀態。


層級選擇器

1.6 CSS屬性
字體
A)CSS字體屬性定義文本的字體系列，大小，加粗，風格和變形；
B)常用屬性：
Font：簡寫屬性，作用是把所有針對字體的屬性設置在一個聲明中；
Font-family:定義字體系列；
Font-size:定義字體的尺寸；
Font-style:定義字體風格；

文本
1.CSS文本屬性可定義文本的外觀。通過文本屬性，可以改變文本的顏色、字符間距，對齊文本，裝飾文本，對文本進行縮進，等等。
2.常用屬性：
A)Color：定義文本顏色；
B)text-align：定義文本對齊方式；
C)Letter-spacing： 定義字符間隔；

背景
1.CSS允許應用純色作爲背景，也允許使用背景圖像創建相當複雜的效果。CSS在這方面的能力遠遠在HTML之上。
2.常用屬性：
A)Background: 簡寫屬性，作用是將背景屬性設置在一個聲明中；
B)Background-color: 定義背景顏色；
C)Background-image: 定義背景圖片；
D)Background-position: 定義背景圖片的起始位置；
E)Background-repeat: 定義背景圖片是否及如何重複；

尺寸
1.CSS尺寸屬性允許你控制元素的高度和寬度；
2.常用屬性：
Width： 設置元素的寬度；
Height： 設置元素的高度；

列表

1. CSS列表屬性允許你放置、改變列表項的標誌，或者將圖像作爲列表項標誌；
2. 常用屬性：
   List-style: 簡寫屬性。用於把所有用於列表的屬性設置於一個聲明中；
   List-style-image: 定義列表項標誌爲圖像；
   List-style-position：定義列表項標誌的位置；
   List-style-type: 定義列表項標誌的類型。
   
   表格
   1.CSS表格屬性可以幫助極大的改善表格的外觀；
   2.常用屬性：
   Border-collapse: 定義是否把表格邊框合併爲單一的邊框；
   Border-spacing: 定義分隔單元格邊框的距離；
   Caption-side: 定義表格標題的位置；
   
   輪廓
   1.輪廓是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用；
   2.CSS outline屬性規定元素輪廓的樣式、顏色和寬度；
   3.常用屬性：
   Outline：在一個聲明中設置所有的輪廓屬性；
   Outline-color: 定義輪廓的顏色；
   Outline-style: 定義輪廓的樣式；
   Outline-width: 定義輪廓的寬度；
   

定位
1.CSS定位屬性允許你對元素進行定位；
2.定位的基本思想很簡單，它允許你定義元素框相對於其正常位置應該出現的位置，或者相對於父元素、另一個元素甚至瀏覽器窗口本身的位置；
3.CSS有三種基本的定位機制：普通流、浮動和絕對定位。
4.常用屬性：
Position: 把元素放置到一個靜態的，相對的，絕對的，或固定的位置中；
Top: 定義了定位元素的上外邊距邊界與其包含塊上邊界之間的偏移量；
Right：定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移；
Left：定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移；
Bottom：定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移；

相對定位：如對一個元素進行相對定位，它將出現在它所在的位置上。然後通過設置垂直或水平位置，讓這個元素“相對於”它的起點進行移動。

絕對佈局

浮動
常用屬性：
Clear: 設置一個元素的側面是否允許其他的浮動元素；
Float: 定義元素在哪個方向浮動；
Cursor: 當指向某元素之上時顯示的指針類型；
Display: 定義是否及如何顯示元素；
Visibility: 定義元素是否可見或不可見；