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

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

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

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

基本語法：

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

2級標題{

字體:宋體;

字體大小:15像素;

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

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

element{property:value;…}

1）element為HTML的標簽，如p、h1、ul等；

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

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

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

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

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

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

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

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

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

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

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

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

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

分隔；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基本選擇器四、選擇器分組---通配符選擇器利用選擇器分組的原理，我們可以在文檔樣式定義之初對大量的標簽設置相同的樣式；

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

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

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

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

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

html結構和css樣式分離，易于維護和管理，最為實用。

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

<style>

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

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

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

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

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

/*縮小了字符之間的間隔*/未設置字符間距

設置了字符間距

溫馨提示

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

評論

0/150

提交評論