Содержание
Здравствуйте, уважаемые читатели блога https://delajblog.ru!
CSS (анг. Cascading Style Sheets ) – это Каскадные таблицы стилей, или набор правил для изменения внешнего вида веб-страницы. Структура веб-страницы определяется HTML, а внешний вид определяется CSS. Таким образом, стало возможным изменять дизайн веб-страницы, не изменяя программный код HTML, тем самым эти два языка неразрывно связаны и отвечают каждый за решение своих задач.
HTML отвечает за размещение таблиц, текста, видео и т.д.(структура документа), а CSS позволяет задавать внешний вид таблиц, начертания и цвет шрифтов, фона, размеры, рамки и изменяет положение на веб-странице таких элементов, как видео, рамки и т.п.
Основное преимущество СSS в том, что легко, например, решается такая задача -имеется сайт с большим количеством страниц, и нужно изменить какой-то один элемент, например, шрифт. Для этого достаточно в СSS заменить, только один элемент и шрифт изменится на всём сайте (нет никакой необходимости влазить и править код каждой страницы сайта).
Правила написания СSS
Основной структурной единицей здесь является правило, определяющее внешний вид элемента документа.
Сначала записывается селектор – >обозначает к какому тегу HTML применяется (в данном случае правило применяется к тегу body).
Свойство – обозначает свойство тега body (в данном случае — это font-family).
Значение – какое значение имеет font-family (в данном случае – verdana). Свойство и значение заключаются в фигурные скобки. После свойства ставится двоеточие (:). После значения – точка с запятой (;).
Таким образом, мы определили правило, что в любом месте документов HTML, где встретится тег body, он должен отображаться шрифтом семейства verdana.
Способы подключения стиля на страницу
>Связанные Таблицы Стилей<
Они используются для придания одного стиля нескольким документам HTML. Создаётся файл таблицы стилей, в котором описываются стили, которые необходимо применить к документам. Обычно такой файл имеет расширение .css Для подключения такого файла используется тег <LINK>.
Рассмотрим пример подключения файла my.css.
Для этого в коде html, в контейнер тега<HEAD>, размещаем такую запись:
<head> <link href="/my.css" rel="stylesheet"> </head>
Здесь атрибут «href» тега <LINK>, указывает путь к нахождению файла my.css (href=/my.css) В рассматриваемом случае он находится на сайте https://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>.
