Css внешняя таблица стилей – Урок 2. Внешние таблицы стилей CSS. Как подключить стили. Уроки CSS | Уроки CSS Внешние таблицы стилей CSS | Уроки MODx Evo

Содержание

Внешние таблицы стилей — Xiper.net

Автор: Александр Головко Дата публикации: 05.01.2011

Последнее обновление:12.09.2017

Третья статья из цикла «подключение CSS» посвящена внешним таблицам стилей. Использование внешних таблиц — самый гибкий, мощный, удобный и правильный способ соединить HTML и CSS.

Суть способа в том, что CSS выноситься в отдельный файл (или файлы). А в HTML указывается, какие именно CSS-файлы к нему нужно применить.

Представляем внешнюю таблицу

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

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

Тег link для внешних таблиц стилей

Для подключения внешнего CSS используется тег link.

Знакомься, тег link:

  • устанавливает связь с внешними документами, чаще всего с таблицами стилей;
  • должен располагаться в секции head;
  • в одном документе может быть несколько тегов link.

Примеры подключения CSS


<link rel="stylesheet" type="text/css" href="css/main.css" />

Как правило, используются три атрибута:

  • rel — отвечает за установку взаимосвязи и в данном случае имеет значение «stylesheet»;
  • type — MIME-тип подключаемого объекта. У нас это таблица стилей — значит тип «text/сss»;
  • href — абсолютный или относительный путь к самому CSS-файлу.

Также есть возможность подключать индивидуальные CSS в зависимости от устройства отображения. Для этого служит атрибут media. Подробнее с его значениями можно ознакомиться в нашем справочнике.

Пример подключения дополнительной таблицы стилей для устройств печати:


<link rel="stylesheet" type="text/css" href="css/main.css" /> <!--Основной CSS--> 
<link rel="stylesheet" type="text/css" href="css/print.css" media="print" /> <!--Дополнительный CSS подключается автоматически, если страница выводится на устройство печати-->

Пример подключения CSS с использованием условных комментариев (ie6.css будет подключен только, если страница просматривается с помощью браузера, который идентифицируется, как IE6):


<link rel="stylesheet" type="text/css" href="css/main.css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie6.css"/>
<![endif]-->

Достоинства внешних CSS

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

  1. Один и тот же CSS-файл может «обслуживать» сколько угодно HTML-страниц. Объем HTML уменьшится, вносить изменения, общие для всех страниц сайта, значительно проще.
  2. Можно разделить правила на логические блоки (общие стили, стили для конкретных разделов сайта), расположить их в нескольких разных CSS-файлах и, для отдельных страниц, подключать только нужные. Только учти, что тут палка о двух концах — с одной стороны получаем меньший размер подключенного CSS (ненужные файлы стилей не грузятся), с другой стороны — больше мелких файлов со стилями — это больше обращений к серверу, что, понятно, не очень хорошо скажется на быстродействии.
  3. Можно выделять стили для конкретных браузеров и подключать их с помощью условных комментариев. Это используется для укрощения особо упрямых браузеров. Правда, с помощью условных комментариев так же можно подключить и вложенную таблицу, но выглядеть такая конструкция будет реально громоздко.

Резюме

Использование внешних таблиц стилей — самый удобный и грамотный способ связать воедино HTML и CSS. Надеюсь, вывод ясен. В реальных проектах используй именно внешние таблицы стилей.

Встроенные, внутренние и внешние каскадные таблицы стилей CSS

Встроенные стили

Встроенные стили css прикрепляются напрямую к HTML-тегам значением атрибута style.

Они напоминают следующий код:

<p>text</p>

В результате применения этого стиля, параграф будет показан красного цвета.

Но, как ранее уже отмечалось, более верным подходом является создание HTML-документа без оформления и стилей. И вот почему использование встраиваемых стилей не рекомендуется.

Внутренние стили

Внедренные, или внутренние, стили применяются ко всей странице целиком. Теги style размещаются между тегами head.

Способ подключения и применения стилей выглядит так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>
<style type="text/css">
p {
color: red;
}
a {
color: blue;
}
</style>

В результате использования этого стиля все параграфы на странице будут красного цвета, а все ссылки — синего.

Напомню, что хорошей практикой является разделение HTML-содержания и CSS-представления в разных файлах. И здесь приходит спаситель…

Внешние каскадные таблицы стилей

Внешние таблицы стилей применяются ко всему сайту со множеством страниц. Для этого создается

CSS-файл приблизительно следующего содержания:

p {
	color: red;
}
a {
	color: blue;
}

Если вы сохраните это в файле “web.css”, вам также потребуется указать в HTML-файле ссылку на внешнюю таблицу стилей. Выглядит это следующим образом (см последнюю строку):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>
<link rel="stylesheet" type="text/css" href="web.css" />

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

Чтобы следовать данному руководству наиболее эффективно, рекомендуется пробовать и тестировать код по мере прогресса. Поэтому используйте ваш текстовый редактор, чтобы создать полностью новый файл, а затем сохраните пустой документ как “web.css” в той же директории, что и HTML-файл.

Затем измените HTML-файл таким образом, чтобы он напоминал следующий код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>My first web page</title>
<link rel="stylesheet" type="text/css" href="web.css" />
</head>

Сохраните HTML-файл. Этот файл ссылается на CSS-файл, который в настоящее время пуст. Поэтому ничего не изменится.

Но по мере работы с Руководством по CSS для начинающих, вы научитесь, как добавлять и изменять CSS-файл, и сможете проверять результаты изменений обновлением окна браузера с открытым в нем HTML-документом, как это было сделано ранее.




Оцени статью

Оценить

Средняя оценка / 5. Количество голосов:

Спасибо, помогите другим — напишите комментарий, добавьте информации к статье.

Или поделись статьей

Видим, что вы не нашли ответ на свой вопрос.

Помогите улучшить статью.

Напишите комментарий, что можно добавить к статье, какой информации не хватает.

Отправить

Спасибо за ваши отзыв!

Внешние таблицы стилей в CSS: понятие и характеристика

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

Внешние таблицы стилей

Представление внешней таблицы стилей

Таблицы внешних стилей являются не более, чем обычным текстовым документом в формате css. Однако данный формат не является единственно возможным, но его использование считается традиционным и позволяет избежать несоответствий в работе старых браузеров.

Документ css включает в себя только кодировку стилей веб ресурса и комментарии к ним (комментарии оставляют программисты для удобства работы с кодом). Если в файле будет прописана некоторая html-кодировка, которая отвечает за структуру сайта, то считывание документа css может быть нарушено.

Подключение с link

Оператор link обеспечивает привязку css-документа, а именно таблицы внешних стилей с html-документом. Также стоит отметить, что принципиально важно размещение тега link. Он располагается в родительском теге head. Также допускается присутствие двух и более тегов link на странице.

Пример:

<head>
   <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

В данной строке присутствуют 3 атрибута, присущих тегу link. Первый из них –

rel. Он обеспечивает связь между файлами и чаще всего имеет значение stylesheet. Следом идет атрибут type, который присваивает определенный тип документу связи. Для таблиц стилей используется тип text/css. Ну и в конце следует оператор относительной или абсолютной ссылки к CSS-документу – href.

Также стоит отметить существование атрибута media. Данный атрибут позволяет подключать индивидуальные таблицы стилей к документу. К примеру особая таблица стилей для печатного устройства выводв подключается так:

<link rel="stylesheet" type="text/css" href="css/style.css" /> <!--ведущий CSS--> 
<link rel="stylesheet" type="text/css" href="css/printing.css" media="print" /> 
<!--вспомогательный CSS для вывода особых стилей на устройствах печати-->

Подключение условного комментирования с помощью вспомогательного файла CSS:

<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/comment.css"/>
<![endif]-->

