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

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

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

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

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

41.85M

Categories:

internet

programming

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. Инлайновые стили: особенности

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

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

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

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 Русский Rules