чилка HTML
 
Каскадные таблицы стилей (CSS)

Синтаксис CSS

1. Для CSS:
Селектор {имя_параметра1: значение; имя_параметра2: значение; . . . имя_параметраN: значение}

2. Для атрибута style:
style="имя_параметра1: значение; имя_параметра2: значение; . . . имя_параметраN: значение"

В качестве селектора используется:
  1) либо имя тэга (без уголков),
  2) либо значение его атрибута id, перед которым указывается символ #.
Пример 1:
<style>
     h1 {color: red; font-size: 24pt}
</style>

Пример 2:
для заголовка: <h1 id=myh1>ПРИВЕТ!<h1>
<style>
     #myh1 {color: red; font-size: 24pt}
</style>

Пример 3:
для нескольких элементов (тэгов) с одинаковыми параметрами селектор можно сгрупировать.
В этом случае тэги разделяются запятой.

<style>
    h5, p, b {color: green; font-style: italic;}
</style>
  <h5>Эта запись - результат Примера 3</h5>
  <b>Эта запись - результат Примера 3</b>
  <p>Эта запись - результат Примера 3</p>

Эта запись - результат Примера 3
Эта запись - результат Примера 3

Эта запись - результат Примера 3

 

Для одного и того же тэга можно задать разные стили, называемые КЛАССЫ
Имя класса можно использовать в тэге как значение атрибута class.
Пример 4:
<style>
   h1.курсив {font-style: italic}
   h1.подчеркнутый {text-decoration: underline}
</style>

<h1>Обычный заголовок</h1>
<h1 class=курсив>Заголовок курсивом</h1>
<h1 class=подчеркнутый>Заголовок подчеркнутый</h1>

 

Для создания стиля элемента вложенного в другой тэг используют контекстный селектор
Контекстный селектор состоит из имени тэга-контейнера и имени вложенного в него тэга, разделенных пробелом.
Пример 5:
p b {color: green; font-style: italic;}
<p>Эта запись - результат <b>Примера 3</b></p>
(Сравни с Прмером 3)
Здесь жирный текст будет отражаться зеленым курсивом, если только он применяется внутри абзаца.
Во всех остальных случаях содержимое тэга <b> будет просто жирным.

Эта запись - результат Примера 5

 

 

 

Copyright © Москва
Училка HTML: сайт  u4ilka.kcbux.ru