Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Скачиваний:
64
Добавлен:
03.03.2016
Размер:
4.54 Mб
Скачать

Донецкий национальный технический университет Факультет компьютерных наук и технологий

Кафедра компьютерной инженерии

Лекция 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

Соседние файлы в папке Интернет технологии