Стили CSS

Стили CSS

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

Стили CSS в виде оформленных инструкций удобнее хранить в виде отдельного файла .css, либо в виде отдельного текстового фрагмента в начале HTML-документа.

Идея создания стилей CSS заключается в отделении дизайна веб документа от его содержимого. CSS отвечает за оформление и внешний вид, а HTML — за содержание и логическую структуру документа. Если проще, то каскадные таблицы стилей css предназначены для создания красивого, легкого в редактировании дизайна html страничек сайтов.

В настоящее время практически все известные существующие браузеры (последние версии), такие как Opera, Mazilla ForeFox, Google Chrome и Internet Explorer, практически одинаково показывают странички, в которых используются каскадные таблицы стилей.

Чтобы Ваш сайт выглядел одинаково практически во всех браузерах, есть общие специальные технологии задания каскадных таблиц стилей, о которых кратко будет показано в данной статье.

 

Создаем каскадную таблицу стилей css

Давайте создадим и подключим каскадную таблицу стилей к самой простой html страничке.

Делается это так:

  1. Создаем папку, в которой будут html страничка, и каскадная таблица стилей. Папку для примера назовем «css«.
  2. Создаем простую html страничку (index.html).
  3. Теперь создаем простой текстовый документ (аналогично созданию html странички), только называем его style.css и сохраняем в этой папке.

 

В результате должно получиться как на рисунке:

Стили CSS
Создаем папку с названием css. Создаем файл style.css в этой папке

 

Файл, в который будем создавать стили css готов.

Теперь надо подключить созданную таблицу стилей к файлу index.html.

 

Подключаем каскадную таблицу стилей css

Итак, для того что бы подключить таблицу стилей к html страничке, необходимо в файле index.html в теге <head> прописать тег:

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

Здесь, в атрибуте href=»style.css» прописан путь к самому файлу со стилями css. В этом случае файл css и index.html находится в одной папке.

Например, если наш файл index.html будет иметь такой код:

Стили CSS
Код файла index.html

То сохранив файл index.html в кодировке 1251 (ANSI-кириллица), то в браузере увидим следующую картину:

Стили CSS
Такой мы видим страничку в браузере

Файл index.html создан, а так же к нему подключены таблицы стилей css.

 

Проверяем работу таблиц стилей css

Начнем с самого простого и зададим тегу <body> новый стиль, определяющий фоновое изображение html странички, цвет фона странички (если изображения в браузере посетителя странички отключены), верхние и нижние отступы, шрифт по умолчанию, его размер и цвет.

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

В нашем примере под фоновым изображением подразумевается картинка под названием bg в формате .jpg (bg.jpg).

Папка css должна выглядеть так:

Стили CSS
Папка css с добавлением графического файла

Теперь, что бы установить стиль для тега <body> html документа, в таблице стилей нужно записать следующее:

Стили CSS
Стиль CSS для тега

Здесь:

body {…}задание стилей css для тега <body>

background-image:url(bg.jpg);фоновое изображение, где в параметре url(…jpg) указывается полный путь к изображению, которое будет фоновым

background-color:#f6f6f6;фон тела документа (тега <body>). Этот атрибут включается в тех случаях, если в браузере посетителя отключены изображения

margin-top:0px;расстояние от тела документа до верхней части браузера. В этом случает каскадные таблицы стилей css задают расстояние 0 px.

margin-bottom:0px;расстояние от тела документа до нижней части браузера. В этом случает каскадные таблицы стилей css задают расстояние 0 пикселей

font-family:Verdana;установка шрифта для документа по умолчанию

font-size:12px;размер шрифта документа 12 пикселей

color:#000000;цвет текста. В этом случае таблицы стилей css задают цвет шрифта — темно синий.

После сохранения заполненного файла style.css, в браузере увидим следующее:

Стили CSS
Страничка в браузере с подключенными стилями CSS

 

В этой статье мы дали определение, что такое стили CSS и кратко рассмотрели принцип подключения таблицы стилей css к html файлам.

Если Вы хотите научиться создавать сайты и более подробно и изучить каскадные таблицы css, html, то скачайте «Справочник по CSS. Влад Мержевич».

button

Скачать бесплатный курс по стилям CSS автора Е. Попова вы сможете, заполнив форму подписки. Ссылка на скачивание придет практически мгновенно.

Ваш e-mail: *
Ваше имя: *

 

Посмотрите вводное видео о принципах создания стилей CSS из курса Евгения Попова:

YouTube Трейлер

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