- Регистрация
- 24.09.2021
- Сообщения
- 38 390
Чему вы научитесь Вы узнаете что такое CSS, для чего нужен и как его правильно использовать. Описание Что такое CSS: объясняем простыми словами Почему нельзя обойтись одним HTML и при чём тут какие-то каскады? Встречая аббревиатуру CSS впервые, новички уже догадываются, что это как-то связано с сайтами. Разберёмся: CSS — Cascading Style Sheets — это каскадные таблицы стилей. По сути — язык, который отвечает за описание внешнего вида HTML-документа. Подавляющее большинство современных веб-сайтов работают на основе связки HTML+CSS. Теперь ответим на вопрос о том, что делает CSS. Всё просто: если HTML структурирует контент на странице, то CSS позволяет отформатировать его, сделать более привлекательным для читателя. Изначально веб-разработчики использовали исключительно HTML — так было на заре развития интернет-технологий. С помощью разметки можно было выделить параграф, заголовок, изменить начертание текста. А большего и не требовалось. Со временем этих возможностей стало мало — и появилась технология форматирования без изменения самого содержимого и структуры документа. CSS решил проблему «зоопарка» тегов форматирования, когда разные браузеры поддерживали разные теги. Их унификация и единая база упростили работу с веб-документами и облегчили жизнь веб-мастерам. CSS и стили CSS используется для определения стилей (правил) оформления документов — включая дизайн, вёрстку и вариации макета для различных устройств и размеров экрана. У такого способа форматирования несколько достоинств: теги не дублируются; документ проще обслуживать; внешний вид всего сайта можно изменить централизованно, а не корректировать форматирование каждой странички. Стили можно разметить внутри тега <HEAD> или использовать отдельный CSS-файл. Синтаксис CSS У языка CSS относительно простой синтаксис. Сначала прописывается селектор — он выбирает конкретный элемент на странице. Потом, после фигурных скобок, указываются свойства со значениями — между ними ставится двоеточие. Сами свойства отделяются друг от друга точкой с запятой. Спойлер селектор { свойство: значение ;} тег html Объявление класс id Что такое селектор в CSS? Это конструкция, которая позволяет выбрать отдельные или однотипные элементы на странице, чтобы их стилизовать. С селектора начинается каждый блок объявлений в CSS: .my-class { background-color: #999; } В качестве селектора в примере используется my-class. Все элементы с этим классом получают единое оформление — серый фон цвета #999. Каскады в CSS И всё-таки почему CSS — это именно Cascading Style Sheets? Дело в том, что в единую схему стили организуются при помощи каскада. Вот простой пример, который также поможет понять, что такое CSS-код и как он выглядит: p { color: green; font-size: 20px; } p { color: red; } При помощи каскадов мы присвоили элементу p красный цвет. Зелёный цвет, указанный выше красного, учитываться не будет. Используется то значение параметра, которое указано ниже, и это помогает избежать конфликтов. При этом размер шрифта — 20 пикселей — не меняется. Если упростить написанное выше, то получится: p { color: red; font-size: 20px; } Кроме того, один элемент можно сделать зависимым от нескольких селекторов разного типа. Пример: p { color: red; } p.important { font-size: 20px; } #intro { font-style: italic; } Чтобы использовать все параметры, в HTML указываем: <p class="important" id="intro"> CSS упрощает форматирование документов. </p> Здесь мы присвоили элементу следующие свойства: он красный, размером 20 пикселей и написан курсивом. Важно, что в данном случае у разных селекторов — разный приоритет. Их порядок: Селектор типа элемента (p). Селектор класса (.important). Селектор id (#intro). 1 — низкий приоритет, 3 — высокий. Приоритеты в CSS Обговорим подробнее вопрос приоритетов. Их иерархия работает следующим образом: Самый высокий приоритет у свойств, в конце объявления которых указано !important. Затем идут инлайновые стили, которые прописываются в теге через атрибут style. Ещё ниже приоритет стилей, заданных в теге style в самом документе. Далее следуют стили, подключённые к документу как внешний CSS-файл с использованием тега <link> Методологии CSS Начинающему веб-мастеру для работы с CSS достаточно просто знать, что такое стили и как их использовать, изучить основные свойства и способы их задавать. А вот при работе с большими проектами уже необходимо использовать специализированные инструменты, а также чёткие стандарты написания CSS. Иначе другие разработчики просто не смогут нормально обслуживать код. Единой методологии CSS нет. Существует несколько вариантов, и задача разработчика — выбрать ту методологию, которая оптимально ему подходит. Но сначала стоит разобраться с основами, научиться работать с CSS. Кстати, новые варианты появляются не так уж редко, так что за новинками стоит следить. Наиболее популярные современные методологии CSS — это Atomic CSS (Functional CSS) и CSS в JavaScript. В основе первого варианта лежит использование максимального количества базовых классов, чтобы как можно чаще применять их повторно. Сторонники второго варианта считают, что стили CSS стоит определять не в отдельной таблице, а внутри каждого компонента. Будущее CSS CSS постоянно развивается — сейчас активно разрабатывается уже третье поколение этого стандарта. В нём спецификация разделяется на модули, причём разработка и развитие каждого из них идут независимо. Разработчики современных браузеров постепенно расширяют поддержку стандарта CSS3. Несколько лет назад начало формироваться и четвёртое поколение стандарта CSS, но пока спецификации находятся на уровне драфтов. Для кого этот курс: Начинающие веб-разработчики. 
|
