CSS-стили. Основы работы с хостингом
Человек
CSS - Каскадные таблицы стилей (Cascading Style Sheets)
Что будет, если стили на сайте отключить?
Цели:
Как запоминать 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 - каскадные таблицы стилей (Cascading Style Sheets)

1. CSS-стили. Основы работы с хостингом

Занятие 2

2. Человек

Аналогия:

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

CSS - Каскадные таблицы стилей
(Cascading Style Sheets)
Делают сайты
такими, какими мы
привыкли их
видеть.
Красивыми

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

5.

6. Цели:

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

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

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

8. <element style = “property : value”></element>

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

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

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

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

<div style=“background-color: white; width: 400px; height:
400px; border: 2px solid yellow;”>
<h3 style=“font-family: Arial; font-size: 14px; fontweight: 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. Инлайновые стили: особенности

<div style=“background-color: white; width: 400px; height:
400px; border: 2px solid yellow;”>
<h3 style=“font-family: Arial; font-size: 14px; fontweight: 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. Инлайновые стили: особенности

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

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

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

14. <head> <style> p {color: black} div {font-size: 18px} </style> </head>

<head>
<style>
p {color: black}
div {font-size: 18px}
</style>
</head>
Способ #2
тег <style>

15. 2 способ: стили в теге <style>

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

16. 2 способ: стили в теге <style>

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

17. 2 способ: стили в теге <style>

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

18. 2 способ: стили в теге <style>

2 способ: стили в теге <style>
Занимают место на каждой странице
Действуют в пределах только одной страницы

19. <head> <link rel="stylesheet" type="text/css” href="styles.css"> </head>

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

20. 3 способ: стили по ссылке

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

21. 3 способ: стили по ссылке

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

22. 3 способ: стили по ссылке

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

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. 3 способ: стили по ссылке

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

25.

Подключится или нет?

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

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

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

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

28. Итоги:

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