六講基礎(chǔ)教程_第1頁(yè)
六講基礎(chǔ)教程_第2頁(yè)
六講基礎(chǔ)教程_第3頁(yè)
六講基礎(chǔ)教程_第4頁(yè)
六講基礎(chǔ)教程_第5頁(yè)
已閱讀5頁(yè)，還剩28頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

CSS基礎(chǔ)教程CSS基礎(chǔ)教程CSS概述CSS指層疊樣式表(CascadingStyleSheets)樣式定義如何顯示HTML元素樣式通常存儲(chǔ)在樣式表中把樣式添加到HTML4.0中，是為了解決內(nèi)容與表現(xiàn)分離的問(wèn)題外部樣式表可以極大提高工作效率外部樣式表通常存儲(chǔ)在CSS文件中多個(gè)樣式定義可層疊為一樣式解決了什么問(wèn)題？主流瀏覽器廠(chǎng)商不斷擴(kuò)展HTML顏色和樣式分離是必須的Zenofcss禪意花園樣式表極大地提高了工作效率解放設(shè)計(jì)人員可復(fù)用的樣式使用樣式指定和引用兩種方式層疊次序?yàn)g覽器缺省設(shè)置外部樣式表內(nèi)部樣式表（位于<head>標(biāo)簽內(nèi)部）內(nèi)聯(lián)樣式（在HTML元素內(nèi)部）CSS的語(yǔ)法選擇器，以及一條或多條聲明selector{declaration1;declaration2;...declarationN}selector{property:value}h1{color:red;font-size:14px;}值的不同寫(xiě)法和單位p{color:#ff0000;}p{color:#f00;}p{color:rgb(255,0,0);}p{color:rgb(100%,0%,0%);}記得寫(xiě)引號(hào)p{font-family:"sansserif";}多重聲明p{text-align:center;color:black;font-family:arial;}空格和大小寫(xiě)body{color:#000;background:#fff;margin:0;padding:0;font-family:Georgia,Palatino,serif;}選擇器的分組h1,h2,h3,h4,h5,h6{color:green;}繼承及其問(wèn)題body{font-family:Verdana,sans-serif;}擺脫繼承body{font-family:Verdana,sans-serif;}td,ul,ol,ul,li,dl,dt,dd{font-family:Verdana,sans-serif;}p{font-family:Times,"TimesNewRoman",serif;}派生選擇器listrong{font-style:italic;font-weight:normal;}<p><strong>我是粗體字，不是斜體字，因?yàn)槲也辉诹斜懋?dāng)中，所以這個(gè)規(guī)則對(duì)我不起作用</strong></p><ol><li><strong>我是斜體字。這是因?yàn)閟trong元素位于li元素內(nèi)。</strong></li><li>我是正常的字體。</li></ol>strong{color:red;}h2{color:red;}h2strong{color:blue;}<p>Thestronglyemphasizedwordinthisparagraphis<strong>red</strong>.</p><h2>Thissubheadisalsored.</h2><h2>Thestronglyemphasizedwordinthissubheadis<strong>blue</strong>.</h2>CSSid選擇器id選擇器可以為標(biāo)有特定id的HTML元素指定特定的樣式。id選擇器以"#"來(lái)定義。#red{color:red;}#green{color:green;}<pid="red">這個(gè)段落是紅色。</p><pid="green">這個(gè)段落是綠色。</p>單獨(dú)的選擇器#sidebar{ border:1pxdotted#000; padding:10px; }id選擇器和派生選擇器在現(xiàn)代布局中，id選擇器常常用于建立派生選擇器。#sidebarp{ font-style:italic; text-align:right; margin-top:0.5em; }#sidebarp{ font-style:italic; text-align:right; margin-top:0.5em; }#sidebarh2{ font-size:1em; font-weight:normal; font-style:italic; margin:0; line-height:1.5; text-align:right; }CSS類(lèi)選擇器在CSS中，類(lèi)選擇器以一個(gè)點(diǎn)號(hào)顯示.center{text-align:center}<h1class="center">Thisheadingwillbecenter-aligned</h1><pclass="center">Thisparagraphwillalsobecenter-aligned.</p>類(lèi)選擇器派生和id一樣，class也可被用作派生選擇器.fancytd{ color:#f60; background:#666; }td.fancy{ color:#f60; background:#666; }對(duì)帶有指定屬性的HTML元素設(shè)置樣式屬性選擇器[title]{color:red;}<h2title="Helloworld">Helloworld</h2><atitle="W3School"href="">W3School</a>屬性和值選擇器下面的例子為title="W3School"的所有元素設(shè)置樣式：[title=W3School]{border:5pxsolidblue;}<imgtitle="W3School"src="/i/w3school_logo_white.gif"/><br/><atitle="W3School"href="">W3School</a><hr/>設(shè)置表單的樣式屬性選擇器在為不帶有class或id的表單設(shè)置樣式時(shí)特別有用input[type="text"]{width:150px;display:block;margin-bottom:10px;background-color:yellow;font-family:Verdana,Arial;}input[type="button"]{width:120px;margin-left:35px;display:block;font-family:Verdana,Arial;}插入樣式外部樣式表內(nèi)部樣式表內(nèi)聯(lián)樣式外部樣式表<head><linkrel="stylesheet"type="text/css"href="mystyle.css"/></head>hr{color:sienna;}p{margin-left:20px;}body{background-image:url("images/back40.gif");}內(nèi)部樣式表<head><styletype="text/css">hr{color:sienna;}p{margin-left:20px;}body{background-image:url("images/back40.gif");}</style></head>內(nèi)聯(lián)樣式<pstyle="color:sienna;margin-left:20px">Thisisaparagraph</p>多重樣式外部h3{color:red;text-align:left;font-size:8pt;}內(nèi)部h3{text-ali

溫馨提示

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

評(píng)論

0/150

提交評(píng)論