Положительные стороны использования внешнего CSS

  • Использование внешних таблиц стилей значительно упрощает и оптимизирует работу робота с интернет ресурсом.
  • Первое, что следует отметить – значительное сокращение объема команд CSS. Также несомненным плюсом вложенного файла CSS является возможность использования одного файла с правилами для неограниченного количество файлов html. Это облегчает работу программиста в случае внесения каких-либо изменений в оформление сайта.
  • Также использование внешних таблицей стилей позволяет разбить правила на логические блоки, которые будут присваиваться для определенных частей контента. При чем файлов CSS может быть несколько. С одной стороны это уменьшает объем файла с правилами, однако с другой стороны это увеличивает количество обращений сервера к данным файлом. Это приводит к ухудшению показателя быстродействие интернет ресурса.
  • Еще одно достоинство вложенных CSS-файлов заключается в том, что можно создавать индивидуальный комплекс правил для определенных браузеров. Для этого и существует операция подключения условного комментирования. Это обычно используется при создании кросбраузерной верстки под старые версии IE.

Оценок: 3 (средняя 5 из 5)

  • 1214 просмотров

Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)

Уровень сложности:

Средний

Еще интересное

Внешние таблицы стилей. Уроки CSS.

Подготовил: Александр Головко Дата публикации: 05.01.2011

Третья статья из цикла «подключение CSS» посвящена внешним таблицам стилей. Использование внешних таблиц — самый гибкий, мощный, удобный и правильный способ соединить HTML и CSS.

Суть способа в том, что CSS выноситься в отдельный файл (или файлы). А в HTML указывается, какие именно CSS-файлы к нему нужно применить.

Представляем внешнюю таблицу

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

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

Тег link для внешних таблиц стилей

Для подключения внешнего CSS используется тег link.

Знакомься, тег link:

  • устанавливает связь с внешними документами, чаще всего с таблицами стилей;
  • должен располагаться в секции head;
  • в одном документе может быть несколько тегов link.

Примеры подключения CSS

<link rel="stylesheet" type="text/css" href="css/main.css" />

Как правило, используются три атрибута:

  • rel — отвечает за установку взаимосвязи и в данном случае имеет значение «stylesheet»;
  • type — MIME-тип подключаемого объекта. У нас это таблица стилей — значит тип «text/сss»;
  • href — абсолютный или относительный путь к самому CSS-файлу.

Также есть возможность подключать индивидуальные CSS в зависимости от устройства отображения. Для этого служит атрибут media. Подробнее с его значениями можно ознакомиться в нашем справочнике.

Пример подключения дополнительной таблицы стилей для устройств печати:

<link rel="stylesheet" type="text/css" href="css/main.css" /> <!--Основной CSS--> 
<link rel="stylesheet" type="text/css" href="css/print.css" media="print" /> <!--Дополнительный CSS подключается автоматически, если страница выводится на устройство печати-->

Пример подключения CSS с использованием условных комментариев (ie6.css будет подключен только, если страница просматривается с помощью браузера, который идентифицируется, как IE6):

<link rel="stylesheet" type="text/css" href="css/main.css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie6.css"/>
<![endif]-->

Достоинства внешних CSS

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

  1. Один и тот же CSS-файл может «обслуживать» сколько угодно HTML-страниц. Объем HTML уменьшится, вносить изменения, общие для всех страниц сайта, значительно проще.
  2. Можно разделить правила на логические блоки (общие стили, стили для конкретных разделов сайта), расположить их в нескольких разных CSS-файлах и, для отдельных страниц, подключать только нужные. Только учти, что тут палка о двух концах — с одной стороны получаем меньший размер подключенного CSS (ненужные файлы стилей не грузятся), с другой стороны — больше мелких файлов со стилями — это больше обращений к серверу, что, понятно, не очень хорошо скажется на быстродействии.
  3. Можно выделять стили для конкретных браузеров и подключать их с помощью условных комментариев. Это используется для укрощения особо упрямых браузеров. Правда, с помощью условных комментариев так же можно подключить и вложенную таблицу, но выглядеть такая конструкция будет реально громоздко.

