CSS. Введение

10 Сентябрь 2015

Rod_Shacler

Поговорим о внешнем виде нашего сайта. О том, что делает обычный текст -конфеткой. Настало время познакомиться каскадными таблицами стилей(CSS). Что такое CSS и с чем его едят. Цели создания CSS. Рассмотрим такие виды CSS, как внешние и внутренние.

Итак, давайте по-порядку. Если просто написать разметку сайта, то получится крайне криво. Да, можно попробовать расположить контент с помощью фреймов и\ или таблиц, но это даёт слишком мало возможностей, да и не подходит для большинства случаев. Например, нельзя использовать для различных разрешений экранов, ибо не «растянется».

Красивое наполнение сайта помогут обеспечить нам CSS, они имеют огромное количество функций и «примочек». От обычного форматирования текста до теней от блоков или даже картинок.

CSS — это каскадные таблицы стилей. Почему каскадные? Каскад — это иерархия применения — недвусмысленное название для системы применения правил.

Для подключения CSS к документу HTML есть три способа:

1) Стили внутри элемента

Это когда стиль отображения указывается внутри элемента. Например:

<h1 style="color: green;">Заголовок</h1>

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

2) Стили внутри документа

Стиль указывается внутри HTML-документа и выглядит следующим образом:

<HTML>
<HEAD>
   <TITLE> CSS внутри документа </TITLE>
   <style type="text/css">
       p {
          color:green;
         }

       a {
          color:blue;
         }
   </style>
...

Помня о том, что HTML- документ не нужно нагружать лишним кодом, то такой тип CSS также стоит избегать.

3) Внешние стили

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

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

Этот код следует занести в название_вашего_файла.css. Но что же такое? Почему даже создав файл .CSS и поместив его в папку с HTML-документам ничего не преобразилось? Дело в том,что нужно «подключить» файл.css к нашему сайту. Следующий код прописывается в <HEAD>:

<link rel="stylesheet" type = "text/css" href="ссылка на ваш CSS документ"/>

Есть и другие способы подключения CSS документов, но пока этого примера вполне себе достаточно.

Итак, мы познакомились c CSS файлами, узнали почему не рекомендуется использовать стили внутри документа HTML и научились подключать внешние CSS . Всем отличного настроения и чистого коддинга