周課件章基礎(chǔ)_第1頁(yè)
周課件章基礎(chǔ)_第2頁(yè)
周課件章基礎(chǔ)_第3頁(yè)
周課件章基礎(chǔ)_第4頁(yè)
周課件章基礎(chǔ)_第5頁(yè)
已閱讀5頁(yè)，還剩112頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

——CSS基礎(chǔ)王海波Email:網(wǎng)頁(yè)設(shè)計(jì)與制作案例1案例2案例3><@#$%?*()如何表示網(wǎng)頁(yè)上的不同性質(zhì)的元素，如文字、圖像？基本想法：給網(wǎng)頁(yè)上的每種元素都起個(gè)名字一定要選最好聽(tīng)易記的名字弄特多縮寫(xiě)，倍兒有面子甭管多細(xì)小的元素，都給它起個(gè)名字什么標(biāo)題一呀，標(biāo)題二呀，段落呀，能起的都給它起上要與時(shí)俱進(jìn)，每隔幾年淘汰一批，增加一批，要不然都不意思跟別人打招呼我們除了要掌握一下常用的標(biāo)簽以外h1-h6p,brblockquotestrong,emsub,supulli,olli,dldtddpre我們需要把網(wǎng)頁(yè)結(jié)構(gòu)理解為一棵倒過(guò)來(lái)的樹(shù)htmlbodyheadppdivpdiv問(wèn)題如何像Word一樣，能夠輕松的讓每個(gè)段落首行縮進(jìn)2個(gè)字符？能否控制段落的段前、段后以及行間距？能否改變?yōu)g覽器對(duì)于標(biāo)題一、標(biāo)題二等默認(rèn)的樣式？能否給段落加上邊框和底紋？………

換個(gè)場(chǎng)景在HTML中，創(chuàng)始人最樸素的想法就是標(biāo)簽和元素來(lái)告訴瀏覽器它展現(xiàn)時(shí)的樣子<h1align=“center”>中國(guó)傳媒大學(xué)</h1><b>中國(guó)傳媒大學(xué)</b><i>中國(guó)傳媒大學(xué)</i><fontcolor="#3300CC"face="微軟雅黑"size="+6">中國(guó)傳媒大學(xué)</font>2005年2月的新浪網(wǎng)站<fontcolor=#05006C><h1>微軟Hotmail郵箱出現(xiàn)問(wèn)題用戶無(wú)法正常訪問(wèn)</h1></font>W3C發(fā)現(xiàn)，HTML的發(fā)展走錯(cuò)路了HTML的困境通過(guò)標(biāo)簽的屬性對(duì)每個(gè)元素進(jìn)行重復(fù)的樣式定義，HTML變得越來(lái)越臃腫，難以維護(hù)整個(gè)站點(diǎn)內(nèi)的網(wǎng)頁(yè)難以保持一致性用戶需要下載的文件大小也變得越來(lái)越大網(wǎng)頁(yè)缺乏語(yǔ)義，很難被計(jì)算機(jī)程序自動(dòng)處理CSS誕生了1994年，在與蒂姆·伯納斯·李一起工作時(shí)，哈哈康?維姆萊（H?konWiumLie）提出了層疊樣式表CSS的思想他與另一位CSS標(biāo)準(zhǔn)的制定者BertBos合著的CascadingStyleSheets:DesigningfortheWeb,3rdEdition2005年5月由Addison-WesleyProfessional出版。目前擔(dān)任Opera公司的CTO.H?konWiumLie什么是CSSCSS(CascadingStyleSheet,層疊樣式表)是一系列格式規(guī)則，用于控制網(wǎng)頁(yè)樣式，并允許將網(wǎng)頁(yè)表現(xiàn)與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言。說(shuō)明：CSS不是一種程序設(shè)計(jì)語(yǔ)言，而是一種用于網(wǎng)頁(yè)排版的標(biāo)記性語(yǔ)言，是對(duì)現(xiàn)有HTML語(yǔ)言功能的補(bǔ)充和擴(kuò)展。2023/12/23類比一下主要內(nèi)容如何把CSS和HTML結(jié)合起來(lái)在CSS中如何控制文字和段落如何通過(guò)CSS控制容器元素如何隨心所欲地控制HTML中各種不同需求下的元素2023/12/23如果你是維姆萊，如何發(fā)明這種新的機(jī)制是不是應(yīng)該有以下一些出發(fā)點(diǎn)：HTML不要再管網(wǎng)頁(yè)的表現(xiàn)了新的語(yǔ)言專門(mén)負(fù)責(zé)外觀樣式，而且應(yīng)該可以被網(wǎng)頁(yè)內(nèi)的不同元素共用樣式A網(wǎng)頁(yè)元素A網(wǎng)頁(yè)元素B網(wǎng)頁(yè)元素C網(wǎng)頁(yè)元素D在HTML網(wǎng)頁(yè)文件中找個(gè)地方 </head>

<body> <h1>……..</h1> </body></html>

<html>

<head>

<title>……</title> <meta……../>

<styletype=“text/css”>...</style>再發(fā)明一下語(yǔ)法CSS的定義格式:

selector{ property：value； property：value； property：value； property：value； property：value； property：value； ……}2023/12/23selector（選擇器）表示需要改變樣式的HTML元素屬性是指元素所能夠具有的特征。如字體、顏色等。屬性值是指屬性所能擁有的元素值,如center,#FFF等。冒號(hào)分號(hào)這個(gè)你一定懂ipad{高度：241.2毫米;寬度：185.7毫米;厚度：8.8毫米;重量：601克;處理器：1GHz雙核A5芯片;顯示屏：9.7英寸;}把它換成CSS樣式定義h1{ font-size:64px; font-family:"微軟雅黑"; line-height:128px; background-color:#36F; color:#FFF; }2023/12/23選擇器屬性屬性值CSS基本語(yǔ)法CSS的定義由兩部分構(gòu)成：選擇器和聲明。選擇器(selector)是樣式名稱聲明用于定義樣式元素。聲明由兩部分組成：屬性

property和值value。2023/12/23CSS基本語(yǔ)法指定多個(gè)屬性時(shí)，用分號(hào);將所有的屬性和值分開(kāi)。屬性值是多個(gè)單詞組成時(shí)，必須在值前面加雙引號(hào)“”。多個(gè)屬性和對(duì)應(yīng)的屬性值定義可以在一行，也可以為了增強(qiáng)可讀性把它們放在一行。2023/12/23CSS的注釋用戶可以在CSS中插入注釋來(lái)說(shuō)明用戶代碼的意思，注釋有利于用戶或別人以后編輯和更改代碼時(shí)理解代碼的含義。在瀏覽器中，注釋是不顯示的。CSS注釋以“/*”開(kāi)頭，以“*/”結(jié)尾。2023/12/23CSS中的單位——絕對(duì)單位絕對(duì)單位，在任何分辨率的顯示器下，顯示出來(lái)的都是絕對(duì)大小，不會(huì)發(fā)生改變。2023/12/23單

位說(shuō)

明in（英寸）英美制長(zhǎng)度單位，1in=2.54cmcm（厘米）長(zhǎng)度計(jì)量單位，等于1米的百分之一mm（毫米）長(zhǎng)度計(jì)量單位，等于1米的1千分之一pt（磅）標(biāo)準(zhǔn)的印刷度量單位，廣泛應(yīng)用于打印機(jī)、文字處理程序，1pt=1/72inpc（pica）印刷度量單位，1pc=12ptCSS中的單位——相對(duì)單位相對(duì)單位與絕對(duì)單位相比，顯示大小不是固定的，它所設(shè)置的對(duì)象受屏幕分辨率、可視區(qū)域、瀏覽器設(shè)置、以及相關(guān)元素的大小等多種因素影響。2023/12/23單

位說(shuō)

明px像素，它的顯示大小與顯示器的大小及其分辨率有關(guān)em1em指一個(gè)字體的大小，它會(huì)繼承父級(jí)元素的字體大小ex1ex指字體中小寫(xiě)字母“x”的高度%常用于指定相對(duì)于父級(jí)元素的相對(duì)值我們來(lái)改變一下網(wǎng)頁(yè)默認(rèn)的樣式鏈接在Word中，都有哪些與字體有關(guān)的設(shè)置字體字號(hào)加粗斜體字間距大小寫(xiě)轉(zhuǎn)換在Word中，都有哪些與段落有關(guān)的設(shè)置首行縮進(jìn)對(duì)齊方式行距段前段后邊框如果把它們轉(zhuǎn)換到網(wǎng)頁(yè)的環(huán)境下文字字體font-familyWeb字體@font-face文字大小font-size文字粗細(xì)font-weight斜體font-style文字修飾text-decoration字間距l(xiāng)etter-spacing

英文字母的大小寫(xiě)text-transform2023/12/23如果把它們轉(zhuǎn)換到網(wǎng)頁(yè)的環(huán)境下首行縮進(jìn)text-indent對(duì)齊方式text-align段前margin-top段后margin-bottom邊框border2023/12/23西文的5種字體系列1.襯線字體Serif（文字有末端加強(qiáng)效果）2.無(wú)襯線字體Sans-Serif（粗細(xì)均勻）西文的5種字體系列3.等寬字體Monospace(每個(gè)字母的寬度相同)CourtierNew4.草書(shū)字體Cursive（手寫(xiě)風(fēng)格）MonotypeCorsiva5.虛幻字體Fantasy(常用于標(biāo)題)Impact中文的文字字體宋體

襯線字體（文字有末端加強(qiáng)效果）楷體隸書(shū)黑體微軟雅黑幼圓無(wú)襯線字體（粗細(xì)均勻）

文字字體font-familyfont-family的屬性值是一系列具有先后順序的字體名稱family-name或字體系列名稱generic-family，可以指定任意多個(gè)，它們之間用逗號(hào)分隔，出現(xiàn)在前面的字體或字體系列優(yōu)先被選用。例：p{font-family:Arial,"TimesNewRoman",serif;}

p{font-family:"微軟雅黑","幼圓","楷體";}為什么一般要設(shè)置多個(gè)字體訪問(wèn)你的網(wǎng)站的用戶的計(jì)算機(jī)千差萬(wàn)別，很難保證他們的計(jì)算機(jī)中一定有你在font-family設(shè)置的字體。用戶的瀏覽器如果發(fā)現(xiàn)他的計(jì)算機(jī)中沒(méi)有你設(shè)置的第1種字體，就會(huì)去嘗試使用第2種，第3種…如果你設(shè)置的字體在用戶的計(jì)算機(jī)中一種也沒(méi)有，用戶的瀏覽器會(huì)自動(dòng)選擇他的計(jì)算機(jī)中存在的某一種字體Web字體font-face在CSS3規(guī)范中，通過(guò)@font-face規(guī)則可以將擁有合法版權(quán)的字體文件存放到Web服務(wù)器中，并且在需要時(shí)被自動(dòng)下載到用戶的計(jì)算機(jī)中。例：@font-face{/*定義了可被用戶下的方正綜藝簡(jiǎn)體字體*/font-family:fzzyjt;src:url('/fzzyjt.ttf'),url('/fzzyjt.eot');/*IE9+*/}Web字體font-facehtml文件fzzyjt.ttf用戶在訪問(wèn)網(wǎng)頁(yè)時(shí)，會(huì)發(fā)出請(qǐng)求把字庫(kù)文件下載到自己的計(jì)算機(jī)中fzzyjt.eot文字大小font-sizefont-size設(shè)置文字的大小,一般使用px作為單位。font-size除了可以使用由數(shù)字指定的數(shù)值以外，也可以使用xx-small，large等值。例：p{font-size:24px;}/*文字大小為24像素*/文字粗細(xì)font-weightfont-weight設(shè)置文本的粗細(xì)。例：p{font-weight:bold;}/*文字加粗*/參

