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

Вы можете встроить CSS-код непосредственно в элемент разметки в виде значения атрибута style . Этот атрибут доступен для всех элементов HTML. С помощью CSS можно указать ряд свойств стиля для данного HTML-элемента. Каждое свойство имеет имя и значение, разделенные двоеточием (:). Каждое объявленное свойство отделяется точкой с запятой (;).

Вот как это выглядит для элемента

Способы добавления CSS стилей

Стандарт CSS предлагает три варианта применения таблицы стилей к веб-странице:

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

  Пример: Внутренняя таблица стилей

  • Попробуй сам »

  Заголовок

  Текст первый

  Текст второй

  Текст третий

  Заголовок

  Текст первый

  Текст второй

  Текст третий

  В данном примере мы с помощью CSS установили цвет фона для элемента : background-color:palegreen , цвет и тип шрифта для заголовков

  : color: blue; font-family:verdana , а также размер шрифта, цвет и выравнивание текста по центру для параграфов

  : font-size:20px; color:red; text-align:center .

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

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

  Параграф

  Такие стили называют встроенными (inline), или внедренными. Правила, определенные непосредственно внутри открывающего тега элемента перекрывают правила, определенные во внешнем файле CSS, а также правила, определенные в элементе

  Заголовок

  Текст первый

  Текст второй

  Текст третий

  Задачи

  • Выравнивание текста по центру

    Используя встроенный стиль к параграфу выровняйте текст по центру.

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

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

  Стили располагаются в отдельном файле с расширением css, для связывания HTML-документа с CSS-файлом применяется элемент . Он располагается внутри , как показано в примере 1.

  Пример 1. Подключение внешних стилей

  Заголовок

  Значение атрибута rel у всегда будет stylesheet и остаётся неизменным. В качестве значения href указывается путь к CSS-файлу; путь может быть задан как относительно, так и абсолютно. Заметьте, что таким образом можно подключать таблицу стилей, которая находится на другом сайте. В примере выше мы подключаем кириллический шрифт Lobster с сайта Google Fonts.

  Содержимое файла style.css показано в примере 2.

  Пример 2. Содержимое файла style.css

  H1 { font-family: "Lobster", cursive; color: green; }

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

  Внутренняя таблица стилей

  Стили пишутся в самом HTML-документе внутри элемента

  Заголовок

  В данном примере задан стиль элемента

  , который затем можно повсеместно использовать на данной веб-странице (рис. 1). Обратите внимание, что мы можем спокойно комбинировать со

  Заголовок 1

  Заголовок 2

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

  Заголовок 1

  Заголовок 2

  В данном примере показан импорт стилевого файла с сайта Google Fonts для подключения кириллического шрифта Lobster.

  Когда браузер читает таблицу стилей, он форматирует документ в соответствии с ней.

  Три Способа Вставить CSS

  Существует три способа вставки таблицы стилей:

  • Внешняя таблица стилей
  • Внутренняя таблица стилей
  • Встроенный стиль

  Внешняя Таблица Стилей

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

  Не оставляйте пробелов между значением свойства и его единицами измерения! "margin-left:20 px" (вместо "margin-left:20px") будет работаеть в IE (браузере Internet Explorer), но не в браузерах Firefox или Opera.

  Внутренняя Таблица Стилей

  Внутренняя таблица стилей используется когда отдельный документ имеет уникальный стиль. Вы определяете внутренние стили в head-секции страницы 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 для какого либо элемента если этот элемент с отличным от других элементов стилем один единственный на всём сайте.
  • Используйте тег
    • 
      
      Как сделать автообновление страницы в яндекс браузере Автообновление в Opera
    • 
      
      Как сделать приложение или игру для андроид Способы и стоимость создания приложения
    • 
      
      Что делать, если вместо текста иероглифы (в Word, браузере или текстовом документе) Непонятные иероглифы вместо букв
    • 
      
      Часы пропеллер на pic16f628a своими руками
    • 
      
      Почему Не работает вентилятор на ноутбуке!