CSS - каскадные таблицы стилей (Cascading Style Sheets) презентация

Содержание

Слайд 2

Человек

Одежда

Сайт

CSS-стили

Аналогия:

Слайд 3

CSS - Каскадные таблицы стилей (Cascading Style Sheets)

Делают сайты такими, какими мы привыкли их видеть.
Красивыми

Слайд 4

Что будет, если стили на сайте отключить?

Встречайте, Medium

Слайд 5

Немного CSS-магии

Слайд 6

Цели:

Научиться подключать CSS-стили тремя способами
Узнать об особенностях каждого из них
Научиться выбирать оптимальный способ


Слайд 7

Как запоминать CSS-свойства:

Фоновый цвет => background-color
Цвет => color
Размер шрифта => font-size
Жирность шрифта =>

font-weight
Ширина => width
Высота => height
Граница => border

Слайд 8



Способ #1 Инлайновые стили

Слайд 9

1 способ: инлайновые стили

Задаются прямо у элемента в атрибуте style

: value”>


Если нужно задать более одного стиля, значения разделяются точкой с запятой


Слайд 10

Инлайновые стили: особенности


style=“font-family: Arial; font-size: 14px; font- weight: bold; text-decoration: underline; color: black;”>Свойства CSS


У CSS есть много полезных свойств



Слайд 11

Инлайновые стили: особенности


style=“font-family: Arial; font-size: 14px; font- weight: bold; text-decoration: underline; color: black;”>Свойства CSS


У CSS есть много полезных свойств



Что тут написано? Стилей БОЛЬШЕ, чем текста

Слайд 12

Инлайновые стили: особенности


Свойства CSS


У CSS есть много полезных свойств



Слайд 13

Инлайновые стили: особенности

Когда тегов много и стилей много, ухудшают читаемость кода
Можно

приписать непосредственно к элементу => имеют наибольший приоритет

Слайд 14


Способ #2 тег

Слайд 16

2 способ: стили в теге То есть все элементы div на странице будут иметь 18 размер шрифта

Слайд 17

2 способ: стили в теге