CSS والتحكم في اسم Millgling في صفحات المحتوى

Question

لدي موقع ويب بسيط مع صفحة رئيسية. لتعيين خصائص على عناصر على صفحة المحتوى (مثل Textbox) أنا استخدم CSS. في Designer ، يعمل بشكل جيد ، لكن عندما أقوم بتشغيل موقع ، لا يكون النمط غير معقول إلى عناصر التحكم. السبب بسيط. ليقول ، لدي أ TextBox مع id="TextBox1" في صفحة المحتوى ، يتم وضعه في ContentPlaceHolder1. في ملف CSS ، قمت بتعيين خصائص للكائن مع معرف #TextBox1. عندما أقوم بتشغيل موقع بسبب اسم الصفحة الرئيسية ، يحصل على معرف مثل ctl00_ContentPlaceHolder1_TextBox1 التي لم يتم تعريفها في ملف CSS المدرجة في MasterPage.

ما هو الحل الصحيح لهذه المشكلة؟ لا يبدو أن الاسم المشوهة المتشددين جيدًا.

Answer 1

يستخدم CssClass على الضوابط ، مثل هذا: CssClass="myClass", ، ثم في ورقة الأنماط بدلاً من هذا:

#TextBox1 { /* styles */ }

سيكون لديك هذا:

.myClass { /* styles */ }

تجدر الإشارة إلى أن .NET 4 إصلاحات ، أو يتيح لك إدارة المعرف الذي تم إنشاؤه في HTML بشكل أفضل انظر هنا للحصول على التفاصيل.

Answer 2

كما قال كل من نيك و 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>

الترتيب الذي يتم تطبيقه هو First GenerIcTextBox ، لأنه الأول المحدد في النمط (يتم تجاهل الترتيب في الفصل بشكل أساسي). إنه يضع اللون ولون الخلفية ، ثم يتم تطبيق مربع Text-text1 النمط ويكتب لون الخلفية ويضيف حجم الخط إلى. لذلك في النهاية ، تنتهي باللون من cannerictextbox ، بلون الخلفية وحجم الخط من TextBox1.

تحرير: على فئة تم تغيير مربع النص إلى CSSClass

Answer 3

أبسط الحلول هو تطبيق قواعد CSS الخاصة بك باستخدام أسماء classNames (التي لا يتم تشغيلها) بدلاً من المعرفات.

الحل الصحيح هو استخدام ClientID الخاصية ، التي تُرجع معرف mangled.

علي سبيل المثال:

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

ومع ذلك ، يمكنك فقط القيام بذلك من أجل أوراق الأنماط المضمنة.