網(wǎng)頁設(shè)計css樣式_第1頁
網(wǎng)頁設(shè)計css樣式_第2頁
網(wǎng)頁設(shè)計css樣式_第3頁
網(wǎng)頁設(shè)計css樣式_第4頁
網(wǎng)頁設(shè)計css樣式_第5頁
已閱讀5頁，還剩30頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

章CSS樣式表2021/5/91回顧表單中提交數(shù)據(jù)的方法有那兩種及其區(qū)別？創(chuàng)建一個登錄界面需要哪些表單元素？target屬性取值可以為哪些及其含義？2021/5/92預(yù)習(xí)檢查簡述樣式表的基本結(jié)構(gòu)？常用的樣式屬性有哪些？2021/5/93本章任務(wù)美化“寶貝分類”頁面制作并美化“注冊”頁面2021/5/94會創(chuàng)建統(tǒng)一外觀的字體文本會創(chuàng)建無下劃線的超連接樣式會創(chuàng)建個性化的表格會創(chuàng)建個性化的表單本章目標(biāo)2021/5/95為什么需要CSS樣式表演示示例1：演示能換皮膚的頁面HTML標(biāo)簽的外觀樣式比較單一顏色只有黑白字體類型和大小無變化樣式表的作用相當(dāng)于華麗的衣服內(nèi)容相同外觀不同2021/5/96為什么需要CSS樣式表樣式表能實現(xiàn)內(nèi)容與樣式的分離，方便團(tuán)隊開發(fā)程序員寫代碼美工做樣式內(nèi)容與樣式和諧統(tǒng)一的完整網(wǎng)頁2021/5/97樣式表的基本語法樣式表的基本結(jié)構(gòu)<STYLEtype="text/css"> P{color:red;

font-size:30px;

font-family:隸書;} ……</STYLE>聲明文檔樣式表結(jié)束文檔樣式表開始，類型為CSS樣式樣式規(guī)則選擇器樣式規(guī)則

P{color:red;font-size:30px;font-family:隸書;}屬性屬性的值2021/5/98樣式表的基本語法<HTML><HEAD><TITLE>樣式規(guī)則</TITLE><STYLEtype="text/css">P{color:red;font-family:"隸書";font-size:24px;}</STYLE></HEAD><BODY><H2>靜夜思</H2><P>床前明月光，</P><P>疑是地上霜。</P><P>我是郭德剛，</P><P>低頭思故鄉(xiāng)。</P></BODY></HTML>查看源代碼本頁面中所有的P標(biāo)簽都應(yīng)用了此樣式所有的段落都采用P樣式，保證風(fēng)格統(tǒng)一用分號隔開選擇器如何編寫此樣式?字體類型為律書、大小24px2021/5/99 <STYLEtype="text/css">.red{color:red;font-family:"隸書";font-size:24px;}

…… </STYLE>樣式表的基本語法如果希望其他的標(biāo)簽也能采用P標(biāo)簽的樣式，怎么辦？其他標(biāo)簽和P標(biāo)簽應(yīng)該采用相同的樣式，所以要為它們定義一個共享樣式。類樣式(class).類名樣式規(guī)則2021/5/910樣式表的基本語法<HEAD><TITLE>樣式規(guī)則</TITLE><STYLEtype="text/css">.red{color:red;font-family:"隸書";}</STYLE></HEAD><BODY><H2class="red">靜夜思</H2><Pclass="red">床前明月光，</P><Pclass="red">疑是地上霜。</P><P>我是郭德剛，</P><Pclass="red">低頭思故鄉(xiāng)。</P></BODY>查看源代碼CLASS類選擇器為類選擇器定義的樣式規(guī)則應(yīng)用類選擇器class＝”類名“<H2>和<P>標(biāo)簽要應(yīng)用同一樣式如何實現(xiàn)這樣的樣式效果？字體類型都為隸書2021/5/911常用的樣式屬性文本屬性文本屬性說明font-size字體大小font-family字體類型font-style字體樣式color設(shè)置或檢索文本的顏色text-align文本對齊使用font-size、font-family、color實現(xiàn)宋體，字體大小12px字體大小16px要實現(xiàn)如下圖所示的文本樣式，該如何編寫？2021/5/912常用的樣式屬性<STYLEtype="text/css">P{font-size:12px; font-family:"宋體"; text-align:left;}.bigFont

{font-size:16px; color:red;}</STYLE></HEAD><BODY>【新聞】[設(shè)搜狐為首頁]9月1日<Pclass="bigFont">·世錦賽劉翔12秒95奪冠成就大滿貫</P><P>·我國實施不安全食品召回制度遏制非法出口</P>…..查看源代碼聲明P標(biāo)簽樣式聲明名稱為bigFont類樣式,它可被多個標(biāo)簽共享應(yīng)用類樣式用class＝”類名“2021/5/913小結(jié)1編寫如下圖所示效果對應(yīng)的HTML代碼練習(xí)答案黑體，字體大小20px字體大小14px，藍(lán)色練習(xí)代碼2021/5/914常用的樣式屬性背景屬性背景屬性說明background-color設(shè)置背景顏色background-image設(shè)置背景圖像background-repeat設(shè)置一個指定的圖像如何被重復(fù)可取值repeat-x、repeat、no-repeat、repeat-y演示示例2：使用不同的背景屬性<STYLEtype="text/css"> ……table{ background-image:url(images/type_back1.jpg);

background-repeat:no-repeat;

}</STYLE> ……設(shè)置背景圖像為images文件夾下的type_back1.jpg設(shè)置背景圖像不平鋪2021/5/915常用的樣式屬性方框?qū)傩詍argin-right右邊界margin-left左邊界margin-top上邊界margin-bottom下邊界marginborderpaddingborder-width邊框的寬度padding-left左填充padding-bottom下填充2021/5/916常用的樣式屬性屬性CSS名稱說明邊界屬性margin-top設(shè)置對象的上邊距margin-right設(shè)置對象的右邊距margin-bottom設(shè)置對象的下邊距margin-left設(shè)置對象的左邊距邊框?qū)傩詁order-style設(shè)置邊框的樣式border-width設(shè)置邊框的寬度border-color設(shè)置邊框的顏色填充屬性padding-top設(shè)置內(nèi)容與上邊框之間的距離padding-right設(shè)置內(nèi)容與右邊框之間的距離padding-bottom設(shè)置內(nèi)容與下邊框之間的距離padding-left設(shè)置內(nèi)容與左邊框之間的距離方框?qū)傩?021/5/917常用的樣式屬性

要實現(xiàn)下圖所示的效果，該如何編寫樣式規(guī)則？線寬2px、虛線框樣式dashed、顏色為red使用background、border-right-width、border-right-color、border-right-style、padding-top和padding-left來實現(xiàn)行的背景色為yellow2021/5/918常用的樣式屬性<STYLEtype="text/css">.tableBorder{ border-right-width:3px; border-right-color:red;

border-right-style:dashed; padding-top:20px;

padding-left:10px; }TR{background:yellow;}<TABLE><TR><TDclass="tableBorder">手機(jī)沖值</TD><TDclass="tableBorder">電子彩票</TD></TR>……查看源代碼設(shè)置單元格右邊框?qū)挾葹?像素設(shè)置單元格右邊框為虛線框設(shè)置單元格里文字與左邊框的距離為10像素表格行的背景色2021/5/919

要實現(xiàn)下圖細(xì)邊框的效果，該如何編寫樣式規(guī)則？常用的樣式屬性文本框?qū)挾葹?px,邊框樣式為solid使用border-width和border-style屬性2021/5/920常用的樣式屬性<STYLEtype="text/css">.textBorder{border-width:1px;border-style:solid;

}</STYLE>……<FORMname="form1"method="post"action=""><P>名字：

<INPUTname="fname"type="text"class="textBorder"></P><P>密碼：

<INPUTname="pass"type="password"class="textBorder"size="21"></P></FORM>……查看源代碼文本框為實線邊框邊框?qū)挾葹?像素看看沒有設(shè)置樣式的文本框的效果2021/5/921常用的樣式屬性特殊樣式（超連接）a:link{color:#FF0000}/*未被訪問的鏈接紅色*/a:visited{color:#00FF00}/*已被訪問過的鏈接綠色*/a:hover{color:#FFCC00}/*鼠標(biāo)懸浮在上的鏈接橙色*/a:active{color:#0000FF}/*鼠標(biāo)點(diǎn)中激活鏈接藍(lán)色*/<STYLEtype="text/css">A{ color:blue; text-decoration:none; }A:hover{ color:red; }</STYLE>……<TR><TD><Ahref="#">諾基亞</A>|<Ahref="#">摩托羅拉</A></TD><TD><Ahref="#">聯(lián)想</A>|<Ahref="#">戴爾</A></TD></TR>……查看源代碼超鏈接文本的樣式鼠標(biāo)在超鏈接上懸停時，超鏈接文本變?yōu)榧t色如何編寫此超鏈接樣式？2021/5/922編寫如下圖所示效果對應(yīng)的HTML代碼小結(jié)2細(xì)邊框solid樣式無下劃線的超連接樣式鼠標(biāo)在超鏈接上懸停時，超鏈接文本變?yōu)榧t色練習(xí)答案練習(xí)代碼2021/5/923常用的樣式屬性

要實現(xiàn)下圖圖片按鈕的效果，該如何編寫樣式規(guī)則？按鈕的邊界、邊框、填充值均為0px使用background-image、margin、border、padding、height、width和font-size屬性按鈕背景圖像與按鈕寬度、高度大小一樣字體大小14px

綜合例子：制作圖片按鈕2021/5/924常用的樣式屬性查看源代碼.picButton{background-image:url(images/back.jpg);border:0px;margin:0px;padding:0px;height:23px;width:82px;

font-size:14px; }……<INPUTname="Rt1"type="reset"class="picButton"value="重填"><INPUTname="Bt1"type="submit"class="picButton"value="提交">…….背景圖像為images文件夾下的back.jpg按鈕的邊界、邊框、填充均為0像素設(shè)定按鈕寬度、高度和圖片大小一樣設(shè)置按鈕上的字體大小為14像素2021/5/925樣式表的三類應(yīng)用方式內(nèi)嵌樣式表內(nèi)嵌樣式表使用格式如下：行內(nèi)（嵌入）樣式表外部樣式表文件<HEAD>

<STYLEtype="text/css">

樣式規(guī)則

</STYLE></HEAD>如果希望本網(wǎng)頁內(nèi)的所有同類標(biāo)簽都采用統(tǒng)一樣式，這時應(yīng)采用內(nèi)嵌樣式。2021/5/926內(nèi)嵌樣式表<STYLEtype="text/css">P{font-family:"隸書";font-size:18px;color:#FF0000;}</STYLE></HEAD>……<P>床前明月光，</P><P>疑是地上霜。</P><P>我是郭德剛，</P><P>低頭思故鄉(xiāng)。</P>……查看源代碼樣式規(guī)則所有的段落都采用P

樣式，保證樣式統(tǒng)一選擇符樣式表2021/5/927行內(nèi)（嵌入）樣式表

如果希望某段文字和其他段落文字顯示風(fēng)格不一樣，該如何解決？

使用行內(nèi)（嵌入）樣式表可以解決2021/5/928行內(nèi)（嵌入）樣式表<HTML><HEAD><TITLE>設(shè)置屬性</TITLE></HEAD><BODY><Pstyle="color:red;font-size:30px;font-family:隸書;">這個段落應(yīng)用了樣式<P>這個段落按默認(rèn)樣式顯示</BODY></HTML>為標(biāo)簽p指定樣式查看源代碼本段<P>標(biāo)簽采用了行內(nèi)樣式2021/5/929行內(nèi)（嵌入）樣式表<BODYstyle="background-color:#CCCCCC"><P><IMGsrc="libai.jpg"width="140"height="170"align="left"></P><H2>靜夜思</H2><H3>作者：李白</H3>

<Pstyle="color:#FF0000;font-size:18px;font-family:隸書;border-bottom-style:dashed">

床前明月光，<BR>

疑是地上霜。<BR>

我是郭德剛，<BR>

低頭思故鄉(xiāng)。</P>查看源代碼行內(nèi)樣式使用范圍更小，只適用于某一個標(biāo)簽，對其他標(biāo)簽不起作用本段<P>

溫馨提示

  • 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

提交評論