Главная | Обратная связь | Поможем написать вашу работу!

Встроенные стили CSS

Внешний файл стилей CSS

При таком способе описания стилей все они помещаются в отдельный файл (как правило с расширением css). А уже потом во все необходимые html-документы с помощью тэга link встраиваются ссылки на этот файл. Этот способ наиболее предпочтителен, т.к. многократно упрощает труд при смене стилистики сайта.

Пример css-кода внешнего файла:

Пример css-кода:
/*Файл style.css*/
P.red {color:red;}
P.blue {color:blue;}

Пример внедрения файла этого стиля css в html-страницу:

Пример html-кода:

<html>
<head>

</head>
<body>
<p class=red>Абзац красного цвета</p>
<p class=blue>Абзац синего цвета</p>
</body>
</html>

Внимание! Внешний файл стилей может быть написан в любом текстовом редакторе, НО не должен содержать HTML-конструкций.

Внутреннее описание стилей CSS

При таком способе описания стилей они располагаются прямо в html-документе. Стили описываются внутри тэга <style>, который обязательно должен располагаться в заголовке head html-документа. Внутреннее описание стилей целесообразно использовать для уникального оформления не более одного-двух документов.

Пример внедрения файла этого стиля css в html-страницу:

Пример html-кода:

<html>
<head>

</head>
<body>
<p class=red>Абзац красного цвета</p>
<p class=blue>Абзац синего цвета</p>
</body>
</html>

Встроенные стили CSS

Встроенные стили не позволяют задействовать все преимущества CSS и используются только для переопределения свойств стиля единственного элемента. Описание стиля приводится непосредственно в тэге HTML-элемента:

Пример html-кода:

<html>
<body>

<p style="color:blue;">Абзац синего цвета</p>

</body>
</html>

В одном HTML-документе можно ссылаться на несколько файлов стилей.

В случае использования нескольких стилей, их применимость определяется приоритетом стиля (в порядке убывания):

1). Встроенный в HTML-элемент стиль;
2). Встроенный в HTML-документ стиль (внутри тега <head>);
3). Внешний файл стиля;
4). Настройки Web-браузера по умолчанию;

Внимание! Если ссылка на внешний файл стиля приведена после определения внутреннего стиля, то он переопределяет ранее указанный стиль. Будьте внимательны!

На данный момент существуют два основных способа верстания сайта — блочная DIV верстка и табличная..

Для того, чтобы нам создать простой макет сайта, основанный на блочной DIV верстке, достаточно будет двух файлов, в одном из которых мы пропишем HTML код нашего макета (пусть это будет файл index.html), а в другом — разместим стилевое оформление CSS макета (назовем этот файл style.css).

Сначала давайте попробуем создать простой макет в 2 колонки на Div верстке, который будет содержать верхнюю часть (шапку или же header), нижнюю часть (подвал или же footer), а так же те самые две колонки, из-за которых такой макет и называется 2 колоночным — это область для основного содержимого страницы (content) и область левой колонки макета на Div-ах (left), в которой обычно располагаются элементы, облегчающие навигацию по сайту (меню и тому подобные вещи), реклама и многое другое.

В схематичном виде 2 колоночный макет на основе Div верстки будет выглядеть так:

Каждый из элементов 2 колоночного макета мы поместим в свой контейнер DIV, присвоим ему уникальный ID, для которого в файле CSS добавим ряд свойств, описывающих внешний вид и положение данного контейнера на странице. Кроме этого, все контейнеры с элементами 2 колоночного макета мы поместим в один общий DIV контейнер, который позволит нам регулировать положение всего макета на странице (задать ширину макета, выравнивать макет относительно края страницы и т.д.)

Теперь нам нужно будет создать четыре DIV контейнера для всех частей нашего 2 колоночного макета (шапки, левой колонки, области для контента, футера) и заключить их в один большой Div контейнер. Внутрь Div контейнеров для частей макета можно будет заключить для наглядности названия этих блоков макета. Все это мы будет писать между открывающим и закрывающим Html тегами Body. Получится примерно такой HTML код в Index.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Основы блочной верстки (DIV верстки)</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="maket"> <div id="header">Шапка </div> <div id="left">Левая колонка</div> <div id="content">Содержимое страницы</div> <div id="footer">Подвал</div> </div> </body> </html>

