1 使用link標籤去調用樣式,即調用css檔案中的樣式,可以直接將CSS檔案拖拽到html頁的head下面
此方法先載入css,後載入html
<head runat="server"> <title>網頁標題</title> <link href="Css/default.css" rel="stylesheet" type="text/css" /> </head>
2 使用style標籤
<head runat="server"> <title>網頁標題</title> <link href="Css/default.css" rel="stylesheet" type="text/css" /> <style type="text/css"> body { width:100%; } </style></head>
3 import載入,先載入html,後載入css
<style type="text/css"> @import url('css/default.css'); </style>
4 在default.css中的使用
1 如果唯寫控制項的類型,表示該類型的控制項都用這樣的樣式
2 如果想對某一控制項進行設定樣式使用 #
舉個栗子: defaullt.css 檔案
body { padding: 0px; margin: 0px; width:960px; height:auto; display:block; margin-left:auto; margin-right:auto; } #p_Top{ width:100%; height:80px; margin:0 auto; background-color:White; display:block;}#p_Mid{ width:100%; height:auto; margin:0 auto; background-color:White; display:block; min-height:420px;}#p_Footer{ width:100%; height:30px;}#Select,#Insert,#Delete,#Update{ width:90px; margin-left:auto; margin-right:auto; height:90px; font-size:15px; border: 3px solid #33CCFF;}#Select:hover,#Insert:hover,#Delete:hover,#Update:hover{ cursor:pointer; background-color:#33CCFF;}
5 對於控制項而言 可以使用屬性載入樣式
1 使用style屬性 直接使用 style=" width:auto; height:auto; margin-left:auto; margin-right:auto;"
2 使用class 調用head裡的樣式
3 使用CssClass 調用head裡的樣式
<style type="text/css"> .Bt { width:80px; height:25px; border:none; } .Bt:hover { cursor:pointer; background-color:#33CCFF; } .closed { border-style: none; height:21px; width:21px; background-image: url('/Images/closed.png'); background-repeat:no-repeat; } .closed:hover { cursor:pointer; } </style>
6 後台為前台按鈕添加樣式
bt.Attributes.CssStyle.Value = "background-color:Gray;";
7 可以用 迭代寫法
表示設定 Menu下的ul下的li的 樣式
#Menu ul li{width:100%;border:1px dotted gray;margin:0;padding:0;}