Верстка при помощи CSS.
Все мы знаем, что такое интернет, сайты и веб страницы. Половина из этих людей в курсе от куда берутся и что же это такое - веб страница. И ещё меньше народа понимает, как строится веб страница на сегодняшний день, по каким технологиям, правилам и стандартам. Я не буду рассказывать всю цепь запроса страниц с сервера. Моей задачей является рассказать, как страницы получаются такими красочными и интересными в плане графики и исполнения, что на них хочется заходить и заходить.
ПРИВЕСТИ НЕСКОЛЬКО САЙТОВ
Технология, которая позволяет достичь такое красочное отображение сайтов в ваших браузерах называется CSS.
CSS - это сокращение от Cascading Style Sheets - в переводе Каскадные таблицы стилей. Формальный язык описания внешнего вида документа, написанного с использованием языка разметки.
Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML.
Уникальное изобретение человечества, значительно облегчающее создание веб-сайтов. CSS работает со шрифтами, полями, таблицами, отступами, картинками и др. и представляет значительно более широкие возможности, чем простой html.
Стиль - это набор параметров, задающий внешнее представление некоторого объекта в той или иной среде.
Цель создания CSS
CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основной целью разработки CSS являлось разделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой веб-страницы (которое теперь производится с помощью формального языка CSS). Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом.
Отличия CSS от HTML
Дело в том, что изначально html использовался исключительно для разметки содержимого документа. Т.е. с его помощью указывалось, мол, это параграф, а это таблица, а это - картинка.
С каждым месяцем количество пользователей интернет росло. Выдвигались все более серьезные требования к дизайну, т.е. внешнему оформлению страниц. Вскоре разработчиками были изобретены новые теги , такие как:
<font> представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура. Хотя этот тег до сих пор поддерживается всеми браузерами, он считается устаревшим и от его использования рекомендуется отказаться в пользу стилей.
Атрибуты
color
Устанавливает цвет текста.
face
Определяет гарнитуру шрифта.
size
Задает размер шрифта в условных единицах.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title></title>
</head>
<body>
<p><font size="5" color="red" face="Arial">П</font>ервая буква этого предложения
написана шрифтом Arial, выделена красным цветом и увеличена в размерах.</p>
</body>
</html>
<strong> - предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title></title>
</head>
<body>
<p><strong>Тут мы видим действия тега "strong".</strong></p>
<p><strong>И тут тоже.</strong>Вот сдесь действие его прекращаеться так как тег был закрыт.<strong>Но вот тут опять мы видим жирный шрифт</strong>
</p>
</body>
</html>
и др. которые определяли уже не структуру, а внешний вид. Таких тегов появилось очень много. И все бы хорошо, НО! большая доля этих тегов поддерживалась только одним видом браузеров. Обычным явлением, при попытке просмотра того или иного сайта стала ошибка: "Вам необходим браузер X для просмотра этой страницы". Специально для исправления этой ситуации был создан CSS . Он предоставил возможность точного дизайна, поддерживаемого всеми браузерами.
Допустим перед нами стоит задача сделать сайт о природе из 100 страниц. Как вы понимаете, по правилам хорошего тона, весь сайт необходимо выполнить в одном стиле, к примеру, зеленый фон, шрифт Verdana 14 размера , ссылки красного цвета. Если мы делаем такой сайт на чистом html, то на каждой новой странице нужно указывать зеленый фон, указывать чтобы ссылки были красного цвета, каждому новому параграфу указывать шрифт 14 размера. Т.е. каждой странице нужно как-бы заново создавать стиль. Теперь сделаем тоже самое на CSS . В отдельном файле создаем стиль одинаковый для всех страниц. И в каждой странице пропишем единственную строчку подключающую этот стиль. Вот и все!
Это круче тем что в один прекрасный день вы захотели поменять дизайн всего сайта. В случае с чистым html , Вам придется заходить на каждую страницу и менять все параметры на другие, представьте сколько это займет времени. Но в случае использования CSS вы просто поменяли эти параметры в файле стилей и на всех 100 страницах дизайн обновился! чувствуете разницу?
Тем более с помощью CSS можно делать такие вещи, которые на html сделать вообще нереально. Но об этом позже.
Подведем итоги
основные преимущества CSS:
управление дизайном любого количества документов с помощью одной таблицы стилей;
более точный дизайн страниц, поддерживаемый всеми браузерами;
разделение документа на две составляющие: структура и дизайн, благодаря чему исходный код становится чистым и легко читаемым
новые расширенные возможности по сравнению с обычным html
Как работает CSS
Многие свойства, используемые в Cascading Style Sheets (CSS), аналогичны свойствам HTML. Таким образом, если вы используете HTML для дизайна страниц, вы, наверняка узнáете многие коды. Посмотрим на следующих примерах.
Базовый синтаксис CSS
Скажем, нам нужен красный цвет фона web-страницы:
В HTML это можно сделать так:
<body bgcolor="#FF0000">
С помощью CSS того же самого результата можно добиться так:
body {background-color: #FF0000;}
Как
видите, эти коды более или менее идентичны
в HTML и CSS.
Применение CSS к HTML-документу.
Есть три способа применить правила CSS к HTML-документу. Ниже мы рассмотри эти три метода.
Метод 1: атрибут style
Можно применять CSS к HTML с помощью HTML-атрибута style. Красный цвет фона можно установить так:
<body style="background-color: #FF0000;">
<p>This is a red page</p>
</body>
Метод 2: Внутренний (тэг style)
Второй способ вставки CSS-кодов - HTML-тэг <style>. Например:
<html>
<head>
<title>Пример</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>Тут красная страница)))))</p>
</body>
</html>
Метод 3: Внешний (ссылка на таблицу стилей)
Рекомендуемый метод - создание ссылки на так называемую внешнюю таблицу стилей. Внешняя таблица стилей это просто текстовый файл с расширением .css. Вы можете поместить таблицу стилей на ваш web-сервер или на жёсткий диск, как и другие файлы.
Например, скажем, ваша таблица стилей называется styles.css и находится в папке lekcia_Belov. Это можно проиллюстрировать так:
Весь фокус состоит в том, чтобы создать ссылку из HTML-документа (index.htm) на таблицу стилей (styles.css). Это можно сделать одной строчкой HTML-кода:
<link rel="stylesheet" type="text/css" href="style/style.css" />
ОБЯЗАТЕЛЬНО РАССКРЫТЬ АТРИБУТЫ
Эту строку кода нужно вставлять в разделе header HTML, то есть между тэгами <head> и</head>. Например, так:
<head>
<title></title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
Эта ссылка указывает браузеру, что он должен использовать правила отображения HTML-файла из CSS-файла. Самое важное здесь то, что несколько HTML-документов могут ссылаться на одну таблицу стилей. Иначе говоря, один CSS-файл можно использовать для управления отображением множества HTML-документов.
Это поможет вам сэкономить уйму времени и сил. Если вы, например, хотите изменить цвет фона web-сайта из 100 страниц, таблица стилей избавит вас от необходимости вручную изменять все сто HTML-документов. Используя CSS, эти изменения можно сделать за несколько секунд, просто изменив один код в центральной таблице стилей.
Давайте посмотрим, как это сделать.