Во второй лекции мы немного глубже копнем CSS и познакомимся. Рассмотрим способы добавления стилей на страницу.
Способы добавления стилей
Исходя из подзаголовка, Вы наверняка догадались, что количество таких способов больше чем один 🙂 Рассмотрим первый, он же, самый популярный.
Добавление стилей на сайт производится указанием местоположения файла стилей c помощью тега <link>.
Вы заметили, что в примере был указан относительный путь? Также можно подключить стили со стороннего сайта, указав прямой путь к файлу стилей:
[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, Вы можете воспользоваться первым способом.
Pingback:Рейтинг на CSS » Блог Stafox'a
Да теперь когда созрею до этого понимания буду знать куда возвращаться уже за применением этих навыков в деле.Потому что теорию нужно осваивать вместе а практикой, а пока этой практикой заниматься сложно.Спасибо за хорошую лекцию.
Полностью поддерживаю.
Добрый день, а будет ли продолжение по CSS.
В лекциях по HTML было про spacing, padding и так далее, только для таблиц. Интересно было бы услышать про команды для CSS(значения, свойства, функции).
Добрый. Сейчас очень-очень загружен. Работа, плюс разработка проекта. Как только появится время, обязательно.
Спасибо. Очень интересно читать ваши лекции
все лекции прочитал и все понятно и доходчиво но не совсем понял про css
допустим sitibar.css он должен тоже иметь голову и тело как html или просто CSS с нуля — это просто!
Css это стили, которые описываются в отдельном файле/теге, который необходим для задания стилей страницы. Без страницы эти стили бесполезны.
А будут лекции по С++,juva?
Нет. Не мой профиль.