作業(yè)
每日總結(jié)：
CSS
一、css簡(jiǎn)述
1雷激、css是什么 瘾腰？ 有什么作用
? HTML--頁面結(jié)構(gòu)坯辩，人的面部
CSS--美化頁面，給人化妝
2怨酝、css：層疊樣式表
層疊：一層一層疊加的
樣式表：存儲(chǔ)樣式的地方傀缩，多個(gè)樣式
css通常稱為css樣式或疊層樣式表，主要用途設(shè)置HTML頁面中的文本內(nèi)容（字體农猬、大小赡艰、對(duì)齊方式等）、圖片的外形（寬高斤葱、邊框樣式慷垮、邊距等）、一級(jí)版面的布局等外觀顯示樣式
CSS可以使用HTML頁面更加好看揍堕，css+div布局更加靈活料身，更容易繪制出用戶需要的結(jié)構(gòu)
3、css作用：修飾HTML頁面鹤啡，更豐富多彩地展示超文本信息
三惯驼、為什么使用CSS代替HTML屬性設(shè)置樣式
因?yàn)镠TML屬性在單獨(dú)使用時(shí)有一定的局限性，所以要配置css樣式代碼才可以展示更為豐富的效果
四、CSS的代碼規(guī)范
1祟牲、放置規(guī)范
（1）在<style>標(biāo)簽內(nèi)容體中書寫css樣式的代碼? ? ? ?<style>標(biāo)簽放置在<head>標(biāo)簽中
2隙畜、格式規(guī)范
選擇器名稱{屬性名：屬性值；屬性名：屬性值说贝；议惰。。乡恕。言询。。}
選擇器：即指定css樣式作用在哪些HTML標(biāo)簽上
3傲宜、代碼規(guī)范
屬性名和屬性值之間是鍵值對(duì)關(guān)系
屬性名和屬性值之間用：連接运杭，最后;結(jié)尾
五、CSS選擇器
1函卒、基本選擇器
? 元素選擇器
? ?HTML標(biāo)簽又叫HTML元素
元素選擇器：即以HTML標(biāo)簽名作為選擇器名稱
作用：選擇css樣式代碼辆憔，作用于對(duì)應(yīng)標(biāo)簽簽名的標(biāo)簽上
格式：標(biāo)簽名{/*CSS樣式代碼*/}
適用范圍：適用于將相同樣式作用在多個(gè)同名標(biāo)簽上
（2）id選擇器
每個(gè)HTML標(biāo)簽都有一個(gè)id屬性，id的屬性值必須在本頁面是唯一的
id選擇器： 即以HTML的id的屬性值作為選擇器名稱
作用：選擇css樣式代碼报嵌，作用于某個(gè)規(guī)定id值得HTML標(biāo)簽上
格式：#id值?{/*CSS樣式代碼*/}
（3）類選擇器
每個(gè)HTML標(biāo)簽都有一個(gè)class屬性虱咧，class屬性值即為類名
類選擇器：即以HTML的類名（class屬性）作為選擇器名稱
作用：選擇css樣式格式化代碼作用于相對(duì)類名的HTML標(biāo)簽上
格式：.類名?{/*CSS樣式代碼*/}
六、邊框?qū)傩?br>
所有的HTML標(biāo)簽都有邊框锚国，默認(rèn)邊框不可見
border設(shè)置邊框的樣式
格式： 寬度 樣式 顏色腕巡；
例如 vorder： 1px solid red; 表示1像素粗的實(shí)線的洪澤邊框
線條樣式：solid實(shí)線、none無邊框血筑、double雙線邊框
width 用于設(shè)置標(biāo)簽的寬度
height 用于設(shè)置標(biāo)簽的高度
background-color 設(shè)置標(biāo)簽的背景顏色
背景顏色設(shè)置的兩種主流方式：
1绘沉、英文單詞： red? blue? yellow
2、顏色代碼 ： 格式 #紅祿藍(lán) 每一個(gè)顏色用涼粉16進(jìn)制位數(shù)表示
例如 ff1100? 紅色顏色最重云挟，綠色其次梆砸，藍(lán)色幾乎沒有
七、布局
float
? ? 通常默認(rèn)的排版方式园欣，將頁面中的元素從上到下一一羅列帖世，二實(shí)際開發(fā)中，需要左右暗示進(jìn)行排版沸枯，就需要使用浮動(dòng)屬性
?格式：選擇器（float：屬性值;）
left：元素向左浮動(dòng)
right：元素向右浮動(dòng)
注意：因?yàn)樵卦O(shè)置浮動(dòng)屬性后日矫，會(huì)脫離原有文檔流，從而會(huì)影響其他元素的樣式绑榴，
所設(shè)置浮動(dòng)以后哪轿，頁面模式需要重新調(diào)整
八、轉(zhuǎn)換
display
? 塊元素：獨(dú)占一行翔怎，常見 h1? p? div? ul
行內(nèi)元素（內(nèi)聯(lián)元素）：只占自身大小窃诉，自動(dòng)換行span a input?
display屬性可以使得元素在行內(nèi)元素和塊元素之間相互轉(zhuǎn)換
格式：選擇器{display：屬性值杨耙；}
常用的屬性值：
block：塊元素
inline：行內(nèi)元素
inline-block:行內(nèi)塊元素，既可以設(shè)置寬高飘痛，又不會(huì)獨(dú)占一行
< img src=" " alt=" " />
none：元素將被隱藏珊膜，不會(huì)顯示，也不占用頁面的空間
visbility
? hidden隱藏
? 隱藏的元素雖然不顯示宣脉，但是它的位置會(huì)依然保持
九车柠、字體
font-size 用于設(shè)置字體的大小
color：用于設(shè)置字體的顏色
十、CSS盒子模型
什么是盒子模型
? 所有HTML元素：我們都可以看成一個(gè)四邊形塑猖，即一個(gè)盒子
用CSS來設(shè)置元素盒子的內(nèi)邊距竹祷，邊框，外邊距的樣式的方式羊苟，稱為盒模型
2塑陵、邊框：
border：HTML元素盒子的框體
四個(gè)屬性：
broder-top：上邊框
broder-right：有邊框
broder-bottom：下邊框
broder-left：左邊框
通用設(shè)置（簡(jiǎn)寫）一次性設(shè)置上下左右邊框樣式
border:1px solid red; 1像素的實(shí)線紅色邊框
3、內(nèi)邊距
padding：HTML元素里的內(nèi)容體到HTML元素邊框的距離
四個(gè)屬性：
? padding-top： 上內(nèi)邊距
padding-fight：右內(nèi)邊距
padding-bottom：下內(nèi)邊距
padding-left：左內(nèi)邊距
通用設(shè)置（簡(jiǎn)寫）一次性設(shè)置上下左右邊框樣式
padding： 10px蜡励；
4猿妈、外邊距
margin：HTML元素邊框到其他HTML元素邊框的距離
四個(gè)屬性：
? margin-top： 上外邊距
margin-fight：右外邊距
margin-bottom：下外邊距
margin-left：左外邊距
通用設(shè)置（簡(jiǎn)寫）一次性設(shè)置上下左右邊框樣式
margin： 10px；
十一巍虫、CSS和HTML的結(jié)合方式
內(nèi)部樣式
? ? 行內(nèi)樣式：通過標(biāo)簽的style屬性來設(shè)置元素的樣式
格式： <html 標(biāo)簽 style="css樣式
游戲答案：
1 palte?
?2? ?bento??
?3? ?#fancy??
?4? ?place apple?
?5? ?#fancy pickle?
?6? .small
