CSS y nombre de control mangling en las páginas de contenido

Question

Tengo un sitio web sencillo con una página maestra. Para propiedades configuradas con elementos de una página de contenido (como Textbox) Yo uso de CSS. En el diseñador funciona bien pero cuando inicio un sitio de un estilo no está apllied con los controles. La razón es simple. Decir, tengo un TextBox con id="TextBox1" en la página de contenido, se coloca en ContentPlaceHolder1. En archivo CSS que establecer las propiedades de objeto con #TextBox1 ID. Cuando inicio un sitio debido al nombre de la página principal mangling se pone un identificador como ctl00_ContentPlaceHolder1_TextBox1 que no se define en el archivo CSS incluidos en masterpage.

¿Qué es una solución correcta de este problema? Hardcoding nombre revuelto no parece ser bueno.

Answer 1

Uso CssClass en los controles, así: CssClass="myClass", a continuación, en su hoja de estilo en lugar de esto:

#TextBox1 { /* styles */ }

Usted tendría este aspecto:

.myClass { /* styles */ }

Es la pena señalar que .Net 4, fija, o le permite gestionar mejor el ID generado en el html, ver aquí para más detalles .

Answer 2

A medida que Nick y SLaks han dicho tanto clases son los mejores. Se pueden asignar varias clases en el establecimiento de clase y va a agregar todos los inmuebles de todas las clases especificadas sobrescribir cualquiera de las propiedades que comparte con las clases anteriores. El fin de la definición de las clases en el archivo CSS establece el orden en que conseguir aplicar.

<style type="text/css">
.genericTextBox
{
background-color: #eee;
color: black;
}
.textbox1
{
background-color: #3ee;
font-size: larger;
}
</style>

<asp:TextBox id="textBox1" CssClass="textbox1 genericTextBox" runat="server"></asp:TextBox>

El orden de los estilos conseguir aplicar es el primer genericTextBox, porque es la primera definido en el estilo (esencialmente el orden en clase se tendrá en cuenta). Establece el color y el color de fondo, entonces el TextBox1 estilo se aplica y se sobrescribe el color de fondo y añade tamaño de fuente a. Así que al final se termina con el color de generictextbox, el color de fondo y el tamaño de fuente de TextBox1.

EDIT: en el cuadro de texto cambiado clase para CssClass

Answer 3

La solución más simple es aplicar sus reglas CSS usando nombres de las clases (que no se deje destrozado) en lugar de ID.

La solución correcta es utilizar el ClientID propiedad, que devuelve el ID destrozado.

Por ejemplo:

.Something #<%=TextBox1.ClientID %>` {
    color: red;
}

Sin embargo, sólo se puede hacer eso por hojas de estilo en línea.