Одним из наиболее изнурительных аспектов веб-разработки является написание бесконечного количества стилей CSS для различных элементов, которые лишь незначительно отличаются друг от друга по стилю. Это унесло жизнь (или волю) многих талантливых дизайнеров. Итак, зачем присваивать каждому элементу свою уникальную запись CSS, если вы можете смешивать совпадения и добавлять повторно используемые стили CSS к элементам, используя несколько классов CSS?
Шаг 1: настройка CSS
Давайте начнем с определения и написания некоторых из наших самых распространенных разметок CSS. Мы настроим их как отдельные стили. Те, что мы настроили здесь, являются самыми основными, но тот же метод может быть применен даже к самым крутым свойствам CSS 3.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
|
.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 важный»> Этот текст будет синим и жирным шрифтом </ p>
- <img src = «#» class = «articleImage floatRight»> Это изображение будет перемещено вправо и будет иметь некоторые отступы и границу. </ p>
- <p class = «standOut»> Этот текст будет огромным </ p>
- <p class = «primaryColor standOut важный»> Этот текст будет синим, размером 22 пикселя и жирным шрифтом. </ Р>
Почему это полезно
Это может быть очень полезно, особенно при разработке макетов … вы можете использовать один класс для определения размера и ширины и другой класс для определения позиционирования. Надеюсь, это помогло!
Примечание редактора: имейте в виду, что в некоторых старых браузерах, то есть старше, чем IE 6, этот метод «нескольких классов» завершится ошибкой. Что вы думаете об этом подходе? PS Есть быстрый совет убийцы? Напишите нам, и мы поговорим.