Web前端開發(fā)技術(shù)項(xiàng)目教程（HTML5 CSS3 JavaScript）（微課版） 課件 5.1.2知識(shí)點(diǎn)1CSS樣式表的概念及基本用法

CSS樣式表的概念及基本用法信息安全技術(shù)應(yīng)用ApplicationofInformationSecurityTechnology《前端技術(shù)開發(fā)》前端技術(shù)開發(fā)知識(shí)儲(chǔ)備CSS樣式表的概念1CSS的基本語法201CSS樣式表的概念前端技術(shù)開發(fā)CSS樣式表的概念前端技術(shù)開發(fā)01京東商城等網(wǎng)頁元素眾多、結(jié)構(gòu)復(fù)雜。如果采用HTML設(shè)置大小、顏色等樣式少且難以維護(hù)?？梢圆捎肅SS樣式表設(shè)置管理樣式。CSS樣式表的概念前端技術(shù)開發(fā)01-CSS（CascadingStyleSheet）即層疊樣式表或稱級(jí)聯(lián)樣式表，簡稱樣式表。CSS樣式層疊-樣式是指對(duì)網(wǎng)頁中的元素（文字、段落、圖像、列表等）外觀的整體概括，即描述所有網(wǎng)頁元素的顯示形式（例如，文字的大小、字體、背景及圖像的顏色、大小等都是樣式）。-層疊：就是指當(dāng)HTML文件引用多個(gè)CSS文件時(shí)，如果CSS文件之間所定義的樣式發(fā)生了沖突，將依據(jù)層次的先后來處理樣式對(duì)內(nèi)容的控制，遵循最近優(yōu)先原則；CSS還具有繼承的特性，子元素會(huì)自然繼承父元素的樣式。CSS樣式表的概念前端技術(shù)開發(fā)01HTML與CSS的關(guān)系

內(nèi)容結(jié)構(gòu)與表現(xiàn)形式的關(guān)系，HTML確定網(wǎng)頁結(jié)構(gòu)和內(nèi)容，CSS來決定頁面元素的表現(xiàn)形式。使用CSS具有如下優(yōu)勢：（1）內(nèi)容和樣式的分離，代碼結(jié)構(gòu)清晰，風(fēng)格簡潔明了。（2）代碼復(fù)用性好，提高編碼效率。（3）易于維護(hù)。（4）兼容性好。02CSS的基本語法前端技術(shù)開發(fā)CSS的基本語法前端技術(shù)開發(fā)02（1）selector表示CSS選擇器，用于選擇特定網(wǎng)頁元素的符號(hào)。property表示CSS屬性，定義被選定元素某一方面的樣式。value表示屬性值。語法selector{property:value;property:value;…}說明標(biāo)創(chuàng)建標(biāo)題元素的基本語法：（2）在使用CSS語法設(shè)置屬性和屬性值時(shí)，屬性與屬性值之間與冒號(hào)隔開。例如：設(shè)置文字顏色為紅色p{color:red;}CSS的基本語法前端技術(shù)開發(fā)02（3）如果屬性值有多個(gè)單詞構(gòu)成，單詞間有空格，那么必須給值加上引號(hào)。語法selector{property:value;property:value;…}說明標(biāo)創(chuàng)建標(biāo)題元素的基本語法：（4）定義多個(gè)屬性時(shí)，屬性與屬性之間用分號(hào)隔開，最后一個(gè)屬性定義時(shí)，分號(hào)可省略。例如：設(shè)置英文字體h1{font-family:“CourierNew”}例如：p{font-size:12px;color:red;}小結(jié)前端技術(shù)開發(fā)03CSS樣式表是一種用于網(wǎng)頁設(shè)計(jì)的樣式表語言。它允許網(wǎng)頁設(shè)計(jì)者定義HTML或XML等文件中的元素如何顯示，包括文本字體、顏色、邊距、大小、布局和外觀等。CSS的主要特點(diǎn)包括層疊性、繼承性和模塊化，這使得它能夠有效地組織網(wǎng)頁內(nèi)容，實(shí)現(xiàn)結(jié)構(gòu)和樣式的分離，從而提高網(wǎng)頁的可維護(hù)性和可讀性