建站
咨詢
售后
建站咨詢
新聞中心
CSS樣式表代碼布局基礎教程
CSS樣式表代碼布局基礎教程
創(chuàng)新互聯(lián)公司長期為數(shù)千家客戶提供的網(wǎng)站建設服務，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為中山企業(yè)提供專業(yè)的成都網(wǎng)站設計、成都做網(wǎng)站，中山網(wǎng)站改版等技術(shù)服務。擁有10余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
CSS樣式表代碼布局基礎教程—課程10：外部樣式表(一)
十、外部樣式表
外部樣式表是把各種樣式單獨存在一個文件里，供其他多個網(wǎng)頁調(diào)用，下面我們來看一個練習；
1、文本編輯器
1）打開記事本或 gedit、leafpad 文本編輯器，gedit 在查看菜單里選擇“HTML”；
2）點菜單“文件－保存”命令，以“l(fā)x10.html”為文件名，類型所有文件，編碼 UTF-8，保存到自己的文件夾；
3）按照基礎02課的方法，輸入、和的內(nèi)容；
2、外部樣式表
1）點菜單“文件－新建”，新建一個空白文檔，保存文件名為 style.css ，位置跟 lx10 放一起，這是一個單獨的文件；
2）在里面輸入下面的內(nèi)容；
/* by TeliuTe */
body {
background-color: #ccffff;
font-size:1.2em;
span {
color:#800000;
.myblue {
color:blue;
3）第一行 /* ... */ 是注釋，注明作者版權(quán)用途等，根據(jù)自己的需要，
下面的內(nèi)容跟內(nèi)部樣式表相同，各個標簽和它的樣式，保存一下文件；
4）回到 lx10.html 文檔中，在 head 區(qū)內(nèi)加上下面一行外部引用標識；
5）然后在 body 區(qū)內(nèi)，輸入下面的內(nèi)容；
1）點菜單“文件－新建”，新建一個空白文檔，保存文件名為 style.css ，位置跟 lx10 放一起，這是一個單獨的文件；
6）保存一下文件，回到自己文件夾中，打開 lx10 網(wǎng)頁，看一下效果；
7）在多個網(wǎng)頁具有相同樣式時，使用外部樣式表可以節(jié)省空間和減小網(wǎng)頁大?。?/p>
本節(jié)學習了外部樣式表的使用方法，你成功地完成了本教程，歡迎繼續(xù)學習本站的其他課程！
本教程由86團學校TeliuTe制作
（計算機基礎知識，電腦知識入門學習，請到http://電腦知識網(wǎng)）
CSS標簽大全(一)
字體屬性：(font)
大小 font-size: x-large;(特大) xx-small;(極小) 一般中文用不到，只要用數(shù)值就可以，單位：PX、PD
樣式 font-style: oblique;(偏斜體) italic;(斜體) normal;(正常)
行高 line-height: normal;(正常) 單位：PX、PD、EM
粗細 font-weight: bold;(粗體) lighter;(細體) normal;(正常)
變體 font-variant: small-caps;(小型大寫字母) normal;(正常)
大小寫 text-transform: capitalize;(首字母大寫) uppercase;(大寫) lowercase;(小寫) none;(無)
修飾 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();
重復background-repeat: no-repeat;
滾動background-attachment: fixed;(固定) scroll;(滾動)
位置background-position: left(水平) top(垂直);
簡寫方法 background:#000 url(..) repeat fixe輔助圖片一律用背景處理d left top;
區(qū)塊屬性： (Block)
字間距l(xiāng)etter-spacing: normal; 數(shù)值
對劉text-align: justify;(兩端對齊) left;(左對齊) right;(右對齊) center;(居中)
縮進text-indent: 數(shù)值px;
垂直對齊vertical-align: baseline;(基線) sub;(下標) super;(下標) top; text-top; middle; bottom; text-bottom;
詞間距word-spacing: normal; 數(shù)值
空格white-space: pre;(保留) nowrap;(不換行)
顯示display:block;(塊) inline;(內(nèi)嵌) list-item;(列表項) run-in;(追加部分) compact;(緊湊) marker;(標記) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格標題)
方框?qū)傩裕?Box)
width:; height:; float:; clear:both; margin:; padding:; 順序：上右下左
邊框?qū)傩裕?(Border)
border-style: dotted(點線); dashed(虛線); solid(實線); double(雙線); groove(槽線); ridge;(脊狀) inset;(凹陷) outset;
border-wid
th:; 邊框?qū)挾?/p>
border-color:#;
簡寫方法border：width style color;
列表屬性： (List-style)
類型list-style-type: disc;(圓點) 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%; /*設置行高*/
font-weight:bold; /*文字粗體*/
vertical-align:sub; /*下標字*/
vertical-align:super; /*上標字*/
text-decoration:line-through; /*加刪除線*/
text-decoration: overline; /*加頂線*/
text-decoration:underline; /*加下劃線*/
text-decoration:none; /*刪除鏈接下劃線*/
text-transform : capitalize; /*首字大寫*/
text-transform : uppercase; /*英文大寫*/
text-transform : lowercase; /*英文小寫*/
text-align:right; /*文字右對齊*/
text-align:left; /*文字左對齊*/
text-align:center; /*文字居中對齊*/
text-align:justify; /*文字分散對齊*/
vertical-align屬性
vertical-align:top; /*垂直向上對齊*/
vertical-align:bottom; /*垂直向下對齊*/
vertical-align:middle; /*垂直居中對齊*/
vertical-align:text-top; /*文字垂直向上對齊*/
vertical-align:text-bottom; /*文字垂直向下對齊*/
二、CSS邊框空白
padding-top:10px; /*上邊框留空白*/
padding-right:10px; /*右邊框留空白*/
padding-bottom:10px; /*下邊框留空白*/
padding-left:10px; /*左邊框留空白*/
三、CSS符號屬性：
list-style-type:none; /*不編號*/
list-st
yle-type:decimal; /*阿拉伯數(shù)字*/
list-style-type:lower-roman; /*小寫羅馬數(shù)字*/
list-style-type:upper-roman; /*大寫羅馬數(shù)字*/
list-style-type:lower-alpha; /*小寫英文字母*/
list-style-type:upper-alpha; /*大寫英文字母*/
list-style-type:disc; /*實心圓形符號*/
list-style-type:circle; /*空心圓形符號*/
list-style-type:square; /*實心方形符號*/
list-style-image:url(/dot.gif); /*圖片式符號*/
list-style-position: outside; /*凸排*/
list-style-position:inside; /*縮進*/
四、CSS背景樣式：
background-color:#F5E2EC; /*背景顏色*/
background:transparent; /*透視背景*/
background-image : url(/image/bg.gif); /*背景圖片*/
background-attachment : fixed; /*浮水印固定背景*/
background-repeat : repeat; /*重復排列-網(wǎng)頁默認*/
background-repeat : no-repeat; /*不重復排列*/
background-repeat : repeat-x; /*在x軸重復排列*/
background-repeat : repeat-y; /*在y軸重復排列*/
指定背景位置
background-position : 90% 90%; /*背景圖片x與y軸的位置*/
background-position : top; /*向上對齊*/
background-position : buttom; /*向下對齊*/
background-position : left; /*向左對齊*/
background-position : right; /*向右對齊*/
background-position : center; /*居中對齊*/
五、CSS連接屬性：
a /*所有超鏈接*/
a:link /*超鏈接文字格式*/
a:visited /*瀏覽過的鏈接文字格式*/
a:active /*按下鏈接的格式*/
a:hover /*鼠標轉(zhuǎn)到鏈接*/
鼠標光標樣式：
鏈接手指 CURSOR: hand
十字體 cursor:crosshair
箭頭朝下 cursor:s-resize
十字箭頭 cursor:move
箭頭朝右 cursor:move
加一問號 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
光標圖案(IE6) p {cursor:url("光標文件名.cur"),text;}
六、CSS框線一覽表：
border-top : 1px solid #6699cc; /*上框線*/
border-bottom : 1px solid #6699cc;
/*下框線*/
border-left : 1px solid #6699cc; /*左框線*/
border-right : 1px solid #6699cc; /*右框線*/
以上是建議書寫方式,但也可以使用常規(guī)的方式 如下:
border-top-color : #369 /*設置上框線top顏色*/
border-top-width :1px /*設置上框線top寬度*/
border-top-style : solid/*設置上框線top樣式*/
其他框線樣式
solid /*實線框*/
dotted /*虛線框*/
double /*雙線框*/
groove /*立體內(nèi)凸框*/
ridge /*立體浮雕框*/
inset /*凹框*/
outset /*凸框*/
七、CSS表單運用：
文字方塊
按鈕
復選框
選擇鈕
多行文字方塊
下拉式菜單 選項1選項2
八、CSS邊界樣式：
margin-top:10px; /*上邊界*/
margin-right:10px; /*右邊界值*/
margin-bottom:10px; /*下邊界值*/
margin-left:10px; /*左邊界值*/
CSS 屬性： 字體樣式(Font Style)
序號 中文說明 標記語法
1 字體樣式 {font:font-style font-variant font-weight font-size font-family}
2 字體類型 {font-family:"字體1","字體2","字體3",...}
3 字體大小 {font-size:數(shù)值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}
4 字體風格 {font-style:inherit|italic|normal|oblique}
5 字體粗細 {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)
序號 中文說明 標記語法
1
行 間 距 {line-height:數(shù)值|inherit|normal;}
2 文本修飾 {text-decoration:inherit|none|underline|overline|line-through|blink}
3 段首空格 {text-indent:數(shù)值|inherit}
4 水平對齊 {text-align:left|right|center|justify}
5 垂直對齊 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}
6 書寫方式 {writing-mode:lr-tb|tb-rl}
背景樣式
序號 中文說明 標記語法
1 背景顏色 {background-color:數(shù)值}
2 背景圖片 {background-image: url(URL)|none}
3 背景重復 {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:背景顏色|背景圖象|背景重復|背景附件|背景位置}
框架樣式(Box Style)
序號 中文說明 標記語法
1 邊界留白 {margin:margin-top margin-right margin-bottom margin-left}
2 補 白 {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 邊框風格 {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:長度|百分比| auto}
8 高 度 {height:數(shù)值|auto}
9 漂 浮 {float:left|right|none}
10 清 除 {clear:none|left|right|both}
分類列表
序號 中文說明 標記語法
1 控制顯示 {display:none
|block|inline|list-item}
2 控制空白 {white-space:normal|pre|nowarp}
3 符號列表 {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:目錄樣式類型|目錄樣式位置|url}
7 鼠標形狀 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}
word-wrap是控制換行的。使用break-word時，是將強制換行。中文沒有任何問題，英文語句也沒問題。但是對于長串的英文，就不起作用。break-word是控制是否斷詞的。normal是默認情況，英文單詞不被拆開。break-all，是斷開單詞。在單詞到邊界時，下個字母自動到下一行。主要解決了長串英文的問題。keep-all，是指Chinese, Japanese, and Korean不斷詞。即只用此時，不用word-wrap，中文就不會換行了。（英文語句正常。）ie下：使用word-wrap:break- word;所有的都正常。ff下：如這2個都不用的話，中文不會出任何問題。英文語句也不會出問題。但是，長串英文會出問題。為了解決長串英文，一般用 word-wrap:break-word;word-break:break-all;。但是，此方式會導致，普通的英文語句中的單詞會被斷開（ie下也是）。目前主要的問題存在于 長串英文 和 英文單詞被斷開。其實長串英文就是一個比較長的單詞而已。即英文單詞應不應該被斷開那？那問題很明顯了，顯然不應該被斷開了。對于長串英文，就是惡意的東西，自然不用去管了。但是，也要想些辦法，不讓它把容器撐大。用：overflow:auto; ie下，長串會自動折行。ff下，長串會被遮蓋。所以，綜上，最好的方式是word-wrap:break-word; overflow:hidden;而不是word-wrap:break-word;word-break:break-all;。
CSS樣式表代碼布局基礎教程—課程9：鏈接樣式
九、鏈接樣式
使用偽類可以設置鏈接的樣式，比如改變顏色、去掉下劃線等，下面我們來看一個練習；
1、文本編輯器
1）打開記事本或 gedit、leafpad 文本編輯器，gedit 在查看菜單里選擇“HTML”；
2）點菜單“文件－打開”命令，打開自己文件夾里的lx7.html
3）再點菜單“文件－另存為”命令，保存文件名為 “l(fā)x9.html”
2、設置偽類
1）在 head 區(qū)內(nèi)，輸入內(nèi)部樣式表，設定各個 的錨標記樣式，如下；
2）第一個 a 設定全局錨點的樣式，用塊顯示、寬度是50像素、背景色是淺綠色，接下來是錨點 a 的成員：
link 是鏈接，設定頁面中的鏈接樣式，顏色藍色，不帶下劃線，
visted 是訪問過的鏈接，設定樣式為栗色、不帶下劃線，
active 是按下鼠標時的鏈接，設定顏色為綠色、無下劃線，
hover 是鼠標移過來懸停，設定顏色為紅色、有下劃線，背景色改成黃色，hover 放在其他幾個成員的后面；
3）保存一下文件，回到自己的文件夾中，打開 lx9 網(wǎng)頁，試著用鼠標點擊、拖動鏈接，看一下效果；
本節(jié)學習了設置鏈接樣式的基本方法，如果你成功地完成了練習，請繼續(xù)學習下一課內(nèi)容；
CSS樣式表代碼布局基礎教程—課程8：內(nèi)部樣式表(一)
八、內(nèi)部樣式表
內(nèi)部樣式表放在網(wǎng)頁的...區(qū)內(nèi)，集中在一起方便管理，下面我們來看一個練習；
1、文本編輯器
1）打開記事本或 gedit、leafpad 文本編輯器，gedit 在查看菜單里選擇“HTML”；
2）點菜單“文件－保存”命令，以“l(fā)x8.html”為文件名，類型所有文件，編碼 UTF-8，保存到自己的文件夾；
3）按照基礎02課的方法，輸入、和的內(nèi)容；
2、內(nèi)部樣式表
1）對系統(tǒng)標簽使用樣式，這會影響所有的這種標簽，在 head 區(qū)輸入下面的代碼；
2）第一行是樣式表開始，最后是樣式表結(jié)束， 是注釋標簽，
首先是對 body 標簽設置樣式，這樣凡是在 body 區(qū)里的內(nèi)容，都會使用這個樣式，設置背景色和文字大小
然后對 span 標簽設置樣式，設置內(nèi)容的顏色，以后凡是用到 span 的地方，都使用這個顏色；
3）接著在 body 區(qū)里輸入下面的內(nèi)容；
1）對系統(tǒng)標簽使用樣式，這會影響所有的這種標簽，在 head 區(qū)輸入下面的代碼；
4）保存一下文件，回到自己的文件夾里，打開 lx8 網(wǎng)頁，看一下效果；
5）自定義樣式選擇符，除了系統(tǒng)的標簽外，也可以自己定義需要的樣式標記，在 head 的.樣式表里加入下面的代碼；
.myblue {
color:blue;
前面的點，表示這是一個通用的樣式，可以重復使用，如果是 #號，表示是一個標識符，是專用唯一的 id，myblue 是自定義的樣式名稱；
6）在 body 區(qū)里加入下面的代碼，加在上一行的前面，再加上
標簽分成兩段；
7）這兒使用的是 span，里面的 class 套用的是 myblue 樣式，替換了前面設的樣式，
保存一下文件，到瀏覽器中看看效果；
本節(jié)學習了使用內(nèi)部樣式表的基本方法，如果你成功地完成了練習，請繼續(xù)學習下一課內(nèi)容；
CSS樣式表代碼布局基礎教程—課程7：ul列表(一)
七、ul 列表
對于排列有序的條目，可以使用列表來實現(xiàn)，下面我們來看一個練習；
1、文本編輯器
1）打開記事本或 gedit、leafpad 文本編輯器，gedit 在查看菜單里選擇“HTML”；
2）點菜單“文件－保存”命令，以“l(fā)x8.html”為文件名，類型所有文件，編碼 UTF-8，保存到自己的文件夾；
3）按照基礎02課的方法，輸入、和的內(nèi)容；
2、使用列表（計算機基礎知識，電腦知識入門學習，請到http://電腦知識網(wǎng)）
1）在后面接著輸入下面的代碼；
第一課
第二課
第三課
2）前面的
建立一個列表，里面的各個
是列表項，各個列表項排列對齊縮進，前面有一個圓點列表符號，
保存一下文件，到自己文件夾里，打開 lx7 網(wǎng)頁，看看列表的效果，這兒加了 超級鏈接；
3）如果要去掉前面的圓點，可以在 ul 的樣式里設定，前面的縮進也可以設定內(nèi)邊距為 0，輸入下面的代碼；
第一課
第二課
第三課
4）保存一下，再到瀏覽器里看一下，三個列表都排到了左邊對齊；
5）如果要排列成橫向水平的菜單樣式，可以在每個列表項里加上 float 屬性，防止重疊再設定一個寬度，代碼如下；
6）保存一下，再到瀏覽器里看一下，三個列表項都水平排列了；
本節(jié)學習了列表的基本使用方法，如果你成功地完成了練習，請繼續(xù)學習下一課內(nèi)容；
CSS樣式表代碼布局基礎教程—課程6：div布局(一)
六、div 布局
默認 div 占據(jù)一行，第二個 div 到下一行去，怎樣用 div 進行分欄布局，我們來看一個練習；
1、文本編輯器
1）打開記事本或 gedit、leafpad 文本編輯器，gedit 在查看菜單里選擇“HTML”；
2）點菜單“文件－打開”命令，打開上次的 lx5 網(wǎng)頁，再點“文件－另存為”，以“l(fā)x6.html”為文件名，保存到自己的文件夾；
3）按照兩列并排來進行布局；
2、定位布局
1）在下面加一個
標簽，作為主框架，在標簽里加入下面的樣式；
2）前面的 id 是這個 div 的標識符，用來標記這個 div 容器，
在里面的樣式里設置了顏色、邊框、內(nèi)邊距，
設定了固定寬度 604，高度 202，這個可以計算出來，根據(jù)下面兩列的寬度再加上內(nèi)邊距；
3）修改里面的古詩的 div 樣式，加上背景色、去掉內(nèi)外邊距，最后加上一個左浮動 float:left
4）在這個后面，再加上另一個 div，樣式相同，里面輸入另一首古詩 ；
5）這兒的 float:left; 讓這個 div 框，跟上一個框并排左對齊，而不是到下一行去，
最后再加一個標簽，結(jié)束最外面的大框架；
6）保存一下文件，回到自己文件夾里，打開 lx6 網(wǎng)頁看看效果；
本節(jié)學習了使用 div 布局的基本方法，如果你成功地完成了練習，請繼續(xù)學習下一課內(nèi)容；
;
定義css樣式的語法結(jié)構(gòu)
什么是CSS?
中文翻譯為樣式表! 它的作用簡單的說：就是可以使你在同一頁面里使用不同的超鏈接樣式。
更神奇的是，用CSS，僅僅改變一個文件就可以改變數(shù)百個網(wǎng)頁的外觀......個性化的表現(xiàn)而不損失訪問者......所有這些都因為網(wǎng)頁樣式表的強大和靈活特性。
讓我們開始吧！
CSS 速成
層疊樣式表的基礎入門。
CSS 結(jié)構(gòu)和規(guī)則
各種選擇符、偽類、偽元素和層疊順序的入門。
CSS 屬性
各種層疊樣式表級別一有效的屬性的描述。
將樣式表加入到HTML中
各種將樣式表加入到HTML文本中的方法。
依賴樣式表
怎樣會是濫用樣式表和使你的網(wǎng)頁難以處理。
CSS 參考
連接到介紹CSS的規(guī)范和其它方面的文章。
CSS 速成
------------------------------------------------------------------------------
一個樣式表由樣式規(guī)則組成, 以告訴瀏覽器怎樣去呈現(xiàn)一個文檔. 有很多將樣式規(guī)則加入到你的HTML文檔中的方法, 但最簡單的啟動方法是使用HTML的STYLE組件. 這個元素放置于文檔的HEAD部分, 包含網(wǎng)頁的樣式規(guī)則.
要注意到盡管STYLE元素是試驗樣式表的好方法, 它具有某些在用戶使用這種方法之前應該考慮的缺點. 不同方法的優(yōu)點和缺點在將樣式表加入到HTML中部分中有討論。
每個規(guī)則的組成包括一個選擇符--通常是一個HTML的元素, 例如BODY, P, 或EM--和該選擇符所接受的樣式.
有很多的屬性可以用于定義一個元素. 每個屬性帶一個值, 共同地描述選擇符應該如何呈現(xiàn).
樣式規(guī)則組成如下:
選擇符 { 屬性: 值 }
單一選擇符的復合樣式聲明應該用分號隔開:
選擇符 { 屬性1: 值1; 屬性2: 值2 }
以下是一段定義了H1和H2元素的顏色和字體大小屬性:
HEAD
TITLECSS例子/TITLE
STYLE TYPE="text/css"
H1 { font-size: x-large; color: red }
H2 { font-size: large; color: blue }
/STYLE
/HEAD
上述的樣式表告訴瀏覽器用加大、紅色字體去顯示一級標題, 用大、藍色字體去顯示二級標題. CSS1 規(guī)格正式地定義了所有的有效屬性和值. 屬性和值在本網(wǎng)站的CSS 屬性部分也給出了.
本教程專門介紹了CSS非?；A的知識, 以提供足夠的信息去讓你試驗自己的樣式. 要獲得CSS更深入的知識, 閱讀繼續(xù)閱讀以下部分:
CSS 結(jié)構(gòu)和規(guī)則
CSS 屬性
將樣式表加入到HTML中
CSS 結(jié)構(gòu)和規(guī)則
基本語法
規(guī)則
選擇符
任何HTML元素都可以是一個CSS1的選擇符。選擇符僅僅是指向特別樣式的元素。例如，
P { text-indent: 3em }
當中的選擇符是P。
類選擇符
單一個選擇符能有不同的CLASS(類)，因而允許同一元素有不同樣式。例如，一個網(wǎng)頁制作者也許希望視其語言而定，用不同的顏色顯示代碼 :
code.html { color: #191970 }
code.css { color: #4b0082 }
以上的例子建立了兩個類，css和html，供HTML的CODE元素使用。CLASS屬性是用于在HTML中以指明元素的類，例如，
P CLASS=warning每個選擇符只允許有一個類。
例如，code.html.proprietary是無效的。/p
類的聲明也可以無須相關(guān)的元素:
.note { font-size: small }
在這個例子，名為note的類可以被用于任何元素。
一個良好的習慣是在命名類的時候，根據(jù)它們的功能而不是根據(jù)它們的外觀。上述例子中的note類也可以命名為small，但如果網(wǎng)頁制作者決定改變這個類的樣式，使得它不再是小字體的話，那么這個名字就變得毫無意義了。
ID 選擇符
ID 選擇符個別地定義每個元素的成分。這種選擇符應該盡量少用，因為他具有一定的局限。一個ID選擇符的指定要有指示符"#"在名字前面。例如，ID選擇符可以指定如下:
#svp94O { text-indent: 3em }
這點可以參考HTML中的ID屬性:
P ID=svp94O文本縮進3em/P
關(guān)聯(lián)選擇符
關(guān)聯(lián)選擇符只不過是一個用空格隔開的兩個或更多的單一選擇符組成的字符串。這些選擇符可以指定一般屬性，而且因為層疊順序的規(guī)則，它們的優(yōu)先權(quán)比單一的選擇符大。例如，以下的上下文選擇符
P EM { background: yellow }
是P EM。這個值表示段落中的強調(diào)文本會是黃色背景；而標題的強調(diào)文本則不受影響。
聲明
屬性
一個屬性被指定到選擇符是為了使用它的樣式。屬性的例子包括顏色、邊界和字體。
值
聲明的值是一個屬性接受的指定。例如，屬性顏色能接受值red。
組合
為了減少樣式表的重復聲明，組合的選擇符聲明是允許的。例如，文檔中所有的標題可以通過組合給出相同的聲明:
H1, H2, H3, H4, H5, H6 {
color: red;
font-family: sans-serif }
繼承
實際上，所有在選擇符中嵌套的選擇符都會繼承外層選擇符指定的屬性值，除非另外更改。例如，一個BODY定義了的顏色值也會應用到段落的文本中。
有些情況是內(nèi)部選擇符不繼承周圍的選擇符的值，但理論上這些都是特殊的。例如，上邊界屬性是不會繼承的；直覺上，一個段落不會有同文檔BODY一樣的上邊界值。
注解
樣式表里面的注解使用C語言編程中一樣的約定方法去指定。CSS1注解的例子如以下格式:
/* COMMENTS CANNOT BE NESTED */
偽類和偽元素
偽類和偽元素是特殊的類和元素，能自動地被支持CSS的瀏覽器所識別。偽類區(qū)別開不同種類的元素(例如，visited links(已訪問的連接)和active links(可激活連接)描述了兩個定位錨(anchors)的類型)。偽元素指元素的一部分，例如段落的第一個字母。
偽類或偽元素規(guī)則的形式如
選擇符:偽類 { 屬性: 值 }
或
選擇符:偽元素 { 屬性: 值 }
偽類和偽元素不應用HTML的CLASS屬性來指定。一般的類可以與偽類和偽元素一起使用，如下:
選擇符.類: 偽類 { 屬性: 值 }
或
選擇符.類: 偽元素 { 屬性: 值 }
定位錨偽類
偽類可以指定A元素以不同的方式顯示連接(links)、已訪問連接(visited links)和可激活連接(active links)。定位錨元素可給出偽類link、visited或active。一個已訪問連接可以定義為不同顏色的顯示，甚至不同字體大小和風格。
一個有趣的效果是使當前(或“可激活”)連接以不同顏色、更大的字體顯示。然后，當網(wǎng)頁的已訪問連接被重選時，又以不同顏色、更小字體顯示。這個樣式表的示例如下:
A:link { color: red }
A:active { color: blue; font-size: 125% }
A:visited { color: green; font-size: 85% }
首行偽元素
通常在報紙上的文章，例如Wall Street Journal中的，文本的首行都會以粗印體而且全部大寫地展示。CSS1包括了這個功能，將其作為一個偽元素。首行偽元素可以用于任何塊級元素(例如P、H1等等)。以下是一個首行偽元素的例子:
P:first-line {
font-variant: small-caps;
font-weight: bold }
首個字母偽元素
首個字母偽元素用于加大(drop caps)和其他效果。含有已指定值選擇符的文本的首個字母會按照指定的值展示。一個首個字母偽元素可以用于任何塊級元素。例如:
P:first-letter { font-size: 300%; float: left }
會比普通字體加大三倍。
層疊順序
當使用了多個樣式表，樣式表需要爭奪特定選擇符的控制權(quán)。在這些情況下，總會有樣式表的規(guī)則能獲得控制權(quán)。以下的特性將決定互相對立的樣式表的結(jié)果。
! important
規(guī)則可以用指定的! important 特指為重要的。一個特指為重要的樣式會凌駕于與之對立的其它相同權(quán)重的樣式。同樣地，當網(wǎng)頁制作者和讀者都指定了重要規(guī)則時，網(wǎng)頁制作者的規(guī)則會超越讀者的。以下是! important 聲明的例子:
BODY { background: url(bar.gif) white;
background-repeat: repeat-x ! important }
Origin of Rules (Author's vs. Reader's)
正如以前所提及的，網(wǎng)頁制作者和讀者都有能力去指定樣式表。當兩者的規(guī)則發(fā)生沖突，網(wǎng)頁制作者的規(guī)則會凌駕于讀者的其它相同權(quán)重的規(guī)則。而網(wǎng)頁制作者和讀者的樣式表都超越瀏覽器的內(nèi)置樣式表。
網(wǎng)頁制作者應該小心地使用! important 規(guī)則，因為它們會超越用戶任何的! important 規(guī)則。例如，一個用戶由于視覺關(guān)系，會要求大字體或指定的顏色，而且這樣的用戶會有可能聲明確定的樣式規(guī)則為! important，因為這些樣式對于用戶閱讀網(wǎng)頁是極為重要的。任何的! important 規(guī)則會超越一般的規(guī)則，所以建議網(wǎng)頁制作者使用一般的規(guī)則以確保有特殊樣式需要的用戶能閱讀網(wǎng)頁。
選擇符規(guī)則: 計算特性
基于它們的特性級別，樣式表也可以超越與之沖突的樣式表，一個較高特性的樣式永遠都凌駕于一個較低特性的樣式。這只不過是計算選擇符的指定個數(shù)的一個統(tǒng)計游戲。
統(tǒng)計選擇符中的ID屬性個數(shù)。
統(tǒng)計選擇符中的CLASS屬性個數(shù)。
統(tǒng)計選擇符中的HTML標記名格式。
最后，按正確的順序?qū)懗鋈齻€數(shù)字，不要加空格或逗號，得到一個三位數(shù)。( 注意，你需要將數(shù)字轉(zhuǎn)換成一個以三個數(shù)字結(jié)尾的更大的數(shù)。)相應于選擇符的最終數(shù)字列表可以很容易確定較高數(shù)字特性凌駕于較低數(shù)字的。以下是一個按特性分類的選擇符的列表:
#id1 {xxx} /* a=1 b=0 c=0 -- 特性 = 100 */
UL UL LI.red {xxx} /* a=0 b=1 c=3 -- 特性 = 013 */
LI.red {xxx} /* a=0 b=1 c=1 -- 特性 = 011 */
LI {xxx} /* a=0 b=0 c=1 -- 特性 = 001 */
特性的順序
為了方便使用，當兩個規(guī)則具同樣權(quán)重時，取后面的那個。
html中css樣式 標簽的使用
html中css樣式 a標簽的使用方式：
1、a標簽使用案例：
a?href=""?target="_blank"?title="創(chuàng)業(yè)者李孟我的博客"創(chuàng)業(yè)者博客/a
2、a標簽使用范圍：
（1）使用html a可以對圖片進行錨文本超鏈接：
exp：
a?href=""?target="_blank"?title="轉(zhuǎn)到我的博客"img?src=""?//a
（2）可以對文字內(nèi)容進行錨文本超鏈接：
a?href="""我的博客/a
3、html a應用擴展：
同頁面錨文本-同頁面內(nèi)上下轉(zhuǎn)到指定位置；
常?？匆娢覀冺撁娴撞奎c擊 “回到頂部”鏈接就會轉(zhuǎn)到網(wǎng)頁頂部實現(xiàn)。
Exp：
（1）、首先我們在網(wǎng)頁body內(nèi)最上面添加一個span id="top" name="top"/span；
（2）、我們再到body內(nèi)，需要出現(xiàn)點擊后轉(zhuǎn)到頂部位置添加，a href="#top"回到頂部/a；
這樣就可實現(xiàn)點擊“回到頂部”即可本頁內(nèi)快速瀏覽到網(wǎng)頁頂部位置。
使用語法：
（1）、需要轉(zhuǎn)到地方添加，a href="#命名"文字/a，注意href值是#開頭+英文字母命名；
（2）、需要在被轉(zhuǎn)到位置添加，span id="命名" name="命名"/span，注意id和name值相同并且與a命名相同；
更多關(guān)于a標簽的學習資料：
[css+div]用 a 標簽的錨記# 控制內(nèi)容變化，如何控制當前內(nèi)容的選項卡樣式
css你沒法控制當前停留樣式，大不了能a:hover時換個背景色之類的。
這個只有js做靠譜，用錨鏈接做tab切換效果只是種網(wǎng)友無聊提出來的思路，效果太簡單了，而且沒有實用性。
CSS 樣式表有哪幾種？
1.1 內(nèi)聯(lián)樣式表
在標簽中直接添加style 例：p style=“” /p
1.2 內(nèi)嵌樣式表
作為一個獨立區(qū)域內(nèi)嵌在網(wǎng)頁內(nèi)，必須卸載head標簽內(nèi)
例：head
style=“”
/style
/head
1.3 外部樣式表
即css樣式表，需要新建一個css文件，用來放樣式表。如果在html文件中調(diào)用樣式表，需在html文件中點擊 右鍵→CSS樣式→附加樣式表。（一般用link連接方式）
注：有些標簽會有默認的邊距，一般寫代碼的時候會先去除（也可以設置其他需要的樣式）
* （對所有標簽起作用）
{margin：0px； （邊距）
padding：0px；} （間距）
CSS樣式分為哪三種？
CSS樣式分為：內(nèi)聯(lián)式css樣式、嵌入式css樣式、外部式css樣式。
對CSS三種樣式定義及其實例：
內(nèi)聯(lián)式css樣式。
內(nèi)聯(lián)式css樣式表就是把css代碼直接寫在現(xiàn)有的HTML標簽中，如下面代碼：
1? ?p?style="color:red"這里文字是紅色。/p? ?
css樣式代碼要寫在style=""雙引號中，如果有多條css樣式代碼設置可以寫在一起，中間用分號隔開（英文狀態(tài)下;）。
嵌入式css樣式。
嵌入式css樣式，就是可以把css樣式代碼寫在標簽之間。如下面代碼實現(xiàn)把三個標簽中的文字設置為紅色：
1? ?style?type="text/css"span{color:red;}/style? ?
嵌入式css樣式必須寫在之間，并且一般情況下嵌入式css樣式寫在之間。
外部式css樣式。
外部式css樣式(也可稱為外聯(lián)式)就是把css代碼寫一個單獨的外部文件中，這個css樣式文件以“.css”為擴展名（也可以為調(diào)用其他網(wǎng)站CSS）。
1? ?link?href="style.css"?rel="stylesheet"?type="text/css"?/? ?
注意事項：?1、css樣式文件名稱以有意義的英文字母命名，如 main.css。?2、rel=”stylesheet” type=”text/css” 是固定寫法不可修改。?3、標簽位置一般寫在標簽之內(nèi)。
掌握好三種CSS三種樣式使用方法在Web開發(fā)中將節(jié)省很多時間。
當前標題：css錨標樣式,css設置錨點
分享URL：http://fisionsoft.com.cn/article/dsdoodj.html
