一、CSS簡介
1.什么是CSS？
? CSS：Cascading Style sheet層疊樣式表或級聯(lián)樣式表
? 是一種樣式設(shè)置規(guī)則，用于控制頁面的外觀的樣式
2.為什么使用CSS？
實現(xiàn)內(nèi)容與樣式的分離，方便團隊開發(fā)
樣式復(fù)用，便于網(wǎng)站后期維護
頁面的精確控制，讓頁面更精美
3.CSS作用
頁面外觀美化
布局和定位
二、基本用法
1.CSS語法
<head>
? ? <style type="text/css">
? ? ? ? 選擇器{
? ? ? ? ? ? 樣式名1:樣式值1;
? ? ? ? ? ? 樣式名2:樣式值2;
? ? ? ? }
? ? </style>
</head>
選擇器：要修飾的對象(東西)
樣式名：修飾對象的每個樣式
樣式值：樣式的取值
注意：多個樣式之間以分號隔開，樣式名和樣式值之間以冒號隔開
2.CSS引用方式
? 有三種方式：內(nèi)部樣式、行內(nèi)樣式、外部樣式
2.1 內(nèi)部樣式
? 也稱為內(nèi)嵌樣式，在頁面頭部通過style標簽定義
? 對當前頁面所有符合樣式選擇器的標簽起作用
2.2 行內(nèi)樣式
? 也稱為嵌入樣式，使用HTML標簽的style屬性來定義
? 只對設(shè)置style屬性的標簽起作用
? 注意：幾乎所有HTML標簽都具有style屬性
2.3 外部樣式
? 使用單獨的css文件來定義，然后在頁面中使用link標簽或@import指令來引入
使用link標簽鏈接外部樣式表(推薦)
<link rel="stylesheet" type="text/css" href="css文件的路徑">
使用@import指令導(dǎo)入外部樣式表
<style>
? ? @import url(css文件的路徑);
</style>
三、選擇器
1.基礎(chǔ)選擇器
1.1 標簽選擇器
? 也稱為元素選擇器，以HTML標簽的名字作為樣式應(yīng)用依據(jù)
1.2 類選擇器
? 使用自定義名稱，以.作為前綴，然后通過HTML標簽的class屬性值作為依據(jù)
注意事項：
同時調(diào)用多個類選擇器，以空格隔開
類選擇器不能以數(shù)字開頭
注意：幾乎所有的HTML標簽具有class屬性
1.3 ID選擇器
? 使用自定義名稱，以#作為前綴，然后通過HTML標簽的id屬性進行名稱匹配
? 以標簽的id屬性值作為樣式的應(yīng)用依據(jù)，一對一的關(guān)系
? 注意：幾乎所有的HTML標簽都具有id屬性，且id的值必須唯一
2.復(fù)雜選擇器
2.1 復(fù)合選擇器
? 標簽選擇器和類選擇器、標簽選擇器和ID選擇器，一起使用
? 必須同時滿足兩個條件才能應(yīng)用樣式
2.2 組合選擇器
? 也稱為集體聲明
? 將多個具有相同樣式的選擇器放在一起聲明，使用逗號隔開
2.3 嵌套選擇器
? 在某個選擇器內(nèi)再設(shè)置選擇器，通過空格隔開
? 只有滿足層次關(guān)系最里層選擇器的標簽才能應(yīng)用樣式
? 注意：使用空格不區(qū)分父子還是后代，表示的后代，使用>表示的是父子關(guān)系才可以
2.4 偽類選擇器
? 根據(jù)不同的狀態(tài)顯示不同的樣式，一般多用于a標簽，即超鏈接
四種狀態(tài)：
? link ：未訪問的鏈接
? visited：已訪問過的鏈接
? hover ：鼠標移動到a標簽上，即懸浮在鏈接上
? active ：選定的鏈接，被激活
? 注意：書寫順序：link–>visited–>hover–>active
2.5 偽元素選擇器
? first-letter：對應(yīng)元素內(nèi)容中的第一個字符
? first-line：對應(yīng)元素內(nèi)容中的第一行
? after：配合content屬性使用，在指定元素后面增加內(nèi)容
? before：配合content屬性使用，在指定元素前面增加內(nèi)容
四、選擇器的優(yōu)先級
1.優(yōu)先級
? 行內(nèi)樣式>ID選擇器>類選擇器>標簽選擇器
? 原因：首先加載標簽選擇器，再加載類選擇器，然后再加載ID選擇器，最后加載行內(nèi)樣式
? 后加載的樣式會覆蓋最先加載的同名樣式
2.內(nèi)、外部樣式加載順序
? 就近原則
? 原因：按照書寫順序，在同優(yōu)先級的前提下，后加載的會覆蓋先加載的同名樣式，所以離得越近越優(yōu)先
3.!important
? 可以使用!important使某個樣式屬性具有最高的優(yōu)先級
五、常用CSS樣式屬性
1.字體屬性
? 定義字體相關(guān)的樣式
| 樣式名 | 含義 | 解釋 |
| ———– | —– | ——– |
| font-size | 大小、尺寸 | 可以使用多種單位 |
| font-weight | 粗細 | |
| font-family | 字體 | |
| font-style | 樣式 | |
| font | 簡寫 | |
1.1 font-size
? 取值：
inherit 繼承，默認從父標簽繼承字體大?。J值），所有的css屬性默認值都為inherit
HTML根元素默認字體大小是16px,也稱為基礎(chǔ)字體大小
px 像素，pixel
chrome瀏覽器不支持12px以下的字體大小，其他瀏覽器沒問題
%百分比，相對于父標簽的字體的大小的百分比
em 倍數(shù)，相對于父標簽字體大小的倍數(shù)
1.2 font-weight
? 取值：
normal 普通
bold 粗體
自定義值（400 normal 700 bold）
1.3 font-family
? 一般建議寫3種字體(首選、其次、備用)，以逗號隔開
1.4 font-style
? 取值：
normal 普通
italic 斜體
1.5 font
? 簡寫屬性： font:font-style|font-weight|font-size|line-height|font-family
? 必須按照特定的順序書寫
2.文本屬性
| 樣式名 | 含義 | 解釋 |
| ————— | ——- | ————————————— |
| color | 顏色 | |
| line-height | 行高 | 行之間的距離 |
| text-align | 水平對齊方式 | 取值：left、center、right |
| vertical-align | 垂直對齊方式 | 取值：top、middle、bottom，一般用于圖片和文字的對齊方式 |
| text-indent | 首行縮進 | |
| text-decoration | 文本修飾 | 取值：underline、overline、line-through、none |
| text-transform | 字母大小寫 | 取值：lowercase、uppercase、capitalize |
| letter-sapcing | 字符間距 | |
| word-spacing | 單詞間距 | 只對英文有效 |
| white-space | 空白的處理方式 | 文本超出后是否換行，取值：nowrap（直行，不換行）、normal |
取值：四種寫法
顏色名稱，使用英文單詞
16進制的RGB，#RRGGBB
特定情況下，可以進行縮寫
#CCCCCC----->#ccc
#FF0000----->#F00
#FF7300----->無法縮寫
注意：不區(qū)分大小寫
rgb函數(shù)，rgb(red,green,blue)
每個顏色的取值范圍，[0-255]
rgb(255,0,0)---->紅色
rgb(0,255,0)---->綠色
rgb(0,0,255)---->藍色
rgba函數(shù)：rgba(red,green,blue,alpha)
可以設(shè)置透明度，alpha取值范圍[0,1],0表示完全透明，1完全不透明
rgba(255,0,0,1);----->純紅
rgba(255,0,0,0.5);----->紅色半透明
3.背景屬性
| 屬性 | 含義 | 解釋 |
| ——————— | ———- | —- |
| background-color | 背景顏色 | |
| background-image | 背景圖片 | |
| background-repeat | 背景圖的重復(fù)方式 | |
| background-position | 背景圖片的位置 | |
| background-attachment | 背景圖片是否跟隨滾動 | |
| background | 簡寫 | |
3.1 background-color
? 取值：transparent(透明)
3.2 background-image
必須使用url()方式指定圖片的路徑
如果是在css文件中使用相對路徑，此時是相對于css文件，而不是html文件
3.3 background-repeat
? 取值：repeat（默認）、no-repeat、repeat-y、repeat-x
3.4 background-position
? 默認背景圖片顯示左上角
? 取值：
關(guān)鍵字top、bottom、left、right、center
坐標，左上角(0,0)坐標，向右為x正方向，向下為y正方向
CSS雪碧圖，即CSS Sprites，也稱為CSS精靈，是一種css圖像合并技術(shù)
含義：將網(wǎng)頁許多非常小的圖標/圖片整合在一張大圖中，當訪問該頁面的時候只需要下載一次，可以減少訪問服務(wù)器的次數(shù)，提高性能
原理：使用background-position進行背景定位，定位出背景圖片的位置
3.5 background-attachment
? 取值：scroll(默認值)、fixed固定不動
3.6 background
? 簡寫屬性：background:background-color|background-image|background-repeat|background-position
? 書寫順序是沒有要求
4.顯示相關(guān)
4.1 display
? 通過display屬性設(shè)置元素是否顯示，以及是否獨占一行
? 常用取值：
| 取值 | 含義 | 解釋 |
| ———— | —————- | —————— |
| none | 不顯示 | |
| inline | 顯示為內(nèi)聯(lián)元素，行級元素的默認值 | 將塊級元素變?yōu)樾屑壴?，不再獨占一?|
| block | 顯示為塊級元素，塊級元素的默認值 | 將行級元素變?yōu)閴K級元素，獨占一行 |
| inline-block | 顯示為內(nèi)聯(lián)元素，但可以設(shè)置寬和高 | 在inline的基礎(chǔ)上設(shè)置寬和高 |
注意:
行級元素默認是無法設(shè)置寬和高，可以為行級元素設(shè)置display:inline-block，然后就可以設(shè)置寬和高了
4.2 visibility
? 也可以通過visibility屬性設(shè)置元素是否顯示
? 常用取值：
| 取值 | 含義 | 解釋 |
| ——- | —- | —- |
| visible | 顯示 | |
| hidden | 隱藏 | |
4.3 兩者的區(qū)別
? display隱藏時候不再占據(jù)頁面的空間，后面的元素會占用其位置
? visibility隱藏時候會占據(jù)頁面的空間，位置還保留在頁面中，只是不顯示
5.列表屬性
| 屬性 | 含義 | 解釋 |
| ——————- | ———– | ——————- |
| list-style-type | 設(shè)置列表項前的標記 | |
| list-style-image | 將圖像作為列表前的標記 | |
| list-style-position | 設(shè)置列表前標記的位置 | outside(默認值)、inside |
| list-style | 簡寫 | |
| | | |
5.1 list-style-type
? 取值：none、disc、circle、square、decimal
5.2 list-style
? 簡寫屬性：list-style:list-style-type|list-style-image|list-style-position
? 書寫順序沒有要求
6.表格屬性
? border-collapse 表格中相鄰的邊框是否合并(折疊)為單一邊框
? 取值：seperate（分離、默認值）、collapse（合并）
六、盒子模型
1.概念
? 盒子模型是網(wǎng)頁布局的基礎(chǔ)，將頁面中所有的元素看成是一個盒子，盒子都包含以下幾個屬性：
width 寬度
height 高度
border 邊框
padding 內(nèi)邊距
margin 外邊距
2.盒子屬性
2.1 border
? 表示的盒子的邊框
? 分為四個方向：
? border-top、border-right、border-bottom、border-left
? 每個邊都包含三種樣式：；
? 顏色color、粗細width、樣式style
? border-top-color、border-top-width、border-top-style
? border-right-color、border-right-width、border-right-style
? border-bottom-color、border-bottom-width、border-bottom-style
? border-left-color、border-left-width、border-left-style
? border-style的取值：
? solid實線、dashed虛線、dotted點狀線、double雙實線、inset內(nèi)嵌3D線、outset外嵌3D線
? 簡寫，三種方式：
按方向簡寫
border-top、border-right、border-bottom、border-left
書寫順序：width style color
按樣式簡寫
border-color、border-style、border-width
必須按順時針方向書寫，即上、右、下、左，同時可以縮寫
border-width:2px —->四個邊都是2px
border-width:2px 4px —->上下2px ,左右4px
border-width:2px 5px 10px —->上2px 左右5px 下10px
border-width:2px 3px 4px 5px —->上2px 右3px 下4px 左5px
終極簡寫
如果四個邊都一樣，border:width stylle color
2.2 padding
? 表示盒子的內(nèi)邊距，即內(nèi)容與邊框之間的距離
? 同樣也分為四個方向，也可以簡寫(按順時針方向)
2.3 margin
? 表示盒子的外邊距，即盒子與盒子之間的距離
? 同樣也分為四個方向，也可以簡寫
3 其他
3.1 元素所占的空間
? 頁面中的元素所占空間：
寬=width+左右padding+左右margin+左右border
高=height+左右padding+上下margin+左右border
