CSS основы - Mexanik IT

Каждая страница сайта хоть как-то должна быть оформлена (ну или почти каждая ;). Для этого мы используем так называемую «Таблицу стилей». Она может быть либо встроенной в саму страничку, либо внешней, подключаемой. Можно конечно описывать каждый элемент на странице отдельно, но это громоздко, возможность ошибок гораздо выше, да и грузиться будет подольше. Что встроенная, что внешняя имеют одинаковый формат <style> ...... </style>.
CSS (Cascading Style Sheets) — это таблица стилей, которая описывает оформление, расположение на странице и даже поведение объекта. Таблицы применяется для управления контентом HTML (можно и XML). Внешние таблицы удобны еще и тем, что не надо на каждой страничке расписывать код CSS, его можно прикрепить одной строкой. Ниже предстален примитивный вариант таблицы силей:

<style>
 p {
  color: red;
 }
 .text {
  font-size: 24px;
 }
</style>

<html>
 <p>Какой-то контент</p>
 <p class="text">Еще какой-то контент</p>
</html>

<style>

p {

color: red;

}

.text {

font-size: 24px;

}

</style>

<html>

<p>Какой-то контент</p>

<p class="text">Еще какой-то контент</p>

</html>

Это внутренняя таблица. В ней описано, что абзац, заключенный в теги <p> будет красного цвета, а <p class=»text»> будет еще и со шрифтом размера 24px, как это описано в <style>.

Внешние таблицы — это отдельный файл, подключаемый таки образом:

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<title>Стили Skillbox</title>
		<link href="my_styles.css" type="text/css" rel="stylesheet">
	</head>
	<body>
		<p>Привет, мир!</p>
	</body>
</html>

<!DOCTYPE HTML>

<html>

<head>

<title>Стили Skillbox</title>

</head>

<body>

<p>Привет, мир!</p>

</body>

</html>

Подключение происходит по директиве <link href="my_styles.css" rel="stylesheet">. Т.е. в этом-же катологе расположен файл с таблицей стилей и именем my_style.css.

Важно: если в самой странице описаны какие-то правила css — то они превалируют над подключенными.,Mexanik

Итак — формат файла css:

Достаточно ознакомиться с простейшими правилами CSS, и можно легко собрать вполне симпатичный сайт со всем необходимым контентом. «Простота» обеспечивается за счет понятного синтаксиса.

Синтаксис CSS в отдельном файле в соответствующем формате (.css) выглядит так:

селектор {
  свойство: значение;
}

селектор {

свойство: значение;

}

Селектор – это ссылка на элемент в HTML, над которым будет вестись работа (оформление).
Свойство – определенная характеристика элемента, которую нужно изменить. Например, размер или цвет.
Значение – цифровое или текстовое обозначение для выбранного свойства.

Попробуем поменять цвет текста в блоке section на красный:

section {
  color: red;
}

section {

color: red;

}

Как видно — всё понятно ))).

Функции

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

Функция calc()

Напрмер, рассмотрим функцию calc(), с попомщью которой можно выполнять простые математические операции в CSS:

html

html:
<div class="outer">
  <div class="box">Ширина внутреннего контейнера равна 90% - 30px.</div>
</div>

				
					
				1
2
3
4

						html:
<div class="outer">
  <div class="box">Ширина внутреннего контейнера равна 90% - 30px.</div>
</div>

					

			

Вызов функции состоит из имени функции, круглых скобок и значения внутри них. В приведённом выше примере с помощью функции calc() устанавливается ширина контейнера равная 90% от ширины родтиельского блока минус 30 пикселей. Результат такого расчёта нельзя вычислить заранее и ввести как статическое значение.

css:
.outer {
  border: 5px solid black;
}

.box {
  padding: 10px;
  width: calc(90% - 30px);
  background-color: green;
  color: white;
}

css:

.outer {

border: 5px solid black;

}

.box {

padding: 10px;

width: calc(90% - 30px);

background-color: green;

color: white;

}

Вызов функции состоит из имени функции, круглых скобок и значения внутри них. В приведённом выше примере с помощью функции calc() устанавливается ширина box равная 90% от ширины родтительского блока минус 30 пикселей. Т.е. мы объявляем прямоугольную область, шириною во всю страницу (ЭТО РОИТЕЛЬСКИЙ БЛОК). Внутри него мы объявляем еще один блок box, размер которого будет 90% — 30px и закрашиваем его в background—color: green; — зеленый. Результат такого расчёта нельзя вычислить заранее и ввести как статическое значение.

Обычно CSS-стили используются для создания и изменения стиля элементов веб-страниц и пользовательских интерфейсов, написанных на языках HTML и XHTML, но также могут быть применены к любому виду XML-документа, в том числе XML, SVG и XUL. Простыми словами, CSS — это язык описания внешнего вида веб-страницы, который используется для настройки: цветов, типографики, местоположения компонентов страницы, стилей элементов и любого другого дизайна компонентов страницы.

Отделяя стиль представления документов от содержимого документов, CSS упрощает создание веб-страниц и обслуживание сайтов.

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

Объявление стиля состоит из двух частей: селектора и объявления. В HTML имена элементов нечувствительны к регистру, поэтому «h1» работает так же, как и «H1». Объявление состоит из двух частей: имя свойства (например, color) и значение свойства (grey). Селектор сообщает браузеру, какой именно элемент форматировать, а в блоке объявления (код в фигурных скобках) перечисляются форматирующие команды — свойства и их значения.

css_osnovy

Вот основные шаги, как работает CSS:

Пользователь открывает сайт, например, переходя на него со страницы результатов поиска.
Браузер начинает загрузку HTML-документа.
Файл преобразуется в DOM (объектная модель документа в оперативной памяти).
Браузер анализирует все компоненты, на которые в HTML-документе есть URL, и которые связаны с этим документом. К таким ресурсам и компонентам как раз и относятся стили (а также, например, любые медиафайлы: картинки, GIF, видеофайлы).
Внимание: если в HTML-документе ссылки на стили нет, то браузер не сможет получить к ним доступ. JS-код обрабатывается далее, но не на этом этапе.
Браузер начинает проверять файл стилей. В частности, он пытается отсортировать правила, содержащиеся в нём (по их типу селектора). Каждое правило определяется в свою категорию (например, ID, элемент, класс). Далее, на этом промежуточном шаге, также происходит связывание обнаруженных селекторов с правилами. Правила применяются к определенным DOM-узлам, а затем к каждому из них привязывается определённый стиль. Всё, теперь браузер знает, как именно нужно отрисовывать страницу.
Происходит отрисовка страницы уже с настроенным дизайном её элементов.

Подключения стилей к веб-странице.

Файл стилей может публиковаться разными способами, внутренними и внешними. Самый частый сценарий подключения CSS — самостоятельный файл, который затем подключается к веб-странице через тег link:

<!DOCTYPE html>
<html>
   <head>
      .....
     <link rel="stylesheet" type="text/css" href="style.css">
   </head>
   <body>
      .....
   </body>
</html>

<!DOCTYPE html>

<html>

<head>

.....

</head>

<body>

.....

</body>

</html>

Другой способ подключения стилей к сайту — самостоятельный, без файла-родителя. Для этого можно использовать директиву import в контейнере style:

<!DOCTYPE html>
<html>
   <head>
      .....
      <style media="all">
         @import url(style.css);
      </style>
   </head>
 <body> 
    ..... 
 </body>
</html>

<!DOCTYPE html>

<html>

<head>

.....

@import url(style.css);

</style>

</head>

<body>

.....

</body>

</html>

При этом CSS может быть указан непосредственно внутри документа: (опять же, обратите внимание на тег style внутри head), т.е. прямо в HTML странице.

<!DOCTYPE html>
<html>
   <head>
      .....
      <style>
         body { 
            color: red;
         }
      </style>
   </head>
   <body>
      .....
   </body>
</html>

<!DOCTYPE html>

<html>

<head>

.....

<style>

body {

color: red;

}

</style>

</head>

<body>

.....

</body>

</html>

Наконец, CSS может быть указан в атрибуте style:

<!DOCTYPE>
<html>
   <head>
      .....
   </head>
   <body>
      <p style="font-size: 20px; color: green; font-family: arial, helvetica, sans-serif">
         .....
      </p>
   </body>
</html>

<!DOCTYPE>

<html>

<head>

.....

</head>

<body>

.....

</p>

</body>

</html>

Теперь давайте посмотрим на важные особенности синтаксиса CSS. Напомним, главная цель CSS — передать браузеру инструкции, согласно которым он будет отрисовывать страницу. Согласно этой идее главными будут являться два элемента: property и value.

Первый элемент (property) — это непосредственное свойство, которое и будет изменено.
Второй элемент (value) — это значение, которым движок браузера будет обрабатывать свойство. Вот от этих двух блоков и строится дальнейший синтаксис «стилей».

Объявления. Два вышеуказанных блока (property and value) используются в качестве объявлений.

Так работает объявление или declaration в CSS

Так работает объявление или declaration в CSS

Поиск совпадений между такими объявлениями и элементами — основная задача движка «стилей». Вот пример синтаксиса CSS:

