CSS = Стили и цвета

Манипулировать текстом

Цвета, Коробки

Стилизация HTML с CSS

CSS означает каскадные таблицы стилей.

CSS описывает, как HTML-элементы должны отображаться на экране, бумаге или на других носителя х.

CSS экономит много работы . Он может контролировать расположение нескольких веб-страниц все сразу.

CSS можно добавлять к элементам HTML тремя способами:

• Встроенный - с помощью атрибута Style в элементах HTML
• Internal -с помощью
  
  

  This is a heading

  
  

  This is a paragraph.

  
  

  Внешние CSS

  Внешняя таблица стилей используется для определения стиля для многих HTML-страниц.

  С помощью внешней таблицы стилей можно изменить внешний вид всего веб-узла, изменив один файл!

  Чтобы использовать внешнюю таблицу стилей, добавьте ссылку на нее в разделе страницы HTML:

  Пример

  
  
  
  
  
  

  This is a heading

  
  

  This is a paragraph.

  
  

  Внешняя таблица стилей может быть написана в любом текстовом редакторе. Файл не должен содержать HTML-код и должен быть сохранен с расширением. CSS.

  Вот как выглядит "styles.css":

  body {
  background-color: powderblue;
  }
  h1 {
  color: blue;
  }
  p {
  color: red;
  }

  Шрифты CSS

  Свойство CSS color определяет используемый цвет текста.

  Свойство CSS font-family определяет используемый шрифт.

  Свойство CSS font-size определяет размер текста, который будет использоваться.

  Пример

  
  
  
  
  
  

  This is a heading

  
  

  This is a paragraph.

  
  

  Граница CSS

  Свойство CSS border определяет границу вокруг элемента HTML:

  Пример

  p {
  }
  

  CSS заполнение

  Свойство CSS padding определяет отступ (пробел) между текстом и границей:

  Пример

  p {
  border: 1px solid powderblue;
  padding: 30px;
  }

  Каскадные таблицы стили CSS (Cascading Style Sheets) – стандарт стилей, объявленный консорциумом W3C. Термин каскадные указывает на возможность слияния различных видов стилей и на наследование стилей внутренними тегами от внешних.

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

  CSS – абстракция, в которой внешний вид Web-документа определяется отдельно от его содержания.

  
  

  Некоторые стили поддерживаются не всеми браузерами. Однако можно назначать любые стили, потому что неподдерживаемые стили будут просто игнорироваться.

  
  

  Возможно, Вам понадобятся также:

  
  

  По методам добавления стилей в документ различают три вида стилей.

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

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

  Пример

  Абзац с текстом синего цвета

  РЕЗУЛЬТАТ:

  Абзац с текстом синего цвета

  Абзац с текстом красного цвета

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

  Глобальные стили

  Глобальные стили CSS располагаются в контейнере , расположенном в свою очередь в контейнере ... .

  
  

  Атрибут type="text/css" , ранее обязательный для тега .........

  Серый цвет текста во всех абзацах Web-страницы

  РЕЗУЛЬТАТ:

  Серый цвет текста во всех абзацах Web-страницы

  Серый цвет текста во всех абзацах Web-страницы

  Внешние (связанные) стили

  Внешние (связанные) стили определяются в отдельном файле с расширением css . Внешние стили позволяют всем страницам сайта выглядеть единообразно.

  Для связи с файлом, в котором описаны стили, используется тег , расположенный в контейнере ... .

  В этом теге должны быть заданы два атрибута: rel="stylesheet" и href , определяющиЙ адрес файла стилей.

  Пример

  ......... ......... .........

  Подключение стилей

  Правило подключения глобальных и внешних стилей состоит из селектора и объявлений стиля .

  Селектор, расположенный в левой части правила, определяет элемент (элементы), для которых установлено правило. Далее, в фигурных скобках перечисляются объявления стиля, разделенные точкой с запятой. Например:

  P { text-indent: 30px; font-size: 14px; color: #666; }

  Объявление стиля – это пара свойство CSS: значение CSS .

  Например: color: red

  При внутреннем подключении стиля правило CSS, которое является значением атрибута style , состоит из объявлений стиля, разделенных точкой с запятой. Например:

  Селекторы CSS

  Селектор	Описание	Подробнее
  *	Любой элемент
  E	Элемент, определенный тегом E
  E#myid	Элемент E с идентификатором "myid"
  E.myclass	Элемент E класса "myclass"
  E	Селектор существования атрибута
  E	Селектор равенства атрибута
  E	Селектор атрибута со списком значений	Селекторы атрибутов
  E	Селектор префикса атрибута
  E	Селектор суффикса атрибута
  E	Селектор подстроки атрибута
  E:link	Элемент E – еще не посещенная пользователем ссылка	Динамические псевдоклассы
  E:visited	Элемент E – уже посещенная пользователем ссылка	Динамические псевдоклассы
  E:hover	Элемент E при наведении на него указателя мышки	Динамические псевдоклассы
  E:active	Элемент E, активированный пользователем	Динамические псевдоклассы
  E:focus	Элемент E в фокусе	Динамические псевдоклассы
  E:target	Элемент E, который является целью ссылки	Целевой псевдокласс
  E:lang	Элемент E, написанный на указанном языке	Псевдокласс языка
  E:enabled	Элемент E – доступный элемент формы	Псевдоклассы состояний
  E:disabled	Элемент E – недоступный элемент формы	Псевдоклассы состояний
  E:checked	Элемент E – включенный флажок или переключатель	Псевдоклассы состояний
  E:indeterminate	Элемент E – неопределенный флажок или переключатель	Псевдоклассы состояний
  E:root	Элемент E, корень документа	Структурные псевдоклассы
  E:nth-child(n)	Элемент E, n-й ребенок родительского элемента	Структурные псевдоклассы
  E:nth-last-child(n)	Элемент E, n-й ребенок родительского элемента, считая с конца	Структурные псевдоклассы
  E:nth-of-type(n)	n-й элемент типа E	Структурные псевдоклассы
  E:nth-last-of-type(n)	n-й элемент типа E, считая с конца	Структурные псевдоклассы
  E:first-child	Элемент E, первый дочерний элемент родителя	Структурные псевдоклассы
  E:last-child	Элемент E, последний дочерний элемент родителя	Структурные псевдоклассы
  E:first-of-type	Первый элемент типа E	Структурные псевдоклассы
  E:last-of-type	Последний элемент типа E	Структурные псевдоклассы
  E:only-child	Единственный у родителя дочерний элемент	Структурные псевдоклассы
  E:only-of-type	Единственный у родителя элемент типа E	Структурные псевдоклассы
  E:empty	Элемент E, не содержащий дочерних элементов	Структурные псевдоклассы
  E:not(X)	Элемент E, который не соответствует простому селектору X	Псевдокласс отрицания
  E::first-line	Первая строка элемента E	Псевдоэлементы
  E::first-letter	Первая буква элемента E	Псевдоэлементы
  E::before	Содержимое до элемента E	Псевдоэлементы
  E::after	Содержимое после элемента E	Псевдоэлементы
  E::selection	Выделение в элементе E	Псевдоэлементы
  E F	Элемент F, который находится внутри элемента E
  E > F	Элемент F, который находится непосредственно внутри элемента E
  E + F	Элемент F, который следует сразу после элемента E
  E ~ F	Элемент F, который следует после элемента E

  Универсальный селектор

  Универсальный селектор соответствует любому элементу html-документа.

  Для обозначения универсального селектора применяется символ "звёздочка" (*).

  Его используют, если надо установить одинаковый стиль для всех элементов Web-страницы. Например:

  * { margin: 0; padding: 0; }
  

  В некоторых случаях символ "звёздочка" (*) может быть опущен:
  *.myclass и .myclass эквиваленты,
  *#myid и #myid эквивалентны

  Селекторы тегов

  В качестве селектора может выступать любой html-тег, для которого определяются правила стилевого оформления. Например:

  H1 {color: red; text-align: center;}

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

  H1, h2, h3, h4 {color: red; text-align: center;}

  Селекторы идентификаторов

  HTML предоставляет возможность присвоить уникальный идентификатор любому тегу. Идентификатор задается атрибутом id . Например:

  ...

  Значение идентификатора должно начинаться с латинской буквы и может содержать буквы (,), цифры (), "дефисы" (-) и "подчеркивания" (_).

  Значения всех атрибутов id в html-документе обязаны быть уникальными. Если встречаются id с одинаковыми значениями, то эти идентификаторы игнорируются, а код Web-страницы становится невалидным.

  В CSS-коде селектор идентификатора обозначается знаком "решетка" (#). Так как идентификатор id применяется только к уникальным элементам, название тега перед знаком "решетка" (#) обычно опускают:

  Div#a1 {color: green;}

  аналогично

  #a1 {color: green;}
  

  Желательно использовать id не для стилевого оформления элемента, а для обращения к нему через скрипты или перехода по ссылке.

  Селекторы классов

  Для стилевого оформления чаще всего используются селекторы классов. Класс для тега задается атрибутом class . Например:

  ...

  Имя класса должно начинаться с латинской буквы и может содержать буквы (,), цифры (), "дефисы" (-) и "подчеркивания" (_).

  Если атрибут id применяется для уникальной идентификации, то при помощи атрибута class тег относят к той или иной группе.

  В CSS-коде селектор идентификатора обозначается знаком "точка" (.). Разные теги можно отнести к одному классу. В таком случае имя тега перед знаком "точка" (.) опускают:

  I.green {color: #008000;} b.red {color: #f00;} .blue {color: #00f;}

  Для тега можно одновременно указать несколько классов, перечисляя их в атрибуте class через пробел. В этом случае к элементу применяются стили каждого из указанных классов.

  ...

  Если некоторые из этих классов содержат одинаковые свойства стиля, но с разными значениями, то будут применены значения стиля класса, который в CSS-коде расположен ниже.

  Селекторы атрибутов

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

  
  h1 {color: #800000;} /* элемент h1, у которого есть атрибут title */
  input { border: 1px solid #ссс; padding: 4px 6px; width: 300px; }
  a { text-decoration: none; border-bottom: 1px solid #06c; color: #06c; }
  span { display: inline-block; background-image: url("/img/icon_sprite.png"); }
  a, a { background: url("pic.gif") bottom left no-repeat; display: inline-block; width: 32px; }
  { display: block; float: left; width: 280px; }
  

  Между именем тега и квадратной скобкой ([) не должно быть пробела!

  
  

  Универсальный селектор, селекторы тегов, идентификаторов, классов и атрибутов, а также псевдоклассы относятся к простым селекторам.

  Простые селекторы можно связать в определенные последовательности на основе отношений элементов в дереве Web-документа. Такие конструкции называют комбинаторами.

  Контекстные селекторы

  Один из самых часто используемых комбираторов – контекстный селектор.

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

  Пример

  1. Пушкин А.С.
     • «Выстрел»
     • «Метель»
     • «Дубровский»
  2. Гоголь Н.В.
     • «Ревизор»
     • «Тарас Бульба»
     • «Мертвые души»
  3. Толстой Л.Н.
     • «Война и мир»
     • «Анна Каренина»
     • «Воскресение»

  РЕЗУЛЬТАТ:

  1. Пушкин А.С.
     • «Выстрел»
     • «Метель»
     • «Дубровский»
  2. Гоголь Н.В.
     • «Ревизор»
     • «Тарас Бульба»
     • «Мертвые души»
  3. Толстой Л.Н.
     • «Война и мир»
     • «Анна Каренина»
     • «Воскресение»

  Дочерние селекторы

  Дочерний селектор определяет элемент, который находится внутри другого непосредственно. В дочернем селекторе простые селекторы разделены знаком "больше" (>).

  Пример

  1. Пушкин А.С.
     • «Выстрел»
     • «Метель»
     • «Дубровский»
  2. Гоголь Н.В.
     • «Ревизор»
     • «Тарас Бульба»
     • «Мертвые души»
  3. Толстой Л.Н.
     • «Война и мир»
     • «Анна Каренина»
     • «Воскресение»

  РЕЗУЛЬТАТ:

  1. Пушкин А.С.
     • «Выстрел»
     • «Метель»
     • «Дубровский»
  2. Гоголь Н.В.
     • «Ревизор»
     • «Тарас Бульба»
     • «Мертвые души»
  3. Толстой Л.Н.
     • «Война и мир»
     • «Анна Каренина»
     • «Воскресение»

  Соседние селекторы

  Соседний селектор определяет знак "плюс" (+), разделяющий две последовательности простых селекторов. Элементы, представленные этими последовательностями, находятся внутри одного контейнера и следуют второй за первым непосредственно, не разделенные никакими другими тегами.

  Пример

  РЕФЛЕКСОТЕРАПИЯ

  РЕЗУЛЬТАТ:

  РЕФЛЕКСОТЕРАПИЯ

  Смежные селекторы

  Смежный селектор определяет знак "тильда" (~), разделяющий две последовательности простых селекторов. Элементы, представленные этими последовательностями, находятся внутри одного контейнера и следуют второй за первым (необязательно непосредственно).

  Пример

  ---

  РЕФЛЕКСОТЕРАПИЯ

  "Все акты сознательной и бессознательной жизни по способу происхождения суть рефлексы". И.М. Сеченов

  ---

  Рефлексотерапия – лечение заболеваний через управление рефлексами. Успешно применяется в программах комплексного лечения или как индивидуальная методика.

  РЕЗУЛЬТАТ:

  РЕФЛЕКСОТЕРАПИЯ

  "Все акты сознательной и бессознательной жизни по способу происхождения суть рефлексы". И.М. Сеченов

  Рефлексотерапия – лечение заболеваний через управление рефлексами. Успешно применяется в программах комплексного лечения или как индивидуальная методика.

  
  
  

  У каждого тега можно задать индивидуальный, цвет, фон, окантовку и прочие свойства. Формат визуального оформления называется css (Cascading Style Sheets), что в переводе означает: «каскадные таблицы стилей».

  В данной статье рассмотрим 3 способа как подключить css стили в html код страницы сайта для изменения внешнего вида.

  1 Способ. Подключить отдельный файл css в html коде страницы

  В данном файле прописываются свойства для тегов. Это наиболее удобный и практичный способ установить css стили для html, особенно если на сайте более чем 1 страница. Изменив всего 1 файл можно сменить оформления всех страниц, на которых он подключен. Старайтесь свойства писать в отдельном файле.

  Как установить файл стилей css на html

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

  Пример подключения файла(код страницы.html)

  
  
  

  
  

  
  
  

  
  
  

  Текстовое содержание

  
  

  
  

  
  

  Пример кода самого файла стилей(код страницы.css)

  P {color:green;}
  

  В примере выше, файл называется my_style.css и располагается в папке /my_css .

  В данном файле написано свойство для тега

  Код p {color:green;} означает: сделать цвет текста внутри тега

  Зеленым. В данном примере подключен только один файл, но при необходимости вы можете подключать их неограниченное количество.

  2 Способ. Написать вначале самой страницы

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

  У вас одностраничный сайт;

  Данное визуально оформление предназначено только для текущей страницы. Например, для визуального оформления элементов, которых нет на других страницах.

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

  Как добавить css стили в html код страницы сайта

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

  Пример добавления свойств тегов вначале(код страницы.html)

  
  
  

  
  

  
  
  

  
  
  

  Текстовое содержание

  
  

  
  

  
  

  
  

  3 Способ. Написать стиль в атрибуте style для каждого тега отдельно

  Данный способ широко применяется, когда внутри одной страницы есть элементы, не сильно отличающиеся между собой, например, только цветом(отступом, размером и т. п.). В этом случае быстрее и удобнее подключить один общий css стиль в html с помощью отдельного файла, а небольшие изменения добавлять у конкретных элементов. Атрибут style обладает наивысшим приоритетом, поэтому тег получит все свойства, указанные в style, даже если они ранее были указаны другими способом.

  По сути, логика следующая: общие и наиболее часто используемые стили, мы прописываем в файле(1 способ), а детальные корректировки в самих элементах. Например, если у вас на странице 5 заголовков, отличающихся цветом, то лучше прописать общие свойства в файле, определяющие размеры и отступы этих заголовков, а цвет в самих элементах, по данному способу. у тега

  3 способ обладает наивысшим приоритетом, поэтому тег получит свойства, указанные в атрибуте style="" , даже если они ранее были указаны с помощью другого метода.

  Здравствуйте, уважаемые читатели проекта «Анатомия Бизнеса». С вами вебмастер Александр! В прошлой статье мы разобрали, что такое CSS-стили и насколько огромное значение они имеют в WEB-программировании.

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

  Не будем откладывать дело в долгий ящик и приступим!

  Подключение отдельного CSS-файла!

  Один из самых удобных и простых способов подключения стилей является подключение отдельного файла со стилями. Для этого нужно при помощи текстового редактора notepad++ (или любого другого) создать файл с расширением.css и поместить в той же папке, что и файл, к которому мы хотим его разместить.

  После чего в HTML-файле между тегами разместить следующий код:

  Теперь давайте разберем, что все это значит:

  Link # в переводе с английского обозначает «ссылка». Таким образом мы показываем браузеру, что далее у нас пойдет речь пойдет о ссылке. rel= # данным атрибутом мы показываем, какое отношение файл CSS имеет к файлу HTML. "stylesheet" # а именно то, что CSS-файл является каскадной таблицей стилей. type="text/css" # тут все просто: это указание того, что файл написан в текстовом формате и имеет расширение.css href="style.css" # это ссылка на файл с CSS-стилями.

  Как по мне, это и есть наиболее предпочтительный способ подключения стилей CSS.

  Прописываем стили непосредственно в HTML-файле (первый способ)
  

  Следующим способом указывания CSS-стилей является их прописывание непосредственно в HTML-документе. Выглядит это так:
  

  Если мы посмотрим, как будет отображаться данный HTML-документ в браузере, то увидим, что текст между тегами стал красного цвета. И используя атрибут style, мы говорим, что далее у нас идут параметры стиля отображения. Color — это селектор, отвечающий за цвет. Red — это значение данного селектора. Таким способом мы можем выделять определенным типом отображения какие-то отдельные части текста.

  Размещение каскадных таблиц стилей внутри HTML (второй способ)

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

  Тут пример: отображение CSS-стилей в документе HTML

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

  Подключение нескольких CSS-файлов к одному HTML-документу.

  Правила HTML допускают подключение сразу нескольких файлов CSS. Многие вебмастера используют это: создают отдельные CSS-файлы для текста и для картинок. Или отдельные файлы для хедера, футтера и основного тела страницы. Давайте разберемся, как это реализовать.

  Мы создаем несколько файлов с CSS-стилями. Пусть их названия будут style-1.css и style-2.css. Размещаем, как и в способе номер один, в одной папке с HTML-файлом.

  Тут пример: отображение CSS-стилей в документе HTML

  Все по аналогии с первым способом, только в данном случае мы указываем ссылки сразу на два в файла.

  Ссылка на CSS-файл внутри на файл этого же типа.

  Кроме всех выше перечисленных способов, есть способ, который позволяет внутри одного CSS-файла размещать ссылки на множество других!

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

  Во-вторых, в уже подключенный файл вписываем следующий код:

  @import url("style-2.css");

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

  Тест на закрепление материала:
  

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

  Вариант 1:

  Вариант 2 :
  

  Вариант 3:

  Вариант 4:

  
  Можем ли мы разместить каскады CSS непосредственно в файле HTML?

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

  Осуществить данную задачу можно тремя способами:

  • Написать стилевое описание непосредственно в самом элементе. Такой способ хорош лишь в том случае если таковой элемент один единственный в HTML документе который нуждается в отдельном стилевом описании.
  • Написать стилевое описание для всех идентичных элементов HTML документа. Такой способ оправдывает себя, если стиль страницы принципиально отличается от общего дизайна сайта (группы взаимосвязанных страниц).
  • Вынести стилевое описание элементов HTML в отдельный файл CSS. Это позволит управлять дизайном всего сайта целиком, каждой страницей сайта в которой указанно обращение к CSS файлу. Этот способ является наиболее эффективным использованием таблицы каскадных стилей.

  Давайте более подробно рассмотрим каждый вариант, а заодно познакомимся с правилами синтаксиса написания CSS.

  Атрибут style.

  Практически каждый HTML тег имеет атрибут style , который говорит о том, что к этому тегу применяется некое стилевое описание.

  Пишется так:

  style="" >

  Всё что будет написано между кавычками атрибута style и будет являться стилевым описанием для данного элемента, в данном случае элемента

  Ну например:

  style="color: #ff0000; font-size:12px" > это параграф с индивидуальным стилем

  В данном случае мы указали, что этот параграф должен отображаться красным цветом и иметь размер шрифта в 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" >

  
  
  
  

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

  Тег (не путайте с одноименным атрибутом) в котором и происходит описание нужных нам элементов.

  Взгляните на пример, ниже к нему будут комментарии.

  
  
  
  
  
  
  
  

  Всё о слонах

  
  

  На этом сайте Вы найдёте любую информацию о слонах.

  
  

  Купить слона

  
  

  У нас Вы можете по выгодным ценам приобрести лучших слонов!!

  
  

  Взять слона на прокат

  
  

  Только у нас Вы можете взять любых слонов на прокат!!

  
  
  
  

  Как видно из примера мы добились точно такого же результата что и в первом случае только теперь мы не прописываем каждому элементу стиль индивидуально, а вынесли его в "голову" документа тем самым указав что все заголовки

  ,

  - будут синими а параграфы

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

  Теперь обещанные комментарии:

  Тег идет непосредственное объявление стилей тех или иных HTML элементов согласно следующему синтаксису:

  Если в блоке объявления стилей указывается несколько свойств элемента, то они между собой разделяются точкой с запятой.

  CSS в отдельном внешнем файле.

  Долго ли коротко ли, подошли мы к главному, на мой взгляд, достоинству CSS, а именно возможности выносить все сведения касающиеся дизайна сайта в отдельный внешний файл.

  Итак, открываем блокнот (или другой редактор) и пишем в нем следующий текст:

  Body {background-color: #c5ffa0}
  a {color:#000060; font-weight: bold;}
  a:hover {color:#ff0000; font-weight: bold; text-decoration:none}
  h1 {color: #0000ff; font-size:18px}
  h2 {color: #ff00ff; font-size:16px}
  p {color: #600000; font-size:14px}

  О том, что это такое странное мы написали, постараюсь подробно рассказать в последующих главах этого учебника.

  Все! файл со стилевым описанием создан! Теперь осталось совсем чуть чуть, а именно заставить нужные страницы нашего сайта черпать информацию с этого файла.

  Делается это с помощью тега (связь). Тег многоцелевой и служит для "связывания" HTML документа с дополнительными внешними файлами, обеспечивающими его должную работу. Тег является своего рода ссылкой, только предназначенной не для пользователей, а для программ обозревателей (браузеров). Так как несёт в себе исключительно служебную информацию он располагается в заголовке HTML документа между тегами и не выводится браузерами на экран.

  Тег имеет атрибуты:

  href - Путь к файлу.
  rel - Определяет отношения между текущим документом и файлом, на который делается ссылка.

  • shortcut icon - Определяет, что подключаемый файл является .
  • stylesheet - Определяет, что подключаемый файл содержит таблицу стилей.
  • application/rss+xml - Файл в формате XML для описания ленты новостей.

  type - MIME тип данных подключаемого файла.

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

  Повторюсь, что бы уж точно развеять возможные недопонимания. Атрибуту rel присваиваем значение stylesheet так как подключаем в качестве внешнего файла каскадную таблицу стилей, указываем путь к файлу css (в этом примере файл называется mystyle.css и лежит рядом с документом HTML в котором прописывается данная ссылка) так же указываем, что данный файл текстовый и содержит в себе стилевое описание type="text/css"

  Теперь вставляем эту строчку в заголовки страниц нашего сайта и наслаждаемся результатом..

  Файл mystyle.css
  body {background-color: #c5ffa0}
  a {color:#000060; font-weight: bold;}
  a:hover {color:#ff0000; font-weight: bold; text-decoration:none}
  h1 {color: #0000ff; font-size:18px}
  h2 {color: #ff00ff; font-size:16px}
  p {color: #600000; font-size:14px}
  Файл index.html
  
  
  
  
  
  
  
  

  Меню:

  
  Всё о слонах.
  Купить слона.
  Взять слона на прокат.
  

  ---

  
  

  Всё о слонах

  
  

  На этом сайте Вы найдёте любую информацию о слонах.

  
  
  
  Файл elephant.html
  
  
  
  
  
  
  
  

  Меню:

  
  Всё о слонах.
  Купить слона.
  Взять слона на прокат.
  

  ---

  
  

  Купить слона

  
  

  У нас Вы можете по выгодным ценам приобрести лучших слонов!!

  
  
  
  Файл elephant1.html
  
  
  
  
  
  
  
  

  Меню:

  
  Всё о слонах.
  Купить слона.
  Взять слона на прокат.
  

  ---

  
  

  Взять слона на прокат

  
  

  Только у нас Вы можете взять любых слонов на прокат!!

  
  
  
  

  В примере выше, "сайт о слонах", на данный момент, имеется три страницы, каждая из которых связана с одним единственным внешним css файлом - mystyle.css. Таким образом, мы значительно его "разгрузили" и сделали дизайн всего сайта "мобильным". Представьте сколько б килобайт мы выиграли, будь на этом сайте сотня полноценных страниц!? А также, сколько б времени сэкономили, если бы нам понадобилось изменить что-либо в его дизайне!?

  В этой главе мы рассмотрели три способа внедрения CSS в HTML документ. Какой же лучше использовать?

  • Используйте атрибут style для какого либо элемента если этот элемент с отличным от других элементов стилем один единственный на всём сайте.
  • Используйте тег