CSS_

1. Таблицы стилей

Курс «Верстка и
прототипирование сайтов»
Комарова
Елена Викторовна

2. CSS.Преимущества.

• централизованное управление отображением
множества документов при помощи одной таблицы
стилей;
• упрощенный контроль внешнего вида веб - страниц;
• наличие разработанных дизайнерских техник;
• возможность использования различных стилей для
одного документа, в зависимости от устройства, при
помощи которого осуществляется доступ к веб странице.
• Стандарт HTML 4.0 помимо CSS утвердил и
объектную модель браузера (Browser Object Model –
BOM)

3. Таблицы стилей

• Встроенный стиль
<p style="font-weight: bold; color: red;">
• Внутренний (in-line) стиль
<head>
<style> … </style>
• Внешняя таблица
<head>
<link rel="stylesheet" href="css/style.css">
• Импорт стилей
<style> @import url(mobile.css);

4. CSS. Цвет и фон.

• color, background-color;
• background-image;
• background-repeat :
• repeat-x , repeat-y, repeat, no-repeat.
• background-attachment: scroll , fixed
• background-position: left, center, right,
top, center, bottom

5. CSS. Размеры.

px, em, %, rem
vh, vw, vmin, vmax
.example
{ font-size: 20px;
border-radius: .5em;
padding: 2em; }
https://codepen.io/SitePoint/pen/BtJFn

6. Адаптивная верстка

• <meta name = "viewport" content =
"width=device-width, initial-scale = 1">

7. Медиазапросы

• aural, braille, handheld, print, projection,
screen, tty, tv

8. CSS. Контейнеры.

• height, min-height , max-height
• width, min-width, max-width
• auto, inherit, initial

9. CSS. Селекторы.

• селектор элемента
– p { … }, td { … }, h1 { … }
– <p>, <td>, <h1>
• селектор класса
– .class1 { … }
– <p class=“class1”>
• селектор идентификатора
– #one { … }
– <p id=“one”>
p.first a {color: green;}
• селекторы потомка
• дочерний селектор
p.first a {color: green;}
• селектор атрибута
a[href ="css.html"]

10. CSS. Гиперссылки

• псевдокласс
– <a href=“”>
– a: hover { … }
– a: link { … }
– a: active { … }
– a: visited { … }
• псевдоэлементы
– after
– before
– first-letter
– first-line

11. CSS. Псевдоклассы

• динамические псевдоклассы (выше)
• псевдоклассы пользовательского интерфейса
– :disabled
– :checked
• структурные псевдоклассы
– :root
– :nth-child()
• целевой псевдокласс :target
• языковой псевдокласс :lang()
• псевдокласс отрицания :not()

12. Переменные

:root {
--color-even: #c20a78;
--weight-even: bold;
}
color: var(--color-even);
font-weight: var(--weighteven);

13. CSS3

• фоновые изображения
• анимация
• псевдоселекторы
• трансформации
• оригинальные решения
• быстродействие
• обновление сайта

14. CSS3

• библиотека Modernizr (чуть позже)
• Префиксы разработчиков браузеров
o -moz- Firefox
o -webkit- Chrome и Safari
o -ms- Internet Explorer
o -o- Opera

15. CSS3

https://modernizr.com/download

16. CSS3. Атрибуты.

• border-radius
• transition
• transform
• box-shadow
• фильтры
– Blur
– Brightness
– Sepia
–. . .

17. CSS3. Эффекты.

18. CSS3. Рисование фигур.