Основные сведения о CSS. Основные понятия. Внешние, внутренние и встроенные таблицы стилей.

25.10.2022 15:01

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

    Но на какой-то момент код страниц стал таким громоздким и нечитабельным, что стало ясно - этот путь ведет "в никуда". Тогда было принято решение разделить разметку страницы (HTML) и ее визуальное оформление (CSS). В совокупности HTML и CSS позволяют творить чудеса и в этом вы скоро убедитесь.

Что такое CSS

 

    CSS (Cascading Style Sheets) - каскадные таблицы стилей.

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

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

    Если для одного элемента задано несколько стилей (как в примере с заголовками), то применяется каскадирование, которое определяет приоритет того или иного стиля.

Преимущества CSS

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

    Создайте обыкновенную html-страницу, примерно с таким кодом:

 

<html>

  <head>

    <title>Подключение CSS к HTML</title>

  </head>

  <body>

    <h1>Это заголовок первого уровня</h1>

    Здесь просто текст

    <h2>Это заголовок второго уровня</h2>

    Здесь просто текст

  </body>

</html>         

    

    Теперь создайте в блокноте страницу (пока пустую) и сохраните ее как style.css в ту же папку, где лежит html-страница. Это и будет наша страница стилей. 

    Теперь нам надо подключить страницу style.css к html-странице. Для этого в html существует тег <link>, который и отвечает за подключение внешних файлов. Добавим этот тег в нашу html-страницу:

 

<html>

  <head>

    <title>Подключение CSS к HTML</title>

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

  </head>

  <body>

    <h1>Это заголовок первого уровня</h1>

    Здесь просто текст

    <h2>Это заголовок второго уровня</h2>

    Здесь просто текст

  </body>

</html>

    

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

 

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

 

    Так называют таблицу стилей, заданную внутри элемента HTML, при помощи атрибута style. Пример кода:

 

    <h1 style="color:red">Это заголовок красного цвета</h1>

    

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

 

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

 

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

 

<html>

  <head>

    <title>Подключение CSS к HTML</title>

 

    <style type="text/css">

    h1{

        color:red

    }

    </style>

    

  </head>

  <body>

    <h1>Этот заголовок будет красного цвета</h1>

    <h1>Этот заголовок будет красного цвета</h1>

    <h1>Этот заголовок будет красного цвета</h1>

  </body>

</html>

    

    Теперь все заголовки h1 на странице будут красного цвета. А, если мы захотим, чтобы один из них был синего цвета, то воспользуемся для него внутренней таблицей стилей:

 

<html>

  <head>

    <title>Подключение CSS к HTML</title>

 

    <style type="text/css">

    h1{

        color:red

    }

    </style>

 

  </head>

  <body>

    <h1>Этот заголовок будет красного цвета</h1>

    <h1 style="color:blue">Этот заголовок будет синего цвета</h1>

    <h1>Этот заголовок будет красного цвета</h1>

  </body>

</html>

    

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

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

Назад