Шпаргалка по css селекторам
css свойства и их синтаксис
css правило говорит о том, что указанный в нем синтаксис будет применятся для одного или нескольких html элементов.
css файл - это свод правил для сайта, описанный в специальном файле.
В своей основной форме, css правило состоит из трех частей: селектор, свойство и параметр. Синтаксис css правила показан ниже:
seletor {
property:value;
}
seletor - это html элемент, класс или идентификатор (id)
property - это атрибут html элемента, на который будет воздействовать правило (например, фон, шрифт и т.д).
value - свойство, которое будет приментся для атрибута html элемента.
Если описано одно свойство для селектора, то не обязательно в конце ставить точку с запятой. Но стили в основном добавляются и
поэтому точка с запятой даже в случае с одним свойством является хорошим тоном.
p {
font-size:12px;
}
body {
color:#000000;
background:#FFFFFF;
font-weight:bold;
}
В примере описаном выше показано, что нужно ставить точку с запятой в конце каждого описания свойства.
В примере ниже, селектором является весь html документ.
body {
background:#FFFFFF;
}
Если свойство описывается в виде слова, то его необходимо выделять двойными кавычками "" или одинарными ''.
h3 {
font-family:"Comic Sans MS";
}
После описания каждого свойства нужно ставить пробелы, но это правило не является обязательным.
p {
text-align: right; text-align: right ;
}
body {
Это правило хоть и не обязательное, но повышает читабельность текста.
p {
text-align:right;text-align:right;
}
Групировка селекторов
Если css правила описаны для нескольких селекторов, их можно сгрупировать для экономии. Отделяются они в таком случае запятыми.
h1, h2, h3, h4, h5, h6 {
color:#00FF00;
}
Классы селекторов
При создании css правил вы не ограничены использованием лишь селекторов.
Вы можете легко создавать классы, которые определяют правила css. Главная особенность классов состоит в том, что их можено применять к любому html элементу и в любом количестве.
При этом вы можете для селекторов одного типа применять классы с различными css правилами.
Ниже показан синтаксис классов, перед названием класса следует использовать точку.
html элемент .class-name {
property:value;
}
примечание: в названиях классов следует избегать использования цифр и специальных символов.
В css2 есть возможность применять к одному html элементу несколько классов.
p.color-one {
color:000000;
}
p.color-two {
color:0000FF;
}
<div class="color-one" class="color-two">
</div>
Если попытаетесь для html элемента использовать несколько классов, то конструкция показанная выше работать не будет,
мало того, в этом случае ваша страница не будет валидной. Чтоб это заработало и код оставался валидный, нужно использовать следующую конструкцию:
<p class="color-one color-two">
</p>
Если создавая css класс вы хотите его применять для разных html элементов, то при написании css правил не нужно указывать селектор перед названием класса.
.color-one {
color:000000;
}
<h2 class=
"color-one" class=
"color-two">
</h2>
<p class=
"color-one" class=
"color-two">
</p>
ID селекторов
id селекторов отличается от классов только тем, что его можно использовать только один раз на странице.
Это очень удобно, чтоб создавать различные стили для разных страница на сайте.
примечание: в названиях id следует избегать использования цифр и специальных символов.
Вставка комментариев
Вы можете вставлять комментарии для своих css свойств. Это поможет вам разобратся в
коде написанном несколько месяцев назад и сразу приступить к работе, не тратя время на то, чтоб разобратся где что находится.
Синтаксис css комментариев показан ниже:
/* ваш комментарий */
p {
text-align:right;text-align:right; /* ваш комментарий */
}
Оригинал: A regra CSS
Добавить комментарий
