CSS層迭樣式表實用

上傳人：s*** IP屬地：上海上傳時間：2023-01-17 格式：PPTX 頁數(shù)：36 大?。?47.08KB 積分：20 舉報 版權(quán)申訴

已閱讀5頁，還剩31頁未讀，繼續(xù)免費閱讀

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

文檔簡介

會計學1CSS層迭樣式表實用本章目標理解樣式表對控制頁面元素外觀的作用掌握樣式規(guī)則的語法理解各種選擇器理解樣式代碼在什么位置編寫及它們的作用范圍掌握常用的樣式屬性第1頁/共36頁CSSCascadingStyleSheet層疊樣式表或級聯(lián)樣式表。專門用于控制網(wǎng)頁文檔的顯示風格。解決了網(wǎng)頁內(nèi)容與表現(xiàn)分離的問題。即由HTML的標簽告知瀏覽器網(wǎng)頁中有哪些內(nèi)容，由CSS的規(guī)則告知瀏覽器這些內(nèi)容應該如何表現(xiàn)。第2頁/共36頁CSS樣式規(guī)則CSS樣式規(guī)則用于告知瀏覽器網(wǎng)頁元素應該如何表現(xiàn)。樣式規(guī)則一般放在網(wǎng)頁頭部<head></head>內(nèi)部的<style></style>標簽中。selector{ property:value; property:value; ……}第3頁/共36頁樣式規(guī)則示例<html> <head> <title>樣式規(guī)則聲明</title>

<styletype="text/css“> body{background-image:url(image/eg_bg.gif>);} p{text-indent:32px;font-size:16px;} </style> </head> <body> <p>這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。</p>

</body></html>第4頁/共36頁選擇器樣式規(guī)則聲明中包含選擇器，它的作用是說明這條樣式規(guī)則在網(wǎng)頁中的適用范圍，或者說網(wǎng)頁中的哪個地方或哪些地方將要用到這條規(guī)則。HTML選擇器類選擇器ID選擇器偽類選擇器偽元素選擇器上下文選擇器群組聯(lián)合選擇器第5頁/共36頁HTML選擇器使用某種HTML標簽的名稱作為選擇器，當瀏覽器解析這種標簽時，即采用這條樣式規(guī)則。這樣做的目的是為了覆蓋瀏覽器內(nèi)部對這種標簽顯示方式預先定義的規(guī)則。第6頁/共36頁HTML選擇器示例<styletype="text/css"> h1{text-align:center;font-size:18pt;} input{border:1pxsolidgray;background-color:#fedcba;color:blue;} a{text-decoration:none;}</style><h1>在此登錄</h1><form>

用戶名:<inputtype="text"/><br/>

密碼:<inputtype="password"/><br/>

<inputtype="submit"value="登錄"/>

<inputtype="reset"></form><ahref="#">注冊</a><ahref="#">回到首頁</a>第7頁/共36頁類選擇器將多個應共享同一種外觀的標簽歸為一類。第8頁/共36頁類選擇器示例<styletype="text/css"> .txt{ border:1pxdashedgray; background-color:#fedcba; color:blue; height:20px; } .btn{ border:1pxsolidblue; background-color:#cccccc; color:red; font-weight:bold; }</style> <form> <inputtype="text"class="txt"/> <inputtype="password"class="txt"/><br/> <inputtype="submit"class="btn"/> <inputtype="reset"class="btn"/></form> 第9頁/共36頁ID選擇器為頁面特定的某個標簽定制外觀。第10頁/共36頁ID選擇器示例<styletype="text/css"> td{ border:1pxsolidblue; } #mytable{ width:260px; border-width:5px; border-style:double; border-color:gray; border-collapse:collapse; } #mytd{ background-color:#fedcba; text-align:center; font-size:16px; font-style:italic; }</style><tableid="mytable"> <tr> <td>單元格</td>

<tdid="mytd">單元格</td>

</tr>

<tr>

</tr></table>第11頁/共36頁偽類選擇器用于向其他選擇器指定適用范圍內(nèi)的特定元素或特定狀態(tài)制定樣式。使用得比較多的場景是使用錨偽類為頁面中的超鏈接制定在不同狀態(tài)下不同的外觀。第12頁/共36頁偽類選擇器示例<styletype="text/css"> a{text-decoration:none;font-size:14px;} a:link{color:blue;} a:visited{color:gray;} a:hover{color:red;font-size:16px;text-decoration:underline;} a:active{font-style:italic;}</style><ahref="5.1.html">樣式規(guī)則聲明</a><ahref="5.2.html">HTML選擇器</a><ahref="5.3.html">類選擇器</a><ahref="5.4.html">ID選擇器</a>第13頁/共36頁偽元素選擇器偽元素用于向其他選擇器指定適用范圍內(nèi)的元素特定部分制定樣式。一般應用于文本塊的首行或文本塊的首字字符。第14頁/共36頁偽元素選擇器示例<styletype="text/css"> p{font-size:14px;} p:first-line{font-size:16px;text-decoration:line-through;} h1{font-size:18pt;color:black;} h1:first-letter{font-size:24pt;color:red;border:1pxsolidblue;padding:3px;}</style><p>這是一個段落，它的第一行文字將有刪除線修飾，字號比其他行要大。這是一個段落，它的第一行文字將有刪除線修飾，字號比其他行要大。這是一個段落，它的第一行文字將有刪除線修飾，字號比其他行要大。</p><h1>這是一級標題，注意它的第一個字符</h1>第15頁/共36頁上下文選擇器又稱為派生選擇器，用于根據(jù)上下文關(guān)系來確定某個標簽是否使用上下文選擇器的樣式規(guī)則。第16頁/共36頁父子標簽形成上下文示例<styletype="text/css"> olli{list-style-type:upper-alpha;font-size:14px;} ulli{list-style-image:url(image/li.gif);font-weight:bold;} </style><p>XX公司三亞之旅第一天行程</p><ol>

<li>07:00之前在新大新廣場前集合</li>

<li>07:15乘坐機場大巴前往黃花機場</li>

<li>08:30集體辦理登機手續(xù)</li>

<li>09:15乘機飛往三亞</li>

<li>11:00抵達三亞機場</li>

<li>11:30由地接大巴送到旅社</li>

<li>12:30集體吃海鮮自助餐</li>

<li>下午自由活動</li></ol> <p>海鮮自助餐重點推薦</p><ul>

<li>口味大肉蟹</li>

<li>鹽焗瀨尿蝦</li>

<li>蒜蓉清蒸小鮑</li>

<li>辣椒炒海瓜子</li>

<li>哈貝冬瓜湯</li></ul> 第17頁/共36頁類選擇器或ID選擇器與標簽形成上下文示例<styletype="text/css"> table{border:2pxsolidblack;border-collapse:collapse;} #mytable{width:280px;} #mytable

td{border:1pxsolidgray;} .myp{font-size:14px;} .mypspan{font-weight:bold;font-size:16px;}</style><tableid="mytable"> <tr> <td>單元格</td>

</tr>

<tr>

</tr></table><table> <tr> <td>單元格</td>

</tr>

<tr>

</tr></table><pclass="myp">這是一個段落，其中有<span>某些文字</span>的樣式需要設(shè)置。這是一個段落，其中有<span>某些文字</span>的樣式需要設(shè)置。</p><p>這是一個段落，其中有<span>某些文字</span>的樣式需要設(shè)置。這是一個段落，其中有<span>某些文字</span>的樣式需要設(shè)置。</p>第18頁/共36頁群組聯(lián)合選擇器多個樣式規(guī)則的定義相同，但選擇器名稱不同?？梢詫⑦@些樣式規(guī)則合并成為一個樣式規(guī)則，選擇器名稱之間使用逗號分隔。第19頁/共36頁群組聯(lián)合選擇器示例<styletype="text/css"> h1,h2,h3{color:black;text-align:center;font-family:"微軟雅黑";}

h1{font-size:24px;}

h2{font-size:16px;}

h3{font-size:12px;}</style><h1>一級標題</h1><h2>二級標題</h2><h3>三級標題</h3>第20頁/共36頁將樣式規(guī)則聲明編寫在何處樣式規(guī)則聲明編寫在網(wǎng)頁頭部<head></head>中的<style></style>標簽內(nèi)部，稱為內(nèi)部樣式表或內(nèi)嵌樣式表。樣式規(guī)則聲明編寫在需要這個樣式的特定的標簽內(nèi)部，稱為行內(nèi)樣式表或內(nèi)聯(lián)樣式表。樣式規(guī)則聲明編寫在HTML文檔之外，由獨立的CSS文件包含，稱為外部樣式表或外聯(lián)樣式表。第21頁/共36頁行內(nèi)樣式表示例<bodystyle="background-color:#fedcba;"> <pstyle="font-size:16px;color:gray;"> 本頁面演示<spanstyle=“color:blue;”>內(nèi)聯(lián)樣式表</span>，內(nèi)聯(lián)樣式其實就是把樣式規(guī)則直接寫在要使用這個規(guī)則的標簽里，用為標簽的<spanstyle=“text-decoration:underline;font-weight:bold;”>style</span>屬性的值。 </p></body>第22頁/共36頁外聯(lián)樣式表示例body{background-color:#abcdef;}a{text-decoration:none;font-size:14px;}a:link{color:blue;}a:visited{color:gray;}a:hover{color:red;font-size:16px;text-decoration:underline;}a:active{font-style:italic;}p{font-size:14px;}h1{font-size:18pt;color:black;}.txt{ border:1pxdashedgray; background-color:#fedcba; color:blue; height:20px;}.btn{ border:1pxsolidblue; background-color:#cccccc; color:red; font-weight:bold;}<head> <linkrel="stylesheet"type="text/css"href="my.css"/></head><body> <h1>在此登錄</h1>

<p>以下是一些測試用的鏈接</p>

<p><ahref="5.1.html">樣式規(guī)則聲明</a><ahref="5.2.html">HTML選擇器</a><ahref="5.3.html">類選擇器</a><ahref="5.4.html">ID選擇器</a></p></body>第23頁/共36頁常用的CSS樣式屬性背景邊框文本字體列表…第24頁/共36頁背景屬性說明background-color設(shè)置元素的背景顏色?？墒褂胷gb顏色，十六進制顏色和顏色名稱及透明色。background-image把圖像設(shè)置為背景。url(圖像的URL地址)或none。background-repeat設(shè)置背景圖像是否及如何重復平鋪。repeat、repeat-x、repeat-y、no-repeatbackground-attachment背景圖像是否固定或者隨著頁面的其余部分滾動。scroll、fixedbackground-position設(shè)置背景圖像的起始位置。left、center、right、top、center、bottombackgroundbackground-color、background-image、background-repeat、background-attachment、background-position第25頁/共36頁背景屬性示例<styletype="text/css"> body{ background-color:#abcdef; background-image:url(image/eg_bg.gif); background-repeat:repeat-x; background-attachment:fixed; background-position:bottomleft; } #mytable{ width:300px; height:150px; background:#fedcbaurl(image/eg_bg.gif)no-repeatscroll20%20px; } #myp{background-color:#cccccc;}</style><body> <pid="myp">這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。</p>

<tableid="mytable">

<tr>

</tr>

<tr>

</tr>

</table></body>第26頁/共36頁邊框?qū)傩哉f明border-top|right|bottom|left-width頂、右、底、左邊框的寬度。border-top|right|bottom|left-style頂、右、底、左邊框的線型。border-top|right|bottom|left-color頂、右、底、左邊框的顏色。border-width頂、右、底、左邊框的寬度值，各個值之間用空格分隔。border-style按頂、右、底、左的順序依次設(shè)置各個邊框的線型。border-color按頂、右、底、左的順序依次設(shè)置各個邊框的顏色。border-top、border-right、border-bottom、border-left按寬度、線型、顏色的順序依次提供值。border按寬度、線型、顏色的順序依次提供值。第27頁/共36頁邊框?qū)傩允纠?lt;styletype="text/css"> #mytable{ width:300px;height:120px; border-collapse:collapse; border:4pxdoublegray; } #mytabletd{ border-width:1px;border-style:dashed; border-color:blue; } #myp{ border:none;border-top:4pxsolidblue; border-bottom:2pxdottedred; }</style><pid="myp">這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。</p><tableid="mytable">

<tr>

</tr>

<tr>

</tr></table>第28頁/共36頁文本屬性說明color設(shè)置文本顏色。letter-spacing設(shè)置字符間距。像素值或normal。text-align元素中文本的水平對齊。left、right、center、justify。text-decoration向文本添加修飾。none、underline、overline、line-through。text-indent縮進元素中文本的首行。像素值或百分比。text-transform控制元素中的字符的大小寫轉(zhuǎn)換。none、capitalize、uppercase、lowercase。word-spacing設(shè)置字間距。像素值或normal。第29頁/共36頁文本屬性示例<styletype="text/css"> p{font-size:14px;} #myp{color:red;text-indent:28px;} .myspan{ color:blue; text-decoration:underline; letter-spacing:10px; } #mytable{width:350;height:120px;} #mytabletd{ border:1pxsolidgray; text-align:center; text-transform:uppercase; }</style><pid="myp">這是一個段落。這是一個段落。這是一個段落。<spanclass="myspan">這里有一個文字塊</span>這是一個段落。這是一個段落。這是一個段落。這是一個段落。<spanclass="myspan">這里有一個文字塊</span>這是一個段落。這是一個段落。這是一個段落。這是一個段落。<spanclass="myspan">這里有一個文字塊</span>這是一個段落。</p><tableid="mytable">

<tr>

<td>thisisatd</td><tdstyle="word-spacing:14px;">datadatadatadatadatadatadatadatadata</td>

</tr>

<tr>

<tdstyle="text-transform:capitalize;">secondrow,firstcol</td><td>thisisatd</td>

</tr></table>第30頁/共36頁字體屬性說明font-style設(shè)置字體樣式。normal、italic、obliquefont-variant以小型大寫字體或者正常字體顯示文本。normal、small-caps。font-weight設(shè)置字體的粗細。normal、bold、bolder、lighter或100,200,...,900等數(shù)字。font-size設(shè)置字體的尺寸。xx-small、x-small、small、medium、large、x-large、xx-large或像素值或磅值。font-family字體類型名稱或者字體組列表，各字體名稱之間用“,”逗號分隔。font依次設(shè)置font-style、font-variant、font-weight、font-size、font-family六個屬性，各個值之間用空格分隔。其中font-size可由line-height屬性代替。第31頁/共36頁字體屬性示例<styletype="text/css"> body,p,td{font-family:微軟雅黑,宋體;}

h1,h2,h3{font-family:黑體,宋體;}

h1{font-size:24pt;}

h2{font-size:18px;}

h3{font-size:15pt;}

.myp{

font-style:normal; font-variant:normal;

font-weight:400; font-size:16px;

font-family:宋體; line-height:24px;

}

.myspan{font:italicnormalbold14px微軟雅黑,宋體;}</style><body> <h1>這是一級標題</h1>

<pclass="myp">這是一個段落。這是一個段落。這是一個段落。<spanclass="myspan">這是段落中包含的文字塊。</span>這是一個段落。這是一個段落。這是一個段落。這是一個段落。<spanclass="myspan">這是段落中包含的文字塊。</span>這是一個段落。這是一個段落。這是一個段落。這是一個段落。<spanclass="myspan">這是段落中包含的文字塊。</span>這是一個段落。這是一個段落。這是一個段落。這是一個段落。<spanclass="myspan">這是段落中包含的文字塊。</span>這是一個段落。</p></body>第32頁/共36頁列表屬性說明list-style-type設(shè)置列表項標記的類型。disc、circle、square、decimal、lower-roman、upper-roman、lower-alpha、upper-alpha。list-style-position設(shè)置列表中列表項標記被放置的位置。inside、outside。list-style-image將圖像設(shè)置為列表項標記。圖像的地址或none。list-style依次設(shè)置list-style-type、list-style-position、list-style-image，各個值之間用空格分隔。第33頁/共36頁列表屬性示例<styletype="text/css"> ul.disc{

人人文庫> 全部分類> 教育資料 > 課件下載

溫馨提示

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

CSS層迭樣式表實用

文檔簡介

溫馨提示

最新文檔

評論

CSS層迭樣式表實用

文檔簡介

溫馨提示

最新文檔

評論

相關(guān)文檔