selectorlist { property: value; [more property:value; pairs] }

1	selectorlist { property: value; [more property:value; pairs] }

Как видим для списка селекторов указываются: свойство, затем его значение, затем — добавляются аналогичные пары. Здесь всё просто. Но большое разнообразие свойств и огромное количество допустимых значений, часто приводят к тому, что новички допускают ошибки в синтаксисе (и не только). А если выбрано некорректное значение для какого-либо элемента, то браузер не будет выполнять такое объявление.

Ещё один простой пример синтаксиса CSS:

strong { color: red; }
div.menu-bar li:hover > ul { display: block; }

1 2	strong { color: red; } div.menu-bar li:hover > ul { display: block; }

Важно: данные внутри пары свойство / значение всегда зависимы от регистра. Пробелы, при этом, игнорируется (в любых местах). Сама пара всегда отделяется при помощи знака «:» (двоеточие).

Блоки. Традиционно объявления в CSS объединяются в блоки. Их синтаксис подразумевает открывающую и закрывающую фигурную скобку. Схематично вышесказанное можно представить вот так:

Между фигурными скобками располагается содержимое

Между фигурными скобками располагается содержимое

Блок объявлений. Подразумевает отделение самих объявлений внутри при помощи знака ;

Вот как работают объявления, блоки и блоки объявлений друг с другом:

Первым указываются объявления. Точка с запятой — используется для разделения двух объявлений

Первым указываются объявления. Точка с запятой — используется для разделения двух объявлений

Операторы CSCS (они же statements)

Наборы правил — своего рода кирпичики для постройки финального файла стиля для сайта. Обычно — это длинный-длинный список из разных параметров

Пример пересечения действия операторов at-rules и rulesets

Пример пересечения действия операторов at-rules и rulesets

Но не только данные о внешнем виде элементов страницы передают в «стилях». Также есть технические сведения, которые должны передаваться движку браузера (например, данные о счетчиках веб-аналитики, наборах, настройках типографики и другое). Для таких данных задействуются иные, специфические виды утверждений. Это, в первую очередь, at-rules и rulesets (наборы правил).

At-rules. Их характерный маркер — наличие символа @ в начале. Например, вот так:

/* Наша структура */
@ID (ПРАВИЛО);
/* Пример: приказывает браузеру задействовать UTF-8 кодировку*/
@charset "utf-8";

/* Наша структура */

@ID (ПРАВИЛО);

/* Пример: приказывает браузеру задействовать UTF-8 кодировку*/

@charset "utf-8";

Примеры:

@charset — установка кодировки. Определяет кодировку символов, используемую таблицей «стилей».
@import — нужно задействовать внешний файл CSS.
@namespace — содержимое документа должно интегрироваться как для XML (только пространство имён).

Существуют и вложенные at-rules. Это множество CSS-операторов, которое допустимо задействовать в качестве разных правил в какой-либо группе или как самостоятельный оператор-CSS. Примеры вложенных операторов: @media, @page, @viewport, @supports.

Rulesets (наборы правил). Применяемость CSS файла по отдельности к каждому элементу на странице — это хорошо, но неудобно. Именно поэтому в «стиле» подразумевают применение любых объявлений к любым частям веб-страницы. В «стилях» вы можете объединить наборы правил с конкретными блоками объявлений.

Чтобы соединить наборы правил с блоками объявлений, каждому блоку должен предшествовать селектор

Чтобы соединить наборы правил с блоками объявлений, каждому блоку должен предшествовать селектор

Парные селекторы объявления — это и есть набор правил CSS. Но здесь есть некоторые сложности, например: часто определённому элементу в документе релевантны сразу несколько селекторов. Для определения приоритета иерархичности используется каскадный алгоритм. Именно он уточнит иерархию какого-либо свойства, если оно упоминается с различными значениями.

О селекторах, комбинаторах и псевдоэлементах

Селектор устанавливает точное правило, которое будет использоваться для конкретного элемента веб-страницы.

В стилях CSS распространено большое количество контейнеров: по атрибуту, универсальный, по ID, по типу элемента, по классу. Также для работы с селекторами предусмотрены комбинаторы и псевдоэлементы (используются для выбора того, что отсутствует в HTML-коде). Что касается комбинаторов, то они упрощают выбор элементов. Например, комбинатор adjacent sibling — позволяет выбирать последующие соседние элементы, но только если у них имеется общий родитель.

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

Важно: при помощи селекторов вы не сможете выбрать родительский элемент с контейнером внутри.

Мы затронули далеко не все элементы CSS, так как это обзорная статья — с самыми главными моментами. Получить полное представление о каскадной таблице стилей, вы можете записавшись на курс «Основы вёрстки сайтов». Вы досконально изучите не только таблицу стилей, но и HTML, а также другие важные для создания сайтов технологии — всего за 5 недель.

Разбираем пример CSS верстки

Чтобы лучше усвоить всю информацию выше — предлагаем изучить реальный пример файла стилей для сайта.

p {
   font-family: Liberation Sans, helvetica, sans-serif; 
}
h2 {
   font-size: 22pt; 
   color: green; 
   background: white; 
}
.note {
   color: green; 
   background-color: white; 
   font-weight: bold; 
}
p#paragraph1 {
   padding-left: 12px;
}
a:hover {
   text-decoration: none;
}
#news p {
   color: green;
}
[type="button"] {
   background-color: green;
}

p {

font-family: Liberation Sans, helvetica, sans-serif;

}

h2 {

font-size: 22pt;

color: green;

background: white;

}

.note {

color: green;

background-color: white;

font-weight: bold;

}

p#paragraph1 {

padding-left: 12px;

}

a:hover {

text-decoration: none;

}

#news p {

color: green;

}

[type="button"] {

background-color: green;

}

Давайте посмотрим, что есть в этом коде и как его расшифровать.

Сразу в глаза бросается наличие семи CSS-правил с различающимися селекторами. Рассмотрим их подряд сверху вниз, также, как они расписаны в этом коде.

Правило для абзаца обозначено привычным элементом р. Шрифт по умолчанию — Liberation Sans, но если он не может быть загружен, то будут использоваться другие шрифты.

Если Liberation Sans будет недоступен, его заменят helvetica

Если Liberation Sans будет недоступен, его заменит Helvetica

Правило для заголовка второго уровня обозначено элементом h2. Начертание такого заголовка должно иметь зеленый цвет, а бэкграунд — белый цвет. Обратите внимание, что указан весьма крупный шрифт (22 pt).

Это правило для всех H2-заголовков

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

Настраиваем внешний вид элементам note

Настраиваем внешний вид элементам с классом note

Правило убирает подчеркивание по умолчанию во всех ссылках при наведении курсора на такой элемент.

Убираем подчеркивание при наведении для URL

Убираем подчеркивание при наведении на ссылки

Правило для конкретных элементов p, расположенных внутри другого компонента c идентификатором news.

Теперь этот элемент будет иметь зеленый цвет

Теперь этот элемент будет иметь зеленый цвет

Правило только для элементов, имеющих атрибут type со значением button. Устанавливает зеленый цвет фона.

Поменяли задний фон у кнопок на зеленый

Поменяли цвет фона у кнопок на зеленый

Методологии CSS

Методологии CSS регулируют способы работы и написания кода. Они также устанавливают то, как именно будет выглядеть итоговый код и по каким правилам он должен писаться.

В разное время существовали несколько популярных методологий. Часть из них — продолжает жить, другая часть — была забыта по разным причинам. Упоминать все существующие когда-либо методологии — не имеет смысла. Ведь в конце 2022 — начале 2023 разработчики активно используют только пять из них:

BEM. Вся суть этой методологии сразу становится понятна, если знать, как расшифровывается это название — модификатор блочных элементов. Посмотрите на этот код:

<form class="loginform loginform--errors">
    <label class="loginform__username loginform__username--error">
        Username <input type="text" name="username" />
    </label>
    <label class="loginform__password">
        Password <input type="password" name="password" />
    </label>
    <button class="loginform__btn loginform__btn--inactive">
        Sign in
    </button>
</form>

Username <input type="text" name="username" />

</label>

Password <input type="password" name="password" />

</label>

</button>

</form>

При помощи BEM мы формируем такие компоненты, которые можно задействовать повторно. Вернёмся к примеру выше. Обратите внимание — класс loginform включает в себя три компонента:

loginform__username (используется для ввода имени пользователя).
loginform__password (используется для ввода пароля пользователя).
loginform__btn (используется для того, чтобы пользователь мог повторно отправить форму).

Systematic, она же систематическая. В этой методологии можно обнаружить большую часть принципов, заложенных в популярных SUIT CSS, OOCSS, SMACSS и конечно BEM. Systematic CSS — довольно интуитивная методология, которая является хорошей альтернативой искусственно усложненным системам. Вот как может выглядеть код CSS, согласно этой методологии, для вывода панели навигации и поисковой формы.

Итак — формат файла css:

Функции

Функция calc()

Подключения стилей к веб-странице.

Операторы CSCS (они же statements)

О селекторах, комбинаторах и псевдоэлементах

Разбираем пример CSS верстки

Методологии CSS

Добавить комментарий Отменить ответ