CSS樣式表代碼布局基礎(chǔ)教程
成都創(chuàng)新互聯(lián)公司始終堅(jiān)持【策劃先行，效果至上】的經(jīng)營(yíng)理念，通過(guò)多達(dá)10余年累計(jì)超上千家客戶(hù)的網(wǎng)站建設(shè)總結(jié)了一套系統(tǒng)有效的營(yíng)銷(xiāo)解決方案，現(xiàn)已廣泛運(yùn)用于各行各業(yè)的客戶(hù)，其中包括：木制涼亭等企業(yè)，備受客戶(hù)贊譽(yù)。
CSS樣式表代碼布局基礎(chǔ)教程—課程10：外部樣式表(一)
十、外部樣式表
外部樣式表是把各種樣式單獨(dú)存在一個(gè)文件里，供其他多個(gè)網(wǎng)頁(yè)調(diào)用，下面我們來(lái)看一個(gè)練習(xí)；
1、文本編輯器
1）打開(kāi)記事本或 gedit、leafpad 文本編輯器，gedit 在查看菜單里選擇“HTML”；
2）點(diǎn)菜單“文件－保存”命令，以“l(fā)x10.html”為文件名，類(lèi)型所有文件，編碼 UTF-8，保存到自己的文件夾；
3）按照基礎(chǔ)02課的方法，輸入、和的內(nèi)容；
2、外部樣式表
1）點(diǎn)菜單“文件－新建”，新建一個(gè)空白文檔，保存文件名為 style.css ，位置跟 lx10 放一起，這是一個(gè)單獨(dú)的文件；
2）在里面輸入下面的內(nèi)容；
/* by TeliuTe */
body {
background-color: #ccffff;
font-size:1.2em;
span {
color:#800000;
.myblue {
color:blue;
3）第一行 /* ... */ 是注釋?zhuān)⒚髯髡甙鏅?quán)用途等，根據(jù)自己的需要，
下面的內(nèi)容跟內(nèi)部樣式表相同，各個(gè)標(biāo)簽和它的樣式，保存一下文件；
4）回到 lx10.html 文檔中，在 head 區(qū)內(nèi)加上下面一行外部引用標(biāo)識(shí)；
5）然后在 body 區(qū)內(nèi)，輸入下面的內(nèi)容；
1）點(diǎn)菜單“文件－新建”，新建一個(gè)空白文檔，保存文件名為 style.css ，位置跟 lx10 放一起，這是一個(gè)單獨(dú)的文件；
6）保存一下文件，回到自己文件夾中，打開(kāi) lx10 網(wǎng)頁(yè)，看一下效果；
7）在多個(gè)網(wǎng)頁(yè)具有相同樣式時(shí)，使用外部樣式表可以節(jié)省空間和減小網(wǎng)頁(yè)大??；
本節(jié)學(xué)習(xí)了外部樣式表的使用方法，你成功地完成了本教程，歡迎繼續(xù)學(xué)習(xí)本站的其他課程！
本教程由86團(tuán)學(xué)校TeliuTe制作
（計(jì)算機(jī)基礎(chǔ)知識(shí)，電腦知識(shí)入門(mén)學(xué)習(xí)，請(qǐng)到http://電腦知識(shí)網(wǎng)）
CSS標(biāo)簽大全(一)
字體屬性：(font)
大小 font-size: x-large;(特大) xx-small;(極小) 一般中文用不到，只要用數(shù)值就可以，單位：PX、PD
樣式 font-style: oblique;(偏斜體) italic;(斜體) normal;(正常)
行高 line-height: normal;(正常) 單位：PX、PD、EM
粗細(xì) font-weight: bold;(粗體) lighter;(細(xì)體) normal;(正常)
變體 font-variant: small-caps;(小型大寫(xiě)字母) normal;(正常)
大小寫(xiě) text-transform: capitalize;(首字母大寫(xiě)) uppercase;(大寫(xiě)) lowercase;(小寫(xiě)) none;(無(wú))
修飾 text-decoration: underline;(下劃線) overline;(上劃線) line-through;(刪除線) blink;(閃爍)
常用字體：(font-family)"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana
背景屬性：(background)
色彩background-color: #FFFFFF;
圖片background-image: url();
重復(fù)background-repeat: no-repeat;
滾動(dòng)background-attachment: fixed;(固定) scroll;(滾動(dòng))
位置background-position: left(水平) top(垂直);
簡(jiǎn)寫(xiě)方法 background:#000 url(..) repeat fixe輔助圖片一律用背景處理d left top;
區(qū)塊屬性： (Block)
字間距l(xiāng)etter-spacing: normal; 數(shù)值
對(duì)劉text-align: justify;(兩端對(duì)齊) left;(左對(duì)齊) right;(右對(duì)齊) center;(居中)
縮進(jìn)text-indent: 數(shù)值px;
垂直對(duì)齊vertical-align: baseline;(基線) sub;(下標(biāo)) super;(下標(biāo)) top; text-top; middle; bottom; text-bottom;
詞間距word-spacing: normal; 數(shù)值
空格white-space: pre;(保留) nowrap;(不換行)
顯示display:block;(塊) inline;(內(nèi)嵌) list-item;(列表項(xiàng)) run-in;(追加部分) compact;(緊湊) marker;(標(biāo)記) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格標(biāo)題)
方框?qū)傩裕?Box)
width:; height:; float:; clear:both; margin:; padding:; 順序：上右下左
邊框?qū)傩裕?(Border)
border-style: dotted(點(diǎn)線); dashed(虛線); solid(實(shí)線); double(雙線); groove(槽線); ridge;(脊?fàn)? inset;(凹陷) outset;
border-wid
th:; 邊框?qū)挾?/p>
border-color:#;
簡(jiǎn)寫(xiě)方法border：width style color;
列表屬性： (List-style)
類(lèi)型list-style-type: disc;(圓點(diǎn)) circle;(圓圈) square;(方塊) decimal;(數(shù)字) lower-roman;(小羅碼數(shù)字) upper-roman; lower-alpha; upper-alpha;
位置list-style-position: outside;(外) inside;
圖像list-style-image: url(..);
定位屬性： (Position)
Position: absolute; relative; static;
visibility: inherit; visible; hidden;
overflow: visible; hidden; scroll; auto;
clip: rect(12px,auto,12px,auto) (裁切) css屬性代碼大全
一 CSS文字屬性：
color : #999999; /*文字顏色*/
font-family : 宋體,sans-serif; /*文字字體*/
font-size : 9pt; /*文字大小*/
font-style:itelic; /*文字斜體*/
font-variant:small-caps; /*小字體*/
letter-spacing : 1pt; /*字間距離*/
line-height : 200%; /*設(shè)置行高*/
font-weight:bold; /*文字粗體*/
vertical-align:sub; /*下標(biāo)字*/
vertical-align:super; /*上標(biāo)字*/
text-decoration:line-through; /*加刪除線*/
text-decoration: overline; /*加頂線*/
text-decoration:underline; /*加下劃線*/
text-decoration:none; /*刪除鏈接下劃線*/
text-transform : capitalize; /*首字大寫(xiě)*/
text-transform : uppercase; /*英文大寫(xiě)*/
text-transform : lowercase; /*英文小寫(xiě)*/
text-align:right; /*文字右對(duì)齊*/
text-align:left; /*文字左對(duì)齊*/
text-align:center; /*文字居中對(duì)齊*/
text-align:justify; /*文字分散對(duì)齊*/
vertical-align屬性
vertical-align:top; /*垂直向上對(duì)齊*/
vertical-align:bottom; /*垂直向下對(duì)齊*/
vertical-align:middle; /*垂直居中對(duì)齊*/
vertical-align:text-top; /*文字垂直向上對(duì)齊*/
vertical-align:text-bottom; /*文字垂直向下對(duì)齊*/
二、CSS邊框空白
padding-top:10px; /*上邊框留空白*/
padding-right:10px; /*右邊框留空白*/
padding-bottom:10px; /*下邊框留空白*/
padding-left:10px; /*左邊框留空白*/
三、CSS符號(hào)屬性：
list-style-type:none; /*不編號(hào)*/
list-st
yle-type:decimal; /*阿拉伯?dāng)?shù)字*/
list-style-type:lower-roman; /*小寫(xiě)羅馬數(shù)字*/
list-style-type:upper-roman; /*大寫(xiě)羅馬數(shù)字*/
list-style-type:lower-alpha; /*小寫(xiě)英文字母*/
list-style-type:upper-alpha; /*大寫(xiě)英文字母*/
list-style-type:disc; /*實(shí)心圓形符號(hào)*/
list-style-type:circle; /*空心圓形符號(hào)*/
list-style-type:square; /*實(shí)心方形符號(hào)*/
list-style-image:url(/dot.gif); /*圖片式符號(hào)*/
list-style-position: outside; /*凸排*/
list-style-position:inside; /*縮進(jìn)*/
四、CSS背景樣式：
background-color:#F5E2EC; /*背景顏色*/
background:transparent; /*透視背景*/
background-image : url(/image/bg.gif); /*背景圖片*/
background-attachment : fixed; /*浮水印固定背景*/
background-repeat : repeat; /*重復(fù)排列-網(wǎng)頁(yè)默認(rèn)*/
background-repeat : no-repeat; /*不重復(fù)排列*/
background-repeat : repeat-x; /*在x軸重復(fù)排列*/
background-repeat : repeat-y; /*在y軸重復(fù)排列*/
指定背景位置
background-position : 90% 90%; /*背景圖片x與y軸的位置*/
background-position : top; /*向上對(duì)齊*/
background-position : buttom; /*向下對(duì)齊*/
background-position : left; /*向左對(duì)齊*/
background-position : right; /*向右對(duì)齊*/
background-position : center; /*居中對(duì)齊*/
五、CSS連接屬性：
a /*所有超鏈接*/
a:link /*超鏈接文字格式*/
a:visited /*瀏覽過(guò)的鏈接文字格式*/
a:active /*按下鏈接的格式*/
a:hover /*鼠標(biāo)轉(zhuǎn)到鏈接*/
鼠標(biāo)光標(biāo)樣式：
鏈接手指 CURSOR: hand
十字體 cursor:crosshair
箭頭朝下 cursor:s-resize
十字箭頭 cursor:move
箭頭朝右 cursor:move
加一問(wèn)號(hào) cursor:help
箭頭朝左 cursor:w-resize
箭頭朝上 cursor:n-resize
箭頭朝右上 cursor:ne-resize
箭頭朝左上 cursor:nw-resize
文字I型 cursor:text
箭頭斜右下 cursor:se-resize
箭頭斜左下 cursor:sw-resize
漏斗 cursor:wait
光標(biāo)圖案(IE6) p {cursor:url("光標(biāo)文件名.cur"),text;}
六、CSS框線一覽表：
border-top : 1px solid #6699cc; /*上框線*/
border-bottom : 1px solid #6699cc;
/*下框線*/
border-left : 1px solid #6699cc; /*左框線*/
border-right : 1px solid #6699cc; /*右框線*/
以上是建議書(shū)寫(xiě)方式,但也可以使用常規(guī)的方式 如下:
border-top-color : #369 /*設(shè)置上框線top顏色*/
border-top-width :1px /*設(shè)置上框線top寬度*/
border-top-style : solid/*設(shè)置上框線top樣式*/
其他框線樣式
solid /*實(shí)線框*/
dotted /*虛線框*/
double /*雙線框*/
groove /*立體內(nèi)凸框*/
ridge /*立體浮雕框*/
inset /*凹框*/
outset /*凸框*/
七、CSS表單運(yùn)用：
文字方塊
按鈕
復(fù)選框
選擇鈕
多行文字方塊
下拉式菜單 選項(xiàng)1選項(xiàng)2
八、CSS邊界樣式：
margin-top:10px; /*上邊界*/
margin-right:10px; /*右邊界值*/
margin-bottom:10px; /*下邊界值*/
margin-left:10px; /*左邊界值*/
CSS 屬性： 字體樣式(Font Style)
序號(hào) 中文說(shuō)明 標(biāo)記語(yǔ)法
1 字體樣式 {font:font-style font-variant font-weight font-size font-family}
2 字體類(lèi)型 {font-family:"字體1","字體2","字體3",...}
3 字體大小 {font-size:數(shù)值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}
4 字體風(fēng)格 {font-style:inherit|italic|normal|oblique}
5 字體粗細(xì) {font-weight:100-900|bold|bolder|lighter|normal;}
6 字體顏色 {color:數(shù)值;}
7 陰影顏色 {text-shadow:16位色值}
8 字體行高 {line-height:數(shù)值|inherit|normal;}
9 字 間 距 {letter-spacing:數(shù)值|inherit|normal}
10 單詞間距 {word-spacing:數(shù)值|inherit|normal}
11 字體變形 {font-variant:inherit|normal|small-cps }
12 英文轉(zhuǎn)換 {text-transform:inherit|none|capitalize|uppercase|lowercase}
13 字體變形 {font-size-adjust:inherit|none}
14 字體 {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}
文本樣式(Text Style)
序號(hào) 中文說(shuō)明 標(biāo)記語(yǔ)法
1
行 間 距 {line-height:數(shù)值|inherit|normal;}
2 文本修飾 {text-decoration:inherit|none|underline|overline|line-through|blink}
3 段首空格 {text-indent:數(shù)值|inherit}
4 水平對(duì)齊 {text-align:left|right|center|justify}
5 垂直對(duì)齊 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}
6 書(shū)寫(xiě)方式 {writing-mode:lr-tb|tb-rl}
背景樣式
序號(hào) 中文說(shuō)明 標(biāo)記語(yǔ)法
1 背景顏色 {background-color:數(shù)值}
2 背景圖片 {background-image: url(URL)|none}
3 背景重復(fù) {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
4 背景固定 {background-attachment:fixed|scroll}
5 背景定位 {background-position:數(shù)值|top|bottom|left|right|center}
6 背影樣式 {background:背景顏色|背景圖象|背景重復(fù)|背景附件|背景位置}
框架樣式(Box Style)
序號(hào) 中文說(shuō)明 標(biāo)記語(yǔ)法
1 邊界留白 {margin:margin-top margin-right margin-bottom margin-left}
2 補(bǔ) 白 {padding:padding-top padding-right padding-bottom padding-left}
3 邊框?qū)挾?{border-width:border-top-width border-right-width border-bottom-width border-left-width}
寬度值： thin|medium|thick|數(shù)值
4 邊框顏色 {border-color:數(shù)值 數(shù)值 數(shù)值 數(shù)值} 數(shù)值：分別代表top、right、bottom、left顏色值
5 邊框風(fēng)格 {border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}
6 邊 框 {border:border-width border-style color}
上 邊 框 {border-top:border-top-width border-style color}
右 邊 框 {border-right:border-right-width border-style color}
下 邊 框 {border-bottom:border-bottom-width border-style color}
左 邊 框 {border-left:border-left-width border-style color}
7 寬 度 {width:長(zhǎng)度|百分比| auto}
8 高 度 {height:數(shù)值|auto}
9 漂 浮 {float:left|right|none}
10 清 除 {clear:none|left|right|both}
分類(lèi)列表
序號(hào) 中文說(shuō)明 標(biāo)記語(yǔ)法
1 控制顯示 {display:none
|block|inline|list-item}
2 控制空白 {white-space:normal|pre|nowarp}
3 符號(hào)列表 {list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}
4 圖形列表 {list-style-image:URL}
5 位置列表 {list-style-position:inside|outside}
6 目錄列表 {list-style:目錄樣式類(lèi)型|目錄樣式位置|url}
7 鼠標(biāo)形狀 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}
word-wrap是控制換行的。使用break-word時(shí)，是將強(qiáng)制換行。中文沒(méi)有任何問(wèn)題，英文語(yǔ)句也沒(méi)問(wèn)題。但是對(duì)于長(zhǎng)串的英文，就不起作用。break-word是控制是否斷詞的。normal是默認(rèn)情況，英文單詞不被拆開(kāi)。break-all，是斷開(kāi)單詞。在單詞到邊界時(shí)，下個(gè)字母自動(dòng)到下一行。主要解決了長(zhǎng)串英文的問(wèn)題。keep-all，是指Chinese, Japanese, and Korean不斷詞。即只用此時(shí)，不用word-wrap，中文就不會(huì)換行了。（英文語(yǔ)句正常。）ie下：使用word-wrap:break- word;所有的都正常。ff下：如這2個(gè)都不用的話，中文不會(huì)出任何問(wèn)題。英文語(yǔ)句也不會(huì)出問(wèn)題。但是，長(zhǎng)串英文會(huì)出問(wèn)題。為了解決長(zhǎng)串英文，一般用 word-wrap:break-word;word-break:break-all;。但是，此方式會(huì)導(dǎo)致，普通的英文語(yǔ)句中的單詞會(huì)被斷開(kāi)（ie下也是）。目前主要的問(wèn)題存在于 長(zhǎng)串英文 和 英文單詞被斷開(kāi)。其實(shí)長(zhǎng)串英文就是一個(gè)比較長(zhǎng)的單詞而已。即英文單詞應(yīng)不應(yīng)該被斷開(kāi)那？那問(wèn)題很明顯了，顯然不應(yīng)該被斷開(kāi)了。對(duì)于長(zhǎng)串英文，就是惡意的東西，自然不用去管了。但是，也要想些辦法，不讓它把容器撐大。用：overflow:auto; ie下，長(zhǎng)串會(huì)自動(dòng)折行。ff下，長(zhǎng)串會(huì)被遮蓋。所以，綜上，最好的方式是word-wrap:break-word; overflow:hidden;而不是word-wrap:break-word;word-break:break-all;。
CSS樣式表代碼布局基礎(chǔ)教程—課程9：鏈接樣式
九、鏈接樣式
使用偽類(lèi)可以設(shè)置鏈接的樣式，比如改變顏色、去掉下劃線等，下面我們來(lái)看一個(gè)練習(xí)；
1、文本編輯器
1）打開(kāi)記事本或 gedit、leafpad 文本編輯器，gedit 在查看菜單里選擇“HTML”；
2）點(diǎn)菜單“文件－打開(kāi)”命令，打開(kāi)自己文件夾里的lx7.html
3）再點(diǎn)菜單“文件－另存為”命令，保存文件名為 “l(fā)x9.html”
2、設(shè)置偽類(lèi)
1）在 head 區(qū)內(nèi)，輸入內(nèi)部樣式表，設(shè)定各個(gè) 的錨標(biāo)記樣式，如下；
2）第一個(gè) a 設(shè)定全局錨點(diǎn)的樣式，用塊顯示、寬度是50像素、背景色是淺綠色，接下來(lái)是錨點(diǎn) a 的成員：
link 是鏈接，設(shè)定頁(yè)面中的鏈接樣式，顏色藍(lán)色，不帶下劃線，
visted 是訪問(wèn)過(guò)的鏈接，設(shè)定樣式為栗色、不帶下劃線，
active 是按下鼠標(biāo)時(shí)的鏈接，設(shè)定顏色為綠色、無(wú)下劃線，
hover 是鼠標(biāo)移過(guò)來(lái)懸停，設(shè)定顏色為紅色、有下劃線，背景色改成黃色，hover 放在其他幾個(gè)成員的后面；
3）保存一下文件，回到自己的文件夾中，打開(kāi) lx9 網(wǎng)頁(yè)，試著用鼠標(biāo)點(diǎn)擊、拖動(dòng)鏈接，看一下效果；
本節(jié)學(xué)習(xí)了設(shè)置鏈接樣式的基本方法，如果你成功地完成了練習(xí)，請(qǐng)繼續(xù)學(xué)習(xí)下一課內(nèi)容；
CSS樣式表代碼布局基礎(chǔ)教程—課程8：內(nèi)部樣式表(一)
八、內(nèi)部樣式表
內(nèi)部樣式表放在網(wǎng)頁(yè)的...區(qū)內(nèi)，集中在一起方便管理，下面我們來(lái)看一個(gè)練習(xí)；
1、文本編輯器
1）打開(kāi)記事本或 gedit、leafpad 文本編輯器，gedit 在查看菜單里選擇“HTML”；
2）點(diǎn)菜單“文件－保存”命令，以“l(fā)x8.html”為文件名，類(lèi)型所有文件，編碼 UTF-8，保存到自己的文件夾；
3）按照基礎(chǔ)02課的方法，輸入、和的內(nèi)容；
2、內(nèi)部樣式表
1）對(duì)系統(tǒng)標(biāo)簽使用樣式，這會(huì)影響所有的這種標(biāo)簽，在 head 區(qū)輸入下面的代碼；
2）第一行是樣式表開(kāi)始，最后是樣式表結(jié)束， 是注釋標(biāo)簽，
首先是對(duì) body 標(biāo)簽設(shè)置樣式，這樣凡是在 body 區(qū)里的內(nèi)容，都會(huì)使用這個(gè)樣式，設(shè)置背景色和文字大小
然后對(duì) span 標(biāo)簽設(shè)置樣式，設(shè)置內(nèi)容的顏色，以后凡是用到 span 的地方，都使用這個(gè)顏色；
3）接著在 body 區(qū)里輸入下面的內(nèi)容；
1）對(duì)系統(tǒng)標(biāo)簽使用樣式，這會(huì)影響所有的這種標(biāo)簽，在 head 區(qū)輸入下面的代碼；
4）保存一下文件，回到自己的文件夾里，打開(kāi) lx8 網(wǎng)頁(yè)，看一下效果；
5）自定義樣式選擇符，除了系統(tǒng)的標(biāo)簽外，也可以自己定義需要的樣式標(biāo)記，在 head 的.樣式表里加入下面的代碼；
.myblue {
color:blue;
前面的點(diǎn)，表示這是一個(gè)通用的樣式，可以重復(fù)使用，如果是 #號(hào)，表示是一個(gè)標(biāo)識(shí)符，是專(zhuān)用唯一的 id，myblue 是自定義的樣式名稱(chēng)；
6）在 body 區(qū)里加入下面的代碼，加在上一行的前面，再加上
標(biāo)簽分成兩段；
7）這兒使用的是 span，里面的 class 套用的是 myblue 樣式，替換了前面設(shè)的樣式，
保存一下文件，到瀏覽器中看看效果；
本節(jié)學(xué)習(xí)了使用內(nèi)部樣式表的基本方法，如果你成功地完成了練習(xí)，請(qǐng)繼續(xù)學(xué)習(xí)下一課內(nèi)容；
CSS樣式表代碼布局基礎(chǔ)教程—課程7：ul列表(一)
七、ul 列表
對(duì)于排列有序的條目，可以使用列表來(lái)實(shí)現(xiàn)，下面我們來(lái)看一個(gè)練習(xí)；
1、文本編輯器
1）打開(kāi)記事本或 gedit、leafpad 文本編輯器，gedit 在查看菜單里選擇“HTML”；
2）點(diǎn)菜單“文件－保存”命令，以“l(fā)x8.html”為文件名，類(lèi)型所有文件，編碼 UTF-8，保存到自己的文件夾；
3）按照基礎(chǔ)02課的方法，輸入、和的內(nèi)容；
2、使用列表（計(jì)算機(jī)基礎(chǔ)知識(shí)，電腦知識(shí)入門(mén)學(xué)習(xí)，請(qǐng)到http://電腦知識(shí)網(wǎng)）
1）在后面接著輸入下面的代碼；
第一課
第二課
第三課
2）前面的
建立一個(gè)列表，里面的各個(gè)
是列表項(xiàng)，各個(gè)列表項(xiàng)排列對(duì)齊縮進(jìn)，前面有一個(gè)圓點(diǎn)列表符號(hào)，
保存一下文件，到自己文件夾里，打開(kāi) lx7 網(wǎng)頁(yè)，看看列表的效果，這兒加了 超級(jí)鏈接；
3）如果要去掉前面的圓點(diǎn)，可以在 ul 的樣式里設(shè)定，前面的縮進(jìn)也可以設(shè)定內(nèi)邊距為 0，輸入下面的代碼；
第一課
第二課
第三課
4）保存一下，再到瀏覽器里看一下，三個(gè)列表都排到了左邊對(duì)齊；
5）如果要排列成橫向水平的菜單樣式，可以在每個(gè)列表項(xiàng)里加上 float 屬性，防止重疊再設(shè)定一個(gè)寬度，代碼如下；
6）保存一下，再到瀏覽器里看一下，三個(gè)列表項(xiàng)都水平排列了；
本節(jié)學(xué)習(xí)了列表的基本使用方法，如果你成功地完成了練習(xí)，請(qǐng)繼續(xù)學(xué)習(xí)下一課內(nèi)容；
CSS樣式表代碼布局基礎(chǔ)教程—課程6：div布局(一)
六、div 布局
默認(rèn) div 占據(jù)一行，第二個(gè) div 到下一行去，怎樣用 div 進(jìn)行分欄布局，我們來(lái)看一個(gè)練習(xí)；
1、文本編輯器
1）打開(kāi)記事本或 gedit、leafpad 文本編輯器，gedit 在查看菜單里選擇“HTML”；
2）點(diǎn)菜單“文件－打開(kāi)”命令，打開(kāi)上次的 lx5 網(wǎng)頁(yè)，再點(diǎn)“文件－另存為”，以“l(fā)x6.html”為文件名，保存到自己的文件夾；
3）按照兩列并排來(lái)進(jìn)行布局；
2、定位布局
1）在下面加一個(gè)
標(biāo)簽，作為主框架，在標(biāo)簽里加入下面的樣式；
2）前面的 id 是這個(gè) div 的標(biāo)識(shí)符，用來(lái)標(biāo)記這個(gè) div 容器，
在里面的樣式里設(shè)置了顏色、邊框、內(nèi)邊距，
設(shè)定了固定寬度 604，高度 202，這個(gè)可以計(jì)算出來(lái)，根據(jù)下面兩列的寬度再加上內(nèi)邊距；
3）修改里面的古詩(shī)的 div 樣式，加上背景色、去掉內(nèi)外邊距，最后加上一個(gè)左浮動(dòng) float:left
4）在這個(gè)后面，再加上另一個(gè) div，樣式相同，里面輸入另一首古詩(shī) ；
5）這兒的 float:left; 讓這個(gè) div 框，跟上一個(gè)框并排左對(duì)齊，而不是到下一行去，
最后再加一個(gè)標(biāo)簽，結(jié)束最外面的大框架；
6）保存一下文件，回到自己文件夾里，打開(kāi) lx6 網(wǎng)頁(yè)看看效果；
本節(jié)學(xué)習(xí)了使用 div 布局的基本方法，如果你成功地完成了練習(xí)，請(qǐng)繼續(xù)學(xué)習(xí)下一課內(nèi)容；
;
1、CSS 概述CSS 指層疊樣式表 (Cascading Style Sheets)樣式定義如何顯示 HTML 元素樣式通常存儲(chǔ)在樣式表中把樣式添加到 HTML 4.0 中，是為了解決內(nèi)容與表現(xiàn)分離的問(wèn)題外部樣式表可以極大提高工作效率外部樣式表通常存儲(chǔ)在 CSS 文件中多個(gè)樣式定義可層疊為一
2、HTML 標(biāo)簽原本被設(shè)計(jì)為用于定義文檔內(nèi)容。通過(guò)使用
,
,
這樣的標(biāo)簽，HTML 當(dāng)初被指望用來(lái)表達(dá)“這是標(biāo)題”、“這是段落”、“這是表格”之類(lèi)的信息。而文檔的布局被期望由瀏覽器來(lái)完成，而不使用任何的格式化標(biāo)簽。由于兩種主要的瀏覽器（Netscape 和 Internet Explorer）不斷地將新的 HTML 標(biāo)簽和屬性（比如字體標(biāo)簽和顏色屬性）添加到 HTML 規(guī)范之中，因此創(chuàng)建文檔內(nèi)容清晰地獨(dú)立于文檔表現(xiàn)層的站點(diǎn)變得越來(lái)越困難。為了解決這個(gè)問(wèn)題，萬(wàn)維網(wǎng)聯(lián)盟（W3C），這個(gè)非營(yíng)利的標(biāo)準(zhǔn)化聯(lián)盟，肩負(fù)起了 HTML 標(biāo)準(zhǔn)化的使命，并在 HTML 4.0 之外創(chuàng)造出 STYLES（樣式）。所有的主流瀏覽器均支持層疊樣式表。樣式表極大地提高了工作效率
3、樣式表定義如何顯示 HTML 元素，諸如 HTML 3.2 的樣式中的字體標(biāo)簽和顏色屬性通常被保存在外部的 .css 文件中。通過(guò)僅僅編輯一個(gè)簡(jiǎn)單的 CSS 文檔，外部樣式表使你有能力同時(shí)改變站點(diǎn)中所有頁(yè)面布局的外觀。
4、由于允許同時(shí)控制多重頁(yè)面的樣式和布局，CSS 可以稱(chēng)得上 WEB 設(shè)計(jì)領(lǐng)域的一個(gè)突破。作為網(wǎng)站開(kāi)發(fā)者，你可以為每個(gè) HTML 元素定義樣式，并將之應(yīng)用于你希望的任意多的頁(yè)面中。如需進(jìn)行全局變換，只需簡(jiǎn)單地改變樣式，然后網(wǎng)站中的所有元素均會(huì)被自動(dòng)地更新。
5、多重樣式將層疊為一個(gè) 樣式表允許以多種方式規(guī)定樣式信息。樣式可以被規(guī)定于單個(gè)的 HTML 元素中，在 HTML 頁(yè)的頭元素中，或在一個(gè)外部的 CSS 文件中。甚至可以在一個(gè)單一的 HTML 文檔內(nèi)部引用多個(gè)外部樣式表。
6、層疊次序，當(dāng)同一個(gè)HTML元素被不止一個(gè)樣式所定義時(shí)，會(huì)使用哪個(gè)樣式呢，一般而言，所有的樣式會(huì)根據(jù)下面的規(guī)則層疊于一個(gè)新的虛擬樣式表中，其中數(shù)字 4 擁有最高的優(yōu)先權(quán)。瀏覽器缺省設(shè)置外部樣式表內(nèi)部樣式表（位于 head 標(biāo)簽內(nèi)部）內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）因此，內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）擁有最高的優(yōu)先權(quán)，這意味著它將優(yōu)先于以下的樣式聲明：head 標(biāo)簽中的樣式聲明，外部樣式表中的樣式聲明，或者瀏覽器中的樣式聲明（缺省值）。 小玉玉 10-11 17:15 優(yōu)質(zhì)作者 關(guān)注 為你推薦 pdf如何轉(zhuǎn)換成word 換成word的步驟 什么的神州組詞 神州介紹 特種兵的電視劇有哪些 每部都是經(jīng)典 美是理念的感性顯現(xiàn)這么理解 美是理念的感性顯現(xiàn)是什么意思 碧綠碧綠類(lèi)似的詞語(yǔ) abab式的詞語(yǔ)大全 王子變青蛙插曲 插曲有哪些 吃什么能瘦臉 給大家推薦這三種 太陽(yáng)能熱水器清洗方法 清洗熱水器方法 羽毛球賽制 羽毛球賽制簡(jiǎn)述 銀行卡掛失怎么做 操作步驟 什么是順時(shí)針 給大家介紹一下 污水處理流程 污水處理流程簡(jiǎn)述 探險(xiǎn)家出裝 探險(xiǎn)家出裝推薦 淘寶開(kāi)店教程 怎么開(kāi)店 出納的職責(zé) 出納的職責(zé)介紹 電車(chē)之狼怎么玩 如何玩電車(chē)之狼 電腦的配置怎么查看 查看電腦配置的方法 南京兩日游攻略 南京兩日游地點(diǎn)選擇 兩小兒辯日停頓方法 怎么停頓才正確 清明節(jié)祭祀注意事項(xiàng)是什么 清明節(jié)祭祀禁忌 桌面不顯示怎么辦 桌面不顯示解決辦法 鋼琴入門(mén)教程 鋼琴入門(mén)教程介紹 五子棋教程 五子棋怎么玩 女孩子最想要什么 大家來(lái)說(shuō)說(shuō)吧 什么是量詞 量詞專(zhuān)業(yè)解釋 關(guān)于大熊貓的資料 大熊貓的資料 大學(xué)活動(dòng)策劃怎么寫(xiě) 大學(xué)活動(dòng)策劃基本寫(xiě)法 移動(dòng)硬盤(pán)不顯示怎么辦 要怎么設(shè)置 limbo攻略 怎么過(guò)limbo 怎樣美白皮膚 美白皮膚的方法 新手開(kāi)網(wǎng)店方法 新手怎樣開(kāi)網(wǎng)店 搜索引擎的工作原理 搜索引擎的工作原理簡(jiǎn)述 初中英語(yǔ)教學(xué)反思怎么寫(xiě) 初中英語(yǔ)教學(xué)反思示例 小說(shuō)人物名字怎么取 小說(shuō)人物取名字方法 我的世界鐵砧是什么 來(lái)這里了解下詳情 什么的微笑 列舉什么的微笑及釋義 beg的過(guò)去式 大家可以學(xué)習(xí)一下 二年級(jí)清明節(jié)怎么畫(huà) 清明節(jié)怎么表達(dá) 安陵容怎么死的 安陵容死因簡(jiǎn)述 支付寶怎么開(kāi)通 開(kāi)通的辦法 制作gif的方法 如何制作gif lol怎么截圖 LOL是什么游戲 科技公司起名方法 科技公司怎么起名 新年適合發(fā)朋友圈的句子 適合新年發(fā)朋友圈的句子 行李箱密碼怎么設(shè)置 設(shè)置的辦法 仙劍奇?zhèn)b傳二攻略 如何輕松過(guò)關(guān) 空氣能采暖嗎 她是怎么發(fā)展起來(lái)的 女寶寶名字怎么取 這幾個(gè)名字都可借鑒 取消開(kāi)機(jī)密碼怎么設(shè)置 如何取消電腦開(kāi)機(jī)密碼 我的世界紅石自動(dòng)門(mén)怎么做 我的世界紅石自動(dòng)門(mén)制作攻略
自定義CSS的三中方方式：
一、行間樣式表
行間樣式表是指將CSS樣式編碼寫(xiě)在HTML標(biāo)簽中，格式如下
h1?style="font-size:12px;color:#000FFF"
我的CSS樣式。
/h1
行間樣式表由HTML元素的HTML元素的style支持，只需將CSS代碼用分號(hào)隔開(kāi)寫(xiě)在style=""之中。這是最基本的形式，但是它沒(méi)有實(shí)現(xiàn)表現(xiàn)與內(nèi)容分離且不能靈活的控制多個(gè)頁(yè)面所以我們只是在調(diào)試CSS代碼的時(shí)候使用。
二、內(nèi)部樣式表
內(nèi)部樣式表與行間樣式表相似都是把CSS代碼寫(xiě)在HTML頁(yè)面中，稍微不同的是前者可以將樣式表放在一個(gè)固定的位置，格式如下
html
head
title內(nèi)部樣式表/title
style?type="text/css"
h1{font-size:12px;
color:#000FFF
}
/style
/head
body
h1我的CSS樣式。/h1
/body
/html
內(nèi)部樣式表編碼是初級(jí)的應(yīng)用形式，不能達(dá)到跨頁(yè)面使用所以不適合使用。
三、外部樣式表
外部樣式表是CSS應(yīng)用中最好的一中形式，它將CSS樣式代碼單獨(dú)放在一個(gè)外部文件中，再由網(wǎng)頁(yè)進(jìn)行調(diào)用。多個(gè)網(wǎng)頁(yè)可以調(diào)用一個(gè)樣式文件表，這樣能夠?qū)崿F(xiàn)代碼的最大限度的重用及網(wǎng)站文件的最優(yōu)化配置，格式如下
html
head
title外部樣式表/title
link?rel="stylesheet"?rev="stylesheet"?href="style.css"
/head
body
h1我的CSS樣式。/h1
/body
/html
在style.css中的代碼為
h1{font-size:12px;
color:#000FFF
}
我們?cè)趆ead中使用了link標(biāo)簽來(lái)調(diào)用外部樣式表文件。將link指定為stylesheet方式，并使用了href="style.css"指明樣式表文件的路徑便可將該頁(yè)面應(yīng)用到在style.css中定義的樣式。
重慶分公司
重慶分公司
