Как связать 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 Содержимое страницы.
Как подключить JavaScript и стили CSS к HTML документу
При работе с HTML, стилями или JavaScript, особенно, если речь идёт о большом проекте, настоятельно рекомендую держать файлы со стилями (.css и другие) и твой код (.js и другие) в разных папках. JavaScript отдельно, каскадные стили отдельно. Отдельную папку рекомендую создать и для HTML-файла.
Чтобы присоединить стили к HTML, пропиши следующую строку внутри тэга :
Если ты всё-таки решил ходить по лезвию ножа и держишь.css- и.js-файлы в одной папке со HTML, то код будет следующим:
Если работаешь с шаблонами или темами Bootstrap, то просто размещаем ссылку на тему:
Для присоединения js-файла к HTML нужно просто указать путь к файлу.
Если же js-файл лежит в одной папке с HTML-файлом, код будет такой:
При работе с jQuery, внутри тега указываем ссылку на нужную нам библиотеку:
Внедрение CSS в HTML документ.
В этой главе речь пойдет о том, как внедрить CSS в документ HTML, то есть связать стилевое описание элемента непосредственно с самим элементом, каким либо HTML тегом.
Осуществить данную задачу можно тремя способами:
- Написать стилевое описание непосредственно в самом элементе. Такой способ хорош лишь в том случае если таковой элемент один единственный в HTML документе который нуждается в отдельном стилевом описании.
- Написать стилевое описание для всех идентичных элементов HTML документа. Такой способ оправдывает себя, если стиль страницы принципиально отличается от общего дизайна сайта (группы взаимосвязанных страниц).
- Вынести стилевое описание элементов HTML в отдельный файл CSS. Это позволит управлять дизайном всего сайта целиком, каждой страницей сайта в которой указанно обращение к CSS файлу. Этот способ является наиболее эффективным использованием таблицы каскадных стилей.
Давайте более подробно рассмотрим каждый вариант, а заодно познакомимся с правилами синтаксиса написания CSS.
Атрибут style.
Практически каждый HTML тег имеет атрибут style , который говорит о том, что к этому тегу применяется некое стилевое описание.
style=»»> это параграф с индивидуальным стилем
Всё что будет написано между кавычками атрибута style и будет являться стилевым описанием для данного элемента, в данном случае элемента
В данном случае мы указали, что этот параграф должен отображаться красным цветом и иметь размер шрифта в 12 пикселей. В последующих главах я подробно расскажу о том что написано в кавычках , сейчас же речь идет о том как применить CSS к какому либо HTML тегу.
По такому же принципу можно указать индивидуальный стиль практически для каждого HTML элемента.
style=»background-color: #c5ffa0″>
style=»color: #0000ff; font-size:18px»>Всё о слонах
style=»color: #ff0000; font-size:14px»>На этом сайте Вы найдёте любую информацию о слонах.
style=»color: #0000ff; font-size:16px»>Купить слона
style=»color: #ff0000; font-size:14px»>У нас Вы можете по выгодным ценам приобрести лучших слонов!!
style=»color: #0000ff; font-size:16px»>Взять слона на прокат
style=»color: #ff0000; font-size:14px»>Только у нас Вы можете взять любых слонов на прокат!!
Но еще раз повторюсь такой способ внедрения CSS хорош лишь в том случае если требуется задать определенный стиль малому числу HTML элементов.
Тег
Для того, что бы описать необходимые элементы одновременно на всей странице в заголовок HTML документа внедряют тег (не путайте с одноименным атрибутом) в котором и происходит описание нужных нам элементов.
Взгляните на пример, ниже к нему будут комментарии.
body
h1
h2
p
Всё о слонах
На этом сайте Вы найдёте любую информацию о слонах.
Купить слона
У нас Вы можете по выгодным ценам приобрести лучших слонов!!
Взять слона на прокат
Только у нас Вы можете взять любых слонов на прокат!!
Как видно из примера мы добились точно такого же результата что и в первом случае только теперь мы не прописываем каждому элементу стиль индивидуально, а вынесли его в «голову» документа тем самым указав что все заголовки , — будут синими а параграфы — красными. Представьте как мы облегчили бы себе работу будь на странице сотня таких параграфов и штук пятнадцать заголовков, да и сам документ стал меньше весить за счет «удаления» всех повторяющихся стилевых описаний для каждого отдельно взятого элемента.
Теперь обещанные комментарии:
Тег принято внедрять в заголовок HTML документа между тегами .
Атрибут тега type — сообщает браузеру, какой синтаксис использовать для правильной интерпретации стилей. Для правильной интерпретации браузерами CSS значение type (MIME тип данных) должно равняться text/css .
Внутри тега идет непосредственное объявление стилей тех или иных HTML элементов согласно следующему синтаксису:
Если в блоке объявления стилей указывается несколько свойств элемента, то они между собой разделяются точкой с запятой.
CSS в отдельном внешнем файле.
Долго ли коротко ли, подошли мы к главному, на мой взгляд, достоинству CSS, а именно возможности выносить все сведения касающиеся дизайна сайта в отдельный внешний файл.
Итак, открываем блокнот (или другой редактор) и пишем в нем следующий текст:
body
a
a:hover
h1
h2
p
О том, что это такое странное мы написали, постараюсь подробно рассказать в последующих главах этого учебника.
Далее сохраняем этот небольшой файлик с расширением *.css (обычно файл со стилями называют style.css).
Все! файл со стилевым описанием создан! Теперь осталось совсем чуть чуть, а именно заставить нужные страницы нашего сайта черпать информацию с этого файла.
Делается это с помощью тега (связь). Тег многоцелевой и служит для «связывания» HTML документа с дополнительными внешними файлами, обеспечивающими его должную работу. Тег является своего рода ссылкой, только предназначенной не для пользователей, а для программ обозревателей (браузеров). Так как несёт в себе исключительно служебную информацию он располагается в заголовке HTML документа между тегами и не выводится браузерами на экран.
Тег имеет атрибуты:
- shortcut icon — Определяет, что подключаемый файл является иконкой.
- stylesheet — Определяет, что подключаемый файл содержит таблицу стилей.
- application/rss+xml — Файл в формате XML для описания ленты новостей.
Так как мы подключаем в качестве внешнего файла каскадную таблицу стилей, то наша служебная ссылка приобретает следующий вид:
Повторюсь, что бы уж точно развеять возможные недопонимания. Атрибуту rel присваиваем значение stylesheet так как подключаем в качестве внешнего файла каскадную таблицу стилей, указываем путь к файлу css (в этом примере файл называется mystyle.css и лежит рядом с документом HTML в котором прописывается данная ссылка) так же указываем, что данный файл текстовый и содержит в себе стилевое описание type=»text/css»
Теперь вставляем эту строчку в заголовки страниц нашего сайта и наслаждаемся результатом..
Файл mystyle.css
body
a
a:hover
h1
h2
p
Файл index.html
Меню:
Всё о слонах.
Купить слона.
Взять слона на прокат.
Всё о слонах
На этом сайте Вы найдёте любую информацию о слонах.
Файл elephant.html
Меню:
Всё о слонах.
Купить слона.
Взять слона на прокат.
Купить слона
У нас Вы можете по выгодным ценам приобрести лучших слонов!!
Файл elephant1.html
Меню:
Всё о слонах.
Купить слона.
Взять слона на прокат.
Взять слона на прокат
Только у нас Вы можете взять любых слонов на прокат!!
В примере выше, «сайт о слонах», на данный момент, имеется три страницы, каждая из которых связана с одним единственным внешним css файлом — mystyle.css. Таким образом, мы значительно его «разгрузили» и сделали дизайн всего сайта «мобильным». Представьте сколько б килобайт мы выиграли, будь на этом сайте сотня полноценных страниц!? А также, сколько б времени сэкономили, если бы нам понадобилось изменить что-либо в его дизайне!?
О том как присвоить какой либо группе идентичных элементов стиль отличающийся от основного стиля данного элемента, сделать отдельный класс элементов, читайте в главе Классы и идентификаторы.
Полезные советы:
В этой главе мы рассмотрели три способа внедрения CSS в HTML документ. Какой же лучше использовать?
- Используйте атрибут style для какого либо элемента если этот элемент с отличным от других элементов стилем один единственный на всём сайте.
- Используйте тег со стилевым описанием, в том случае, если страница должна иметь индивидуальный дизайн в корни отличный от других страниц сайта.
- В большинстве случаев разумно выносить каскадную таблицу стилей в отдельный css файл.
CSS :: Подключение к html-документу
Для того, чтобы правила CSS могли быть применены к требуемым элементам html -документа, сперва необходимо связать их с этим документом и, в частности, с самим элементом. В процессе изучения языка HTML мы уже касались этого вопроса при изучении элементов «style» и «link», а также атрибутов style, class и id. Теперь же повторим все еще раз и в одном месте, но сперва рассмотрим подробнее понятие таблицы стилей.
– это свод правил CSS , собранных в одном месте. Если таблица стилей находится в отдельном файле, который обычно имеет расширение .css , то этот файл называют , а в случае нахождения таблицы внутри элемента «style», ее называют . Имеется возможность указывать свойства CSS в качестве значения атрибута style конкретного элемента разметки, в этом случае говорят о .
Виды таблиц стилей CSS и
способы их подключения к html-странице
Подключение таблиц стилей к «html» -документу показано в примере №1 .
Подключение таблиц стилей к документу /* Подключаем еще одну внешнюю таблицу стилей */ @import "http://localhost/test/css/style_3.css"; p pК данному абацу применяется одна из встроенных таблиц стилей в зависимости от устройства вывода информации.
Пример №1. Подключение таблиц стилей CSS к html-документу
Внешняя таблица стилей представляет собой обычный текстовый файл, в котором перечисляются все необходимые правила CSS . Для того чтобы подключить ее к требуемому html -документу, следует указать путь к файлу в качестве значения атрибута href служебного элемента «link». Также можно воспользоваться правилом @import, которое должно располагаться внутри контейнера «style» или во внешней таблице стилей. Оно служит для импорта содержимого css -файла, указанного в значении данного свойства, в текущую таблицу стилей. Путь к файлу, содержащему внешнюю таблицу стилей, в этом случае указывается в формате @import url(«path»); (кавычки разрешается опускать) или же просто в кавычках после имени свойства: @import «path»; . При этом все правило, как и положено, должно заканчиваться точкой с запятой ; (см. пример №1 ). После подключения к документу, внешняя таблица стилей становится доступна в пределах всего документа.
Что касается внутренних таблиц стилей, то разрешается использовать несколько элементов «style» для их размещения, но не стоит забывать, что сами элементы «style» являются служебными и должны располагаться в пределах заголовка документа «head». Внутренние таблицы стилей доступны только в пределах данного документа.
Стоит отдельно отметить, что внутри элемента «style» действует синтаксис CSS , поэтому применение тегов и комментариев HTML в этой части документа не допустимо.
Также не рекомендуется частое использование встроенных стилей, хотя такая возможность и предусмотрена в HTML , т.к. при этом ухудшается читабельность кода, а также усложняется поиск и правка самих стилей. Кроме того, вместо них вполне можно воспользоваться атрибутами class или id, расположив необходимое правило CSS в таблице стилей.
Быстрый переход к другим страницам
- Синтаксис CSS
- Подключение CSS к html-документу
- Селекторы CSS
- Вернуться к оглавлению учебника
html.okpython.net Copyright © 2016-2023.