时间戳

首页 > 技术文章 > ASP.NET CSS 小结

ASP.NET CSS 小结

moonache 2015-08-06 19:12 原文

 1.ASP.NET 引用CSS

1.Site.master里面设置webopt
<webopt:bundlereferencerunat="server"path="~/Content/css"/>
2.在Bundle.config里面绑定具体CSS
<?xml version="1.0" encoding="utf-8" ?>
<bundles version="1.0">
  <styleBundle path="~/Content/css">
    <include path="~/Content/bootstrap.css" />
    <include path="~/Content/Site.css" />
  </styleBundle>
</bundles>
3.当然也可以直接在具体页面的Head内引用外部CSS
<link type="text/css" rel="stylesheet" href=" 外部样式表地址 " />

2.ASP.NET中各种CSS样式写法

    1.写在style内

<asp:Label ID="LabelInf" runat="server" Text="工作辛苦了，喝杯水吧。"  style="background-color:#222222;color:#3A87AD; height:38px;text-align:center;font-size:30px;padding:4px 4px 4px 4px;"></asp:Label>
    2某些样式可以直接设置
<asp:LabelID="Label1"runat="server"Text="工作辛苦了，喝杯水吧。"ForeColor="#3A87AD"BackColor="#222222"Height="38px"></asp:Label>
    3.CssClass
<asp:TextBoxID="TextProjectId"runat="server"CssClass="Default input"Width="12%"Height="100%"placeholder="项目ID nchar10"ValidationGroup="2"></asp:TextBox>
    4.class
<asp:ButtonID="BackProject"runat="server"Text="Project"class="btn btn-primary"style="width:120px;"OnClick="BackProject_Click"CausesValidation="false"></asp:Button>
PS：如果CssClass和class同时存在，CssClass优先。 
        在ASP.NET控件上直接设置的样式属性，都会被转换为CSS样式。
        ASP.NET控件内部的样式提倡使用Cssclass
 

3.在ASP.NET后台修改 html控件css

1.在前台，将控件设置为runat=server

<divstyle="width:100%;"id="div_hz"runat="server">

2.在后台进行修改

div_hz.Style["height"]="480px";

3.针对Repeater、GridView等控件，需要用FindControl

    /// <summary>
    /// 数据将在被绑定到 Repeater 控件中的某一项之后但尚未呈现在页面上之前进行修改。
    /// 2016-4-26 15:55:05 EMS 在不同情况下屏蔽审核按钮
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    protected void RptrReview_ItemDataBound(object sender, RepeaterItemEventArgs e)
    {
        if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
        {
            RepeaterItem ri = e.Item;
            Label lblProgress = (Label)ri.FindControl("LblProgress");
            #region  设置不同审核进度下的div边框样式
            if (lblProgress.Text.ToString() == "审核通过")
            {
                HtmlControl rptrItemDiv = (HtmlControl)ri.FindControl("RptrItemDiv");
                rptrItemDiv.Attributes.Add("style", "border-color:#76B610");
            }
            else if (lblProgress.Text.ToString() == "审核中")
            {
                HtmlControl rptrItemDiv = (HtmlControl)ri.FindControl("RptrItemDiv");
                rptrItemDiv.Attributes.Add("style", "border-color:#D47005");
            }
            #endregion
            #region 在不同情况下屏蔽审核按钮
            LinkButton lnkBtnPass = (LinkButton)ri.FindControl("LnkBtnPass");
            LinkButton lnkBtnBan = (LinkButton)ri.FindControl("LnkBtnBan");            
            if(Session["FEmpID"].ToString()=="290")
            {
                lnkBtnPass.Visible = (lblProgress.Text.ToString() != "信息化部审核中");
            }
            else if(Session["FEmpID"].ToString()=="1")
            {
                lnkBtnPass.Visible = true;    
            }
            else if(Session["FDepID"].ToString()=="3")//IT 
            {
                lnkBtnPass.Visible = (lblProgress.Text.ToString() == "信息化部审核中");
            }
            else if(Session["FStaffCategory"].ToString()!="0")
            {
                lnkBtnPass.Visible = (lblProgress.Text.ToString() == "部门审核中");
            }
            else
            {
                lnkBtnPass.Visible = false;    
            }
            #endregion
        }
    ...
    }

 

4.ASP.NET 修改字体引用，拯救google字体

1.前两天发现网页刷新时用很长的时间在请求 fonts.googleais.com，
2.360推出了 字体加速服务 fonts.useso.com
3.在Bundle.config查看并确认主要引用的css文件
4.在Content文件夹下找到对应css文件
5.将css文件中的 fonts.googleapis.com，替换为fonts.useso.com
 PS:最近发现拯救没有什么效果啊。

5.CSS样式表覆盖顺序

1.样式表的元素选择器选择越精确，则其中的样式优先级越高：
id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式
 
2. 对于相同类型选择器制定的样式，在样式表文件中，越靠后的优先级越高
注意，这里是样式表文件中越靠后的优先级越高，而不是在元素class出现的顺序。比如.class2 在样式表中出现在.class1之后： 
.class1 { 
    color: black; 
} 
.class2 { 
    color: red; 
}
而某个元素指定class时采用 class="class2 class1"这种方式指定，此时虽然class1在元素中指定时排在class2的后面，但因为在样式表文件中class1处于class2前面，此时仍然是class2的优先级更高，color的属性为red，而非black。
 
3. 如果要让某个样式的优先级变高，可以使用!important来指定：
.class1 { 
    color: black !important; 
} 
.class2 { 
    color: red; 
}
此时class将使用black，而非red。
因为IE6、7、8 对于!important的支持不完全，所以提倡少使用!important，当然使用它也不会影响性能。

推荐阅读