FAQ по CSS - Введение в CSS | Блог Алексея Фомичева

Введение в CSS — FAQ по CSS


Как я уже говорил в FAQ по HTML, язык гипертекстовой разметки позволяет задавать цвет и размер текста с помощью тегов форматирования. Если понадобится изменить параметры однотипных элементов на сайте, придется просматривать все страницы, чтобы найти и поменять теги.

C помощью каскадных таблиц стилей можно легко поменять любой тег, любой параметр веб-странице, не вмешиваясь в структуру документа.

Каскадные таблицы стилей (Cascading Style Sheets, CSS) — это набор правил форматирования, который применяется к элементу документа, чтобы быстро изменить его внешний вид.

Стили позволяют с помощью всего одного созданного вами действия применить сразу всю группу атрибутов форматирования.

Например, изменить вид всех гиперссылок в документе или сделать отступ текста от края страницы во всех страницах сайта. Если вдруг потребуется быстро изменить внешний вид текста, созданного с помощью одного из стилей, достаточно изменить параметры стиля в одном созданном документе, и вид текста поменяется автоматически во всей структуре сайта.

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

CSS представляют собой мощную систему для разработчиков сайтов, расширяя их возможности по дизайну и верстке веб-страниц.

Давайте рассмотрим, как включить CSS в вашу веб-страницу.

Существуют три разных способа включения:

  • внутренние стили;
  • таблица связанных стилей;
  • таблица глобальных стилей.

 

Внутренние стили

Внутренний стиль всегда определяются для одного HTML тега используемого на веб-странице. Для того чтобы определить стиль для тега используют параметр style, а его атрибуты указываются с помощью языка таблицы стилей.

1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML .01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equin="Content-Type" content="text/html; charset=utf-8">
<title>Внутренние стили</title>
</head>
 
<body>
<h1 style="font-size:18px; font-family:Verdana; color:#a00;"> Внутренние стили</h1>
</body> 
</html>

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

 

Таблицы связанных стилей

Это один из самых лучших способов определения стилей и правил сайта. При таком способе стили хранятся в отдельном файле, который может быть использован всеми веб-страницами сайта.

Для подключения таблицы связанных стилей используется тег link в заголовке страницы

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML .01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equin="Content-Type" content="text/html; charset=utf-8">
<title>Таблица связанных стилей</title>
<link rel="stylesheet" type="text/css" href="default.css">
<link rel="stylesheet" type="text/css" href="http://mysite.ru/nav.css">
</head>
 
<body>
<h1>Таблица связанных стилей</h1>
</body> 
</html>

Как вы видите, я указал подключение двух файлов. Первый имеет относительный путь подключения, второй абсолютный.

Основные достоинства данного способа:

1. Простота в разделение кода html и css. Можно создать десятки стилей и подключать их по мере необходимости.

2. Можно изменять таблицу стилей без вмешательства в структуру HTML документа.

3. Стиль при изменении автоматически отразиться на всех страницах, где он подключен.

4. При первой загрузке сайта стили помещаются в кеш на локальном компьютере, поэтому последующая загрузка сайта будет происходить быстрее.

 

Таблицы глобальных стилей

Существует возможность определять стиль в самом документе в заголовке страницы. В основном такой способ используют при построении рекламных страничек. Конечно, такой способ уступает предыдущему в плане гибкости, так как мы определяем стиль только для конкретного документа.

Определение стиля задается тегом style

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML .01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equin="Content-Type" content="text/html; charset=utf-8">
<title>Таблица глобальных стилей</title>
<style type="text/css">
h1 {
font-size:18px; /*Размер шрифта*/
font-family:Verdana; /*Семейство шрифта*/
color:#a00; /*Цвет шрифта*/
}
</style>
</head>
 
<body>
<h1>Таблица глобальных стилей</h1>
</body> 
</html>

Пример, который я вам привел, позволяет изменить заголовок h1 только для этой веб страницы.

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

В следующей записи вы узнаете, как изменять текст на вашей веб-странице.

С уважением, Алексей Фомичёв

Про Штирлица:
Штирлиц неделю не появлялся на работе. Посланные на поиски
гестаповцы нашли его на даче, напившегося до бесчувствия и лежа-
щего на полу среди бутылок из-под водки. Рядом валялась шифровка:
«Задание выполнено успешно, можно расслабиться.»



Поделись с друзьями в социальных сетях!




27.11.2013 / Создание блога / Теги: ,
Похожие записи

Оставить комментарий