總結——關於CSS樣式表的基礎知識

最後更新：2018-12-05 來源：互聯網

上載者：User

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

【總結——關於CSS樣式表的基礎知識】

一、使用CSS樣式控制頁面的表現

行內樣式
<p style=”color:red; font-size:14px;”>
內嵌式
<head>
<title>頁面標題</title>
<style type=”text/css”>
body{
margin:0 auto;
width:960px;
}
</style>
</head>
連結式
<head>
<link href=”mycss.css” type=”text/css” rel=”stylesheet”>
</head>
匯入樣式
<head>
      <style type=”text/css” >
             @import url(“mycss.css”);
      </style>
</head>

二、CSS選取器

標記選取器
如：li選取器，用於聲明頁面中所有<li>標記的樣式風格
<style type=”text/css”>
      li{
             color:red;
             text-decoration:none;
      }
</style>
類別選取器 .class
.error{color:red; font-size:17px; }
注意：class類別選取器的另一種更為直觀的使用是直接在標記聲明後按類別名稱來區別該標記。
如：h3.first_class{color:green}
ID選取器
ID selector 與 class selector基本相同，不同之處在於ID選取器在HTML頁面中只能使用一次，因此針對性更強。
如： #once{ font-weight:bold; font-size:30px; }
選取器集體聲明，適用於某些選取器的樣式風格是完全相同或部分相同的情況下。
如：h1, h2, h3, p{color:purple; font-size:14px; }
h2.special, .special, #once{text-decoration:underline;}
選取器的嵌套，嵌套方式可用於對特殊位置的HTML標記進行聲明。
如： p b {color:yellow; font-size:30px;}
只針對p標記下的b標記才生效，對於p標記之外的b並不生效。
注意：典型的嵌套語句
1）.second I { color:black; } /* 只針對使用了second類的<i>標記生效 */
2）#first li { padding-left:8px; } /*針對ID為first的標記中的<li>標記生效*/
3）ul li { list-style:none;}
4）td.top, top1 strong{ font-szie:10px; } /*多重嵌套*/
子選取器，表示用來選擇一個父元素的直接子項目，符號為”>”
如：ul.mylist>li>a{ text-decoration:none;}
      <ul class=”mylist”>
             <li><a href=”#”>link</a></li> /*僅對這句生效，因為用到子選取器*/
      </ul>
      <li><a href=”#”>link2</a></li> /*這句不起效果*/
若改為：ul.mylist>li a {. . .}, 則所有的<a>標記都生效。

三、技巧

普通常見的網頁寬度為width:960px;
用div實現一行兩列的布局
<div>
      <div class=”left”>第一列</div>
      <div class=”right”>第二列</div>
</div>
注意：1）兩列的寬度之和不能大於父div的寬度；
      2）讓其中一列進行 float:left/right;
用div實現一行三列的布局
<div>
      <div class=”left_mid”>
             <div class=”left”>第一列</div>
             <div class=”mid”>第二列</div>
      </div>
      <div class=”right”>第三列</div>
</div>
注意：1）三列寬度之和不能大於父div的寬度；
      2）控制項列的float屬性即可。
瀏覽器預設是超連結樣式為：藍色+底線，點擊之後為：紫色+底線.
談談div與span標記的區別
1）div是區塊層級元素，它包含的所有元素均會自動換行；
2）span是行內元素，它不換行。
關於margin和padding屬性
1）若屬性連起來寫，則根據順時針按上、右、下、左的順序規則縮寫；
2）當上和下、左和右的屬性值一致時，可簡寫為：margin: 40px 50px;
3）當上下左右的屬性值都一致時，可簡寫為：margin:60px;
將網頁中的元素置中
width:960px;
margin:0 auto;
設定了float的div在ie6下的margin會加倍，這是ie6 的bug
解決辦法：在div的樣式中加上 display:inline
解決div垂直置中的問題
vertial-align:middle
line-height:div’height
Id與class的區別
1）id不可以重複，class可以重複使用
2）id的優先順序要高於class的優先順序
3）id在某些情況下節約時間
將flash設為透明
<param name=”wmode” value=”transparent”>

一、使用CSS樣式控制頁面的表現

行內樣式
<p style=”color:red; font-size:14px;”>
內嵌式
<head>
<title>頁面標題</title>
<style type=”text/css”>
body{
margin:0 auto;
width:960px;
}
</style>
</head>
連結式
<head>
<link href=”mycss.css” type=”text/css” rel=”stylesheet”>
</head>
匯入樣式
<head>
      <style type=”text/css” >
             @import url(“mycss.css”);
      </style>
</head>

二、CSS選取器

標記選取器
如：li選取器，用於聲明頁面中所有<li>標記的樣式風格
<style type=”text/css”>
      li{
             color:red;
             text-decoration:none;
      }
</style>
類別選取器 .class
.error{color:red; font-size:17px; }
注意：class類別選取器的另一種更為直觀的使用是直接在標記聲明後按類別名稱來區別該標記。
如：h3.first_class{color:green}
ID選取器
ID selector 與 class selector基本相同，不同之處在於ID選取器在HTML頁面中只能使用一次，因此針對性更強。
如： #once{ font-weight:bold; font-size:30px; }
選取器集體聲明，適用於某些選取器的樣式風格是完全相同或部分相同的情況下。
如：h1, h2, h3, p{color:purple; font-size:14px; }
h2.special, .special, #once{text-decoration:underline;}
選取器的嵌套，嵌套方式可用於對特殊位置的HTML標記進行聲明。
如： p b {color:yellow; font-size:30px;}
只針對p標記下的b標記才生效，對於p標記之外的b並不生效。
注意：典型的嵌套語句
1）.second I { color:black; } /* 只針對使用了second類的<i>標記生效 */
2）#first li { padding-left:8px; } /*針對ID為first的標記中的<li>標記生效*/
3）ul li { list-style:none;}
4）td.top, top1 strong{ font-szie:10px; } /*多重嵌套*/
子選取器，表示用來選擇一個父元素的直接子項目，符號為”>”
如：ul.mylist>li>a{ text-decoration:none;}
      <ul class=”mylist”>
             <li><a href=”#”>link</a></li> /*僅對這句生效，因為用到子選取器*/
      </ul>
      <li><a href=”#”>link2</a></li> /*這句不起效果*/
若改為：ul.mylist>li a {. . .}, 則所有的<a>標記都生效。

三、技巧

普通常見的網頁寬度為width:960px;
用div實現一行兩列的布局
<div>
      <div class=”left”>第一列</div>
      <div class=”right”>第二列</div>
</div>
注意：1）兩列的寬度之和不能大於父div的寬度；
      2）讓其中一列進行 float:left/right;
用div實現一行三列的布局
<div>
      <div class=”left_mid”>
             <div class=”left”>第一列</div>
             <div class=”mid”>第二列</div>
      </div>
      <div class=”right”>第三列</div>
</div>
注意：1）三列寬度之和不能大於父div的寬度；
      2）控制項列的float屬性即可。
瀏覽器預設是超連結樣式為：藍色+底線，點擊之後為：紫色+底線.
談談div與span標記的區別
1）div是區塊層級元素，它包含的所有元素均會自動換行；
2）span是行內元素，它不換行。
關於margin和padding屬性
1）若屬性連起來寫，則根據順時針按上、右、下、左的順序規則縮寫；
2）當上和下、左和右的屬性值一致時，可簡寫為：margin: 40px 50px;
3）當上下左右的屬性值都一致時，可簡寫為：margin:60px;
將網頁中的元素置中
width:960px;
margin:0 auto;
設定了float的div在ie6下的margin會加倍，這是ie6 的bug
解決辦法：在div的樣式中加上 display:inline
解決div垂直置中的問題
vertial-align:middle
line-height:div’height
Id與class的區別
1）id不可以重複，class可以重複使用
2）id的優先順序要高於class的優先順序
3）id在某些情況下節約時間
將flash設為透明
<param name=”wmode” value=”transparent”>

本文章原先以中文撰寫並發佈於 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