Язык CSS
Введение


Как вы помните, HTML - это язык разметки, но его создатели так хотели улучшить жизнь сайтостроителей, что добавляли в него элементы и параметры, отвечающие за внешний вид страницы: теги <font>, <b>, <bgcolor>, <i> и так далее. Но на какой-то момент код страниц стал таким громоздким и нечитабельным, что стало ясно - этот путь ведет "в никуда". Тогда было принято решение разделить разметку страницы (HTML) и ее визуальное оформление (CSS). В совокупности HTML и CSS позволяют творить чудеса дизайна.

CSS (Cascading Style Sheets) - каскадные таблицы стилей.
Стиль - набор параметров, задающий внешнее представление объекта.
Например, пусть мы хотим, чтобы все заголовки первого уровня (теги <h1>) на одной странице имели красный цвет, размер - 24 и были написаны курсивом, а на другой странице были бы синего цвета, размера - 12.
В данном случае заголовок <h1>- это объект, а цвет, размер и начертание - это параметры. Просто параметры нашего объекта для разных страниц разные, т.е. они отличаются стилем.

Каждый элемент на странице может иметь свой стиль (параграфы, заголовки, линии, текст...).
Набор стилей всех элементов называют таблицей стилей.
Если для одного элемента задано несколько стилей (как в примере с заголовками), то применяется каскадирование, которое определяет приоритет того или иного стиля.

Таким образом,

  • CSS позволяет значительно сократить размер кода и сделать его читабельным,

  • CSS позволяет задавать такие параметры, которые нельзя задать только языком HTML. Например, убрать подчеркивание у ссылок,

  • CSS позволяет легко изменять внешний вид страниц (например, вы сделали сайт из 50 страниц, на которых все заголовки синего цвета. Через какое-то время, вы захотели поменять синий цвет на зеленый. Вам придется пройтись по всем 50 страницам и поменять цвет в соответствующем атрибуте. С CSS вам придется сделать это лишь один раз, в таблице стилей.),

  • С CSS связана так называемая блочная верстка сайта.

Подключение CSS к HTML
Существуют разные способы подключения css к html-страницам, давайте их рассмотрим.


Внутренние таблицы стилей
Так называют таблицу стилей, заданную внутри тэга <html>, при помощи атрибута style.


Пример кода:
<h1 style="color:red>Заголовок красного цвета</h1>


Недостаток этого способа очевиден: параметр style придется задавать каждому заголовку. Таким образом теряется преимущество использования CSS.


Встроенные таблицы стилей
При этом способе таблица стилей встраивается в заголовок html-страницы. Для этого в HTML существуют теги <style> и </style>, с параметром type, который указывает, что подключается именно таблица стилей CSS (вообще-то существуют и другие).


Пример кода:
<html>
<head>
<title>Подключение CSS к HTML</title>
<meta http-equiv="Content-type"; content="text/html"; charset="windows-1251">

<style type="text/css">
h1{color:red}
</style>

</head>
<body>
<h1>Заголовок красного цвета1</h1>
<h1>Заголовок красного цвета2</h1>
<h1>Заголовок красного цвета3</h1>
</body>
</html>


Теперь все заголовки h1 на странице будут красного цвета. А если мы захотим, чтобы один из них был зеленого цвета, то воспользуемся для него внутренней таблицей стилей:
</head>
<body>
<h1>Заголовок красного цвета1</h1>
<h1 style="color:green">Заголовок зеленого цвета</h1>
<h1>Заголовок красного цвета2</h1>
</body>
</html>


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


Внешние таблицы стилей

  1. Создайте документ с таким кодом:
    h1{color:red}
    h2{color:green}
    и сохраните его как «style.css» в ту же папку, где будет сохранен и html-документ. Это и будет наша страница стилей.

  2. Создайте html-документ с таким кодом:
    <h1>Заголовок красного цвета1</h1>
    <h2>Заголовок зеленого цвета</h2>
    <h1>Заголовок красного цвета2</h1>

  3. Теперь нам надо подключить страницу style.css к html-странице.
    Для этого в html существует тег <link>, который и отвечает за подключение внешних файлов. Добавим этот тег в нашу html-страницу:
    <html>
    <head>
    <title>Подключение CSS к HTML</title>
    <meta http-equiv="Content-type" content="text/html" charset="windows-1251">
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>


Практическое задание:
выполнить все практические задания лекции.


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


Источники:
http://htmlbook.ru/
http://www.site-do.ru/


Язык HTML. Вставка звука и видео. Язык CSS. Правила и селекторы.


comments powered by Disqus