Резюме

Использование внешних таблиц стилей — самый удобный и грамотный способ связать воедино HTML и CSS. Надеюсь, вывод ясен. В реальных проектах используй именно внешние таблицы стилей.

Внешние таблицы стилей 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>
Атрибуты <link>
АтрибутыОписание
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>

Внешние таблицы стилейВнешние таблицы стилей

подключение внешних стилейподключение внешних стилей


Оцени статью

Оценить

Средняя оценка / 5. Количество голосов:

Спасибо, помогите другим — напишите комментарий, добавьте информации к статье.

Или поделись статьей

Видим, что вы не нашли ответ на свой вопрос.

Помогите улучшить статью.

Напишите комментарий, что можно добавить к статье, какой информации не хватает.

Отправить

Спасибо за ваши отзыв!

HTML-таблица стилей

Каскадные таблицы стилей (CSS) описывают, как документы представлены на экранах, в печати или, возможно, как они произносятся. W3C активно пропагандирует использование таблиц стилей в Интернете с момента основания консорциума в 1994 году.
Каскадные таблицы стилей (CSS) предоставляют простые и эффективные альтернативы для указания различных атрибутов для тегов HTML. Используя CSS, вы можете указать ряд свойств стиля для данного HTML-элемента. Каждое свойство имеет имя и значение, разделенные двоеточием (:). Каждое объявление свойства разделяется точкой с запятой (;).
Сначала рассмотрим пример HTML документа, который использует тег <>font и связанные атрибуты для указания цвета текста и размера шрифта.

Примечание − тег font устарел и должен быть удален в будущей версии HTML. Поэтому его лучше не использовать, а использовать стили CSS для управления шрифтами. Но с целью обучения, на этой странице будут рассмотрены примеры с использованием этого тега.

<!DOCTYPE html> <html> <head> <title>HTML CSS</title> </head> <body> <p><font color = «green» size = «5»>Привет, МИР!</font></p> </body> </html>

<!DOCTYPE html>

<html>

   <head>

      <title>HTML CSS</title>

   </head>

   <body>

      <p><font color = «green» size = «5»>Привет, МИР!</font></p>

   </body>

</html>

Этот же пример можно переписать с помощью таблицы стилей —

<!DOCTYPE html> <html> <head> <title>HTML CSS</title> </head> <body> <p style = «color:green; font-size:24px;» >Привет, МИР!</p> </body> </html>

<!DOCTYPE html>

<html>

   <head>

      <title>HTML CSS</title>

   </head>

   <body>

      <p style = «color:green; font-size:24px;» >Привет, МИР!</p>

   </body>

</html>

В результате будет получено —

Вы можете использовать CSS тремя способами в HTML-документе −

  • Внешняя таблица стилей − определить правила таблицы стилей в отдельном .css  файле, а затем включить этот файл в свой HTML-документ с помощью тега HTML <link>.
  • Внутренние таблицы стилей − определить правила таблицы стилей в заголовке раздела документа HTML, используя тег <style>.
  • Встроенные таблицы стилей − определить правила таблицы стилей непосредственно вместе с элементами HTML, используя атрибут style.

Давайте рассмотрим все три случая один за другим с помощью подходящих примеров.
Внешняя таблица стилей
Если нужно использовать таблицу стилей для различных страниц, то всегда рекомендуется определить общую таблицу стилей в отдельном файле. Файл каскадной таблицы стилей будет иметь расширение .css и будет включен в HTML-файлы с помощью тега .
Определим фаил стилей style.css со следующими правилами

.red { color: red; } .thick { font-size:20px; } .green { color:green; }

.red {

   color: red;

}

.thick {

   font-size:20px;

}

.green {

   color:green;

}

