樣式

2019-11-14 15:47:33

字體：大中小

來源：轉載

供稿：網友

　　CSS（Cascading Stytle Sheet）簡稱樣式表，是一種用戶增強控制頁面樣式并允許將樣式信息與頁面內容分離的標記性語言。使用可以很容易地控制頁面中的HTML元素的背景與顏色、元素框的樣式、定位、文字字體等屬性的設置。

樣式的作用：

　　1.內容與表現分離。

　　2.可以使網頁的表現非常統一，并且容易修改。

　　3.減少重復代碼的編寫。

　　4.增加網頁的瀏覽速度。

　　5.減少硬盤容量。

樣式在HTML文檔中的位置可以分為三種：

　　1. 內嵌樣式表。內嵌樣式表的CSS是寫在HTML標簽里的，只對當前的標簽起作用。

　　2. 內部樣式表。內部樣式表是寫在HTML的<head>和</head>里的，由<style>和</style>標記，內部樣式表只對所在的網頁有效。

　　3.外部樣式表。為了能夠讓很多頁面共享同樣的樣式表，可以把樣式表的定義寫在一個擴展名為.css的文件里，然后在每個需要使用該樣式表的頁面中添加對該樣式表文件的引用。

樣式的語法

最基本的CSS由：選擇符（selector）、屬性（PRoperties）和屬性的取值（value）三個部分構成：

　　選擇符{屬性：值}，即：selector{property: value}

　　一般情況下，選擇符是要為之定義樣式的HTML標記，可以通過此方法定義相應標記的屬性和值，屬性和值之間用冒號隔開。例如：

　　　　body {color: red}

　　　　選擇符body是指頁面主體部分，color是控制文字顏色的屬性，red是顏色的值，該代碼的效果是使頁面中的文字為紅色。

　　如果屬性的值是多個單詞組成，必須在值上加引號。

　　　　例如：p {font-family: "sans serif"}

　　　　定義段落的字體為sans serif。

　　如果需要對一個選擇符指定多個屬性時，則要使用分號將所有的屬性和值分開。

　　　　例如：p {text-align: center; color: red}

　　表示段落居中排列，并且段落中的文字為紅色。

選擇符的類型：

　　1. 類選擇符

　　用類選擇符能夠把相同的元素分類定義為不同的樣式，定義類選擇符時，在類的名稱前面加一個點號，點號前加上相應的HTML標記，而HTML標記可以省略。例如：

1     p.right {text-align: right}2     center {text-align: center}

　　2. 包含選擇符

　　包含選擇符可以單獨對某種元素包含關系（元素1里包含元素2）進行定義的樣式表，這種方式只對在元素1里的元素2定義，對單獨的元素1或元素2無定義，例如：

1 table table12 {3     font-size: 14px4 }

　　3. ID選擇符

　　在HTML文檔中，ID參數指定了某個單一元素，ID選擇符用來對這個單一元素定義單獨的樣式。定義ID選擇符要在ID名稱前加上一個“#”號。和類選擇符相同，定義ID選擇符的屬性也有兩種方法：第1種是“#”號 + ID，第2種是標記 + “#”號 + ID，第1種方法具有通用性，可用于所有ID，第2種只用于指定的標記。例如：

1 #intro 2 {3     font-size:90%;4 }5 6 p#headLine 7 {8     font-size:100%;9 }

使用樣式

在頁面中插入樣式表的常用方法：

　　1. 鏈入外部樣式表：把樣式表保存為一個樣式表文件，然后利用頁面中<link>標記鏈接到這個樣式表文件。<link>標記必須放到頁面的<head>區內，例如：

1 <head>2     <link rel="stylesheet1" type="text/css“ href="mystyle.css1">3 </head>

　　2. 內部樣式表：把樣式表放到頁面的<head>標記對里，這些定義的樣式就應用到頁面中了，樣式表是用<style>標記插入的，例如：

1 <head>2     <style type="text/css">3         hr {color: green}4         p {margin-left:10px}5         body {background-image: url("images/1.png")}6     </style>7 </head>

　　3. 導入外部樣式表：指在內部樣式表的<style>標記對里導入一個外部樣式表，導入時利用“@import”實現，例如：

1 <head>2     <style type=”text/css”>3            <!-- @import “mystyle1.css”4         /*其他樣式表的聲明*/ -->5     </style>6 </head>

　　4.內嵌樣式是混合在HTML標記里使用的，使用這種方法可以很簡單地對某個元素單獨定義樣式。內嵌樣式的使用是直接在HTML標記里加入style參數。而style參數的內容就是CSS的屬性和值，例如：

1 <p style=“color: sienna; margin-left: 20px”>段落 </p>

創建樣式

　　使用樣式創建器創建樣式，只需根據“新建”樣式對話框進行一些選擇就可生成滿足需要的樣式。

修改樣式

　　VS提供了兩種修改樣式的方法，這兩種方法都要依賴于“CSS屬性”對話框，使用“CSS屬性”對話框可以查看任何樣式的詳細內容。在VS中選擇“視圖”|“CSS屬性”命令，則可以打開 “CSS屬性”對話框。

創建和應用樣式文件

　　在多數情況下，并不直接在頁面中創建樣式，而是在項目中創建存儲通用樣式的文件。使用“新建樣式”對話框可以創建樣式文件，創建樣式文件有兩種方法：一、新創建一個樣式文件，把創建的樣式放到該文件中；二、向已經存在的樣式文件中添加新的樣式。使用時只需在頁面中引用這些文件存在的樣式。

使用實例：

新建樣式表StyleSheet1.css，代碼如下：

1 body {2 }3 .新建樣式2 {4     font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;5     font-size: small;6     font-weight: bolder;7     font-style: oblique;8 }

Default.aspx中代碼如下：

 1 <head runat="server"> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 3     <title></title> 4     <link href="StyleSheet1.css" rel="stylesheet" type="text/css" /> 5 </head> 6 <body> 7     <form id="form1" runat="server"> 8     <div class="新建樣式2"> 9         <table>10             <tr>11                 <td>12                     <asp:Label ID="Label1" runat="server" Text="用戶名：" />13                 </td>14                 <td>15                     <asp:TextBox ID="TextBox1" runat="server" />16                 </td>17             </tr>18             <tr>19                 <td>20                     <asp:Label ID="Label2" runat="server" Text="密碼：" />21                 </td>22                 <td>23                     <asp:TextBox ID="TextBox2" runat="server" />24                 </td>25             </tr>26             <tr>27                 <td>28                     <asp:Button ID="Button1" runat="server" Text="登錄"/>29                 </td>30             </tr>31         </table>32     </div>33     </form>34 </body>