CSS菜鳥學習小結

最後更新：2017-02-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

css

一、基本概念　　
1、　選擇符：就是HTML當中可用的任何元素，例如：body,a,td　p.....　
2、　類：　就是我們自己給格式起的名字，應用的時候叫名字（class=類）　
3、　偽類：visited、　active　、link　等　

二、基本文法　

1、選擇符　{　屬性:　值　}

　　例如：　TD　{　FONT-SIZE:　9pt}　

2、選擇符.類　{　屬性:　值　}

　　例如：　td.aaa　{　color:　#191970　}　

只能在該元素下有效　引用方法：　<P　CLASS=aaa>　

3、.類　{　屬性:　值　}

　　例如：　.aaa　{　color:　#191970　}

　任何元素都能用

例如：　<p　class=aaa　　...　>　</p>

　　 <a　class=aaa　　...　>　</a>　

　　 <td　class=aaa　...　>　</td>　
　　
4、　選擇符:偽類　{　屬性:　值　}　例如：a:link　{color:red}

5、　選擇符.類:偽類　{　屬性:　值　}　例如：a.bbb:link　{color:blue}

引用方法：　<a　CLASS=aaa　...>　</a>　

6、　.類:偽類　{　屬性:　值　}　

例如：　.mainnv:hover　{COLOR:　#ff0000}　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
三、具體使用　　
　
1、行內：　用選擇符　{　屬性:　值　}

例如：　TD　{　FONT-SIZE:　9pt}　

2、檔案頭：方在<head>　</head>　之間　例如：　

　　<style　type="text/css">　

　　<!--　　

　　　A:link　{text-decoration:　none;　color:#0072A8} //選擇符:偽類 { 屬性:　值　}

　　　 A:visited　{text-decoration:　none;　color:　#0072A8}　

　　　 A:active　{text-decoration:　none;　color:　#FF0000}　

　　　 A:hover　{text-decoration:　underline;　color:　FF0000}　

　　　 A.a1:active　{COLOR:　#ffffff} //選擇符.類:偽類　{　屬性:　值　}

　　　 A.a1:link　{COLOR:　#ffffff}　

　　　 A.a1:visited　{COLOR:　#ffffff}　

　　　 A.a1:hover　{COLOR:　#faf108;　TEXT-DECORATION:　underline}

　　　　body{font-size=9pt}　　　//選擇符　{　屬性:　值　}　
　　　　H{FONT-SIZE:　9pt}　　　　　　
　　　　TD{　FONT-SIZE:　9pt}　　　　

　　　 -->　
　　　 </STYLE>　

3、外連檔案：　要求副檔名為　css，<head>　</head>　加如下連結代碼：　

　<LINK　rel="stylesheet"　href="first.css"　　type="text/css">//first.css　是檔案名稱　
　　　　
　　first.css　內容如下：　

　　A:link　{　COLOR:　#3a2a00;　TEXT-DECORATION:　none} //選擇符:偽類{屬性:　值　}　
　　A:visited　{COLOR:　#602400;　TEXT-DECORATION: none}// 用a元素的串連都是這種方式　　
　　A:active　{COLOR:　#ff6600;　TEXT-DECORATION:　none}　
　　A:hover　{COLOR:　#ff3300;　TEXT-DECORATION:　underline}　

　 A.hot:link　{COLOR:　#dd0000}//　選擇符.類:偽類　{　屬性:　值　}　
　 A.hot:visited　{COLOR:　#dd0000}//　用a元素的而且指明類　class　用hot　的顯示方式　
　 A.hot:hover　{COLOR:　#ff0000}　　 //　引用方法　class=hot　
　 A.hot:active　{COLOR:　#ff3300}　
　　　　　　　
　 A.blk:link　{COLOR:　#000000}　 //　選擇符.類:偽類　{　屬性:　值　}　
　 A.blk:visited　{COLOR:　#000000}//　用a元素的而且指明類　class　用blk　的顯示方式　
　 A.blk:hover　{COLOR:　#000000}　

.mainnv{FONT-SIZE: 12px;FONT-WEIGHT:bold}// .類 {　屬性: 值 }　指明類用mainnv的顯示　
.mainnv:link　{COLOR:　#cccc99}　　　　　　　　　　　　　　　　　　　　　　　　　　
.mainnv:visited　{COLOR:　#cccc99} //　.類:偽類　{　屬性:　值　}　　　
.mainnv:active　{COLOR:　#cccc99} //　所有指明類用mainnv　的串連效果用這種方式顯示　
.mainnv:hover　{COLOR:　#ff0000;　TEXT-DECORATION:　none}　

.main1　{BACKGROUND:　#cccc99}　　　　　　　　　　　　　　//.類　{　屬性:　值　}　
.main1t　{COLOR:　#cccc99}　　　　　//　所有指明類用main1t的都用這種方式顯示　
.main2　{BACKGROUND:　#c5c5b2}　
.main3　{BACKGROUND:　#e6e0b2}　

　　五、控制優先順序：

　　優先順序：　1、行插入入式　　　2、頭部方式　　　　3、外連檔案方式　

---------------------------------------------------------------　

我想問一下，要在一個頁面同時實現兩個效果，就是說onmouseover時，字型有的顯示為黑色，有的顯示為白色，請問大俠，用Css該怎麼定義呢？謝了！　
---------------------------------------------------------------　

南山居士，　
用類咯！　
2、　類：　就是我們自己給格式起的名字，應用的時候叫名字（class=類）　
　
比如說：a.black:hover{COLOR:　#000000}　　
a.white:hover{COLOR:　#ffffff}　
<a　class=black>這裡顯示黑色</a>　
<a　class=white>這裡顯示白色</a>　
具體的蚊子已經說過了，　
自己看看咯　
---------------------------------------------------------------　

補充幾個很重要的CSS用法:　
1.　
div#divID　{color:　#ff0000}　

<div　id=divID>div1</div>　
<div>div2</div>　

2.　
div#divID　table　td{color:　#FF0000}　

<div　id=divID><table><tr><td>table1</td></tr></table></div>　
<div><table><tr><td>table2</td></tr></table></div>　

對CSS的樣式不一定只用　class=CSSName　引用,　其實這兩種定義才更能體現出CSS的妙處.　
注意:用　div#divID　對某個ID賦樣式時應該確保網頁裡這個ID是唯一的.否則會出錯

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More