Базовый синтаксис CSS » Самоучитель CSS
Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


Видео уроки
  • 15 март 2020, 12:20
? ССЫЛКА НА Maestro - «Видео уроки - CSS»
Популярные статьи
  • 13 январь 2023, 12:53
Как обеспечить стабильную работу сайта?
Наш опрос
Помогли мы вам



Наши новости

       

РЕКЛАМА


24-03-2016, 16:20
Базовый синтаксис CSS
Рейтинг:
Категория: Учебник CSS

Как уже было отмечено ранее, стилевые правила записываются в своём формате, отличном от HTML. Основным понятием выступает селектор — это некоторое имя стиля, для которого добавляются параметры форматирования. В качестве селектора выступают теги, классы и идентификаторы. Общий способ записи имеет следующий вид.

 


Вначале пишется имя селектора, например, TABLE, это означает, что все стилевые параметры будут применяться к тегу <table>, затем идут фигурные скобки, в которых записывается стилевое свойство, а его значение указывается после двоеточия. Стилевые свойства разделяются между собой точкой с запятой, в конце этот символ можно опустить.

CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от желания разработчика. Так, в примере 5.1 показаны две разновидности оформления селекторов и их правил.

Пример 5.1. Использование стилей

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Заголовки</title>
  <style> 
   h1 { color: #a6780a; font-weight: normal; } 
   h2 { 
    color: olive; 
    border-bottom: 2px solid black; 
   }
  </style>
 </head>
 <body>
  
  <h1>Заголовок 1</h1>
  <h2>Заголовок 2</h2>
  
 </body>
</html>

В данном примере свойства селектора h1 записаны в одну строку, а для селектора h2 каждое свойство находится на отдельной строке. Во втором случае легче отыскивать нужные свойства и править их по необходимости, но при этом незначительно возрастает объем данных за счёт активного использования пробелов и переносов строк. Так что в любом случае способ оформления стилевых параметров зависит от разработчика.

Правила применения стилей

Далее приведены некоторые правила, которые необходимо знать при описании стиля.

Форма записи

Для селектора допускается добавлять каждое стилевое свойство и его значение по отдельности, как это показано в примере 5.2.

Пример 5.2. Расширенная форма записи

td { background: olive; }
td { color: white; }
td { border: 1px solid black; }

Однако такая запись не очень удобна. Приходится повторять несколько раз один и тот же селектор, да и легко запутаться в их количестве. Поэтому пишите все свойства для каждого селектора вместе. Указанный набор записей в таком случае получит следующий вид (пример 5.3).

Пример 5.3. Компактная форма записи

td {
  background: olive;
  color: white;
  border: 1px solid black;
}

Эта форма записи более наглядная и удобная в использовании.

Имеет приоритет значение, указанное в коде ниже

Если для селектора вначале задаётся свойство с одним значением, а затем то же свойство, но уже с другим значением, то применяться будет то значение, которое в коде установлено ниже (пример 5.4).

Пример 5.4. Разные значения у одного свойства

p { color: green; }
p { color: red; }

В данном примере для селектора p цвет текста вначале установлен зелёным, а затем красным. Поскольку значение red расположено ниже, то оно в итоге и будет применяться к тексту.

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

Значения

У каждого свойства может быть только соответствующее его функции значение. Например, для color, который устанавливает цвет текста, в качестве значений недопустимо использовать числа.

Комментарии

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

Чтобы пометить, что текст является комментарием, применяют следующую конструкцию /* ... */ (пример 5.5).

Пример 5.5. Комментарии в CSS-файле

/* 
  Стиль для сайта htmlbook.ru
  Сделан для ознакомительных целей
*/
  
div {
  width: 200px; /* Ширина блока */
  margin: 10px; /* Поля  вокруг элемента */
  float: left; /* Обтекание по правому краю */
}

Как следует из данного примера, комментарии можно добавлять в любое место CSS-документа, а также писать текст комментария в несколько строк. Вложенные комментарии недопустимы.

Вопросы для проверки

1. Люба подключила к HTML-документу одновременно два стилевых файла — style1.css и style2.css. Причём в файле style2.css первой строкой импортируется еще один файл с именем style3.css. В файле style1.css цвет текста задается красным, в style2.css — синим, а в style3.css — зелёным. Какой цвет текста будет на странице?

  1. красный.
  2. синий.
  3. зелёный.
  4. чёрный.
  5. установленный в браузере по умолчанию.

2. В какой строке кода содержится ошибка?

  1. p { text-align: center; color: #000000 }
  2. div { color: red; font-size: 11pt; }
  3. title { color: #fc0; margin: 10px; }
  4. p { color: green; color; }
  5. html { float: left; }

3. Какая ошибка содержится в следующем коде?

/* --------------------------------
div {
color: #fc0; /* Цвет теска */
margin: 10px; /* Поля вокруг элемента */
float: left /* Обтекание по правому краю */
}
-------------------------------- */

  1. Опечатка в тексте комментария.
  2. Вложенные комментарии.
  3. Нет точки с запятой.
  4. Недопустимые значения у стилевых свойств.
  5. Лишние переносы в коде.

4. В какой строке содержится корректный синтаксис?

  1. body:color=black
  2. body{color:black}
  3. {body;color:black}
  4. {body:color=black}
  5. body{color=black}

5. Как правильно вставить комментарий в CSS-файл?

  1. ' комментарий
  2. // комментарий
  3. // комментарий //
  4. /* комментарий */
  5. <!-- комментарий -->

Ответы

1. синий.

2. p { color: green; color; }

3. Вложенные комментарии.

4. body{color:black}

5. /* комментарий */

Просмотров: 8 372
Комментариев: 2:   24-03-2016, 16:20
Распечатать
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 
Еще новости по теме:


Другие новости по теме:
Комментарии для сайта Cackle
ДОБАВИТЬ БАННЕР