Задание.

Способы

ü Вложение – прописывание в теге с помощью атрибута style

ü Встраивание – прописывание внутри тега Head с помощью элемента <style>

ü Связывание – размещение в отдельном файле style.css и прописывание внутри тега Head с помощью элемента <link> (<link rel="stylesheet" type="text/css" href="style.css">)

Селекторы

Селекторы тегов name{}

Селекторы идентификаторов #name{}

Селекторы классов.name{}

Правила

Цвет элемента color:#1250FF;

Гарнитура Шрифта font-family:font1, font2, type_font;
type_font – serif, sans-serif, monospace, cursive
“Times new roman”

Размер шрифта font-size:14px;
% (100%), em (единицы=1), px (пикселы=16),
pt (пункты (1/72 дюйма)=12), ключевые слова
(medium, large, small, xlarge, xsmall)

Курсив font-style:italic;

Полужирный font-weight:normal|bold (400, от 100 до 900)

Подчеркнутый text-decoration:underline|overline|line-through|none

Выравнивание text-align:left|center|right|justify

Красная строка text-indent:20px;
(можно в %, пикселях, единицах)

Межстрочный интервал line-height:normal; (px, множитель от тек.зн-ия, pt, em)

Интервал между словами word-spacing:12px; (пиксели)

Расстояние между буквами letter-spacing:2px;

Изменение регистра text-transform:uppercase|lowercase|capitalize|capitel;

Рамки border-width:2px;

Border-style:solid|dashed|dotted; - другие варианты

Border-color:#235687;

Border-top|bottom|left|right-……….

Сокращенный вариант

Списки list-style-type:none|circle; - другие варианты

List-style-image:url(путь); относит.путь../папка/../файл

List-style-position:inside; (маркер внутри элемента)

Сокращенный вариант

Фоновые цвета и изображения

Все блоки изначально прозрачные.

Background-color:#5621FF;

Фоновый цвет распространяется на содержимое и отступы. Рамка и внешние поля сами по себе, рамку раскрасить можно, поля – нет.

Outline:1px solid #456879; - контур для удобства верстки

background-image:url(путь относительно папки css)

Повторение фона.

background-repeat:no-repeat|repeat-x|repeat-y|repeat;

Задание.

1. Создать файл 1.html с предложенным текстом, имеющим заголовок и разбитым на абзацы. Написать файл 1.css, в котором использовать селекторы тегов (name{}) для всех абзацев и заголовка, селекторы идентификаторов (#name{}) для нечетных абзацев, селекторы классов (.name{}) для изменения свойств отдельных абзацев.

2. Связать файл 1.html с файлом 1.css.

3. Посмотреть результат в обозревателе Интернета.

4. Сохранить файлы на внешний носитель и принести на урок.

Структура:

В документе 1.html по форматированию только заливка фона страницы.

В 1.css все стили абзацев:

Заголовок – выравнивание по центру, первый символ каждого слова в предложении будет заглавным, текст 18 px, полужирный, межсимвольный интервал 12 px.

Текст с желтым фоном - рамка пунктир 3 px, выравнены по правому краю, текст 18 px.

Текст с голубым фоном – рамка красная сплошная 2 px, выравнивание текста по ширине.

Текст подчеркнутый – верхний регистр.

Дата добавления: 2015-07-24