Справочник css кратко быстро под рукой

Обновлено: 04.07.2024

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

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

Спецификации CSS были созданы и развиваются Консорциумом Всемирной паутины - W3C.

CSS имеет разные уровни и профили. Следующий уровень CSS создаётся на основе предыдущих, добавляя новую функциональность или расширяя уже существующие функции. Уровни обозначаются как CSS1, CSS2 и CSS3. Профили — совокупность правил CSS одного или больше уровней, созданные для отдельных типов устройств или интерфейсов. Например, существуют профили CSS для принтеров, мобильных устройств и т.д.

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

По состоянию на 2021-й год актуальной версией является спецификация CSS3. Спецификация CSS4 разрабатывается ещё с 2011 года. Модули CSS4 построены на основе CSS3 и дополняют их новыми свойствами и значениями. Все они существуют пока в виде черновиков (working draft) и на данный момент официально не утверждены.

CSS - это язык, который описывает стиль HTML документа.

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

Этот учебник научит вас писать CSS от базового уровня до расширенного.

Примеры в каждой главе

Этот учебник CSS содержит сотни примеров CSS.

С помощью онлайн-редактора от W3Schools вы можете редактировать CSS, нажав кнопку "Попробуйте сами", и сразу просматривать результат.

CSS Пример

body <
background-color: lightblue;
>

h1 color: white;
text-align: center;
>

p font-family: verdana;
font-size: 20px;
>

Кликните на кнопку "Попробуйте сами" чтобы увидеть, как она работает.

CSS Примеры

Обучайтесь более чем на 300 примерах! С онлайн-редактором от W3Schools вы можете редактировать CSS и нажимать кнопку, чтобы просмотреть результат.

CSS Шаблоны

Мы создали некоторые адаптивные шаблоны W3.CSS для использования.

Вы можете изменять, сохранять, обмениваться и использовать их в любых своих проектах.

CSS Упражнения и Викторины

Проверьте ваши CSS знания и навычки на W3Schools!

CSS Справочники

На сайте вы найдёте ссылки на все CSS свойства и селекторы с синтаксисом, примерами, поддержкой веб-браузера и т.д.

Сдайте CSS Экзамен - Получите Ваш Диплом!

Онлайн Сертификация W3Schools

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

Поля

Анимация

Градиент

Скруглённые уголки

Изображения

Псевдоэлементы

Псевдоклассы

Печать

Контент

Интерфейс

Таблица

Отступы

Список

Текст

Шрифт

Форматирование

Размеры

Позиционирование

Границы

Цвет и фон

Приветствую, дорогие друзья! В этом уроке вы узнаете что такое CSS, для чего нужен и как его правильно использовать. Это базовый урок из серии "Для самых маленьких", в котором я постараюсь объяснить наиболее понятным языком основы стилизации документов посредством CSS - Каскадных таблиц стилей (Cascading Style Sheets).

Часть 1. Основы CSS

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

Обращаю ваше внимание, что в данном руководстве мы будем рассматривать CSS только в контексте использования с HTML документами в веб-браузере. С помощью CSS можно стилизовать и другие документы, использующие различные языки разметки. Например, стилизовать XML в Android приложениях, SVG или различные Desktop Environment в Unix-подобных операционных системах.

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

1.1 Использование CSS в HTML документах

CSS довольно просто использовать в HTML документах. Его можно:

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

Инлайновое использование CSS свойств в конкретных тегах с помощью атрибута style.

Такой способ внутренней стилизации используется очень редко в особых случаях, когда необходимо: А. Вывести из админ. панели сайта параметры для конкретных тегов; Б. Сделать динамическую стилизацию элементов посредством JavaScript.

Пример инлайнового вывода фонового изображения секции из админ. панели сайта:

1.2 CSS синтаксис

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

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

Просто, не правда ли?

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

Вкратце CSS селектор - (от слова select - выбирать) - это конструкция, с которой начинается каждый блок объявлений и которая служит для выборки элемента или однотипных элементов на странице для дальнейшей стилизации. Чаще всего в качестве селектора используется определенный класс тега, например:

1.3 Каскадирование, наследование и приоритет

Понять принцип каскадирования несложно. Давайте взглянем на пример:

Каскадирование и наследование позволяют стилизовать конкретные элементы на странице и определять приоритет применяемых стилей. Давайте рассмотрим иерархию приоритетов.

Самым высоким приоритетом обладают свойства, в конце объявления которых указана конструкция !important. Не важно, какую вложенность имеет селектор, каким образом используются стили - инлайново или подключением внешнего файла, у них будет наибольший приоритет. Я крайне не рекомендую использовать !important при стилизации, так как в процессе поддержки или даже в процессе разработки в дальнейшем обязательно возникнет путаница, которую спасет только рефакторинг стилей. Как показывает практика, всегда есть способ не использовать !important.
Пример использования !important:
Следующим по значимости приоритетом обладают инлайновые стили, прописанные в самом теге через атрибут style, которые мы рассмотрели ранее:
Стили, заданные в теге style в самом документе имеют меньший приоритет;
Еще меньшим приоритетом обладают стили, подключенные к документу как внешний CSS файл посредством тега
Самый низкий приоритет, окромя стандартных стилей браузера имеют стили родительских селекторов перед дочерними, например:
В результате тег

Стоит также отметить, что количество классов или идентификаторов, а также наличие дополнительных псевдоклассов и конструкций в селекторе повышают приоритет для стилизации:

И т.д. по логической цепочке.

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

В результате последний селектор в потоке документа получит значение свойства margin: 15px, так как является наиболее приоритетным. Однако если бы селектор первого объявления был длиннее, значния его свойств несомненно бы превалировали.

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

Часть 2. CSS свойства

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

Однако рассмотрим 10 самых используемых CSS свойств в верстке. Я взял 10 больших CSS файлов из своих проектов и отсортировал свойства по частоте использования.

CSS Свойство

Частота использования

Описание

Часть 3. Медиа-запросы

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

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

Медиа-запрос пишется в самом файле стилей или в теле документа (тег style) и начинается с объявления правила @media. Структура медиа запроса довольно проста:

Условием может выступать либо устройство - all (все устройства), screen, print, tv и т.д., либо медиа-функции, которые задают параметры устройства или разрешение экрана, на котором отображается документ.

Наиболее часто используемые медиа-функции определяют именно максимальное и минимальное разрешение экрана устройства:

Здесь устройства с максимальным разрешением экрана 480px или минимальным разрешением 320px будут отображать текст тега с классом .my-class серым. Данное условие я привел для примера, практически оно бесполезно. Чаще всего требуется указать либо только максимальное разрешение, либо только минимальное, в пределах которого будет прменяться свойство.

Кроме всего прочего, как мы видим из примера, функции могут содержать условия and (И), not (НЕ) и only (Для старых браузеров, не поддерживающих медиа-запросы). Нет логического оператора or (ИЛИ), его роль выполняет запятая. Медиа-функции, как мы видим заключают в обычные круглые скобки.

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

Часть 4. Рекомендации

Ну и конечно-же мои рекомендации. За всю практику верстки у меня накопились некоторые правила, которыми я с радостью поделюсь.

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

Так что же такое CSS?

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

Давайте попробуем: вставьте эти три строки CSS в новый файл в ваш текстовый редактор, а затем сохраните файл как style.css в вашей папке styles .

Но нам всё равно нужно применить CSS к нашему HTML документу. В противном случае, CSS стиль не повлияет на то, как ваш браузер отобразит HTML документ. (Если вы не следили за нашим проектом, то прочитайте раздел Работа с файлами и Основы HTML, чтобы узнать, что вам нужно сделать в первую очередь.)

Если текст вашего абзаца теперь красный, примите наши поздравления! Вы написали свой первый успешный CSS!

Анатомия набора правил CSS

Давайте взглянем на вышеупомянутый CSS немного более подробно:

Вся структура называется набором правил (но зачастую для краткости "правило"). Отметим также имена отдельных частей:

Селектор (Selector) Имя HTML-элемента в начале набора правил. Он выбирает элемент(ы) для применения стиля (в данном случае, элементы p ). Для стилизации другого элемента, просто измените селектор. Объявление (Declaration) Единственное правило, например color: red; указывает, какие из свойств элемента вы хотите стилизовать. Свойства (Properties) Способы, которыми вы можете стилизовать определённый HTML-элемент (в данном случае, color является свойством для элементов

). В CSS вы выбираете, какие свойства вы хотите затронуть в вашем правиле. Значение свойства (Property value) Справа от свойства, после двоеточия, у нас есть значение свойства, которое выбирает одно из множества возможных признаков для данного свойства (существует множество значений color , помимо red ).

Обратите внимание на важные части синтаксиса:

Каждый набор правил (кроме селектора) должен быть обёрнут в фигурные скобки ( <> ).
В каждом объявлении необходимо использовать двоеточие ( : ), чтобы отделить свойство от его значений.
В каждом наборе правил вы должны использовать точку с запятой ( ; ), чтобы отделить каждое объявление от следующего.

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

Выбор нескольких элементов

Вы также можете выбрать несколько элементов разного типа и применить единый набор правил для всех из них. Добавьте несколько селекторов, разделённых запятыми. Например:

Разные типы селекторов

Существует множество различных типов селектора. Выше мы рассматривали только селектор элементов, который выбирает все элементы определённого типа в HTML документе. Но мы можем сделать выбор более конкретным. Вот некоторые из наиболее распространённых типов селекторов:

Существует ещё много селекторов для изучения, и вы можете найти более подробный список в нашем Руководстве селекторов (en-US).

Шрифты и текст

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

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

(en-US), , и

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

Вы можете настроить значения px так, как вам нравится, чтобы ваш дизайн выглядел так, как вы хотите, но, в общем, ваш дизайн должен выглядеть вот так:

Блоки, блоки и ещё раз блоки

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

Не удивительно, макет CSS основан, главным образом, на блочной модели (box model). Каждый из блоков, занимающий пространство на вашей странице имеет такие свойства, как:

padding , пространство только вокруг контента (например, вокруг абзаца текста)
border , сплошная линия, которая расположена рядом с padding
margin , пространство вокруг внешней стороны элемента

В этом разделе мы также используем:

width (ширину элемента)
background-color , цвет позади контента и padding элементов
color , цвет контента элемента (обычно текста)
text-shadow : устанавливает тень на тексте внутри элемента
display : устанавливает режим отображения элемента (пока что не волнуйтесь об этом)

Итак, давайте начнём и добавим больше CSS на нашей странице! Продолжайте добавлять эти новые правила, расположенные в нижней части страницы, и не бойтесь экспериментировать с изменением значений, чтобы увидеть, как это работает.

Изменение цвета страницы

Это правило устанавливает цвет фона для всей страницы. Измените код цвета сверху, на цвет который вы выбрали при планировании вашего сайта.

Разбираемся с телом

Теперь для элемента. Здесь есть немало деклараций, так что давайте пройдём через них всех по одному:

Позиционирование и стилизация нашего заголовка главной страницы

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

Затем мы установили заголовку верхний и нижний padding на 20 пикселей, и сделали текст заголовка того же цвета, как и цвет фона html.

Здесь, мы использовали одно довольно интересное свойство - это text-shadow , которое применяет тень к текстовому контенту элемента. Оно имеет следующие четыре значения:

Первое значение пикселей задаёт горизонтальное смещение тени от текста — как далеко она движется поперёк: отрицательное значение должно двигать её влево.
Второе значение пикселей задаёт вертикальное смещение тени от текста — как далеко она движется вниз, в этом примере: отрицательное значение должно переместить её вверх.
Третье значение пикселей задаёт радиус размытия тени — большее значение будет означать более размытую тень.
Четвёртое значение задаёт основной цвет тени.

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

Центрирование изображения

В заключение, мы отцентрируем изображение, чтобы оно лучше выглядело. Мы можем использовать margin: 0 auto уловку снова, как мы это делали раньше для body, но мы также должны сделать кое-что ещё. Элемент является блочным, это значит, что он занимает место на странице и может иметь margin и другие значения отступов, применяемых к нему. Изображения, наоборот, являются строчными элементами, то есть они этого не могут. Таким образом, чтобы применить margin к изображению, мы должны дать изображению блочное поведение с помощью display: block; .

Примечание: Не стоит беспокоиться, если вы ещё не понимаете display: block; и различия между блочным/строчным. Вы поймёте, когда будете изучать CSS более подробно. Вы можете узнать больше о различных доступных значениях display на нашей странице о свойстве display.

Заключение

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

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

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

Наш справочник по каскадным таблицам стилей CSS содержит свойства, которые по возможности являются стандартными в CSS3 . Свойства отсортированы по алфавиту и по категориям. После перехода на страницу справочника с описанием требуемого свойства, вы сможете посмотреть его синтаксис, описание, список допустимых значений, а также ряд примеров использования данного css -свойства. Кроме того, внизу страницы обычно располагаются ссылки на документацию по данному свойству на официальном сайте W3C и страницу справочника CSS на официальном сайте Mozilla Firefox .

Читайте также: