Все статьи из текущего раздела

Как работает CSS, или три способа добавления стилей к документу

Есть три способа добавления CSS к Web-странице: линейный, вложенный и с помощью ссылки на отдельный файл CSS. Таблица стилей является отдельным файлом, содержащим только правила CSS. Использовать такой файл может неограниченное число WеЬ-страниц, что позволяет обеспечить одинаковый облик всех страниц сайта.

Линейные стили

Линейные, или локальные, стили добавляются непосредственно к тегу с помощью HTML-атрибута style. Напишем код двух абзацев. Первый абзац без стилей, а точнее, стили задаёт браузер, который настроен вами или настроен по умолчанию. Второму абзацу мы задаём свой стиль. Определяем размер шрифта: 20px, устанавливаем насыщенность с помощью ключевого слова bold (полужирное) и задаём начертание шрифту — курсивное (italic). Цвет — красный (red).

<?php
<p>Отображение абзаца по умолчанию вашего браузера.</p>
<
p style="font-size: 20px; font-weight: bold; font-style: italic; color: red;">А этот абзацотображается с помощью стилей CSS,
нами определёнными.</p>

Имеем:
Отображение абзаца по умолчанию вашего браузера.

А этот абзац, отображается с помощью стилей CSS, нами определёнными.

Вот некоторые особенности локальных стилей, о которых следует знать:

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

Вложенные стили

Группу стилей CSS можно поместить непосредственно в документ НTML, между тегами head, — это будут вложенные стили (или стили страницы). Раннее рассмотренный пример, отобразим в страничном стиле:

<?php
<!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=windows-1251">
<
title>Вложенные стили</title>

<
style type="text/css">
.
paragraph {
 
font-size20px;
 
font-weightbold;
 
font-styleitalic
 
colorred;
  }
</
style>
</
head>

<
body>
<
class="paragraph">А этот абзацотображается с помощью 
стилей CSS
нами определёнными.</p>
</
body>
</
html>

Вот некоторые замечания о вложенных стилях:

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

Внешний файл со стилями

Можно поместить стили в отдельный файл (таблицу стилей с расширением .css), связав его с неограниченным числом страниц сайта, чтобы стили имели глобальное (на уровне сайта) действие. Заданные стили будут воздействовать на все страницы сайта, а не только на отдельные теги или страницы.
Можно добавить таблицу стилей к любому количеству HTML-страниц с помощью всего одной строки кода, добавленной в раздел head каждой страницы:

<?php
<link rel="stylesheet" type="text/css" href="/style.css">

А вот как будет выглядеть файла style.css:

<?php
.paragraph 
 
font-size20px
 
font-weightbold
 
font-styleitalic;  
 
colorred
  } 


ПОЛЕЗНЫЕ ССЫЛКИ:

Осуществляем срочный вывоз снега без посредников.