Интернет технологии / 2014_inet_lec_8
.pdfДонецкий национальный технический университет Факультет компьютерных наук и технологий
Кафедра компьютерной инженерии
Лекция 8. Использование CSS
Иваница Сергей Васильевич,
ассистент кафедры компьютерной инженерии ДонНТУ, 2014 г.
http://ki.donntu.edu.ua/~ivanitsa
1.Как мы усвоили предыдущую лекцию?
2.Базовый синтаксис CSS (особенности).
3.Виды селекторов CSS:
селекторы тегов;
классы;
идентификаторы;
дочерние селекторы;
соседние селекторы;
селекторы атрибутов.
4.Псевдоклассы CSS:
основные понятия;
псевдоклассы для составных элементов.
6.CSS: блочная модель:
общие понятия;
поля;
отступы;
рамка;
позиционирование;
абсолютное позиционирование;
многослойность;
относительное позиционирование.
8.Выравнивание и обтекание в CSS.
9.Литература для самостоятельного изучения CSS.
2
Курс «Интернет-технологии». Лекция 8. Использование CSS
1-е задание: К документу HTML одновременно подключено два файла — style1.css и style2.css. В style2.css первой строкой импортируется файл style3.css.
В файле style1.css цвет текста задается зеленым,
в style2.css — красным, а в style3.css — синим.
Какой цвет текста будет на странице?
1.Зеленый.
2.Красный.
3.Синий.
4.Черный.
5.Установленный в браузере по умолчанию.
2-е задание: В какой строке |
3-е задание: Какая |
||
содержится ошибка? |
строка корректная? |
||
1. |
p { text-align: center; color: #000000 } |
1. |
body:color=black |
2. |
div { color: red; font-size: 11pt; } |
2. |
body{ color:black } |
3. title { color: #fc0; margin: 10px; } |
3. |
{ body;color:black } |
|
4. |
p { color: green; color; } |
4. |
{ body:color=black } |
5. |
html { float: left; } |
5. |
body { color=black; } |
3
Курс «Интернет-технологии». Лекция 8. Использование CSS
1-е задание: К документу HTML одновременно подключено два файла — style1.css и style2.css. В style2.css первой строкой импортируется файл style3.css.
В файле style1.css цвет текста задается зеленым,
в style2.css — красным, а в style3.css — синим.
Какой цвет текста будет на странице?
1.Зеленый.
2.Красный.
3.Синий.
4.Черный.
5.Установленный в браузере по умолчанию.
2-е задание: В какой строке |
3-е задание: Какая |
||
содержится ошибка? |
строка корректная? |
||
1. |
p { text-align: center; color: #000000 } |
1. |
body:color=black |
2. |
div { color: red; font-size: 11pt; } |
2. |
body{ color:black } |
3. |
title { color: #fc0; margin: 10px; } |
3. |
{ body;color:black } |
4. |
p { color: green; color; } |
4. |
{ body:color=black } |
5. |
html { float: left; } |
5. |
body { color=black; } |
4
Курс «Интернет-технологии». Лекция 8. Использование CSS
CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от желания разработчика.
Формы записи: Расширенная |
Компактная |
Разные значения |
|
у одного свойства |
С комментариями |
5 |
применяется |
нижнее свойство |
Курс «Интернет-технологии». Лекция 8. Использование CSS
В качестве селектора может выступать любой тег HTML, для которого определяются правила форматирования, такие как: цвет, фон, размер и т. д.
Тег { свойство1: значение [; свойство2: значение; …] }
6
Курс «Интернет-технологии». Лекция 8. Использование CSS
Классы применяются, когда необходимо определить стиль для конкретного элемента веб-страницы или задать разные стили для одного тега:
Тег.Имя_класса { свойство1: значение [; свойство2: значение; …] }
имена классов |
Чтобы указать в коде HTML, что тег используется |
|
должны начинаться с |
с определенным классом, к тегу добавляется атрибут |
|
латинского символа и |
class = "Имя_класса" |
|
могут содержать в |
||
сss |
||
себе символ дефиса и |
||
|
||
подчеркивания |
|
html
7
Курс «Интернет-технологии». Лекция 8. Использование CSS
Можно, также, использовать классы и без указания тега:
.Имя_класса { свойство1: значение [; свойство2: значение; …] }
При такой записи класс можно применять к любому тегу.
к любому тегу одновременно можно добавить несколько классов, перечисляя их
в атрибуте class через пробел.
сss
html
8
Курс «Интернет-технологии». Лекция 8. Использование CSS
Классы удобно использовать, когда нужно применить стиль к разным элементам веб-страницы: ячейкам таблицы, ссылкам, абзацам и др.
9
Курс «Интернет-технологии». Лекция 8. Использование CSS
Идентификатор (ID селектор) определяет уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты.
#Имя_идентификатора { свойство1: значение [; свойство2: значение; …] }
В отличие от классов идентификаторы должны быть уникальны, т. е. встречаться в коде документа только один раз.
Обращение к идентификатору происходит аналогично классам, но в качестве ключевого слова у тега используется атрибут id = "Имя_идентификатора"
сss
html
10
Курс «Интернет-технологии». Лекция 8. Использование CSS