Презентация на тему: CSS- стили. Основы работы с хостингом

Реклама. Продолжение ниже
CSS- стили. Основы работы с хостингом
Человек
CSS - Каскадные таблицы стилей ( C ascading  S tyle  S heets)
Что будет, если стили на сайте отключить?
CSS- стили. Основы работы с хостингом
Цели:
Как запоминать CSS- свойства:
<element style = “ property : value ” ></element>
1 способ: инлайновые стили
Инлайновые стили: особенности
Инлайновые стили: особенности
Инлайновые стили: особенности
Инлайновые стили: особенности
<head> <style> p {color: black} div {font-size: 18px} </style> </head>
2 способ: стили в теге <style>
2 способ: стили в теге <style>
2 способ: стили в теге <style>
2 способ: стили в теге <style>
<head> <link rel="stylesheet" type="text/css” href="styles.css"> </head>
3 способ: стили по ссылке
3 способ: стили по ссылке
3 способ: стили по ссылке
3 способ: стили по ссылке
3 способ: стили по ссылке
CSS- стили. Основы работы с хостингом
Стили по ссылке : Подключится или нет?
Стили по ссылке : Подключится или нет?
Итоги:
1/28
Средняя оценка: 4.4/5 (всего оценок: 84)
Код скопирован в буфер обмена
Скачать (42853 Кб)
Реклама. Продолжение ниже
1

Первый слайд презентации: CSS- стили. Основы работы с хостингом

Занятие 2

Изображение слайда
Изображение для работы со слайдом
1/2
2

Слайд 2: Человек

Одежда Сайт CSS- стили Аналогия:

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
Изображение для работы со слайдом
1/4
3

Слайд 3: CSS - Каскадные таблицы стилей ( C ascading  S tyle  S heets)

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

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
1/3
4

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

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

Изображение слайда
1/1
5

Слайд 5

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

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
Изображение для работы со слайдом
Изображение для работы со слайдом
Изображение для работы со слайдом
Изображение для работы со слайдом
Изображение для работы со слайдом
1/8
6

Слайд 6: Цели:

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

Изображение слайда
Изображение для работы со слайдом
1/2
7

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

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

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
Изображение для работы со слайдом
1/4
Реклама. Продолжение ниже
8

Слайд 8: <element style = “ property : value ” ></element>

<p style = “ color : red ” ></p> Способ #1 Инлайновые стили

Изображение слайда
1/1
9

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

Задаются прямо у элемента в атрибуте style <element style = “ property : value ” ></element> <p style = “ color : red ” ></p> Если нужно задать более одного стиля, значения разделяются точкой с запятой <p style = “ color : red ; background-color: yellow ” ></p>

Изображение слайда
1/1
10

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

<div style=“ background-color: white; width: 400px; height: 400px; border: 2px solid yellow; ”> <h3 style=“ font-family: Arial; font-size: 14px; font- weight: bold; text-decoration: underline; color: black; ”> Свойства CSS</h3> <p style=“ color: black; font-weight: normal; font-size: 12px; text-decoration: none; font-family: Arial; ”> У CSS есть много полезных свойств </p> </div>

Изображение слайда
1/1
11

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

<div style=“ background-color: white; width: 400px; height: 400px; border: 2px solid yellow; ”> <h3 style=“ font-family: Arial; font-size: 14px; font- weight: bold; text-decoration: underline; color: black; ”> Свойства CSS</h3> <p style=“ color: black; font-weight: normal; font-size: 12px; text-decoration: none; font-family: Arial; ”> У CSS есть много полезных свойств </p> </div> Что тут написано? Стилей БОЛЬШЕ, чем текста

Изображение слайда
Изображение для работы со слайдом
1/2
12

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

<div> <h3> Свойства CSS</h3> <p> У CSS есть много полезных свойств </p> </div>

Изображение слайда
Изображение для работы со слайдом
1/2
13

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

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

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
1/3
14

Слайд 14: <head> <style> p {color: black} div {font-size: 18px} </style> </head>

Способ # 2 тег <style>

Изображение слайда
1/1
Реклама. Продолжение ниже
15

Слайд 15: 2 способ: стили в теге <style>

Задаются один раз на каждой странице в <head></head> <head> <style> p {color: black} div {font-size: 18px} </style> </head>

Изображение слайда
1/1
16

Слайд 16: 2 способ: стили в теге <style>

Применяются ко всем элементам на странице. <head> <style> p {color: black} div {font-size: 18px} </style> </head> То есть все элементы div на странице будут иметь 18 размер шрифта

Изображение слайда
1/1
17

Слайд 17: 2 способ: стили в теге <style>

Имеют меньший приоритет, чем инлайновые стили. То есть, если задать всем div на странице 18 размер шрифта, а одному элементу задать другое значение: <div style=“ font-size: 20px ” > То сработает инлайновый стиль, потому что он к элементу ближе

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
1/3
18

Слайд 18: 2 способ: стили в теге <style>

Занимают место на каждой странице Действуют в пределах только одной страницы А если сайт многостраничный, то одинаковые стили копировать?

Изображение слайда
Изображение для работы со слайдом
1/2
19

Слайд 19: <head> <link rel="stylesheet" type="text/css” href="styles.css"> </head>

Способ # 3 стили по ссылке p {color: black} div {font-size: 18px} styles.css

Изображение слайда
1/1
20

Слайд 20: 3 способ: стили по ссылке

Подключаются на каждой странице <head> <link rel="stylesheet" type="text/css” href="styles.css"> </head>

Изображение слайда
1/1
21

Слайд 21: 3 способ: стили по ссылке

У ссылки <link> есть следующие обязательные атрибуты То есть, при подключении надо указывать все три <link rel="stylesheet" type="text/css” href="styles.css"> Атрибут rel => "relation". Мы подключаем стили

Изображение слайда
Изображение для работы со слайдом
1/2
22

Слайд 22: 3 способ: стили по ссылке

<link rel="stylesheet" type="text/css” href="styles.css"> Атрибут type => " тип ". Мы подключаем CSS файл

Изображение слайда
Изображение для работы со слайдом
1/2
23

Слайд 23: 3 способ: стили по ссылке

<link rel="stylesheet" type="text/css” href="styles.css" > <link rel="stylesheet" type="text/css” href=" путь/до/ styles.css" > Атрибут href => " путь от HTML- файла до файла со стилями " Если HTML и CSS файл лежат в одной папке, то указываем только название, иначе указываем путь

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
1/3
24

Слайд 24: 3 способ: стили по ссылке

<link rel="stylesheet" type="text/css” href="styles.css" > У файла со стилями обязательно должно быть расширение CSS Название может быть любым, но большинство разработчиков используют именно styles.css, чтобы было понятно, что мы подключаем стили

Изображение слайда
Изображение для работы со слайдом
1/2
25

Слайд 25

Стили по ссылке : практика Подключится или нет?

Изображение слайда
1/1
26

Слайд 26: Стили по ссылке : Подключится или нет?

<link rel="stylesheet" type="text/css” href=” banana.css "> <body> <link rel="stylesheet" type="text/css” href="styles.css"> </body> <link rel="styleshit" type="text/css” href="styles.css">

Изображение слайда
1/1
27

Слайд 27: Стили по ссылке : Подключится или нет?

<link rel="stylesheet" type="text/css” href=" banana.css "> <body> <link rel="stylesheet" type="text/css” href="styles.css"> </body> <link rel="styleshit" type="text/css” href="styles.css">

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
1/3
28

Последний слайд презентации: CSS- стили. Основы работы с хостингом: Итоги:

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

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
1/3
Реклама. Продолжение ниже