Встроенные, внутренние и внешние стили CSS - когда и как применять

Внедряем CSS в HTML. JavaScript.
Ivan
Сообщения: 2

Встроенные, внутренние и внешние стили CSS - когда и как применять

Сообщение Ivan » Пн июн 15, 2015 4:41 pm

Встроенные стили
Этот метод осуществляется посредством прямого прикрепления к HTML-тегам значением атрибута style. Это выглядит так:

Код: Выделить всё

<p style="color: red">text</p>

На примере этого стиля, весь параграф будет красного цвета.
Однако более верным подходом, будет создание HTML-документа без оформления в нём стилей.

Внутренние стили
Эти стили применены ко всей странице полностью. Теги style распложают между тегами head. Метод применим к сайтам с малым количеством страниц — например не более десятка. Причина — страница будет загружаться быстро, так как не будет затрачиваться время на переход к стороннему внешнему файлу.
Подключение выглядит следующим образом:

Код: Выделить всё

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>
<style type="text/css">
p {color: red;}
a {color: blue;}
</style>

По итогу сего манёвра, все параграфы на странице явятся красными, а ссылки — синими.

Внешний файл с каскадными таблицами стилей
Такой способ добавления таблиц стилей применим полностью ко всему сайту, то есть ко всем его страницам, сколько бы их не было. А так бы пришлось все страницы обрабатывать собственноручно, если их с десяток, то это вполне выполнимо, а вот если их десяток сотен?... Для этого нужно создать внешний CSS-файл примерно такого вида:

Код: Выделить всё

p { color: red;}
a { color: blue;}

Если вы сохраните это содержимое в файле под названием “web.css”, то вам нужно будет указать в HTML-файле ссылку на этот внешний файл. Путь прописан в последней строке:

Код: Выделить всё

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>
<link rel="stylesheet" type="text/css" href="web.css" />

В случае прописывания такого пути, CSS-файл следует сохранить в той же директории что и HTML-файл.
Реклама

Вернуться в «HTML + CSS»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость