Совет: Экономьте время, используя несколько классов CSS стилей

09 Марта 2010
Раздел Веб-мастеру

Одним из самых изнурительных аспектов веб-разработки является выписка бесконечного количества CSS стилей для различных элементов, которые лишь немного отличаются друг от друга. Эта нудная работа «унесла жизни» многих талантливых дизайнеров  Почему бы не придать каждому элементу свою уникальную/индивидуальную CSS запись, с использованием нескольких классов CSS?

Шаг 1: Настройка CSS

Давайте начнем с определения записей некоторых из наших самых важных CSS разметок. Мы будем их настраивать в качестве индивидуальных стилей. Те, что мы указали ниже, являются самыми основными.

.primaryColor{
color: blue;
}
 
.articleImage
{
border: 1px solid #292929;
padding: 5px;
}
 
.standOut{
font-size: 22px;
}
 
.important{
font-weight: bold;
}
 
.floatRight
{
float: right;
}

Шаг 2: Применение классов в нашем документе

<p class=”primaryColor important”>Здесь будет жирный текст голубого цвета </p>

<img src=”#” class=”articleImage floatRight”> Это изображение будет смещено вправо с отступами и границами. </p>

<p class=”standOut”> Здесь текст будет большим</p>

<p class=”primaryColor standOut important”> Этот текст будет синим, высотой 22px и жирный.</p>

Почему это полезно

Эта статья будет полезной, особенно при разработке макетов ... Вы можете использовать один класс в целях определения размеров и ширины, а другой класс для определения местоположения. Надеюсь, что эта статья вам помогла!

Читайте нашу RSS-ленту

Статья была Вам полезна? Подпишитесь и получайте наши новости по RSS. Также Вы можете добавить данную новость себе в закладки. Спасибо.

• css
• веб-мастеру
• инструкции

Комментарии  

 

0 #1 konstantine 04.11.2010 06:45

Хороший сайтик, я тут еще пороюсь. Решите плз вопрос с загрузкой картинок!

Цитировать

 

Обновить список комментариев
RSS лента комментариев этой записи.

Добавить комментарий

имя*

email*

сайт

уведомить о новых комментариях

Обновить

Отправить

Отменить