資源描述：
《html+css學(xué)習(xí)筆記》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫(kù)。
1、Css選擇符的使用Css的常用屬性Css盒子模型塊連元素內(nèi)聯(lián)元素Css命名規(guī)范：Css選擇符：Css選擇符的作用：/指定css樣式所作用的對(duì)象（范圍）1.標(biāo)簽選擇符：針對(duì)html標(biāo)簽2.Id選擇符，針對(duì)頁(yè)面中只出現(xiàn)一次的內(nèi)容，id;3.類選擇符：針對(duì)某些元素同一類的*****默認(rèn)情況下某些html元素有自己本身的默認(rèn)值針對(duì)body標(biāo)簽進(jìn)行樣式的定義：css特性：繼承特性body標(biāo)簽內(nèi)子元素都繼承他的一些屬性4控制所有元素：使用通配符*****通配選擇符：*{屬性：值；},用于定義所有html元素*{}。的作用范圍很廣:但是效率最低（對(duì)于瀏覽器的解釋時(shí)間比較長(zhǎng)）*{margin：
2、0；padding：0；}//重置所有元素的外邊距與內(nèi)邊距，為零（這種方法不推薦使用哦?。?：選擇符的嵌套使用：-----包含選擇符(也叫派生選擇符)：：前段開(kāi)發(fā)的極限：————代碼非常的經(jīng)典（代碼非常簡(jiǎn)潔）《如果我們針對(duì)某個(gè)元素中的某個(gè)子元素進(jìn)行控制可以使用嵌套的方式。不必再為子元素設(shè)置id》父元素子元素{屬性：值；}包含選擇符：（嵌套/派生）：語(yǔ)法e1，e2{屬性：值；}；含義是所有被e1包含的e2，如、tabletd{屬性：值；}#headerlia{屬性：值；}（優(yōu)點(diǎn)就是不需要再單獨(dú)為Id為Header的標(biāo)簽內(nèi)，li標(biāo)簽內(nèi)的a標(biāo)簽單獨(dú)定義class或者Id，css代碼就
3、減少了，同樣也就優(yōu)化了css代碼）6:選擇符分組（集體控制）：將同樣的樣式定義于多個(gè)選擇符：選擇符之間用逗號(hào)隔開(kāi)：如p.div,waring{屬性};7.標(biāo)簽指定式選擇符：如果既想使用Id或class，也想同時(shí)使用標(biāo)簽選擇符H1#content{};表示針對(duì)所有的id為cotent的h1標(biāo)簽H1.p1{}；表示針對(duì)所有class為p1的h1標(biāo)簽8組合選擇符：;將以上選擇符進(jìn)行組合使用h1.p1,#contenth1;三〉css盒子模型：一個(gè)盒子是由以下幾部分構(gòu)成的：1.盒子中的內(nèi)容：content2.盒子的邊框：border1.盒子的邊框與內(nèi)容之間的距離，稱為填充——paddi
4、ng，內(nèi)邊距（內(nèi)補(bǔ)?。?.如果有多個(gè)盒子存在《盒子與盒子之間的距離，稱之為邊界--margin,外邊距（外補(bǔ)?。?***盒子所在的實(shí)際寬度為例：==左邊界+右邊界+左右邊框+左右填充+內(nèi)容寬度1.內(nèi)容屬性：內(nèi)容本身的寬=width，內(nèi)容本身的高=weight2.內(nèi)填充屬性：內(nèi)容與邊框之間的距離：padding*****再定義盒子的寬度時(shí)要考慮到內(nèi)填充，邊框，邊界的存在。如果，增加了內(nèi)填充整個(gè)盒子的寬度值要減去內(nèi)填充的寬度外邊距：（使用外邊距的時(shí)候一定要注意瀏覽器的兼容性）Margin:20px30px40px50px;Margin-top:Margin-right:Margin
5、-bottom:Margin-left:****除了值為零的情況下：所有的數(shù)值都要帶單位：******由于各個(gè)瀏覽器存在著內(nèi)外邊距的默認(rèn)值都不同：我們需要將所有瀏覽器的默認(rèn)內(nèi)外邊距，都從零開(kāi)始計(jì)算：在實(shí)際工作中不要用這個(gè)*{margin：0；padding：0；}效率很低所以我們用到哪些元素就把那些元素的默認(rèn)值改過(guò)來(lái)（歸零）css的屬性雖然有繼承的屬性：但是不能繼承所有的東西Css布局主要是通過(guò)盒子模型來(lái)實(shí)現(xiàn)------w3c將網(wǎng)頁(yè)內(nèi)容，放置在一些盒子中，對(duì)這個(gè)盒子的一些屬性進(jìn)行控制。內(nèi)容：widthheight內(nèi)填充：padding邊框：border：外邊界：margin;關(guān)
6、于列表的屬性介紹：*****存在兼容性問(wèn)題：List-style:list-style
7、
8、list-position
9、
10、
11、list-style-type列表的樣式，列表的圖片列表的符號(hào)位置：列表的樣式：邊框的屬性說(shuō)明：更具語(yǔ)法：推理出它的使用方式：如果：只寫(xiě)border則后面跟著的是三個(gè)不同的字屬性：第一個(gè)：粗細(xì)：第二個(gè)：樣式：第三個(gè)：顏色邊框樣式：粗細(xì)為兩個(gè)像素：實(shí)線顏色Border2pxsollidblue*****css使用小技巧：1.讓盒子始終居中（水平居中。）將對(duì)象的左右邊界設(shè)置為auto；1.讓盒子中的內(nèi)容垂直居中：讓盒子的高度等于行高（但不能有換行）2.我們?cè)谡{(diào)試
12、的時(shí)候：我們可以添加背景顏色：便于調(diào)試******html元素的分類：
