Урок "Знакомство с каскадными таблицами стилей"; 10-11 класс
• HTML – основа WEB-страницы, ее каркас, т.е. ЧТО должно быть на странице.
Стиль – это указание браузеру как отображать тот или иной элемент, т.е. КАК страница должна выглядеть.
Всё, что находится внутри тега <body>, браузер будет отображать в соответствии с описанными стилями.
• Способы
- Вложение – прописывание в теге с помощью атрибута style
- Встраивание – прописывание внутри тега Head с помощью элемента <style>
- Связывание – размещение в отдельном файле style.css и прописывание внутри тега Head с помощью тега <link> (<link rel="stylesheet" type="text/css" href="style.css">)
• Основа – селектор (имя тега, имя идентификатора, имя класса) и правило (записывается в {}).
Правило состоит из свойств и их значений, разделенных «;», свойство и значение разделяются «:».
Селектор { свойство1:значение;
Свойство2:значение;
…………..
свойствоN:значение;
}
• Селекторы
Селекторы тегов name{ } позволяет назначить свойства всем тегам одного плана.
name – имя тега
Селекторы идентификаторов #name{ } id-селектор позволяет изменить свойства одного элемента
Самому элементу в html-документе надо дать имя id.
name – имя идентификатора
Селекторы классов .name{ } позволяет изменять свойства выбранной группы элементов
Элементам надо в html-документе дать имя класса.
name – имя класса
Групповые селекторы используются для задания одинаковых правил для разных элементов.
Записываются селекторы через запятую, могут быть использованы все виды селекторов.
• Задание
1. Дан файл index.html с текстом, имеющим заголовок и разбитым на абзацы.
2. Написать файл style.css, в котором использовать
a. селекторы тегов (name { }) для всех абзацев и заголовка – установка цвета текста,
b. селекторы идентификаторов (#name { }) для нечетных абзацев – установка пунктирной рамки толщиной в 3 пикселя выбранного цвета,
c. селекторы классов (.name { }) для изменения свойств второго абзаца – установка рамки с сокращенной записью.
3. Использовать правила для цвета текста и рамок.
4. Связать файл index.html с файлом style.css.
• Правила
Цвет элемента color:#1250FF;
Рамки (с 4 сторон) border-width:2px; - ширина рамки
border-style:solid|dashed|dotted| и др.;
- стиль рамки, solid – одинарная, dashed – пунктирная, dotted – в точечку, double – двойная, groove – с тенью наружу,
ridge – с тенью внутрь, inset – левая+верхняя, outset – правая+нижняя.
Border-color:#235687; - цвет рамки
Сторона рамки top|bottom|left|right – приставки (например: border-top-width:2px;)
top – верхняя, bottom – нижняя, left – левая, right – правая
Сокращенная запись – толщина стиль цвет. Пример: border: 2px solid #235687;
На странице приведен фрагмент.
Автор: Окулова Виктория Викторовна
→ овв 02.09.2012
 0
 3929
 580 |
Спасибо за Вашу оценку. Если хотите, чтобы Ваше имя
стало известно автору, войдите на сайт как пользователь
и нажмите Спасибо еще раз. Ваше имя появится на этой стрнице.
А вы знали?
Инструкции по ПК