Здесь мы определили три правила CSS, которые будут применимы к трем различным классам, определенным для тегов HTML. Теперь давайте использовать вышеуказанный внешний файл CSS в нашем следующем документе HTML −

<!DOCTYPE html> <html> <head> <title>HTML — CSS</title> <link rel = «stylesheet» type = «text/css» href = «/html/style.css»> </head> <body> <p class = «red»>Это красный цвет</p> <p class = «thick»>Это толстый шрифт</p> <p class = «green»>Это зеленый цвет</p> <p class = «thick green»>Это толстый и зеленый цвет</p> </body> </html>

<!DOCTYPE html>

<html>

   <head>

      <title>HTML — CSS</title>

      <link rel = «stylesheet» type = «text/css» href = «/html/style.css»>

   </head>

   <body>

      <p class = «red»>Это красный цвет</p>

      <p class = «thick»>Это толстый шрифт</p>

      <p class = «green»>Это зеленый цвет</p>

      <p class = «thick green»>Это толстый и зеленый цвет</p>

   </body>

</html>

В результате будет получено —

Внутренняя таблица стилей
Если вы хотите применить правила таблицы стилей только к одному документу,то вы можете включить эти правила в раздел заголовка документа HTML, используя тег  <style>.
Правила, определенные во внутренней таблице стилей, переопределяют правила, определенные во внешнем файле CSS.

<!DOCTYPE html> <html> <head> <title>HTML — CSS</title> <style type = «text/css»> .red { color: red; } .thick{ font-size:20px; } .green { color:green; } </style> </head> <body> <p class = «red»>Это красный цвет</p> <p class = «thick»>Это толстый шрифт</p> <p class = «green»>Это зеленый цвет</p> <p class = «thick green»>Это толстый и зеленый green</p> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<!DOCTYPE html>

<html>

   <head>

      <title>HTML — CSS</title>      

      <style type = «text/css»>

         .red {

            color: red;

         }

         .thick{

            font-size:20px;

         }

         .green {

            color:green;

         }

      </style>

   </head>

   <body>

     <p class = «red»>Это красный цвет</p>

      <p class = «thick»>Это толстый шрифт</p>

      <p class = «green»>Это зеленый цвет</p>

      <p class = «thick green»>Это толстый и зеленый green</p>

   </body>

</html>

В результате будет получено —

Встроенная стилей

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

Правила, определенные встроенные в элемент, переопределяют правила, определенные во внешнем файле CSS, а также правила, определенные в элементе <style>.

<!DOCTYPE html> <html> <head> <title>HTML Inline CSS</title> </head> <body> <p style = «color:red;»>Это красный цвет</p> <p style = «font-size:20px;»>Это толстый шрифт</p> <p style = «color:green;»>Это зеленый цвет</p> <p style = «color:green;font-size:20px;»>Это толстый и зеленый шрифт</p> </body> </html>

<!DOCTYPE html>

<html>

   <head>

      <title>HTML Inline CSS</title>

   </head>

   <body>

      <p style = «color:red;»>Это красный цвет</p>  

      <p style = «font-size:20px;»>Это толстый шрифт</p>  

      <p style = «color:green;»>Это зеленый цвет</p>  

      <p style = «color:green;font-size:20px;»>Это толстый и зеленый шрифт</p>

   </body>

</html>

В результате будет получено —

Лабораторная работа 2. Html 4 и css 2. Оформление страниц средствами внешней таблицы стилей css

Дисциплина «Web-дизайн»

В этой работе мы оформим нашу web-страничку, чтобы она стала более разноцветной (рисунок 2.1).

Рисунок 2.1

Прежде, чем перейти к оформлению страниц, изучим, как задается цвет в web.

  1. Определение цветов

