Существует три основных способа подключения CSS, которые мы сейчас и рассмотрим по порядку.
Как я уже говорил раньше, css призван оформлять html конструкции, то есть придавать им вид, цвет, размер, расположение, и так далее, а значит непосредственно воздействовать на html код.
Для обеспечения этого воздействия, выполняется подключение css к html документу.
Первый способ подключения css — cвязанные стили . Применяется тогда, когда таблица стилей пишется в отдельном файле.
В этом случае, файл style.css с таблицей стилей, подключается к html файлу в теге head, при помощи тега link
link — это одиночный тег;
href – знакомый нам атрибут ссылок, css/stile.css – значение указывающее путь к файлу, и название файла;
type – атрибут указывающий тип подключаемого элемента, в нашем случае это text/css ;
rel – атрибут определяющий взаимосвязь, и в значении его обычно пишется stylesheet (таблицы стилей);
В этом коде обычно меняется только значение style.css (название подключаемой таблицы). Таблицы подключены.
Теперь браузер будет отображать html файл в том виде, который для него будет прописан в файле style.css .
Кстати, на будущее. К одному html файлу можно подключать сколько угодно таблиц стилей. Все они подключаются в тег head .
И, что применяется гораздо чаще, наоборот, одну таблицу можно подключить к множеству html файлов.
Это наиболее предпочтительный способ подключения таблиц стилей, так все они находятся в одном файле и поэтому легче определяются.
А так же, если придётся изменять стиль нескольких однотипных элементов, то гораздо легче будет это сделать если они собраны в одном групповом селекторе.
И хоть то, что я скажу дальше, уже больше относится к оптимизации, но это ещё больше подчеркнёт значимость вышеописанного способа.
Дело в том, что одной из задач веб-мастера является уменьшение объёма кода, при неизменном конечном результате, и отдельный файл style.css наиболее полно отвечает этому требованию.
Только представьте, чтобы написать заголовок к статье, нужно задать ему размер, цвет, шрифт и, возможно, что то ещё из стилей. И так для каждого поста.
В файле style.css можно будет задать стили один раз, но для всех заголовков постов сайта.
Теперь понимаете разницу?
Тем не менее и остальные способы подключения стилей имеют право на существование, так что давайте рассмотрим их, и ситуации, в которых они применяются.
Второй способ подключения css- глобальные стили позволяет подключать(располагать) таблицу стилей непосредственно в html файле.
Делается это при помощи тега style , и прописывается он так-же, как и в первом случае в теге head .
Как видите, таблица стилей расположена прямо в html файле. Всё это работает так-же, как и при первом способе подключения, но применяется реже, из за громоздкости, и главное, из-за невозможности воздействия стилей на несколько файлов.
Когда его применять? Я, например использую этот способ при создании дизайна в редакторе файлов.
Гораздо проще отлаживать документ, если и html и css находятся на одной странице и можно быстро подправить и то, и другое.
Третий способ подключения css — внутренние стили позволяет прописывать стили прямо внутри html тега.
Реализуется он при помощи атрибута style , который не стоит путать с одноимённым тегом.
Применяется он тогда, когда нужно оформить только один элемент контента.
Для примера возьмём кусочек текста, и зададим ему стили, заключив в тег span
Вот так можно сделать оформление отдельно взятого фрагмента текста. И применять этот способ лучше только для таких небольших включений.
Хотя, таким образом можно подключать любые стили, включая позиционирование, и код будет валидным, но чрезмерное применение встроенных стилей, приводит к увеличению времени загрузки страницы.
Ведь браузеру определившему их в файле style.css , и зайдя потом на страницу, придётся до определять или переопределять оформление некоторых элементов.
Перемена
— Вчера долго пыталась объяснить бабуле, что работаю программистом…
Короче, сошлись на том, что чиню телевизоры и развожу мышей…
I have css files under css folder and jsp files under jsp folder and both folders are inside WEB-INF folder. So how can i get the css file inside jsp?
I have given path like this.
4 Answers 4
Try to use this:
Here you are missing right apostrophe. Also check BalusC answer would solve your problem.
Also i recommend to you create resources folder on the same level as WEB-INF then in resources folder create css folder and then reference css file as:
and here how to connect css with page:
I’m using this approach is my web project and everything works correctly.
Также для этого тега доступны универсальные атрибуты.
Закрывающий тег
HTML5 IE Cr Op Sa Fx
В данном примере подключается внешний файл со стилями с помощью атрибута rel=»stylesheet» тега
, указывается RSS-документ текущего сайта ( link rel=»alternate» type=»application/rss+xml» ) и устанавливается иконка сайта в адресной строке браузера ( link rel=»shortcut icon» ).
