Самоучитель CSS: Введение
CSS (от англ. Cascading Style Sheets — каскадные таблицы стилей) — это язык стилей, отвечающий за визуальное представление HTML-документов.
Прежде чем приступить к изучению CSS, у вас уже должен быть небольшой опыт работы с HTML, имеется ввиду, что вы уже создавали простые страницы и знакомы с основными HTML тегами для разметки документа.
Стили по умолчанию
Когда браузер обрабатывает HTML-код, он использует встроенный по умолчанию стиль представления HTML-элементов на веб-странице. Чтобы понять, что такое "стиль по умолчанию" рассмотрим в качестве примера элементы <h1> - <h6>: заголовки являются блочными элементами, занимают всю доступную ширину в родительском элементе, имеют разрыв строки до и после элемента, текст заголовка отображается жирным начертанием и имеет определённый размер, в зависимости от уровня заголовка, всё это вместе является встроенным стилем для заголовков:
h1, h2, h3, h4, h5, h6 {
display: block;
font-weight: bold;
}
h1 { margin-block: 0.67em; font-size: 2.00em; }
h2 { margin-block: 0.83em; font-size: 1.50em; }
h3 { margin-block: 1.00em; font-size: 1.17em; }
h4 { margin-block: 1.33em; font-size: 1.00em; }
h5 { margin-block: 1.67em; font-size: 0.83em; }
h6 { margin-block: 2.33em; font-size: 0.67em; }<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
<h4>Заголовок четвёртого уровня</h4>
<h5>Заголовок пятого уровня</h5>
<h6>Заголовок шестого уровня</h6>Результат
Заголовок первого уровня
Заголовок второго уровня
Заголовок третьего уровня
Заголовок четвёртого уровня
Заголовок пятого уровня
Заголовок шестого уровня
С помощью CSS можно переопределить установленный для элементов стиль по умолчанию на свой собственный, создав тем самым уникальный стиль оформления для элементов веб-страницы, например изменить цвет текста заголовка и размер шрифта, выделить изображение красной рамкой и т.д.
Что такое CSS?
- CSS — Cascading Style Sheets (Каскадные Таблицы Стилей).
- Стиль — это правило, описывающее форматирование отдельного элемента на странице.
- Стили были добавлены для решения проблемы оформления веб-страниц.
- Стили можно хранить в отдельных документах, что уменьшает количество кода в HTML-документах.
Чем полезны таблицы стилей помещённые в отдельный документ? Ответ очень прост, можно собрать все стили, которые используются на сайте, в один внешний файл с расширением .css и связать его со всеми страницами сайта. После этого, когда вы будете редактировать стиль, изменения моментально затрагивают все элементы на страницах сайта, где есть ссылка на данный внешний файл со стилями. Таким образом, вы можете полностью изменить внешний вид путем редактирования единственного файла таблицы стилей, что существенно упрощает работу, нежели редактировать стили на каждой странице в отдельности.
HTML и CSS
CSS и HTML — это два разных языка для разных целей.
При написании html-кода для CSS, выбирая теги, ориентируйтесь на роль, которую играет фрагмент текста на веб-странице, а не на внешний вид, который текст приобретает благодаря этому тегу.
Применяя CSS для дизайна веб-страницы, вы используете HTML только по его прямому назначению, то есть именно для разметки веб-страницы на логические фрагменты, не заботясь о форматировании и внешнем виде страницы.
Небольшой пример использования CSS:
img {
display: block;
float: left;
border: 5px groove aqua;
margin-right: 15px;
}
p {
text-shadow: #145214 2px 2px 1px,
#1f7a1f -1px -1px 0;
line-height: 1.5em;
font-size: 1.3em;
font-weight: bold;
color: #70DB70;
letter-spacing: 2px;
}<img src="examples/circle.png" width="150" height="120">
<p>С помощью стилей, картинка была позиционирована
с левой стороны, а для текста был изменен размер, цвет
и добавлена тень.</p>Результат
С помощью стилей, картинка была позиционирована с левой стороны, а для текста был изменен размер, цвет и добавлена тень.