• Страница 1 из 1
  • 1
Основы для внешней таблицы стилей CSS
Kosten
Пятница, 26 Июля 2019, 22:29 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Внешняя таблица стилей определяет, как изначально выглядит веб-страница на сайте. Вы можете использовать таблицу стилей, чтобы указать такие вещи, как размер, цвет и шрифт текста, цвет кнопок или положение меню и боковых панелей.

Код используемый во внешней таблице стилей

Существует два типа кода, используемого для создания базовой веб-страницы:

- Язык гипертекстовой разметки (HTML): определяет содержимое веб-страницы, где содержит фактический текст с разметкой, указывающий, являются ли разделы текста абзацами, заголовками или списками. Он также содержит ссылки на изображения, которые появляются на странице, и гиперссылки на внешние страницы.

- Каскадные таблицы стилей (CSS): язык кодирования, используемый для определения способа отображения содержимого, где определяет способ отображения каждого типа текстового элемента и может по-разному отображать один и тот же тип элемента, если они принадлежат к разным классам или имеют разные идентификаторы. Это позволяет таким вещам, как меню и списки, также вести себя по-разному в основном тексте веб-страницы.

В общем это хорошая идея отделить стиль от контента, поскольку он позволяет вам сосредоточиться на одной вещи за раз. Это становится еще более важным в команде, позволяя специалистам по содержанию и презентации работать независимо от остальных. Возможно еще важнее то, что он также позволяет применять единый набор инструкций по стилю на всем сайте.

Затем можно изменить визуальное представление веб-сайта из одной таблицы стилей без индивидуального редактирования каждой веб-страницы. Для больших сложных веб-сайтов можно использовать несколько таблиц стилей для управления текстом, меню и разделами на страницах.



Использование внешнего CSS для связи HTML с CSS

Можно включить стиль CSS непосредственно в HTML веб-страницы, используя CSS для индивидуального оформления каждого абзаца и заголовков по-разному. Этот тип встроенного стиля, как правило, не очень хорошая идея, поскольку вы теряете все преимущества отделения стиля от контента. В частности, вы теряете возможность последовательно обновлять весь веб-сайт из одного файла.

Правильный способ применить стиль к веб-сайту — это создать один файл внешней таблицы стилей для каждого типа стиля, который вы хотите применить, а затем ссылаться на эти файлы из каждого файла HTML. Например, у вас могут быть следующие внешние таблицы стилей:

text.css
menus.css
layout.css


Вы можете вносить изменения в код CSS в этих внешних таблицах стилей, не меняя их имен файлов, то есть ссылки на эти файлы в HTML всех ваших веб-страниц не будут изменены.

Примеры HTML и CSS

Очень простая HTML-страница может содержать следующий код:

Код
<html>
<head>
<title>Моя удивительная страница</title>
</head>
<body>
<h1>Все обо мне!</h1>
<p>Эта страница обо мне и почему я потрясающая.</p>
</body>
</html>


Простую внешнюю таблицу стилей можно связать с этой страницей, добавив следующий код под строкой title:

Код
<link rel = "stylesheet"type = "text/css" href = "myStyle.css" />


Создайте другой текстовый файл с именем myStyle.css, расположенный в той же папке, что и index.html, который содержит следующий код:

Код
h1 {
color: #FF7643;
font-face: Arial'
}

p {
color: red;
font-size: 1.5em;
}

С помощью CSS вы можете сделать гораздо больше.
Прикрепления: 7172235.jpg (23.6 Kb)
Страна: (RU)
  • Страница 1 из 1
  • 1
Поиск: