Вот мой красивый веб-шрифт! Границы в виде изображений

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

1. Базовые вещи

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

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

Конечно, Вы не изучите абсолютно все свойства и их значения, да это и не нужно! Вам нужно знать лишь основы, чтобы Вы начали применять и использовать в своих проектах. Одним важным нюансом является то, что нужно СРАЗУ же применить свойство, которое Вы только что узнали, на реальном примере. Пусть это будет Ваш собственный сайт или же простой HTML сайт — нет разницы. Важно то, чтобы Вы своими руками попробовали написать и увидели результат.

У меня на сайте есть очень много примеров в которых используется CSS. Только и вместе содержат более 100 уроков! Когда Вы будете знать хотя бы основы, тогда Вы сможете смело менять и применять все примеры из уроков.

Мои уроки об основах каскадных стилей CSS

2. Шпаргалки CSS и CSS3

Ну вот изучили Вы основы и через пару дней всё с «успехом» забыли и, наверное, думаете что это не Ваше и всё сложно. Хочу Вас сразу немного подбодрить — я сам не знаю всех свойств CSS. Но что мне мешает посмотреть их в интернете?

Правда пока зайдешь в Яндекс или Google, потом наберешь тот запрос, который нужен. А если еще и не выдаст в поиске то что нужно. Так можно потратить очень много времени но так и не найти то, что действительно искал.

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

Шпаргалки CSS и CSS3

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

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

Это как в школе: даже если не пользуешься шпаргалкой, но с ней всё равно как-то на душе спокойнее 😆 .

Последнее обновление: 21.04.2016

Любой html-документ, сколько бы он элементов не содержал, будет по сути "мертвым" без использования стилей. Стили или лучше сказать каскадные таблицы стилей (Cascading Style Sheets ) или попросту CSS определяют представление документа, его внешний вид. Рассмотрим вкратце применение стилей в контексте HTML5.

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

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

Div{ background-color:red; width: 100px; height: 60px; }

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

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

Каждая команда состоит из свойства и значения . Так, в следующем выражении:

Background-color:red;

background-color представляет свойство, а red - значение. Свойство определяет конкретный стиль. Свойств css существует множество. Например, background-color определяет цвет фона. После двоеточия идет значение для этого свойства. Например, выше указанная команда определяет для свойства background-color значение red . Иными словами, для фона элемента устанавливается цвет "red", то есть красный.

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

Наборы таких стилей часто называют таблицами стилей или CSS (Cascading Style Sheets или каскадные таблицы стилей). Существуют различные способы определения стилей.

Атрибут style

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

Стили

Здесь определены два элемента - заголовок h2 и блок div. У заголовка определен синий цвет текста с помощью свойства color . У блока div определены свойства ширины (width), высоты (height), а также цвета фона (background-color).

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

Стили

Результат в данном случае будет абсолютно тем же, что и в предыдущем случае.

Часто элемент style определяется внутри элемента head , однако может также использоваться в других частях HTML-документа. Элемент style содержит наборы стилей. У каждого стиля указывается вначале селектор , после чего в фигурных скобках идет все те же определения свойств css и их значения, что были использованы в предыдущем примере.

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

Создадим в одной папке с html странице текстовый файл, который переименуем в styles.css и определим в нем следующее содержимое:

H2{ color:blue; } div{ width: 100px; height: 100px; background-color: red; }

Это те же стили, что были внутри элемента style . И также изменим код html-страницы:

Стили

Здесь уже нет элемента style , зато есть элемент link , который подключает выше созданный файл styles.css:

Таким образом, определяя стили во внешнем файле, мы делаем код html чище, структура страницы отделяется от ее стилизации. При таком определении стили гораздо легче модифицировать, чем если бы они были определены внутри элементов или в элементе style , и такой способ является предпочтительным в HTML5.

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

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

А в файле style.css определен следующий стиль:

Div{ width:50px; height:50px; background-color:red; }

В данном случае в трех местах для элемента div определено свойство width , причем с разным значением. Какое значение будет применяться к элементу в итоге? Здесь у нас действует следующая система приоритетов:

Если у элемента определены встроенные стили (inline-стили), то они имеют высший приоритет, то есть в примере выше итоговой шириной будет 120 пикселей

Наименее приоритетными стилями являются те, которые определены во внешнем файле.

Атрибуты html и стили css

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

Валидация кода CSS

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

Одной разметкой сайт жив не будет, нужна одёжка! Каскадные таблицы стилей третьего стандарта дают нам новые возможности для того, чтобы одеть сайт.

