Здравствуйте, уважаемые читатели блога 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>.
Похожие статьи:
