Web前端技術(shù)HTML5+CSS3+響應(yīng)式設(shè)計 課件 3-CSS樣式基礎(chǔ)_第1頁
Web前端技術(shù)HTML5+CSS3+響應(yīng)式設(shè)計 課件 3-CSS樣式基礎(chǔ)_第2頁
Web前端技術(shù)HTML5+CSS3+響應(yīng)式設(shè)計 課件 3-CSS樣式基礎(chǔ)_第3頁
Web前端技術(shù)HTML5+CSS3+響應(yīng)式設(shè)計 課件 3-CSS樣式基礎(chǔ)_第4頁
Web前端技術(shù)HTML5+CSS3+響應(yīng)式設(shè)計 課件 3-CSS樣式基礎(chǔ)_第5頁
已閱讀5頁，還剩38頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

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

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

基本語法：

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

2級標(biāo)題{

字體:宋體;

字體大小:15像素;

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

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

element{property:value;…}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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)入式樣式表與鏈接式樣式表的功能基本相同，只是語法和運作方式上略有區(qū)別。導(dǎo)入式在<style>標(biāo)記中通過@import導(dǎo)入；

<style>

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

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

可以省略其中的一個或多個屬性，但至少要包括font-size和font-family這兩個屬性。例p{font:italicbold12px/30pxarial,sans-serif;}3.5.1CSS字體（1）文本顏色colorcolor屬性用于定義文本的顏色，其取值方式有如下3種：預(yù)定義的顏色值，如："color:red;"，還有blue、green等都是常見的預(yù)定義顏色值。十六進(jìn)制值，取值范圍為#000000～#FFFFFF，如#FF0000表示紅色，也可以簡寫為#F00。RGB：R、G、B分別代表光學(xué)三原色的紅色、綠色、藍(lán)色，它們的取值范圍均為0～255，例如RGB（255，0，0）表示紅色，有時會進(jìn)一步用RGBA來表示帶透明度的顏色，A表示透明度，取值范圍是0~1，例如RGBA（255，0，0，0.2）。3.5.2CSS文本（2）文本對齊方式text-aligntext-align屬性用于設(shè)置文本內(nèi)容的水平對齊，其可用屬性值如下：left：左對齊（默認(rèn)值）right：右對齊。center：居中對齊。3.5.2CSS文本（3）文本修飾text-decorationtext-decoration用于設(shè)置文本的下畫線、上畫線、刪除線等修飾效果，其可用屬性值如下：none：沒有裝飾（正常文本默認(rèn)值）。underline：下畫線。overline：上畫線。line-through：刪除線。3.5.2CSS文本（4）文本轉(zhuǎn)換text-transformtext-transform屬性用于控制英文字符的大小寫轉(zhuǎn)換，可用屬性值如下：none：不轉(zhuǎn)換（默認(rèn)值）。capitalize：首字母大寫。uppercase：全部字符轉(zhuǎn)換為大寫。lowercase：全部字符轉(zhuǎn)換為小寫。例如：p{text-transform:lowercase;}，可以將整個段落中的所有英文字符轉(zhuǎn)換成小寫字符。3.5.2CSS文本（5）文本縮進(jìn)text-indenttext-indent屬性用于設(shè)置段落首行文本的縮進(jìn)；常用em、px或%（基于父元素寬度的百分比）作為單位；通常情況下最簡單的方式是使用em作為單位，這樣縮進(jìn)的距離和文本的大小對應(yīng)，例如：p{text-index：2em；}，表示縮進(jìn)2個字符。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. 本站所有資源如無特殊說明，都需要本地電腦安裝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)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論