Презентация на тему: 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

2

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

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

3

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

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

4

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

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

5

Слайд 5

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

6

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

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

7

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

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

8

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

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

9

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

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

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>

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> Что тут написано? Стилей БОЛЬШЕ, чем текста

12

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

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

13

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

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

14

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

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

15

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

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

16

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

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

17

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

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

18

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

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

19

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

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

20

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

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

21

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

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

22

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

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

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 файл лежат в одной папке, то указываем только название, иначе указываем путь

24

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

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

25

Слайд 25

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

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">

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">

28

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

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

Похожие презентации

Ничего не найдено