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

付費(fèi)下載

下載本文檔

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

文檔簡介

CSS基礎(chǔ)教程CSS基礎(chǔ)教程CSS概述CSS指層疊樣式表(CascadingStyleSheets)樣式定義如何顯示HTML元素樣式通常存儲在樣式表中把樣式添加到HTML4.0中，是為了解決內(nèi)容與表現(xiàn)分離的問題外部樣式表可以極大提高工作效率外部樣式表通常存儲在CSS文件中多個樣式定義可層疊為一樣式解決了什么問題？主流瀏覽器廠商不斷擴(kuò)展HTML顏色和樣式分離是必須的Zenofcss禪意花園樣式表極大地提高了工作效率解放設(shè)計人員可復(fù)用的樣式使用樣式指定和引用兩種方式層疊次序瀏覽器缺省設(shè)置外部樣式表內(nèi)部樣式表（位于<head>標(biāo)簽內(nèi)部）內(nèi)聯(lián)樣式（在HTML元素內(nèi)部）CSS的語法選擇器，以及一條或多條聲明selector{declaration1;declaration2;...declarationN}selector{property:value}h1{color:red;font-size:14px;}值的不同寫法和單位p{color:#ff0000;}p{color:#f00;}p{color:rgb(255,0,0);}p{color:rgb(100%,0%,0%);}記得寫引號p{font-family:"sansserif";}多重聲明p{text-align:center;color:black;font-family:arial;}空格和大小寫body{color:#000;background:#fff;margin:0;padding:0;font-family:Georgia,Palatino,serif;}選擇器的分組h1,h2,h3,h4,h5,h6{color:green;}繼承及其問題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>我是粗體字，不是斜體字，因為我不在列表當(dāng)中，所以這個規(guī)則對我不起作用</strong></p><ol><li><strong>我是斜體字。這是因為strong元素位于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選擇器以"#"來定義。#red{color:red;}#green{color:green;}<pid="red">這個段落是紅色。</p><pid="green">這個段落是綠色。</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類選擇器在CSS中，類選擇器以一個點號顯示.center{text-align:center}<h1class="center">Thisheadingwillbecenter-aligned</h1><pclass="center">Thisparagraphwillalsobecenter-aligned.</p>類選擇器派生和id一樣，class也可被用作派生選擇器.fancytd{ color:#f60; background:#666; }td.fancy{ color:#f60; background:#666; }對帶有指定屬性的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è)置樣式時特別有用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. 本站所有資源如無特殊說明，都需要本地電腦安裝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

提交評論