Часто возникает желание сделать сайт запоминающимся, удобным и красивым. С чего же начать изучение веб-дизайна? Как можно уже сейчас декорировать свой сайт c помощью CSS?
Базовые правила стиля CSS
Для начала нужно иметь представление о том, из чего состоит сайт. В разработке сайта есть главные составляющие:
- HTML;
- CSS;
- JavaScript.
Чтобы легче было понять, что за что отвечает, представим человечка. Его скелет, это html сайта (язык разметки). Он покажет последовательность, где именно находится голова, тело, руки, ноги.
HTML определяет структуру сайта, его содержание. Вот здесь будет header (голова), здесь body (тело), sidebar left/right (правая/левая рука), а здесь footer (ноги). Прописываются они в виде тегов и атрибутов. HTML реализует придуманный прототип сайта.
CSS− это уже наша внешность. Мы задаем цвет волос, глаз, рост, габариты. С помощью CSS мы настраиваем HTML под наши нужды (задаем желаемый шрифт, изображение, цвета и т.д.).
Java script−это уже действия, программирование (добавление анимации, функционал).
Каскадные таблицы стилей, называемые CSS, описывают отображение HTML-элементов на носителях. CSS очень упрощают работу, позволяя работать с несколькими веб-страницами одновременно.
Добавление CSS к элементам HTML можно осуществить 3 способами:
- встроенный атрибут style внутри HTML-элемента;
- внутренний блок <style> в разделе <head>;
- внешний отдельный CSS файл с ссылкой на него в разделе <head>.
Рассмотрим все 3 способа.
Допустим, нам нужно изменить цвет заголовка на синий. В самом теге заголовка h1 пропишем:
Встроенный CSS используется при создании уникального стиля для одного элемента HTML.
Во втором варианте мы подключим блок <style> в разделе head.
Внутренний CSS применяется при создании стиля для одной HTML-страницы.
В этих двух способах происходит смешение HTML и CSS, образуется огромный файл. В работе это крайне неудобно. При разработке больших сайтов приходится добавлять цвет и шрифт на каждую страницу. Такие способы используются редко и точечно.
А вот третий способ самый надежный. Внешний способ добавления стилей используется для определения стиля для многих HTML-страниц.
Прежде чем стилизовать, нужно прописать ссылку в разделе head:
<link rel=”stylesheet”href=”style.css”>
Затем в отдельном блоке CSS прописываем нужные нам стили.
Для стилизации отдельных элементов, тегов будем использовать селектор class. Для этого в HTML послу нужного тега укажем class и его название, а в файле CSS пропишем нужные свойства.
Если нам нужно привязать class ко всем заголовкам, то ставим вначале просто точку и название нашего class (в данном случае название-blue).
Если только для данного заголовка, то прописываем тег h1 и потом точку.
Это самый правильный способ стилизации по классам.
Есть еще один способ стилизации c помощью селектора Id. Он используется в определенных случаях. Id на странице не должно быть более 1-2.
В HTML вместо class ставим селектор id, а в CSS ставим вместо точки решетку.
Если нам нужно применить стиль ко всему документу, прописываем звездочку.
Вес селектора id выше, чем по class. Вес остальных классов одинаков, поэтому будет читаться последний написанный класс.
Правила написания классов и синтаксис CSS
В CSS существуют правила оформления классов и написания кода:
- в названии класса используются только английские буквы;
- названия классов пишутся строчными буквами;
- классы не должны состоять из более 3 слов, а между словами ставится тире или знак подчеркивания.
Если нужно указать сразу несколько классов, то разделите имена классов пробелом.
Синтаксис CSS имеет определенную последовательность:
В начале идет селектор (это тот HTML элемент, который вам нужно стилизовать). Затем в фигурных скобках прописываются через точку с запятой одно или несколько свойств CSS, разделенных двоеточием.
Эти базовые основы CSS помогут понять как все устроено. Но самое интересное впереди.
Эти базовые основы CSS помогут понять как все устроено. CSS – это довольно мощный инструмент, с помощью которого можно управлять цветом, размером, расстояниями, формами, а более поздняя версия языка, CSS3, позволяет получать потрясающие результаты.
