Как связать Html с Css?
@Nadya, Если вам дан исчерпывающий ответ, отметьте его как верный (нажмите на галку рядом с выбранным ответом).
3 сен 2014 в 16:41
6 ответов 6
Сортировка: Сброс на вариант по умолчанию
Полагаю, необходим обобщающий ответ, чтобы новички, пришедшие сюда за ответом, получили полную информацию с примерами.
Имеется 4 способа.
1. Встроенные стили
Подключение встроенных или inline стилей заключается в применении атрибута style к определённому тегу на странице. В этом случае значением атрибута является одно или несколько (через точку с запятой) свойств CSS с соответствующими значениями. Как правило, такой способ используется в тех случаях, когда надо изменить характеристики конкретного элемента на одной странице.
Подключение встроенных стилей Параграф 1
Параграф 2
2. Внутренние стили
Внутренние стили указываются между тегами и подключаются с помощью тега . В этом случае CSS воздействует уже не на один элемент, а на все указанные в стилях элементы, которые имеются на данной странице. Обычно данный способ применяется, когда необходимо изменить стили сразу у нескольких одинаковых элементов в пределах одной HTML-страницы.
Подключение встроенных стилей Параграф 1
Параграф 2
3. Внешние стили
Внешние стили подключаются отдельным файлом при помощи тега . В этом случае все стили располагаются в обычном текстовом файле с расширением .css и влияют на элементы всех страниц, к которым этот файл подключается. Обычно создание стилей сайта начинается именно этим способом, так как только с его помощью ощущаются все плюсы CSS, ведь изменяя данные всего в одном файле можно управлять отображением сразу большого числа страниц. А уже в процессе работы над сайтом добавляются внутренние или встроенные стили, если это необходимо.
В первом блоке содержимое файла style.css , находящегося в папке style :
body < background: #ccccff; /* цвет фона страницы */ >p < color: red; /* цвет текста параграфов */ font-family: Helvetica, sans-serif; /* гарнитура шрифта параграфов */ font-size: 150%; /* размер шрифта */ text-align: center; /* текст по центру */ border: 5px green double; /* стили рамки */ > Подключение внешних стилей Параграф 1
Параграф 2
4. Через правило @import
Это правило служит для объединения нескольких таблиц стилей в одну. Чтобы правило @import правильно работало, оно обязательно должно указываться в самом начале таблицы стилей, единственное исключение — правило @charset .
@import url("https://kristinitatest.github.io/Stack%20Exchange/HTML+CSS/1.css"); @import url("https://kristinitatest.github.io/Stack%20Exchange/HTML+CSS/2.css"); Внешние стили с @import Содержимое страницы.
Не подключается css к html. как исправить ошибку?
Попробуйте такие варианты: 1. Проверьте, что файл style.css точно существует (в браузере нажмите на ctr + u и нажмите на название файла и физически в папке проверьте, что файл style.css есть), а также проверьте, что все символы в английской раскладке клавиатуры 2. Попробуйте поставить слеш так:
Если файл style.css с кодом открылся в браузере, значит style.css корректно подключен. Приложите коды файлов index.html и style.css полностью, попробую помочь.
У вас опечатки в коде есть.
Так не пишут, либо так нужно писать:
и если header как тег использовать, в css стилях без точки нужно будет писать к нему стили. Такие еще опечатки есть:
.main, .logo, .menubar, .size_content, .foother,
Во первых нужно писать footer, а не foother, во вторых после последнего класса не должно быть запятых. Глубже не смотрел код.
Тема открыта год назад, но как актуальна. Спасибо за ответ с ctrl+u
не получается файл style.css привязать к файлу html , но в браузере при нажатии ctrl+u он есть , но не преобразовывается , я уже все перепробовал
- файл проверил он есть (когда выполнил действие в браузере открылся файл этот)
- слеш поставил но не получилось получилось (т.е после того как поставил слеш заголовок сайта поднялся в самый вверх, когда его убрал, заголовок спустился чуть ниже, значит ссылка правильная
.headerbackground-color: darkslateblue;
height: 177px;
font-size: 0.8em;
margin-left: 0px;
margin-right: 0px;
min-width: 900px;
>
.main, .logo, .menubar, .size_content, .foother,margin-left: auto;
margin-right: auto;
>
.logowidth: 880px;
padding-bottom: 40px;
>
так выглядит файл style.css
КиноМонстр КиноМонстр
Кино - наша страсть!
.header < background-color: darkslateblue; height: : 177px; font-size: 0.8em; margin-left: 0px; margin-right: 0px; min-width: 900px; >.main, .logo, .menubar, .size_content, .foother, < margin-left: auto; margin-right: auto; >.logo < width: 880px; padding-bottom: 40px; >.logo h1, .logo h2, < font: normal 300% 'century gothic', arial, sans-serif; margin: 0 0 0 9px; >.logo_text h1, .logo h1 a, .logo h1 a:hover < padding: 22px 0 0 0; letter-spacing: 0.1em; text-decoration: none; >.logo_text h2 < font-size: 0.9em; padding: 4px 0 0 0; color: #999; >я пошел чуть дальше но изменений никаких нет, все осталось также как и было без этого - .logo h1, .logo h2, < font: normal 300% 'century gothic', arial, sans-serif; margin: 0 0 0 9px; >.logo_text h1, .logo h1 a, .logo h1 a:hover < padding: 22px 0 0 0; letter-spacing: 0.1em; text-decoration: none; >.logo_text h2
Спасибо,вы помогли постараюсь быть внимательнее