網頁設計與制作課件 第8章 CSS3基礎_第1頁
網頁設計與制作課件 第8章 CSS3基礎_第2頁
網頁設計與制作課件 第8章 CSS3基礎_第3頁
網頁設計與制作課件 第8章 CSS3基礎_第4頁
網頁設計與制作課件 第8章 CSS3基礎_第5頁
已閱讀5頁，還剩27頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

CSS3基礎PowerPointdesign01CSS3概述CONTENTS目錄CSS的語法結構02添加CSS樣式表0301CSS3概述Part01（1）打開Dreamweaver，單擊“代碼”按鈕，進入“代碼”視圖。（2）在<head></head>標記之間添加代碼，表示設置網頁中文字大小、顏色與背景。（3）在<body></body>標記之間添加代碼，表示在網頁中輸入文字“編寫CSS”。<p>編寫CSS</p>（4）保存文件，瀏覽網頁。課堂案例——編寫CSSCSS是CascadingStyleSheets的簡稱，也稱為“層疊樣式表”。CSS是一組樣式，樣式中的屬性在HTML元素中依次出現，并顯示在瀏覽器中。樣式可以定義在HTML文件的標志（TAG）里，也可以在外部附件文件中。如果是附件文件，一個樣式表可以用于多個頁面，甚至整個站點，因此具有更好的易用性和擴展性。創(chuàng)建的CSS樣式表可以應用到很多頁面中，從而使不同的頁面獲得相同的布局和外觀，因此CSS具有更好的易用性與擴展性。DreamweaverCC中對樣式表的支持達到了一個比較高的程度。通過樣式面板可以對網頁中的樣式表進行管理，其中建立樣式表的幾種方式將樣式表的應用優(yōu)點體現得淋漓盡致，而且通過擴展可以用樣式表制作比較復雜的樣式。什么是CSSCSS樣式可以為網頁上的元素精確地定位和控制傳統(tǒng)的格式屬性（如字體、尺寸、對齊等），還可以設置如位置、特殊效果、鼠標滑過之類的HTML屬性。可以將CSS優(yōu)越性歸納為以下幾點：1.將格式和結構分離2.以前所未有的能力控制頁面布局3.制作體積更小、下載更快的網頁4.將許多網頁同時更新，比以前更快更宜易5.瀏覽器將成為更友好的界面CSS的優(yōu)越性CSS語句是內嵌在HTML文檔內的，所以編寫CSS的方法和編寫HTML文檔的方法是一樣的，可以用任何一種文本編輯工具來編寫，比如Dreamweaver和Windows下的記事本與寫字板以及專門的HTML文本編輯工具（Ultraedit）。CSS的代碼都是由一些最基本的語句構成，它的基本語句的語法如下。Selector{property:value}在以上語法中，property:value指的是樣式表定義，property表示屬性，value表示屬性值，屬性與屬性值之間用冒號（:）隔開，屬性值與屬性值之間用分號（;）隔開，因此以上語法也可以表示如下。選擇符{屬性1:屬性值1;屬性2:屬性值2}Selector是選擇符，一般都是定義樣式HTML的標記，比如table、body、p等，請看以下代碼示例。p{font-size:50;font-style:bold;color:blue}這里P是來定義該段落內的格式，font-size、font-style和color是屬性，分別定義P中字體的大?。╯ize）、樣式（style）和顏色（color），而50、bold、blue是屬性值，意思是以50pt、粗體、藍色的樣式顯示該段落。CSS3的基礎語法CSS樣式位于文檔簽之間，其作用范圍由class或其他任何符合CSS規(guī)范的文本設置。CSS層疊樣式表包含4種類型：1自定義CSS樣式2包含特定ID屬性的標簽3定義HTML標簽4復合內容CSS樣式的類型CSS的語法結構Part02（1）打開Dreamweaver，單擊“代碼”按鈕，進入“代碼”視圖。（2）在<head></head>標記之間添加代碼。（3）在<body></body>標記之間添加代碼，表示在網頁中輸入文字“設置背景顏色”。（4）保存文件，瀏覽網頁。課堂案例——定義網頁背景顏色與字體CSS的語法結構由三部分組成：選擇符（Selector）、屬性（property）和值（value),簡單的CSS規(guī)則如下所示：選擇符{屬性：值}CSS屬性與選擇符號011.選擇符（Selector)是指這組樣式編碼所要針對的對象，可以是一個HTML標簽，如body，h1；也可以是定義了特定id或class的標簽，如#main選擇符表示選擇<divid=”main”>，即一個名稱為main的id對象。瀏覽器將對CSS選擇符進行嚴格的解析，每一組樣式均會被瀏覽器應用到對應的對象上。CSS屬性與選擇符號022.屬性(property)是CSS樣式控制的核心，對于每一個HTML中的標簽，CSS者提供了豐富的樣式屬性，如顏色、大小、定位、浮動方式等。033.值(value)是指屬性的值，形式有兩種：一種是指定范圍的值，如float屬性，只可能應用left、right、none、inherit四種值；另一種為數值，如width能夠使用0-9999px，或其他單位來指定。在上一節(jié)中的body{}便是一種類型選擇符。所謂類型選擇符，是指網頁中已有的標簽類型作為名稱的選擇符，body是網頁中的一個標簽類型，p也是，span也是。因此以下選擇符都是類型選擇符，而它們將控制頁面中所有的body或p或span。body{}p{}span{}類選擇符除了對于單個HTML對象進行樣式指定，同樣也可以對一組對象進行相同的樣式指定，例如：H1,h2,h3,p,span{font-size:12px;font-family:"宋體";}使用逗號對選擇符進行分隔，使得頁面中所有的h1,h2,h3,p及span標簽都將具有相同的樣式定義。這樣做的好處是對于頁面中需要使用相同樣式的地方，只需要書寫一次樣式表即可實現，減少代碼量，改善CSS代碼的結構。群組選擇符一個包含選擇符的CSS祥式表定義代碼如下：H1span{font-weight;bold;}如果僅僅想對某一個對象中的子對象進行樣式指定時，包含選擇符就派上用場了。包含選擇護指選擇符組合中前—個對象包含后一個對象，對象之間使用空格作為分隔符。如上面的CSS代碼所示，對hi1下面的span進行樣式指定，最后應用到的HTML是如下格式：<h1>這里是一段文本<span>這里是span內的文本</span></h1><h1>單獨的h1</h1><span>單獨的span</span><h2>被h2標簽套用的文本<span>這里是h2下的span</span></h2>H1標簽之下的span標簽將被應用font-weight:bold的樣式設置。注意，僅僅對有此結構的標簽有效。對于單獨存在的h1或是單獨存在的span及其他非h1標簽下屬的span均不會應用此樣式。提示這樣做能夠幫助設計者避免過多的id及class的設置，直接對所需要設置的元素進行設置。包含選擇符除了可以二者包含，也可以多級包含，例如以下選擇符樣式同樣能夠使用bodyh1spanstrong{Font-weight:bold;}包含選擇符id選擇符及class選擇符均是CSS提供的由用戶自定義標簽名稱的一種選擇符模式，用戶可以使用id及class對頁面中的HTML標簽進行自定義名稱，從而達到擴展HTML標簽及組合HTML標簽的目的。比如對于HTML中的h1標簽而言，對子CSS，如果使用id選擇符，那么id="p1">及<h1id="p2">對于CSS來講是兩個不同的元素，從而達到擴展的目的。用戶定義名稱的方式也有助于用戶細化自身的界面結構，使用符合頁面需求的名稱來進行結構設計，增強代碼可讀性。1.id選擇符2.class選擇符id及class選擇符如果既想使用id或class，也想同時使用標簽選擇符，可以使用如下格式：

h1#main{}表示針對所有id為main的h1標簽。h1.pi{}表示針對所有class為p1的h1標簽。標簽指定式選擇符在對標簽選擇的精確度上介于標簽選擇符及id/class選擇符之間，也是一種經常能夠使用的選擇符形式。標簽指定式選擇符對于上述所有CSS選擇符而言，無論是什么選擇符，均可以進行組合使用。h1.p1{}表示h1標簽下的所有Class為p1的標簽。#mainh1{}表示id為main的標簽下的所有h1標簽。hi#mainh2{)id為main的hi標簽下的h2標簽。CSS在選擇符的使用上可以說是非常自由，根據頁面需求，設計者可以靈活使用各種選擇符。組合選擇符CSS規(guī)則通過繼承屬性可以應用于多個標簽。包含在CSS選擇器中的HTML標簽可以繼承大多數的CSS聲明。假設將所有標簽<P>設置為紅色，那么所有包括在<P>…</P>標簽對之間的標簽將繼承這個屬性，并且也被設置為紅色。繼承也可以用在一些包含父子關系的HTML標簽中，例如一個列表。不管是編號的（排序，<ol>）還是項目符號的（不排序，<ul>），列表由許多被<1i>標簽指定的列表項構成。每一個列表項都被認為是父標簽<o1>或者<ul>的子標簽。請看下面的示例：ol{color:#FF0000;}ul{color:#0000FF;}在上面的示例中，所有排序列表項顯示為紅色（#FF0000）；所有不排序列表項則顯示為藍色（#0000FF）。使用這種父子關系的一個主要好處在于能通過一個CSS規(guī)則改變整個網頁的字體。下面的聲明可以完成這個修改。body{font-family:Verdana,Arial,Helvetica,sans-serif;}在上例中，之所以能實現這個修改，是因為<body>標簽已經被認為是頁面上所有HTML元素的父元素。繼承選擇符偽類及偽對象是一種特殊的類和對象，它由CSS自動支持，屬子CSS的一種擴展類和對象，名稱不能被用戶自定義，使用時只能夠按標準格式進行應用。使用形式如下：a:hover{background-color:#FFFFFF;}偽類和偽對象由以下兩種形式組成：?選擇符：偽類?選擇符：偽對象上面說到的hover便是一個偽類，用于指定鏈接標簽a的鼠標移上狀態(tài)。CSS內置了幾個標準的偽類用于用戶的樣式定義。偽類與偽對象如果接觸過DOS命令或是Word中的替換功能，對于通配操作應該不會陌生，通配是指使用字符替代不確定的字，如在DOS命令中，使用表示所有文件，使用*.*表示所有擴展名為bat的文件。因此，所謂的通配選擇符，也是指對對象可以使用模糊指定的方式進行選擇。CSS的通配選擇符使用*作為關鍵字，使用方法如下：*{margin:0px;}*號表示所有對象，包含所有不同id不同class的HTML的所有標簽。使用如上的選擇符進行樣式定義，頁面中所有對象都會使用margin:0px的邊界設置。通配選擇符添加CSS樣式表Part03步驟01：打開Dreamweaver，單擊“代碼”按鈕，進入“代碼”視圖。步驟02：在<head></head>標記之間添加代碼。步驟03：保存文件，按“F12”鍵瀏覽網頁。課堂案例——調用外部CSS樣式表一個外部的樣式表可以通過HTML的link元素連接到HTML文檔中，link標記是放置在文檔的head部分?？蛇x的type屬性用于指定媒體類型，允許瀏覽器忽略它們不支持的樣式表類型，基本語法如下。<head><linkrel=”stylesheet”href=”*.css”type=”text/css”media=”screen”></head>外部樣式表不能含有任何像<head>或<style>這樣的HTML的標簽，樣式表僅僅由樣式規(guī)則或聲明組成，1個單獨由P{margin:2em}組成的文件就可以用作外部樣式表了。*.css是單獨保存的樣式表文件，其中不能包含<style>標識符，并且只能以.css為后綴。<link>標記也有一個可選的media屬性，用于指定樣式表被接受的介質或媒體。media表示使用樣式表的網頁將用什么媒體輸出，其選項設置如下。 Screen（默認）：提交到計算機屏幕。 Print：輸出到打印機。 TV：輸出到電視機。 Projection：輸出到投影儀。 Aural：輸出到揚聲器。 Braille：輸出到凸字觸覺感知設備。 Tty：輸出到電傳打字機。 All：輸出到以上所有設備。如果要輸出到多種媒體，可以用逗號分隔取值。rel屬性用于定義連接的文件和HTML文檔之間的關系。rel=stylesheet指定一個固定或首選的外部樣式表，而rel="alternatestylesheet"定義一個交互樣式，固定樣式在樣式表激活時總被應用。使用外部樣式表可以改變整個網站的外觀，而不是通過樣式表改變一個文件。大多數瀏覽器會將外部樣式表保存在緩沖區(qū)，從而避免在載入網頁時的重新載入樣式表。鏈接一個外部的樣式表一個樣式表可以使用style元素在文檔中嵌入，基本語法如下。<head><styletype="text/css"><!--樣式表的具體內容--></style></head>比如以下代碼示例。<STYLETYPE="text/CSS"MEDIA=screen><!--BODY{background:url(foo.gif)red;color:black}PEM{background:yellow;color:black}.note{margin-left:5em;margin-right:5em}--></STYLE>style元素放在文檔的head部分，其type屬性用于指定媒體類型，link元素也一樣。同樣地，title和media屬性也可以用style指定。type="text/css"表示樣式表采用mime類型，幫助不支持CSS的瀏覽器過濾掉CSS代碼，避免在瀏覽器面前直接以源代碼的方式顯示設置的樣式表，但為了保證上述情況不發(fā)生，還是有必要在樣式表里加上注釋標識符<!--注釋內容-->。嵌入一個樣式表以@import開頭的聯合樣式表的輸入方法和鏈接樣式表的方法很相似，但聯合樣式表輸入方式更有優(yōu)勢，因為聯合法可以在鏈接外部樣式表的同時，針對該網頁的具體情況做出別的網頁不需要的樣式規(guī)則，其格式如下。<head><styletype="text/css"><!--@import"*.css"其他樣式表的聲明--></style></head>例如以下代碼示例。<STYLETYPE="text/CSS"MEDIA="screen,projection"><!--@importurl(/style.CSS);@importurl(/stylesheets/punk.CSS);DT{background:yellow;color:black}--></STYLE>@import可以在CSS中再次引入其他樣式表，比如可以創(chuàng)建一個主樣式表，在主樣式表中再引入其他的樣式表。當一個頁面被加載的時候（即被瀏覽者瀏覽的時候），link引用的CSS會同時被加載，而@import引用的CSS會等到頁面全部下載完再被加載。聯合使用樣式表id是根據文檔對象模型原理所出現的選擇符類型。對于一個網頁而言，其中的每一個標簽（或其他對象），均可以使用一個id=""的形式對id屬性進行一個名稱的指定，id可以理解為一個標識，在網頁中每個id名稱只能使用一次。<divid="main"></div>在這段代碼中，HTML中的一個div標簽被指定了id名為main。在CSS樣式中，id選擇符使用#符號進行標識，如果需要對id為main的標簽設置樣式，應當使用如下格式。#main{font-size:14px;line-height:16px;}id的基本作用是對每一個頁面中唯一出現的元素進行定義。如可以將導航條命名為nav，將網頁頭部和底部分別命名力header和footer。對于類似的元素在頁面中均出現一次，使用id進行命名具有唯一性的指派含義，有助于代碼閱讀及使用。id屬性如果說id是對于HTML標簽的擴展，那么class應該是對HTML多個標簽的一種組合，class直譯為類或類別。對于網頁設計而言，可以對HTMI.標簽使用一個class=""的形式對class屬性進行名稱指定。與id不同的是class允許重復使用，如頁面中的多個元素，都可以使用同一個class定義，例如。<divclass="p1"></div><hlclass="p1"</h1><h3class="p1"></h3>使用class的好處是，對于不同的HTML標簽，CSS可以直接根據class名稱來進行樣式指定。.P1{Margin:10px;background-color:blue;}class在CSS中使用點符號（.）加上class名稱的形式，如上例所示，對p1的對象進行了樣式指定，無論是什么HTML標簽，頁面中所有使用了class="p1"的標簽均使用此樣式進行設置。class選擇符也是對CSS代碼重用性的良好體現

溫馨提示

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

評論

0/150

提交評論