Содержание

Введение в CSS | htmlbook.ru

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

Стили представляют собой набор параметров, управляющих видом и положением элементов веб-страницы. Чтобы стало понятно, о чем идет речь, посмотрим на рис. 1.1.

Рис. 1.1. Веб-страница, созданная только на HTML

Это обычная веб-страница, оформленная без всяких изысков. Тот же самый документ, но уже с добавлением стилей приобретает совершенно иной вид (рис. 1.2).

Рис. 1.2. Веб-страница, созданная на HTML и CSS

Перемена разительна, поэтому заглянем в код, чтобы понять, в чем же разница (пример 1.1).

Пример 1.1. Исходный код документа

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <title>Флексагон</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <h2>Флексагон</h2>
  <p>Флексагон представляет собой бумажную фигуру, которая имеет 
   три и более стороны. Поначалу кажется, что это невозможно, но вспомните 
   ленту Мёбиуса, она ведь имеет всего одну сторону, в отличие от листа  бумаги, 
   и, тем не менее, реальна. Так же реален и флексагон, который легко сделать и 
   склеить в домашних условиях. Он выглядит как двухсторонний шестиугольник, но 
   стоит согнуть его особым образом, и мы увидим третью сторону. Легко убедиться, 
   что мы имеем дело именно с тремя сторонами, если раскрасить их в разные цвета. 
   Перегибая флексагон, по очереди будем наблюдать все его поверхности.</p>
 </body>
</html>

Сам код HTML никаких изменений не претерпел и единственное добавление — это строка <link rel=»stylesheet» href=»style.css»>. Она ссылается на внешний файл с описанием стилей под именем style.css. Содержимое этого файла показано в примере 1.2.

Пример 1.2. Содержимое стилевого файла style.css

body {
  font-family: Arial, Verdana,  sans-serif; /* Семейство шрифтов */
  font-size: 11pt; /* Размер основного шрифта в пунктах  */
  background-color: #f0f0f0; /* Цвет фона веб-страницы */
  color: #333; /* Цвет основного текста */ 
}
h2 {
  color: #a52a2a; /* Цвет заголовка */
  font-size: 24pt; /* Размер шрифта в пунктах */
  font-family: Georgia, Times, serif; /* Семейство шрифтов */
  font-weight: normal; /* Нормальное начертание текста  */
}
p {
  text-align: justify; /* Выравнивание по ширине */
  margin-left: 60px; /* Отступ слева в пикселах */
  margin-right: 10px; /* Отступ справа в пикселах */
  border-left: 1px solid #999; /* Параметры линии слева */
  border-bottom: 1px solid #999; /* Параметры линии снизу */
  padding-left: 10px; /* Отступ от линии слева до текста  */
  padding-bottom: 10px; /* Отступ от линии снизу до текста  */
}

В файле style.css как раз и описаны все параметры оформления таких тегов как <body>, <h2> и <p>. Заметьте, что сами теги в коде HTML пишутся как обычно.

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

CSS представляет собой свой собственный язык, который совпадает с HTML только некоторыми значениями, например способом определения цвета.

Типы стилей

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

Стиль браузера

Оформление, которое по умолчанию применяется к элементам веб-страницы браузером. Это оформление можно увидеть в случае «голого» HTML, когда к документу не добавляется никаких стилей. Например, заголовок страницы, формируемый тегом <h2>, в большинстве браузеров выводится шрифтом с засечками размером 24 пункта.

Стиль автора

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

Стиль пользователя

Это стиль, который может включить пользователь сайта через настройки браузера. Такой стиль имеет более высокий приоритет и переопределяет исходное оформление документа. В браузере Internet Explorer подключение стиля пользователя делается через меню , как показано на рис. 1.3.

Рис. 1.3. Подключение стиля пользователя в браузере Internet Explorer

В браузере Opera аналогичное действие происходит через команду (рис. 1.4).

Рис. 1.4. Подключение стиля пользователя в браузере Opera

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

Вопросы для проверки

1. Требуется задать цвет заголовка зелёным. Какое стилевое свойство подойдёт для этой цели?

  1. font-color
  2. color
  3. font-family
  4. text
  5. font-size

2. Что такое стиль?

  1. Способ сокращения HTML-кода за счёт переноса части данных в другой файл.
  2. Язык разметки гипертекстовых документов.
  3. Набор правил форматирования элементов веб-страницы.
  4. Метод преобразований текстовых документов в HTML.
  5. Технология, представляющая собой разные приёмы для вёрстки HTML-кода.

3. Как расшифровывается аббревиатура CSS?

  1. Colorful Style Sheets
  2. Cascading Style Sheets
  3. Computer Style Sheets
  4. Creative Style Sheets
  5. Common Style Sheets

Ответы

1. color

2. Набор правил форматирования элементов веб-страницы.

