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

Что нужно знать для начала

Многие ошибочно называют свойства в css тегами. Так вот, это не совсем правильно. Теги – это команды html языка, и только его одного – все они пишутся в угловых скобках. В css же никаких тегов не нужно. Рассмотрим например, типичные правила для оформления веб-страницы, прописанные в таблице стилей:

body{ background: #fff; color: #ccc; ... }

body { background : #fff; color : #ccc; . . .

Это типичный синтаксис этого языка. Тут все очень просто – вначале пишется селектор (body или любой другой), потом открываются фигурные скобки, в которые и записывают все необходимые свойства и их значения.

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

Стили для текстового содержимого

Текст – всему голова на веб-странице. Для его оформления есть множество свойств. О них подробно написано в других статьях: , .

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

Например, в css есть возможность определить расстояние между буквами и между отдельными словами. Это делается с помощью letter-spacing и word-spacing соответственно.

Отображение на экране

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

Итак, иногда такое поведение нужно изменить и для этого используется display и множество его значений, но я расскажу лишь о самых основных:

Block – элемент становится блочным (то есть приобретает блочные особенности, даже если он был строчным. С этих пор ему можно записывать размеры, нормально определять внешние отступы и т.д.)

Inline- преобразование в строчный элемент.

Inline-block – блочно-строчный тип. Это такое поведение, при котором элемент сохраняет свои блочные свойства, но при этом может стать в одну строку с другими блоками, если им тоже прописано inline-block и им хватает места по ширине. Стоит помнить, что по умолчанию блок занимает в родителе все свободное место по ширине, потому нужно вручную определить ширину для него (абсолютную или относительную).

Table — преобразование элемента в таблицу (соответственно, есть также значения table-row и table-cell)

None – элемент исчезает со страницы и не оставляет никаких следов, как будто бы его на ней и не было.

Опять же, это не все значения, только самые основные.

Свойства размера

Блоки играют основную роль в создании сайта. Им нужно прописывать определенные размеры, это указывается с помощью таких свойств:

Width – ширина

Height – высота

Max-width, min-width – максимальная или минимальная ширина. Например, если указать блоку max-width, то эта ширина не будет жесткой, она сможет меняться в зависимости от размеров окна. Если же указать и min-width, то тогда блок не сможет стать уже, чем указанный размер. Такое же можно прописать и для высоты, но это делают гораздо реже.

Также на размеры блочных элементов могут повлиять дополнительные параметры. Например, внутренние отступы. Они задаются с помощью слова padding и значения в пикселях (но можно и в другой величине). Если нужно задать отступ только для одной стороны, можно указать это, дописав к padding- через дефис нужную сторону (left, right и т.д.)

Например, если мы определили ширину контейнера в 600 пикселей, а потом добавили внутренние отступы по бокам в 20 пикселей, то реальная новая ширина составит 640px. Если вы не хотите, чтобы размеры добавлялись, можно воспользоваться таким приемом:

*{ box-sizing: border-box; }

К блокам добавляется синяя рамка со всех сторон толщиной 3 пикселя с каждой. Суммарно ширина увеличивается на 6 пикселей, а если вы не хотите этого, нужно использовать то самое box-sizing.

Цвет и фон

Это основные параметры, которые отвечают за восприятие нами информации. В значении в этим свойствам записывается одно и то же – цвет, который можно определить с помощью ключевых слов, в шестнадцатеричном коде или каком-то цветовом формате (чаще всего rgb). Единственное отличие – цвет определяется с помощью свойства color, а фон – с помощью background.

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

Синтаксис

class="<имя класса>"

Значения

В HTML4 имена классов могут содержать в себе латинские буквы (A–Z, a–z), цифры (0–9), символ дефиса (-) и подчёркивания (_) и не должны начинаться с цифры. Использование русских букв в классах недопустимо. В HTML5 эти ограничения сняты, но для совместимости со старыми браузерами и JavaScript рекомендуется придерживаться данных правил.

Значение по умолчанию

Пример

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

Для исключения засветки экрана дисплея световыми потоками оконные проемы снабжены светорассеивающими шторами.

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации ) - первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living ) - он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

×

Браузеры

В таблице браузеров применяются следующие обозначения.

