百度前端學院第四天
任務
熟悉CSS屬性的基本使用方法
CSS 背景
background
background-color
設置背景顏色
以下方法都可以定義背景顏色爲白色
background: black;
background: #000000;
background: #000;
兩個hao
background-image
使用圖片作爲背景,需要爲屬性設置一個url值
background-image: url(/i/eg_bg_04.gif);
background-repeat
背景重複，可設置在水平或垂直方向平鋪
background-repeat: repeat-x;
background-repeat: repeat-y;
background-position
背景定位，可以改變圖像在背景中的位置
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:center;
}
CSS 邊框
border
元素外邊距內就是元素的邊框（border）,圍繞在padding之外，每個邊框有三個方面：寬度、樣式和顏色。
border-color
邊框顏色
border-style
邊框樣式
- none: 默認無邊框
- dotted: 定義一個點線邊框
- dashed: 定義一個虛線邊框
- solid: 定義實線邊框
- double: 定義兩個邊框。 兩個邊框的寬度和 border-width 的值相同
- groove: 定義3D溝槽邊框。效果取決於邊框的顏色值
- ridge: 定義3D脊邊框。效果取決於邊框的顏色值
- inset:定義一個3D的嵌入邊框。效果取決於邊框的顏色值
- outset: 定義一個3D突出邊框。 效果取決於邊框的顏色值
border-width
邊框寬度，可通過以下兩個方法指定邊框寬度：
p.one{
border-width: 5px;
}
p.two{
border-width: medium;
}
border的上下左右
可以爲邊框四條邊設置不同的格式，包括style,color等，順序爲上、右、底、左
CSS 列表
list-style
list-style-type
列表類型，可更改用於列表項的標誌類型，常用列表樣式，依次爲圓、方形、：
ul.circle {list-style-type:circle;}
ul.square {list-style-type:square;}
ol.upper-roman {list-style-type:upper-roman;}
ol.lower-alpha {list-style-type:lower-alpha;}
list-style-image
列表圖片
CSS鏈接
a:link
a:link - 正常，未訪問過的鏈接
a:visited
a:visited - 用戶已訪問過的鏈接
a:hover
a:hover - 當用戶鼠標放在鏈接上時
a:active
a:active - 鏈接被點擊的那一刻
- 當設置爲若干鏈路狀態的樣式，也有一些順序規則：
a:hover 必須跟在 a:link 和 a:visited後面
a:active 必須跟在 a:hover後面 - 可對各個樣式設置屬性，如
text-decoration background-color color
CSS 各種選擇器的概念，使用方法及使用場景
- 在 CSS 中，選擇器是一種模式，用於選擇需要添加樣式的元素。
- 常用css選擇器包含通用元素選擇器、標籤選擇器、id選擇器、class選擇器
通用元素選擇器
- CSS 中 通用元素選擇器以 “*” 來定義。
- 匹配任何元素
標籤選擇器
- 用於匹配所有使用該標籤的標元素
id選擇器
- id 選擇器可以爲標有特定 id 的 HTML 元素指定特定的樣式。
- HTML元素以id屬性來設置id選擇器,CSS 中 id 選擇器以 “#” 來定義。
class選擇器
- class 選擇器用於描述一組元素的樣式，class 選擇器有別於id選擇器，class可以在多個元素中使用。
- class 選擇器在HTML中以class屬性表示, 在 CSS 中，類選擇器以一個點"."號顯示：
CSS 選擇器的優先級
- 在屬性後面使用 !important 會覆蓋頁面內任何位置定義的元素樣式。
- 作爲style屬性寫在元素內的樣式
- id選擇器
- 類選擇器
- 標籤選擇器
- 通配符選擇器
- 瀏覽器自定義或繼承
總結排序：
!important > 行內樣式>ID選擇器 > 類選擇器 > 標籤 > 通配符 > 繼承 > 瀏覽器默認屬性