講義教案divcss布局_第1頁
講義教案divcss布局_第2頁
講義教案divcss布局_第3頁
講義教案divcss布局_第4頁
講義教案divcss布局_第5頁
已閱讀5頁,還剩11頁未讀, 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

1.1、html

Css樣式 <metahttp-equiv="refresh""<isindexprompt="提示文字<basehref=" </h#>#=1~6;h1為最大字,h6為最小<a圖像<imgsrc=”URLwidth=”10height=”10平行線<hr/>用于分割內(nèi)容換行<br><br/>html<style=”font-family:verdana;<bodybgcolor=”red”>font-family:verdana字體color:red顏色font-size:10text-align:center文本對齊bgcolor:red背景顏色<<imgsrc="圖形文件名">定義表格 table 定義行 表頭 表格數(shù)據(jù) 表格中內(nèi)容排列<td <th <table<tableborder="1"cellpadding="10"<tableborder="1"<tableborder="1"<td<td<thalign="left">消費項 <td<tdCSS外部導(dǎo)直 <style--javascript-加載外部.js獨立文件二、CSS文字屬性color999999*文字顏色font-family:宋體,sans-serif*文字字體*/font-size:9pt;/*文字大小*/ ic*文字斜體;/letter-spacing1pt*字間距離*/line-height:200%;/*設(shè)置行高*/font-weight:bold;/*文字粗體*/vertical-align:sub;/*下標(biāo)字*/;/text-decoration:overline;/*加頂線*/text-decoration:underline;/*加下劃線*/text-decoration:none;/*刪除 text-transform:capitalize;/*首字大寫*/text-transform:uppercase;/*英文大寫*/text-transform:lowercase;/*英文小寫*/text-align:right;/*文字右對齊*/;/text-align:center*文字居中對齊*/text-align:justify;*文字分散對齊*/vertical-align屬性;/vertical-align:bottom*垂直向下對齊*/vertical-align:middle;/*垂直居中對齊*/;/;/三、CSS符號屬性/;/ 數(shù)字list-style-type:lower-roman*小寫羅馬數(shù)字*/list-style-type:lower-alpha;/*小寫英文字母*/list-style-type:disc;/*實心圓形符號*///list-style-image:url(/dot.gif*式符號*/list-style-position:outside;*凸排*//四、CSS背景樣式background-color:#F5E2EC*背景顏色*/background:transparent;/*背景*/background-imageurl(/image/bg.gif*背景*/background-attaentfixed;*浮水印固定背景*/background-repeatrepeat;*重復(fù)排列-網(wǎng)頁默認*/background-repeat:no-repeat;/*不重復(fù)排列*/background-repeatrepeat-x*x軸重復(fù)排列*/background-repeatrepeat-y;*y軸重復(fù)排列*/background-position:90%90%;/*背景 x與y軸的位置*/background-position:top;/*向上對齊*/background-positionbuttom*向下對齊*/background-position:left;/*向左對齊*/background-position:right;/*向右對齊*/background-position:center;/*居中對齊*/五、CSS連接屬性a/*所有 a:link/* a:visited/*瀏覽過的 a:active/*按下 CURSORhand十字體cursor:crosshaircursor:s-resize十字箭頭cursor:move箭頭朝右cursor:move加一問號cursor:helpcursor:w-cursor:n-箭頭朝右上cursor:ne-resizecursor:nw-resizeI型cursor:text箭頭斜右下cursor:se-resizecursor:sw-resize漏斗cursor:wait){六、CSS框線一覽表border-top:1pxsolid#6699cc;/*上框線*/border-bottom1pxsolid6699cc*下框線*/border-left:1pxsolid#6699cc;/*左框線*/border-right:1pxsolid#6699cc;/*右框線*/ 寫方式,但也可以使用常規(guī)的方式如下:border-top-color:#369/*設(shè)置上框線top顏色*/border-top-width:1px/*設(shè)置上框線top寬度*/border-top-stylesolid/*top樣式*/solid*實線框dotted/*dotted/*虛線框*/double/*雙線框*/groove*立體內(nèi)凸框*/ridge/*立體浮雕框*/inset/*凹框*/outset*凸框*/七、CSS<inputtype="textname="T1<inputtype="submitvalue="submit<inputtype="checkbox<inputtype="radiovalue="V1checked<textarearows="1name="S1八、CSSmargin-top:10px;/*上邊界*/margin-right:10px*右邊界值*/margin-left:10px;/*左邊界值*/九、CSSpadding-top:10px;/*上邊框留空白*/padding-right:10px;/*右邊框留空白*/padding-bottom:10px*下邊框留空白*/padding-left:10px;/*左邊框留空白*/

