[TOC]
# 1. css樣式的幾種引入方式
## 1.1外部樣式表
~~~
<link rel="stylesheet" type="text/css" href="/c5.css">
內部樣式表（位于 標簽內部）
<style>
p{color:pink;font-size:16px}
</style>
~~~
## 1.2內聯樣式（在 HTML 元素內部）
`<p style="color:pink;font-size:16px">hello world</p>`
給同一選擇器設置同一樣式,離元素近的樣式設置方式優先級高
# 2.css基本樣式
## 2.1背景
~~~
背景顏色:background-color
背景圖片:backgorund-image
背景重復:background-repeat
背景位置:background-position: x y
//第一個參數表示離x軸的距離,y表示離y軸的距離
//簡寫
background: color image repeat position
背景吸附:background-attachment:fixed | scroll
background-size
//指定背景圖片大小。
background-size: x y;
//x表示寬度，y表示高度
background-size:cover;
此時會保持圖像的縱橫比并將圖像縮放成將完全覆蓋背景定位區域的最小大小。
相當于background-size:100% 100%;
~~~
## 2.2文本
~~~
text-align文本對齊方式
text-align: right|left|center
text-decoration文本修飾
text-decoration: underline|overline|line-through
text-indent文本縮進
text-transform文本轉換(了解)
text-transform:uppercase|lowercase|capitalize
~~~
## 2.3字體
~~~
color:設置字體的顏色
顏色是通過CSS最經常的指定：
十六進制值 - 如: ＃FF0000
一個RGB值 - 如: RGB(255,0,0)
顏色的名稱 - 如: red
body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
~~~
~~~
//font-family 屬性應該設置幾個字體名稱作為一種"后備"機制，如果瀏覽器不支持第一種字體，他將嘗試下一種字體
p{font-family:Helvetica,Microsoft YaHei}
~~~
推薦使用簡書的
`font-family: -apple-system,SF UI Text,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;`
~~~
font-size
font-style:normal | italic
font-weight:normal | bold | lighter
行高
line-height
~~~
## 2.4鏈接
~~~
a:link - 正常，未訪問過的鏈接
a:visited - 用戶已訪問過的鏈接
a:hover - 當用戶鼠標放在鏈接上時
a:active - 鏈接被點擊的那一刻
//*若單獨設置幾個鏈接，必須遵守如下規則：
a:hover 必須跟在 a:link 和 a:visited后面
a:active 必須跟在 a:hover后面
~~~
## 2.5列表(針對ul)
~~~
list-style:none;
list-style-type:circle|square
list-style-image:url("xxx")
~~~
## 2.6邊框
~~~
border-width 邊框的寬度
border-style 邊框的樣式
border-color 邊框的顏色
~~~
~~~
//可以簡寫成
border： width style color
p{border:1px solid #333}
~~~
~~~
//邊框-單獨設置各邊
p
{
border-top:1px solid #ccc;
}
~~~
## 2.7表格
~~~
border-collapse
//設置表格的邊框被折疊成一個單一的邊框
table{border-collapse:collapse}
~~~
~~~
//可以在td,th設置這個兩個屬性
colspan:value //跨越的列
rowspan:value //跨越的行
~~~
## 2.8輪廓（了解）
~~~
//輪廓（outline）是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用
p{outline:1px solid pink}
~~~
## 2.9透明
**opacity
`visibility:hidden|visible和display:none的區別`
# 3.css樣式的繼承
繼承:是子元素對父元素的繼承
## 3.1width和height
~~~
width
如果子元素不設置寬度，默認情況下繼承父元素的寬度
~~~
~~~
Height(特殊)
如果父元素不設置高度，默認情況下父元素繼承子元素的高度
~~~
## 3.2css可以繼承的屬性
~~~
//文本相關屬性
color,text-align,text-decoration,text-transform,text-indent(內聯標簽不能設置此屬性)
~~~
~~~
//字體相關屬性
font-family,font-style,font-size,font-weight,line-height
~~~
~~~
//列表相關屬性
list-style
~~~
~~~
//表格相關屬性
border-collapse
~~~
~~~
//其他屬性
cursor,visibility
~~~
# 4.常用的css樣式
~~~
color:設置文字的顏色
width:設置一個元素的寬度
height:設置一個元素的高度
background-color:設置背景顏色
background-image:設置一個元素的背景圖片
line-height:設置文字的行高
text-align:設置文字對其的方式
border-width:邊框的寬度
border-style:邊框的樣式
border-color:邊框的顏色
p:hover{color:blue}當鼠標移動到元素上時可以改變元素的css樣式
~~~
