Tel: +372 5596 5762
e-mail: info@digipo.eu

CSS (Cascading Style Sheets) Каскадные стили таблиц – это язык стилей позволяющий определять отображения HTML документа. Так как HTML используется для создания структуры документа, то CSS используется для форматирования содержимого структуры HTML. Многие свойства, используемые в Cascading Style Sheets (CSS), аналогичны свойствам HTML.

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

Cинтаксис CSS

Скажем, нам нужен синий цвет фона web-страницы:

В HTML это можно сделать так: <body bgcolor=»#0033FF»>

С помощью CSS того же самого результата можно добиться так:

             body {background-color: #0033FF;}         
            

Три способа использовать CSS в HTML

Способ первый с помощью атрибута style:

Установим синий цвет для фона

<html>
               <head>                

                <title>Example</title>

               </head>

               <body style="background-color: #0033FF;">

                <p>Фон страницы синий</p>

               </body>

             </html>

 
Второй способ с помощью внутренней вставки между тегами head:
          
<html>
               <head>

                 <title>Example</title>

                 <style type="text/css">

                   body {background-color: #0033FF;}

                 </style>

               </head>

               <body>

                 <p>Фон страницы синий </p>

               </body>

             </html>

             
Третий способ позволяет делать ссылку на отдельно лежащий CSS файл.

Это самый распространённый и правильный способ, так как для форматирования, например заголовка на сайте, где допустим 10 страниц. Нам не надо будет открывать все 10 страниц и менять там код, нам достаточно открыть CSS файл и изменить там параметры.

Например, скажем, ваша таблица стилей называется style.css и находится в папке style. Это можно проиллюстрировать так:

Структура папок

Для того что бы в HTML документе работал наш CSS файл, нам необходимо создать ссылку из HTML-документа (default.htm) на таблицу стилей (style.css). Это можно сделать одной строчкой HTML-кода:

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

Ссылка вставляется в HTML Документе между тегами <head> и </head>

<html>
               <head>

                 <title>My document</title>

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

               </head>

               <body>

                 Контент страницы

               </body>
</html>

Эта ссылка указывает браузеру, что он должен использовать правила отображения HTML-файла из CSS-файла.

В CSS файле пишем body { background-color: #0033FF; }

Задание

В редакторе создайте HTML документ и попробуйте тремя способами сделать красный фон.

В следующем уроке разберем цвет и фон страницы