CSS Синтаксис
CSS-набор правил состоит из селектора и блока декларации:
Точки селектора в элементе HTML вы хотите, чтобы стиль.
Блок объявлений содержит одно или несколько объявлений, разделенных точкой с запятой.
Каждая декларация включает в себя CSS имя свойства и значение, разделенных двоеточием.
Заявление CSS всегда заканчивается точкой с запятой, а блоки объявлений окружены фигурными скобками.
В следующем примере все <p> элементы будут выровнен по центру, с красным цветом текста:
CSS селекторы
CSS селекторы используются для "find" (или выберите) HTML - элементы на основе их имени элемента, идентификатор, класс, атрибут, и многое другое.
Элемент выбора
Селектор элемент выбирает элементы на основе имени элемента.
Вы можете выбрать все <p> элементы на странице , как это (в данном случае, все <p> элементы будут выровнен по центру, с красным цветом текста):
Селектор идентификатора
Селектор идентификатора использует атрибут идентификатор HTML-элемента, чтобы выбрать конкретный элемент.
Идентификатор элемента должен быть уникальным в пределах страницы, поэтому селектор идентификатор используется, чтобы выбрать один уникальный элемент!
Чтобы выбрать элемент с определенным идентификатором, написать хэш (#) характер, за которой следует идентификатор элемента.
Правило стиля ниже будет применяться к элементу HTML с id="para1" :
 | Примечание: Имя Идентификатор не может начинаться с цифры! |
|---|
Класс Selector
Селектор класс выбирает элементы с определенным атрибутом класса.
Для выбора элементов с определенным классом, написать period (.) Символов, за которым следует имя класса.
В приведенном ниже примере, все HTML элементы с class="center" будет красным и выровнен по центру:
Можно также указать, что только конкретные HTML элементы должны быть затронуты классом.
В приведенном ниже примере, только <p> элементы с class="center" будет выровнен по центру:
HTML элементы могут также относиться к более чем одному классу.
В приведенном ниже примере, <p> элемент будет стиль в соответствии с class="center" и class="large" :
| Примечание: имя класса не может начинаться с цифры! |
|---|
Группировка селекторов
Если у вас есть элементы с теми же определениями стиля, как это:
h1
{
text-align: center;
color: red;
}
h2
{
text-align: center;
color: red;
}
p
{
text-align: center;
color: red;
}Это будет лучше сгруппировать селекторы, чтобы минимизировать код.
Группировка селекторов, разделите каждый селектор с запятой.
В приведенном ниже примере мы сгруппировали селекторы из кода выше:
CSS Комментарии
Комментарии используются для объяснения кода, и может помочь при редактировании исходного кода на более поздний срок.
Комментарии игнорируются браузерами.
CSS - комментарий начинается с /* and ends with */ . Комментарии могут также охватывать несколько строк:
пример
p
{
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
Попробуй сам " Проверьте себя с упражнениями!
Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4»