Web前端技術(shù)HTML5+CSS3+響應(yīng)式設(shè)計(jì) 課件 3-CSS樣式基礎(chǔ)_第1頁(yè)
Web前端技術(shù)HTML5+CSS3+響應(yīng)式設(shè)計(jì) 課件 3-CSS樣式基礎(chǔ)_第2頁(yè)
Web前端技術(shù)HTML5+CSS3+響應(yīng)式設(shè)計(jì) 課件 3-CSS樣式基礎(chǔ)_第3頁(yè)
Web前端技術(shù)HTML5+CSS3+響應(yīng)式設(shè)計(jì) 課件 3-CSS樣式基礎(chǔ)_第4頁(yè)
Web前端技術(shù)HTML5+CSS3+響應(yīng)式設(shè)計(jì) 課件 3-CSS樣式基礎(chǔ)_第5頁(yè)
已閱讀5頁(yè)，還剩38頁(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)介

HTML+CSS網(wǎng)頁(yè)設(shè)計(jì)與制作CSS樣式基礎(chǔ)學(xué)習(xí)目標(biāo)了解CSS及其特點(diǎn)掌握CSS樣式的引用方法掌握CSS語(yǔ)法規(guī)則掌握CSS基本選擇器的用法掌握運(yùn)用CSS設(shè)置文本樣式的方法傳統(tǒng)HTML標(biāo)記實(shí)現(xiàn)網(wǎng)頁(yè)時(shí)存在以下不足：1）標(biāo)記不足2）網(wǎng)頁(yè)臃腫

3）后期維護(hù)困難4）定位困難在web2.0標(biāo)準(zhǔn)中，網(wǎng)頁(yè)的結(jié)構(gòu)和表現(xiàn)形式分離。“表現(xiàn)形式”由CSS來(lái)負(fù)責(zé)。為什么要學(xué)CSS？3.1CSS概述CSS語(yǔ)法規(guī)則由兩部分組成：選擇器和聲明語(yǔ)句組。

基本語(yǔ)法：

1）選擇器selector：用來(lái)指定需要設(shè)置樣式的HTML元素。2）聲明語(yǔ)句組：通過(guò)屬性和屬性值描述樣式的具體內(nèi)容，多組聲明語(yǔ)句用分號(hào)（；）分隔，聲明語(yǔ)句不分先后順序。selector{ property1:value1; property2:value2; …… propertyn:valuen;}3.2CSS語(yǔ)法規(guī)則h2{font-family:宋體;font-size:15px;color:red;}例如：

2級(jí)標(biāo)題{

字體:宋體;

字體大小:15像素;

字體顏色:紅色;}3.2CSS語(yǔ)法規(guī)則CSS樣式書(shū)寫(xiě)注意事項(xiàng)：選擇器嚴(yán)格區(qū)分大小寫(xiě)，聲明語(yǔ)句不區(qū)分但一般建議小寫(xiě)；樣式中所有符號(hào)都是英文標(biāo)識(shí)符號(hào)；單個(gè)屬性值如果包含空格，那么該屬性值應(yīng)該加英文引號(hào)；

例font-family:"TimesNewRoman",Times,serif;養(yǎng)成給css加注釋的好習(xí)慣；/*注釋文本*/css不解析空格，可以使用tab、回車鍵、空格鍵來(lái)排版，但屬性值和單位之間不能有空格。例如：font-size:24px;3.2CSS語(yǔ)法規(guī)則標(biāo)簽選擇器類（class）選擇器ID選擇器3.3CSS基本選擇器一、標(biāo)簽選擇器（元素選擇器）HTML的標(biāo)簽名可以直接作為CSS的選擇器，是CSS樣式規(guī)則中最基本的選擇器?；菊Z(yǔ)法：

element{property:value;…}

1）element為HTML的標(biāo)簽，如p、h1、ul等；

2）property：value;為屬性值對(duì)。如color：red；

例如：h1{ text-align:center;}案例：demo3-1.html3.3CSS基本選擇器標(biāo)簽選擇器的特點(diǎn)：

1）由標(biāo)簽選擇器定義的規(guī)則不需要對(duì)其進(jìn)行額外地引用，所有由該標(biāo)簽描述的網(wǎng)頁(yè)內(nèi)容會(huì)自動(dòng)按定義的規(guī)則表現(xiàn)樣式。2）這種方法高效且統(tǒng)一，但同時(shí)也是它的缺點(diǎn)，不能設(shè)計(jì)差異化的樣式。

3.3CSS基本選擇器二、類選擇器類選擇器可以實(shí)現(xiàn)差異化的樣式定義，它將擁有特定class屬性的HTML元素作為選定對(duì)象，是樣式定義中最常見(jiàn)的一種選擇器。基本語(yǔ)法：

.class{property:value;…}類名（class）由用戶自定義，前面用一個(gè)“.”來(lái)標(biāo)記；3.3CSS基本選擇器二、類選擇器例如：定義

.one{ text-decoration:underline; } .two{ font-style:italic; }引用

<h3class="onetwo"></h3> <pclass="one"></p>

案例：demo3-2.html3.3CSS基本選擇器類選擇器的特點(diǎn)：1）只有引用了的樣式才能作用于指定對(duì)象；2）一個(gè)類選擇器可以被多個(gè)元素關(guān)聯(lián)；

3）一個(gè)元素也可以引用多個(gè)類選擇器，多個(gè)選擇器之間用空格分隔。

3.3CSS基本選擇器標(biāo)簽類別選擇器（交集選擇器）如：p.one{color:red;}1）選擇器“p.one”表示：關(guān)聯(lián)了class類名為“one”的p段落；2）注意標(biāo)簽定義在類名前面，中間除了點(diǎn)號(hào)不能有空格或其他符號(hào)。

3.3CSS基本選擇器三、ID選擇器主要是針對(duì)具有id屬性的對(duì)象設(shè)置樣式規(guī)則基本語(yǔ)法：

#id{property:value;…}id名由用戶自定義，前面用一個(gè)“#”來(lái)標(biāo)記定義：#user{width:180px;}

引用：<inputtype="text"name="user“id="user"/>3.3CSS基本選擇器ID選擇器的特點(diǎn)：1）具有唯一性，ID選擇器只能被引用一次，針對(duì)性強(qiáng)；2）一個(gè)元素只能引用一個(gè)ID選擇器。如：id=“#a#b”×3）常用于表單中的控件3.3CSS基本選擇器四、選擇器分組---并集選擇器對(duì)具有相同樣式的多個(gè)選擇器進(jìn)行集體聲明；選擇器之間用逗號(hào)“，”

分隔；h1{color:#0033CC; text-align:center;}h3{color:#0033CC; text-align:center; font-style:italic;}相同樣式集體聲明不同樣式單獨(dú)聲明h1,h3{color:#0033CC;text-align:center;}h3{ font-style:italic; }3.3CSS基本選擇器四、選擇器分組---通配符選擇器利用選擇器分組的原理，我們可以在文檔樣式定義之初對(duì)大量的標(biāo)簽設(shè)置相同的樣式；

例如：body,h1,h2,h3,p,ul,li,a{margin:0;padding:0;}CSS提供了一個(gè)通配符選擇器，用“*”來(lái)描述所有的標(biāo)簽，從而完成文檔的初始化設(shè)置；

*{margin:0px；padding:0px；}3.3CSS基本選擇器一、內(nèi)聯(lián)樣式內(nèi)聯(lián)樣式也稱為行內(nèi)式，通過(guò)標(biāo)記的style屬性來(lái)設(shè)置元素的樣式。

行內(nèi)式只對(duì)其所在的標(biāo)簽及嵌套在其中的子標(biāo)記起作用。使用簡(jiǎn)單，但需要為每個(gè)標(biāo)簽設(shè)置style屬性，后期維護(hù)成本高，代碼“過(guò)胖”。<pstyle=“font-family:'黑體';color:red;”>網(wǎng)頁(yè)</p>3.4CSS樣式的引用二、內(nèi)部樣式表內(nèi)部樣式表也成為內(nèi)嵌式，在HTML文檔的頭部用<style></style>標(biāo)記定義。例如：樣式只對(duì)當(dāng)前文檔有效，所以適用于有特殊樣式需求的單個(gè)文檔。<head><style>h1{text-align:center;}p{font-size:16px;}</style></head>3.4CSS樣式的引用三、外部樣式表

也稱為鏈接式樣式表，是將所有的樣式放在一個(gè)或多個(gè)以.css為擴(kuò)展名的外部樣式表文件中，通過(guò)<link/>標(biāo)記將外部樣式表文件鏈接到指定的HTML文檔中：

例如demo3-3.html<head><linkrel="stylesheet"type="text/css"href="css/demo3-3.css"/></head>3.4CSS樣式的引用三、外部樣式表一個(gè)HTML文件也可以同時(shí)鏈接多個(gè)樣式文件，如下代碼所示：

html結(jié)構(gòu)和css樣式分離，易于維護(hù)和管理，最為實(shí)用。

<head><linkrel="stylesheet"type="text/css"href="css/demo3-1.css"/><linkrel="stylesheet"type="text/css"href="css/demo3-2.css"/></head>3.4CSS樣式的引用四、導(dǎo)入式導(dǎo)入式樣式表與鏈接式樣式表的功能基本相同，只是語(yǔ)法和運(yùn)作方式上略有區(qū)別。導(dǎo)入式在<style>標(biāo)記中通過(guò)@import導(dǎo)入；

<style>

@importurl("css/demo3-3.css");</style>3.4CSS樣式的引用鏈接式和導(dǎo)入式的區(qū)別：鏈接式：在加載頁(yè)面主體部分之前裝載CSS文件，這樣顯示出來(lái)的網(wǎng)頁(yè)從一開(kāi)始就是帶有樣式的，顯示出來(lái)的效果和我們預(yù)期的效果是一致的；導(dǎo)入式：在整個(gè)頁(yè)面加載完成后再裝載CSS文件；當(dāng)網(wǎng)頁(yè)文件比較大或者網(wǎng)速比較慢時(shí)，導(dǎo)入式可能會(huì)使客戶端先呈現(xiàn)出HTML結(jié)構(gòu)，再看到裝載了CSS樣式之后的文件；兩種方式最后看到的效果是一樣的。3.4CSS樣式的引用1CSS字體2CSS文本CSS字體屬性定義文本的字體系列、大小、加粗、字體樣式、字體變形等。CSS文本屬性可定義文本的外觀。包括文本顏色、文本對(duì)齊方式、文本修飾、文本轉(zhuǎn)換和文本縮進(jìn)、字符間距等。3.5CSS文本樣式（1）字體系列font-familyfont-family屬性用于設(shè)置字體系列。網(wǎng)頁(yè)中常用的字體有宋體、黑體等。例如：p{font-family:"黑體";}可以同時(shí)為文本指定多個(gè)字體作為“后備”，中間以逗號(hào)隔開(kāi)，如果瀏覽器不支持第一種字體，則會(huì)嘗試下一種。例如：body{font-family:"timesnewroman",times,serif;}通用字體系列3.5.1CSS字體（2）字體大小font-sizefont-size屬性用于設(shè)置文本大小，該屬性的值可以使用絕對(duì)單位或相對(duì)單位。絕對(duì)單位的使用不允許用戶在瀏覽器中改變文本大小。絕對(duì)長(zhǎng)度單位說(shuō)明絕對(duì)長(zhǎng)度單位說(shuō)明in英寸mm毫米cm厘米pt點(diǎn)3.5.1CSS字體（2）字體大小font-size設(shè)置字體的一般方法如：p{font-size:16px;}案例demo3-4.html相對(duì)單位說(shuō)明用法px相對(duì)于顯示器的屏幕分辨率不能適應(yīng)瀏覽器縮放時(shí)產(chǎn)生的變化，一般不用于響應(yīng)式網(wǎng)站。瀏覽器默認(rèn)的文字大小是16pxem相對(duì)于父元素，1em等于父元素字體大小默認(rèn)情況下（1em=16px），可以通過(guò)公式將像素轉(zhuǎn)換為em，例如32px/16=2emrem相對(duì)于html根元素，CSS3新增的相對(duì)單位通過(guò)修改根元素字體大小，調(diào)整所有字體大小，可以避免字體大小逐層復(fù)合的連鎖反應(yīng)3.5.1CSS字體（2）字體大小font-size1）瀏覽器的默認(rèn)字體都是16px，所有未經(jīng)調(diào)整的瀏覽器都符合:16px=1em=1rem，那么10px=0.625em=0.625rem。2）為了簡(jiǎn)化font-size的換算，一般做如下聲明：html,body{font-size:62.5%；}3）這就使rem值變?yōu)?6px*62.5%=10px，即10px=1rem，這樣處理之后只需要將原來(lái)的px值除以10，就可以換算成rem3.5.1CSS字體（3）字體粗細(xì)font-weightfont-weight屬性用于定義字體的粗細(xì)，其可用屬性值如下表所示。

例如：.one{font-weight:bold;}p{font-weight:900;}值描述normal默認(rèn)值。定義標(biāo)準(zhǔn)的字符bold定義粗體字符（最常用）bolder定義更粗的字符lighter定義更細(xì)的字符100~900（100的整數(shù)倍）定義由細(xì)到粗的字符。其中400等同于normal，700等同于bold，值越大字體越粗3.5.1CSS字體（4）字體樣式font-stylefont-style屬性用于定義字體風(fēng)格，如設(shè)置斜體、傾斜或正常字體，其可用屬性值如下：normal：默認(rèn)值，瀏覽器會(huì)顯示標(biāo)準(zhǔn)的字體樣式。italic：瀏覽器會(huì)顯示斜體的字體樣式。oblique：瀏覽器會(huì)顯示傾斜的字體樣式。其中oblique一般是讓沒(méi)有斜體屬性的文字通過(guò)傾斜達(dá)到與italic類似的效果，實(shí)際工作中常使用italic。例如：h3{font-style:italic;}3.5.1CSS字體（5）字體變形font-variantfont-variant屬性用于設(shè)置變體（字體變形），僅對(duì)英文字符有效，其可用屬性值如下：normal：默認(rèn)值，瀏覽器會(huì)顯示標(biāo)準(zhǔn)的字體。small-caps：顯示小型大寫(xiě)的字體。

中間的字符就是小型大寫(xiě)字母“A”3.5.1CSS字體（6）復(fù)合屬性fontfont屬性可以一次設(shè)置多個(gè)字體屬性，必須按如下順序設(shè)置：font-stylefont-variantfont-weightfont-size/line-heightfont-family

可以省略其中的一個(gè)或多個(gè)屬性，但至少要包括font-size和font-family這兩個(gè)屬性。例p{font:italicbold12px/30pxarial,sans-serif;}3.5.1CSS字體（1）文本顏色colorcolor屬性用于定義文本的顏色，其取值方式有如下3種：預(yù)定義的顏色值，如："color:red;"，還有blue、green等都是常見(jiàn)的預(yù)定義顏色值。十六進(jìn)制值，取值范圍為#000000～#FFFFFF，如#FF0000表示紅色，也可以簡(jiǎn)寫(xiě)為#F00。RGB：R、G、B分別代表光學(xué)三原色的紅色、綠色、藍(lán)色，它們的取值范圍均為0～255，例如RGB（255，0，0）表示紅色，有時(shí)會(huì)進(jìn)一步用RGBA來(lái)表示帶透明度的顏色，A表示透明度，取值范圍是0~1，例如RGBA（255，0，0，0.2）。3.5.2CSS文本（2）文本對(duì)齊方式text-aligntext-align屬性用于設(shè)置文本內(nèi)容的水平對(duì)齊，其可用屬性值如下：left：左對(duì)齊（默認(rèn)值）right：右對(duì)齊。center：居中對(duì)齊。3.5.2CSS文本（3）文本修飾text-decorationtext-decoration用于設(shè)置文本的下畫(huà)線、上畫(huà)線、刪除線等修飾效果，其可用屬性值如下：none：沒(méi)有裝飾（正常文本默認(rèn)值）。underline：下畫(huà)線。overline：上畫(huà)線。line-through：刪除線。3.5.2CSS文本（4）文本轉(zhuǎn)換text-transformtext-transform屬性用于控制英文字符的大小寫(xiě)轉(zhuǎn)換，可用屬性值如下：none：不轉(zhuǎn)換（默認(rèn)值）。capitalize：首字母大寫(xiě)。uppercase：全部字符轉(zhuǎn)換為大寫(xiě)。lowercase：全部字符轉(zhuǎn)換為小寫(xiě)。例如：p{text-transform:lowercase;}，可以將整個(gè)段落中的所有英文字符轉(zhuǎn)換成小寫(xiě)字符。3.5.2CSS文本（5）文本縮進(jìn)text-indenttext-indent屬性用于設(shè)置段落首行文本的縮進(jìn)；常用em、px或%（基于父元素寬度的百分比）作為單位；通常情況下最簡(jiǎn)單的方式是使用em作為單位，這樣縮進(jìn)的距離和文本的大小對(duì)應(yīng)，例如：p{text-index：2em；}，表示縮進(jìn)2個(gè)字符。3.5.2CSS文本（6）字間距l(xiāng)etter-spacing/單詞間距word-spacingletter-spacing屬性用于定義字間距，設(shè)置的是字符或字母之間的間隔，允許使用負(fù)值，默認(rèn)為normal；h1{ letter-spacing:10px;}

/*增加了字符之間的間隔*/h3{letter-spacing:-0.2em;}

/*縮小了字符之間的間隔*/未設(shè)置字符間距

設(shè)置了字符間距

溫馨提示

  • 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)論