4
мар 10

Как да презапишем инлайн зададени стилове с "Style Sheet"

категория: CSS няма коментари

Написан от мен сайт на HTML и CSS, на който съм описал всички нужни елементи, като например : <p></p>,<span></span>,<a href=""></a>, <h1><h1>, <h2></h2> и т.н. бива поддържан от човекът "X".

Нека приемем, че оригиналният код изглежда така :

HTML :

<p class="normal_text">dummy text "1"</p>
<p class="normal_text">dummy text "2"</p>
<p class="normal_text">dummy text "3"</p>
<p class="normal_text">dummy text "4"</p>
<p class="normal_text">dummy text "5"</p>

CSS :

.normal_text {
	color:#777;
	font-size:11px
	font-weight:400;
	padding:0 0 10px;
}

Този човек "X" решава, че с няколко подобни урока може да пише HTML и CSS и започва да твори инлайн. Всички промени изглеждат да речем така :

HTML :

<p class="normal_text" style="color:#3F6;padding:10px 0;">Lorem Ipsum is simply dummy text "1"</p>
<p class="normal_text">Lorem Ipsum is simply dummy text "2"</p>
<p class="normal_text" style="color:#3F6;padding:10px 0;">Lorem Ipsum is simply dummy text "3"</p>
<p class="normal_text">Lorem Ipsum is simply dummy text "4"</p>
<p class="normal_text" style="color:#3F6;padding:10px 0;">Lorem Ipsum is simply dummy text "5"</p>

Разбира се след като са "направени" нужните промени и е дошъл момента в който трябва вие да си оправите кода, започва любимото ми занимание "Find and Replace".Но някога може да ви се наложи просто с три реда да оправите въпросния проблем.

И така ... Решението!

.normal_text[style]{
    color:#777 !important;
    padding:0 0 10px !important;
}

Може би повечето от вас ще използват "Find and Replace", но понякога използвайки "CMS" системи може това да не е най-подходящият начин за пренаписването на генериран от някой WYSIWYG редактор текстове украсени инлайн с "CSS".

За съжаление недостатъкът на тази е техника е, че тя няма да работи на IE6, но за сметка на това работи в IE7, IE8, FireFox, Safari и Opera.


тагове: , , , , , , , , ,

Отговор