 |
Упражнение № 1. Оформление тегов
|
|
|
|
Практическая работа № 1
Тема: «Каскадные таблицы стилей. Понятие и виды стилей CSS. Способы подключения CSS к HTML-документу. Селекторы CSS. Виды селекторов. Форматирование web-страниц с использованием таблиц стилей, встроенных в HTML-элемент»
Цель: Ознакомиться с видами и способами применения таблиц стилей. Изучить и практически овладеть основами форматирования web-страниц с использованием таблиц стилей, встроенных в HTML-элемент.
Время выполнения: шесть академических часов.
Форма занятия: практическая работа.
Технология работы
Материал
Ознакомьтесь с материалом, необходимым для выполнения работы:
Понятие и назначение CSS
CSS (Cascading Style Sheets - Каскадные таблицы стилей) – технология, позволяющая отделить параметры внешнего вида веб-документа от массива дескрипторов (тегов и атрибутов), определяющих его структуру. CSS может изменить оформление веб-страниц, не затрагивая их логическую структуру и информационное содержание.
Основным понятием CSS является стиль – т.е. набор правил оформления и форматирования, который может быть применен к различным элементам HTML-документа.
Синтаксис записи CSS-правила:
Селектор {свойство1: значение; свойство2: значение; …}
Виды CSS-селекторов
1. HTML-селекторы (Selectors) – селектор типа (тега)
Любой элемент HTML может иметь CSS-селектор. Самый простой селектор – просто имя элемента. После селектора располагаются фигурные скобки, содержащие набор CSS-свойств с присвоенными значениями. Селектор определяет стиль элемента, для которого он создан.
Пример:
H3 {font-family:Arial; font-size:18px; color:red;}
Все элементы H3 будут красного цвета, размером 18px, шрифт Arial
2. Селекторы класса (Class Selectors)
Классы применяют, когда необходимо определить стиль для индивидуального элемента или задать разные стили для одного тега. Для определения селектора класса используется обозначение.имя класса
|
|
|
При совместном использовании с тегами синтаксис для классов будет следующий:
Тег.имя класса {свойство1: значение; свойство2: значение; …}
Классы могут быть описаны без привязывания их к определенным элементам.
Примеры:
.red {color:red;}
Любые элементы с указанным атрибутом class=“red” станут красными.
H3.red {color:red;}
Все элементы H3 с атрибутом class=“red” станут красными.
3. ID-селекторы (ID Selectors) - идентификатор
Идентификатор (называемый также «ID-селектор») определяет уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты, что позволяет управлять стилем элемента динамически. Для определения ID-селектора используется обозначение # имя идентификатора.
Синтаксис использования идентификатора:
# имя идентификатора {свойство1: значение; свойство2: значение; …}
Например, был создан класс red для передачи красного цвета, но понадобился текст с курсивом.
Надо определить ID, например “reditalic”.
| Описание стилей |
#reditalic {font-style: italic}
<body>
| Html-код |
<p class="red" id="reditalic"> текст - курсив красного цвета
</p>
</body>
Комбинация селекторов
1. Группировка. Несколько тегов через запятую – тогда стиль применится для всех перечисленных тегов.
Пример: H1, H2, H3, H4, H5, H6 {color: red} /* делаем все заголовки красными */
2. Наследование. Несколько тегов через пробел:
TABLE A {font-size: 120%} /* Правило относится ко всем тегам A, вложенным в тег TABLE. Размер шрифта увеличится на 20% от базового*/
3. Другие комбинации. Можно комбинировать селекторы тега, класса, идентификатора с группировкой и наслодованием.
Пример:
.hotdog p {background: brown;} /* Только элементы абзаца, которые находятся внутри элемента с классом hotdog.*/
|
|
|
.hotdog p.mustard {background: yellow;} /* будут выбраны только абзацы с классом mustard, которые находятся внутри элемента с классом hotdog*/
Каскад
В CSS все стили идут каскадом сверху вниз, что позволяет добавлять другой стиль или переписывать его, тем самым таблицы стилей развиваются.
Пример.
p {
background: orange;
font-size: 24px;
}
p {
background: green;
}
Так как селектор абзаца, который устанавливает зелёный цвет фона располагается после селектора абзаца, который задаёт оранжевый цвет фона, он будет иметь приоритет в каскаде. Все абзацы появятся на зелёном фоне. Размер шрифта останется 24 пикселя, потому что второй селектор абзаца не определил новый размер шрифта.
Каскад работает со свойствами внутри отдельных селекторов.
p {
background: green;
background: orange;
}
Поскольку объявление оранжевого цвета фона написано после объявления зелёного цвета фона, наши абзацы будут отображаться на оранжевом фоне.
Но каскадность работает не всегда. На ее работу влияет специфичность селекторов.
Псевдоклассы
Псевдокласс:
определяет конкретное состояние элемента;
это ключевое слово, которое начинается с двоеточия.
Встречались с псевдоклассами, когда оформляли различное состояние ссылок.
a:link {color:black;}
a:visited {color:black;}
a:hover {color:green;}
a:active {color:yellow;}
Еще примеры псевдоклассов:
First-line – применяется к первой линии текста в элементе и только к блочным элементам
First-letter – применяется к первой букве в элементе и только к блочным элементам
:first-child применяет стилевое оформление к первому дочернему элементу своего родителя.
:last-child применяет стилевое оформление к последнему дочернему элементу своего родителя.
Подробнее о псевдоклассах в практической работе №2.
1.6. Методы определения таблицы стилей в документе HTML:
1) Связывание (linking) - внешние таблицы стилей
2) Вложение (embeding) - информация о стиле в заголовке: тег <style>
3) Встраивание (inline) - атрибут style
4) Импорт (import) - IE
1. Связанные (внешние) таблицы стилей
Стили хранятся в отдельном файле с расширением.css и привязываются к Веб-странице с помощью тега <link> в головной части <head> html-кода. Создается CSS файл в любом текстовом редакторе (например, Блокнот), с расширением текстового файла css.
Пример подключения внешней таблицы стилей:
|
|
|
| <html> <head> <title>Example</title> <link rel="stylesheet" type="text/css" href="style/style.css" /> </head> <body> <p>This is a red page</p> </body> </html> |
| Путь к css-файлу файла |
Основное преимущество внешних таблиц стилей - один стиль может использоваться сразу в нескольких документах HTML.
Во внешних файлах нужно хранить стили, общие для всего сайта, они влияют сразу на множество тегов во множестве документов. Это очень удобно, если сайт содержит много страниц. Например, мы хотим поменять на всех страницах сайта цвет фона и размер шрифта. Если все страницы подключают один и тот же внешний стиль CSS, достаточно в нем задать новый цвет фона и размер шрифта. Иначе придется редактировать каждую страницу отдельно. Если на сайте несколько десятков или сотен страниц это становится очень трудоемкой задачей.
2. Вложенные (глобальные, применяющиеся к странице) стили
Применяются ко всему документу, записываются внутри тега <style>…</style >, который вкладывается в тег <head>…</head> в документе HTML.
Такой способ указания стилей используется, когда нужно применить
одинаковые стили сразу к множеству HTML-элементов (тегов) в одном
документе.
| <html> <head> <title>Example</title> <style type=“text/css”> p { color: #FF0000; } </style> </head> <body> <p>This is a red page</p> </body> </html> |
3. Встроенные (внутренние) стили
Используются, когда нужно указать стили конкретного единственного элемента. Внутренний стиль записывается в атрибуте style и применяется только к содержимому этого тега.
Пример: <div style="text-indent:40pt">
1.7. Внутренний стиль имеет более высокий приоритет, чем внешние стили и стиль уровня документа. Предпочтительно не использовать такой способ задания стиля, т.к. он не отвечает принципу разделения содержания и оформления.
Порядок применения стилей
Стиль, определенный в глобальной таблице стилей, имеет приоритет перед стилем из внешней таблицы. Аналогично, внутренний стиль, помещенный внутрь тега, имеет приоритет перед глобальным и внешним CSS.
|
|
|
| <link rel="stylesheet" type="text/css" href="style.css"> <style> div{color:green} </style> ... <p>Применен связанный стиль <div>Применен вложенный стиль</div> <p style="color:blue">Применен встроенный стиль |
| p{color:red} div{color:red} |
Размеры
Размеры в CSS можно задавать в различных единицах измерения:
em – текущая высота шрифта
pt – пункты (типографская единица измерения шрифта)
px – пиксель
% – процент
Гораздо реже используется указание размеров в миллиметрах (mm), сантиметрах (cm) и дюймах (in).
Единица измерения записывается сразу за значением без пробела: TABLE {font-size: 12pt}
Шрифты
Шрифт – набор начертаний букв и знаков.
Типы шрифтов:
serif – шрифты с засечками (антиквенные), например: Times New Roman, Georgia.
sans-serif – рубленные шрифты (шрифты без засечек или гротески), типичные представители – Arial, Impact, Tahoma, Verdana;
cursive – курсивные шрифты: Comic Sans MS;
fantasy – декоративные шрифты, например: Curlz MT.
monospace – моноширинные шрифты, ширина каждого символа одинакова. Примеры: Courier New, Lucida Console.
Засечками называют элементы на концах штрихов букв.
Сравним букву шрифта Times New Roman и букву шрифта Arial.
М М
Использование шрифтов с засечками облегчает чтение текста с бумаги, поэтому такие шрифты обычно используют для набора основного текста в книгах. Для web-сайтов основной текст чаще набирают шрифтом без засечек: Arial, Tahoma, Trebuchet MS, Verdana.
В таблице приведены основные свойства шрифта:
В таблице ниже приведены основные свойства текста:
Упражнения
Выполните следующие упражнения:
Упражнение № 1. Оформление тегов
Создайте html файл и сохраните его под именем css1_1.html.
Добавьте в него заголовок первого уровня (h1), два параграфа (p) и изображение (img).
Выделите несколько слов курсивным начертанием.
Добавьте на страницу следующие стили:
h1 { color:#990000; /* Задание цвета шрифта */
font-size:20px; /* Задание размера шрифта */
font-family: Verdana, Arial, Helvetica, Geneva, sans-serif; /* Задание гарнитуры шрифта */ }
p { color: #666666; /* Задание цвета шрифта */
font-size:12px; /* Задание размера шрифта */
line-height: 22px; /* Задание интерлиньяжа */
font-family: Verdana, Arial, Helvetica, Geneva, sans-serif; /* Задание гарнитуры шрифта */ }
i { font-weight: bold; /* Задание полужирного начертания */ }
img { float:right; /* Задание выравнивания с права */ }
Просмотрите страницу в браузере. Она может выглядеть так:
Сделайте выводы об определении вложенных (глобальных) стилей для тегов.
|
|
|
