網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：CSS3基礎(chǔ)-在HTML中使用CSS的方法_第1頁
網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：CSS3基礎(chǔ)-在HTML中使用CSS的方法_第2頁
網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：CSS3基礎(chǔ)-在HTML中使用CSS的方法_第3頁
網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：CSS3基礎(chǔ)-在HTML中使用CSS的方法_第4頁
網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：CSS3基礎(chǔ)-在HTML中使用CSS的方法_第5頁
已閱讀5頁，還剩17頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

在HTML文件中使用CSS的方式有4種：行內(nèi)樣式、內(nèi)部樣式表、鏈入外部樣式表和導(dǎo)入外部樣式表。

CSS3基礎(chǔ)

在HTML中使用CSS的方法目錄

CSS3基礎(chǔ)4.1CSS設(shè)計(jì)與編寫原則4.2在HTML中使用CSS的方法4.3CSS的兩個(gè)主要特性4.4CSS的基本語法4.5CSS的選擇器4.6屬性值的寫法和單位4.7HTML文檔結(jié)構(gòu)與元素類型4.8實(shí)訓(xùn)——制作內(nèi)容詳情頁習(xí)題44.2.1行內(nèi)樣式行內(nèi)樣式的格式為：<標(biāo)簽style="屬性:屬性值;屬性:屬性值…">…</標(biāo)簽>【例4-1】使用行內(nèi)樣式設(shè)計(jì)網(wǎng)頁。本例文件為4-1.html。4.2在HTML中使用CSS的方法<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>個(gè)人博客網(wǎng)站</title></head><body><divstyle="width:800px;"><!--行內(nèi)樣式定義的div樣式--><h3style="font-size:25pt;color:blue;text-align:center;">如何快速建立自己的個(gè)人博客網(wǎng)站</h3><!--行內(nèi)樣式定義的h3樣式，不影響其他h3標(biāo)題-->4.2在HTML中使用CSS的方法<pstyle="text-align:center;"><imgsrc="images/blog.jpg"style="width:200;height:160;border:1pxsolid;color:skyblue"></p><pstyle="font-size:11pt;text-indent:2em;">各大博客門戶網(wǎng)站相繼關(guān)閉，做一個(gè)獨(dú)立的個(gè)人博客網(wǎng)站是將來的趨勢。越來越多的個(gè)人站長傾向于獨(dú)立建站，那如何快速建立自己的個(gè)人博客網(wǎng)站呢？</p><!--行內(nèi)樣式定義段落文字為11磅大小，段落首行縮進(jìn)2字符--></div><p>個(gè)人博客應(yīng)該簡單、優(yōu)雅、穩(wěn)重、大氣、低調(diào)，采用HTML5+CSS3設(shè)計(jì)，nav導(dǎo)航實(shí)現(xiàn)鼠標(biāo)懸停漸變顯示英文標(biāo)題的效果，banner部分，選擇大圖作為背景，利用CSS3中的animation屬性結(jié)合文字圖片實(shí)現(xiàn)文字從左到右的漸變效果。</p><!--本段沒有使用行內(nèi)樣式，段落采用默認(rèn)排列--></body></html>4.2在HTML中使用CSS的方法4.2在HTML中使用CSS的方法4.2.2內(nèi)部樣式1．內(nèi)部樣式表的格式內(nèi)部樣式表的格式為：<styletype="text/css">

選擇符1{屬性:屬性值;屬性:屬性值…}/*注釋內(nèi)容*/

選擇符2{屬性:屬性值;屬性:屬性值…}…

選擇符n{屬性:屬性值;屬性:屬性值…}/*注釋內(nèi)容*/</style><style>…</style>標(biāo)簽對用來說明所要定義的樣式。type屬性指定style使用CSS的語法來定義。4.2在HTML中使用CSS的方法2．組合選擇符的格式其格式為：<styletype="text/css">

選擇符1,選擇符2,…,選擇符n{屬性:屬性值;屬性:屬性值…}

選擇符a,選擇符b,…,選擇符m{屬性:屬性值;屬性:屬性值…}</style>4.2在HTML中使用CSS的方法【例4-2】使用內(nèi)部樣式設(shè)計(jì)網(wǎng)頁。本例文件4-2.html在瀏覽器中的顯示效果如圖4-3所示。4.2在HTML中使用CSS的方法<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>個(gè)人博客網(wǎng)站</title><styletype="text/css">body{font-size:11pt;}/*設(shè)置主體字體大小*//*設(shè)置區(qū)塊寬度780px、邊框2px虛線綠色*/div{width:780px;border:1pxdashedgreen;}/*設(shè)置h3標(biāo)題的字體、顏色、對齊方式*/h3{font-family:黑體;font-size:25pt;color:blue;text-align:center;}h3.title{font-size:18pt;font-weight:bold;color:#666;text-align:center;}/*設(shè)置h3的副標(biāo)題*//*設(shè)置段落文字11pt；黑色；文本縮進(jìn)兩個(gè)字符*/p{font-size:11pt;color:black;text-indent:2em;}p.img{text-align:center;}/*設(shè)置段落中的圖像居中對齊*/p.author{color:blue;text-align:right;}/*設(shè)置段落中的作者文字藍(lán)色、右對齊*/img{width:200px;height:160px;border:1pxsolid;color:skyblue;}/*設(shè)置圖像的寬、高、邊框*/</style></head>4.2在HTML中使用CSS的方法

<body><div><h3>如何快速建立自己的</h3><h3class="title">個(gè)人博客網(wǎng)站</h3><pclass="img"><imgsrc="images/blog.jpg"></p><p>各大博客門戶網(wǎng)站相繼關(guān)閉，做一個(gè)獨(dú)立的個(gè)人博客網(wǎng)站是將來的趨勢。越來越多的個(gè)人站長傾向于獨(dú)立建站，那如何快速建立自己的個(gè)人博客網(wǎng)站呢？</p><p>個(gè)人博客應(yīng)該簡單、優(yōu)雅、穩(wěn)重、大氣、低調(diào)，采用HTML5+CSS3設(shè)計(jì)，nav導(dǎo)航實(shí)現(xiàn)鼠標(biāo)懸停漸變顯示英文標(biāo)題的效果，banner部分，選擇大圖作為背景，利用CSS3中的animation屬性結(jié)合文字圖片實(shí)現(xiàn)文字從左到右的漸變效果。</p><pclass="author">發(fā)布：小江</p></div></body></html>4.2在HTML中使用CSS的方法4.2.3鏈入外部樣式文件1.用<link>標(biāo)簽鏈接樣式表文件<link>標(biāo)簽必須放到頁面HTML的<head>…</head>標(biāo)簽對內(nèi)。其格式為：<head>…<linkrel="stylesheet"href="外部樣式表文件名.css"type="text/css">…</head>4.2在HTML中使用CSS的方法2.外部樣式表文件的格式外部樣式表文件的格式為：選擇符1{屬性:屬性值;屬性:屬性值…}/*注釋內(nèi)容*/選擇符2{屬性:屬性值;屬性:屬性值…}…選擇符n{屬性:屬性值;屬性:屬性值…}4.2在HTML中使用CSS的方法【例4-3】在網(wǎng)頁中鏈入外部樣式文件style.css。本例網(wǎng)頁結(jié)構(gòu)文件為4-3.html。<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>個(gè)人博客網(wǎng)站</title><linkrel="stylesheet"href="css/style.css"type="text/css"></head><body><div><h3>如何快速建立自己的</h3><h3class="title">個(gè)人博客網(wǎng)站</h3><pclass="img"><imgsrc="images/blog.jpg"></p><p>各大博客門戶網(wǎng)站，相繼關(guān)閉，做一個(gè)獨(dú)立的個(gè)人博客網(wǎng)站，那是將來的趨勢。越來越多的個(gè)人站長傾向于獨(dú)立建站，有個(gè)屬于自己的博客網(wǎng)站，那如何快速建立自己的個(gè)人博客網(wǎng)站呢？</p><p>個(gè)人博客應(yīng)該簡單、優(yōu)雅、穩(wěn)重、大氣、低調(diào)，采用HTML5+CSS3設(shè)計(jì)，nav導(dǎo)航實(shí)現(xiàn)鼠標(biāo)懸停漸變顯示英文標(biāo)題的效果，banner部分，選擇大圖作為背景，利用CSS3中animation屬性結(jié)合文字圖片實(shí)現(xiàn)文字從左到右的漸變效果。</p><pclass="author">發(fā)布：小江</p></div></body></html>4.2在HTML中使用CSS的方法CSS文件名為style.css，存放在文件夾css中，代碼如下：body{font-size:11pt}/*設(shè)置主體字體大小*/div{width:780px;border:1pxgreen#00f;}/*設(shè)置區(qū)塊寬度600px、邊框1px綠色虛線*//*設(shè)置h3標(biāo)題的字體、顏色、對齊方式*/h3{font-family:黑體;font-size:22pt;color:black;text-align:center}h3.title{font-size:18pt;font-weight:bold;color:#666;text-align:center}/*設(shè)置h3的副標(biāo)題*/p{font-size:11pt;color:black;text-indent:2em}/*設(shè)置段落文字11pt；黑色；文本縮進(jìn)兩個(gè)字符*/p.img{text-align:center}/*設(shè)置段落中的圖像居中對齊*/p.author{color:blue;text-align:right}/*設(shè)置段落中的作者文字藍(lán)色、右對齊*/img{width:200;height:160;border:1pxsolid;color:skyblue}/*設(shè)置圖像的寬、高、邊框*/4.2在HTML中使用CSS的方法4.2在HTML中使用CSS的方法4.2在HTML中使用CSS的方法4.2.4導(dǎo)入外部樣式文件其格式為：<styletype="text/css">@importurl("外部樣式表的文件名1.css");@importurl("外部樣式表的文件名2.css");

其他樣式表的聲明</style>“外部樣式表的文件名”指定要導(dǎo)入的樣式表文件，擴(kuò)展名為.css。4.2在HTML中使用CSS的方法【例4-4】使用導(dǎo)入外部樣式文件制作頁面，導(dǎo)入的外部樣式文件（extstyle.css）中包含.bgcolor{background:blue}。本例網(wǎng)頁文件4-4.html在瀏覽器中顯示的效果如圖4-6所示。4.2在HTML中使用CSS的方法CSS文件名為extstyle.css，存放在文件夾css中，代碼如下：body{font-size:11pt}/*設(shè)置主體字體大小*/div{width:780px;border:1pxgreen#00f;}/*設(shè)置區(qū)塊寬度600px、邊框1px綠色虛線*/h3{font-family:黑體;font-size:22pt;color:black;text-align:center}/*設(shè)置h3標(biāo)題的字體、顏色、對齊方式*/h3.title{font-size:18pt;font-weight:bold;color:#666;text-align:center}/*設(shè)置h3的副標(biāo)題*/p{font-size:11pt;color:black;text-indent:2em}/*設(shè)置段落文字11pt；黑色；文本縮進(jìn)兩個(gè)字符*/p.img{text-align:center}/*設(shè)置段落中的圖像居中對齊*/p.author{color:blue;text-align:right}/*設(shè)置段落中的作者文字藍(lán)色、右對齊*/img{width:200;height:160;border:1pxsolid;color:skyblue}/*設(shè)置圖像的寬、高、邊框*/.bgcolor{background:blue}/*設(shè)置類，背景為藍(lán)色*/網(wǎng)頁結(jié)構(gòu)文件4-4.html的HTML代碼如下：<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>個(gè)人博客網(wǎng)站</title><styletype="text/css">@importurl(css/extstyle.css);/*設(shè)置類，字體為黑色；背景為黃色*

溫馨提示

  • 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)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論