《HTML5+CSS3 Web開發(fā)案例教程》課件-第3章 CSS語言基礎(chǔ)_第1頁
《HTML5+CSS3 Web開發(fā)案例教程》課件-第3章 CSS語言基礎(chǔ)_第2頁
《HTML5+CSS3 Web開發(fā)案例教程》課件-第3章 CSS語言基礎(chǔ)_第3頁
《HTML5+CSS3 Web開發(fā)案例教程》課件-第3章 CSS語言基礎(chǔ)_第4頁
《HTML5+CSS3 Web開發(fā)案例教程》課件-第3章 CSS語言基礎(chǔ)_第5頁
已閱讀5頁，還剩16頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

HTML5+CSS3

2021.6HTML5andCSS3第3章

CSS語言基礎(chǔ)入門知識理解CSS規(guī)則基本CSS選擇器DEMO在HTML中使用CSS的方法DEMO第3章

CSS語言基礎(chǔ)

第3章

CSS語言基礎(chǔ)入門知識CSS標準CSS（CascadingStyleSheet）中文譯為層疊樣式表，它是用于控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標記性語言。CSS也是由W3C組織負責制定和發(fā)布的。1996年12月，發(fā)布了CSS1.0規(guī)范；1998年5月，發(fā)布了2.0規(guī)范。此后，CSS3的規(guī)范于1999年開始制訂，2001年5月23日W3C完成了CSS3的工作草案。從CSS3開始，它演進的一個主要變化就是W3C決定將CSS3分成一系列模塊，各個模塊可以獨立制定和發(fā)布標準。第3章

CSS語言基礎(chǔ)入門知識傳統(tǒng)HTML的缺點維護困難為了修改某個特殊標記（例如上例中的<h2>標記）的格式，需要花費很多的時間，尤其對于整個網(wǎng)站而言，后期修改和維護的成本很高。標記不足HTML本身的標記很少，很多標記都是為網(wǎng)頁內(nèi)容服務(wù)的，而關(guān)于美工樣式的標記，如文字間距、段落縮進等標記在HTML中很難找到。網(wǎng)頁過“胖”由于沒有統(tǒng)一對各種風格樣式進行控制，因此HTML的頁面往往體積過大，占用了很多寶貴的帶寬。定位困難在整體布局頁面時，HTML對于各個模塊的位置調(diào)整顯得捉襟見肘，過多的其他標記同樣也導(dǎo)致頁面的復(fù)雜和后期維護的困難。第3章

CSS語言基礎(chǔ)CSS的引入：使用<style>標記最核心的變化就是，原來由HTML同時承擔的“內(nèi)容”和“表現(xiàn)”雙重任務(wù)，現(xiàn)在分離了，內(nèi)容仍然由HTML負責，而表現(xiàn)形式則是通過<style>標記中的CSS代碼負責的。第3章

CSS語言基礎(chǔ)理解CSS規(guī)則在具體使用CSS之前，請讀者先思考一個生活中的問題，通常我們是如何描述一個人的？張飛{

身高：185cm；

體重：105kg；

性別：男；

民族：漢族；

}這個表實際上是由3個要素組成的，即姓名、屬性和屬性值。通過這樣一張表，就可以把一個人的基本情況描述出來了。表中每一行分別描述了一個人的某一種屬性，以及該屬性的屬性值。第3章

CSS語言基礎(chǔ)理解CSS規(guī)則CSS的作用就是設(shè)置網(wǎng)頁的各個組成部分的表現(xiàn)形式。因此，如果把上面的表換成描述網(wǎng)頁上一個標題的屬性表。CSS的作用就是設(shè)置網(wǎng)頁的各個組成部分的表現(xiàn)形式。因此，如果把上面的表格換成描述網(wǎng)頁上一個標題的屬性表，可以設(shè)想應(yīng)該大致是這個樣子。第3章

CSS語言基礎(chǔ)基本CSS選擇器在CSS的三個組成部分中，“對象”是很重要的，它指定了對哪些網(wǎng)頁元素進行設(shè)置，因此，它有一個專門的名稱——選擇器（selector）。選擇器是CSS中很重要的概念，所有HTML語言中的標記樣式都是通過不同的CSS選擇器進行控制的。用戶只需要通過選擇器對不同的HTML標簽進行選擇，并賦予各種樣式聲明，即可實現(xiàn)各種效果。在CSS中，有幾種不同類型的選擇，本節(jié)先來介紹“基本”選擇器。所謂“基本”，是相對于下一節(jié)中要介紹“復(fù)合”選擇器而言的。也就是說“復(fù)合”選擇器是通過對基本選擇器進行組合而構(gòu)成的。基本選擇器有標記選擇器、類別選擇器和ID選擇器3種。第3章

CSS語言基礎(chǔ)標記選擇器一個HTML頁面由很多不同的標記組成，而CSS標記選擇器就是聲明哪些標記采用哪種CSS樣式。每一種HTML標記的名稱都可以作為相應(yīng)的標記選擇器的名稱。例如p選擇器，就是用于聲明頁面中所有<p>標記的樣式風格。同樣可以通過h1選擇器來聲明頁面中所有的<h1>標記的CSS風格。CSS語言對于所有屬性和值都有相對嚴格的要求。如果聲明的屬性在CSS規(guī)范中沒有，或者某個屬性的值不符合該屬性的要求，都不能使該CSS語句生效。第3章

CSS語言基礎(chǔ)類別選擇器類別選擇器的名稱可以由用戶自定義，屬性和值跟標記選擇器一樣，也必須符合CSS規(guī)范。第3章

CSS語言基礎(chǔ)類別選擇器第3章

CSS語言基礎(chǔ)ID選擇器ID選擇器的使用方法跟class選擇器基本相同，不同之處在于ID選擇器只能在HTML頁面中使用一次，因此其針對性更強。第3章

CSS語言基礎(chǔ)DEMO第3章

CSS語言基礎(chǔ)在HTML中使用CSS的方法——行內(nèi)樣式行內(nèi)樣式是所有樣式方法中最為直接的一種，它直接對HTML的標記使用style屬性，然后將CSS代碼直接寫在其中。

<pstyle="color:red;>文字顏色為紅色</p>第3章

CSS語言基礎(chǔ)在HTML中使用CSS的方法——內(nèi)嵌式內(nèi)嵌樣式表就是將CSS寫在<head>與</head>之間，并且用<style>和</style>標記進行聲明

第3章

CSS語言基礎(chǔ)在HTML中使用CSS的方法——鏈接式鏈接式CSS樣式表是使用頻率最高，也是最為實用的方法。它將HTML頁面本身與CSS樣式風格分離為兩個或者多個文件，實現(xiàn)了頁面框架HTML代碼與美工CSS代碼的完全分離，使得前期制作和后期維護都十分方便使用link標記引入CSS第3章

CSS語言基礎(chǔ)在HTML中使用CSS的方法——導(dǎo)入樣式導(dǎo)入樣式表與上一小節(jié)提到的鏈接樣式表的功能基本相同，只是語法和運作方式上略有區(qū)別。采用import方式導(dǎo)入的樣式表，在HTML文件初始化時，會被導(dǎo)入到HTML文件內(nèi)，作為文件的一部分，類似內(nèi)嵌式的效果。使用@import導(dǎo)入第3章

CSS語言基礎(chǔ)各種方式的優(yōu)先級規(guī)則1.行內(nèi)式>嵌入式>外部樣式；2.外部樣式中，出現(xiàn)在后面的優(yōu)先級高于出現(xiàn)在前面的。雖然各種CSS樣式加入頁面的方式有先后的優(yōu)先級，但在建設(shè)網(wǎng)站時，最好只使用其中的1～2種，這

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論