CSS. Cascading Style Sheet

CSS

Cascading Style Sheet

CSS это правила как должен выглядеть HTML

Существуют три типа правил CSS 1. HTML селектор - текстовая часть HTML тэга. P селектор тэга <P> P { font: bold 12 pt times: } 2. Класс представляет собой свободное правило которое можно применить к любому тэгу. Классу можно дать любое имя. Он применим ко множеству тэгов и является самой гибкой разновидностью селектора. .myClass { font: bold 12pt times; } 3. Правила ID могут применяться также как и классы ко всем тэгам. Однако селекторы ID обычно применяются один раз к тэгу на странице для использования в функции JavaScript. #object1 { position : absolute; top: 10px; }

Selector { property : value ; }

Основной синтаксис CSS правила

Можно задавать стили конкретно для каждого тэга

<h1 style=”color: red ;”> Wonderland <h1>

Добавление CSS в HTML тэги

Добавление CSS на Web страницу

<style type=”text / css”> H1 { color: red; } …. </style>

<link rel=”stylesheet” href=”filename

css”>

Создание внешнего CSS файла

Импортирование внешнего CSS файла

<style type=”text/css> @import url (filename.css) body { background : white url (picture.gif) no-repeat; } </style>

Определение HTML селектора

p { color: red; font-size: 12px; line-height: 18px; font-family: verdana, arial; }

Определение классов для создания тэгов

.Copy { color: black; font-size: 12px; line-height: 18px; font-family: verdana, arial, helvetica; } …. …. <p class=”copy”> здесь будет текст </p>

Определение ID для идентификации объекта

#area { color: red; position: relative; margin-left: 9em; } …. …. <p id=”area”> <img src=”picture.jpg”> </p>

Определение тэгов с помощью одинаковых правил

h1,h2,p,.copy { font-size: 12px; color: red; font-size: 12px; line-height: 18px; font-family: verdana, arial, helvetica; }

Позиционирование

Статическое (static) Относительное (relative) Абсолютное (absolute) #object { position: relative top:125px; left: 12em; }

С помощью CSS можно управлять

Текстом Шрифтом Списками Цветами и фоном Рамками и полями Позиционированием Видимостью элемента и т.д.