Множество неожиданных и загадочных вещей появилось в css . Например, новые селекторы, связанные с пространством имён, другие связаны со структурой документа, псевдо-класс отрицание, псевдо-классы состояния, и т.д. Появились эффекты, которые облегчат жизнь верстальщикам. Теперь не нужно рисовать тени и выделять для них лишние дивы или скруглять углы, с помощью четырёх картинок. Сейчас у вас есть возможность скомандовать и тексту и блокам разметки: “Отбрасывайте тени или станьте немного прозрачными!”, а блокам: “Скруглите углы!”.

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

Ещё одна типографская фишка — возможность включения нестандартных шрифтов, используя правило @font-face .

Ну и для того, чтобы глаза совсем разбежались в стороны — поддержка цветовых моделей HSL (Hue, Saturation and Lightness — Тон, Насыщенность и Яркость) и RGBA (Red, Green, Blue, and Alpha — Красный, Зеленый, Синий и Прозрачность).

Новые селекторы

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

Это селектор p, которому можно указать любое оформление, например p {color: black} (цвет всех параграфов будет чёрным). Чтобы выборочно указать некоторым параграфам серый цвет текста, задействуйте атрибут class

Соответствующий селектор с правилом будет выглядеть так:
.silvered {color: #aaa} . Кроме того, можно воспользоваться атрибутом id

Тогда селектор и правило будут такими #antivampir {color: #aaa} .
Перечисленные селекторы можно комбинировать, чтобы более точно указывать нужные элементы документа.

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

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

В этих селекторах используется обращение к атрибутам тегов.

E
Выбирается элемент Е, foo атрибут которого начинается именно со строки bar

Например: img — этот селектор будет соответствовать всем картинкам, у которых значение в title начинается с fire.

E
Выбирается элемент Е, foo атрибут которого заканчивается именно строкой bar

E
Выбирается элемент Е, foo атрибут которого содержит подстроку bar

Структурные псевдо-классы

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

E:root
С помощью такого селектора, вы всегда сможете обратиться к корню документа, для HTML-документа это будет тег , при этом E любой элемент документа

E:nth-child()
В скобках может быть указано либо выражение an+b, либо значения odd(нечётные) или even(чётные). a и b это целые числа, а n показывает изменение номеров элементов начиная с нуля.

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

Например: li:nth-child(2n) или li:nth-child(even) — будут выбраны все чётные элементы списков на странице. li:nth-child(3n) — каждый третий элемент.

E:nth-last-child()
Похож на предыдущий селектор, но отсчёт идёт с конца списка.

Например: p:nth-last-child(1) — таким образом обращаемся к последним абзацам.

E:nth-of-type()
По действию похож на селектор nth-child, отличительной чертой является учёт типа элемента. То есть при выборе дочерних элементов параграфы и заголовки будут реагировать на селектор независимо. Используя этот селектор вы сможете перечислить, например, только картинки.

Например: img:nth-of-type(odd){align:left} img:nth-of-type(even){align:right} все нечётные картинки, внутри некоторого контейнера, будут выровнены по левому краю, все чётные по правому.

E:nth-last-of-type()
По действию похож на селектор nth-last-child, учитывается тип элемента.

E:last-child
Выбирается элемент Е, который является последним дочерним элементом (Обратите внимание, что E:first-child был ранее определён в CSS2)

E:first-of-type
Выбирается элемент Е, который является первым потомком своего типа.

E:last-of-type
Выбирается элемент Е, который является последним потомком своего типа

E:only-child
Выбирается элемент Е, который является единственным дочерним элементом своего родителя, если у родителя будет больше дочерних элементов, то на их всех селектор уже не подействует

E:only-of-type
Выбирается элемент Е, который является единственным потомком своего типа

E:empty
Выбирается элемент Е, который не имеет дочерних элементов (Обратите внимание, включая текстовые узлы)

Псевдо-класс target

E:target
Выбирается элемент Е, который является целью указывающего URI. В качестве такого элемента может быть с атрибутом name или элемент с атрибутом id. Значения этих атрибутов должны соответствовать URI.

В этом учебнике для создания HTML и CSS файлов мы будем использовать редактор Notepad ++ , он предназначен для пользователей Microsoft Windows и все примеры будут выполнены именно в нем.

Если же у вас Mac, то вы можете выполнять примеры в редакторе Brackets , он как и Notepad ++ абсолютно бесплатен. Что касается редактора Brackets , то он подходит и для пользователей Microsoft Windows , вы можете впоследствии выбрать, что вам ближе.

Создание внутренней таблицы стилей

Рассмотрим пример в котором вы будете создавать Вашу первую внутреннюю таблицу стилей.

Шаг 1: Откройте текстовый редактор

Нажмите кнопки WIN + R одновременно (аналог Пуск - Выполнить) при этом откроется диалог «Выполнить» впишите и нажмите Enter (откроется программа ), либо запустите программу через её ярлык.

Перед Вами откроется основное окно программы:

Шаг 2: Создайте структуру документа

Скопируйте или впишите в редактор следующий HTML код: