СSS – каскадные таблицы стилей

cssЗдравствуйте, уважаемые читатели  блога http://delajblog.ru!

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

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

Основное преимущество СSS в том, что легко, например, решается такая задача -имеется сайт с большим количеством страниц, и нужно изменить какой-то один элемент, например, шрифт. Для этого достаточно в СSS заменить, только один элемент и шрифт изменится на всём сайте (нет никакой необходимости влазить  и править код каждой страницы сайта).

Правила написания СSS

Основной структурной единицей здесь является правило, определяющее внешний вид элемента документа.

 Основы CSS - таблицы каскадных стилей

Сначала записывается селектор – >обозначает к какому тегу HTML применяется (в данном случае правило применяется к тегу body).

Свойство – обозначает свойство тега body (в данном случае — это font-family).

Значение – какое значение имеет font-family (в данном случае – verdana). Свойство и значение заключаются в фигурные скобки. После свойства ставится двоеточие (:). После значения – точка с запятой (;).

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

Способы подключения стиля на страницу

>Связанные Таблицы Стилей<

Они используются для придания одного стиля нескольким документам HTML. Создаётся файл таблицы стилей, в котором описываются стили, которые необходимо применить к документам. Обычно такой файл имеет расширение .css   Для подключения такого файла используется тег <LINK>.

Рассмотрим пример подключения файла my.css.

Для этого в коде html, в контейнер тега<HEAD>, размещаем такую запись:

<head>

<link href="http://delajblog.ru/my.css" rel="stylesheet">

</head>

Здесь атрибут «href» тега <LINK>,  указывает путь к нахождению файла my.css (href=http://delajblog.ru/my.css) В рассматриваемом  случае он находится на сайте http://delajblog.ru.   Атрибут «rel» тега <link>, имеет неизменный вид —  rel=»stylesheet».

Внутренние Таблицы Стилей

Задание стиля одному элементу документа с помощью атрибута STYLE  в самом документе HTML (Отдельный файл стилей не используется).

Например,

<font style="color:#cdd556; font-size:11pt;font-family:Arial"> Это текст</font>

 

Здесь к шрифту применяется: цвет — #cdd556, размер – 11пунктов, шрифт  — Arial.

Глобальные Таблицы Стилей

Глобальные таблицы задают стиль всему документу. Для этого используют тег <STYLE type=»text/css»>, который размещается в контейнере тега <HEAD>. (Отдельный файл стилей не используется).

Например,

<head>

<style type ="text/css">

body {

  font-family: verdana, arial;

  font-size: 0.8em;

  border: 0;

  color: #111;

  background: #ddd;

        }

</style>

</head>

Здесь во всём документе HTML будет применяться стиль содержащийся в контейнере тега <STYLE>.

Добавить комментарий

Ваш e-mail не будет опубликован.