Т.е. сразу за открывающим Html тегом Body мы прописали открывающий Html тег основного Div контейнера макета:

В котором мы задали ID для этого Div контейнера (в нашем случае id="maket"). В последствии для этого ID, в файле каскадных таблиц стилей Style.css, мы допишем CSS свойства, позволяющие определить размер и выравнивание основного Div контейнера. После открывающего Html тега основного Div контейнера мы прописали HTML код четырех Div контейнеров, которые станут элементами макета в 2 колонки на основе блочной верстки.

<div id="header">Шапка </div> <div id="left">Левая колонка</div> <div id="content">Содержимое страницы</div> <div id="footer">Подвал</div>

Всем этим четырем Div контейнерам мы назначили свои индивидуальные ID, для которых затем в Style.css мы пропишем CSS свойства, помогающие настроить размер и взаимное размещение (позиционирование) этих контейнеров. Для наглядности, внутри этих контейнеров я прописал их назначение. Ну, и перед закрывающим Html тегом Body мы поставили закрывающий тег основного Div контейнера макета в 2 колонки:

</div>

Теперь, если открыть созданный нами Index.html в браузере, то мы увидим просто перечисление в столбик названий частей 2 колоночного макета на базе блочной верстки. Если вы откроете файл Index.html в браузере FireFox с установленным плагином Web Developer (Плагин Web Developer для Firefox — установка и предоставляемые возможности) и выберете из меню этого плагина пункты «Контуры» — «Контур элементов уровня блоков», то увидите примерно следующую картину:

Т.е. все получилось именно так, как мы и хотели — четыре Div контейнера заключены в одном основном Div контейнере. Но почему же тогда все выглядит не так, как мы наметили на структурной схеме макета на основе блочной верстке? Просто мы еще ничего не написали в наш файл Style.css, который поможет, чудесным образом (с помощью свойств CSS), расставить все Div контейнеры по своим местам.

Такой вот финт ушами, нужный для того, чтобы подстроиться под старые версии браузеров. CSS код в нашем Style.css после этого будет выглядеть следующим образом:

body, html { margin:0px; padding:0px; text-align:center; } #maket { width:800px; margin:0 auto; text-align:left; }

Теперь я предлагаю заняться внутренними Div блоками макета. Для большей наглядности, предлагаю вам подкрасить эти Div блоки разными цветами, с помощью задания фонового цвета для Div контейнеров этих блоков, с помощью специально предназначенного для этого свойства CSS — Background-color.

Цвета в Html обычно задаются в кодовом выражении, которое начинается со знака решетки (для получения Html кода нужного вам цвета можно воспользоваться специальными программами, подробнее о которых вы можете прочитать здесь).

Итак, пропишем для всех названий ID наших внутренних Div контейнеров свойство Background-color с разными значениями фонового цвета, например, так:

#header{ background-color:#C0C000; } #left{ background-color:#00C0C0; } #content{ background-color:#8080FF; } #footer{ background-color:#FFC0FF; }

В результате наш двухколоночный макет на основе блочной верстки будет выглядеть, примерно, так:

Теперь для того, чтобы увидеть границы отдельных Div контейнеров, нам не нужно будет прибегать к услугам плагина Web Developer.

Div блок Header, судя по структурной схеме, приведенной в начале статьи, должен у нас занимать всю ширину макета, но Div блок Left должен иметь ограниченную ширину. Задать это можно с помощью уже известного нам CSS свойства Width, например, так:

#left{ background-color:#00C0C0; width:200px; }

В результате наш макет на основе блочной верстки примет вид:

Добавим CSS свойство для Div контейнера Left, позволяющее прижать его к левому краю и задать обтекание его справа Div контейнерами, расположенными ниже. Выглядеть в CSS коде Style.css это будет так:

