網(wǎng)頁設(shè)計與制作C課件_第1頁
網(wǎng)頁設(shè)計與制作C課件_第2頁
網(wǎng)頁設(shè)計與制作C課件_第3頁
網(wǎng)頁設(shè)計與制作C課件_第4頁
網(wǎng)頁設(shè)計與制作C課件_第5頁
已閱讀5頁，還剩57頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

樣式是一個規(guī)則，告訴瀏覽器如何表現(xiàn)特定的HTML或XHTML標(biāo)簽中的內(nèi)容。每個標(biāo)簽都有一系列相關(guān)的樣式屬性，它們的值決定了瀏覽器將如何顯示這個標(biāo)簽。一條規(guī)則定義了標(biāo)簽中一個或幾個屬性的特定值。將樣式和標(biāo)簽結(jié)合起來的方式有三種:內(nèi)聯(lián)樣式表、文檔級樣式表，或者通過使用外部樣式表。

1、內(nèi)聯(lián)樣式(inlinestyle)是連接樣式和標(biāo)簽的最簡單的方式，只需在標(biāo)簽中包含一個style屬性，后面再跟一列屬性及屬性值即可。瀏覽器會根據(jù)樣式屬性及其值來表現(xiàn)標(biāo)簽中的內(nèi)容。<H1style="color:blue">Bach'shomepage</H1><H1style="color:blue;font-style:italic">Bach'shomepage</H1>因為內(nèi)聯(lián)樣式會向其標(biāo)簽的定義中添加更多內(nèi)容，所以它們難維護(hù)，也難以閱讀。2、文檔級樣式表將樣式表放在<head>內(nèi)的<style>標(biāo)簽和(/style>結(jié)束標(biāo)簽之間，就會影響文檔中所有相同標(biāo)簽的內(nèi)容<style>標(biāo)簽功能:定義文檔級樣式表屬性:dir lang media title type<style>和</style>標(biāo)簽之間的所有內(nèi)容都將被看作是樣式規(guī)則的一部分type屬性級聯(lián)樣式表全部都是text/css類型;JavaScript樣式表使用的類型則是text/javascript<html><head><title>Bach'shomepage</title><styletype="text/css"> h1{color:blue;font-style:italic}</style><body><h1>Bach'shomepage</h1><p>JohannSebastianBachwasaprolificcomposer.</p></body></html>3、鏈接式外部樣式表當(dāng)在文檔的<head>標(biāo)簽中使用<link>標(biāo)簽

<html><head><title>Bach'shomepage</title><linkrel="stylesheet"href=“sheet1.css"type="text/css"><linkrel="stylesheet"href=“sheet2.css"type="text/css"></head><body><h1>Bach'shomepage</h1><p>JohannSebastianBachwasaprolificcomposer.</p></body></html>link元素規(guī)定了：鏈接類型：指向“stylesheet”。通過“href”屬性，指定了樣式表的位置。鏈接的樣式表的類型：“text/css”。樣式語法：樣式的語法(規(guī)則)樣式規(guī)則至少由三個基本部分組成:1、選擇符selector：HTML或XHTML標(biāo)記元素的名稱，2、大括號{}3、大括號{}括起來并用分號分隔的樣式列表（樣式:”ＣＳＳ屬性:屬性值”）selector{propertyl:valuel;property2:value2;...}例如：h1{color:purple;font-style:italic}樣式的種類：１、單個的簡單選擇符（只有一個標(biāo)記）h1{color:blue;font-style:italic}２分組選擇符（集合選擇符）具有相同樣式的選擇符可以寫在一起，中間用逗號分開。如：h1,h2,h3{color:red;font-style:italic}3、嵌套選擇符（派生選擇符/上下文選擇符）EF匹配元素E的任意后代元素Fpb{color:red}將出現(xiàn)在p之內(nèi)任何位置的b元素的文本顏色設(shè)置為紅色

pb，h1sub{color:green}將出現(xiàn)在p之內(nèi)任何位置的b元素和h1之內(nèi)任何位置的sub元素的文本顏色設(shè)置為綠色

3、ID選擇符<pid="first_para">精通HTML語言，完全能手寫HTML代碼；<br>熟練掌握ASP、ASP.Net、PHP,JAVA、JAVASCRIPT等技術(shù)；<br>熟悉網(wǎng)站的管理、設(shè)計規(guī)劃、前臺、后臺程序制作技術(shù)。<br>熟練SQLserver,Oracle數(shù)據(jù)庫管理系統(tǒng),能夠獨立完成數(shù)據(jù)庫的開發(fā);<br></p>#first_para{font-weight:bold}#first_para{font-weight:bold;letter-spacing:3px;}#first_para{font-weight:bold;letter-spacing:3px;font-family:"楷體_GB2312";}ID選擇符的前面是#號ID只能在某個HTML文檔中出現(xiàn)一次，即ID名稱（如first_para）不能重復(fù)４、類選擇符<pclass="secobd_para">商務(wù)類人才可以分為五種：一是企業(yè)網(wǎng)絡(luò)營銷業(yè)務(wù)，包括利用網(wǎng)站為企業(yè)開拓網(wǎng)上業(yè)務(wù)、網(wǎng)絡(luò)品牌管理、客戶服務(wù)等；二是網(wǎng)上國際貿(mào)易，包括利用網(wǎng)絡(luò)平臺開發(fā)國際市場、進(jìn)行國際貿(mào)易；<br>三是新型網(wǎng)絡(luò)服務(wù)商的內(nèi)容服務(wù)，包括頻道規(guī)劃、信息管理、頻道推廣、客戶服務(wù)等；四是電子商務(wù)支持系統(tǒng)的推廣，負(fù)責(zé)銷售電子商務(wù)系統(tǒng)和提供電子商務(wù)支持服務(wù)、客戶管理等；五是創(chuàng)業(yè)，包括利用虛擬市場提供產(chǎn)品和服務(wù)，也可以直接為虛擬市場提供服務(wù)。對于這類人才，一方面要求他們是管理和營銷的高手，同時也應(yīng)熟悉網(wǎng)絡(luò)虛擬市場下新的經(jīng)濟(jì)規(guī)律，另一方面他們必須掌握網(wǎng)絡(luò)和電子商務(wù)平臺的基本操作技術(shù)。</p>４、類選擇符<pclass="second_para"></p>.second_para{color:red;}.second_para{color:green;background-color:#e8d3e3;}類選擇符通過直接引用元素中類屬性的值而產(chǎn)生效果。在這個引用前面總是一個句點(.)，用它來標(biāo)識一個類選擇符。這個句點是必要的，因為它可以幫助類選擇符與其他元素相區(qū)別。p.second_para{color:green;background-color:#e8d3e3;}樣式只對類屬性價為second_para的段落起作用．５、偽類選擇符:link:偽類適用于那些還未被訪問的連接:visited:偽類適用于用戶已經(jīng)訪問過的連接:hover偽類:用于用戶指向一個元素,但還沒有激活它的時候

:active偽類適用于一個元素被用戶激活的時候:focus偽類適用于一個元素獲得焦點（接受鍵盤事件或其它形式的文本輸入）的時候a{color:purple}a:link{color:red}a:visited{color:blue}a:hover{color:blue;}a:active{color:yellow}<aclass="student"href="#">學(xué)生作品</a>a.student:visited{color:purple;}a.student:link,a.student:visited{color:red;}注意a:hover必須放置在a:link和a:visited規(guī)則之后，否則層疊規(guī)則將隱藏a:hover的'color'屬性。

6、偽元素first-line偽元素:一個段落的第一個格式化的行應(yīng)用特殊的樣式<P>ThisisasomewhatlongHTMLparagraphthatwillbebrokenintoseverallines.Thefirstlinewillbeidentifiedbyafictionaltagsequence.Theotherlineswillbetreatedasordinarylinesintheparagraph.</P>.P:first-line{text-transform:uppercase;color:red;}:first-letter偽元素可以用于“詞首(首字符或首字)”P:first-letter{color:green;font-size:200%;font-style:italic;}通配選擇符**{margin:0;padding:0;}元素間的關(guān)系：<divtitle="這是一個div"> <h1>這是是h1的內(nèi)容</h1> <p>這是一個段落p的內(nèi)容<strong>這里是strong的內(nèi)容</strong></p></div>div同h1和p形成“父/子”關(guān)系，div是h1和p的“父元素”。p

和strong形成“父/子”關(guān)系，strong的“父元素”是p。

h1,p,strong都是div的“子元素”（三者都包含在div之內(nèi)）div是h1pstrong三者的“祖先”，div和strong并非“父/子”關(guān)系，而是“祖孫”關(guān)系，但strong依然是div的“子（孫）元素”。h1和p兩者是相鄰的E>F（父子元素）匹配父元素E的任意子元素F注釋/**//*P{background-color:#FFFF66}*/CSS元素分類在CSS中，元素被分為三種類型:塊級元素:

諸如段落、標(biāo)題、列表、表格、DIV和BODY等元素都是塊級(block-level)元素。每個塊級元素都從一個新行開始顯示，而且其后的元素也需另起一行進(jìn)行顯示。內(nèi)聯(lián)元素:如a,em,span元素及大多數(shù)的替換元素，如圖像和表單輸入元素。它們不必在新行上顯示，也不強(qiáng)迫其他元素在新行上顯示，而且可以作為任何其他元素的子元素。列表項元素在HTML中只包含li元素。它們類似于書簽，用干特殊的表示場合(如圓點、字母或數(shù)字)。如果它們出現(xiàn)在某種有序列表中，則具有順序性。如在有序列表中的列表項能依據(jù)它們的上下文自動編號。 這幾種元素占據(jù)了display屬性值（Block、in1ine、list-item、none）四個值中的三個。如果將元素的display屬性設(shè)成none，則元素的存在會被瀏覽器所忽略，而且也不被顯示。block元素的特點是：總是在新行上開始；高度，行高以及頂和底邊距都可控制；寬度缺省是它的容器的100%，除非設(shè)定一個寬度,<div>,<p>,<h1>,<form>等是塊元素的inline元素的特點是：

和其他元素都在一行上；高，行高及頂和底邊距不可改變；寬度就是它的文字或圖片的寬度，不可改變。<span>,<a>,<label>,<input>,<img>,<strong>和<em>是inline元素的例子用display:inline或display:block命令就可以改變一個元素的這一特性。什么時候需要改變這一屬性呢？讓一個inline元素從新行開始；讓塊元素和其他元素保持在一行上；控制inline元素的寬度；控制inline元素的高度；HTML塊級元素：address-地址blockquote-塊引用div-常用塊級容易，也是csslayout的主要標(biāo)簽dl-定義列表fieldset-form控制組form-交互表單h1-大標(biāo)題h2-副標(biāo)題h3-3級標(biāo)題h4-4級標(biāo)題h5-5級標(biāo)題h6-6級標(biāo)題hr-水平分隔線ol–有序列表p-段落pre-格式化文本table-表格ul–無序列表英寸（in）、厘米（cm）和毫米（mm）根據(jù)顯示的實際尺寸來確定長度。此類單位不隨顯示器分辨率的改變而改變12pt字（pc）相當(dāng)于我國新四號鉛字的尺寸

即windows系統(tǒng)定義的12字號大小為單位(1pc=12pt)。該單位前輸入的數(shù)字表示字號大小的倍數(shù)。如{font-size:2pc;}表示文字大小為24pt；是以當(dāng)前文本的百分比定義尺寸。如{font-size:200%}是指文字大小為原來的2倍；%百分比-字體、顏色、寬度像素（px）根據(jù)顯示器的分辨率來確定長度，在web應(yīng)用中多采用該單位；像素是相對于顯示器屏幕分辨率而言的點數(shù)（pt）絕對長度單位。點（Point）。

字體高（em）表示當(dāng)前文本的尺寸，相對長度單位。相對于當(dāng)前對象內(nèi)文本的字體尺寸

如{font-size:2em}是指文字大小為原來的2倍；字體文本顏色背景表格邊框定位CSS屬性CSS字體屬性font-familyfont-weightfont-sizefont-stylefont-variant1)font-family:設(shè)置或檢索用于對象中文本的字體名稱或字體系列名稱語法：

font-family:name(字體名稱)

font-family:cursive|fantasy|monospace|serif|sans-serif(字體系列名稱)適用于:所有元素body{color:red;font-family:"楷體_GB2312"}字體系列比如，常見的確字體Times。，實際上Times是許多變形的組合，包括TimesRegular,TimesBold,TimesItalic,Timespblique,TimesBoldItalic,TimesBoldOblique等等。Times的每一種變形都是一個字體形式,Times就是這些字體形式的組合。也就是說Times是一個字體系列，并不單單是一種.

除特定的字體系列，如Times,Verdana,Arial外，CSS還定義了五種一般字體系列:Serif字體成比例例且有襯線(serif)的字體,一種字體有比例，是指宇體中的所有字母根據(jù)它們不同的尺寸占據(jù)不同的寬度。襯線特指加在字母上做裝飾的細(xì)線，Sansserif字體:有比例但沒有襯線的字體。Monospace字體無比例的字體。通常用于模擬打字機(jī)打出的文本Cursive字體試圖模擬人的筆跡的字體。通常這些字體大部分是由曲線和比襯線字體更強(qiáng)的筆畫修飾組成的。Fantasy字體不能通過某種單一的特征來定義，而且也不能簡單地歸為其他系列的某一類的那些字體。這樣的字體較少.2)font-weight：設(shè)置或檢索對象中的文本字體的粗細(xì)。Normal(初始值)、bold、bolder、lighter、100~900適用于:所有元素div{font-weight:bold}div{font-weight:lighter}3)font-size：字體尺寸允許值:xx-small、x-small、small、medium(初始值)

