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

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

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

P { color: red; }

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

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

1. Откройте ваш файл index.html и вставьте следующую строку куда-нибудь в шапку, между и тегами:
2. Сохраните index.html и загрузите его в вашем браузере. Вы должны увидеть что-то вроде этого:

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

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

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

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

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

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

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

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

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

P { color: red; width: 500px; border: 1px solid black; }

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

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

P,li,h1 { color: red; }

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

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

Имя селектора	Что выбирает	Пример
Селектор элемента (иногда называемый селектором тега или типа)	Все HTML элемент(ы) указанного типа.	p Выбирает
ID селектор	Элемент на странице с указанным ID (на одной HTML странице, может быть только один элемент с каким-либо ID).	#my-id Выбирает Или
Селектор класса	Элемент(ы) на странице с указанным классом (множество экземпляров класса может объявляться на странице).	.my-class Выбирает И
Селектор атрибута	Элемент(ы) на странице с указанным атрибутом.	img Выбирает но не
Селектор псевдо-класса	Указанные элемент(ы), но только в случае определенного состояния, например, при наведении курсора.	a:hover Выбирает , но только тогда, когда указатель мыши наведен на ссылку.

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

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

1. Прежде всего, вернитесь и найдите , который вы уже где-то сохранили. Добавьте элемент где-нибудь внутри шапки вашего index.html (снова, в любом месте между тегами и ). Это будет выглядеть примерно так:
2. Затем, удалите существующее правило в вашем style.css файле. Это был хороший тест, но красный текст, на самом деле, не очень хорошо выглядит.
3. Добавьте следующие строки в нужное место, заменив строку placeholder актуальной font-family строкой, которую вы получили из Google Fonts. (font-family просто означает, какой шрифт(ы) вы хотите использовать для вашего текста). Это правило устанавливает глобальный базовый шрифт и размер шрифта для всей страницы (поскольку является родительским элементом для всей страницы, и все элементы внутри него наследуют такой же font-size и font-family): html { font-size: 10px; /* px значит "пиксели": базовый шрифт будет 10 пикселей в высоту */ font-family: placeholder: здесь должно быть имя шрифта из Google fonts }

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

4. Теперь мы установим размер шрифта для элементов, содержащих текст внутри HTML тела (

   , и определяет собой абзац текста.">

   ). Мы также отцентрируем текст нашего заголовка и установим некоторую высоту строки и расстояние между буквами в теле документа, чтобы сделать его немного более удобным для чтения: h1 { font-size: 60px; text-align: center; } p, li { font-size: 16px; line-height: 2; letter-spacing: 1px; }

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

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

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

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

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

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

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

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

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

html { background-color: #00539F; }

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

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

body { width: 600px; margin: 0 auto; background-color: #FF9500; padding: 0 20px 20px 20px; border: 5px solid black; }

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

• width: 600px; - заставляет тело быть всегда 600 пикселей в ширину.
• margin: 0 auto; - когда вы устанавливаете два значения для таких свойств как margin или padding , первое значение элемента влияет на верхнюю и нижнюю сторону (делает их 0 в данном случае), и второе значение на левую и правую сторону (здесь, auto является особым значением, которое делит доступное пространство по горизонтали поровну слева и справа). Вы также можете использовать один, три или четыре значения, как описано .
• background-color: #FF9500; - как и прежде, устанавливает цвет фона элемента. Я использовал красновато-оранжевый для тела, в отличие от темно-синего цвета для ). Все остальные элементы должны быть потомками этого элемента."> элемента, но не стесняйтесь и эксперементируйте.
• padding: 0 20px 20px 20px; - у нас есть четыре значения, установленные для padding, чтобы сделать немного пространства вокруг нашего контента. В этот раз мы не устанавливаем padding на верхней части тела, но делаем 20 пикселей слева, снизу и справа. Значения устанавливаются сверху, справа, снизу, слева, в таком порядке.
• border: 5px solid black; - просто устанавливает сплошную черную рамку шириной 5 пикселей со всех сторон тела.

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

h1 { margin: 0; padding: 20px 0; color: #00539F; text-shadow: 3px 3px 1px black; }

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

(по сравнению с другими), даже если вы не применяли какой-либо CSS вообще! Это может звучать как плохая идея, но мы хотим, чтобы веб-страница без стилей имела базовую читаемость. Чтобы избавиться от разрыва, мы переопределили стиль по умолчанию, установив margin: 0; .

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

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

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

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

Если вам интересна тема создания сайтов, то наверняка вы не раз слышали о 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, как и в программировании в общем, важнейшую роль играет практика. Чем чаще вы будете практиковаться, тем больше у вас будет получаться.

Урок №3
Основные CSS-свойства

Схема CSS-кода выглядит следующим образом:

ИмяТега { CSS-свойство: значение; }

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

CSS-свойства влияющие на цвет и фон

color: — CSS-свойство влияющее на цвет текста : заголовка, абзаца, ссылки и т.д. В качестве его значения выступает имя цвета или шестнацатеричный код в RGB-формате.
Примеры кода с использованием CSS-свойства color :
color: green; — текст должен быть зелёного цвета, в качестве значения задано имя цвета,
color: #008800; — текст должен быть зелёного цвета, в качестве значения задан шестнадцатеричный код в RGB-формате.

background-color: — CSS-свойство влияющее на цвет фона заголовка, абзаца, ссылки и т.д.
В качестве его значения выступает имя цвета или шестнацатеричный код в RGB-формате.
Примеры кода с использованием CSS-свойства background-color :
background-color: blue; — фон должен быть синего цвета,
background-color: #0000ff; — фон должен быть синего цвета.

background-image: — CSS-свойство устанавливающее изображение, в качестве фона фона заголовка, абзаца, ссылки и т.д. Его значением выступает URL (адрес) изображения.
Примеры кода с использованием CSS-свойства background-image :
background-image: url(http://имя домена.ru/kartinka.jpg); — фоном должно стать изображение, находящееся по адресу http://имя домена.ru/kartinka.jpg

CSS-свойства влияющие на шрифт

font-size: — CSS-свойство влияющее на размер шрифта заголовка, абзаца, ссылки и т.д. В качестве его значения выступает единица измерения: пиксель (px), процент (%), пункт (pt) и т.д.
Примеры кода с использованием CSS-свойства font-size :
font-size: 17px; — размер шрифта должен быть 17 пикселей,
font-size: 20pt; — размер шрифта должен быть 20 пунктов.

font-family: — CSS-свойство устанавливающее имя шрифта для заголовка, абзаца, ссылки и т.д. В качестве его значения выступает имя шрифта: Arial , Courier , Impact , Garamond , Georgia , Helvetica , Tahoma , Times (установлен по-умочанию), Verdana и т.д.
Примеры кода с использованием CSS-свойства font-family :
font-family: Arial; — имя шрифта должно быть Arial,
font-family: Impact; — имя шрифта должно Impact.

font-style: — CSS-свойство влияющее на начертание (стиль) шрифта заголовка, абзаца, ссылки и т.д. В качестве его значения выступает: normal , oblique .
Примеры кода с использованием CSS-свойства font-style :
font-style: normal; — нормальное начертание шифта,
font-style: oblique; — наклонное начертание шифта.

font-weight: — CSS-свойство влияющее на толщину шрифта заголовка, абзаца, ссылки и т.д. В качестве его значения выступет: normal , bold .
Примеры кода с использованием CSS-свойства font-weight :
font-weight: normal; — нормальное начертание шифта,
font-weight: bold; — жирное начертание шифта.

CSS-свойства влияющие на текст

text-align: — CSS-свойство влияющее на выравнивание текста в заголовке, абзаце и других блочных элементах. В качестве его значения выступает: left , center , right , justify .
Примеры кода с использованием CSS-свойства text-align :
text-align: left; — выравнивание текста по левому краю (установлен по-умолчанию),
text-align: center; — выравнивание текста по центру,
text-align: right; — выравнивание текста по правому краю,
text-align: justify; — равномерное выравнивание текста по левому и правому краям.

text-indent: — CSS-свойство влияющее на отступ первой строки (красная строка) текста в закаловке, абзаце и других блочных элементах. В качестве его значения выступает единица измерения: пиксель (px), процент (%), пункт (pt) и т.д.

text-indent: 20px; — отступ первой строки равен 20 пикселям,
text-indent: 15pt; — отступ первой строки равен 15 пунктам.

line-height: — CSS-свойство влияющее на расстояние между строками текста (интерлиньяж) заголовка, абзаца, ссылки и т.д. В качестве его значения выступает единица измерения: множитель, пиксель (px), процент (%), пункт (pt) и т.д.
Примеры кода с использованием CSS-свойства text-indent :
line-height: 35px; — расстояние между строками равно 35 пикселей,
line-height: 1.5; — расстояние между строками равно 1.5 по множителю (аналогичен 150%).

letter-spacing: — CSS-свойство влияющее на расстояние между символами в словах заголовка, абзаца ссылки и т.д. В качестве его значения выступает единица измерения: пиксель (px), процент (%), пункт (pt) и т.д.
Примеры кода с использованием CSS-свойства letter-spacing :
letter-spacing: 3px; — расстояние между символами в словах, равно 3 пикселя,
letter-spacing: 5pt; — расстояние между символами в словах, равно 5 пунктов.

word-spacing: — CSS-свойство влияющее на расстояние между словами в тексте заголовка, абзаца, ссылки и т.д. В качестве его значения выступает единица измерения: пиксель (px), процент (%), пункт (pt) и т.д.
Примеры кода с использованием CSS-свойства word-spacing :
word-spacing: 10px; — расстояние между словами, равно 10 пикселей,
word-spacing: 7pt; — расстояние между словами, равно 7 пунктов.

text-transform: — CSS-свойство влияющее на вид букв в тексте, делая их прописными или строчными. В качестве его значения выступает: capitalize , lowercase , uppercase .
Примеры кода с использованием CSS-свойства text-transform :
text-transform: capitalize; — первая буква каждого слова начинается с верхнего регистра,
text-transform: uppercase; — все буквы в тексте записываются в верхнем регистре,
text-transform: lowercase; — все буквы в тексте записываются в нижнем регистре.

text-shadow: — CSS-свойство создающее тень текста.
В качестве его значения выступает: цвет ось-x ось-y радиус.
Пример кода с использованием CSS-свойства text-shadow:
text-shadow: green 3px 2px 2px; — тень будет зелёного цвета, со сдвигом в лево на 3 пикселя, со сдвигом вниз на 2 пикселя, радиус (разброс тени) будет составлять 5 пикселей.

CSS-свойства влияющие на границу (обводку)

border-color: — CSS-свойство влияющее на цвет границ заголовка, абзаца, ссылки и т.д. В качестве его значения выступает имя цвета или его шестнацатеричный код в RGB-формате.
Примеры кода с использованием CSS-свойства border-color :
border-color: green; — зелёный цвет обводки,
border-color: #008800; — зелёный цвет обводки, задан в шестнадцатеричном коде RGB-формата.

border-width: — CSS-свойство влияющее на толщину границ заголовка, абзаца, ссылки и т.д. В качестве его значения выступает единица измерения: пиксель (px).
Примеры кода с использованием CSS-свойства border-width :
border-width: 1px; — толщина обводки равна 1 пикселю,
border-width: 3px; — толщина обводки равна 3 пикселям.

border-style: — CSS-свойство влияющее на стиль границ заголовка, абзаца, ссылки и т.д. В качестве его значения выступает: solid , dashed , dotted , double .
Примеры кода с использованием CSS-свойства border-style :
border-style: solid; — обводка как сплошная линия,
border-style: dashed; — обводка в виде отрезков,
border-style: dotted; — обводка в виде точек,
border-style: double; — обводка в виде двойной сплошной линии.

CSS-свойства влияющие на внешние и внутренние отступы

margin: — CSS-свойство влияющее на отступ между краем фона одного блочного элемента (заголовки, абзацы и т.д.) и краем фона другого блочного элемента. В качестве его значения выступает единица измерения: пиксель (px), процент (%), пункт (pt) и т.д.
Примеры кода с использованием CSS-свойства margin :
margin: 15px; — отступ равен 15 пикселям,
margin: 12pt; — отступ равен 12 пунктам.

padding: — CSS-свойство влияющее на отступ между краем фона элемента и его содержимым (текстом, изображением). В качестве его значения выступаюет единица измерения: пиксель (px), процент (%), пункт (pt) и т.д.
Примеры кода с использованием CSS-свойства padding :
padding: 5px; — отступ равен 5 пикселям,
padding: 3pt; — отступ равен 3 пунктам.

• Category:

Технология CSS используется в первую очередь дизайнерами, ведь именно они создают дизайн сайта. Однако, ошибочно полагать, что Web-мастерам CSS знать не обязательно. Достаточно вспомнить хотя бы пример из описания раздела по . Помимо мобильности своего сайта, таблицы стилей позволяют создавать различные классические дизайнерские решения (например, выпадающее меню). А вместе с позволяют создавать динамические HTML-страницы (DHTML ), красота и удобство которых, порой, просто поражают.

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

Полный курс по HTML, CSS и по вёрстке сайтов :

Прочитав статьи по основам CSS, Вы узнаете:

1) Синтаксис CSS .

2) Способы и их приоритеты задания CSS-стиля .

3) Типы селекторов в CSS .

4) CSS хаки для браузеров.

5) Правила написания CSS .

6) Как создать всплывающую подсказку на CSS .

7) Как изменить внешний вид первой буквы через CSS .

8) Как задать вид курсора через CSS .

9) Как изменить вид курсора при наведении мыши с помощью CSS .

10) Как сделать подменю на CSS .

11) О замене свойства min-width в IE6 .

12) О валидности CSS .

13) Как задать цвет посещённых ссылок.

14) Как задать отступ абзаца через CSS .

15) Как сделать закруглённые углы через CSS .

16) Как вместо маркера списка поставить своё изображение через CSS .

17) Как сделать фон картинкой.

18) Как сделать затемнение фона на CSS .

19) Что такое дочерние селекторы в CSS .

20) Какие единицы измерения имеются в CSS .

21) Как сделать всплывающее окно с затемнением.

22) Как сделать анимированный фон.

23) Как сделать красивое текстовое поле.

24) Как менять изображение при наведении на него курсора мыши.

25) Что такое псевдоэлементы в CSS .

26) Что такое CSS спрайты .

27) Как прижать футер (подвал) к низу через CSS .

28) Как запретить изменение размеров textarea через CSS .

29) Как нарисовать треугольник через CSS .

30) Как обработать событие click через CSS .

31) Как задать свой курсор через CSS .

32) Как сделать горизонтальное выпадающее меню на CSS .

33) Как использовать нестандартный шрифт на сайте.

34) Как изменить фон у радиокнопки через CSS .

35) Можно ли использовать CSS3 .

36) Как сделать тень на CSS .

37) Как задать атрибуты cellpadding и cellspacing на CSS .

38) Как сделать div со 100% height .

39) О совместимости z-index и плеера Youtube .

40) Почему плохо использовать -moz , -ms , -webkit и прочие свойства.

41) Стоит ли использовать CSS Reset .

42) Как вертикально выравнять маркер списка.

43) Как сделать версию для печати.

44) Как сделать кроссбраузерную прозрачность на CSS .

45) Что такое clearfix .

46) Как частично отменить float .

47) Как сделать двухколоночную вёрстку с одинаковой высотой колонок.

48) Что такое адаптивная вёрстка.

49) Что такое медиа-запросы в CSS .

50) Что такое less .

51) Как сделать эффект загнутого уголка на CSS .

52) Как сделать отзывчивый "липкий" подвал сайта .

53) Как использовать Google Fonts API .

54) Как использовать сервис Livetools .

55) Как разрешить или запретить выделение текста на CSS .

56) Как изменить внешний вид элемента на стандартный с помощью свойства appearance в CSS .

57) Зачем нужно свойство page-break-inside в CSS .

58) Как выравнять по центру блок переменной ширины на CSS .

59) Как сделать треугольники на чистом CSS .

60) Сервис по генерации CSS треугольников .

61) Как прижать футер к нижней грани страницы (позиционирование).

62) Как прижать футер к низу страницы (табличный способ).

63) Изучаем Sass . Установка и настройка.

64) Как скрыть элемент на странице на CSS .

65) Изучаем Sass . Основы.

66) Когда использовать reset.css и normalize.css .

67) Сервис по работе с изображениями с мощным API .

68) Как сделать эффект увеличения картинки на CSS .

69) Koala - быстрая компиляция sass файлов.

70) Как добавить фильтры к фотографиям на CSS .

71) Изучаем Sass . Миксины.

72) Изучаем Sass . Математические операции.

73) Анимированная иконка меню на Sass .

74) Изучаем Sass . Функции.

75) Что такое PostCSS .

76) Как установить и настроить PostCSS .

77) Как сделать возможность оценивания на CSS .

78) Изучаем Sass . Стиль написания кода.

79) Изучаем Sass . Расширение родительского селектора.

80) 10 полезных SASS миксинов .

81) Как сделать интро в стиле "Звёздных Войн" на CSS .

82) Bootstrap 4 . Введение.

83) Bootstrap 4 . Установка.

84) Bootstrap 4 . Reboot.

85) Bootstrap 4 . Контейнеры и ключевые точки.

86) Bootstrap 4 . Система сеток.

87) Bootstrap 4 . Flex-свойства сетки.

88) Какие 5 нововведений появятся в CSS4 .

89) Bootstrap 4 . Что такое Jumbotrons.

90) Bootstrap 4 . Утилиты и типография.

91) Bootstrap 4 . Компонент Cards.

92) Разницу между class и id на примере тега div .

93) Неудачные элементы веб-дизайна , которые не стоит использовать.

94) Bootstrap 4 . Модальные окна.

95) О приоритете и наследовании в CSS на практике

96) Как верстать PSD макет по Bootstrap сетке . Часть 1.

97) Как верстать PSD макет по Bootstrap сетке . Часть 2.

98) Как использовать псевдоэлементы after и before в CSS .

99) Об особенностях ширины и высоты блока в CSS .

100) Псевдоэлемене after и псевдоклассе last-child .

101) Как показать сайт на различных девайсах.

102) Верстка по сетке Bootstrap (часть 1)

103) Верстка по сетке Bootstrap (часть 2)

104) Верстка по сетке Bootstrap (часть 3)

105) Верстка по сетке Bootstrap (часть 4)

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

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

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

Объявление стиля состоит из двух частей: селектора и объявления . В HTML имена элементов нечувствительны к регистру, поэтому «h1» работает так же, как и «H1». Объявление состоит из двух частей: имя свойства (например, color) и значение свойства (grey). Селектор сообщает браузеру, какой именно элемент форматировать, а в блоке объявления (код в фигурных скобках) перечисляются форматирующие команды — свойства и их значения.

Рис. 1. Структура объявления

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

Виды каскадных таблиц стилей и их специфика

1. Виды таблиц стилей

1.1. Внешняя таблица стилей

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

К каждой веб-странице можно присоединить несколько таблиц стилей, добавляя последовательно несколько тегов , указав в атрибуте тега media назначение данной таблицы стилей. rel="stylesheet" указывает тип ссылки (ссылка на таблицу стилей).

Атрибут type="text/css" не является обязательным по стандарту HTML5, поэтому его можно не указывать. Если атрибут отсутствует, по умолчанию используется значение type="text/css" .

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

Внутренние стили встраиваются в раздел HTML-документа и определяются внутри тега . Внутренние стили имеют приоритет над внешними, но уступают встроенным стилям (заданным через атрибут style).

...

1.3. Встроенные стили

Когда мы пишем встроенные стили , мы пишем CSS-код в HTML-файл, непосредственно внутри тега элемента с помощью атрибута style:

Обратите внимание на этот текст.

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

1.4. Правило @import

Правило @import позволяет загружать внешние таблицы стилей. Чтобы директива @import работала, она должна располагаться в таблице стилей (внешней или внутренней) перед всеми остальными правилами:

Правило @import также используется для подключения веб-шрифтов:

@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);

2. Виды селекторов

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

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

Соответствует любому HTML-элементу. Например, * {margin: 0;} обнулит внешние отступы для всех элементов сайта. Также селектор может использоваться в комбинации с псевдоклассом или псевдоэлементом: *:after {CSS-стили} , *:checked {CSS-стили} .

2.2. Селектор элемента

Селекторы элементов позволяют форматировать все элементы данного типа на всех страницах сайта. Например, h1 {font-family: Lobster, cursive;} задаст общий стиль форматирования всех заголовков h1 .

2.3. Селектор класса

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

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

.headline { text-transform: uppercase; color: lightblue; }

Если элемент имеет несколько атрибутов класса, их значения объединяются с пробелами.

Инструкция пользования персональным компьютером

2.4. Селектор идентификатора

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

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

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

#sidebar { width: 300px; float: left; }

2.5. Селектор потомка

Селекторы потомков применяют стили к элементам, расположенным внутри элемента-контейнера. Например, ul li {text-transform: uppercase;} — выберет все элементы li , являющиеся потомками всех элементов ul .

Если нужно отформатировать потомки определенного элемента, этому элементу нужно задать стилевой класс:

p.first a {color: green;} — данный стиль применится ко всем ссылкам, потомкам абзаца с классом first ;

p .first a {color: green;} — если добавить пробел, то будут стилизованы ссылки, расположенные внутри любого тега класса.first , который является потомком элемента

First a {color: green;} — данный стиль применится к любой ссылке, расположенной внутри другого элемента, обозначенного классом.first .

2.6. Дочерний селектор

Дочерний элемент является прямым потомком содержащего его элемента. У одного элемента может быть несколько дочерних элементов, а родительский элемент у каждого элемента может быть только один. Дочерний селектор позволяет применить стили только если дочерний элемент идёт сразу за родительским элементом и между ними нет других элементов, то есть дочерний элемент больше ни во что не вложен.
Например, p > strong — выберет все элементы strong , являющиеся дочерними по отношению к элементу p .

2.7. Сестринский селектор

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

h1 + p — выберет все первые абзацы, идущие непосредственно за любым тегом

, не затрагивая остальные абзацы;

h1 ~ p — выберет все абзацы, являющиеся сестринскими по отношению к любому заголовку h1 и идущие сразу после него.

2.8. Селектор атрибута

Селекторы атрибутов выбирают элементы на основе имени атрибута или значения атрибута:

[атрибут] — все элементы, содержащие указанный атрибут, — все элементы, для которых задан атрибут alt ;

селектор[атрибут] — элементы данного типа, содержащие указанный атрибут, img — только картинки, для которых задан атрибут alt ;

селектор[атрибут="значение"] — элементы данного типа, содержащие указанный атрибут с конкретным значением, img — все картинки, название которых содержит слово flower ;

селектор[атрибут~="значение"] — элементы частично содержащие данное значение, например, если для элемента задано несколько классов через пробел, p — абзацы, имя класса которых содержит feature ;

селектор[атрибут|="значение"] — элементы, список значений атрибута которых начинается с указанного слова, p — абзацы, имя класса которых feature или начинается на feature ;

селектор[атрибут^="значение"] — элементы, значение атрибута которых начинается с указанного значения, a — все ссылки, начинающиеся на http:// ;

селектор[атрибут$="значение"] — элементы, значение атрибута которых заканчивается указанным значением, img — все картинки в формате png ;

селектор[атрибут*="значение"] — элементы, значение атрибута которых содержит в любом месте указанное слово, a — все ссылки, название которых содержит book .

2.9. Селектор псевдокласса

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

:hover — любой элемент, по которому проводят курсором мыши;

:focus — интерактивный элемент, к которому перешли с помощью клавиатуры или активировали посредством мыши;

:active — элемент, который был активизирован пользователем;

:valid — поля формы, содержимое которых прошло проверку в браузере на соответствие указанному типу данных;

:invalid — поля формы, содержимое которых не соответствует указанному типу данных;

:enabled — все активные поля форм;

:disabled — заблокированные поля форм, т.е., находящиеся в неактивном состоянии;

:in-range — поля формы, значения которых находятся в заданном диапазоне;

:out-of-range — поля формы, значения которых не входят в установленный диапазон;

:lang() — элементы с текстом на указанном языке;

:not(селектор) — элементы, которые не содержат указанный селектор — класс, идентификатор, название или тип поля формы — :not() ;

:target — элемент с символом # , на который ссылаются в документе;

:checked — выделенные (выбранные пользователем) элементы формы.

2.10. Селектор структурных псевдоклассов

Структурные псевдоклассы отбирают дочерние элементы в соответствии с параметром, указанным в круглых скобках:

:nth-child(odd) — нечётные дочерние элементы;

:nth-child(even) — чётные дочерние элементы;

:nth-child(3n) — каждый третий элемент среди дочерних;

:nth-child(3n+2) — выбирает каждый третий элемент, начиная со второго дочернего элемента (+2) ;

:nth-child(n+2) — выбирает все элементы, начиная со второго;

:nth-child(3) — выбирает третий дочерний элемент;

:nth-last-child() — в списке дочерних элементов выбирает элемент с указанным местоположением, аналогично с:nth-child() , но начиная с последнего, в обратную сторону;

:first-child — позволяет оформить только самый первый дочерний элемент тега;

:last-child — позволяет форматировать последний дочерний элемент тега;

:only-child — выбирает элемент, являющийся единственным дочерним элементом;

:empty — выбирает элементы, у которых нет дочерних элементов;

:root — выбирает элемент, являющийся корневым в документе — элемент html .

2.11. Селектор структурных псевдоклассов типа

Указывают на конкретный тип дочернего тега:

:nth-of-type() — выбирает элементы по аналогии с:nth-child() , при этом берёт во внимание только тип элемента;

:first-of-type — выбирает первый дочерний элемент данного типа;

:last-of-type — выбирает последний элемент данного типа;

:nth-last-of-type() — выбирает элемент заданного типа в списке элементов в соответствии с указанным местоположением, начиная с конца;

:only-of-type — выбирает единственный элемент указанного типа среди дочерних элементов родительского элемента.

2.12. Селектор псевдоэлемента

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

:first-letter — выбирает первую букву каждого абзаца, применяется только к блочным элементам;

:first-line — выбирает первую строку текста элемента, применяется только к блочным элементам;

:before — вставляет генерируемое содержимое перед элементом;

:after — добавляет генерируемое содержимое после элемента.

3. Комбинация селекторов

Для более точного отбора элементов для форматирования можно использовать комбинации селекторов:

img:nth-of-type(even) — выберет все четные картинки, альтернативный текст которых содержит слово css .

4. Группировка селекторов

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

H1, h2, p, span { color: tomato; background: white; }

5. Наследование и каскад

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

5.1. Наследование

Наследование является механизмом, с помощью которого определенные свойства передаются от предка к его потомкам. Спецификацией CSS предусмотрено наследование свойств, относящихся к текстовому содержимому страницы, таких как color , font , letter-spacing , line-height , list-style , text-align , text-indent , text-transform , visibility , white-space и word-spacing . Во многих случаях это удобно, так как не нужно задавать размер шрифта и семейство шрифтов для каждого элемента веб-страницы.

Свойства, относящиеся к форматированию блоков, не наследуются. Это background , border , display , float и clear , height и width , margin , min-max-height и -width , outline , overflow , padding , position , text-decoration , vertical-align и z-index .

Принудительное наследование

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

Как задаются и работают CSS-стили

1) Стили могут наследоваться от родительского элемента (наследуемые свойства или с помощью значения inherit);

2) Стили, расположенные в таблице стилей ниже, отменяют стили, расположенные в таблице выше;

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

Рис. 2. Режим разработчика в браузере Google Chrome

4) При определении стиля можно использовать любую комбинацию селекторов — селектор элемента, псевдокласса элемента, класса или идентификатора элемента.

div {border: 1px solid #eee;} #wrap {width: 500px;} .box {float: left;} .clear {clear: both;}

5.2. Каскад

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

Правило!important

Вес правила можно задать с помощью ключевого слова!important , которое добавляется сразу после значения свойства, например, span {font-weight: bold!important;} . Правило необходимо размещать в конец объявления перед закрывающей скобкой, без пробела. Такое объявление будет иметь приоритет над всеми остальными правилами. Это правило позволяет отменить значение свойства и установить новое для элемента из группы элементов в случае, когда нет прямого доступа к файлу со стилями.

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

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

для id добавляется 0, 1, 0, 0 ;
для class добавляется 0, 0, 1, 0 ;
для каждого элемента и псевдоэлемента добавляется 0, 0, 0, 1 ;
для встроенного стиля, добавленного непосредственно к элементу — 1, 0, 0, 0 ;
универсальный селектор не имеет специфичности.

H1 {color: lightblue;} /*специфичность 0, 0, 0, 1*/ em {color: silver;} /*специфичность 0, 0, 0, 1*/ h1 em {color: gold;} /*специфичность: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about {color: blue;} /*специфичность: 0, 0, 0, 1 + 0, 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .sidebar {color: grey;} /*специфичность 0, 0, 1, 0*/ #sidebar {color: orange;} /*специфичность 0, 1, 0, 0*/ li#sidebar {color: aqua;} /*специфичность: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

В результате к элементу применятся те правила, специфичность которых больше. Например, если на элемент действуют две специфичности со значениями 0, 0, 0, 2 и 0, 1, 0, 1 , то выиграет второе правило.

Порядок подключённых таблиц

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