數(shù)說(shuō)

明舉

例normal正常的字體，相當(dāng)于參數(shù)為400font-weight:normal;bold粗體，相當(dāng)于參數(shù)為700font-weight:bold;bolder特粗體font-weight:bolder;lighter細(xì)體font-weight:lighter;100-900通過(guò)100～900間的數(shù)值來(lái)設(shè)置文字的粗細(xì)font-weight:200;inherit繼承父元素的粗細(xì)font-weight:inherit;斜體font-stylefont-style用于規(guī)定斜體文本。它的屬性值有三個(gè)值：normal-文本正常顯示italic–使用斜體字體oblique-文本傾斜顯示例：p{font-style:oblique;}/*文字為斜體*/文字修飾text-decorationtext-decoration設(shè)置文字的修飾參

數(shù)說(shuō)

明舉

例none不設(shè)置文字的修飾text-transform:none;underline設(shè)置文字具有下畫(huà)線text-transform:underline;overline設(shè)置文字具有頂畫(huà)線text-transform:overline;line-through設(shè)置文字具有刪除線text-transform:line-through;blink設(shè)置文字閃爍text-transform:blink;inherit繼承父元素的文字修飾設(shè)置text-transform:inherit;這一屬性經(jīng)常用在超鏈接對(duì)象上，改變超鏈接的下畫(huà)線的形式例：a{text-decoration:none;}/*不帶下畫(huà)線*/字間距l(xiāng)etter-spacingletter-spacing設(shè)置字間距例：p{letter-spacing:1em;}/*段落文字的字間距為1個(gè)字符*/英文字母的大小寫(xiě)text-transformtext-transform設(shè)置英文字母的大小寫(xiě)參

數(shù)說(shuō)

明舉

例capitalize英文的首字母大寫(xiě)text-transform:capitalize;uppercase英文全部大寫(xiě)text-transform:uppercase;lowercase英文全部小寫(xiě)text-transform:lowercase;none取消大小寫(xiě)的設(shè)置text-transform:none;inherit繼承父元素的大小寫(xiě)設(shè)置text-transform:inherit;例：p{text-transform:capitalize;}/*段落文字的首字母大寫(xiě)。*/首行縮進(jìn)text-indenttext-indent設(shè)置元素的第一行縮進(jìn)一個(gè)給定的長(zhǎng)度最常見(jiàn)的用途是將段落的首行縮進(jìn)。這時(shí)一般使用相對(duì)單位em。例：p{text-indent:2em;}/*設(shè)置段落元素的首行縮進(jìn)2個(gè)字符*/段落水平對(duì)齊text-aligntext-align設(shè)置一個(gè)段落文字的水平對(duì)齊方式它的屬性值有五個(gè)值：left–左對(duì)齊center-居中對(duì)齊right-右對(duì)齊inherit–繼承父元素的text-align屬性值justify–兩端對(duì)齊例：p{text-align:center;}/*設(shè)置段落文字為居中對(duì)齊*/行高line-heightline-height屬性設(shè)置元素的行高。中國(guó)傳媒大學(xué)中國(guó)傳媒大學(xué)第1行第2行行高行間距字號(hào)行高line-heightline-height的屬性值可以是：normal–缺省值，正常的行高number–當(dāng)前字體大小的倍數(shù)length

–指定具體數(shù)值的行高%

–用當(dāng)前字體大小的百分比來(lái)指定inherit–繼承父元素的行高例：p{line-height:2;}/*設(shè)置段落元素的行高為字體大小的2倍*/CSS基本語(yǔ)法分組形式可以把具有相同樣式的CSS規(guī)則定義放在一組，從而得到更加簡(jiǎn)潔的樣式表。例如,如果希望h1和h2中文字的字體都為同一種字體，則可以使用如下的CSS規(guī)則定義:h1,h2{font-family:"微軟雅黑";}其中不同的選擇器之間用”,”分隔分組定義中的CSS選擇器的個(gè)數(shù)沒(méi)有限制CSS基本語(yǔ)法h1{font-family:"微軟雅黑";background-color:#FF0;color:#FFF;}h2{font-family:"微軟雅黑";background-color:#FF0;color:#FFF;}h1,h2{font-family:"微軟雅黑";background-color:#FF0;color:#FFF;}等價(jià)當(dāng)網(wǎng)頁(yè)加了CSS樣式控制后注：設(shè)置了標(biāo)題1，標(biāo)題2，段落的字體、字號(hào)、首行縮進(jìn)等接下來(lái)，我們需要考慮對(duì)于一個(gè)網(wǎng)站內(nèi)的網(wǎng)頁(yè)來(lái)說(shuō)，應(yīng)該保持它們風(fēng)格的統(tǒng)一。當(dāng)設(shè)計(jì)好一個(gè)網(wǎng)頁(yè)的樣式后，如何把這些樣式給其它網(wǎng)頁(yè)用呢?請(qǐng)思考！CSS文件HTML文件HTML文件HTML文件把CSS樣式放到一個(gè)獨(dú)立的文件中，然后在HTML中引用在HTML網(wǎng)頁(yè)文件中再找個(gè)地方 </head>

<body> <h1>……..</h1> </body></html>

<html>

<head>

<title>……</title> <meta……../>

<styletype=“text/css”>...</style><linkrel="stylesheet"href=“xxxxx”>兩個(gè)網(wǎng)頁(yè)具有同樣的外觀了鏈接鏈接以上就是我們使用CSS的最主要的兩種方式

內(nèi)部樣式<style>中定義的樣式只對(duì)當(dāng)前網(wǎng)頁(yè)起作用

外部樣式<link>中引用的樣式表文件可以由多個(gè)HTML文件共享，實(shí)現(xiàn)代碼的最有效利用CSS的作用和優(yōu)勢(shì)CSS作用和優(yōu)勢(shì)將內(nèi)容與表示形式分離可使得從一個(gè)位置集中維護(hù)站點(diǎn)的外觀變得更加容易，因?yàn)檫M(jìn)行更改時(shí)無(wú)需對(duì)每個(gè)頁(yè)面上的每個(gè)屬性都進(jìn)行更新。將內(nèi)容與表示形式分離還會(huì)可以得到更加簡(jiǎn)練的HTML代碼，這樣將縮短瀏覽器加載時(shí)間，并且同一個(gè)站點(diǎn)通過(guò)外部引用的方式使用的CSS樣式表，可以被瀏覽器保存在緩存中，進(jìn)一步加快了加載網(wǎng)頁(yè)的速度。2023/12/23不過(guò)，還有一種秀米微信當(dāng)我們把一個(gè)平臺(tái)上的帶樣式的內(nèi)容拷貝到另一個(gè)平臺(tái)時(shí)你會(huì)看到CSS的第3種使用方式——行內(nèi)樣式使用style屬性將樣式插入到HMTL標(biāo)簽中。例子:<pstyle=“font-size:24px">…</p>應(yīng)用場(chǎng)合:對(duì)某個(gè)元素單獨(dú)定義樣式。由于將表現(xiàn)和內(nèi)容混雜在一起，行內(nèi)樣式會(huì)損失掉樣式表的許多優(yōu)勢(shì)。但是適合把不同平臺(tái)的內(nèi)容組合在一起?；仡櫼陨衔覀冋劦膯?wèn)題是在HTML中應(yīng)用CSS的3種方式內(nèi)部樣式外部樣式行內(nèi)樣式CSS使用方式原則當(dāng)有多個(gè)網(wǎng)頁(yè)要用到同樣的CSS樣式時(shí)，采用外部樣式的方式，這樣網(wǎng)頁(yè)的代碼大大減少，修改起來(lái)非常方便；只在單個(gè)網(wǎng)頁(yè)中單獨(dú)具有的CSS樣式時(shí)，采用內(nèi)部樣式；只有在某個(gè)網(wǎng)頁(yè)的一、兩個(gè)地方才用到的CSS樣式時(shí)，可以采用行內(nèi)樣表。2023/12/23有了CSS,我們就可以談?wù)勅萜鞯膯?wèn)題了盒模型盒模型是指CSS布局中的每一個(gè)元素，在瀏覽器的解釋中，都被當(dāng)做一個(gè)盒狀物。無(wú)論任何布局，它們都是幾個(gè)盒狀物互相貼近顯示的組合變換。內(nèi)容CONTENT填充PADDING邊框BORDER邊界MARGIN再詳細(xì)一些盒模型CSS盒模型是CSS布局的基礎(chǔ)，每個(gè)網(wǎng)頁(yè)元素都被抽象為一個(gè)盒子，而網(wǎng)頁(yè)的排版布局可以看作對(duì)組成網(wǎng)頁(yè)的盒子元素按照一定的規(guī)則進(jìn)行擺放后的結(jié)果。CSS盒模型是描述網(wǎng)頁(yè)布局的視覺(jué)模型中網(wǎng)頁(yè)元素的矩形盒狀模型。盒模型由margin（邊界）、border（邊框）、padding（填充）和content（內(nèi)容）4部分組成盒子的嵌套盒模型margin也被稱為外邊距，用來(lái)設(shè)置網(wǎng)頁(yè)中元素和元素之間的距離，即定義元素周圍的空間范圍。borderborder（邊框）用來(lái)設(shè)置網(wǎng)頁(yè)中元素邊框的寬度、顏色和樣式。paddingpadding（填充），也稱為內(nèi)邊距，用來(lái)設(shè)置元素的內(nèi)容與邊框之間的距離。contentcontent（內(nèi)容）是元素的真正內(nèi)容部分，用來(lái)容納和顯示內(nèi)容。來(lái)個(gè)比喻例子contentborderpadding鏈接margin屬性margin-top:0px;margin-right:auto;margin-bottom:0px;margin-left:auto;把左邊邊距、右邊邊距的值設(shè)置為auto，可以使得此div在頁(yè)面上是水平居中的。在網(wǎng)頁(yè)上水平居中的盒子margin-leftautomargin-rightautowidth960pxDiv元素margin屬性的幾種簡(jiǎn)寫(xiě)方式margin:0px

auto;margin:0pxauto10px;margin:10px20px30px40px;簡(jiǎn)寫(xiě)1表示：上下0px左右auto簡(jiǎn)寫(xiě)2表示：上0px左右auto下10px簡(jiǎn)寫(xiě)3表示：上10px右20px下30px左40px

border屬性邊框?qū)挾龋篵order-width邊框顏色：border-color邊框樣式：border-styleborder屬性的簡(jiǎn)寫(xiě)

border:5pxsolid#F90;表示：上下左右的邊框?yàn)?px寬，顏色#F90，實(shí)線邊框

如果各邊框的參數(shù)不同，可以寫(xiě)為：border-top:0pxsolid#F90;border-right:5pxsolid#F90;border-bottom:15pxsolid#F90;border-left:20pxsolid#F90;

padding屬性padding（填充），也稱為內(nèi)邊距，用來(lái)設(shè)置元素的內(nèi)容與邊框之間的距離?？梢杂胮adding屬性控制4個(gè)方向的內(nèi)邊距，也可以通過(guò)padding-top、padding-right、padding-bottom、padding-left

4個(gè)子屬性分別控制4個(gè)方向的內(nèi)邊距。一個(gè)元素的實(shí)際寬度10+2+5+200+5+2+10=234px給網(wǎng)頁(yè)加上960像素寬的容器后鏈接再進(jìn)一步在前面的例子中，我們?cè)贑SS樣式中通過(guò)h1{…}控制了標(biāo)題1元素h2{…}控制了標(biāo)題2元素p{…}控制了段落元素#container{…}控制了id為container的元素2023/12/23但是，這還不夠！把網(wǎng)頁(yè)逐漸豐富起來(lái)headercontainerfooter鏈接目前網(wǎng)頁(yè)區(qū)域常用的IDxxx|xxx|xxx|xxx|xxx|xxxxxxxx#header#nav#container#footer下面我們要談一談更多的選擇器通過(guò)選擇器，可以指定樣式所作用的HTML元素。htmlheadmetatitlebodydiv#headerdiv#containerh1,h2ppdiv#footerp如果你想選擇所有的h1元素——標(biāo)簽選擇器htmlheadmetatitlebodydiv#headerdiv#containerh1h2ppdiv#footerpCSS選擇器——HTML標(biāo)簽選擇器HTML標(biāo)簽選擇器即是HTML標(biāo)簽的名稱。它可以重新定義HTML元素的樣式。創(chuàng)建標(biāo)簽選擇器類型的CSS規(guī)則后，相應(yīng)的HTML元素的格式會(huì)立即更新。例:body{color:red；font-size:36px;}h1{color:#0000FF;}p{color:#FF00FF;font-family:“隸書(shū)”;}2023/12/23如果你想選擇唯一性的header——ID選擇器htmlheadmetatitlebodydiv#headerdiv#containerh1h2ppdiv#footerpCSS選擇器——ID選擇器ID選擇符使用方法跟類選擇符使用方法基本相同，不同之處在于ID選擇符只能在HTML頁(yè)面中使用一次，因此其針對(duì)性更強(qiáng)。通過(guò)ID選擇器可以把樣式作用于被id屬性限定的HTML元素定義ID選擇器時(shí)，需要在ID選擇器名稱前加”#”2023/12/23例：#header{background-color:#900;}ID選擇器樣式定義body的問(wèn)題可能瀏覽器在設(shè)計(jì)時(shí)，為了打印網(wǎng)頁(yè)時(shí)的留白考慮，body中的內(nèi)容并不能占滿整個(gè)瀏覽器的文檔區(qū)域，而是距離瀏覽器邊緣有一定的距離，這是由于body元素的外邊距和內(nèi)邊距造成。其它元素也存在這一問(wèn)題除了body元素，許多網(wǎng)頁(yè)元素在不同的瀏覽器中的默認(rèn)樣式是不相同的。當(dāng)網(wǎng)頁(yè)中的元素沒(méi)有主動(dòng)設(shè)置樣式時(shí)，瀏覽器會(huì)給這些元素一些默認(rèn)的樣式，如網(wǎng)頁(yè)中的文字默認(rèn)大小是16像素，h1元素、p元素默認(rèn)前后會(huì)有空行。CSS重置（CSS

Reset）有時(shí)人們并不需要這些默認(rèn)的樣式，并且不同瀏覽器之間默認(rèn)樣式的差別，可能會(huì)給網(wǎng)頁(yè)的跨瀏覽器一致性帶來(lái)困難。因此需要把這些默認(rèn)的樣式清空，這種操作被稱為CSS重置。在目前許多互聯(lián)網(wǎng)上的CSS框架中，提供了成熟的進(jìn)行CSS重置的樣式定義。2023/12/23CSS重置的參考代碼網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域有許多現(xiàn)成的CSS重置代碼，把它們放在網(wǎng)頁(yè)中引用就可以使用。2023/12/23

body的處理方法對(duì)于body來(lái)說(shuō)，幾乎所有的網(wǎng)頁(yè)都通過(guò)這種方式對(duì)它原有的樣式清空body{ padding:0; margin:0;}如果你想選擇某些p元素htmlheadmetatitlebodydiv#headerdiv#containerh1h2ppppdiv#footerpCSS常用選擇器——類選擇器類選擇器是由用戶自定義名稱的選擇器通過(guò)類選擇器可以把樣式作用于被class屬性限定的HTML元素定義類選擇器時(shí)，需要在類選擇器名稱前加”.”例：.viewpoint{color:#F90}………………..<pclass=“viewpoint”>…</p><pclass=“viewpoint”>…</p>類選擇器樣式定義使用類樣式有時(shí)，你想選擇具有某種層次結(jié)構(gòu)的元素選擇在ID名稱為footer的div元素中的p元素htmlheadmetatitlebodydiv#headerdiv#containerh1h2ppdiv#footerpCSS選擇器——復(fù)合內(nèi)容選擇器復(fù)合內(nèi)容選擇器（具有上下文關(guān)系的HTML標(biāo)簽選擇器）如果需要為位于某個(gè)標(biāo)記符內(nèi)的標(biāo)記符設(shè)置特定的樣式規(guī)則，則應(yīng)將選擇器指定為具有上下文關(guān)系的HTML標(biāo)記符。例如，如果只想使位于id為footer的區(qū)塊內(nèi)的p標(biāo)記符具有特定的屬性，則應(yīng)使用以下格式：

#footerp{color：red}#footer和p之間以空格分隔。2023/12/23注：復(fù)合內(nèi)容選擇器也被稱為后代選擇器選擇器小結(jié)（容易犯的語(yǔ)法錯(cuò)誤許多都出在這里）h1.xxx#xxxxxxxx前面以.開(kāi)始前面以#開(kāi)始標(biāo)簽選擇器類選擇器ID選擇器復(fù)合內(nèi)容選擇器中間是空格選擇器小結(jié)如果你想修飾某個(gè)標(biāo)簽所代表的所有元素標(biāo)簽選擇器如果你想修飾HTML中唯一的一個(gè)元素ID選擇器選擇器小結(jié)如果你想修飾HTML中多個(gè)某一類別的元素類選擇器如果你想控制HTML中具有一定結(jié)構(gòu)關(guān)系的元素復(fù)合內(nèi)容選擇器其它選擇器1)通配符選擇器通配選擇器為一個(gè)星號(hào)（*）。該選擇器可以與任何元素匹配，就像是一個(gè)通配符。例如，下面的規(guī)則可以使文檔中的每個(gè)元素都為紅色：*{color:red}2023/12/23注：通配符選擇器一般用來(lái)完成對(duì)網(wǎng)頁(yè)所有元素共有屬性的設(shè)置。4.其它選擇器2)子元素選擇器子元素選擇器選擇元素的直接后代元素。子元素選擇器的語(yǔ)法格式如下：selector>selector{property:value;property:value;…}其中，selector和selector之間用“>”分隔。與復(fù)合內(nèi)容選擇器不同的是，如果不希望選擇任意的后代元素，而是希望縮小范圍，只選擇某個(gè)元素的子元素，則應(yīng)該使用子元素選擇器。2023/12/234.其它選擇器3)偽類選擇器偽類（pseudo-class）主要用于表示用戶與網(wǎng)頁(yè)進(jìn)行交互時(shí)網(wǎng)頁(yè)元素的動(dòng)態(tài)樣式。2023/12/23參

數(shù)說(shuō)

明舉

例:link表示沒(méi)有被訪問(wèn)過(guò)的超鏈接a:link:visited表示已經(jīng)被訪問(wèn)過(guò)的超鏈接a:visited參

數(shù)說(shuō)

明舉

例:hover表示當(dāng)鼠標(biāo)指針懸停在元素上時(shí)a:hover:active表示當(dāng)元素被用戶激活時(shí)，如當(dāng)用戶單擊超鏈接但是還沒(méi)有釋放鼠標(biāo)按鍵時(shí)a:active:focus表示當(dāng)元素獲得焦點(diǎn)時(shí)input:focus超鏈接偽類動(dòng)態(tài)偽類4.其它選擇器4)偽元素選擇器偽元素選擇器能夠在網(wǎng)頁(yè)文檔中插入額外的元素，從而得到某種效果。CSS中定義了選擇首字母、選擇首行、選擇元素之前

溫馨提示

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

評(píng)論

0/150

提交評(píng)論