、large、x-large、x-large、larger、smaller、長度（pt|px|cm|in|mm）、百分比(%)適用于:所有元素p{font-size:xx-large}p{font-size:30px}p{font-size:150%}4)font-style：字體樣式Normal(默認(rèn)值)、italic（斜體）、oblique（傾斜的字體）適用于：所有元素div{font-style:italic}5）font-variant：字體變形Normal(默認(rèn)值)、small-caps（小型的大寫字母字體）適用于：所有元素span{font-variant:small-caps;}

CSS文本屬性text-indenttext-aligntext-decorationletter-spacingword-spacingtext-transformwhite-space

line-heightvertical-align1）text-indent：文本首行的縮進(jìn)。允許值：長度、百分比適用于：塊級元素span{text-indent:1.25in;}首行縮進(jìn)四分之一英寸span{text-indent:-10em;}span{text-indent:-5%;}2）text-alignLeft、right、center、justify

適用于：

塊級元素p{text-align:right;}3）text-decoration下劃線，上劃線，刪除線，閃爍none、underline、overline、line-through、blink適用于：

所有元素

P{text-decoration:line-through}4)letter-spacing字母間距適用于：

所有元素

P{letter-spacing:0.5em}5)word-spacing:單詞之間的間距適用于：

所有元素P{word-spacing:1em}6）text-transform:該屬性控制某元素文本的大小寫效果

值：

capitalize|uppercase|lowercase|nonecapitalize

將每個單詞的首字符變?yōu)榇髮憽ppercase

將每個單詞的所有字符變?yōu)榇髮憽owercase

將每個單詞的所有字符變?yōu)樾戇m用于：

所有元素

div{text-transform:capitalize}div{text-transform:uppercase}7)white-space:該屬性聲明了元素內(nèi)的空白是如何處理的

值：

normal|pre|nowrap|適用于：

塊級元素

normal

該值告訴用戶端，合并一系列的空白，在必要的時分行pre

該值阻止用戶端合并一系列的空白nowrap

該值象'normal'那樣合并空白，但是阻止文本內(nèi)的分行div{text-transform:uppercase;white-space:nowrap}8）line-height:行高，行高指的是文本行的基線間的距離允許值:長度、百分比、數(shù)字、normal適用于：所有元素div{line-height:2em}div{line-height:0.5in}div{line-height:32pt}9）vertical-align允許值:baseline、sub、super、bottom、text一bottom、middle、top、Text-top、百分比適用于：內(nèi)聯(lián)元素<span>,<a>,<label>,<input>,<img>,<strong>和<em>是inline元素[arry]<span>i</span>

span{vertical-align:sub}span{vertical-align:-200%}color屬性background-colorbackgraund-imagebackground-repeatbackground-positionbackground-attachmentCSS顏色背景屬性 在CSS中，可以設(shè)置任何元素的前景色和背景色，從BODY元素到下劃線和斜體標(biāo)記，幾乎所有的一切:列表項、整個列表、標(biāo)題、超鏈接、表格單元、表單元素.前景色設(shè)置前景色的最簡便方法是用css的color屬性。color屬性適用于:所有元紊p(color:yellow;}div(color:blue;}p.second_para1{color:blue}

/*類標(biāo)識為second_para1的段落文本顏色為藍(lán)色*/p#second_para1{color:red}/*ID標(biāo)識為second_para1的段落文本顏色為紅色*/p#second_para1a:link{color:red}/*ID標(biāo)識為second_para1的段落中的鏈接文本顏色為紅色*/p#second_para1a:link{color:red}/*類標(biāo)識標(biāo)識為second_para1的段落中的鏈接文本顏色為紅色*/顏色屬性也可以應(yīng)用于表單(form)元素。input#the-input{color:red;}背景顏色background-color允許值<顏色>或transparent適用于:所有元紊P{background-color:#ccccff}a:link{background-color:silver;}p.second_paraa:link{background-color:silver;}背景圖像backgraund-image允許值:<url>適用于:所有元紊body{background-image:url(bg1.JPG)}p{background-image:url(c3.gif)}div{background-image:url(bg1.jpg)}background-repeat允許值Repeat、no-repeat、repeat-x、repeat-yrepeat使圖像在兩個方向平鋪repeat-x、repeat-y:使圖像分別在水平和垂直方向上平鋪初始值:repeatbody{background-image:url(03.gif);background-repeat:repeat-y;}背景圖像位置background-position適用于塊級元素和替換元素允許值：left、right、top、bottom、center、百分比、長度值body{background-image:url(03.gif);background-repeat:repeat-x;background-position:top}要使背景圖像橫跨元素的三分之一，縱跨三分之二，可以按如下聲明body{background-image:url(03.gif);background-repeat:no-repeat;background-position:33%66%}使得背景圖像的中心同其父元素中心對齊background-position:50%50%背景圖像位置background-position長度值

當(dāng)用長度值來決定背景圖像的位置時，它們被解釋為相對于元素左上角的偏移量。背景圖像上的偏移點也為左_匕角的那個點。 如果設(shè)置為20px30px，那么圖像的左上角將位于元素左上角往右20個像素，往下30個像素的位置background-position:50px80px

而且，長度值和百分比值還可以為負(fù)，這將使圖像以某種程度偏離元素?？梢灾蛔寛D像的一部分顯示于元素上．阻止圖像隨文本滾動:background-attachment使用background-attachment屬性，可以使背景圖像固定在視野范圍內(nèi)，以避免出現(xiàn)因滾動而消失的效果:－－背景圖象設(shè)置在body上允許值：scroll、fixedbody{background-image:url(03.gif);background-repeat:no-repeat;background-position:50px80px;background-attachment:fixed}背景屬性可綜合寫到一個縮略屬性中，可按任意順序排列l(wèi)ist-style-typelist-style-imagelist-style-positionlist-style（組合使用以上３屬性）CSS列表項屬性列表屬性CSS2標(biāo)準(zhǔn)允許控制列表元素的外觀—尤其是有序和無序列表。1、list-style-type允許值Disc 實心圓Circle 常空心圓Square 空心方塊Decimal 1，2，3，4，5，upper-alpha A，B，C，D，E，…lower-alpha a，b，c，d，e，upper-roman I，II,III，IV，V，lower-roman i,ii,iii,iv,vnone適用于：列表項元素<ul><li>1</li><li>2</li></ul>ul{list-style-type:upper-roman;}2、list-style-image該屬性指定用來列表項標(biāo)記的圖形

允許值：

<url>|none|inherit

適用于:列表項元素list-style-image:url(03.gif);3、list-style-position定位與一個列表項有關(guān)的記號:是在與列表有關(guān)的塊外面還是里面。允許值：inside|outside適用于:列表項元素ul{list-style-type:upper-alpha;list-style-position:inside;border-style:dashed;}4、組合三個列表樣式屬性list-style適用于:列表項元素ul{list-style:upper-alphaoutsideurl(03.gif);(中間用空格隔開)border-style:dashed}ulli{list-style:upper-alphainsideurl(03.gif);border-style:dotted}列表項單個項目<ul><liid="temp">1</li><li>2</li></ul>ul{list-style:upper-alphaoutsideurl(03.gif);border-style:dashed}#temp{list-style:upper-alphainsideurl(03.gif);border-style:dotted}WidthHeightBorder-widthBorder-styleBorder-colorPadding-內(nèi)邊距Margin–外邊距CSS框?qū)傩?/p>

CSS中，所有文檔元素都生成一個矩形框，稱之為元素框。這個框描述了元素及其屬性在文檔布局中所占的空間大小，因此每個框都可以影響其他元素的位置及大小．內(nèi)容寬度width標(biāo)簽標(biāo)記的內(nèi)容給內(nèi)容加邊框內(nèi)容高度height邊框border

邊框與內(nèi)容之間的部分稱為邊白（內(nèi)邊距）（padding）

如果邊白為0，則邊白邊和內(nèi)容邊重合

內(nèi)容寬度width標(biāo)簽標(biāo)記的內(nèi)容給內(nèi)容加邊框內(nèi)容高度height邊框border上邊白Padding-top右邊白Padding-right下邊白Padding-bottom左邊白Padding-left

邊框外為邊界（margin

）-框的外框

如果邊界為0，則邊界與邊框重合

內(nèi)容寬度width標(biāo)簽標(biāo)記的內(nèi)容給內(nèi)容加邊框內(nèi)容高度height邊框border上邊白Padding-top右邊白Padding-right下邊白Padding-bottom左邊白Padding-leftmargin-top上邊界margin-bottom下邊界margin-right右邊界margin-right左邊界框的屬性及屬性值

邊框?qū)傩栽O(shè)置框的邊框區(qū)的寬度，顏色和樣式

通常情況下，一個元素的width定義為左側(cè)內(nèi)部邊線到右側(cè)內(nèi)部邊線的趾離height定義為上內(nèi)邊線到下內(nèi)邊線的距離。width允許值<長度>、<百分比>、auto初始值：auto:元素框?qū)挾鹊扔诟冈貙挾冗m用于：塊級元紊和替換元紊百分比是指相對于父元素的寬度。helght允許值：<長度>、auto初始值：auto適用于：塊級元紊和替換元紊<divid="kuang">框的示例</div>#kuang{text-align:center;width:20%;height:50px;border-style:solid}邊框樣式border-style屬性及屬性值元素的邊框(border}就是一條(有時是多條)圍繞著元素內(nèi)容及補(bǔ)白的線border-style(border-top-style，border-right-style，border-bottom-style，border-left-style)<border-style>取值：

none:沒有邊框dotted

：邊框是一系列的點。dashed

邊框是一系列的短線條的段。solid邊框是一條單一的線。double邊框有兩條實線。兩條線寬+空白的寬度之和等于'border-width'的值。groove邊框看上去好象是雕刻在畫布之內(nèi)。ridge和'grove'相反：邊框看上去好象是從畫布中凸出來。inset該邊框使整個框看上去好象是嵌在畫布中。outset和'inset'相反：該邊框使整個框看上去好象是從畫布中凸出來邊框樣式border-style示例#kuang{text-align:center;width:20%;height:50px;border-top-style:dotted;border-bottom-style:double;border-right-style:groove;border-left-style:inset;}邊框本身border-width寬度border-top-width，border-right-width，border-bottom-width，border-left-width及組合寫法border-width

可以取如下值：thin

一個窄的邊框。medium

一個中等的邊框。thick

一個厚邊框。<length>

邊框的厚度是顯式值。顯式的邊框?qū)挾炔荒転樨?fù)數(shù)。邊框?qū)挾萣order-width示例#kuang{text-align:center;width:20%;height:50px;border-top-style:dotted;border-bottom-style:double;border-right-style:solid;border-left-style:outset;border-top-width:10px;border-bottom-width:thick;border-right-width:medium;border-left-width:20px;}‘border-width’組合寫法：

如果只有一個值，它適用于所有四邊。如果有兩個值，頂?shù)走吙虿捎玫谝粋€值，左右邊框采用第二個值。如果有三個值，頂邊框采用第一個值，左右邊框采用第二個值，而底邊框采用第三個值。如果有四個值，它們分別適用于頂，右，底，左四邊。

邊框顏色border-color屬性及屬性值border-top-color，border-right-color，border-bottom-color，border-left-color及組合寫法border-color

顏色值：color、transparent適用于：所有元素

<div>這是個塊</div>div{border-width:thin;border-style:dashed;/*border-color:blue*/border-width:thin;border-style:dashed;border-top-color:blue;border-bottom-color:teal;border-left-color:purple;border-right-color:red;}邊白（內(nèi)邊距）padding屬性及屬性值內(nèi)邊距是元素的邊框和內(nèi)容之間的距離，適用于任何元素‘padding-top’，‘padding-right’，‘padding-bottom’，‘padding-left’

及組合寫法padding

取值：<length>

指定一個確定寬度。<percentage>

百分比的計算基于生成的框的包含塊的寬度padding：

如果只有一個值，它適用于所有四邊。如果有兩個值，頂?shù)走叞自O(shè)置為第一個值而左右邊距設(shè)置為第二個值。如果有三個值，頂邊白設(shè)置為第一個值，左右邊白設(shè)置為第二個值，底邊白設(shè)置為第三個值。如果有四個值，它們分別設(shè)置頂，右，底，左邊白。

div{border-width:thin;border-style:dashed;border-top-color:blue;border-bottom-color:teal;border-left-color:purple;border-right-color:red;padding:2em6em2em20%;}CSS外邊距(界)屬性及屬性值margin-top，margin-right，margin-bottom，margin-left以及margin

適用于：

所有元素取值：

<margin-width>

百分比：相對于包含塊的寬度、automargin

如果僅有一個值，它將應(yīng)用于所有四邊。如果有兩個值，頂?shù)走吘嘣O(shè)置為第一個值，左右邊距設(shè)置為第二個值。如果有三個值，頂邊距設(shè)置為第一個值，左右邊距設(shè)置為第二個值，底邊距設(shè)置為第三個值。如果有四個值，它們分別設(shè)置頂，右，底，左邊距。

margin-top:1em;margin-right:50％;margin-bottom:3em;margin-left:2em;使塊級元素居中于父元素<divid="the-div"><pid="the-p">ssssssssssssssssssss</p></div>CSS外邊距(界)屬性及屬性值使塊級元素居中于父元素：左右外邊距設(shè)置為auto#the-div{width=400px;height=200px;border:solid}#the-p{width:100px;height:40px;border:dashed;margin-left:auto;margin-right:auto}樣式屬性在鏈接上的應(yīng)用

鏈接是行內(nèi)元素，這意味著只有在單擊鏈接的內(nèi)容時它們才會激活。但是，有時候希望實現(xiàn)像按鈕的效果，有更大的可單擊區(qū)域。為此可以將錨的display屬性設(shè)置為block，然后修改width、height和其他屬性來創(chuàng)建需要的樣式和單擊區(qū)域。樣式屬性在鏈接上的應(yīng)用<ul><li><ahref="">搜狐</a></li><li><ahref="">新浪</a></li><li><ahref="">網(wǎng)易</a></li></ul>ula:link{color:red}ula:visited{color:black}ula:hover{color:blue;}ula:active{color:yellow;}

