Основы работы с языком
Мы с вами уже разобрали основные теги языка HTML и теперь пришло время навести красоту. Хотелось бы иметь возможность менять цвет текста, его размер, фон и многое другое. Это делается с помощью языка CSS.
Как правило, CSS команды (стили) хранятся в отдельном файле, который подключается специальным тегом ко всем HTML страницам нашего сайта. Преимущество такого подхода в том, что CSS файл один, а HTML файлов может быть любое количество, хоть тысяча. Если мы сделаем изменение в одном месте CSS файла, например, покрасим все абзацы в красный цвет, то эти изменения применятся на всей тысяче HTML страниц, к которым подключен наш CSS файл. Очень удобно и быстро.
Файл со стилями должен иметь расширение .css. Чтобы подключить такой файл к HTML странице, в теге head следует написать такую конструкцию:
В следующем примере к нашему HTML файлу подключается CSS файл styles.css:
<html>
<head>
<meta charset="utf-8">
<title>This is the title<title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>This is a paragraph with text.</p>
</body>
</html>
Как работать с CSS
Каждому тегу в HTML соответствует так называемый селектор CSS. К примеру, тегу <p> соответствует CSS селектор p, с помощью которого мы можем обратиться ко всем абзацам HTML страницы и, например, покрасить их всех одновременно в красный цвет.
После селектора следует ставить фигурные скобки, внутри которых следует писать CSS свойства. Свойства и задают цвет, размер шрифта и другие интересные вещи. Их следует писать в таком формате: имя свойства, потом двоеточие, потом значение этого свойства (например, свойство - это цвет, а "красный" - это значение). Потом нужно поставить точку с запятой и можно писать следующее свойство.
Давайте, например, покрасим все абзацы в красный цвет:
Любые цвета в CSS
В предыдущих уроках вы увидели, как можно задать цвет ключевым словом. Ключевых слов, однако, немного, и с их помощью нельзя сделать все возможные оттенки всех цветов. Для этого существует еще два способа задания цветов. Через rgb и через решетку #.
Смотрите пример задания цвета через rgb:
Смотрите пример задания цвета через #:
Для того, чтобы получить нужный цвет, используются специальные программы. Вот пример онлайн генератора цвета: colorscheme.ru, а вот пример программы, позволяющей замерять цвет: colorcop.net.
Выравнивание текста в CSS
Сейчас мы научимся выравнивать текст. Для этого используется свойство text-align. Текст можно выравнять по левому краю (значение left), по правому (значение right), по центру (значение center) и одновременно и по обоим краям (значение justify).
Жирность текста в CSS
В данном уроке мы изучим свойство font-weight, которое позволяет сделать текст жирным или наоборот - отменить жирность (к примеру, для заголовков, которые жирные по умолчанию). Чтобы сделать текст жирным, следует указать значение bold, а чтобы отменить жирность - значение normal.
Это свойство работает аналогично тегу b, который мы уже разобрали. Разница в том, что через CSS управлять жирностью гораздо удобнее - можно, например, заставить все абзацы стать жирными, а все заголовки - нежирными, сделав всего пару записей в CSS файле.
Если бы я делал жирный через тег b - мне пришлось бы содержимое каждого абзаца обернуть в этот тег, а это было бы очень затратным по времени (а если я потом захочу убрать жирность абзацам - мне придется убирать все эти теги, представьте, сколько это лишней, бесполезной работы).
В следующем примере мы сделаем все абзацы жирными, а все заголовки h2 - нежирными:
p { font-weight: bold; }
Курсив в CSS
Свойство font-style позволяет сделать текст курсивным или наоборот - отменить курсив. Чтобы сделать текст курсивом, следует добавить значение italic, а чтобы отменить курсив - значение normal. Смотрите пример:
Размер шрифта в CSS
Давайте научимся менять размер шрифта. Для этого предназначено свойство font-size, принимающее значение в пикселях.
Давайте зададим тексту абзаца шрифт в 30 пикселей:
Тип шрифта в CSS
Свойство font-family позволяет задать семейство шрифта. Наиболее распространенные шрифты: Times New Roman (стоит по умолчанию), Arial, Georgia, Verdana, Trebuchet MS, Impact, Arial Black, Comic Sans MS, Courier New.
Поставим для всех абзацев шрифт Arial:
Межстрочный интервал в CSS
Давайте теперь научимся задавать межстрочный интервал тексту. Под межстрочным интервалом подразумевается расстояние между линиями текста, то есть белый промежуток между ними. Для этого предназначено свойство line-height, задающее высоту линии текста.
При использовании свойства line-height вас может ожидать некоторый подвох: это свойство не задает промежуток между строками текста, как могло бы показаться, а задает высоту линии текста.
Это значит, что реальный видимый промежуток между строками будет вычисляться так: line-height - font-size = видимое расстояние между строками текста. В следующем примере расстояние между строками текста будет 50px - 20px = 30px:
Эффекты текста в CSS
Свойство text-decoration позволяет задавать некоторые эффекты для текста: подчеркивание, перечеркивание, линию сверху, а также отменять такие эффекты, если какой-либо тег имеет их по умолчанию. Чаще всего это свойство используются для отмены подчеркивания ссылок (они по умолчанию подчеркнуты). В следующих уроках мы подробно рассмотрим значения свойства text-decoration.
Отмена эффектов для текста в CSS
Значение none отменяет все эффекты. Обычно используется для отмены подчеркивания ссылок.
Смотрите пример: