中小學(xué)網(wǎng)頁設(shè)計課件css基礎(chǔ)公開課教案教學(xué)設(shè)計課件案例測試練習(xí)卷題_第1頁
中小學(xué)網(wǎng)頁設(shè)計課件css基礎(chǔ)公開課教案教學(xué)設(shè)計課件案例測試練習(xí)卷題_第2頁
中小學(xué)網(wǎng)頁設(shè)計課件css基礎(chǔ)公開課教案教學(xué)設(shè)計課件案例測試練習(xí)卷題_第3頁
中小學(xué)網(wǎng)頁設(shè)計課件css基礎(chǔ)公開課教案教學(xué)設(shè)計課件案例測試練習(xí)卷題_第4頁
中小學(xué)網(wǎng)頁設(shè)計課件css基礎(chǔ)公開課教案教學(xué)設(shè)計課件案例測試練習(xí)卷題_第5頁
已閱讀5頁，還剩36頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

第13章CSS基礎(chǔ)網(wǎng)頁設(shè)計與制作CascadingStyleSheet層疊樣式表網(wǎng)頁包括的內(nèi)容和樣式。CSS就是讓內(nèi)容和樣式分離開來，HTML只控制網(wǎng)頁的內(nèi)容，內(nèi)容的樣式由CSS來控制。CSS的優(yōu)點可以更加精細(xì)的控制網(wǎng)頁的內(nèi)容。比HTML更加豐富。便于重用、修改基于Web標(biāo)準(zhǔn)的網(wǎng)頁設(shè)計方法的設(shè)計基礎(chǔ)CSS樣式的優(yōu)點：只修改一個.css文件就可以改變頁數(shù)不定的外觀和格式（避免了一個一個網(wǎng)頁的修改，大大減少了重復(fù)勞動的工作量。）可以“隨心所欲”地控制頁面布局和外觀；在所有瀏覽器和平臺之間具有較好的兼容性；精簡網(wǎng)頁，提高下載速度（簡化了網(wǎng)頁的格式代碼，外部的樣式表還會被瀏覽器保存在緩存里，加快了下載顯示的速度，也減少了需要上傳的代碼數(shù)量（因為重復(fù)設(shè)置的格式將被只保存一次）。一、CSS分類CSS按其位置可以分成三種：內(nèi)嵌樣式(InlineStyle)內(nèi)部樣式表(InternalStyleSheet)外部樣式表(ExternalStyleSheet)1、內(nèi)嵌樣式(InlineStyle)InlineStyle是寫在Tag里面的。內(nèi)嵌樣式只對所在的Tag有效。<Pstyle="font-size:20px;color:red">

這個Style定義里面的文字是20px字體，字體顏色是紅色。</P>2、內(nèi)部樣式表(InternalStyleSheet)內(nèi)部樣式表是寫在HTML的<head></head>里面的。內(nèi)部樣式表只對所在的網(wǎng)頁有效。內(nèi)部樣式表(InternalSytleSheet)要用到Style這個Tag，寫法如下：<style

type=“text/css”><!--.樣式名1{樣式屬性1:屬性值;樣式屬性2:屬性值;}.樣式名2{樣式屬性1:屬性值;樣式屬性2:屬性值;}--></style>內(nèi)部css<html><head><title>對HTML標(biāo)記直接定義</title><styletype="text/css">h1{font-family:楷體;color:yellow}h2{font-family:黑體;color:blue}</style></head><body><font><p><h1>此行文字為黃色楷體的字體</h1><p><h2>此行文字為藍(lán)色黑體的字體</h2></font></body></html><html><head><title>第一個CSS</title><styletype="text/css"><!--.s1{font-size:57px;color:green;}.s2{color:red;}--></style></head><body><pclass="s1">應(yīng)用了s1樣式,綠色，字體大小57px</p><spanclass="s2">應(yīng)用了s2樣式，字體為紅色</span></body>3.1、引入外部CSS1——link＜head＞

＜linkrel=”stylesheet”href=”*.css”type=”text/css”＞

＜/head＞

3.2引入外部CSS1——import<styletype="text/css">@importurl(“1.css”);</style>Import和link的區(qū)別兩種外部樣式表的調(diào)用方法雖然有所不同，但它們的效果是一樣的，只是嵌入CSS外部表的時候，import把CSS文件的內(nèi)容復(fù)制到HTML文件中，link直接向CSS文件讀取所定義的CSS樣式。小的CSS文件采用import，大的文件采用link，在實際應(yīng)用中，CSS文件一般很小，兩種方法差別很小。使用外部(Extenal)樣式表，相對于內(nèi)嵌(Inline)和內(nèi)部式(Internal)的，有以下優(yōu)點：樣式代碼可以復(fù)用。一個外部CSS文件，可以被很多網(wǎng)頁共用。便于修改。如果要修改樣式，只需要修改CSS文件，而不需要修改每個網(wǎng)頁。提高網(wǎng)頁顯示的速度。（外部的樣式表會被瀏覽器保存在緩存里，加快了下載顯示的速度，也減少了需要上傳的代碼數(shù)量（因為重復(fù)設(shè)置的格式將被只保存一次）。二、層疊(Cascading)CSS第一個字母，是Cascading，意為層疊。它是指不同來源的樣式(Styles)可以合在一起，形成一種樣式。Cascading的順序是：內(nèi)嵌樣式表(InlineStyle)(優(yōu)先級最高)內(nèi)部樣式表(InternalStyleSheet)外部樣式表(ExtenalStyleSheet)importlink瀏覽器缺省(browserdefault)(優(yōu)先級最低)三、基本語法一個樣式(Style)的語法由三部分構(gòu)成：Selector(選擇符)，屬性(Property)，屬性值(Value)。selector{property:value；

property:value；}注意：如果值為若干單詞，則要給值加引號：p{font-family:"sansserif";}<html><head><title>第一個CSS</title><styletype="text/css"><!--.s1{font-size:57px;color:green;}.s2{color:red;}--></style></head><body><pclass="s1">應(yīng)用了s1樣式,綠色，字體大小57px</p><spanclass="s2">應(yīng)用了s2樣式，字體為紅色</span></body>自定義樣式（類選擇符）的命名規(guī)則：必須以.開頭不能以數(shù)字開頭不能包含漢字和特殊字符四、常見樣式屬性

1、CSS字體屬性說明屬性值字體風(fēng)格font-stylenormal,italic(oblique)字體變量font-variantnormal,small-caps（小的大寫字母）字體濃淡font-weightnormal,bold字體大小font-size字體名稱font-family例如：宋體、隸書、Arial等等字體屬性font綜合以上字體顏色colorred,#FF00002、CSS常用文本屬性說明屬性值文本對齊text-alignleft、right、center、justify(兩端對齊)文本修飾text-decorationnone、underline、overline、line-through文本縮進(jìn)text-indentlength、percentage行高屬性line-heightnormal、length、percentage字間距l(xiāng)etter-spacingnormal、length大小寫text-transformuppercase、lowercase、capitalize;nonelength(長度，可以用絕對單位(cm,mm,in,pt,

pc)或者相對單位

(em,ex,px))percentage(百分比，相當(dāng)于父對象寬度的百分比)相對長度單位em相對于當(dāng)前對象內(nèi)文本的字體尺寸ex相對于字符“x”

的高度。通常為字體高度的一半px像素（Pixel）%百分比Percentage絕對長度單位pt點（Point）pc派卡（Pica）。相當(dāng)于我國新四號鉛字的尺寸in英寸（Inch）cm厘米（Centimeter）mm毫米（Millimeter）單位換算：1in=2.54cm=25.4mm=72pt=6pc尺寸%百分比in英寸cm厘米mm毫米

em1em等于當(dāng)前的字體尺寸。2em等于當(dāng)前字體尺寸的兩倍。例如，如果某元素以12pt顯示，那么2em是24pt。在CSS中，em

是非常有用的單位，因為它可以自動適應(yīng)用戶所使用的字體。ex一個ex是一個字體的x-height。(x-height通常是字體尺寸的一半。)pt磅(1pt等于1/72英寸)pc12點活字(1pc等于12點)

px像素(計算機屏幕上的一個點)顏色(顏色名)顏色名稱(比如red)

rgb(x,x,x)RGB值(比如rgb(255,0,0))

rgb(x%,x%,x%)RGB

百分比值(比如rgb(100%,0%,0%))#rrggbb十六進(jìn)制數(shù)(比如#ff0000)3、背景屬性說明屬性值背景顏色background-colorred，#ff0000背景圖片background-imageurl()背景重復(fù)background-repeatrepeat-xrepeat-yno-repeat背景附著background-attachmentscroll、fixed背景位置background-position[left][top]背景background綜合3、CSSposition屬性position屬性規(guī)定元素的定位類型。定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什么類型。相對定位元素會相對于它在正常流中的默認(rèn)位置偏移。3、CSSposition屬性absolute生成絕對定位的元素，相對于static定位以外的第一個父元素進(jìn)行定位。元素的位置通過“l(fā)eft”,“top”,“right”以及“bottom”屬性進(jìn)行規(guī)定。fixed生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位。元素的位置通過"left","top","right"以及"bottom"屬性進(jìn)行規(guī)定。3、CSSposition屬性relative生成相對定位的元素，相對于其正常位置進(jìn)行定位。因此，“l(fā)eft:20”會向元素的LEFT位置添加20像素。static默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中（忽略top,bottom,left,right或者z-index聲明）。inherit規(guī)定應(yīng)該從父元素繼承position屬性的值。3、CSSposition屬性<html><head><styletype="text/css">h2.pos_left{position:relative;left:-20px}h2.pos_right{position:relative;left:20px}</style></head><body><h2>這是位于正常位置的標(biāo)題</h2><h2class="pos_left">這個標(biāo)題相對于其正常位置向左移動</h2><h2class="pos_right">這個標(biāo)題相對于其正常位置向右移動</h2><p>相對定位會按照元素的原始位置對該元素進(jìn)行移動。</p><p>樣式"left:-20px"從元素的原始左側(cè)位置減去20像素。</p><p>樣式"left:20px"向元素的原始左側(cè)位置增加20像素。</p></body></html>3、CSSposition屬性<html><head><styletype="text/css">h2.pos_abs{position:absolute;left:100px;top:150px}</style></head><body><h2class="pos_abs">這是帶有絕對定位的標(biāo)題</h2><p>通過絕對定位，元素可以放置到頁面上的任何位置。下面的標(biāo)題距離頁面左側(cè)100px，距離頁面頂部150px。</p></body></html>3、CSSposition屬性<html><head><styletype="text/css">p.one{position:fixed;left:5px;top:5px;}p.two{position:fixed;top:30px;right:5px;}</style></head><body><pclass="one">一些文本。</p><pclass="two">更多的文本。</p></body></html>第14章CSS選擇符一、class選擇符二、標(biāo)簽選擇符三、ID選擇符一、class選擇符class選擇符允許重復(fù)使用，其命名必須以“.”開頭，這樣的樣式可以與任何標(biāo)簽組合使用1、通用的類選擇器例如：定義：.s1{color:green；}調(diào)用：<pclass=“s1”>綠色</p><spanclass=“s1”>綠色</span>2、只能與指定標(biāo)簽一起使用例如：定義：p.s1{color:green；}調(diào)用：<pclass=“s1”>綠色</p><spanclass=“s1”>綠色</span>這里只有<p>標(biāo)記顯示為綠色。二、標(biāo)簽選擇符指以HTML標(biāo)簽作為名稱的選擇符，通過CSS可以重新定義這些HTML標(biāo)簽的顯示樣式。這些重新定義的標(biāo)簽會自動按照CSS中重新的定義得樣式顯示1、單標(biāo)簽選擇符例如：定義：p{color:green；}調(diào)用：<p>綠色</p><p>大家好</p>這里所有的<p>標(biāo)記都顯示為綠色2、包含選擇符定義只有在指定標(biāo)簽內(nèi)的標(biāo)簽才顯示CSS樣式例如：定義：pspan{color:green；}調(diào)用：<p><span>綠</span>顏色</p><h1><span>大</span>家好</h1><span>hello</span>這里的只有p標(biāo)記中的span標(biāo)記才顯示為綠色，即字“綠”顯示為綠色三、ID選擇符ID的含義是標(biāo)識，ID選擇符可以標(biāo)識網(wǎng)頁中的元素，它可以實現(xiàn)的功能和CSS選擇符相似。與CLASS選擇符不同的是，ID選擇符在一個網(wǎng)頁中按照規(guī)范只能使用一次，并且可以被Javascript在需要的時候調(diào)用。例如：定義：#box{color:green；background-color:yellow;}調(diào)用：<divid=“box”>這里的文字是綠色的，背景顏色是黃色</div>div標(biāo)記內(nèi)的標(biāo)記的樣式例如：定義：#boxspan{color:green；background-color:yellow;}調(diào)用：<divid=“box”>大家好<span>這里的文字是綠色的，背景顏色是黃色</span></div>三種定義和調(diào)用的方法定義方法調(diào)用方法說明

h1(或其他任何存在的標(biāo)簽）<h1>直接使用原有標(biāo)簽重新定義已有標(biāo)簽。#f1{……}<h1id=f1>選擇性調(diào)用，原則上一個文件中只能用一次。.s1{……}H1.s1{……}<h1class=s1>選擇性調(diào)用，推薦。群組選擇符

定義將多個CSS樣式定義為相同的內(nèi)容，多個CSS樣式間用“，”分隔。例如：定義：p,h1,h2{color:green；}調(diào)用：<p>綠色</p><h1>大家好</h1><h2>hello<h2>這里的p、h1、h2標(biāo)記都顯示為綠色四、CSS偽類(pseudoclass)超鏈接偽類,偽類是最常用的偽類。例句：a:link{color:#FF0000}/*未被訪問的鏈接紅色*/a:visited{color:#00FF00}/*已被

溫馨提示

  • 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

提交評論