Домой / Windows XP / Основы CSS. CSS — язык форматирования Что такое и как выглядит css

Основы CSS. CSS — язык форматирования Что такое и как выглядит css

14.10.2023 Windows XP

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

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

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

Более подробно о том, что такое Cascading Style Sheet (CSS) и для чего она используется читайте ниже.

Видеоверсия:

Что такое CSS?

Как вы знаете, при создании сайта мы формируем его содержимое при помощи языка гипертекстовой разметки - HTML(Hypretext Markup Language). С помощью него мы создаем навигационные блоки, наполняем веб-страницу текстовым, аудио/видео-контентом. В общем, создаем структуру сайта.

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

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

Наглядный пример

Образно говоря, создание сайтов можно сравнить с рисованием. Перед тем как мы начнем ловко управляться кисточкой и холстом, нам стоит определиться с тем, что именно будет изображено на нашей картине. Представим, что мы решили нарисовать пейзаж, на котором будет изображена птица на фоне деревьев и гор. Можно сказать, что на этом этапе мы определили само содержимое картины.


Подобная ситуация обстоит с HTML, при помощи которого мы формируем содержание веб-страницы.


Сайт на голом HTML, без CSS
Тот же сайт с подключенными таблицами стилей

Для большей наглядности, давайте перейдем на какой-нибудь веб-сайт, например, facebook.com . Следующим шагом нам потребуется установить расширение для браузера под названием WEbDeveloper . Я его уже установил, ну а вам будет достаточно ввести в поисковике фразу WEbDeveloper, перейти по ссылке и в открывшемся окне кликнуть по кнопке "Установить".

У меня это расширение установлено и управляется при помощи иконки с шестеренкой в правой верхней части экрана. Я предлагаю на сайте faceboook.com отключить таблицы стилей и посмотреть только на ее содержимое. Для этого мы переходим в раздел CSS и нажимаем на Disable All Styles. Стили отключаются и мы видим как невзрачно выглядит содержимое данной веб-страницы без оформления.


Внешний вид социальной сети без подключенных CSS файлов

То есть сейчас мы видим сайт на голом HTML. Чтобы включить css файлы этой страницы мы возвращаемся к WEbDeveloper и снимаем галочку с Disable All Styles.

Таблица стилей снова подключилась и мы видим содержимое веб-страницы с оформлением.


Соц. сеть с подключенными CSS файлами

Как работает CSS?

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

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

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

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

Зачем изучать CSS?

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

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

Плюсы CSS

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

Как быстро научиться основам CSS

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

Каскадные таблицы стили CSS (Cascading Style Sheets) – стандарт стилей, объявленный консорциумом W3C. Термин каскадные указывает на возможность слияния различных видов стилей и на наследование стилей внутренними тегами от внешних.

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

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


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


Возможно, Вам понадобятся также:


По методам добавления стилей в документ различают три вида стилей.

Внутренние стили

Внутренние стили определяются атрибутом style конкретных тегов. Внутренний стиль действует только на определенные такими тегами элементы. Этот метод мало отличается от традиционного HTML.

Пример

Абзац с текстом синего цвета

РЕЗУЛЬТАТ:

Абзац с текстом синего цвета

Абзац с текстом красного цвета

Не стоит использовать внутренние стили слишком часто, так как тогда Web-документ оказывается перегружен кодом и его внешний вид трудно изменить.

Глобальные стили

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


Атрибут type="text/css" , ранее обязательный для тега .........

Серый цвет текста во всех абзацах Web-страницы

РЕЗУЛЬТАТ:

Серый цвет текста во всех абзацах Web-страницы

Серый цвет текста во всех абзацах Web-страницы

Внешние (связанные) стили

Внешние (связанные) стили определяются в отдельном файле с расширением css . Внешние стили позволяют всем страницам сайта выглядеть единообразно.

Для связи с файлом, в котором описаны стили, используется тег , расположенный в контейнере ... .

В этом теге должны быть заданы два атрибута: rel="stylesheet" и href , определяющиЙ адрес файла стилей.

Пример
......... ......... .........

Подключение стилей

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

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

P { text-indent: 30px; font-size: 14px; color: #666; }

Объявление стиля – это пара свойство CSS: значение CSS .

Например: color: red

При внутреннем подключении стиля правило CSS, которое является значением атрибута style , состоит из объявлений стиля, разделенных точкой с запятой. Например:

Селекторы CSS

Селектор Описание Подробнее
* Любой элемент
E Элемент, определенный тегом E
E#myid Элемент E с идентификатором "myid"
E.myclass Элемент E класса "myclass"
E Селектор существования атрибута
E Селектор равенства атрибута
E Селектор атрибута со списком значений Селекторы атрибутов
E Селектор префикса атрибута
E Селектор суффикса атрибута
E Селектор подстроки атрибута
E:link Элемент E – еще не посещенная пользователем ссылка Динамические псевдоклассы
E:visited Элемент E – уже посещенная пользователем ссылка Динамические псевдоклассы
E:hover Элемент E при наведении на него указателя мышки Динамические псевдоклассы
E:active Элемент E, активированный пользователем Динамические псевдоклассы
E:focus Элемент E в фокусе Динамические псевдоклассы
E:target Элемент E, который является целью ссылки Целевой псевдокласс
E:lang Элемент E, написанный на указанном языке Псевдокласс языка
E:enabled Элемент E – доступный элемент формы Псевдоклассы состояний
E:disabled Элемент E – недоступный элемент формы Псевдоклассы состояний
E:checked Элемент E – включенный флажок или переключатель Псевдоклассы состояний
E:indeterminate Элемент E – неопределенный флажок или переключатель Псевдоклассы состояний
E:root Элемент E, корень документа Структурные псевдоклассы
E:nth-child(n) Элемент E, n-й ребенок родительского элемента Структурные псевдоклассы
E:nth-last-child(n) Элемент E, n-й ребенок родительского элемента, считая с конца Структурные псевдоклассы
E:nth-of-type(n) n-й элемент типа E Структурные псевдоклассы
E:nth-last-of-type(n) n-й элемент типа E, считая с конца Структурные псевдоклассы
E:first-child Элемент E, первый дочерний элемент родителя Структурные псевдоклассы
E:last-child Элемент E, последний дочерний элемент родителя Структурные псевдоклассы
E:first-of-type Первый элемент типа E Структурные псевдоклассы
E:last-of-type Последний элемент типа E Структурные псевдоклассы
E:only-child Единственный у родителя дочерний элемент Структурные псевдоклассы
E:only-of-type Единственный у родителя элемент типа E Структурные псевдоклассы
E:empty Элемент E, не содержащий дочерних элементов Структурные псевдоклассы
E:not(X) Элемент E, который не соответствует простому селектору X Псевдокласс отрицания
E::first-line Первая строка элемента E Псевдоэлементы
E::first-letter Первая буква элемента E Псевдоэлементы
E::before Содержимое до элемента E Псевдоэлементы
E::after Содержимое после элемента E Псевдоэлементы
E::selection Выделение в элементе E Псевдоэлементы
E F Элемент F, который находится внутри элемента E
E > F Элемент F, который находится непосредственно внутри элемента E
E + F Элемент F, который следует сразу после элемента E
E ~ F Элемент F, который следует после элемента E

Универсальный селектор

Универсальный селектор соответствует любому элементу html-документа.

Для обозначения универсального селектора применяется символ "звёздочка" (*).

Его используют, если надо установить одинаковый стиль для всех элементов Web-страницы. Например:

* { margin: 0; padding: 0; }

В некоторых случаях символ "звёздочка" (*) может быть опущен:
*.myclass и .myclass эквиваленты,
*#myid и #myid эквивалентны

Селекторы тегов

В качестве селектора может выступать любой html-тег, для которого определяются правила стилевого оформления. Например:

H1 {color: red; text-align: center;}

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

H1, h2, h3, h4 {color: red; text-align: center;}

Селекторы идентификаторов

HTML предоставляет возможность присвоить уникальный идентификатор любому тегу. Идентификатор задается атрибутом id . Например:

...

Значение идентификатора должно начинаться с латинской буквы и может содержать буквы (,), цифры (), "дефисы" (-) и "подчеркивания" (_).

Значения всех атрибутов id в html-документе обязаны быть уникальными. Если встречаются id с одинаковыми значениями, то эти идентификаторы игнорируются, а код Web-страницы становится невалидным.

В CSS-коде селектор идентификатора обозначается знаком "решетка" (#). Так как идентификатор id применяется только к уникальным элементам, название тега перед знаком "решетка" (#) обычно опускают:

Div#a1 {color: green;}

аналогично

#a1 {color: green;}

Желательно использовать id не для стилевого оформления элемента, а для обращения к нему через скрипты или перехода по ссылке.

Селекторы классов

Для стилевого оформления чаще всего используются селекторы классов. Класс для тега задается атрибутом class . Например:

...

Имя класса должно начинаться с латинской буквы и может содержать буквы (,), цифры (), "дефисы" (-) и "подчеркивания" (_).

Если атрибут id применяется для уникальной идентификации, то при помощи атрибута class тег относят к той или иной группе.

В CSS-коде селектор идентификатора обозначается знаком "точка" (.). Разные теги можно отнести к одному классу. В таком случае имя тега перед знаком "точка" (.) опускают:

I.green {color: #008000;} b.red {color: #f00;} .blue {color: #00f;}

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

...

Если некоторые из этих классов содержат одинаковые свойства стиля, но с разными значениями, то будут применены значения стиля класса, который в CSS-коде расположен ниже.

Селекторы атрибутов

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


h1 {color: #800000;} /* элемент h1, у которого есть атрибут title */
input { border: 1px solid #ссс; padding: 4px 6px; width: 300px; }
a { text-decoration: none; border-bottom: 1px solid #06c; color: #06c; }
span { display: inline-block; background-image: url("/img/icon_sprite.png"); }
a, a { background: url("pic.gif") bottom left no-repeat; display: inline-block; width: 32px; }
{ display: block; float: left; width: 280px; }

Между именем тега и квадратной скобкой ([) не должно быть пробела!


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

Простые селекторы можно связать в определенные последовательности на основе отношений элементов в дереве Web-документа. Такие конструкции называют комбинаторами.

Контекстные селекторы

Один из самых часто используемых комбираторов – контекстный селектор.

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

Пример
  1. Пушкин А.С.
    • «Выстрел»
    • «Метель»
    • «Дубровский»
  2. Гоголь Н.В.
    • «Ревизор»
    • «Тарас Бульба»
    • «Мертвые души»
  3. Толстой Л.Н.
    • «Война и мир»
    • «Анна Каренина»
    • «Воскресение»

РЕЗУЛЬТАТ:

  1. Пушкин А.С.
    • «Выстрел»
    • «Метель»
    • «Дубровский»
  2. Гоголь Н.В.
    • «Ревизор»
    • «Тарас Бульба»
    • «Мертвые души»
  3. Толстой Л.Н.
    • «Война и мир»
    • «Анна Каренина»
    • «Воскресение»

Дочерние селекторы

Дочерний селектор определяет элемент, который находится внутри другого непосредственно. В дочернем селекторе простые селекторы разделены знаком "больше" (>).

Пример
  1. Пушкин А.С.
    • «Выстрел»
    • «Метель»
    • «Дубровский»
  2. Гоголь Н.В.
    • «Ревизор»
    • «Тарас Бульба»
    • «Мертвые души»
  3. Толстой Л.Н.
    • «Война и мир»
    • «Анна Каренина»
    • «Воскресение»

РЕЗУЛЬТАТ:

  1. Пушкин А.С.
    • «Выстрел»
    • «Метель»
    • «Дубровский»
  2. Гоголь Н.В.
    • «Ревизор»
    • «Тарас Бульба»
    • «Мертвые души»
  3. Толстой Л.Н.
    • «Война и мир»
    • «Анна Каренина»
    • «Воскресение»

Соседние селекторы

Соседний селектор определяет знак "плюс" (+), разделяющий две последовательности простых селекторов. Элементы, представленные этими последовательностями, находятся внутри одного контейнера и следуют второй за первым непосредственно, не разделенные никакими другими тегами.

Пример

РЕФЛЕКСОТЕРАПИЯ

РЕЗУЛЬТАТ:

РЕФЛЕКСОТЕРАПИЯ

Смежные селекторы

Смежный селектор определяет знак "тильда" (~), разделяющий две последовательности простых селекторов. Элементы, представленные этими последовательностями, находятся внутри одного контейнера и следуют второй за первым (необязательно непосредственно).

Пример

РЕФЛЕКСОТЕРАПИЯ

"Все акты сознательной и бессознательной жизни по способу происхождения суть рефлексы". И.М. Сеченов

Рефлексотерапия – лечение заболеваний через управление рефлексами. Успешно применяется в программах комплексного лечения или как индивидуальная методика.

РЕЗУЛЬТАТ:

РЕФЛЕКСОТЕРАПИЯ

"Все акты сознательной и бессознательной жизни по способу происхождения суть рефлексы". И.М. Сеченов

Рефлексотерапия – лечение заболеваний через управление рефлексами. Успешно применяется в программах комплексного лечения или как индивидуальная методика.



.

Привет. Пора бы что-то по теме написать. Из заголовка понятно, о чем этот пост, но я бы хотел внести немного ясности.

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

А вот делиться интересными фишками, хитростями да и вообще полезными приемами, которые использую в работе, с удовольствием буду!

Ближе к делу

Возьму определения с Википедии:

HTML (от англ. HyperText Markup Language - «язык разметки гипертекста»;) - стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме.

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

Вроде бы и так понятно, что такое HTML и CSS , но все равно скажу своими словами.

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

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

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

Немного моей истории

То, что я сейчас напишу уже есть на странице , но я все равно еще раз напишу и дополню:)

Первый свой сайт я создал в 2008 году. Работает он на системе Ucoz. Не помню точно как, но один мой одноклассник рассказал мне о Ucoz и о том, как легко там можно сделать свой сайт. Мне стало интересно. Не знаю почему, но было типа «прикольно» сделать свой сайт. Вот тогда я и узнал про HTML. Но именно узнал, а не научился:) Кажется, это был 9-й класс школы. Применяя базовые знания по фотошопу и Ucoz, я все же смог сделать сайт.

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

Второе в жизни упоминание о тэгах было на первом курсе по информатике. Да, по этому предмету было много абсурдных заданий и лучше бы мы изучали Автокад вместо MS Access (градостроители все же), но за задание сделать сайт из пары страниц HTML я все же благодарен. Поначалу очень плевался на такое, но мне понравилось, когда сел делать.

Взял конспект лекций и начал писать структуру страницы по тегам, что переписал с доски, но…Понял, что ничего того, что я придумал у меня не получается и начал читать в интернете подробнее о html (я тогда еще и не подозревал о css). В итоге моя работа была лучшей в группе, но увы этого почти никто не оценил, так как ставили оценки за наличие работы, а вот если бы был рейтинг по работам…

Ну да ладно, я все равно был доволен собой. Передо мной стала задача разместить элементы на странице так, как я хочу, а не так, как получалось по конспекту лекций. Вся проблема в том, что в HTML нету такой функциональности, благодаря которой можно разместить элемент с отступом в 20 пикселей от правого края окна браузера. И тогда я подумал….а что если я необходимый элемент помещу в таблицу, которую помещу в ячейку главной таблицы, грани которой не видно, но которая занимает всю страницу и задавая размеры ячейкам, я смогу поместить тот элемент с отступом в 20px от правого края??…Попробовал - получилось!

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

Что для этого нужно?

В октябре 2011 года я стал серьезно изучать все это дело, что плавно перетекло в основную деятельность моей жизни. Я хотел делать сайты. Я знал, что для этого нужен HTML. Потом наткнулся на упоминания о CSS. Решил чуток подробнее понять, что это и…это было очень туго! Те сайты, на которые я попадал, давали вроде бы и базовые знания, но не было того момента, который бы подвел полного чайника от незнания к базовым моментам. А потом я случайно наткнулся на бесплатные видео уроки от Евгения Попова. Первым делом меня смутила необходимость вводить свою почту и имя, чтобы получить бесплатный видеокурс. Ну блин, еще заспамят меня, а то и почту взломают, не хочу! Но все же решился)

Но…на мой почтовый ящик так ничего и не пришло (должна была прийти ссылка на скачивание бесплатных курсов по HTML и CSS). Поэтому я пошел на ex.ua и скачал их там:) Рассуждая геройски, подумал, что курс по HTML мне не нужен, я вроде немного знаю его, а вот CSS посмотрю. Посмотрел первый урок - понял, что нужно смотреть и учить HTML сначала.

Что вам сказать, ребята…это лучше, чем все сайты с уроками вместе взятые. Везде автор пишет максимально просто, так как он это видит, но все равно этого не достаточно для чайника. Просто автору даже в голову не может прийти, что «этого» можно не знать. А Е.Попов не только объясняет как для маленьких и тупых, но еще и показывает каждый свой шаг и это именно то, что нужно вам, если хотите научится HTML/CSS!

Выгоды мне никакой от того, что я вам предлагаю этот курс, но вот Евгению скорее всего будет. А мне и не жалко. Благодаря ему мне легче было окунутся в веб-разработку.

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

После изучения тех курсов я создал свой первый настоящий сайт (в плане, что на личном хостинге и т.д.). Да, я еще не подозревал о том, что такое PHP и MySQL, и WordPress, и т.д…

НО это уже совсем другая история…

Есть много в интернете полезных сайтов с уроками, но когда нужно действительно хорошее решение вашего вопроса, то лучше всего искать на habrahabr.ru .

Вначале я часто пользовался шпаргалками: раз и два .

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

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

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

Дополнительно CSS может использоваться и с другими документами типа XML, наиболее часто используются документы XUL и SVG.

Чтобы понять, что такое CSS, разберем простой пример. Когда сотрудник редакции газеты или журнала производит верстку издания, он делает пометки, по которым затем разрабатывается внешний вид готового материала. Например: «выделить заголовок красным», «сделать отступ», «увеличить расстояние между информационными блоками» и так далее. При работе с сайтами нельзя прописать подобные заметки обычным языком, браузер не сможет их прочитать. Чтобы он учел отметки, необходимо прописать их на языке CSS.

Принцип работы CSS

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

CSS применяется для выполнения стилистических решений, а также для компоновки документов типа HTML: задачи высоты, колонок, размещения элементов и так далее.

Как и где можно написать CSS

  • CSS может быть прописан как атрибут непосредственно в HTML.

  • Можно применять тег