a:visited{color:black;text-decoration:none;/*把鏈接的默認(rèn)下劃線去掉*/border-bottom-width:1px;border-bottom-style:dashed;border-bottom-color:red;/*border-bottom:1pxdashedred;*/line-height:150%;}樣式屬性在鏈接上的應(yīng)用ul{border:1pxsolid#333;width:120px;margin:5px;padding:2px;list-style-type:none;}li{background:#DDDDDD;border-bottom:1pxsolid#666;}使鏈接不局限于鏈接文字ula:link,ula:visited,ula:hover,ula:active{text-decoration:none;display:block;/*把鏈接定義為塊元素*/width:100%/*把鏈接寬度定義為包含塊的寬度*/}樣式屬性在表格上的應(yīng)用<table><tr><th></th><th>金牌</th><th>銀牌</th><th>銅牌</th><tr><tr><th>中國</th><td>78</td><td>80</td><td>56</td><tr><tr><th>俄羅斯</th><td>78</td><td>80</td><td>56</td><tr><tr><th>美國</th><td>78</td><td>80</td><td>56</td><tr><tr><th>英國</th><td>78</td><td>80</td><td>56</td><tr></table>th{text-align:center;color:blue;background:#e99;width:80px;}td{border-style:solid;border-width:1px;}table{border-collapse:collapse;/*去掉行之間的間隔*/}樣式屬性在表格上的應(yīng)用<table><tr><th></th><th>金牌</th><th>銀牌</th><th>銅牌</th><tr><trclass="single"><th>中國</th><td>78</td><td>80</td><td>56</td><tr><trclass="double"><th>俄羅斯</th><td>78</td><td>80</td><td>56</td><tr><trclass="single"><th>美國</th><td>78</td><td>80</td><td>56</td><tr><trclass="double"><th>英國</th><td>78</td><td>80</td><td>56</td><tr></table>.single{background:yellow;}.double{background:#799;}有關(guān)表單元素上的應(yīng)用(略)學(xué)號*:<inputclass="base-input"type=textname="name">姓名*:<inputclass="base-input"type=textname="name">.base-input{display:block;border:none;border-bottom:2pxsolidblack;color:blue;}浮動float-使一個元素脫離元素自然流允許值:left、

right、none初始值:none適用于:所有元素對象浮動時，對象將被視作塊對象(block-level)，即display屬性等于block.

就是說，浮動對象的display特性將被忽略。<divid="div1">div1</div><divid="div2">div2</div><divid="div3">div3</div>#div1{border:1pxsolid#000;background-color:#bbb;height:40px;width:40px;/*float:right*/}#div2{border:1pxsolid#000;background-color:#bbb;height:40px;width:40px;float:right/*浮動-浮動后浮動元素后面的元素將占據(jù)浮動元素的位置*/}#div3{border:1pxsolid#000;background-color:#bbb;height:40px;width:40px;/*float:right*/clear:right;/*使浮動元素后面的元素保持原來的位置*/}浮動float例子<divid="container"><h2>floatandleft<h2><imgsrc="moon.jpg"><p>對象浮動時，對象將被視作塊對象(block-level)，即display屬性等于block.就是說，浮動對象的display特性將被忽略</p>/*p塊級元素?fù)Q行*/</div>#container{border:1pxsolid#000;background-color:#bbb;padding:20px;}使圖象浮動，首先將IMG元素包含在一個<div>元素中，這樣可以添加更多樣式

<divclass="img-float"><imgsrc="moon.jpg"></div>.img-float{float:left;margin:05px5px0;}

清除clear在浮動元素之后的元素將環(huán)繞在浮動元素周圍，一個圖象浮動在左邊，如果其后的段落文本足夠長，文本將環(huán)繞在圖象周圍，如果不希望看到這種情況，可以對浮動元素之后的元素應(yīng)用清除clear允許值:left、right、both、none初始值:none適用于:所有元素none:默認(rèn)值。允許兩邊都可以有浮動對象left:不允許左邊有浮動對象right:不允許右邊有浮動對象both:不允許有浮動對象P{clear:left}可以確保p左邊沒有浮動元素CSS定位position屬性允許值:static、relative、absolute、fixed、inherit初始值:static適用于:所有元紊relative:設(shè)置此屬性值為relative會保持對象在正常的HTML流中。如果對一個元素進(jìn)行相對定位，可以通過設(shè)置left，right，top，bottom等屬性在正常文檔流中偏移位置，讓這個元素“相對于”它的起點進(jìn)行移動。absolute:絕對定位使元素的位置與文檔流無關(guān)，absolute會將對象拖離出正常的文檔流絕對定位而不考慮它周圍內(nèi)容的布局，使用left，right，top，bottom等屬性相對于其最接近的一個具有定位設(shè)置的父對象進(jìn)行絕對定位。如果不存在這樣的父對象，則依據(jù)body對象。而其層疊通過z-index屬性定義,假如其他具有不同z-index屬性的對象已經(jīng)占據(jù)了給定的位置，他們之間不會相互影響，而會在同一位置層疊。

要激活對象的絕對(absolute)定位，除設(shè)置此屬性值為absolute,還必須指定left，right，top，bottom屬性中的至少一個，否則上述屬性會使用他們的默認(rèn)值auto，這將導(dǎo)致對象遵從正常的HTML布局規(guī)則．

對于定位的主要問題是要記住每種定位的意義。相對定位是“相對于”元素在文檔流中的初始位置，而絕對定位是“相對于”最近的已定位祖先元素。偏移屬性top、bottom、

left、right(當(dāng)position屬性值為relative、absolute、fixed(IE６以下版本不支持))適用于:定位元素允許值：<長度>、<百分比>

、auto初始值:auto絕對定位的對象不具有邊距margin，但仍有補(bǔ)白padding和邊框border

#container{border:1pxsolid#000;background-color:#bbb;width:400px;height:400px;}img{position:relative;left:80px;top:30px;}絕對定位－以它最近定位的父元素作為參考點，如果沒有定位的父元素，則以視窗為起點img{position:absolute;left:180px;top:130px;}#container{border:1pxsolid#000;background-color:#bbb;width:400px;height:400px;position:relative;／注釋掉效果不一樣-有定位的父元素*／left:80px;}

在進(jìn)行頁面布局時，絕對定位是

溫馨提示

  • 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

提交評論