CSS樣式之ASP.NET的使用

來源:互聯網
上載者:User

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;}
相關文章

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.