CSS основы [Урок 2]

  • На форуме работает ручное одобрение пользователей. Это значит, что, если Ваша причина регистрации не соответствует тематике форума, а также Вы используете временную почту, Ваша учётная запись будет отклонена без возможности повторной регистрации. В дальнейшем - пожизненная блокировка обоих аккаунтов за создание мультиаккаунта.
  • Мы обновили Tor зеркало до v3!
    Для входа используйте следующий url: darkv3nw2...bzad.onion/
  • Мы вновь вернули telegram чат форуму, вступайте, общайтесь, задавайте любые вопросы как администрации, так и пользователям!
    Ссылка: https://t.me/chat_dark_time

GM`ka

Ненадежный

GM`ka

Ненадежный
13 Сен 2015
294
157
CSS основы» – второй урок учебника CSS. В этом уроке мы обсудим базовые особенности синтаксиса таблиц стилей CSS. Синтаксис CSS очень прост, хотя и не имеет ничего общего с html тегами.

Синтаксис CSS

Синтаксис каскадных таблиц стилей состоит из трех основных частей: селектора, свойства и значения, как это показано на примере ниже:

Селектор – определяемый элемент
Свойство – изменяемый атрибут
Значение – присваиваемое атрибуту значение
upload_2016-6-21_10-59-12.png

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

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

Пример:

HTML:
<!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 каждое свойство находится на отдельной строке. Во втором случае легче отыскивать нужные свойства и править их по необходимости, но при этом незначительно возрастает объем данных за счёт активного использования пробелов и переносов строк. Так что в любом случае способ оформления стилевых параметров зависит от разработчика.

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

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

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

Код:
td { background: olive; }
td { color: white; }
td { border: 1px solid black; }
Однако такая запись не очень удобна. Приходится повторять несколько раз один и тот же селектор, да и легко запутаться в их количестве. Поэтому пишите все свойства для каждого селектора вместе. Указанный набор записей в таком случае получит следующий вид:

Компактная форма записи:

Код:
td {
  background: olive;
  color: white;
  border: 1px solid black;
}
Эта форма записи более наглядная и удобная в использовании.

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

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

Разные значения у одного свойства

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

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

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

Далее предлагаю вам разобраться с основными особенностями синтаксиса в CSS:

Свойство элемента и значение, присваиваемое ему должны располагаться внутри фигурных скобок и разделяться двоеточием:

Код:
p {font–size: 75%}
Значения, состоящие более, чем из одного слова должны быть помещены в кавычки:

Код:
h1 {font – family: "lucida calligraphy"}
Если для одного селектора определяется одновременно несколько свойств, то они должны быть разделены точкой с запятой. После последнего свойства не обязательно ставить точку с запятой, хотя их присутствие не вызовет никакой ошибки:

Код:
table { font – family: arial, "sans serif"; border – style: dotted}
Если несколько одинаковых свойств должны быть применены одновременно к нескольким селекторам, то селекторы перечисляются через запятую:

Код:
p,table,li { font – family: "sans serif"; }
 

О нас

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

    Dark-Time 2015 - 2024

    При поддержке: XenForo.Info

Быстрая навигация

Меню пользователя