Как правильно подключить стили CSS к веб-странице
|
Для тех, кто плохо разбирается в верстке сайта, советую ознакомиться с основами HTML и CSS. Но еще лучше – раздобыть полноценную книгу по этой теме. Благо их масса в бесплатном доступе в интернете. Итак, к теме статьи. Стили CSS можно подключить к веб-странице или фрагменту веб-страницы тремя способами. Первый наилучше всего подходит для точечного оформления какого-либо участка страницы сайта. Применим стили к одному абзацу: <body> В примере мы задали цвет текста второго абзаца желтым. А если мы хотим применить одинаковые стили ко всем тегам <P> на странице? Тогда первый способ не подходит. Его конечно можно использовать, но согласитесь как-то нудно и трудоемко прописывать стили для каждого тега заново. Но есть второй способ. Прописываем общие стили для страницы сайта: <html> Теперь текст, заключенный между любым спаренным тегом <P> на странице, будет иметь желтый цвет. И нет нужды прописывать одни и те же стили для каждого тега <P>. Этим способом мы подключаем общие, часто повторяющиеся стили для веб-страницы. Его недостаток в том, что так можно подключить стили только для одной страницы. А если у нас сайт состоит из нескольких страниц и стили везде повторяются? Тогда лучше создать специальный файл с расширением .CSS и в нем задать стили для всех веб-страниц сайта. Это третий способ подключения стилей. Он самый стильный и удобный. Избавляет от лишней писанины: <head> Так мы подключили все стили к странице сайта по третьему способу. Стили задаем в специальном файле. У меня это styles.css, но можно назвать и pupkov.css, к примеру. Как вы поняли, для подключения файла со стилями к веб-странице используется строка: <link rel="stylesheet" href="styles.css" type="text/css" media="screen" /> Параметр media="screen" означает, что стили мы подключаем для браузеров. Если файл со стилями находится в какой-то папке, то это обязательно должно быть отражено в показываемом пути к файлу через параметр HREF. Путь идет от корня сайта. Для моего сайта это выглядит так: <link rel="stylesheet" href="assets/templates/green/styles.css" type="text/css" media="screen" /> Файл styles.css редактируется и создается в обычном текстовом редакторе. Порядок написания стилей не имеет значения, главное чтобы вам было удобно. Пример оформления файла styles.css:
body
{ font: 12px Arial, Helvetica, sans-serif; color: #000000; } #menu{ background-image:url(images/menubg.gif); background-repeat:repeat-x; height:29px; } .news p {text-align:center; color:#ffffff;} Нельзя пройти мимо новых веяний в верстке сайта в виде HTML5. По этому стандарту отменен атрибут type="text/css" у тега <style> за ненадобностью. Если вы укажете этот атрибут, то прямой ошибкой это не будет. Но зачем писать лишний код? В итоге, если вы создаете сайт по стандарту HTML5, то файл со стилями подключайте так: <link rel="stylesheet" href="styles.css" media="screen" /> Но при этом не забудьте использовать доктайп для HTML5. Теперь вы знаете, как подключить стили CSS к веб-странице. Ничего сложного здесь нет. |
Здесь
мы научимся подключать стили CSS к
страницам нашего сайта. Опытные вебмастера посмеются над моей статьей. Но я
уверен, есть масса людей, которые не очень разбираются в этой теме. Эта статья
для тех, кто только учится создавать сайты. Не переживайте, у вас все получится.
Я сам не очень крутой вебмастер, но хороший сайт (этот сайт) уже
создал.