css-html

Основы стилевого оформления страниц сайта

Для создания простого макета страницы сайта, ранее мы создали два файла – один с расширением .html, другой с расширением .css. В первом файле мы прописали основные блоки нашей страницы, подразумевая двухблочную структуру страницы с шапкой и подвалом. Поговорим о наполнении файла .css и о том, как управлять оформлением своей страницы.

Связь html и css

Css-файл – это набор правил оформления для элементов из документа html, каждому из которых присвоен свой уникальный ID. В данной таблице стилей можно указать высоту и ширину блока, его отступ от других блоков и границ страницы, цвет, заливку, шрифт и другие элементы оформления.

Для того чтобы управлять оформлением блока, используются теги <div> в документе html, в теле этих же тегов указывается ID блока для его управления в документе стилей.

Пример оформления

Например, владелец страницы хотел бы оформить ту часть документа, в которой представляется основной контент. Для этого код в файле html должен выглядеть так:

<!doctype html>

<html><head>

<meta charset=»utf-8″>

<title>Название страницы</title>

</head>

<body>

<div id=»content»>

</div>

</body></html>

Таким образом, мы присвоили блоку <body> уникальный ID, с помощью которого будем управлять оформлением блока в таблице стилей. Вместо ID также может быть использован код CSS CLASS.

Подключение файла CSS

Чтобы браузер «понимал» от куда следует подгрузить стиль оформления для страницы, укажем ему определенный путь. Для этого после указания названия страницы в тегах <title> следует прописать такую строку:

<link type=»text/css» rel=»stylesheet» href=»css/style.css»>

Каждый раз загружая данный html-документ, браузер будет обращаться к серверу еще и за файлом style.css, из которого будут подгружаться стили для каждого элемента, для которого они указаны, и который имеет уникальный ID.

Редактирование файла CSS

Теперь, указав уникальное имя блоку, мы должны прописать параметры его оформления в файле CSS. Для этого открываем файл style.css в редакторе, например, Нотпад++, и прописываем код:

html {

background:#E4EFF8;

color:#418;

font:12px Cambria, Arial;

}

#content {

width:960px;

height:400px;

background:#fff;

}

Html в начале говорит о том, что мы хотим задать оформление всему документу. Соответственно, идущие ниже background и color задают цвет фона и текст для всех страниц, а правило font задает размер и тип шрифта.

Далее мы указали присвоенный ранее #content – это правило будет отвечать за оформление блока <body>.  Затем мы задали ширину и высоту этого блока, фон оставили соответствующим основному, заданному для всего html.

После указания высоты можно указать строчку margin:auto; эта строка говорит об отступе основного блока страницы от границы области просмотра. Для тега <body> она составляет 8 пикселов по стандарту, согласно правилам Position.

В заключение

Редактирование стилей – это целая специальность в области вэб-программирования, и профессиональное редактирование стилей включает значительно больший объем знаний. Мы привели лишь наиболее базовые понятия – заключив блок в теги <div> и задав ID для блока, можно редактировать его оформление в подключенном файле стилей.

При неправильном редактировании каскадных таблиц стилей, сайт может просто «упасть», так как браузер не будет способен отобразить загруженную информацию. Чтобы облегчить свою работу и не тратить время на углубление в тысячи деталей и нюансов оформления, воспользуйтесь каталогом готовых сайтов с уникальным оформлением, содержащим тридцать тысяч шаблонов на самый изощренный вкус: http://gotovii-sait.ru/.