3. Cascading Style Sheets

Введение в CSS — Изучение веб-разработки

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

Необходимые условия

Перед запуском этого модуля вы должны иметь:

  1. Базовое знакомство с использованием компьютеров и пассивным использованием Интернета (то есть, просматривая его, потребляя контент).
  2. Базовая рабочая среда, описанная в разделе Установка базового программного обеспечения, и понимание того, как создавать файлы и управлять ими, подробно описано в разделе Работа с файлами.
  3. Основное знакомство с HTML, как описано в модуле Введение в HTML.

Примечание: Если вы работаете на компьютере / планшете / другом устройстве, на котором у вас нет возможности создавать свои собственные файлы, вы можете опробовать (большую часть) примеры кода в онлайн-программах кодирования, таких как JSBin или Thimble.

Руководства

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

Что такое CSS?
CSS (Каскадные таблицы стилей) позволяет создавать великолепно выглядящие веб-страницы, но как же это работает? Эта статья объясняет, что такое CSS с помощью простого примера синтаксиса, а также охватывает некоторые ключевые термины о языке.
Начало работы с CSS
В этой статье мы возьмем простой HTML-документ и применим к нему CSS, изучая некоторые практические вещи о языке.
Как структурирован CSS
Теперь, когда у вас есть представление о том, что такое CSS и как его использовать, пришло время немного углубиться в структуру самого языка. Мы уже встречали множество концепций, обсуждаемых здесь; Вы можете вернуться к этому, чтобы повторить, если вы находите какие-либо более поздние концепции запутанными.
Как работает CSS
Мы изучили основы CSS — для чего он нужен и как писать простые таблицы стилей. В этом уроке мы рассмотрим, как браузер берет CSS и HTML и превращает их в веб-страницу.
Использование ваших новых знаний
С учетом того, что вы узнали за последние несколько уроков, вы должны обнаружить, что вы можете форматировать простые текстовые документы с использованием CSS, чтобы добавить к ним свой собственный стиль. Эта статья дает вам шанс сделать это.

Смотрите также

Intermediate Web Literacy 1: Intro to CSS
Отличный базовый курс от Mozilla, в котором рассматриваются и тестируются многие навыки, о которых говорилось в модуле Введение в CSS. Узнайте о стилях элементов HTML на веб-странице, селекторах CSS, атрибутах и значениях.

CSS — Изучение веб-разработки | MDN

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

План обучения 

Прежде чем браться за CSS, Вам стоит разобраться с основами HTML. Мы рекомендуем изучить модуль Введение в HTML. После его прохождения переходите к:

  • изучению CSS, начиная с модуля Введение в CSS;
  • далее — к более продвинутой теме HTML-модули
  • после этого — к модулю JavaScript и тому, как его использовать, чтобы добавить Вашим веб-страницам динамического функционала.

Мы рекомендуем изучать HTML и CSS одновременно. HTML гораздо интереснее в сочетании с CSS и изучать эти языки раздельно было бы ошибочно.

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

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

Модули

Этот раздел содержит модули в порядке, наиболее подходящем для работы с ними. Лучше всего начать с самого первого.

Введение в CSS
CSS (каскадные таблицы стилей) используется для стилизации и компоновки веб-страниц, — например, для изменения шрифта, цвета, размера и интервала содержимого, разделения его на несколько столбцов или добавления анимации и других декоративных элементов. Этот модуль обеспечивает хорошее начало Вашего пути к освоению CSS с основами того, как он работает, как выглядит синтаксис и как Вы можете начать использовать его для добавления стилей в HTML.
Дизайн текста
Здесь мы рассмотрим основы стилизации текста, в том числе изменение шрифта, жирности, курсивного написания, межстрочного и межбуквенного интервалов, теней и других особенностей текста. Завершается модуль демонстрацией применения пользовательских шрифтов на вашей странице, оформлением списков и ссылок.
Стилизация блоков
Далее мы рассмотрим дизайн блоков, один из основных шагов к разметке веб-страницы. В этом модуле мы кратко рассмотрим работу с блочными элементами, а затем ознакомимся с приемами управления блоками, установив такие свойства, как поля, оступы и границы, настроим фоновые цвет и изображение, а также рассмотрим более сложные функции, такие как тени и фильтры.
Размещение элементов с помощью CSS
К текущему моменту мы познакомились с основами CSS. Мы знаем, как оформлять текст, как оформлять и изменять блоки, в которых находится ваш контент. Пришло время узнать, как разместить ваши блоки в нужных местах в зависимости от области просмотра и тому подобного. Мы уже знаем достаточно, чтобы погрузиться в изучение разметки с помощью CSS, в то, как изменять отображение в зависимости от особенностей экрана, как иcпользовать современные методы разметки, такие как Flexbox и CSS grid, и некоторые традиционные методы разметки, которые все ещё применяются.
Адаптивный дизайн (TBD)
В настоящее время существоет множество устройств, способных осуществлять просмотр веб-страниц, адаптивный веб-дизайн (RWD — Responsive Web Design) стал основным навыком веб-разработки. В этом модуле рассказывается об основных принципах и инструментах RWD, объясняется, как применять различные CSS к документу в зависимости от таких функций устройства, как ширина экрана, ориентация и разрешение, а также изучить имеющиеся возможности отображения различных видео и изображений в зависимости от характеристик используемого пользователем устройства.

Решаем часто встречающиеся проблемы  в CSS

В разделе Использование CSS для решения общих проблем даны ссылки на разделы, объясняющие, как следует использовать CSS для решения самых распространенных проблем при создании веб-страницы.

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

Смотрите также

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

Большая подборка лучших ресурсов для изучения CSS

Подборка ресурсов для изучения CSS с разделением на тематические группы. Два по цене одного: план обучения и лучшие учебники в одной статье!

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

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

Селекторы

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

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

Развиваем скилл в CSS-селекторах
Пошаговое руководство для изучения CSS-селекторов.

Box Model

Еще одна базовая теоретическая концепция в CSS. Она объясняет, как формируются различные элементы страницы и почему реальная ширина блока не всегда равна значению свойства width.

Открывая Box Model
Отличный вводный ресурс с грамотными визуальными пояснениями и подробным разбором свойств.

The box model
Полноценная документация коробочной модели с интерактивными примерами.

Построение макета

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

Начало работы с CSS-макетами
Замечательное руководство для новичков и тех, кто хочет освоить современные CSS-тренды. Разобраны все инструменты макетирования: от float до Grid.

Суперруководство по Flexbox – обучение на примерах
Flexbox-система стала самым крупным прорывов в CSS за последние десять лет и продолжает оставаться востребованной.

Комплексное руководство по выравниванию на Flexbox
Flexbox существенно упрощает задачу горизонтального и вертикального выравнивания элементов.

Flexbox Froggy
Милая и полезная игра, которая позволяет практиковать свои навыки flexbox, позиционируя забавных лягушек на лилиях.

Руководство для начинающих по CSS Grid
Большой, простой и максимально визуализированный гайд по Grid-системе.

Полное руководство по Grid
Один из самых полных ресурсов для изучения CSS Grid, включающий все возможные свойства и значения Grid-правил.

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

Еще одна коллекция интересных фактов о CSS Grid
Использование сокращенных свойств, явных и неявных строк и столбцов и еще немало полезных уроков. Множество примеров, в которых можно копаться в свое удовольствие.

Шпаргалка по Grid Layout
Удобная шпаргалка с основами Grid-разметки.

CSS Grid Garden
Еще одна отличная обучающая игра, в которой вам нужно позиционировать морковку в саду.

Как браузеры позиционируют float-элементы
Системы Flexbox и Grid практически вытеснили старый добрый float из процесса создания макетов, но иногда он все еще нужен.

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

Z-index: разделение слоев с помощью CSS
На первый взгляд z-index – очень простое свойство, но в его использовании есть множество подводных камней. Эта статья подробно объяснит, откуда что берется.

Позиционирование
Полная документация для изучения CSS позиционировая, включающая также новый «липкий» (sticky) способ позиционирования.

Что не так со схлопывающимися маргинами?
Схлопывание маргинов – камень преткновения для многих начинающих веб-разработчиков. Эта статья очень наглядно объясняет причины и значение этого явления.

Стилизация текста

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

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

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

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

Используем @font-face
Подробное руководство по использованию пользовательских шрифтов.

Стилизация контейнеров

Контейнеры, или коробки (boxes), – главные структурные элементы веб-страниц. С их устройством вы уже разобрались, изучая box model. Теперь пришла пора украшать.

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

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

Box-shadow, одна из лучших новых функций CSS3
Подробное введение в свойство box-shadows, которое научит вас создавать тени с нужными параметрами и даже комбинировать их самым невероятным образом.

CSS Outline
Outline немножко потерялся в сравнении с border, но это тоже очень мощный инструмент выделения блоков со своими преимуществами.

Множественные рамки
4 способа создания нескольких рамок для одного блока.

CSS-фильтры
Очень простая инструкция по использованию CSS-фильтров.

filter
Полная документация для изучения CSS фильтров с примерами.

Единицы измерения

Практически все величины (размер, позицию, параметры тени) нужно как-то измерять.

Значения и единицы CSS
Введение во все существующие типы единиц в CSS: от пикселей до неизмеряемых значений.

REM vs EM
Лучшее описание отзывчивых единиц rem и em со всеми их плюсами и минусами.

Знакомство с единицами вьюпорта
Единицы вьюпорта позволяют согласовать макет с размерами экрана.

Функция calc() с примерами
Calc – один из самых полезных инструментов CSS. Эта статья расскажет, как его правильно использовать.

Цвета и градиенты

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

Color
Подробный разбор различных цветовых систем.

CSS-градиенты
Создание различных градиентов и браузерная поддержка.

CSS-градиенты
Визуальный инструмент для генерации CSS градиентов.

Как добавить градиенты к изображениям
Статья расскажет, как сделать градиент выцветания фонового изображения.

Прогресс-бар на CSS3
Использование градиентов для создания красивых прогресс-баров.

Переходы и анимация

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

Объяснение CSS transitions
Большое пошаговое введение в использование переходов CSS.

CSS transitions
Хорошая статья для изучения CSS переходов с отличными примерами различных функций плавности.

Введение в CSS-анимацию
Этот материал объясняет принцип работы анимации ключевых кадров в CSS.

Animista
Графический интерфейс для изучения и создания анимации.

Трансформации

CSS позволяет перемещать и изменять элементы в 2d или 3d пространстве. Трансформации можно объединять с плавными переходами, получая невероятные эффекты.

Трансформации
Замечательное подробное введение в различные типы преобразований CSS и их последствия.

Высокопроизводительные анимации
Статья расскажет, как создавать высокопроизводительные анимации с помощью CSS.

Псевдоклассы и псевдоэлементы

Таинственные «псевдоштучки» могут быть очень полезными, если нужно реализовать на странице нечто нестандартное.

Учимся использовать :after и :before
Подробное введение в псевдоэлементы: before и: after.

На что способны псевдоэлементы
Большой список удивительных возможностей псевдоэлементов CSS.

Анимация псевдоэлементов
С помощью псевдоэлементов можно создавать сложные и красивые анимации.

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

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

Селекторы псевдоклассов
Полный перечень всех доступных CSS-псевдоклассов.

@-правила

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

@-правила CSS
Обзор различных @-правил и их возможностей.

CSS медиа-запросы
Использование медиа-запросов для адаптации страницы к различным экранам.

Как писать mobile-first CSS
Mobile-first – популярный подход к разработке адаптивного дизайна.

Специфичность

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

Специфика специфичности
Отличное введение в теорию CSS. Коротко и по делу.

CSS-специфичность: что нужно знать
Подробный обзор концепции специфичности со множеством примеров и списком полезных ресурсов.

Сохраняем низкую CSS-специфичность
Чем ниже специфичность стилей, тем лучше. Эта статья расскажет, как следовать этому правилу.

Препроцессоры

Использование препроцессоров облегчает и ускоряет CSS-разработку.

Основы Sass
Руководство по основным функциям Sass.

LESS за 10 минут
Полезное руководство для изучения CSS-фреймворка LESS для начинающих.

Stylus
Еще один популярный препроцессор CSS с лаконичным синтаксисом.

Введение в PostCSS
PostCSS для CSS – это аналог Babel для JavaScript.

CodeKit vs. Prepros
Эти инструменты позволяют компилировать код препроцессоров в чистый CSS без использования сложных систем сборки.

CSS-архитектура

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

Введение в объектно-ориентированный CSS (OOCSS)
OOCSS – одно из первых низкоспецифичных соглашений об именовании в CSS.

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

SMACSS
Одна из первых крупных архитектурных CSS-систем с великолепной документацией, в которой доступно изложена концепция систематизации стилей.

ITCSS: масштабируемая и поддерживаемая CSS-архитектура
Одна из немногочисленных хороших статей по архитектуре ITCSS.

ECSS
Еще один подход к организации CSS кода.

Подход 80-20 для устойчивого SCSS
Только самые важные и широко используемые функции SCSS для начинающих веб-разработчиков.

Популярные практики

Широко распространенные и полезные практики CSS, которые сделают вашу жизнь немного проще.

Autoprefixer
Автоматическая расстановка браузерных префиксов существенно упрощает работу.

Линтинг CSS со stylelint
Держите свои стили чистыми, валидными и свободными от ошибок.

О normalize.css
Рассказ о том, зачем нужна нормализация стилей.

Фреймворки

Создавайте сайты быстрее и проще с помощью CSS-фреймворков.

Bootstrap
Самый популярный CSS-фреймворк со множеством настроек.

Bootstrap 4 за 30 минут
Отличный учебник по последней версии Bootstrap.

ZURB Foundation
Фреймворк имеет огромное количество SCSS-настроек и позволяет создавать собственные расширяемые компоненты на базе имеющихся.

Semantic UI
Мощная фреймворк с широкими возможностями тематизации.

Learn Semantic
Обширный набор учебных пособий для Semantic UI.

Bulma
Компактный и легкий фреймворк для тех, кто не любит излишества.

MaterializeCSS
Фреймворк реализует систему Google Material Design. Есть реализации для многих популярных js-фреймворков.

Комплексные ресурсы

Caniuse.com
Ключевой инструмент для определения поддержки браузером любой функции CSS.

CSS-шпаргалка
Обширная шпаргалка по всем свойства и значениям CSS.

Альманах CSS
Алфавитный онлайн-альманах свойств и ключевых слов с описаниями, интерактивными примерами и массой полезной информации.

Рассылки

Регулярные информационные рассылки помогут вам идти в ногу с CSS-миром.

Делитесь своими любимыми ресурсами для изучения CSS в комментариях.

Оригинал: The Ultimate Guide to Learning CSS

Самоучитель CSS | Учебный курс

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

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

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

Влад Мержевич

Веб-разработчик, автор нескольких книг, посвящённых созданию сайтов, HTML и CSS. Кандидат технических наук.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 19.11.2018

Редакторы: Влад Мержевич

Как научиться разрабатывать сайты

Что такое CSS, изучаем CSS основы с нуля, рекомендуется всем новичкам!

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

Возможно раньше вы уже слышали об этом термине и о том, что он реально может сделать для вас и вашего сайта.

CSS (Cascading Style Sheet) это аббревиатура, которая переводится как Каскадные таблицы стилей.

Изучение CSS: что я могу сделать с его помощью?

CSS это, прежде всего, язык стилей, определяющий отображение HTML документов на блоге или сайте. Например таблицы стилей хорошо работают со шрифтами, цветом, полями, строками, высотой, шириной, фоновыми изображениями, позиционированием и многое другое. Вот например как бы выглядел мой сайт smarticle.ru если бы на нем не было css стилей:

Сайт с отключенными стилями CSS

Реально просто полная каша из текста и картинок, а вот как выглядит сайт с включением таблицы стилей (тот же участок):

Сайт с включенными стилями

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

Всего лишь несколько уроков из нашей серии и вы уже сможете сделать свои собственные стили и использовать их на своих сайтах.

В чем кроется различие между HTML и CSS?

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

Звучит наверное немного заумно и не понятно. Продолжайте чтение и изучение CSS и вы все поймете.

В старые добрые времена, когда Мадонна была девственницей, один парень по имени Тим Бернерс Ли изобрел всемирную паутину, которой мы так активно сегодня пользуемся, а язык разметки HTML предназначался для структурирования текста. Автор мог только делать разметку текста. «Тут заголовок» или «Тут параграф», применяя теги, например
<h2> и <p> .

Когда Веб стал набирать популярность, дизайнеры стали искать новые пути форматирования онлайн документов. Для удовлетворения их потребностей производители браузеров (в то время Netscape и Microsoft) придумали новые html теги, такие как, например,
<font> , которые несколько отличались от привычных тегов, определив расположение, там где они будут находится, а не саму структуру.

Это также привело к тому, что оригинальные структурные теги, такие как
<table>  стали все больше применяться в макетах страниц, вместо добавления структуры в текст. Таким образом появилась так называемая «табличная верстка». Были такие теги как
<blink> , которые поддерживались только одним типом браузеров. «Вам нужно использовать браузер X для просмотра этой страницы» — вот такие условия были на многих сайтах.

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

Какие они основные преимущества CSS?

Появление каскадных страниц вызвало революцию в мире веб дизайна. Вот список этих преимуществ:

  • Контроль расположения элементов на всех страницах из одного файла стилей
  • Абсолютный контроль над всей разметкой сайта
  • Можно разделять стили (одни – для отображения дизайна, другие – для текста и печатания, третьи – для отображения в мобильных устройствах)
  • Многочисленные передовые и сложные методы

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

Знакомство с CSS — Изучение кода HTML и CSS

Урок 3

В этом уроке
3
CSS
Поделиться

CSS — это сложный язык, обладающий довольно большой мощностью.

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

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

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

Каскад

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

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

  
  
  
 1
2
3
4
5
6
7
8 
 п {
  фон: оранжевый;
  размер шрифта: 24 пикселя;
}
п {
  фон: зеленый;
}
 
 
 Поскольку селектор абзаца, который устанавливает цвет фона на  зеленый , идет после селектора абзаца, который устанавливает цвет фона на  оранжевый , он будет иметь приоритет в каскаде. Все абзацы появятся на зеленом фоне  .Размер шрифта останется  24  пикселей, потому что второй селектор абзаца не определил новый размер шрифта.
 Каскадные свойства 
 Каскад также работает со свойствами внутри отдельных селекторов. Снова, например, предположим, что мы выбираем все элементы абзаца и устанавливаем для них цвет фона  оранжевый . Затем непосредственно под объявлением свойства и значения фона  orange  мы добавляем другое объявление свойства и значения, устанавливая цвет фона на  green , как показано здесь.
  
  
  
 1
2
3
4
5 
 п {
  фон: оранжевый;
  фон: зеленый;
}
 
 
 Поскольку объявление цвета фона  зеленый  идет после объявления цвета фона  оранжевый , оно будет иметь приоритет над фоном  оранжевый , и, как и раньше, наши абзацы будут отображаться с фоном  зеленый .
 Все стили будут располагаться каскадом от верха нашей таблицы стилей к низу нашей таблицы стилей.Однако бывают случаи, когда каскад работает не так хорошо. Такие случаи возникают, когда используются разные типы селекторов, и специфика этих селекторов нарушает каскад. Давайте взглянем.
 Расчетная специфичность 
 Каждый селектор в CSS имеет вес специфичности. Вес специфичности селектора вместе с его размещением в каскаде определяет, как будут отображаться его стили.
 В Уроке 1 «Создание вашей первой веб-страницы» мы говорили о трех различных типах селекторов: селекторах типа, класса и идентификатора.Каждый из этих селекторов имеет различный вес специфичности.
 Селектор типа имеет самый низкий вес специфичности и содержит значение  0-0-1 . Селектор класса имеет средний вес специфичности и имеет значение  0-1-0 . Наконец, селектор ID имеет высокий вес специфичности и содержит значение  1-0-0 . Как видим, баллы специфичности рассчитываются по трем столбцам. В первом столбце подсчитываются селекторы идентификаторов, во втором столбце подсчитываются селекторы классов,
 Изучение стиля HTML с помощью CSS — Изучение веб-разработки 
 Cascading Stylesheets — или CSS — это первая технология, которую вы должны начать изучать после HTML.В то время как HTML используется для определения структуры и семантики вашего контента, CSS используется для его стилизации и размещения. Например, вы можете использовать CSS, чтобы изменить шрифт, цвет, размер и интервал вашего контента, разделить его на несколько столбцов или добавить анимацию и другие декоративные функции.
 Хотите стать фронтенд-разработчиком? 
 Мы составили курс, который включает всю важную информацию, необходимую для достижения вашей цели.
 Начать
 Предварительные требования 
 Вы должны изучить основы HTML, прежде чем пытаться использовать CSS.Мы рекомендуем вам сначала проработать наш модуль Введение в HTML.
 После того, как вы поймете основы HTML, мы рекомендуем вам изучать дополнительно HTML и CSS одновременно, переходя от одного раздела к другому. Это связано с тем, что HTML намного интереснее и интереснее изучать, когда вы применяете CSS, и вы не можете действительно изучить CSS, не зная HTML.
 Перед тем, как начать этот раздел, вы также должны быть знакомы с использованием компьютеров и пассивного использования Интернета (т.е., просто глядя на него, потребляя контент). У вас должна быть настроена базовая рабочая среда, как подробно описано в разделе «Установка основного программного обеспечения», и вы должны понимать, как создавать файлы и управлять ими, как описано в разделе «Работа с файлами» — оба эти компонента являются частью нашего модуля «Начало работы с веб-полным» для начинающих.
 Также рекомендуется проработать «Начало работы с Интернетом», прежде чем переходить к этому разделу, особенно если вы новичок в веб-разработке. Однако многое из того, что описано в статье об основах CSS, также рассматривается в нашем модуле «Первые шаги CSS», хотя и гораздо более подробно.
 Модули 
 Этот раздел содержит следующие модули в рекомендуемом порядке для работы с ними. Обязательно стоит начать с первого.
 Первые шаги CSS
 CSS (каскадные таблицы стилей) используются для стилизации и компоновки веб-страниц — например, для изменения шрифта, цвета, размера и интервала вашего контента, разделения его на несколько столбцов или добавления анимации и других декоративных функций. Этот модуль обеспечивает мягкое начало вашего пути к овладению CSS с основами того, как он работает, как выглядит синтаксис и как вы можете начать использовать его для добавления стиля в HTML.
 Строительные блоки CSS
 Этот модуль продолжает работу с того места, где остановились первые шаги CSS — теперь вы познакомились с языком и его синтаксисом и получили некоторый базовый опыт его использования, пришло время погрузиться немного глубже. Этот модуль рассматривает каскад и наследование, все доступные типы селекторов, единицы измерения, размеры, стили фона и границ, отладку и многое другое.
 Цель состоит в том, чтобы предоставить вам инструментарий для написания компетентного CSS и помочь вам понять всю основную теорию, прежде чем переходить к более конкретным дисциплинам, таким как стили текста и верстка CSS.
 Стилизация текста
 После изучения основ языка CSS следующая тема CSS, на которой вы должны сосредоточиться, — это стилизация текста — одна из самых распространенных вещей, которые вы делаете с помощью CSS. Здесь мы рассмотрим основы стилизации текста, включая настройку шрифта, жирности, курсива, межстрочного и буквенного интервала, теней и других функций текста. В завершение модуля мы рассмотрим применение пользовательских шрифтов к вашей странице, а также стили списков и ссылок.
 Макет CSS
 На этом этапе мы уже рассмотрели основы CSS, то, как стилизовать текст, а также как стилизовать и управлять блоками, внутри которых находится ваш контент.Теперь пора посмотреть, как разместить ваши блоки в нужном месте относительно области просмотра и друг друга. Мы рассмотрели необходимые предварительные условия, поэтому теперь мы можем углубиться в макет CSS, глядя на различные настройки отображения, современные инструменты макета, такие как flexbox, CSS-сетку и позиционирование, а также некоторые устаревшие методы, о которых вы, возможно, все еще хотите знать.
 Решение общих проблем CSS 
 Использование CSS для решения общих проблем предоставляет ссылки на разделы контента, объясняющие, как использовать CSS для решения очень распространенных проблем при создании веб-страницы.
 С самого начала вы в первую очередь будете применять цвета к элементам HTML и их фону; изменять размер, форму и положение элементов; а также добавить и определить границы элементов. Но мало что можно сделать, если вы хорошо разбираетесь даже в основах CSS. Одна из лучших вещей в изучении CSS заключается в том, что, когда вы знаете основы, обычно вы довольно хорошо понимаете, что можно, а что нельзя, даже если вы еще не знаете, как это делать!
 «CSS — это странно» 
 CSS работает немного иначе, чем большинство языков программирования и инструментов дизайна, с которыми вы столкнетесь.Почему это работает именно так? В следующем видео Мириам Сюзанн дает полезное объяснение того, почему CSS работает так, как он работает, и почему он так эволюционировал:
 
 См. Также 
 CSS по MDN
 Основная точка входа для документации CSS на MDN, где вы найдете подробную справочную документацию по всем функциям языка CSS. Хотите знать все ценности, которые может принимать недвижимость? Это хорошее место.
 Первые шаги CSS — Изучите веб-разработку 
 CSS (каскадные таблицы стилей) используются для стилизации и компоновки веб-страниц — например, для изменения шрифта, цвета, размера и интервала вашего контента, разделения его на несколько столбцов или добавления анимации и других декоративных функций.Этот модуль обеспечивает мягкое начало вашего пути к овладению CSS с основами того, как он работает, как выглядит синтаксис и как вы можете начать использовать его для добавления стиля в HTML.
 Хотите стать фронтенд-разработчиком? 
 Мы составили курс, который включает всю важную информацию, необходимую для достижения вашей цели.
 Начать
 Предварительные требования 
 Перед запуском этого модуля у вас должно быть:
  1.  Базовые знания об использовании компьютеров и пассивном использовании Интернета (т.е. глядя на него, потребляя контент.)
  2.  Базовая рабочая среда, настроенная, как подробно описано в разделе «Установка основного программного обеспечения», и понимание того, как создавать файлы и управлять ими, как подробно описано в разделе «Работа с файлами».
  3.  Базовое знакомство с HTML, как описано в модуле Введение в HTML.
  Примечание : Если вы работаете на компьютере / планшете / другом устройстве, на котором у вас нет возможности создавать свои собственные файлы, вы можете опробовать (большую часть) примеры кода в онлайн-программе кодирования, такой как JSBin. или глюк.
 Направляющие 
 Этот модуль содержит следующие статьи, которые познакомят вас со всей базовой теорией CSS и предоставят вам возможность проверить некоторые навыки.
 Что такое CSS?
  CSS  (каскадные таблицы стилей) позволяет создавать великолепно выглядящие веб-страницы, но как это работает под капотом? В этой статье объясняется, что такое CSS, на простом примере синтаксиса, а также рассматриваются некоторые ключевые термины, связанные с языком.
 Начало работы с CSS
 В этой статье мы возьмем простой HTML-документ и применим к нему CSS, попутно изучая некоторые практические вещи о языке.
 Как устроен CSS
 Теперь, когда у вас есть представление о том, что такое CSS и основы его использования, пришло время немного глубже изучить структуру самого языка. Мы уже познакомились со многими концепциями, обсуждаемыми здесь; вы можете вернуться к этому, чтобы подвести итоги, если обнаружите, что какие-либо более поздние концепции сбивают с толку.
 Как работает CSS
 Мы узнали основы CSS, для чего он нужен и как писать простые таблицы стилей. В этом уроке мы рассмотрим, как браузер использует CSS и HTML и превращает их в веб-страницу.
 Используя свои новые знания
 Благодаря тому, что вы узнали на последних нескольких уроках, вы обнаружите, что можете форматировать простые текстовые документы с помощью CSS, чтобы добавить к ним свой собственный стиль. Эта статья дает вам шанс сделать это.
 См. Также 
 Средний уровень веб-грамотности 1: Введение в CSS
 Отличный базовый курс Mozilla, в котором исследуются и проверяются многие навыки, о которых говорилось в модуле  Introduction to CSS .Узнайте о стилизации элементов HTML на веб-странице, селекторах CSS, атрибутах и ​​значениях.
 Начало работы с CSS — Изучение веб-разработки 
 В этой статье мы возьмем простой HTML-документ и применим к нему CSS, попутно изучая некоторые практические вещи о языке.
 Начиная с некоторого HTML 
 Наша отправная точка — это HTML-документ. Вы можете скопировать приведенный ниже код, если хотите работать на своем компьютере. Сохраните приведенный ниже код как индекс .html  в папке на вашем компьютере.
 


    
     Начало работы с CSS 



    
    
 Я заголовок первого уровня 


    
 Это абзац текста. В тексте есть  элемент span 
а также  ссылку . 


    
 Это второй абзац. Он содержит  выделенный  элемент.


    
    
        
  •  Пункт первый 
    • 
        
  •  Пункт два 
    • 
        
  •  Элемент три 
    • 
    
 


 
  Примечание : Если вы читаете это на устройстве или в среде, где вы не можете легко создавать файлы, тогда не волнуйтесь — ниже представлены редакторы живого кода, которые позволят вам написать пример кода прямо здесь, на странице.
 Добавление CSS в наш документ 
 Первое, что нам нужно сделать, это сообщить HTML-документу, что у нас есть некоторые правила CSS, которые мы хотим использовать.Существует три различных способа применения CSS к HTML-документу, с которыми вы часто будете сталкиваться, однако пока мы рассмотрим наиболее обычный и полезный способ сделать это — привязать CSS из заголовка вашего документа.
 Создайте файл в той же папке, что и ваш HTML-документ, и сохраните его как  styles.css . Расширение  .css  показывает, что это файл CSS.
 Чтобы связать  styles.css  с  index.html , добавьте следующую строку где-нибудь внутри   HTML-документа:
  
 Этот элемент   сообщает браузеру, что у нас есть таблица стилей, используя атрибут  rel , и расположение этой таблицы стилей в качестве значения атрибута  href . Вы можете проверить, что CSS работает, добавив правило в файл  styles.css . С помощью редактора кода добавьте в файл CSS следующее:
 h2 {
  красный цвет;
} 
 Сохраните файлы HTML и CSS и перезагрузите страницу в веб-браузере. Заголовок первого уровня в верхней части документа теперь должен быть красным.Если это произойдет, поздравляем — вы успешно применили CSS к HTML-документу. Если этого не произошло, внимательно проверьте, все ли вы набрали правильно.
 Вы можете продолжить работу в  styles.css  локально, или вы можете использовать наш интерактивный редактор ниже, чтобы продолжить это руководство. Интерактивный редактор действует так, как если бы CSS на первой панели был связан с HTML-документом, как и в случае с нашим документом выше.
 Стилизация элементов HTML 
 Сделав заголовок красным, мы уже продемонстрировали, что можем настроить таргетинг и стилизацию элемента HTML.Мы делаем это, ориентируясь на селектор  элемента  — это селектор, который напрямую соответствует имени элемента HTML. Чтобы настроить таргетинг на все абзацы в документе, используйте селектор  p . Чтобы сделать все абзацы зеленым, вы должны использовать:
 p {
  цвет: зеленый;
} 
 Вы можете указать сразу несколько селекторов, разделив их запятыми. Если я хочу, чтобы все абзацы и все элементы списка были зелеными, мое правило выглядит так:
 p, li {
    цвет: зеленый;
} 
 Попробуйте это в интерактивном редакторе ниже (отредактируйте поля кода) или в локальном документе CSS.
 Изменение поведения элементов по умолчанию 
 Когда мы смотрим на хорошо размеченный HTML-документ, даже такой простой, как наш пример, мы можем увидеть, как браузер делает HTML-код читабельным, добавляя некоторые стили по умолчанию. Заголовки большие и жирные, а в нашем списке есть маркеры. Это происходит потому, что браузеры имеют внутренние таблицы стилей, содержащие стили по умолчанию, которые они по умолчанию применяют ко всем страницам; без них весь текст слился бы в кучу, и нам пришлось бы стилизовать все с нуля.Все современные браузеры по умолчанию отображают HTML-контент практически одинаково.
 Однако вам часто может понадобиться нечто иное, чем выбор, сделанный браузером. Это можно сделать, просто выбрав HTML-элемент, который вы хотите изменить, и используя правило CSS, чтобы изменить его внешний вид. Хорошим примером является наш