柚子快報(bào)邀請(qǐng)碼778899分享：初步體驗(yàn)CSS

http://yzkb.51969.com/

一、CSS基本知識(shí)點(diǎn)

? ? ? ? 1. CSS的定義：層疊樣式表(Cascading Style Sheets),也叫CSS樣式、級(jí)聯(lián)樣式表。是一種標(biāo)記語(yǔ)言。

? ? ? ? 2. 作用：用來(lái)設(shè)置HTML頁(yè)面中文本內(nèi)容、圖片的外形、以及版面的布局、外觀顯示樣式。

二、引入樣式

? ? ? ? 1. 分類：

? ? ? ? ? ? ? ? 內(nèi)聯(lián)樣式：在開(kāi)始標(biāo)簽中使用style屬性書(shū)寫(xiě)樣式。

? ? ? ? ? ? ? ? 內(nèi)部樣式：在HTML文檔的head標(biāo)簽中用style標(biāo)簽來(lái)寫(xiě)。

? ? ? ? ? ? ? ? 外部樣式：（1）創(chuàng)建css文件；

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（2）在html文件中關(guān)聯(lián)css文件。

外部樣式

內(nèi)聯(lián)樣式、內(nèi)部樣式

? ? ? ? 3. hbuilderx怎么樣創(chuàng)建CSS文件

? ? ? ? ? ? ? ? (1) 點(diǎn)擊左側(cè)視圖;

? ? ? ? ? ? ? ? (2)然后找到CSS右擊，點(diǎn)新建、點(diǎn)CSS文件；

? ? ? ? ? ? ? （3 接著可以寫(xiě)下你想要的文件名稱，點(diǎn)創(chuàng)建就可以。

? ? ? ? ? ? ? （4）點(diǎn)擊CSS文件就可以寫(xiě)內(nèi)容。

第一步

第二步

第三步

第四步

三、選擇器

? ? ? ? 1. 查找標(biāo)簽，設(shè)置樣式。

? ? ? ? 2.基礎(chǔ)選擇器

? ? ? ? ? ? ? ? 標(biāo)簽選擇器

? ? ? ? ? ? ? ? 類選擇器

? ? ? ? ? ? ? ? id選擇器

? ? ? ? ? ? ? ? 2.1 標(biāo)簽選擇器：使用標(biāo)簽名作為選擇器，選中同名標(biāo)簽設(shè)置相同的樣式，無(wú)差異化同名標(biāo)簽的樣式。

? ? ? ? ? ? ? ? 2.2 類選擇器：

? ? ? ? ? ? ? ? ? ? ? ? 作用：查找標(biāo)簽，差異化設(shè)置標(biāo)簽的顯示效果。

? ? ? ? ? ? ? ? ? ? ? ? 特點(diǎn)：可以給多個(gè)標(biāo)簽使用。

? ? ? ? ? ? ? ? ? ? ? ? 步驟：（1）定義類選擇器：.類名

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（2）使用類選擇器，標(biāo)簽添加class=“類名”

? ? ? ? ? ? ? ? ? ? ? ? 注意：類名自定義，不要用純數(shù)字或中文，盡量用英文命名；

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??一個(gè)類選擇器可以給多個(gè)標(biāo)簽使用 ；

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??一個(gè)標(biāo)簽可以使用多個(gè)類名，class屬性值寫(xiě)多個(gè)類名，類名用空格隔開(kāi)；

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?類名盡量見(jiàn)名知意。

? ? ? ? ????????2.3 id選擇器

? ? ? ? ? ? ? ????????? 作用：查找標(biāo)簽，差異化設(shè)置標(biāo)簽的顯示效果。

? ? ? ? ? ? ? ?????????步驟：（1）定義id選擇器：#id名

? ? ? ? ? ? ? ? ? ? ? ? ? ? ????????（2）使用id選擇器：標(biāo)簽添加id="id名"

? ? ? ? ? ? ? ? 規(guī)則：同一個(gè)id選擇器在頁(yè)面只能使用一次

四、盒子模型

? ? ? ? 1.作用：網(wǎng)頁(yè)布局，擺放盒子和內(nèi)容。

? ? ? ? 2.標(biāo)簽：用

? ? ? ? 3.組成部分：

? ? ? ? ? ? ? ? （1）內(nèi)容content：width&height; ? ? ? ? ? ? ? ? （2）內(nèi)邊距padding;會(huì)把盒子撐大； ? ? ? ? ? ? ? ? （3）邊框border; ? ? ? ? ? ? ? ? （4）外邊距margin;盒子與盒子之間的距離。

盒子模型的結(jié)構(gòu)圖

? ? ? ? ? ? ? ? 2.1邊框

????????????????????????（1）屬性名：border

? ? ? ? ? ? ? ? ? ? ? ?（2） 屬性值：邊框線粗細(xì)（大小） 線條樣式? 顏色（順序不論）

? ? ? ? ? ? ? ? ? ? ? ? （3）border的屬性

? ? ? ? ? ? ? ? （4）線條樣式

? ? ? ? ? ? ? ? ? ? ? ??solid實(shí)線,dotted點(diǎn)線,dashed虛線

? ? ? ? ? ? ? ? （5)寫(xiě)法

? ? ? ? ? ? ? （6）邊框的總結(jié)

?????????????? ?2.2內(nèi)邊距

? ? ? ? ? ? ? ? ? ? ? ? （1）屬性名：padding/padding-方位名詞

? ? ? ? ? ? ? ? ? ? ? ? （2）padding的屬性：用于設(shè)置內(nèi)邊距，即邊框與內(nèi)容之間的距離。

? ? ? ? ? ? ? ? ? ? ? ? （3）屬性值的多值寫(xiě)法

? ? ? ? ? ? ? ? 2.5margin的寫(xiě)法

? ? ? ? 3.方位詞

????????????????top上、bottom下、right右、left左、center居中

? ? ? ? 4.外邊距應(yīng)用

? ? ? ? ? ? ? ? （1）可以讓塊級(jí)盒子水平居中:第一盒子要有寬度;第二給盒子左右外邊距設(shè)置為auto(自動(dòng)的)

? ? ? ? ? ? ? ? （2）初始化所有標(biāo)簽的外邊距和內(nèi)邊距

五、外邊距的問(wèn)題

? ? ? ? 1.問(wèn)題及解決方法

? ? ? ? ? ? ? ?1.1第一個(gè)問(wèn)題：相鄰塊級(jí)元素垂直外邊距合并(只會(huì)取其中最大的外邊距值)

?? ??? ??? ??????????? ?解決方法：一般只給一個(gè)盒子設(shè)置外邊距

? ? ? ? ? ? ? ? 1.2第二個(gè)問(wèn)題：嵌套塊級(jí)元素垂直外邊距塌陷問(wèn)題

?? ??? ??? ??????????? ?解決方法1：給父盒子添加邊框 ?? ??? ??? ??? ?????????解決方法2：給父盒子增加內(nèi)邊框 ?? ??? ??? ??? ?????????解決方法3：給父盒子增加overflow:hidden;開(kāi)發(fā)中常用的

? ? ? ? ? ? ? ? ? ? ? ?

????????

柚子快報(bào)邀請(qǐng)碼778899分享：初步體驗(yàn)CSS

http://yzkb.51969.com/

參考文章