學習目標
1赴叹、css屬性和屬性值的定義
2不翩、css文本屬性
3兵扬、css列表屬性
4、css背景屬性
5慌盯、css邊框屬性
6御铃、css浮動屬性
一福扬、css屬性和屬性值的定義
屬性：屬性是指定選擇符所具有的屬性侧纯，它是css的核心蒸走，css2共有150多個屬性
屬性值：屬性值包括法定屬性值及常見的數(shù)值加單位拔稳，如25px糕簿，或顏色值等特占。
二掸刊、CSS文本屬性
1乃摹、文本大薪臁：{font-size:value;}
說明：
1） 屬性值為數(shù)值型時，必須給屬性值加單位孵睬，屬性值為0時除外播歼。
2）單位還可以是pt，9pt=12px;
3）為了減小系統(tǒng)間的字體顯示差異掰读，IE Netscape Mozilla的瀏覽器制作商于1999年召開會議秘狞，共同確定16px/ppi為標準字體大小默認值,即1em.默認情況下，1em=16px,0.75em=12px; rem
4）使用絕對大小關鍵字
xx-small =9px
x-small =11px
small =13px
medium =16px
large =19px
x-large =23px
xx-large =27px
2蹈集、文本顏色：{color:顏色值;}
說明：
用十六進制(是計算機中數(shù)據(jù)的一種表示方法)表示顏色值：
0 1 2 3 4 5 6 7 8 9
0 1 2 3 4 5 6 7 8 9 A B C D E F
顏色模式：光色模式
R G B
FF 00 00
顏色值的縮寫：
當表示三原色的三組數(shù)字同時相同時烁试，可以縮寫為三位;
當用十六進制表示顏色值時，需要在顏色值前加“#”
# fa 00 00
3拢肆、文本字體：{font-family:字體1减响，字體2，字體3郭怪；}
說明：
瀏覽器首先會尋找字體1支示、如存在就使用改字體來顯示內(nèi)容，如在字體1不存在的情況下鄙才，則會尋找字體2颂鸿，如字體2也不存在，按字體3顯示內(nèi)容咒循，如果字體3 也不存在据途；則按系統(tǒng)默認字體顯示绞愚；
當字體是中文字體時，需加雙引號颖医；
當英文字體中有空格時位衩，需加雙引號如（“Times New Roman”）
當英文字體只有一個單詞組成是不加雙引號；如：（Arial）熔萧；
Windows中文版本操作系統(tǒng)下糖驴，中文默認字體為宋體或者新宋體，英文字體默認為Arial.
4佛致、文字加粗
font-weight:bolder(更粗的)/bold（加粗）/normal（常規(guī)）/100—900;
說明：
在css規(guī)范中贮缕，把字體的粗細分為9個等級，分別為100——900俺榆，其中100對應最輕的字體變形感昼，而900對應最重的字體變形，
100-400 一般 500常規(guī)字體 600-900加粗字體
5罐脊、font-style：italic/oblique/normal（取消傾斜定嗓，常規(guī)顯示）;
說明：
italic和oblique都是向右傾斜的文字, 但區(qū)別在于Italic是指斜體字，而Oblique是傾斜的文字萍桌，對于沒有斜體的字體應該使用Oblique屬性值來實現(xiàn)傾斜的文字效果.
6宵溅、水平對齊方式
{text-align:left/right/center/justify（兩端對齊中文不起作用）;}
7、文字行高
{line-height:normal/value;}
說明：
當單行文本的行高等于容器高時上炎，可實現(xiàn)單行文本在容器中垂直方向居中對齊恃逻；
當單行文本的行高小于容器高時，可實現(xiàn)單行文本在容器中垂直中齊以上藕施；
當單行文本的行高大于容器高時寇损，可實現(xiàn)單行文本在容器中垂直中齊以下（IE6及以下版本存在瀏覽器兼容問題）
*文字屬性簡寫：font:12px/24px "宋體";
font屬性的簡寫：字號，行高铅碍，字體
font-size:12px; line-height:24px; font-family:”宋體”润绵；
font屬性的簡寫：
說明:font的屬性值應按以下次序書寫(各個屬性之間用空格隔開)
順序: font-style font-weight font-size / line-height font-family
注意：
(1)簡寫時 , font-size和line-height只能通過斜杠/組成一個值，不能分開寫胞谈。
(2) 順序不能改變 ,這種簡寫法只有在同時指定font-size和font-family屬性時才起作用,而且,你沒有設定font-weight , font-style , 他們會使用缺省值（默認值）尘盼。
6、水平對齊方式
{text-align:left/right/center/justify（兩端對齊中文不起作用）;}
7烦绳、文本修飾
text-decoration:none/underline/overline/line-through
說明：
none:沒有修飾
underline:添加下劃線
overline:添加上劃線
line-through:添加刪除線
8卿捎、首行縮進：
{text-indent:value;}
說明：
1）text-indent可以取負值；
2）text-indent屬性只對第一行起作用径密。
9午阵、字間距
{letter-spacing:value;}控制英文字母或漢字的字距。
10、詞間距
{word-spacing:value;}控制英文單詞詞距底桂。
11植袍、文本流控制
{layout-flow:horizontal/vertical-ideographic;}
說明：
1）horizontal:自左向右
2）vertical-ideographic:自上而下
三、CSS列表屬性
1籽懦、定義列表符號樣式
list-style-type：disc(實心圓)/circle(空心圓)/square(實心方塊)/none(去掉列表符號)于个；
list-style-type:none===list-style:none;
2、使用圖片作為列表符號
list-style-image：url(所使用圖片的路徑及全稱)暮顺；
3厅篓、定義列表符號的位置
list-style-position:outside(外邊)/inside(里邊)；
list-style:none;去掉列表符號
四捶码、邊框的屬性和屬性值
border:邊框寬度 邊框風格 邊框顏色;
例如：border:5px solid #ff0000
邊框：border,網(wǎng)頁中很多修飾性線條都是由邊框來實現(xiàn)的羽氮。
邊框寬度：border-width:
邊框顏色：border-color:
邊框樣式：border-style:solid(實線)/dashed(虛線)dotted(點劃線)double(雙線)可單獨設置一方向邊框，
可單獨設置一方向邊框惫恼，
border-bottom:邊框寬度 邊框風格 邊框顏色;底邊框
border-left:邊框寬度 邊框風格 邊框顏色;左邊框
border-right:邊框寬度 邊框風格 邊框顏色;右邊框
border-top:邊框寬度 邊框風格 邊框顏色;上邊框
五档押、CSS背景屬性
1、背景顏色 {background-color:顏色值;}
2尤筐、背景圖片的設置
background-image：url(背景圖片的路徑及全稱)汇荐；
背景圖片的顯示原則
1）容器尺寸等于圖片尺寸洞就，背景圖片正好顯示在容器中
2）容器尺寸大于圖片尺寸盆繁，背景圖片將默認平鋪，直至鋪滿元素旬蟋；
3）容器尺寸小于圖片尺寸油昂，只顯示元素范圍以內(nèi)的背景圖。
網(wǎng)頁上有兩種圖片形式：插入圖片倾贰、背景圖冕碟；
插入圖片：屬于網(wǎng)頁內(nèi)容，也就是結構匆浙。
背景圖：屬于網(wǎng)頁的表現(xiàn)安寺，背景圖上可以顯示文字、插入圖片首尼、表格等挑庶。
3、背景圖片平鋪屬性
{background-repeat:no-repeat/repeat/repeat-x/repeat-y }
4软能、背景圖的固定性
{{background-attachment:scroll(滾動)/fixed(固定);}
fixed 固定迎捺，不隨內(nèi)容一塊滾動；
scroll:隨內(nèi)容一塊滾動查排。
5凳枝、背景圖的位置性
{background-position:left/center/right/數(shù)值 top/center/bottom/數(shù)值;}
水平方向上的對齊方式（left/center/right）或值
垂直方向上的對齊方式(top/center/bottom)或值
background-position:值1 值2;
兩個值 ：第一個值表示水平位置的值，第二個值：表示垂直的位置跋核。
當兩個值都是center的時候寫一個值就可以代表的是水平位置和垂直位置
說明：向左方向岖瑰，向上方向是負值
背景屬性的縮寫語法：
background:屬性值1 屬性值2 屬性值3叛买；
背景縮寫：
background:url（背景圖片的路徑及全稱） no-repeat center top #f00；
網(wǎng)頁上常用的圖片格式（壓縮圖片）
1)jpg :有損壓縮格式蹋订，靠損失圖片本身的質量來減小圖片的體積聪全，適用于顏色豐富的圖像;(像素點組成的，像素點越多會越清晰 )如果網(wǎng)頁中
2）gif：有損壓縮格式辅辩，靠損失圖片的色彩數(shù)量來減小圖片的體積难礼，支持透明，支持動畫玫锋，適用于顏色數(shù)量較少的圖像;
3)png:有損壓縮格式蛾茉，損失圖片的色彩數(shù)量來減小圖片的體積，支持透明撩鹿，不支持動畫谦炬，是fireworks的 源文件格式，適用于顏色數(shù)量較少的圖像;
六节沦、CSS浮動屬性
語法：float:none/left/right;
float:定義網(wǎng)頁中其它文本如何環(huán)繞該元素顯示
浮動的目的：就是讓豎著的東西橫著來
有三個取值：
left:元素活動浮動在文本左面
right:元素浮動在右面
none:默認值键思，不浮動。
清除浮動clear:left/right/both
首先要知道甫贯，div是塊級元素吼鳞，在頁面中獨占一行，自上而下排列叫搁，也就是傳說中的流
無論多么復雜的布局赔桌，其基本出發(fā)點均是：“如何在一行顯示多個div元素”。
顯然標準流已經(jīng)無法滿足需求渴逻，這就要用到浮動疾党。
浮動可以理解為讓某個div元素脫離標準流，漂浮在標準流之上惨奕，和標準流不是一個層次雪位。
頁面浮動多個DIV的規(guī)律：
假如某個div元素A是浮動的，如果A元素上一個元素也是浮動的梨撞，那么A元素會跟隨在上一個元素的后邊(如果一行放不下這兩個元素雹洗，那么A元素會被擠到下一行)；
如果A元素上一個元素是標準流中的元素聋袋，那么A的相對垂直位置不會改變队伟，也就是說A的頂部總是和上一個元素的底部對齊。
div的順序是HTML代碼中div的順序決定的幽勒。
靠近頁面邊緣的一端是前嗜侮，遠離頁面邊緣的一端是后。
經(jīng)過上邊的學習，可以看出：
元素浮動之前锈颗，也就是在標準流中顷霹，是豎向排列的，而浮動之后可以理解為橫向排列
清除浮動可以理解為打破橫向排列击吱。
清除浮動的關鍵字是clear淋淀，
語法：clear : none | left | right | both
none：默認值。允許兩邊都可以有浮動對象
left：不允許左邊有浮動對象
right : 不允許右邊有浮動對象
both : 不允許有浮動對象
有一點是要記住的那就是:對于CSS的清除浮動(clear)覆醇，一定要牢記：這個規(guī)則只能影響使用清除的元素本身朵纷，不能影響其他元素
微信公眾號:Hi前端學習筆記
知乎專欄:前端入門知識錄