#left{ background-color:#00C0C0; width:200px; float:left; }

Т.е. добавилось всего лишь одно единственное CSS свойство Float со значением Left, предназначенное для Div блока Left. Весь CSS код в Style.css, созданный нами на данный момент будет иметь вид:

А наш макет на блочной Div верстке теперь будет выглядеть так:

Класс! Почти то, что нужно, но опять же есть маленькая неувязочка. Div блок Footer (подвал) не должен обтекать левую колонку справа, он должен располагаться в самом низу макета и занимать всю его ширину. Как же решить эту проблему?

роде бы макеты похожи, но есть одна неувязочка. Блок Footer (подвал) не должен обтекать левую колонку справа, он должен располагаться в самом низу макета, созданного нами на основе блочной Div верстки, и занимать всю его ширину. Это одна проблема. Но кроме этого существует и другая проблема. Если мы добавим текста в Div блок Content (содержимое статьи):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Основы блочной верстки (Div верстки)</title><link href="style.css" rel="stylesheet" type="text/css"></head><body><div id="maket"><div id="header">Шапка </div><div id="left">Левая колонка</div><div id="content">Содержимое страницы Содержимое страницы Содержимое страницы Содержимое страницы </div><div id="footer">Подвал</div></div> </body></html>

То может возникнуть такая ситуация с макетом:

Т.е. содержимое Div контейнера Content занимает все свободное место под закончившимся блоком Left. Это происходит из-за того, что включено обтекание Div блока Left всеми другими блоками, расположенными ниже в HTML коде, но после того, как блок Left заканчивается, все последующие блоки начинают уже прижиматься к левому краю нашего макета на основе блочной верстки.

Нас такая ситуация с Div блоком Content (содержимое страницы) не устраивает, поэтому во избежании этого, мы зададим для Div-контейнера Content фиксированный отступ слева (от края макета) равный ширине блока Left (левой колонки).

Таким образом, мы сможем добиться желаемого взаимного расположения блоков Left и Content в не зависимости от соотношения высот этих Div блоков. Для этого нам нужно будет дописать для Div блока Content (в нашем файле Style.css) еще одно CSS свойство, задающее отступ слева (margin-left):

#content{background-color:#8080FF;margin-left:202px;}

Т.к. ширину левой колонки (блока Left) нашего макета на основе блочной верстки мы ранее задали 200px, то и отступ слева для Div блока Content мы зададим таким же, даже можно сделать его на несколько пикселей больше, чтобы между блоками появилось небольшое расстояние. Весь CSS код файла Style.css теперь будет выглядеть так:

А наш макет на Div верстке примет вид:

Теперь давайте смоделируем ситуацию с существенным увеличением высоты Div блока Left (левой колонки):

Из рисунка видно, что при увеличении высоты левой колонки, подвал (блок Footer) начинает ее обтекать, т.к. в CSS файле (Style.css) для блока Left задано обтекание с помощью CSS свойства float:left;. В следствии этого, все Div блоки, расположенные в HTML коде ниже блока Left, начинают его обтекать и блок Footer не является исключением. А это нас совсем не устраивает, ибо футер должен всегда располагаться ниже всех других блоков нашего двухколоночного макета на блочной верстке. Надо это исправить в макете.

Для этого мы отменим обтекание Div блоком Footer блока Left. Как это сделать? Нужно дописать специальное CSS свойство для Div блока Footer в файл Style.css: clear:both. Это CSS свойство позволит расположить блок Footer ниже всех плавающих блоков, т.е. тех блоков, которым задано CSS свойство Float (обтекание справа или слева). Тем самым, мы опустим подвал в самый низ нашего макета на блочной верстке. CSS код файла Style.css теперь будет выглядеть так:

body, html {margin:0px;padding:0px;}#maket {width:800px;margin:0 auto;}#header{background-color:#C0C000;}#left{background-color:#00C0C0;width:200px;float:left;}#content{background-color:#8080FF;margin-left:202px;}#footer{background-color:#FFC0FF;clear:both;}

А сам ы двухколоночный макет на блочной верстке получит футер (подвал), соответствующий всем требованиям:

Если нужно будет расположить Div блок Left (колонку с меню) не с левой стороны макета на блочной верстке, а с правой, то сделать это можно будет внеся лишь несколько изменений в наш файл Style.css. Для Div блока Left в файле Style.css нужно будет заменить CSS свойство float:left; на float:right;, а для блока Div Content убрать отступ слева на ширину блока Left и добавить точно такой же отступ справа. Т.е. для блока Content нужно CSS свойство margin-left:202px; заменить на margin-right:202px;. В результате CSS код файла Style.css примет вид:

body, html {margin:0px;padding:0px;}#maket {width:800px;margin:0 auto;}#header{background-color:#C0C000;}#left{background-color:#00C0C0;width:200px;float:right;}#content{background-color:#8080FF;margin-right:202px;}#footer{background-color:#FFC0FF;clear:both;}

А наш двухколоночный макет на блочной верстке с колонкой меню, расположенной справа, будет выглядеть так:

Вернем наш двухколоночный макет на блочной верстке к виду, когда Div блок Left расположен с левой стороны. Для создания трехколоночного макета на основе уже созданного двухколоночного, нам нужно будет лишь добавить один дополнительный Div-контейнер в код файла Index.html после Html кода, описывающего блок Left.

Назовем этот новый дополнительный блок незамысловато — Right. C учетом этого нового Div блока, код нашего, уже трехколоночного макета на блочной верстке, примет вид:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Основы блочной верстки (Div верстки)</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="maket"> <div id="header">Шапка </div> <div id="left">Левая колонка Меню Меню Меню Меню</div> <div id="right">Правая колонка Меню Меню Меню Меню</div> <div id="content">Содержимое страницы Содержимое страницы Содержимое страницы Содержимое страницы </div> <div id="footer">Подвал</div> </div> </body> </html>

В содержимое Div контейнера Right я добавил небольшое количество текста, чтобы этот блок имел сравнимый с блоками Left и Content размер по высоте. Теперь нужно будет написать отдельное CSS правило в файле каскадных таблиц стилей Style.css для четкого позиционирования нового Div блока Right, относительно других блоков нашего трехколоночного макета сайта на блочной верстке:

#right{ width:200px; background-color:#FFFF00; float:right; }

CSS свойством width:200px мы задает ширину Div блока Right равной 200 пикселей, а CSS свойством background-color:#FFFF00 подцвечиваем фон этого контейнера Right для большей наглядности. Ну, а CSS свойство float:right, позволяет прижать блок Right к правой стороне и при этом все следующие за ним в HTML коде Div блоки будут обтекать его слева (обтекать его будет только блок Content, т.к. блок Footer у нас настроен так, что он лежит ниже всех плавающий блоков). Такой блок, с прописанным CSS свойством Float, называют еще плавающим Div блоком.

Но этого еще не достаточно. В начале статьи мы решали проблему залезания содержимого Div блока Content под закончившийся блок Left. Для того, чтобы сразу же избежать подобной проблемы и с блоком Right, мы зададим в CSS для Div блока Content не только отступ слева на ширину блока Left, но и отступ справа на ширину блока Right:

#content{ background-color:#8080FF; margin-left:202px; margin-right:202px; }

Окончательный вариант нашего файла Style.css для трехколоночного макета будет такой:

body, html { margin:0px; padding:0px; } #maket { width:800px; margin:0 auto; } #header{ background-color:#C0C000; } #left{ background-color:#00C0C0; width:200px; float:left; } #right{ width:200px; background-color:#FFFF00; float:right; } #content{ background-color:#8080FF; margin-left:202px; margin-right:202px; } #footer{ background-color:#FFC0FF; clear:both; }

А сам трехколоночный макет сайта, сверстанный на Div (блочная верстка), будет выглядеть так: