День 20. Welcome to CSS
Как видно из заголовка, сегодня я приступил к изучению CSS - Cascading Style Sheets, они же каскадные таблицы стилей.
Нужны они для оформления HTML страниц, потому как сам по себе язык разметки несет в себе весьма скудные возможности для этого. Кстати, в языке HTML 5, который сменит в скором будущем язык HTML 4,оформление страниц будет допускаться в принципе только с помощью CSS.
Давайте сначала поговорим о преимуществах, которые несет в себе использование CSS.
Преимущество 1. Широкий инструментарий.
Ну тут все вроде бы должно быть ясно. В языке CSS возможно сделать со страницей такие преобразования, которые при всем желании не получится сделать одним HTML.
Преимущество 2. Простота применения.
Вот смотрите. Таблицу стилей можно непосредственно вписать в код страницы, а можно сослаться на документ, где отдельно описана таблица стилей. Понятно, да?
Если у нас есть сайт, то там: во-первых все страницы имеют общее оформление, а во-вторых этих самых страниц до хрена и больше. И вот заказчик говорит: "А можно мне шрифт другой на всех на страницах, ну и цветовую схему поменять, а?" И если мы все оформляли одним HTML или вписывали таблицу в код, то у нас проблемы. Представьте сколько времени уйдет на изменение такой мелочи, но во всех документах? А вот если мы ссылались на таблицу, которая есть вне документов сайта, то мы просто меняем там нужные параметры и изменения применются ко всем страницам. Грудь да и только.
Преимущество 3. Ускорение.
Тут снова надо смотреть. Когда вы впервые заходите на сайт, то ваш браузер скачивает из сети всю стрницу, включая таблицу стилей. Потом вы нажимаете на ссылку, чтобы перейти на другую страницу этого же сайта и... Браузер будет грузить только содержимое страницы, таблицу же стилей он больше грузить не будет, он сохранил ее кэше, молодец какой, и как результат страницы грузятся быстрее.
Ну и, естественно, коли они крутые такие, эти самые каскадные таблицы, то их капец как надо выучить.
Начал я с простеньких примеров. Тут вы меня извините, ничего сверхъестественного я за сегодня не освоил, но это ведь только учеба-обучение.
Для того, чтобы вписать таблицу непосредственно в документ используется элемент STYLE, который следует поместить внутрь HEAD. Ну и для элемента STYLE нужно задать атрибут type со значением "text/css". Внутрь элемента STYLE нужно внести конструкцию типа:
название элемента к которому хотим применить стиль{сами штуки стиля}. Понятнее станет, когда вы посмортите на пример.
<html><head>
<title>Первый опыт CSS</title>
<style type="text/css">
h1{color: blue}
</style>
</head>
<body>
<h1>Здесь текст заголовка</h1>
<p>Здесь какой нибудь абзац</p>
</body>
</html>
Для этого используется элемент LINK, который имеет три основных атрибута:
rel - умные люди говорят, что это тип соединения, когда я спросил что под этим понимать, мне сказали "Для таблиц пиши stylesheet и не парься". Пишу вот теперь и не парюсь.
href - ну это нам знакомо. Здесь надо указать ссыку на файл со стилями.
type - это тип присоединяемого элемента, для табоицы стилей это text/css.
В примере это выглядит вот так:
<html>
<head>
<title>Второй опыт CSS</title>
<link rel="stylesheet" href="Связанный стиль.css" type="text/css">
</head>
<body>
<h1>Здесь текст заголовка</h1>
<p>Здесь какой нибудь абзац</p>
</body>
</html>
Содержимое файла Связанный стиль.css:
h1 {
color: #000080;
font-family: Arial, Verdana, sans-serif;
text-align: center;
}
p {
padding-left: 20px;
}
Итог выглядит вот так:
Итог.
Говорят, что в CSS более 100 свойств, которые можно применять к странице. Жесть конечно. Завтра я начну разбирать CSS более подробно, так что ждите чего нибудь нового и красивого)До завтра, друзья.
Комментариев нет:
Отправить комментарий