CSS基本語HTMLCSS1Ptext-indent:3emCLASS(類),因而允許同一元素有不同樣式。例如,一個網(wǎng)頁制作者也許希望視其語言而定,用不同的顏色顯示代碼:code.html{color:#191970}code.css{color:#4b0082}HTML例如,prietary是無效的。</p>類的也可以無須相關(guān)的元素:.note{font-size:smallnotesmall,但如果網(wǎng)頁制作者決定改變這個類的樣式,使得它不再是小字IDIDID選擇符的指定要有指示符"#"在名字前面。例如,ID選擇符可以指定如下:#svp94O{text-indent:3emHTMLID屬性關(guān)聯(lián)選擇符只不過是一個用空格隔開的兩個或的單一選擇符組成的字符串這些選擇符PEM{background:yellowred。過組合給出相同的:H1,H2,H3,H4,H5,H6color:例如,一個BODY定義了的顏色值也會應(yīng)用到段落的文本中。屬性是不會繼承的;上,一個段落不會有同文檔BODY一樣的上邊界值。/*COMMENTSCANNOTBENESTED類的元素(例如,visitedlinks(已的連接)和activelinks(可激活連接)描述了兩個定位錨選擇符:偽類{屬性:值}選擇符:{屬性:HTMLCLASS屬性來指定。一般的類可以與偽類和偽元素一起使用,選擇符.類:偽類{屬性:值或選擇符.類:{屬性:值(activelinks)。定位錨元素可給出偽類link、visited或active。一個已連接可以定義為不已連接被重選時,又以不同顏色、更小字體顯示。這個樣式表的示例如下:A:link{color:redA:active{color:blue;font-size:125A:visitedcolorgreen;font-size:85WallStreetJournal中的,文本的首行都會以粗印體而且全部大(P、H1等等)。以下是一個首行偽元素的例子:font-weight:bold}首個字母偽元素用于加大(dropcaps)和其他效果。含有已指定值選擇符的文本的首個字母會!規(guī)則可以用指定的!important特指為重要的。一個特指為重要的樣式會凌駕于與之對立的則會讀者的。以下是!important的例子:OriginofRules(Author'svs.網(wǎng)頁制作者應(yīng)該地使用!important規(guī)則,因為它們會用戶任何的!important規(guī)則。確定的樣式規(guī)則為!important,因為這些樣式對于用戶閱讀網(wǎng)頁是極為重要的。任何的!important規(guī)則會一般的規(guī)則,所以建議網(wǎng)頁制作者使用一般的規(guī)則以確保有特殊樣式選擇符規(guī)則:IDCLASS屬性個數(shù)。HTML標(biāo)記名格式。最后,按正確的順序?qū)懗鋈齻€數(shù)字,不要加空格或逗號,得到一個三位數(shù)。注意,你需要#id1{xxx*a=1b=0c=0-->100ULULLI.redxxx*a=0b=1c=3-->013*/LI.red{xxx}/*a=0b=1c=1-->特性=011*/LIxxx*a=0b=0c=1-->001HTML文檔更簡易地組合起來。CLASSID屬性DIV元素HTMLLINKHTML文檔中 MEDIA="screen,print">MEDIA="screen,print"><LINK>標(biāo)記是放置在文檔的HEAD部分??蛇x的TYPE屬性用于指定類型--text/css是一個層疊樣式表--允許瀏覽器忽略它們不支持的樣式表類型。為CSS文件配置服務(wù)器而將text/cssContent-type內(nèi)容發(fā)送出去也是一個好注意。外部樣式表不能含有任何像<HEAD>或<STYLE>HTML的標(biāo)記。樣式表僅僅由樣式規(guī)則或組成。一個單獨由P{margin:2em<LINK>標(biāo)記也有一個可選的MEDIA屬性,用于指定樣式表被接受的介質(zhì)或。允許的值(多樣的通過用逗號隔開的列表或值all指定NetscapeNavigator4.x錯誤地忽略除了screen值外的任何使用MEDIA值的連接或嵌入備是計算機的屏幕。Navigator4.x也忽略使用MEDIA=all的樣式表。RELHTML文檔之間的關(guān)系。REL=StyleSheet指定一個固定或首REL="AlternateStyleSheet"定義一個交互樣式。固定樣式在樣式表激活時總被應(yīng)TITLE屬性,就像例子中的第一個<LINK>標(biāo)記,定義一個固定樣式。交互樣式通過REL="AlternateStyleSheet"。例子中的第三個<LINK>標(biāo)記定義一個交互樣<LINKREL=StyleSheetHREF="basics.css"<LINKREL=StyleSheetHREF="tables.css"TITLE。InternetExplorer3forWindows95/NT4并不支持來自連接的樣式表中的BODY背的結(jié)構(gòu),例如嵌入或內(nèi)聯(lián)樣式,或使用BODY元素的BACKGROUND屬性。一個樣式表可以使用STYLE元素在文檔中嵌入BODY{background:url(foo.gif)red;color:black}PEM{background:yellow;color:black}.note{margin-left:5em;margin-right:5emSTYLE元素放在文檔的HEAD部分。必須的TYPE屬性用于指定類型,LINK元素也一樣。同樣地,TITLEMEDIASTYLE指定。STYLEBODY的一部分照常展示其內(nèi)容,從而使這些樣式表對用戶是可見的。要防止這樣做,STYLESGML注解(<!--comment-->)在里面,像上述例子那樣。一個樣式表可以使用CSS的@import被輸入。這個用于一個CSS文件或內(nèi)部STYLE元素@importurl(http: @importurl(/stylesheets/punk.css);DT{background:yellow;color:black注意其它的CSS規(guī)則應(yīng)該仍然包括在STYLE元素中但所有的@import必須放在樣式的樣式表指定了STRONGpunk.css樣式表指定了STRONG元素顯示為黃STRONG元素會顯示為黃色。義元素的規(guī)則這三個樣式表在需要的時候可以使用@import包括在HTML中三LINK元素組合。STYLE屬性內(nèi)聯(lián)。STYLEBODY元素(包括BODY本身),除<PSTYLE="color:red;font-family:'NewCenturySchoolbook',serif">NewCenturySchoolbook字,如果字體可用的話。STYLENewCenturySchoolbook包含在單引號中,因為雙引號被用作包含樣式聲Content-Style-TypeHTTPHEAD部分包括以下標(biāo)記:默認地接受所有因為沒有任何的為內(nèi)聯(lián)樣式指定明確的的語句這種方法應(yīng)該盡元素的場合,但只能使用確認的的話,使用ID屬性代替STYLE屬性。CLASS.punk{color:lime;background:#ff80c0這些類可以使用CLASS屬性在HTML中在這個例子的樣式表,warning類只能用于P元素。warningred,但如果網(wǎng)頁制作者決定改變這個類的樣式為別的顏色,或CSSHTMLIDIDCSS#wdg97{font-size:largerIDHTML中<PID=wdg97>歡迎WebDesignGroup及TVwaterA-Za-z。HTML4.0IDCSS1ID選擇符中有句號。也要注意CSS1Unicode161-255UnicodeHTML4.0不允ID屬性值當(dāng)中。IDIDSTYLE屬性相比,在于ID允許指定的樣式,而且也可以被應(yīng)用于多個文檔(雖然每個文檔只用一次)。SPANHTMLHTML的結(jié)構(gòu)元素上。SPANSTYLE、CLASSID屬性。SPANHTMLEMSTRONG使用。最重要的差EMSTRONGSPAN就沒有這樣的意義。它的存在純粹是<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML字的樣式為<SPANSTYLE="font-family:Arial">Arial</SPAN>.</P>DIV("是一個塊級元素。DIVDIV便于建立不同集成的類,如章節(jié)、或備注。例如:CLASS、STYLEID屬性。</P><P>DIV可以包含其他塊級集成,在用于建立文檔的大型章節(jié)例如本備注是很有用少數(shù)使用了CSS樣式的文檔能在HTML3.2(Wilbur)層(在WDG,譯者注)得到認證。HTML3.2SPANCLASS、STYLEIDLINKSTYLE元TYPEMEDIA屬性。HTML4.0。報-人生活的故事!人的家園!人自己的報!/語法:disy:<值允許值block|inline|list-item|初始值適用于:所有對象向下兼容:否block(在元素的前和后都會有換行)inline在元素的前和后都不會有換行)list-item(與block相同,但增加了 none(沒有顯示)HTML規(guī)格建議的展示形式給出一個缺省的顯示值。none將關(guān)語法white-space值允許值normal|pre|初始值適用于:塊級元素向下兼容:是空白屬性將決定如何處理元素內(nèi)的空格.該屬性的值取以下三個中的一個:normal(將多個空格折疊成一個)pre不折疊空格(:<允許值disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none初始值適用于:帶有顯示值的 向下兼容:是 樣式圖象值為none或當(dāng)圖象載入選項例如LI.square{list-style-type:square}UL.in{list-style-type:none}OL{list-style-type:upper-alpha}/*ABCDEetc.*/OLOL{list-style-type:decimal}/*12345etc.*/OLOLOL{list-style-type:lower-roman}/*iiiiiiivvetc.:<允許值url>|初始值適用于:帶有顯示值的 向下兼容:是 例如UL.check{list-style-image:url(/LI-markers/checkmark.gif)}ULLI.x{list-style-image:url(x.png)}::<允許值inside|初始值適用于:帶有顯示值的項元素向下兼容:是屬性決定關(guān)于inside值,換行會移到標(biāo)記下,而不是縮OutsideListitemsecondlineoflistitemInsiderendering:Listitemse

溫馨提示

  • 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)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論