Web前端開發(fā)必知必會 課件-中文版 lesson 4 基本CSS與顏色模型_第1頁
Web前端開發(fā)必知必會 課件-中文版 lesson 4 基本CSS與顏色模型_第2頁
Web前端開發(fā)必知必會 課件-中文版 lesson 4 基本CSS與顏色模型_第3頁
Web前端開發(fā)必知必會 課件-中文版 lesson 4 基本CSS與顏色模型_第4頁
Web前端開發(fā)必知必會 課件-中文版 lesson 4 基本CSS與顏色模型_第5頁
已閱讀5頁，還剩10頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

地址：杭州市濱江區(qū)濱文路528號郵政編碼：3100532024/4/10CSS基礎(chǔ)與顏色模型

LESSON4CONTENTS01CSS基本選擇器類,ID,標(biāo)簽02CSS樣式規(guī)則03顏色模型與顏色什么是CSSCSS(CascadingStyleSheets)層疊式樣表Acomputerlanguagefordemonstratingtheelementstylesin

HTML/XMLdocuments優(yōu)點精準(zhǔn)、靈活控制布局、字體、背景等layout,font,backgroundandcolor…小小修改，大大變化CSS樣式可用于（網(wǎng)頁的）任何地方，任何元素，無處不在012024/4/10行內(nèi)式內(nèi)嵌式CSS選擇器selectors網(wǎng)頁元素使用選擇器可以迅速改變其樣式基本選擇器：Tag(標(biāo)簽，即網(wǎng)頁元素自身)Class(類)ID（復(fù)合選擇器：后述）5選擇器命名規(guī)則合法選擇器：h2a（標(biāo)簽）.a1._myfont（類）#p1#a_b_c_123

（ID）非法：p1section1.123.p#a#345標(biāo)簽：=標(biāo)簽名ID

或

Class

命名規(guī)則：

用

“A”~“Z”或

“a”~“z”或“_”打頭

（不能以數(shù)字開頭）后跟:“0~9”或

“A(a)~Z(z)”或

“_”不能用標(biāo)簽名

02ColorModel顏色模型

—指的是某個三維顏色空間中的一個可見光子集，它包含某個色彩域的所有色彩。RGB（加色）模型用于彩色陰極射線管等彩色光柵圖形顯示設(shè)備中RGB(Red,Green,Blue)HSL(Hue,Saturation,Lightness)Usage:CRT/LCDCMYK（Cyan,Magenta,Yellow,Black）模型032024/4/10傳統(tǒng)：00~FF（0~255indecimal）RGB“#FFFFFF”<bodybgcolor=“#FF0000”/><bodybgcolor=“#F00”/><bodybgcolor=“red”/>-----------------現(xiàn)在：CSS3中設(shè)置字體顏色：color:rgb(255,0,0);(or)color:rgba(255,0,0,1);RGB顏色取值（rgb,rgba）rgbaalpha（透明度）opacity：alpha（0～1）1—nottransparent,0—totallytransparent<bodybgcolor=“#0000FF”>---可行<bodybgcolor=“hsla(0,0%,96%,1.00)”>---不可行HSL取值(hsl,hsla)Hue

(色調(diào))，Saturation

(飽和度)、Lightness

(亮度)i.e.

color:hsl(90,50%,60%);(H色相,S飽和度%,L亮度%)2024/4/10顏色取值實例方法1：不帶透明度：rgb(r,g,b)帶透明度：rgba(r,g,b,alpha)

取值范圍：rgba(0~255,

0~255,0~255,0~1)方法2：hsl(h,s,l)或hsla(h,s,l,alpha)valueranges：hsla(0~255,0~100%,0~100%,0~1)i.e.撲克牌網(wǎng)頁定義類.mainbox:width\height\background-color…使用它：<divclass=“mainbox”>定義4個ID分別對應(yīng)四個花色

(#spade,#club,#heart,#diamond)使用div(Width\height\border\background-image…)定義.big類，結(jié)合<span>用于單獨放大

<p>紅桃<spanclass=“big”>A</span></p><body><header><h2>我們一起學(xué)習(xí)網(wǎng)頁前端開發(fā)</h2></header><divclass="mainbox"><!–classmainboxfordiv--><p>主體部分：</p></div><footer>copyrighthere</footer></body>/*CSS*/header,footer{text-align:center;}

.mainbox{margin:0pxauto;

width:1000px;background-color:rgb(255,255,255);padding:1em;

}

/*endofCSS*/基本框架網(wǎng)頁：HowCSSselectorswork(inhtml)Define（inheadsection）在head中定義<styletype=“text/css”>.classname

{color:#RRGGBB；padding:2em;border:solid#00F1px;}#idname{…}Tagname{…}</style>Apply（inbodysection）在body中使用class<bodyclass=“style1”><pclass=“p1”>ID<divid=“container”><divid=“banner”>……</div></div>tagautomaticallyappliedCSS代碼：Aselector(選擇器)HTML代碼：標(biāo)簽，用于標(biāo)識網(wǎng)頁元素

Summary小結(jié)Q&A選擇器有幾種基本類型？在哪里定義？如何使用？rgba中的a代表什么？是否有辦法把rgb值轉(zhuǎn)換為hsl？常用CSS屬性：background-color，background-imagecolor，font-size，font-family（字體）text-align（p,h1,h2,div,…等內(nèi)部文本對齊方式）margin,padding,width，heightborder,border-lef

溫馨提示

  • 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

提交評論