Веб-дизайн и интернет-программирование. Лекция № 4.

Веб-дизайн и интернет-программирование. Лекция № 4.
Веб-дизайн и интернет-программирование. Лекция № 4.

Механизмы CSS

Полезные ресурсы

  1. HTMLBOOK
  2. CSS
На страницу урока →

Правила CSS

Добавление стиля в HTML-документ

  1. inline-стиль 
    
<p style="font-size:150%; text-align:center; color:green;" > 
В этом тексте будут увеличенный размер шрифта, центрирование и зеленый цвет. </p>
  2. внедренный стиль;
  3. внешние таблицы стиля.

Добавление стиля в HTML-документ


<link rel="alternate stylesheet" title="compact" href="small-base.css" type="text/css" >
<link rel="alternate stylesheet" title="compact" href="small-extras.css" type="text/css"> 
<link rel="alternate stylesheet" title="big print" href="bigprint.css" type="text/css"> 
<link rel="stylesheet" href="common.css" type="text/css">
  <style type="text/css"> 
    p.special { 
      color: rgb(230, 100, 180); 
    } 
  </style>

  1. Какие таблицы стилей присутствуют?
  2. Если пользователь выбирает таблицу «compact», какие стили должен использовать браузер?

Селекторы

  1. Селектор типа


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


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


  4. Селектор класса


  5. Селектор ID


Селекторы


<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
  <style type="text/css"> 
    p.Bordered { border: solid 1px black; } 
    .Bordered.dashed {border-style: dashed; } 
    #grayBorder { border-color: gray; } 
  </style> ... </head> 
<body> 
  <p class="Bordered"> 
    Это абзац класса Bordered</p> 
  <p class="Bordered dashed"> 
    Это абзац классов Bordered и dashed</p> 
<p id="grayBorder" class="Bordered dashed"> 
    Это абзац классов Bordered и dashed, имеющий также id</p>
</body> </html>

Комбинаторы

  1. Потомки





  2. Соседи




ПРИМЕР

Специфичность и порядок применения правил

Задание

ДАН КОД

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

  1. непрямым потомкам секции со сплошной рамкой – зеленый цвет;
  2. прямым потомкам секции со сплошной рамкой – красный цвет;
  3. заголовку 2-го уровня, идущему сразу за заголовком 1 –го уровня – меньший отступ;
  4. заголовку в секции с точечной рамкой – размер шрифта 24 pt;
  5. элементам вложенного списка – курсивное начертание.

Опубликовано: 24.02.2015 г.