Просматривая различные веб-страницы, вы наверняка обращали внимание, что некоторые из них выглядят потрясающе, в то время как другие - “так себе”. И если вам интересна веб-разработка, возможно вы также задавались вопросом, как с использованием кода изменяется дизайн страниц.

Основным инструментом, с помощью которого разработчики создают и меняют облик страниц, является CSS (Cascading Style Sheets, с англ. - каскадные таблицы стилей). В данной статье рассмотрим базовые принципы работы CSS и поговорим о важности технологии в разработке. Можете воспользоваться быстрыми ссылками, чтобы перейти к нужной вам части статьи:

• CSS простыми словами
• Как создается веб-страница?
• Основы CSS
• Возможности и важность CSS

CSS (Cascading Style Sheets) - это язык форматирования, который позволяет сделать сайт внешне привлекательным, создать сложные шаблоны веб-страниц и придать им индивидуальность. CSS делает HTML-контент хорошо организованным, более красивым и удобочитаемым.

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

Как создается веб-страница?

Перед тем как мы перейдем к более углублённому знакомству с CSS, давайте уделим несколько минут базовым определениям, начиная с веб-страницы (если для вас всё это “легче лёгкого”, то сразу переходите к следующему разделу):

Веб-страница - это гипертекстовый документ, подключенный к Всемирной паутине.

Веб-сайт - это набор веб-страниц, размещённых в домене.

Каждая веб-страница состоит из трех компонентов:

1. Содержание
2. Презентация
3. Поведение

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

Презентация - это визуальное представление элементов на веб-странице. Здесь на сцену и выходит CSS.

Несмотря на то что есть возможность написать CSS непосредственно в HTML-документе, лучше этого не делать, т.к. основная идея CSS - обеспечить разделение содержания и представления. Это позволяет оформить один и тот же HTML-документ многими различными способами, и при этом он будет оставаться доступным для разных методов рендеринга (например, программ чтения с экрана).

Поведение описывает то, как пользователь взаимодействует с веб-страницей. Как правило, поведение на странице обрабатывается с помощью JavaScript.

Теперь, когда мы разобрались из каких ключевых элементов строятся веб-страницы, давайте выясним, как применять CSS для стилизации контента.

Используя CSS мы можем задать для всего текста, заключенного в какой-то HTML-элемент, различные стили. К примеру: размер шрифта - 40 пикселей, шрифт - Arial, цвет - зелёный. Можно задавать и более серьёзные параметры - например, добавлять границы, изменять поля, контролировать точное позиционирование элемента и даже добавить различные эффекты и анимацию.

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

Даже когда мы не применяем CSS, HTML-элементы обладают определенными "дефолтными" стилями (т.е. которые по умолчанию добавляются браузерами). Например, элементы текста и заголовков обычно занимают всю веб-страницу. При этом ссылки располагаются в строке, не разбивая текст.

Существует один шрифт по умолчанию и некоторый интервал, добавленный к каждому элементу для удобства чтения. Всё, что больше этого, уже требует подключения CSS.

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

Также это значительно упрощает процесс для тех, кому в будущем может потребоваться редактирование ваших документов.

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

Стиль, применяемый к какому-либо элементу, передаёт браузеру информацию о том, как этот элемент необходимо правильно оформить и отобразить.

Язык, на котором стиль "говорит" с браузером, называется синтаксисом. Например, чтобы задать размер шрифта и его цвет для всех абзацев, необходимо написать:

p {  color: blue; font-size: 2em; } 

Здесь стиль даёт команду: “Текст должен быть голубого цвета с высотой 2em” (em-единица измерения, стандарт высоты шрифта).

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

p {     color: blue;     font-size: 2em; } 

Так читать код становится гораздо удобнее, не правда ли? Давайте разберём вышеуказанный фрагмент. В нём присутствуют:

• селектор p
• открывающая фигурная скобка {
• свойство color; значение blue
• cвойство font-size
• значение 2em
• закрывающая фигурная скобка }

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

Также есть возможность присваивать стили сразу нескольким элементами по классу. Для этого используется атрибут class. Пример:

.className {     color: blue;     font-size: 2em; } 

Аналогичным образом можно присваивать стили элементам согласно их идентификаторам. В этом случае используем атрибут id:

#idName {      color: blue;     font-size: 2em; } 

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

Блок объявления - код после селектора. Он включает условия изменений, применяемых к селектору. Начинается знаком { и заканчивается знаком }.

​Объявление - это код, описывающий свойство и значение элемента. В конце каждого объявления стоит точка с запятой. Между свойством и значением - двоеточие.

Вы также можете ставить пробел между двоеточием и значением свойства. Это необязательно, но позволяет легче читать код. Допустимо оставлять между элементами пробел любой ширины (color: blue; или color: blue;)

Свойство. В CSS есть множество вариантов изменений, называемых свойствами. Они обозначают определённый эффект стиля. У большинства свойств название напрямую отображает их назначение, например:

font-size (размер шрифта);margin-top (отступ от верхнего края);background-color (цвет фона).

Значение - описывает, как именно свойство будет обработано браузером. Каждое свойство имеет набор допустимых значений, например: сделать фон зелёным, оранжевым или фиолетовым. Для разных свойств CSS необходимы соответствующие им типы значений, например цвет (red или #FF0000), длина (30px, 8in или 2em), расположение (top, center или bottom) и т.п.

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

Подводя итог, вот ключевые преимущества CSS:

• Гибкость - CSS даёт свободу размещения элементов HTML в любом месте страницы, сохраняя при этом HTML-разметку организованной и чистой.
• Кроссбраузерная и кроссдевайсная совместимость - вы можете настраивать отображение веб-страницы различными браузерами и на разных устройствах с учётом их отличий и особенностей. Иначе говоря, это возможность создавать различные версии веб-страниц и сайтов с использованием одного и того же HTML-документа, адаптируя каждую версию под необходимые параметры.
• Огромные возможности настройки - CSS позволяет вносить практически неограниченные изменения в стили страниц: цвета, ссылки, границы, эффекты наведения и перехода, шрифты и т.д.
• Простота и эффективность - возможность легко создавать и настраивать стили одновременно для множества веб-страниц.
• Экономия времени - вы можете один раз написать таблицы стилей и затем многократно использовать их для неограниченного количества страниц.
• Высокая скорость загрузки страниц - благодаря CSS существенно сокращается длина кода HTML, что, в свою очередь, приводит к более быстрой загрузке веб-страниц.

#Tech Orda 2024, #Astana Hub, #IT-incubator