Презентация - Подключение файла CSS и основы применения (информатика)


Подключение файла CSS и основы применения (информатика)Подключение файла CSS и основы применения (информатика)Подключение файла CSS и основы применения (информатика)Подключение файла CSS и основы применения (информатика)Подключение файла CSS и основы применения (информатика)Подключение файла CSS и основы применения (информатика)Подключение файла CSS и основы применения (информатика)Подключение файла CSS и основы применения (информатика)Подключение файла CSS и основы применения (информатика)Подключение файла CSS и основы применения (информатика)
На весь экран

Слайды и текст этой презентации

Слайд 1

Подключение файла CSS и основы применения
Правильное оформление веб-страниц

Слайд 2

Стили для всей страницы
Все стили сайта удобно подключать в отдельном файле. Один стилевой файл можно подключить ко множеству страниц Все стили редактируются в одном месте Для всех страниц файл загружается браузером всего один раз Уникальные стили для выборочных страниц можно подключать в отдельных файлах

Слайд 3

Подключение файла css
Файл стилей подключается внутри тега head rel="stylesheet" – это указывает что подключается таблица стилей type="text/css" – это указывает на тип подключаемого файла href="css/style.css" – это ссылка на путь к файлу стилей. В данном случае файл находится в папке css и называется style.css

Слайд 4

CSS селекторы. Основы
Для обращения к элементам HTML из файла CSS применяются специальные селекторы – способы определить конкретные элементы или группы элементов на странице

Слайд 5

CSS селекторы. Class
Данный селектор применяется для обозначения группы элементов и придания им общих свойств. В HTML:

параграф

В CSS: .element { стили; }

Слайд 6

CSS селекторы. ID
Данный селектор применяется для обозначения уникального элемента и придания ему уникальных свойств. Запрещено использовать для стилизации нескольких элементов. В HTML:

параграф

В CSS: #element { стили; }

Слайд 7

CSS свойства. Правила написания
.селектор { стиль; стиль; } Стили указывают внутри кудрявых скобок. Каждое стилевое правило заканчивают знаком «точка с запятой». Отступы и построчное размещение используют для удобства чтения кода.

Слайд 8

CSS свойства. Размеры блока
width: 100%; - одно из самых часто используемых свойств, для задания ширины элемента. Значения могут быть заданы в px, %, em (пикселях, процентах и относительных единицах). height: 400px; - аналогично width, только для задания высоты блока. Задавать можно только в px или em.

Слайд 9

CSS свойства. Стилизация текста
text-transform: uppercase; - свойство трансформирует буквы текста в прописные (ABC). Также можно указать значение capitalize, при котором каждая первая буква слов будет начинаться с заглавной буквы text-align: center; - свойство, которое выравнивает текст в блоке по центру. Также возможны значения выравнивания: по левому (left) или правому (right) краю и по ширине (по обоим краям) justify text-indent: 25px; - свойство создающее пробельный отступ в первой строке текста блока – красная строка text-decoration: underline; - добавляет оформление текста в виде его подчеркивания (underline), перечеркивания (line-through), линии над текстом (overline) и мигания (blink)

Слайд 10

CSS свойства. Стилизация шрифта
font-weight: bold; - насыщенность шрифт. Возможны значения: bold, bolder, lighter, normal, 100-900 (с шагов в 100) font-style: italic; - начертание шрифта — обычное, курсивное или наклонное (normal, italic, oblique) font-size: 15px; - размер шрифта. Указывается в пикселях, относительных единицах и процентах line-height: 1.5; - устанавливает интерлиньяж (межстрочный интервал) текста, отсчет ведется от базовой линии шрифта. Указывается в пикселях, относительных единицах и процентах font-family: Georgia, 'Times New Roman', serif; - семейство шрифтов. Можно указывать конкретное семейство или тип шрифта — serif, sans-serif, cursive, fantasy или monospace.