Внешние таблицы стилей CSS — как подключить
Мы создаем внешние каскадные таблицы стилей в отдельных документах, давая им расширение «.css». Внешняя каскадная таблица стилей представляет собой простой список правил.
Она не содержит HTML-тегов. CrashCourse/Demos/Stylesheet.css — пример.
.warning {color:#ff0000}
h2.warning {text-decoration:underline}
p.warning {font-weight:bold}
Мы можем подключить указанный CSS-файл к любому количеству страниц HTML. Тег <link>, который размещается в верхней части HTML-страницы, ссылается на внешнюю каскадную таблицу стилей.
Пример кода
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>External Style Sheet</title> <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> </head> <body> <h2>WARNING</h2> <p>Don't go there!</p> </body> </html>
| Атрибуты | Описание |
|---|---|
| href | указывает на местонахождение внешней каскадной таблицы стилей |
| rel | атрибут должен устанавливать значение “stylesheet” для ссылки на таблицу стилей |
| type | должно быть установлено “text/css” для ссылки на таблицу |
Количество внешних каскадных таблиц, которые может использовать страница HTML, неограниченно. Более того, мы можем объединять внешние таблицы стилей, используя технику внедрения стилевых таблиц.
Встроенные стили
Мы создаем встроенные стили, добавляя тегам атрибуты стиля. Так же как и в случае с классом или атрибутами идентификатора (id), большинство элементов могут иметь стилевые атрибуты.
Значения атрибута стиля разделяются точкой с запятой.
Образец кода ниже демонстрирует применение встроенного стиля:
Образец
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Inline Styles</title> </head> <body> <p>Common Greetings</p> <ul> <li>Hello</li> <li>Hi</li> <li>Howdy</li> </ul> </body> </html>
[ads-pc-1]
[ads-mob-1]
Оцени статью
Средняя оценка 0 / 5. Количество голосов: 0
Видим, что вы не нашли ответ на свой вопрос.
Помогите улучшить статью.
Напишите комментарий, что можно добавить к статье, какой информации не хватает.
Что такое внешняя таблица стилей?
Внешняя таблица стилей определяет, как выглядит веб-страница. Вы можете использовать таблицу стилей, чтобы указать такие вещи, как размер, цвет и шрифт текста, цвет кнопок или положение меню и боковых панелей.
Код, используемый во внешней таблице стилей
Существует два типа кода, используемого для создания базовой веб-страницы:
- Язык разметки гипертекста ( HTML ): Определяет содержимое веб-страницы. Он содержит фактический текст с разметкой, указывающий, являются ли разделы текста абзацами, заголовками или списками. Он также содержит ссылки на изображения, которые появляются на странице и гиперссылки на внешние страницы.
- Каскадные таблицы стилей ( CSS ): язык кодирования, используемый для определения способа отображения содержимого. Он определяет способ отображения каждого типа текстового элемента и может по-разному отображать один и тот же тип элемента, если они принадлежат к разным классам или имеют разные идентификаторы.
Это позволяет таким вещам, как меню и списки, вести себя по-разному в основном тексте веб-страницы.
Это позволяет таким вещам, как меню и списки, вести себя по-разному в основном тексте веб-страницы.В общем, хорошая идея отделить стиль от контента, поскольку он позволяет вам сосредоточиться на одной вещи за раз. Это становится еще более важным в команде, позволяя специалистам по содержанию и презентации работать независимо от остальных. Возможно, еще важнее то, что он также позволяет применять единый набор инструкций по стилю на всем сайте.
Затем можно изменить визуальное представление веб-сайта из одной таблицы стилей без индивидуального редактирования каждой веб-страницы. Для больших сложных веб-сайтов можно использовать несколько таблиц стилей для управления текстом, меню и разделами на страницах. Эту коллекцию таблиц стилей можно назвать «темой».
Использование внешнего CSS для связи HTML с CSS
Можно включить стиль CSS непосредственно в HTML веб-страницы, используя CSS для индивидуального оформления каждого абзаца и заголовков по-разному. Этот тип встроенного стиля, как правило, не очень хорошая идея, поскольку вы теряете все преимущества отделения стиля от контента.
Правильный способ применить стиль к веб-сайту — создать отдельный файл внешней таблицы стилей для каждого типа стиля, который вы хотите применить, а затем ссылаться на эти файлы из каждого файла HTML. Например, у вас могут быть следующие внешние таблицы стилей:
- text.css
- menus.css
- layout.css
Вы можете вносить изменения в код CSS в этих внешних таблицах стилей без изменения их имен файлов, то есть ссылки на эти файлы в HTML всех ваших веб-страниц не будут изменены.
Примеры HTML и CSS
Очень простая HTML-страница может содержать следующий код:
<! DOCTYPE html>
<html>
<head>
<title> Моя удивительная страница </ title>
</ head>
<body>
<h2> Все обо мне! </ h2>
<p> Эта страница обо мне и почему я Я потрясающий. </ p>
</ body>
</ html>
Если вы хотите посмотреть, как это выглядит в веб-браузере, скопируйте текст в текстовый редактор, например Блокнот .
Сохраните файл как что-то вроде «index.html» и перетащите его в браузер, чтобы увидеть стиль старой школы.
Простую внешнюю таблицу стилей можно связать с этой страницей, добавив следующий код под строкой <title>:
<link rel = "stylesheet"
type = "text / css"
href = "myStyle.css" />
Создайте другой текстовый файл с именем myStyle.css, расположенный в той же папке, что и index.html, который содержит следующий код:
h2 {
color: # FF7643;
font-face: Arial '
}
p {
color: red;
размер шрифта: 1,5em;
}
С помощью CSS вы можете сделать гораздо больше. Если вы хотите узнать больше, W3 Schools — отличное место для старта.
Связывание с внешней таблицей стилей
WebD2: Связывание с внешней таблицей стилейОбзор
До этого момента в курсе вы узнали, как добавить стиль к своим веб-страницам, вставив раздел стиля с помощью элемента