как выглядит css код
Введение в CSS
После знакомства с HTML разработчики сайтов разделяются на две основные категории. Одна часть считает, что с помощью HTML на сайте можно создавать всё или практически всё, другая же понимает, что в целом средств разметки недостаточно для оформления веб-документов. Действительно, HTML лишь первый этап в процессе обучения созданию сайтов. Следующим шагом является изучение стилей или CSS (Cascading Style Sheets, каскадные таблицы стилей).
Стили представляют собой набор параметров, управляющих видом и положением элементов веб-страницы. Чтобы стало понятно, о чем идет речь, посмотрим на рис. 1.1.
Рис. 1.1. Веб-страница, созданная только на HTML
Это обычная веб-страница, оформленная без всяких изысков. Тот же самый документ, но уже с добавлением стилей приобретает совершенно иной вид (рис. 1.2).
Рис. 1.2. Веб-страница, созданная на HTML и CSS
Перемена разительна, поэтому заглянем в код, чтобы понять, в чем же разница (пример 1.1).
Пример 1.1. Исходный код документа
HTML5 CSS 2.1 IE Cr Op Sa Fx
Пример 1.2. Содержимое стилевого файла style.css
. Заметьте, что сами теги в коде HTML пишутся как обычно.
Поскольку на файл со стилем можно ссылаться из любого веб-документа, это приводит в итоге к сокращению объёма повторяющихся данных. А благодаря разделению кода и оформления повышается гибкость управления видом документа и скорость работы над сайтом.
CSS представляет собой свой собственный язык, который совпадает с HTML только некоторыми значениями, например способом определения цвета.
Типы стилей
Различают несколько типов стилей, которые могут совместно применяться к одному документу. Это стиль браузера, стиль автора и стиль пользователя.
Стиль браузера
Оформление, которое по умолчанию применяется к элементам веб-страницы браузером. Это оформление можно увидеть в случае «голого» HTML, когда к документу не добавляется никаких стилей. Например, заголовок страницы, формируемый тегом
, в большинстве браузеров выводится шрифтом с засечками размером 24 пункта.
Стиль автора
Стиль, который добавляет к документу его разработчик. В примере 1.2 показан один из возможных способов подключения авторского стиля.
Стиль пользователя
Рис. 1.3. Подключение стиля пользователя в браузере Internet Explorer
В браузере Opera аналогичное действие происходит через команду Инструменты > Общие настройки > Вкладка «Расширенные» > Содержимое > Кнопка «Параметры стиля» (рис. 1.4).
Рис. 1.4. Подключение стиля пользователя в браузере Opera
Указанные типы стилей могут спокойно существовать друг с другом, если они не пытаются изменить вид одного элемента. В случае возникновения противоречия вначале имеет приоритет стиль пользователя, затем стиль автора и последним идёт стиль браузера.
Вопросы для проверки
1. Требуется задать цвет заголовка зелёным. Какое стилевое свойство подойдёт для этой цели?
2. Что такое стиль?
3. Как расшифровывается аббревиатура CSS?
Ответы
2. Набор правил форматирования элементов веб-страницы.
Разбираем CSS-код
Разбираем код языка CSS
В прошлом уроке, мы внедрили следующий CSS-код в HTML-документ:
Открыв в браузере файл index.html вы должны увидеть следующее.
В этом уроке мы разберем CSS-код и выясним из каких основных частей он состоит.
Схема CSS-кода выглядит следующим образом:
Для заголовка h1 мы применили следующие CSS-свойства и значения:
color: white; — цвет шрифта — белый,
background-color: green; — цвет фона — зелёный.
Для абзацев p мы применили следующие CSS-свойства и значения:
color: orange; — цвет шрифта — оранжевый,
font-size: 20px; — размер шрифта — 20 пикселей.
CSS-свойств существует очень много, они изменяют у тегов: цвет, фон, размеры, высоту, ширину, отступы, границы, положение, прозрачность, градиент, округление углов и многое другое (в будущем, каждое CSS-свойство мы рассмотрим отдельно).
Давайте добавим еще несколько CSS-свойств, заголовку и абзацам нашего HTML-документа.
К заголовку мы добавим четыре CSS-свойства:
width: 50%; — ширина заголовка должна занимать 50% окна браузера,
text-align: center; — заголовок должен выравниваться по центру,
padding: 5px; — между шрифтом и границей фона, должен появиться зазор в 5 пикселей,
font-family: Impact; — имя шрифта устанавливаем как Impact.
К абзацам мы добавим три CSS-свойства:
background-color: #ffc; — цвет фона абзацев быть светло-жёлтым,
width: 50%; — ширина абзацев должна занимать 50% окна браузера,
padding: 10px; — между шрифтом и границей фона, должен появиться зазор в 10 пикселей,
font-family: Arial; — имя шрифта устанавливаем как Arial.
В итоге, ваш HTML-документ должен выглядеть следующим образом (новый добавленный CSS-код выделен красным цветом):
Открыв в браузере, файл index.html вы должны увидеть следующее.
Таким образом, добавляя между фигурными скобками различные CSS-свойства, можно влиять на внешний вид того или иного тега (элемента).
Правила оформления CSS-кода
1. Синтаксис
1.1 В конце строки должна стоять точка с запятой
После пары свойство: значение обязательно ставится точка с запятой. Без этого знака препинания не будет работать правило в этой строке и следующее за ним.
Хорошо: после каждого значения стоит точка с запятой Плохо: после первого свойства пропущена точка с запятой
1.2 Для отступов внутри правил используйте два пробела
Правила, которые перечисляются внутри фигурных скобок, должны отстоять от начала строки. Для этого иcпользуйте 2 пробела. Это позволяет сразу видеть блоки свойств, относящихся к одному селектору.
1.3 Значение цветов не сокращается
1.4 Все пишется строчными буквами
Вce названия тегов и свойства пишутся строчными буквами.
1.5 Нули не пропускаются
1.6 Используйте двойные кавычки
В стилях всегда без исключения используются двойные кавычки. Если кавычки не обязательны, то они пишутся все равно.
1.7 Пробел после двоеточия
В правилах после двоеточия ставится один пробел ( top: 10px; ). При этом перед двоеточием пробел не нужен.
1.8 Пробелы после запятой в цветах
1.9 Пробел до и после комбинатора
Между селекторами до и после комбинатора (например, p > a ) ставится один пробел.
1.10 Каждое свойство с новой строки
Одно свойство — одна строка. Каждое объявление в правиле пишется на новой строке.
1.11 Пробел перед фигурной скобкой
После селектора и перед открывающейся фигурной скобкой ставится один пробел. После открывшейся скобки запись идёт с новой строки.
1.12 Закрывающая фигурная скобка на новой строке
Закрывающая фигурная скобка после набора свойств пишется на новой строке и без отступа. Она должна быть на одном уровне с селектором. Следующее после этого правило отделяется пустой строкой.
1.13 Опускайте единицы измерения
2. Порядок свойств
Порядок логически связанных свойств должен быть сгруппирован следующим образом:
Позиционирование следует первым, поскольку оно влияет на положение блоков в потоке документа. Блочная модель определяет размеры и расположение блоков и идёт следующей.
Все прочие объявления, которые изменяют вид внутренних частей блоков и не влияют на другие блоки, идут в последнюю очередь.
Сгруппированные свойства в правиле отделяются друг от друга пустой строкой.
3. Имена классов
4. Правило @import
5. Варианты шрифта
Альтернативные варианты шрифта и тип семейства указываются в конце перечисления значений font-family.
В случае использования нестандартных шрифтов обязательно указывать альтернативный веб-безопасный шрифт и тип семейства, чтобы в случае отсутствия нестандартного шрифта в системе изменения внешнего вида страницы были минимальны. Нестандартный и альтернативный шрифты должен быть одного типа.
Порядок шрифтов следующий:
Основы CSS
CSS (Cascading Style Sheets) — это код, который вы используете для стилизации вашей веб-страницы. Основы CSS помогут вам понять, что вам нужно для начала работы. Мы ответим на такие вопросы как: Как сделать мой текст черным или красным? Как сделать так, чтобы контент появлялся в определённом месте на экране? Как украсить мою веб-страницу с помощью фоновых изображений и цветов?
Так что же такое CSS?
Но нам всё равно нужно применить CSS к нашему HTML документу. В противном случае, CSS стиль не повлияет на то, как ваш браузер отобразит HTML документ. (Если вы не следили за нашим проектом, то прочитайте раздел Работа с файлами и Основы HTML, чтобы узнать, что вам нужно сделать в первую очередь.)
Если текст вашего абзаца теперь красный, примите наши поздравления! Вы написали свой первый успешный CSS!
Анатомия набора правил CSS
Давайте взглянем на вышеупомянутый CSS немного более подробно:
Вся структура называется набором правил (но зачастую для краткости «правило»). Отметим также имена отдельных частей:
Селектор (Selector) Имя HTML-элемента в начале набора правил. Он выбирает элемент(ы) для применения стиля (в данном случае, элементы p ). Для стилизации другого элемента, просто измените селектор. Объявление (Declaration) Единственное правило, например color: red; указывает, какие из свойств элемента вы хотите стилизовать. Свойства (Properties) Способы, которыми вы можете стилизовать определённый HTML-элемент (в данном случае, color является свойством для элементов
Обратите внимание на важные части синтаксиса:
Таким образом, чтобы изменить несколько значений свойств сразу, вам просто нужно написать их, разделяя точкой с запятой, например так:
Выбор нескольких элементов
Вы также можете выбрать несколько элементов разного типа и применить единый набор правил для всех из них. Добавьте несколько селекторов, разделённых запятыми. Например:
Разные типы селекторов
Существует множество различных типов селектора. Выше мы рассматривали только селектор элементов, который выбирает все элементы определённого типа в HTML документе. Но мы можем сделать выбор более конкретным. Вот некоторые из наиболее распространённых типов селекторов:
