Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Css » Css-vvedenie

Введение

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

А начну я с самого простого — со способов размещения таблицы стилей в HTML документе. На каждый элемент или тег HTML документа может применяться несколько стилей, причем каждый из них подключается к элементу по-разному. В итоге браузер выбирает стиль для элемента по приоритетности. Размещение стилей по приоритетности выглядит следующим образом:

Рассмотрим размещение стилей по отдельности.

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

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


 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html;
 charset=utf-8">
  <title>Пример использования внутренних стилей</title>
 </head>
 <body>
  <p style="font-size: 110%;  
color:red">Пример текста</p>
</body>
</html>

Результат должен получиться следующим:

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

Я бы вам не советовал использовать много внутренних стилей. Это увеличивает размер HTML документа, тем самым уменьшая скорость загрузки странички сайта. А также это мешает редактировать файлы разработчикам. Рекомендуется использовать глобальные стили или внешние стили.

Глобальные стили

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" 
content="text/html; charset=utf-8">
  <title>Глобальные стили</title>
  <style type="text/css">
   H1 { 
    font-size: 120%; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    color: #03F; 
   }
  </style>
 </head>
 <body>
  <h1>Пример использования глобального стиля</h1>
 </body>
</html>

В результате у вас должно получиться следующее:

Пример использования глобального стиля

Глобальные стили всегда помещают в контейнер <head></head> HTML документа с помощью контейнера <style>. Но самым распространёнными являются связанные стили.

Связанные стили

Такие стили располагаются в отдельном файле. Они почти не загружают HTML страничку лишним кодом. Чтобы обратиться HTML документу к внешнему файлу стилей достаточно применить тег <link> в контейнере <head></head> и указать путь к этому файлу, причем файл со стилями может находится на другом сайте. Приведу вам небольшой пример, в котором будут подключены две таблицы стилей:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html;
 charset=utf-8">
  <title>Связанные стили</title>
  <link rel="stylesheet" type="text/css" href="document_1.css">
  <link rel="stylesheet" type="text/css"
 href="/document_2.css">
 </head>
 <body>
   <h1>Заголовок статьи</h1>
   <p>Текст статьи</p>
 </body>
</html>

А в файле стилей document_1.css напишем вот такой вот простенький код для заголовка и текста статьи:

@charset "utf-8";
/* CSS Document */
H1 {
  color:#03F;
  font-size: 150%;
  font-family: Arial, Verdana, sans-serif;
  text-align: center;
}
P {
  padding-left: 20px;
}

В результате вы должны получить следующее:

Пример использования связанных стилей

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


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



наверх