Что такое CSS - презентация, доклад, проект скачать

Нажмите для полного просмотра!

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему Что такое CSS. Доклад-сообщение содержит 64 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

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

Слайд 1

Описание слайда:

CSS CSS Занятие 1

Слайд 2

Описание слайда:

HTML + CSS HTML + CSS = Веб-страница HTML отвечает за структуру и содержание CSS отвечает за внешний вид

Слайд 3

Описание слайда:

HTML

Слайд 4

Описание слайда:

Что такое CSS? Cascading Style Sheets - каскадные таблицы стилей CSS - язык, который используется для оформления внешнего вида HTML-документов

Слайд 5

Описание слайда:

CSS-правило Стили страницы формируются с помощью списка CSS-правил

Слайд 6

Описание слайда:

Селекторы

Слайд 7

Описание слайда:

Виды селекторов - различные варианты обращения к элементу

Слайд 8

Описание слайда:

Селектор тега

Слайд 9

Описание слайда:

Селектор класса

Слайд 10

Описание слайда:

Контекстные(вложенные) селекторы

Слайд 11

Описание слайда:

Соседние селекторы <ul class="parent"> <li class="item first">1 этаж</li> <li class="item">2 этаж</li> <li class="item">3 этаж</li> <li class="item">4 этаж</li> </ul> .first + .item {…} - расположены рядом .parent .first + .item {…} - вложенный и соседний

Слайд 12

Описание слайда:

Селекторы по родственным связям Потомки: html p {…}, body p Дочерние (ближайшие потомки): div > p, body > div > p (удобно использовать с многоуровневыми списками)

Слайд 13

Описание слайда:

Псевдоклассы

Слайд 14

Описание слайда:

Псевдоклассы для ссылок a:link { ... } - не посещенные ссылки a:visited { ... } - посещенные ссылки a:hover { ... } - ссылки на которые наведен курсор a:active { ... } - активная ссылка(кнопка мыши зажата на ссылке)

Слайд 15

$<a class="article-link" id="main-link" target=«_blank»> <li class="article-item">селекторы</li> </a> По классу: .article-link {...} По имени тега: a {...} По идентификатору: #main-link {…} По любому атрибуту: [target="_blank"] {...} или [class="article-link"] {…} (чаще всего используются в формах) Селекторы можно комбинировать, уточняя выбор a.article-link {...} .article-link .article-item {…} - контекстные/вложенные$

Описание слайда:

<a class="article-link" id="main-link" target=«_blank»> <li class="article-item">селекторы</li> </a> По классу: .article-link {...} По имени тега: a {...} По идентификатору: #main-link {…} По любому атрибуту: [target="_blank"] {...} или [class="article-link"] {…} (чаще всего используются в формах) Селекторы можно комбинировать, уточняя выбор a.article-link {...} .article-link .article-item {…} - контекстные/вложенные

Слайд 16

Описание слайда:

Итого HTML+CSS = web-страница HTML = структуру и содержание CSS = внешний вид CSS формируется списком CSS-правил Селекторы - используем для поиска элементов и применения к ним стилей

Слайд 17

Описание слайда:

Загадка?

Слайд 18

Описание слайда:

Каскадность

Слайд 19

Описание слайда:

Каскадность Каскадность - к одному элементу могут применяться несколько css-правил (свойств) Конфликты свойств Правила для разрешения конфликтов: Специфичность Наследование Порядок следования стилей

Слайд 20

Описание слайда:

Специфичность Чем меньше количество элементов попадает под данный селектор, тем он специфичней

Слайд 21

Описание слайда:

Наследование Наследование - механизм, с помощью которого значения свойств элемента-родителя передаются его элементам-потомкам

Слайд 22

Описание слайда:

Наследуемые стили Наследуются - параметры отображения текста (размер шрифта, тип шрифта, цвет и т.д.) font-size, font-family, font-style, font-weight, color… Например: стили шрифта для всего документа задаем в body {…} https://www.w3.org/TR/CSS21/propidx.html

Слайд 23

Описание слайда:

Не все стили наследуются

Слайд 24

Описание слайда:

Не наследуются Не наследуются - размеры, отступы, фоны, рамки - background, border, padding, margin, width, height…

Слайд 25

Описание слайда:

Способы подключения CSS <style>…</style> <link rel="stylesheet" href="style.css"/> <tag style="color:red;"> …. </tag>

Слайд 26

Описание слайда:

Что в итоге? Каскадность, наследование, специфичность Способы подключения CSS

Слайд 27

Описание слайда:

Слайд 28

Описание слайда:

Блочная модель документа

Слайд 29

Описание слайда:

Блочные и строчные HTML страница состоит из вложенных друг в друга прямоугольников Блочные элементы Строчные элементы

Слайд 30

Описание слайда:

Блочные элементы Всегда имеют форму прямоугольника По умолчанию тянется на всю ширину родителя Высота зависит от содержимого Блоку можно задавать размеры и отступы До и после блочного элемента есть перенос строки К блочным элементам относятся такие теги как: <div>, <p>, <h1>, <h2>, <ul>

Слайд 31

Описание слайда:

Размеры блока width: 50%; - ширина содержимого блока height: 200px; - высота содержимого блока

Слайд 32

Описание слайда:

border: 2px solid red;

Слайд 33

Описание слайда:

padding: 10px;

Слайд 34

Описание слайда:

margin: 10px;

Слайд 35

Описание слайда:

Загадка Схлопывание внешних отступов

Слайд 36

Описание слайда:

Блочные элементы width - ширина блока height - высота блока border - рамка padding - отступ от границы блока до содержимого margin - отступ между границами блока и его родителем и соседям

Слайд 37

Описание слайда:

Инлайновые элементы

Слайд 38

Описание слайда:

Инлайновые элементы Инлайновые = строчные Высота и ширина зависят от содержимого Следуя друг за дружкой, инлайновые элементы будут идти в одной строке, не вызывая переноса Можно задавать только горизонтальные отступы К строчным элементам относятся такие теги как: <a>, <strong>, <em>, <span>

Слайд 39

Описание слайда:

Блочно-строчные элементы

Слайд 40

Описание слайда:

Блочно-строчные элементы Имеют форму прямоугольника Размеры определяются содержимым Размеры можно менять (width, height) Рисуются в той точке, в которой закончилась отрисовка предыдущего элемента, и не вызывает переноса за собой

Слайд 41

Описание слайда:

Итого Блочная модель документа display: block; display: inline; display: inline-block;

Слайд 42

Описание слайда:

Полный размер блока width - задает ширину содержимого Общая ширина блока = width + 2 * border + 2 * padding margin не действует ни на общую ширину, ни на ширину содержания

Слайд 43

Описание слайда:

box-sizing: border-box

Слайд 44

Описание слайда:

Итого Таким образом, итоговое значение ширины и высоты элемента отличается от значений, задаваемых в width и height Мы можем влиять на это поведение через свойство box-sizing

Слайд 45

Описание слайда:

Оформление текста

Слайд 46

Описание слайда:

Абсолютные: 16px (пиксели) Абсолютные: 16px (пиксели) Относительные: 0.5em, 75% (относительно размера шрифта родителя), rem - относительно размера шрифта в <html> 1em = длине буквы М в данном шрифте Словами large, small, medium, larger, smaller

Слайд 47

Описание слайда:

font-family Определяет шрифт и/или семейство шрифтов Выглядит так: font-family: "Times New Roman"; font-family: 'Cuprum', ‘Aria', sans-serif; Перечисляются шрифты с самого желанного и далее в сторону деградации - в таком порядке их считывает браузер. Последним указывают тип шрифта, как самый запасной вариант

Слайд 48

Описание слайда:

font-family: 'Open Sans', Helvetica, sans-serif

Слайд 49

Описание слайда:

Оформление текста font-size font-family line-height font-weight font-style color

Слайд 50

Описание слайда:

line-height Межстрочный интервал/высота строки line-height: 3.5; - множитель line-height: normal; - автоматический расчет line-height: 150%; line-height: 2em;

Слайд 51

Описание слайда:

Прочее font-weight - насыщенность (жирность) шрифта: bold/normal/bolder/lighter font-style - начертание: normal / italic color: #ab12ff

Слайд 52

Описание слайда:

Еще свойства для текста: text-transform - регистр text-decoration - подчеркивание/перечеркивание text-shadow - тень white-space - управляет пробелами text-align - выравнивание по горизонтали vertical-align - выравнивание по вертикали

Слайд 53

Описание слайда:

Подведем итог.

Слайд 54

Описание слайда:

Спасибо за внимание!

Слайд 55

Описание слайда:

Слайд 56

Описание слайда:

Слайд 57

Описание слайда:

Дополнение

Слайд 58

Описание слайда:

Значения

Слайд 59

Описание слайда:

css-правило

Слайд 60

Описание слайда:

Какие бывают значения? Абсолютные - твердые .adv-text { font-size: 18px; } Относительные - зависят от других значений. Для разных типов элементов правила вычисления % различны. .adv-text-container { width: 65%; height: 100vh; } При отрисовке страницы все относительные значения становятся абсолютными

Слайд 61

Описание слайда:

Размеры Пиксели 20px em - 3em; - значение в пикселях вычисляется от размера шрифта родителя rem - значение в пикселях вычисляется от размера шрифта корневого элемента (тега html) % - как правило, значение вычисляется от аналогичного значения родителя - но бывает иначе vh, vw - от размеров области просмотра (viewport)