CSS基礎市公開課一等獎省賽課獲獎課件_第1頁
CSS基礎市公開課一等獎省賽課獲獎課件_第2頁
CSS基礎市公開課一等獎省賽課獲獎課件_第3頁
CSS基礎市公開課一等獎省賽課獲獎課件_第4頁
CSS基礎市公開課一等獎省賽課獲獎課件_第5頁
已閱讀5頁，還剩41頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

《基于Web標準網(wǎng)頁設計》唐四薪編著清華大學出版社配套網(wǎng)站：CSS基礎第1頁第四章CSS概述唐四薪CSS基礎第2頁CSS概述CSS是CascadingStylesSheets縮寫，漢字譯名為層疊樣式表，是用于控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離一個標識性語言HTML和CSS關系就是“內(nèi)容”和“形式”關系，由HTML組織網(wǎng)頁結(jié)構(gòu)和內(nèi)容，而經(jīng)過CSS來決定頁面表現(xiàn)形式CSS基礎第3頁為何需要CSS因為html主要功效是描述網(wǎng)頁結(jié)構(gòu)，所以控制網(wǎng)頁外觀和表現(xiàn)能力很差，1無法準確到像素級調(diào)整文字大小，行間距等，2不能對多個網(wǎng)頁元素進行統(tǒng)一樣式設置，只能一個一個元素設置。學習CSS可實現(xiàn)對網(wǎng)頁外觀和排版進行更靈活控制，使網(wǎng)頁更美觀CSS禪意花園（網(wǎng)站，書名）CSS基礎第4頁CSS基礎第5頁CSS基礎第6頁CSS基礎第7頁html只能對元素一個一個設置樣式<body> <h2><fontcolor="#FF0000"face="黑體">CSS標識1</font></h2> <p>CSS標識正文內(nèi)容1</p> <h2><fontcolor="#FF0000"face="黑體">CSS標識2</font></h2> <p>CSS標識正文內(nèi)容2</p> <h2><fontcolor="#FF0000"face="黑體">CSS標識3</font></h2> <p>CSS標識正文內(nèi)容3</p> <h2><fontcolor="#FF0000"face="黑體">CSS標識4</font></h2> <p>CSS標識正文內(nèi)容4</p></body>產(chǎn)生問題：代碼冗余假如要修改元素樣式，也要一個個改，修改工作量大CSS基礎第8頁使用CSS后h2{ font-family:黑體; color:red;}<h2>CSS標識1</h2> <p>CSS標識正文內(nèi)容1</p> <h2>CSS標識2</h2> <p>CSS標識正文內(nèi)容2</p> <h2>CSS標識3</font></h2> <p>CSS標識正文內(nèi)容3</p> <h2>CSS標識4</font></h2> <p>CSS標識正文內(nèi)容4</p>沒有了代碼冗余假如要修改，只需修改選擇器中內(nèi)容就能夠了CSS基礎第9頁html弱點而且有很多表現(xiàn)用html是根本無法修改最經(jīng)典是：行距以象素級修改字體大小為文字設置背景色，邊框等CSS基礎第10頁CSS語法CSS樣式表由一系列樣式規(guī)則組成，瀏覽器將這些規(guī)則應用到對應元素上，下面是一條樣式規(guī)則。h1{color:red;font-size:25px;}h1color:red;font-size:25px;{}選擇器屬性值屬性值申明申明CSS基礎第11頁CSS樣式規(guī)則組成－選擇器一條CSS樣式規(guī)則由選擇器(selector)和申明(declarations)組成。選擇器是為了選中網(wǎng)頁中一些元素，選擇器能夠是一個標識名，表示將網(wǎng)頁中該標識全部元素都選中，也就是定義了CSS規(guī)則作用對象。選擇器也能夠是一個自定義類名，表示將自定義一類元素全部選中，為了對這一類元素進行標識，必須在這一類每個元素標識里添加一個html屬性class＝"類名"；選擇器還能夠是一個自定義id名，表示選中網(wǎng)頁中某一個唯一元素，一樣，該元素也必須在標識中添加一個html屬性id＝"id名"讓CSS來識別。

CSS基礎第12頁CSS申明而申明則用于定義元素樣式。在上面示例中，h1是選擇器，介于花括號{}之間全部內(nèi)容都是申明，申明又能夠分為屬性和值，屬性和值用冒號隔開。（注意CSS屬性和值寫法與html屬性區(qū)分）。屬性和值能夠設置多個，從而實現(xiàn)對同一標識申明各種樣式格調(diào)。假如要設置多個屬性和值，則每條申明之間要用分號隔開；CSS基礎第13頁CSS屬性值寫法假如屬性某個值不是一個單詞，則值要用引號引發(fā)來：p{font-family:"sansserif"}；假如一個屬性有多個值，則每個值之間要用空格隔開：a{margin:6px4px3px}；要為某個屬性設置多個候選值，則每個值之間用逗號隔開：p{font-family:"TimesNewRoman",Times,serif}；CSS基礎第14頁在HTML中引入CSS方法CSS基礎第15頁在HTML中引入CSS方法HTML和CSS是兩種作用不一樣語言，它們同時對一個網(wǎng)頁產(chǎn)生作用，所以必須經(jīng)過一些方法，將CSS與HTML掛接在一起，才能正常工作。在HTML中，引入CSS方法有行內(nèi)式、內(nèi)嵌式、導入式和鏈接式4種CSS基礎第16頁行內(nèi)式html標識都有一個通用style屬性，行內(nèi)式就是在該屬性內(nèi)添加CSS屬性和值，如：<tdstyle="color:#FF0000;text-decoration:underline"width="88%">有時我們需要做測試或?qū)€別元素設置CSS屬性時，能夠使用這種方式，這種方式因為CSS屬性就在標識內(nèi)，其作用對象就是標識內(nèi)元素。所以不需要指定CSS選擇器，只需要書寫CSS屬性和值。但它沒有表達出CSS統(tǒng)一設置許多元素樣式優(yōu)勢。CSS基礎第17頁嵌入式嵌入式將頁面中各種元素CSS樣式設置集中寫在<style>和</style>之間，<style>標識是專用于引入嵌入式CSS一個html標識，它只能放置在文檔頭部，即下面這段代碼只能放置在html文檔<head>和</head>之間。<styletype="text/css">h1{color:red;font-size:25px;}</style>對于單一網(wǎng)頁，這種方式很方便。不過對于一個包含很多頁面網(wǎng)站，假如每個頁面都以嵌入式方式設置各自樣式，不但麻煩，冗余代碼多，而且網(wǎng)站每個頁面格調(diào)不好統(tǒng)一。所以一個網(wǎng)站通常都是編寫一個獨立CSS文件，使用以下兩種方式之一，引入到網(wǎng)站全部html文檔中注意：能夠?qū)SS樣式規(guī)則寫在注釋符內(nèi)，不會被忽略CSS基礎第18頁鏈接式和導入式鏈接式和導入式目標都是將一個獨立CSS文件引入到HTML文件，我們在學習CSS或制作單個網(wǎng)頁時，為了方便可采取行內(nèi)式或嵌入式方法，但若要制作網(wǎng)站則主要應采取鏈接式方法引入CSS。鏈接式和導入式最大區(qū)分在于鏈接式使用HTML標識引入外部CSS文件，而導入式則是用CSS規(guī)則引入外部CSS文件，所以它們語法不一樣CSS基礎第19頁鏈接式和導入式區(qū)分鏈接式是在網(wǎng)頁文檔頭部經(jīng)過link標識引入外部CSS文件，格式以下：<linkhref="style1.css"rel="stylesheet"type="text/css"/>而使用導入式，則需要使用以下語句：<styletype="text/css">@importurl("style2.css");</style>CSS基礎第20頁另外，這兩種方式顯示效果也略有不一樣。使用鏈接式時，會在裝載頁面主體部分之前裝載CSS文件，這么顯示出來網(wǎng)頁從一開始就是帶有樣式效果，而使用導入式時，要在整個頁面裝載完之后再裝載CSS文件，假如頁面文件比較大，則開始裝載時會顯示無樣式頁面。從瀏覽者感受來說，這是使用導入式一個缺點。import把CSS文件內(nèi)容復制到HTML文件中，link直接向CSS文件讀取所定義CSS樣式CSS基礎第21頁選擇器分類（重點）CSS基礎第22頁CSS選擇器分類標識選擇器偽類選擇器類選擇器id選擇器CSS基礎第23頁標識選擇器標識是元素固有屬性，CSS標識選擇器用來申明哪種標識采取哪種CSS樣式，所以，每一個html標識名稱都能夠作為對應標識選擇器名稱。如圖1所表示，標識選擇器將擁有同一個標識全部元素全部選中。如：<styletype="text/css">p{ /*標識選擇器*/color:blue;font-size:18px;}</style>CSS基礎第24頁偽類選擇器所謂偽類就是指標識狀態(tài)。網(wǎng)頁中鏈接標識能響應瀏覽者點擊。a標識有四種狀態(tài)能描述這種響應，分別是a:link、a:visited、a:hover、a:active，a標識在這幾個狀態(tài)下樣式能夠經(jīng)過偽類選擇器來分別定義，偽類選擇器標識和偽類之間用“:”隔開。其格式為