Каждый НТМL-элемент может иметь атрибут id . Он предназначен для идентификации какого-либо конкретного тега. В пределах всей HTML-страницы должен существовать только один тег с определенным значением атрибута id . Наличие нескольких элементов с одинаковым значением id не допускается и может привести к ошибке. Значение атрибута id может состоять из букв латинского алфавита, цифр, знака подчеркивания и дефиса. Причем значение атрибута может начинаться с латинской буквы или со знака подчеркивания (но не с цифры или другого символа). Кроме того, значения атрибута id чувствительны к регистру. Атрибут id называют глобальным, поскольку он может быть использован с любыми НТМL-элементами.
В CSS id-селектор содержит символ (#) , непосредственно за которым следует значение атрибута id . Например, следующий id-селектор сопоставляется элементу

, значение атрибута id которого равно chapter7 :

#chapter7 {background-color:#FF00FF;}

После описания идентификатора его следует включить в состав тега:

Заголовок второго уровня с id

Пример: Применение идентификатора

• Попробуй сам »

Заголовок второго уровня с id

Заголовок второго уровня

Заголовок второго уровня

Заголовок второго уровня с id

Заголовок второго уровня

Заголовок второго уровня

Классы

Классы используются для классификации элементов по общим группам, поэтому в отличие от атрибута id , множеству элементов может быть присвоено общее имя класса. Присваивая элементам имя одного класса, вы можете применить стили ко всем таким элементам одновременно с помощью единственного правила стилей. Чтобы сделать это, следует воспользоваться атрибутом class . Его значение должно описывать, к какому классу принадлежит элемент.
Класс похож на идентификатор, но вместо символа (#) перед именем класса указывается точка (.) :

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

Заголовок второго уровня

Пример: Применение атрибутов id и class

• Попробуй сам »

Заголовок второго уровня с id и class=test

Заголовок второго уровня с class=test

Заголовок второго уровня

Заголовок второго уровня с class=test orange

Атрибуты class и id

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

CSS для ячеек таблицы

table.special-table td {

border: 1px solid #000000;

Существует возможность перечисления нескольких классов в качестве значения для атрибута CLASS. Все они будут применятся одновременно, по правилам приоритетов для селекторов, описанных в разделе 5.6. Названия классов должны быть разделены пробелом, как это показано в следующем примере:

Указание нескольких классов для одного элемента

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

Неиспользуемые или редко используемые элементы и атрибуты

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

Элемент FONT

С некоторых пор, элемент FONT считается неприемлемым для использования, что подтверждает консорциум W3C. Дело в том, что элемент FONT не является элементом определяющим структуру документа, но отвечает только за стиль отображения. Так как все стили должны быть вынесены в CSS для того, чтобы HTML документ в большей степени отражал структуру документа и в меньшей степени его стиль, то использование элемента FONT создает дополнительные трудности при редактировании документов и их преобразовании к другим спецификациям. Поэтому никогда не используйте элемент FONT.

Элемент HR

Элемент HR (horizontal rule) предназначен для отображения горизонтального разделителя в виде линии. В документах строгого дизайна элемент HR практически не используется по причине его специфического отображения различными браузерами. Старайтесь не использовать этот элемент без особой необходимости.

Элемент MAP

Элемент MAP создан для нанесения координатной сетки на изображение, выделяя таким образом, области картины, являющиеся гиперссылками.

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

Элемент FRAME

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

Атрибут NOWRAP

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

С некоторых пор, атрибут NOWRAP весьма непопулярен, на смену ему пришло CSS свойство white-space со значением nowrap. Используйте атрибут NOWRAP для браузеров, которые не поддерживают CSS свойство white-space. Как правило, это уже устаревшие браузеры вроде Internet Explorer 5.0 или Netscape 4. В случае XHTML, атрибут NOWRAP, как и любой другой атрибут, по правилам XML обязательно должен иметь значение.

Атрибут NOWRAP в XHTML

Атрибут ROWSPAN

Атрибут ROWSPAN элемента TD указывает, сколько строк таблицы должны быть объединены в одну. Из-за неоднозначного понимания браузерами, этот атрибут делает себя крайне непопулярным. Старайтесь избегать использования этого атрибута в своих документах. Следуя этому правилу вы будете более уверены в том, что ваш документ будет правильно отображаться в различных браузерах.

Атрибут STYLE

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

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

Тег.Имя класса { свойство1 : значение ; свойство2 : значение ; ... }

В селекторе после имени тега через точку пишется имя класса. Имя класса разработчик придумывает сам. Имя класса должно начинаться с латинской буквы, может содержать дефис (-) и знак подчёркивания (_).

В коде HTML для указания связи тега с классом CSS в теге прописывается атрибут class="Имя класса " .

Теперь простой пример использования классов:

• Пункт 1
• Пункт 2
• Пункт 3

• Пункт 1
• Пункт 2
• Пункт 3

• Пункт 1
• Пункт 2
• Пункт 3

В этом примере при помощи классов мы устанавливаем разные цвета для трёх списков созданных тегом

. Этот пример не очень прикладной. Сейчас немного усовершенствуем его, сделаем его более прикладным. Тег
используется для создания меню сайтов. В следующем примере мы создадим два меню при помощи этого тега.
• Пункт 1
• Пункт 2
• Пункт 3
• Пункт 1
• Пункт 2
• Пункт 3

Результат работы кода:

Рисунок 1. Пример использования классов в создании меню.

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

Давайте рассмотрим ещё один простой пример использования классов. Создадим класс для оформления абзаца (тег

) в виде цитаты.

CSS является незаменимым инструментом в вёрстке html-документов. Как говорил великий Тутанхомон:

Используйте CSS во всех областях вашей жизни: на кухне, в ванной, в саду и огороде.

Работа кода:


Рисунок 2. Пример использования классов в создании цитаты.

И ещё один простой пример использования классов CSS. На этот раз сделаем таблицу зеброй для удобства чтения данных.

…

…

…

…

Планета	Город	Население
Земля	Токио	Много
Земля	Лондон	Много
Земля	Мухосранск	Мало
Марс	Еулоаей	Неизвестно

Работа кода:

Рисунок 3. Пример использования классов в создании таблицы.

Но стоит отметить что этот код некорректен. Дело в том, что в html документе все теги будут имень фоновый цвет #519E70 . Чтобы правило для тега действовало только в рамках таблицы с классом towns , селектор должен быть следующим table.towns th { ... } .

Одновременное использование разных классов

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

Создадим облако тегов применяя два класса к одноме тегу:

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

Рисунок 3. Пример одновременного использования 2 классов в создании облака тегов.