CSS и управление именами на страницах контента

Question

У меня есть простой сайт с мастер-страницей. Чтобы установить свойства для элементов на странице контента (например, Textbox), я использую CSS. В дизайнере это работает хорошо, но когда я запускаю сайт, стиль не используется для управления. Причина проста. Чтобы сказать, у меня есть TextBox с id="TextBox1" на странице содержания, он находится в ContentPlaceHolder1. В файле CSS я задал свойства для объекта с идентификатором #TextBox1. Когда я запускаю сайт из-за магии имени главной страницы, он получает идентификатор, такой как ctl00_ContentPlaceHolder1_TextBox1, который не определен в файле CSS, включенном в главную страницу.

Что такое правильное решение этой проблемы? Hardcoding искаженное имя не кажется хорошим.

Answer 1

Использование CssClass на пульте управления, например: CssClass="myClass", то в таблице стилей вместо этого:

#TextBox1 { /* styles */ } 

Вы бы это:

.myClass { /* styles */ } 

Стоит отметить, что .Net 4 исправления или позволяет лучше управлять идентификатором, сгенерированным в html, see here for details.

Answer 2

Простейшим решением является применение ваших правил CSS с использованием имен классов (которые не обрабатываются) вместо идентификаторов.

Правильное решение - использовать свойство ClientID, которое возвращает искаженный идентификатор.

Например:

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

Однако, вы можете сделать это только для встроенных таблиц стилей.

Answer 3

Как Ник, так и SLaks имеют обе указанные классы. Вы можете назначить несколько классов в свойстве класса, и он будет агрегировать все свойства из всех перечисленных классов, переписывая любые свойства, которые он разделяет с более ранними классами. Порядок определения классов в файле css устанавливает порядок их применения.

<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> 

Порядка стилей получить Применяемый первый genericTextBox, потому что его первым определяются в стиле (по существу порядок в классе игнорируется). Он устанавливает цвет и фоновый цвет, затем применяется стиль textbox1, и он перезаписывает фоновый цвет и добавляет размер шрифта. Таким образом, в конце вы заканчиваете цвет из generictextbox, цвет фона и размер шрифта из textbox1.

EDIT: на TextBox изменился класс CssClass