a:hovercolor:green;font-size:20px;{}標識名屬性值屬性值申明申明偽類名CSS基礎第25頁經(jīng)過偽類選擇器制作動態(tài)超鏈接偽類選擇器能夠看成是一個特殊標識選擇器，它用來選中在某種狀態(tài)下標識假如分別定義a標識在四種不一樣狀態(tài)下含有不一樣顏色，在鼠標懸停時還將添加下劃線。需要注意兩點：一、鏈接偽類選擇器書寫應遵照LVHA次序，即CSS代碼中四個選擇器出現(xiàn)次序應為a:link→a:visited→a:hover→a:active，若違反這種次序鼠標停留和激活樣式就不起作用了。二、各種偽類選擇器將繼承a標識選擇器定義樣式。CSS基礎第26頁類選擇器標識選擇器一旦申明，那么頁面中全部該標識元素都會產(chǎn)生對應改變。比如當申明<p>標識為紅色時，頁面中全部<p>元素都將顯示為紅色不過假如希望其中某一些<p>元素不是紅色，而是藍色，就需要將這些<p>元素自定義為一類，用類選擇器來選中它們；或者希望不一樣標識元素應用同一樣式，也能夠?qū)⑦@些不一樣標識元素定義為同一類，以下所表示一個<p>元素和一個<h3>元素被定義為了同一類。類選擇器以半角“.”開頭，且類名稱第一個字母不能為數(shù)字CSS基礎第27頁以上定義了類別名元素都會應用對應類選擇器樣式，其中第四行經(jīng)過class="onetwo"將兩種樣式同時加入，得到紅色20象素大字體。第一行p元素因未定義類別名則不受影響，僅作為對比時參考.classcolor:green;font-size:20px;{}類別選擇器屬性值屬性值申明申明類別名稱CSS基礎第28頁<styletype="text/css">.one{color:red; /*紅色*/}.two{font-size:20px; /*文字大小*/}</style><p>選擇器之標識選擇器1</p><pclass="one">應用第一個class選擇器樣式</p><pclass="two">應用第二種class選擇器樣式</p><pclass="onetwo">同時應兩種class選擇器樣式</p><h3class="two">h3一樣適用</h3>

CSS基礎第29頁id選擇器id選擇器使用方法與class選擇器基本相同，不一樣之處于于一個id選擇器只能應用于html文檔中一個元素，所以其針對性更強，而class選擇器能夠應用于多個元素。id選擇器以半角“#”開頭，且id名稱第一個字母不能為數(shù)字CSS基礎第30頁ID選擇器#idcolor:yellow;font-size:30px;{}ID選擇器屬性值屬性值申明申明CSS基礎第31頁ID選擇器<styletype="text/css">#one{font-weight:bold; /*粗體*/}#two{font-size:30px; /*字體大小*/color:#009900; /*顏色*/}</style><body><pid="one">ID選擇器1</p><pid="two">ID選擇器2</p><pid="two">ID選擇器3</p><pid="onetwo">ID選擇器3</p>

CSS基礎第32頁上例中，第一行應用了#one樣式，第二行和第三行將一個id選擇器應用到了兩個元素上，顯然違反了一個id選擇器只能應用在一個元素上要求，但瀏覽器卻也顯示了CSS樣式格調(diào)且沒有報錯。即使如此，我們在編寫CSS代碼時，還是應該養(yǎng)成良好編碼習慣，一個id最多只能賦予一個html元素，因為每個元素定義id不只是CSS能夠調(diào)用，JavaScript等腳本語言也能夠調(diào)用，假如一個html中有兩個相同id屬性元素，那么將造成JavaScript在查找id時犯錯，比如函數(shù)getElementById()。第四行在瀏覽器中沒有任何CSS樣式格調(diào)顯示，這意味著ID選擇器不支持像class選擇器那樣多格調(diào)同時使用。因為元素和id是一一對應關系，不能為一個元素指定多個id，也不能將多個元素定義為一個id。類似id="onetwo"這么寫法是完全錯誤CSS基礎第33頁類名和id名大小寫關于類名和id名大小寫：CSS大致上是不區(qū)分大小寫語言，不過對于標識實體類名和id名是否區(qū)分大小寫取決于標識語言是否區(qū)分大小寫，假如使用XHTML，那么類名和id名是區(qū)分大小寫，假如是HTML，則不區(qū)分大小寫CSS基礎第34頁DW中對CSS可視化編輯CSS基礎第35頁新建CSS規(guī)則過程DW對CSS建立和編輯有很好支持，對CSS全部操作都集中在“CSS樣式”面板中，普通我們首先關鍵點“新建CSS規(guī)則”來新建樣式，這時會彈出如圖所表示對話框：CSS基礎第36頁CSS規(guī)則定義面板CSS基礎第37頁編輯CSS樣式－也在CSS面板里CSS基礎第38頁用CSS修飾文本－

簡單CSS屬性應用CSS基礎第39頁CSS文本屬性CSS中控制文本樣式屬性主要有font-屬性類和text-屬性類，再加上修改顏色color屬性和行高line-height屬性。DW中這些屬性設置是放在CSS規(guī)則定義面板“類型”和“區(qū)塊”中。其中text-indent表示首行縮進，在每段開頭空兩格通常是用text-indent:2em;來實現(xiàn)，text-decoration:none;表示去掉下劃線，line-height:150%;表示調(diào)整為1.5倍行間距。CSS基礎第40頁文本對齊屬性(text-align)這個屬性用來設定文本對齊方式。有以下值：left(居左，缺省值)right(居右)center(居中)justify(兩端對齊)

示例代碼以下：.p2{text-align:right}注意：行內(nèi)元素無法應用對齊屬性，為何？CSS基礎第41頁文本修飾屬性(text-decoration)這個屬性主要設定文本劃線屬性。有以下值：none(無，缺省值)under

溫馨提示

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

評論

0/150

提交評論