Подключение CSS-файла к страницам сайта и синтаксис CSS

 

Надеюсь Вы разобрались что такое таблицы стилей CSS и в чем их преимущества.

Между HTML и CSS много общего, и, если Вы уделили изучению HTML достаточно времени, то сложностей с изучением CSS у Вас не будет.

Синтаксис CSS

Однако существенные отличия все же есть. В CSS нет ни тегов, ни атрибутов. Есть ПРАВИЛА. Они и определяют, как будет выглядеть в документе тот или иной элемент. Или группа элементов.

Рассмотрим пример структуры правила. Он разукрашен в те цвета, которыми подсвечивает синтаксис программа Adobe Dreamweaver.

Синтаксис CSS

Как видете из приведенного на рисунке примера, вначале правила указывается так называемый селектор, говорящий к какому тегу (или тегам) будет применяться то или иное свойство.

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

Каждое объявление состоит из свойства и его значения. После свойства (перед значением) должно стоять двоеточие.

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

Подключение CSS-файла

Для добавления стилей на веб-страницу существует три основных способа, которые различаются своими возможностями и назначением.

Первые два не требуют внешней таблицы стилей и не дают особых преимуществ перед HTML. C ними мы только ознакомимся, а третьим способом займемся плотнее. Изучив третий способ, Вы легко сможете пользоваться первыми двумя, если они Вам понадобятся.

1. Встраиваемый (атрибут style)

Такой стиль можно встроить в различные теги HTML: заголовки, абзацы, ячейки таблицы. Стиль задается при помощи атрибута style. В значении атрибута указывается блок объявлений стилей, без фигурных кавычек. Такой метод позволяет распространять заданый стиль только на один определенный тег.

<p style="color:green; font-size:14px">Абзац зеленого цвета, размер шрифта 14 пикселей</p>

2. Внутрений (тег style)

Позволяет прописать стиль ко всей web-странице. Задается при помощи тега style и определенного атибута. Тег <style> необходимо прописывать в голове документа.

<html>
<head>
<style>
h2{color:blue; font-size:14px}
p{color: red}
</style>
</head>

<body>
<h2>Синий заголовок второго уровня</h2>
<p>Шрифт всех абзацев в документе будет красного цвета</p>
</body>
</html>

3. Внешняя таблица стилей

Этот метод мы и будем рассматривать подробнее в этом разделе сайта.

Меняя правила во внешней таблице стилей, мы можем управлять дизайном сколь угодно большого числа страниц. В этом и состоит самое главное преимущество CSS. Все, что нужно — это подключить внешнюю таблицу стилей к тем страницам сайта, дизайном которых мы хотим управлять.

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

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

Если у Вас HTML-файл и таблица стилей лежат в разных папках, то необходимо прописать коректный путь к CSS-файлу или, лучше всего,сделать ссылку абсолютной. Типа http://vashsite.ru/style.css

Предполагаю, что Вы изучали статьи на этом сайте, посвященные HTML. Если так, то у Вас есть папка www, в ней файл index.html и папка images, в каторой находится какая-нибудь картинка.

В папке с нашим файлом index.html создадим еще один текстовой файл с помощью программы "Блокнот". Сохраните этот файл с именем style.css. Это файл и будет нашей внешней таблицей стилей.

В файле index.html уберите весь текст между тегами <body> и в голове документа пропишите ссылку на CSS-файл, как указано выше.

В нашей таблице стилей, — файл style.css, — создадим два правила:

h1{color:red; font-size:16px}
p{color:blue}

А в файле index.html пропишем примерно следующее (между тегами <body>):

<h1>Сделал первую таблицу стилей</h1>
<p>Все работает, что и не удивительно.</p>

А в браузере Вы должны увидеть примерно следующее:

Сделал первую таблицу стилей

Все работает, что и не удивительно.

Могут отличаться гарнитуры шрифта и отступы в Вашем случае и здесь, на этом сайте. Ведь текст на этом сайте выводится по тем правилам, которые заданы в таблице стилей для этого сайта.

Очень надеюсь, что все понятно.

На следующей странице мы начнем разбирать основные свойства CSS >>

Дорогой посетитель. Сохрани для себя эту статью
и поделись ссылкой с друзьями