При определении цветов для документа HTML можно использовать либо названия цветов, либо их шестнадцатеричные коды. Система шестнадцатеричного кодирования основана на трех компонентах – красном (Red), зеленом (Green) и синем (Blue), отсюда и ее название RGB, по первым буквам названий этих цветов. Каждый из компонентов соответствует шестнадцатеричному числу от 00 до FF (0 и 255 в десятичной системе счисления). Эти три значения затем объединяются в одно значение, которому предшествует знак #, например #800080, что соответствует фиолетовому цвету.

В таблице приведены названия некоторых цветов и их коды. Более полные таблицы цветов и их коды можно просмотреть в папке colors, расположенной в папке CD.

Цвет

Код

Цвет

Код

Black (черный)

#000000

Silver (серебряный)

#С0С0С0

Maroon (темно-бордовый)

#800000

Red (красный)

#FF00000

Green (зеленый)

#008000

Lime (известь)

#00FF00

Olive (оливковый)

#808000

Yellow (желтый)

#FFFF00

Navy (темно-синий)

#000080

Blue (синий)

#0000FF

Purple (фиолетовый)

#800080

Fuchia (фуксия)

#FF00FF

Teal (темно-зеленый)

#008080

Aqua (аква)

#00FFFF

Gray (серый)

#808080

White (белый)

#FFFFFF

Таблица безопасных цветов для разработки дизайна сайта

Безопасная палитра цветов обеспечивает наиболее точное соответствие отображения на различных мониторах.

Безопасная палитра состоит из 216 цветов. Безопасные цвета всегда неизменные при переходе от одного браузера к другому или от одной платформы к другой, от одного монитора к другому с их различными возможностями цветоотображения и разрешениями.

Если любое из трех шестнадцатеричных значений отличается от 00, 33, 66, 99, СС или FF, то цвет не является безопасным.

Таблицу безопасных цветов можно просмотреть в папке CD/colors.

  1. Определение css

Наша web-страница пока не имеет оформления, которое можно осуществлять двумя способами:

    • первый – средствами таблиц стилей CSS (более прогрессивный и правильный метод),

    • второй – средствами атрибутов у тегов HTML.

    Начнем сразу с более прогрессивного метода.

    CSS – Cascading Style Sheets (иерархические стилевые спецификации или каскадные таблицы стилей) не заменяют языка разметки, являются самостоятельной технологией, которая применяется к тегу HTML.

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

    Обратная ситуация: мы с помощью атрибутов HTML задали на десяти web-страницах всем заголовкам h2 зеленый цвет, т.е. прописали его десять раз. Затем решили изменить цвет заголовка на красный, тогда нам придется десять раз исправить зеленый цвет на красный.

    При использовании же таблицы стилей нам придется только один раз это сделать, изменив зеленый цвет заголовка на красный в самой таблице стилей, и он автоматически изменится на всех десяти web-страницах.

    Таблица стилей включает набор CSS-элементов, структура которых отличается от структуры HTML-элемента.

    Синтаксис CSS-элемента

    селектор {свойство 1: значение; свойство 2: значение; … свойство N: значение}

    Вначале пишется имя селектора, например, h2, это означает, что все стилевые свойства будут применяться к тегу <h2>, затем идут фигурные скобки, в которых записывается стилевое свойство, а его значение указывается после двоеточия. Стилевые свойства со значениями разделяются между собой точкой с запятой, в конце этот символ можно опустить.

    Стилевых свойств со значениями может быть сколько угодно много, их последовательность значения не имеет.

    CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от желания разработчика.

    Например:

    h2 {font-family:Arial; font-size:14pt}

    или тот же самое можно записать так:

    h2 {

    font-family:Arial;

    font-size:14pt

    }

    В этом примере:

    • h2 – селектор, в данном случае HTML-элемент,

    • font-family и font-size – стилевые свойства,

    • Arial – значение свойства font-family,

    • 14 pt – значение свойства font-size.

    Способы включения таблиц стилей в HTML-документ

    1. Внешняя таблица стилей (связанный стиль).

    2. Внедренная таблица стилей (глобальный стиль).

    3. Внутренние стили.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *