CSS с нуля. Лекция 2

Во второй лекции мы немного глубже копнем CSS и познакомимся. Рассмотрим способы добавления стилей на страницу.

Способы добавления стилей

Исходя из подзаголовка, Вы наверняка догадались, что количество таких способов больше чем один 🙂 Рассмотрим первый, он же, самый популярный.
Добавление стилей на сайт производится указанием местоположения файла стилей c помощью тега <link>.

[html]<link rel="stylesheet" href="css/style.css" />[/html]

Вы заметили, что в примере был указан относительный путь? Также можно  подключить стили со стороннего сайта, указав прямой путь к файлу стилей:

[html] <link rel="stylesheet" href="http://example.stafox.ru/style/default.css" />
[/html]

И не забывайте, что тег <link> должен располагаться между <head> и </head>
Стили, подключенные таким способом, получили название связанные.

Второй способ, не очень популярен, и я его использую крайне редко.

[html] …
<head>
<style>
p {
color: #333;
background:#ddd;
}
</style>
</head>

[/html]

Стили объявляются в  html-документе, главное не забыть «обвернуть» их в тег <style>.

Третий способ, применяется очень часто, особенно, когда лень-матушка одолевает 🙂 Он позволяет применить стиль к любому элементу:

[html] <p style="color:#369;font-style:italic;">CSS с нуля — это просто!</p>
[/html]

Как Вы уже заметили, для этого применяется универсальный атрибут style, значением которого и является желаемый набор css-свойств, разделенных точкой с запятой.

Ну, и остается последний, четвертый способ. Он позволяет подключать стили в стилях. Я бы рекомендовал использовать этот способ, именно так как в примере. Предположим что у нас есть некий style.css, который содержит в себе следующие строки:

[css title=»style.css»] @import ("css/header.css");
@import ("css/body.css");
@import ("css/footer.css");
@import ("css/comments.css");
@import ("css/article.css");
@import ("css/sidebar.css");
@import ("css/menu.css");
@import ("css/admin.css");
[/css]

И так, Вы уже наверняка догадались, что с помощью @import можно импортировать (подключать) различные css файлы. А теперь для чего я советую именно так использовать этот способ? Когда Вы будете писать БОЛЬШОЙ и жирный проект, стилей будет очень много, и файл будет содержать огромную кучу строк. Чтобы не тратить время на поиск, когда придётся что-то «допилить», советую разбивать на несколько небольших файлов. Теперь, если Вам нужно будет изменить цвет сайдбара, Вы сразу увидите что Вам стоит заглянуть в файл sidebar.css, в котором будет гораздо меньше строк, а значит Вам будет легче в нем ориентироваться. Ну, а чтобы подключить сам файл style.css, Вы можете воспользоваться первым способом.

Stas Kuryan

Web developer. Перфекционист в написании кода.

10 комментариев

  1. Pingback:Рейтинг на CSS » Блог Stafox'a

  2. Ольга     

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

    • Stafox        Автор

      Потому что теорию нужно осваивать вместе а практикой

      Полностью поддерживаю.

      • Роман     

        Добрый день, а будет ли продолжение по CSS.
        В лекциях по HTML было про spacing, padding и так далее, только для таблиц. Интересно было бы услышать про команды для CSS(значения, свойства, функции).

        • Stafox        Автор

          Добрый. Сейчас очень-очень загружен. Работа, плюс разработка проекта. Как только появится время, обязательно.

          • Роман     

            Спасибо. Очень интересно читать ваши лекции

  3. владимир     

    все лекции прочитал и все понятно и доходчиво но не совсем понял про css
    допустим sitibar.css он должен тоже иметь голову и тело как html или просто CSS с нуля — это просто!

    • Stafox        Автор

      Css это стили, которые описываются в отдельном файле/теге, который необходим для задания стилей страницы. Без страницы эти стили бесполезны.

  4. виктор     

    А будут лекции по С++,juva?

    • Stafox        Автор

      Нет. Не мой профиль.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *