У каждого тега можно задать индивидуальный, цвет, фон, окантовку и прочие свойства. Формат визуального оформления называется css (Cascading Style Sheets), что в переводе означает: «каскадные таблицы стилей».
В данной статье рассмотрим 3 способа как подключить css стили в html код страницы сайта для изменения внешнего вида.
1 Способ. Подключить отдельный файл css в html коде страницы
В данном файле прописываются свойства для тегов. Это наиболее удобный и практичный способ установить css стили для html, особенно если на сайте более чем 1 страница. Изменив всего 1 файл можно сменить оформления всех страниц, на которых он подключен. Старайтесь свойства писать в отдельном файле.
Как установить файл стилей css на html
Установить css стили в html код страницы сайта из файла можно с помощью тега , который должен располагаться между тегами
и . Общепринятое расширение файла: .css .Пример подключения файла(код страницы.html)
Текстовое содержание
Пример кода самого файла стилей(код страницы.css)
P {color:green;}
В примере выше, файл называется my_style.css и располагается в папке /my_css .
В данном файле написано свойство для тега
Код p {color:green;} означает: сделать цвет текста внутри тега
Зеленым. В данном примере подключен только один файл, но при необходимости вы можете подключать их неограниченное количество.
2 Способ. Написать вначале самой страницы
Этот способ практически идентичен подключению файла, но имеет существенный недостаток - если у вас несколько страниц, то для изменения их визуального оформления, нужно изменить каждую. Использовать данный способ имеет смысл только, если:
У вас одностраничный сайт;
Данное визуально оформление предназначено только для текущей страницы. Например, для визуального оформления элементов, которых нет на других страницах.
В остальных случаях добавить стили css на страницу лучше с помощью отдельного файла по способу, описанному выше. Но даже индивидуальный внешний вид во многих случаях удобнее задавать в отдельном файле, поэтому этот способ можно вообще не использовать.
Как добавить css стили в html код страницы сайта
Добавить стили сcs на html страницу сайта, можно так же как и у файла, а именно между
и . Только вместо ссылки на файл прописываются теги , внутри, которых пишутся сами стили.Пример добавления свойств тегов вначале(код страницы.html)
Текстовое содержание
3 Способ. Написать стиль в атрибуте style для каждого тега отдельно
Данный способ широко применяется, когда внутри одной страницы есть элементы, не сильно отличающиеся между собой, например, только цветом(отступом, размером и т. п.). В этом случае быстрее и удобнее подключить один общий css стиль в html с помощью отдельного файла, а небольшие изменения добавлять у конкретных элементов. Атрибут style обладает наивысшим приоритетом, поэтому тег получит все свойства, указанные в style, даже если они ранее были указаны другими способом.
По сути, логика следующая: общие и наиболее часто используемые стили, мы прописываем в файле(1 способ), а детальные корректировки в самих элементах. Например, если у вас на странице 5 заголовков, отличающихся цветом, то лучше прописать общие свойства в файле, определяющие размеры и отступы этих заголовков, а цвет в самих элементах, по данному способу. у тега
3 способ обладает наивысшим приоритетом, поэтому тег получит свойства, указанные в атрибуте style="" , даже если они ранее были указаны с помощью другого метода.
> Основные css стили для создания сайта Как правило стили отображения контейнеров, и их содержимого прописываются в таблице стилей, которая обычно называется stile.css, хотя можно назвать как угодно. Главное чтобы на странице в теге
был правильный путь до таблицы стилейЧтобы задать стиль для контейнера на странице ему можно задать класс. Например контейнеру
Chapka_saita { в фигурных скобках указываем стили }
Так же стиль для контейнера можно указать напрямую если ему не присвоен класс. Например стиль для контейнера
Header { в фигурных скобках указываем стили }
Так же еще можно указать стили для контейнеров с помощью идентификатора, тогда это выглядит так
#blok1 { в фигурных скобках указываем стили }
Если нужно указать стили заголовков в контейнерах, ссылок, изображений, то это выглядит так.
Chapka_saita { в фигурных скобках основной стиль контейнера }
.chapka_saita h1, h2 { стиль для заголовков в тегах
и для этого контейнера }
.chapka_saita a { стиль для ссылок в этого в этом контейнере }
.chapka_saita a:hover { стили для ссылок при наведении курсора мыши }
.chapka_saita img { стили для изображений в этом контейнере }
Сами стили прописываются в этих фигурных скобках и разделяются точкой с запятой;
.chapka_saita a { стиль для ссылок в этого в этом контейнере }
.chapka_saita a:hover { стили для ссылок при наведении курсора мыши }
.chapka_saita img { стили для изображений в этом контейнере }
Сами стили прописываются в этих фигурных скобках и разделяются точкой с запятой;
Font-family: Arial; задает шрифт контейнера, обычно его применяют в теге
, в котором все содержимое страницыLine-height: 1.2; задает высоту строк для шрифта
Отступы
padding: 10px; задает внутренний отступ содержимого от границы контейнера, в данном случае отступ 10 пикселей, можно указывать значение в процентах, или в emmargin: 5px; задает внешние отступы контейнера,
margin: 10px 5px 0px 15px; отступы можно указывать и по отдельности для каждой стороны
margin-bottom: 10px; можно указывать отступ только с одной стороны, в данном случае отступ от низа 10пикселей. Тоже самое можно применять и внутренним отступам padding.
Ниже пример стилей для тега
Body { margin-left: auto; margin-right: auto; width: 930px; font-size: 12px; font-family: Arial; line-height: 1.2; background-image: url(images/fon.jpg); }
Стили для текста
font-size: 12px; указывает размер шрифта, можно указывать в пикселях, процентах, или emcolor: #0000ff; указывает цвет шрифта, в даном случае #0000ff синий, можно указать словом, например color: green; тоесть цвет зеленый.
text-decoration: none; убирает подчеркивание, применяется для ссылок чтобы убрать нижнее подчеркивание
text-transform:uppercase; делает все буквы текста заглавными, вместо uppercase можно писать другие значения и наоборот сделать верхнее или нижнее подчеркивание, зачеркивание.
font-weight:bold; выделает шрифт полужирным, вместо bold можно применять и другие значения
text-align:left; задает выравнивание текста, в данном случае left, к левой части контейнера, можно задавать значение conter, hight.
text-shadow: 1px 2px 1px 0px #000000; color: #f9f5ed; тень для текста
Стили контейнеров
background-color: #DCDCDC; назначает цвет фона контейнера, в данном случае #DCDCDC серыйbackground-image: url(images/fon.jpg); задает фоновое изображение
Border: 1px solid #E8E8E8; назначет бордюр, фраза solid означает сплошной бордюр, #E8E8E8 цвет бордюра. Можно указывать отдельно бордюр для каждой стороны, например border-top: 2px solid #E8E8E8;
border-radius: 10px; скругление углов контейнера, можно задавать разное скругление на каждом угле border-radius: 2px 6px 10px 0px;
box-shadow: #2C2C29 10px 10px 10px; тень для контейнеров
Width:926px; указывает ширину контейнера
height: 240px; высота контейнера
Float:left; прижимает контейнер к левой части, по умолчанию контейнеры идут по порялку, а если хочется выстроить несколько блоков в линию, то им нужно задать свойство float:left; и ширину height: px; чтобы они поместились по ширине в родительском контейнере.
float:right; тоже самое, но контейнеры прижимаются к правой части.
Если хотите сделать контейнер посередине, то указывайте ширину, а отступы avto , пример: margin-left: auto; margin-right: auto; width: 150px;
Нам уже известно, что для того, чтобы веб-сайт выглядел красиво и стильно нам необходимо поработать с CSS-файлом. И чтобы наши стили применялись необходимо соединить HTML файл и файл CSS.
Существует несколько вариантов осуществления данной операции: использование таблиц вложенных стилей , таблиц внешних стилей и встроенный стиль.
Сегодня мы поговорим именно о последнем способе.
Внедрения стиля в тег HTML
Суть данного способа заключается в том, что необходимое оформление мы внедряем внутрь тега. Для этого создан отдельный атрибут - style . Данный атрибут может быть применен к любому тегу, однако только в рамках тела сайта, то есть в границах body . Значением этого атрибута выступают операторы тех стилей, которые необходимо применить к заданному элементу.
Для примера зададим разные размеры шрифта для двух разных абзацев текста:
< p style= "font-size:25px;" > Задаем этому отрезку текста высоту букв в 25 пикселей. < p style= "font-size:15px; color:#2400ff;" > А этот текст будет с буквами, высотой 15 пикселей, причем еще и подкрасим его синим, чтобы продемонстрировать применение нескольких стилей одновременно.
Недостатки
Пример отлично демонстрирует, как такое навешивание стилей засоряет код страницы.
Также можно отметить еще парочку недостатков применения данной методики стилизации. Первым из них можно назвать разброс стиля по всему документу, что в перспективе редактирования усложнит процесс в разы.
Также возникнет трудность в оформлении больших объемов текста. Думаю, никого не радует перспектива прописывать для каждого абзаца размер шрифта, особенно если таких абзацев штук 40.
Еще при использовании встроенных стилей становится невозможным применение псевдоклассов, что в значительной степени связывает руки веб-дизайнера.
Стоит также отметить и путаницу, которая обязательно всплывет в использовании атрибута style. Эта путаница возникнет из-за использования разных кавычек при вписывании стилей.
Для наглядности посмотрим на пример ниже:
< div style= "font-family: "Roboto Condensed", sans-serif" > Запись корректна. < div style= "font-family: " Roboto Condensed ", sans-serif" > Так тоже правильно. < div style= "font-family: " Roboto Condensed ", sans-serif" > Это не корректная запись. < div style= "font-family: " Roboto Condensed ", sans-serif" > И это тоже не верно
Глядя на выкладки, предоставленные выше, напрашивается логический вывод, что применение встроенных стилей связаны с рядом существенных осложнений и неудобств.
Когда стоит использовать встроенный стиль
Несмотря на все недостатки, встроенный стиль был выдуман не зря. Веб-мастера часто обращаются к ним в случае программного присвоения стиля. Для примера посмотрим на этот код
< div id= "productRate" > < div style= "width: 40%" >
Запись нужной ширины для этого блока будет простейшей операцией.
Аналогичная ситуация может возникнуть при необходимости замены фонового изображения(к примеру) пользователя под ролью администратора. В таком случае тег img может не подойти. Поэтому стоит обратится к атрибуту style:
< div style= "background:url(fon.jpg)" >
Также программисты частенько обращаются к встроенным стилям в процессе верстки всплывающих окон. Зачастую этот процесс проходит следующим образом: блоку, над оформлением которого идет работа, прописывается display:block, а остальные окна скрываются посредством display:none, чтобы они визуально не мешали работе программиста. Вот пример:
< div class = "element" style= "display:block" > Всплывающее окно, которое оформляется в данный момент
Итог
Использование встроенных стилей связано с рядом трудностей и неудобств, однако в процессе оформления некоторых элементов веб-мастера часто обращаются к этому методу для оптимизации своей работы.
CSS расшифровывается, как «каскадные таблицы стилей» (от англ. Cascading Style Sheets). CSS представляет собой совокупность параметров, с помощью которых отображается тот или иной элемент на веб-странице. Эти параметры могут указываться, как в отдельном файле, так и быть прописаны непосредственно в HTML-коде страницы. Например, на нашей веб странице могут быть такие элементы: заголовок статьи, абзацы, цитаты, сноски, картинки, видео ролики, ссылки. Можно задать конкретный стиль отображения — размер, цвет, толщину рамок и др.
При работе с сайтом рекомендуется использовать именно отдельный файл со стилями, а не внедрять код со стилевыми настройками в отдельные страницы. Это заметно сократит время — когда знаешь место нахождения таблицы стилей, всегда можно оперативно найти конкретный стиль и отредактировать. Файл стилей имеет расширение .css , название у него, как правило, style.css .
Подключение CSS файла
Для подключения CSS файла существует несколько способов. Мы расскажем о двух способах, которые наиболее часто используются при создании сайтов:
1. Связывание. Этот способ используется когда необходимо задать стили для всех страниц сайта в одном файле. Данный способ часто используется при создании сайта. Чтобы подключить таблицу стилей используется команда , которую необходимо разместить в теле тега
.Первые два свойства указывают браузеру, что на сайте используется CSS, затем указывается адрес файла со стилями.
2. Встраивание в теги документа. При этом способе стиль для конкретного элемента страницы задается непосредственно в HTML коде. Например:
Здесь мы прописали стили соответственно для контейнеров
Приведем пример таблицы стилей — создадим файл style.css и пропишем стили:
body { font-family: Arial, Verdana, Sans-serif; /* Семейство шрифтов */ font-size: 12pt; /* Размер основного шрифта в пунктах */ background-color: #f0f0f0; /* Цвет фона веб-страницы */ color: #000000; /* Цвет основного текста */ } h1 { color: #a52a2a; /* Цвет заголовка */ font-size: 24pt; /* Размер шрифта в пунктах */ font-family: Georgia, Times, serif; /* Семейство шрифтов */ font-weight: normal; /* Нормальное начертание текста */ }
Здесь мы задали стили для тела страницы
и для заголовка. Также можно задать конкретные стили для любых других элементов страницы веб-сайта.
Теперь подключим нашу таблицу стилей к сайту:
Подключение CSS к сайту Привет, Мир!
Это моя первая страница со стилями CSS
Таким образом, мы разобрались, что такое CSS, зачем данная технология используется, научились подключать стили к сайту. Данный урок является, своего рода, введением в каскадные таблицы стилей. В других уроках мы будем говорить о технологии CSS более детально.
В этом учебнике для создания HTML и CSS файлов мы будем использовать редактор Notepad ++ , он предназначен для пользователей Microsoft Windows и все примеры будут выполнены именно в нем.
Если же у вас Mac, то вы можете выполнять примеры в редакторе Brackets , он как и Notepad ++ абсолютно бесплатен. Что касается редактора Brackets , то он подходит и для пользователей Microsoft Windows , вы можете впоследствии выбрать, что вам ближе.
Создание внутренней таблицы стилей
Рассмотрим пример в котором вы будете создавать Вашу первую внутреннюю таблицу стилей.
Шаг 1: Откройте текстовый редактор
Нажмите кнопки WIN + R одновременно (аналог Пуск - Выполнить) при этом откроется диалог «Выполнить» впишите и нажмите Enter (откроется программа ), либо запустите программу через её ярлык.
Перед Вами откроется основное окно программы:
Шаг 2: Создайте структуру документа
Скопируйте или впишите в редактор следующий HTML код:
В коде примеров этого учебника я буду давать дополнительные комментарии, выделенные светло-зеленым цветом. В HTML для создания комментариев в вашем коде используется специальный тег , текст внутри такого элемента не отображается браузером. В CSS коде для добавления комментария необходимо текст комментария поместить в следующую конструкцию: /* текст комментария */ . Комментарии в CSS коде вы можете делать как внутри встроенных стилей, так и во внешних (в отдельном файле).
Шаг 3: Добавьте встроенные стили
Следующим шагом добавьте к вашей странице встроенные стили: для заголовка первого уровня цвет текста красный (color : red ), а для абзацев голубой (color : blue ). Кроме того, для заголовка первого уровня мы сделаем выравнивание текста по центру (text-align : center ). Проверьте, чтобы каждое CSS свойство и его значение было разделено двоеточием, а в конце каждого объявления стояла точка с запятой.
Как хорошо, что я занимаюсь саморазвитием.
Я выучу CSS за месяц, а то и быстрее
Шаг 4: Просмотр HTML страницы в браузере
Откройте пример в браузере и убедитесь, что результат нашего примера соответствует изображению:
Подключение внешней таблицы стилей
Сейчас мы с Вами создадим отдельный файл, который будет содержать таблицу стилей и подключим его к нашему HTML документу.
- В программе Notepad++ создайте новый пустой файл и сохраните его под именем page.css (при сохранении файла необходимо выбрать Cascade Style Sheets *.css ) в той же папке, где вы создавали HTML документ.
- Перенесите из предыдущего примера код CSS (содержимое тега