木子李教程之CSS全攻略

2020-03-24 19:02:10

字體：大中小

供稿：網(wǎng)友

第一次正式寫教程，開門見山。
CSS全稱Cascading Style Sheet。層疊式樣式表。從三年前就開始使用CSS了，但一直以來都小看了它。CSS的出現(xiàn)其實(shí)是一次革命，它試圖將網(wǎng)站的內(nèi)容與表現(xiàn)分開。
一、CSS的四種實(shí)現(xiàn)方式：1.內(nèi)嵌式：
style type="text/css"
!--
CSS代碼段
--
/style 2.外鏈?zhǔn)剑?br> link href="*.css" rel="stylesheet" type="text/css" 3.導(dǎo)入式
style type="text/css"
!--
@import url("*.css");
--
/style 3.屬性式：
div /div
二.CSS的定義：
選擇對象{屬性1:值1;屬性2:值2;屬性3:值3;屬性n:值n……}
如：
td{font-size:12px;color:#FFFF00}
.myname{font-size:12px;color:#FFFF00}
a:hover{font-size:12px;color:#FFFF00;text-decoration: underline;}
三.四種選擇對象1.HTML selector (TagName)
2.html' target='_blank'>class selector (.NAME)
3.ID selector (#IDname)
4.特殊對象 (a:hover a:link a:visited a:active)
1.HTML selector
HTML selector就是HTML的置標(biāo)符，如：DIV、TD、H1。HTML selector的作用范圍是應(yīng)用了該樣式的所有頁面中的所有該置標(biāo)符。例：
html
head
title 藝網(wǎng)CSS教程作者：木子李 /title
meta http-equiv="Content-Type" content="text/html; charset=gb2312"
style type="text/css"
!--
td
{
color: #FF0000;
}
--
/style
/head
body
table width="300" border="0"
tr
td 藝網(wǎng)--ArtHtml.com /td
/tr
tr
td 探索民族設(shè)計(jì)風(fēng)格網(wǎng)聚全球藝術(shù)精華 /td
/tr
/table
/body
/html 注意：在 TD 中沒有應(yīng)用什么，其中文字自動變紅色。2.class selector
定義class selector需要往其名稱其加一個點(diǎn)“.”。如“.classname”。class selector的作用范圍是所有包含“ ”的置標(biāo)符。例：
html
head
title 藝網(wǎng)CSS教程作者：木子李 /title
meta http-equiv="Content-Type" content="text/html; charset=gb2312"
style type="text/css"
!--
.fontRed
{
color: #FF0000;
}
--
/style
/head
body
table width="300" border="0"
tr
td 藝網(wǎng)--ArtHtml.com /td
/tr
tr
td 探索民族設(shè)計(jì)風(fēng)格網(wǎng)聚全球藝術(shù)精華 /td
/tr
/table
/body
/html 注意：在第二個 TD 中沒有“ ”，所以文字沒有變紅色。3.ID selector
定義ID selector需要往其名稱其加一個點(diǎn)“#”。如“#IDname”。ID selector的作用范圍是所有包含“ID="classname"”的置標(biāo)符。例：
html
head
title 藝網(wǎng)CSS教程作者：木子李 /title
meta http-equiv="Content-Type" content="text/html; charset=gb2312"
style type="text/css"
!--
#fontRed
{
color: #FF0000;
}
--
/style
/head
body
table width="300" border="0"
tr
td ID="fontRed" 藝網(wǎng)--ArtHtml.com /td
/tr
tr
td 探索民族設(shè)計(jì)風(fēng)格網(wǎng)聚全球藝術(shù)精華 /td
/tr
/table
/body
/html 注意：在第二個 TD 中沒有“ID="fontRed"”，所以文字沒有變紅色。4.特殊對象
特殊對象包括四種，是針對鏈接對象設(shè)置的:
a:hover 鼠標(biāo)移上時的超鏈接
a:link 常規(guī)，非訪問超鏈接
a:visited 訪問過的超鏈接
a:active 鼠標(biāo)點(diǎn)擊時的超鏈接特殊對象的作用范圍是所有 a 置標(biāo)符（這句話有待商榷，因?yàn)橄旅婧芸炀陀幸环N方法可以把“所有”兩個字推翻）。例：
html
head
title 藝網(wǎng)CSS教程作者：木子李 /title
meta http-equiv="Content-Type" content="text/html; charset=gb2312"
style type="text/css"
!--
a
{
color: #FF0000;
}
a:hover
{
color: #0000FF;
text-decoration: underline;
}
--
/style
/head
body
table width="300" border="0"
tr
td a 藝網(wǎng)--ArtHtml.com /a /td
/tr
tr
td 探索民族設(shè)計(jì)風(fēng)格網(wǎng)聚全球藝術(shù)精華 /td
/tr
/table
/body
/html
注意下面，很有用！！！
a.classname:hover
a#IDname:hover
這兩種寫法，是分別配合.classname與#IDname使用的。它的作用范圍變成了所有包含“ ”或“ID="IDname"”的 a 置標(biāo)符。這種寫法，可以幫助你在同一頁面中實(shí)現(xiàn)多種a:hover效果，可以看一下藝網(wǎng)(http://www.ArtHtml.com)的主頁上導(dǎo)航欄文字與普通文章標(biāo)題在鼠標(biāo)時的區(qū)別。
四.應(yīng)用：
1.置標(biāo)符自動應(yīng)用
2.特制類
3.ID ID="IDname"
4.特殊對象自動應(yīng)用
五.CSS屬性
CSS的屬性有很多，像上文中用到最多的color，表示文字的顏色。background-color表示背景色。這個是最主要的，但是因?yàn)闆]有什么難度，參考一下相關(guān)手冊就可以了。CSS屬性參考：http://www.arthtml.com/eNews/news/200502/0011_0000000271.html最后最需要的可能就是一個完整的CSS應(yīng)用的例子了。我這里沒有給。因?yàn)殡S便打開一個網(wǎng)頁的源代碼，例子隨處可見
本文作者:html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：怎樣用CSS3制作登錄框

下一篇：用CSS讓DIV層水平居中