您現在的位置: 365建站網 > 365學習 > 木子李教程之CSS全攻略

木子李教程之CSS全攻略

文章來源:365jz.com     點擊數:139    更新時間:2015-09-16 20:26   參與評論

第一次正式寫教程,開門見山。
CSS全稱Cascading Style Sheet。層疊式樣式表。從三年前就開始使用CSS了,但一直以來都小看了它。CSS的出現其實是一次革命,它試圖將網站的內容與表現分開。


一、CSS的四種實現方式:

1.內嵌式:
<style type="text/css">
<!--
CSS代碼段
-->
</style>

2.外鏈式:
<link href="*.css" rel="stylesheet" type="text/css">

3.導入式
<style type="text/css">
<!--
@import url("*.css");
-->
</style>

3.屬性式:
<div style="position:absolute; width:200px; height:115px; z-index:1; left: 209px; top: 154px;"></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.class selector (.NAME)
3.ID selector (#IDname)
4.特殊對象 (a:hover a:link a:visited a:active)


1.HTML selector
HTML selector就是HTML的置標符,如:DIV、TD、H1。HTML selector的作用范圍是應用了該樣式的所有頁面中的所有該置標符。

例:
<html>
<head>
<title>藝網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>藝網--ArtHtml.com</td>
  </tr>
  <tr>
    <td>探索民族設計風格 網聚全球藝術精華</td>
  </tr>
</table>
</body>
</html>

注意:在<TD>中沒有應用什么,其中文字自動變紅色。

2.class selector
定義class selector需要往其名稱其加一個點“.”。如“.classname”。class selector的作用范圍是所有包含“class="classname"”的置標符。

例:
<html>
<head>
<title>藝網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 class="fontRed">藝網--ArtHtml.com</td>
  </tr>
  <tr>
    <td>探索民族設計風格 網聚全球藝術精華</td>
  </tr>
</table>
</body>
</html>

注意:在第二個<TD>中沒有“class="fontRed"”,所以文字沒有變紅色。

3.ID selector
定義ID selector需要往其名稱其加一個點“#”。如“#IDname”。ID selector的作用范圍是所有包含“ID="classname"”的置標符。

例:
<html>
<head>
<title>藝網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">藝網--ArtHtml.com</td>
  </tr>
  <tr>
    <td>探索民族設計風格 網聚全球藝術精華</td>
  </tr>
</table>
</body>
</html>

注意:在第二個<TD>中沒有“ID="fontRed"”,所以文字沒有變紅色。

4.特殊對象
特殊對象包括四種,是針對鏈接對象設置的:
a:hover 鼠標移上時的超鏈接
a:link 常規,非訪問超鏈接
a:visited 訪問過的超鏈接
a:active 鼠標點擊時的超鏈接

特殊對象的作用范圍是所有<a>置標符(這句話有待商榷,因為下面很快就有一種方法可以把“所有”兩個字推翻)。

例:
<html>
<head>
<title>藝網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 href="http://www.ArtHtml.com">藝網--ArtHtml.com</a></td>
  </tr>
  <tr>
    <td>探索民族設計風格 網聚全球藝術精華</td>
  </tr>
</table>
</body>
</html>


注意下面,很有用?。?!
a.classname:hover
a#IDname:hover
這兩種寫法,是分別配合.classname與#IDname使用的。它的作用范圍變成了所有包含“class="classname"”或“ID="IDname"”的<a>置標符。這種寫法,可以幫助你在同一頁面中實現多種a:hover效果,可以看一下藝網(http://www.ArtHtml.com)的主頁上導航欄文字與普通文章標題在鼠標時的區別。


四.應用:
1.置標符 自動應用
2.特制類 class="NAME"
3.ID   ID="IDname"
4.特殊對象 自動應用


五.CSS屬性
CSS的屬性有很多,像上文中用到最多的color,表示文字的顏色。background-color表示背景色。這個是最主要的,但是因為沒有什么難度,參考一下相關手冊就可以了。

CSS屬性參考:http://www.arthtml.com/eNews/news/200502/0011_0000000271.html

最后最需要的可能就是一個完整的CSS應用的例子了。我這里沒有給。因為隨便打開一個網頁的源代碼,例子隨處可見。


作者:木子李
網站:http://www.ArtHtml.com
博客:http://li.ArtHtml.com
Email:ArtHtml@126.com
QQ:64256534

 

如對本文有疑問,請提交到交流論壇,廣大熱心網友會為你解答??! 點擊進入論壇

您可能感興趣的文章:


發表評論 (139人查看,0條評論)
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
用戶名: 驗證碼: 點擊我更換圖片
最新評論
------分隔線----------------------------
自拍偷拍福力视频,偷拍国际精品,麻豆一区福利电影,国产网红视频午夜福利,se视频大全,久久国产AV影院 万能修改器孕妇篇| 朝鲜少妇漂亮毛茸茸| 小可爱学生video色| 少妇被粗大的猛进出69影院| 国产亚洲视频中文字幕| 菠萝菠萝蜜在线观看| 放课后的秘密画室| 国产成人av在线播放不卡| 日本成年片在线观看| 特级毛片a级毛片免费播放| 任你爽任你鲁在线视频| h无码精品动漫在线观看| 四虎国产精品永久入口| 国产成人亚洲综合色婷婷| 亚洲mm| 伊人大杳蕉在线影院视频| 国产美女高潮抽搐喷出白浆视频| 成年性色生活视频免费| 丝袜亚洲精品中文字幕一区| 日本高清亚洲电影一区| 苍井空肉教师在线播放| 波多野结衣的片子av| 小寡妇一夜要了六次| 精品国产三级a∨在线| 成人三级片| 日本A级作爱片| 色综合伊人色综合网站| 亚洲成av人片在线观看无| 超碰自拍偷拍在线| 日本一本道免费天码av| 爽死你个荡货| http://www.hunts-karate.com