Основы CSS
Рыбалка Екатерина
CSS (каскадные таблицы стилей) - это язык, отвечающий за внешний вид документа, описанного с помощью языка разметки
<table background="images/awesome-background.gif" border="0" width="300" height="446">
<tr>
<td>
</td>
...
</tr>
<tr>
<td collspan="4">
Разнообразный и богатый опыт начало повседневной
работы по формированию позиции требуют от нас анализа направлений
развития. Постоянный рост и сфера активности влечет за собой
процесс внедрения и модернизации систем массового участия.
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>CSS: Причины появления
- избыточность HTML
- мало возможностей HTML для визуального оформления
- сложность оформления HTML
- много копипасты
- смесь контента и визуальной состовляющей страницы
<img
src="images/super-icon.gif"
alt="Super Icon"
title="Super Icon"
>
<p>
Разнообразный и богатый
опыт начало повседневной
работы по формированию
позиции требуют от нас
анализа направлений развития.
Постоянный рост и сфера
активности влечет за собой
процесс внедрения и
модернизации систем
массового участия.
</p>
<div class="marquee red">Бегущая строка</div>img {
display: inline-block;
margin: 20px auto;
}
p {
font: 12px/14px 'Comic Sans MS', serif;
}
.marquee {
padding-left: -100%;
overflow: hidden;
animation: scroll 5s infinite linear;
}
.red {
color: red;
}Структура CSS
Правило
свойство: значение; /* правило */
Правило
свойство: значение; /* правило */
Селектор
селектор { /* блок объявления стилей */
свойство: значение;
}
селектор {
свойство: значение;
свойство: значение;
свойство: значение;
}
селектор,
селектор,
селектор,
селектор {
свойство: значение;
свойство: значение;
свойство: значение;
}
селектор,
селектор,
селектор,
селектор { /* комментарий */
свойство: значение;
свойство: значение;
свойство: значение;
}
At-правила
- @charset
- @import
- @media
- @document
- @font-face
- @supports
@charset
@charset "UTF-8";
@charset "iso-8859-15";@import
@import 'custom.css';
@import url('fineprint.css') print;@supports
@supports (display: flex) {
div {
display: flex;
}
}Валидный CSS
div {
font-size: 12px
color: red
}
font-size: 12px color: red;p {
font-size: 12px;
color: red;
div {
color: blue;
}
p {
font-size: 12px;
color: red;
}div {
invalid: 12px;
font-size: invalid;
}invalid: 12px;font-size: invalid;invalid {
font-size: 12px;
}
Браузер ничего не сделает
Валидатор
Добавление стилей к html
-
<p style="color: red;"> -
<style> p { color: red; } </style> -
<head> </head>
Селекторы
Селектор тега
p {
color: red;
}
h1 {
font-size: 34px;
}
nav {
border: 1px solid black;
}<h1>Очень важный текст</h1>
<nav>
<a href="/">Главная</a>
<a href="/profile">Профиль</a>
</nav>
<img src="/cats.png">
<p>Вот вам яркий пример
современных тенденций - реализация
намеченных плановых заданий является
качественно новой ступенью
модели развития!</p>Селектор класса
.red {
color: red;
}
.title {
font-size: 34px;
}
.info {
border: 1px solid black
}<h1 class="title">Очень важный текст</h1>
<nav class="nav">
<a href="/" class="red">Главная</a>
<a href="/profile" class="blue">Профиль</a>
</nav>
<img src="/cats.png" class="cats">
<p class="info red">Вот вам яркий пример
современных тенденций - реализация
намеченных плановых заданий является
качественно новой ступенью
модели развития!</p>Селектор идентификатора
#red {
color: red;
}
#title {
font-size: 34px;
}
#info {
border: 1px solid black
}<h1 id="title">Очень важный текст</h1>
<nav id="nav">
<a href="/" id="red">Главная</a>
<a href="/profile" id="blue">Профиль</a>
</nav>
<img src="/cats.png" id="cats">
<p id="info">Вот вам яркий пример
современных тенденций - реализация
намеченных плановых заданий является
качественно новой ступенью
модели развития!</p>Селектор идентификатора
#red {
color: red;
}
#title {
font-size: 34px;
}
#info {
border: 1px solid black
}<h1 id="title">Очень важный текст</h1>
<nav id="nav">
<a href="/" id="red">Главная</a>
<a href="/profile" id="blue">Профиль</a>
</nav>
<img src="/cats.png" id="cats">
<p id="info red">Вот вам яркий пример
современных тенденций - реализация
намеченных плановых заданий является
качественно новой ступенью
модели развития!</p>id vs class
- class для визаульного стиля
- id для логических или для функциональных элементов
Универсальный селектор
* {
font-size: 24px;
}<h1>Очень важный текст</h1>
<nav>
<a href="/">Главная</a>
<a href="/profile">Профиль</a>
</nav>
<img src="/cats.png">
<p>Вот вам яркий пример
современных тенденций - реализация
намеченных плановых заданий является
качественно новой ступенью
модели развития!</p>Селекторы атрибутов
Селекторы атрибутов
[href] {
color: red;
}<a href="https://yandex.ru">Яндекс</a>
<a>Пустая ссылка</a>Селекторы атрибутов
[href="http://yandex.ru"] {
color: red;
}<a href="https://yandex.ru">Яндекс</a>
<a href="https://google.com">Google</a>Селекторы атрибутов
[href^="https://"] {
color: red;
}<a href="https://yandex.ru">Яндекс</a>
<a href="https://google.com">Google</a>Селекторы атрибутов
[href$="yandex.ru"] {
color: red;
}<a href="https://yandex.ru">Яндекс</a>
<a href="https://yandex.ru/maps">Яндекс.Карты</a>Селекторы атрибутов
[href*="yandex.ru"] {
color: red;
}<a href="https://yandex.ru">Яндекс</a>
<a href="https://yandex.ru/maps">Яндекс.Карты</a>Псевдоселекторы
Псевдоклассы
- :active
- :any
- :checked
- :default
- :dir()
- :disabled
- :empty
- :enabled
- :first
- :first-child
- :first-of-type
- :fullscreen
- :focus
- :hover
- :indeterminate
- :in-range
- :invalid
- :lang()
- :last-child
- :last-of-type
- :left
- :link
- :not()
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :read-only
- :read-write
- :required
- :right
- :root
- :scope
- :target
- :valid
- :visited
Динамические псевдоклассы
a:hover { color: green; }
a:visited { color: purple; }
a:focus { color: yellow; }<a>Ссылочка</a>Динамические псевдоклассы
input:disabled {
background: pink;
}
input:enabled {
background: yellow;
}<input type="text" disabled placeholder="Я не активен!">
<input type="text" placeholder="Я активен!">Динамические псевдоклассы
input:valid {
background: green;
}
input:invalid {
background: red;
}<input type="text" class="example-input" pattern="^[a-zA-Z]+$">Структурные псевдоклассы
- :root
- :first-child/last-child
- :nth-child/nth-last-child(2n+1)
- :nth-of-type/nth-last-of-type(-n+4)
- :only-child/only-of-type
- :empty
:first-child
<html>
<ul>
<li></li>
<li></li>
<li>
<ul>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
</ul>
</li>
</ul>
<p></p>
</html>:last-child
<html>
<ul>
<li></li>
<li></li>
<li>
<ul>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
</ul>
</li>
</ul>
<p></p>
</html>:only-child
<html>
<ul>
<li></li>
<li></li>
<li>
<ul>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
</ul>
</li>
</ul>
<p></p>
</html>:nth-child(2n)
<html>
<div>
<span></span>
<em></em>
<div>
<em>
<span></span>
<span></span>
</em>
<em>
<i></i>
</em>
</div>
<span></span>
<div></div>
</div>
<div></div>
</html>div:nth-of-type(2n)
<html>
<div>
<span></span>
<em></em>
<div>
<em>
<span></span>
<span></span>
</em>
<em>
<i></i>
</em>
</div>
<span></span>
<div></div>
</div>
<div></div>
</html>li:not(:first-child)
<html>
<ul>
<li></li>
<li></li>
<li>
<ul>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
</ul>
</li>
</ul>
<p></p>
</html>Псевдоэлементы
- ::after
- ::before
- ::first-letter
- ::first-line
- ::selection
- ::backdrop
Псевдоэлементы
::first-letter { color: red }
::first-line { color: blue }
Я маленький апельсин
А я нет
А я нет
Я маленький апельсин
А я нет
А я нет
Псевдоэлементы
<div>::beforeОднажды, в студеную зимнюю пору, я из лесу вышел; был сильный мороз. Гляжу, поднимается медленно в гору лошадка, везущая хворосту воз.::after</div>
Псевдоэлементы
::before,
::after {
color: red;
font-weight: bold;
content: '»';
}
::before { content: '«';}
Однажды, в студеную зимнюю пору, я из лесу вышел; был сильный мороз. Гляжу, поднимается медленно в гору лошадка, везущая хворосту воз.
Однажды, в студеную зимнюю пору, я из лесу вышел; был сильный мороз. Гляжу, поднимается медленно в гору лошадка, везущая хворосту воз.
Перерыв
Комбинации
Комбинации
div.info { border: 1px solid black; }
.info.red { color: red; }
a[href].red { opacity: .9; }
a.red:hover { color: purple; }
#red#big { opacity: .9 }<a href="/" class="red">На главную</a>
<div class="info">
Вот вам яркий пример
современных тенденций -
реализация намеченных
плановых заданий является
качественно новой ступенью
модели развития!
</div>
<div><img src="./cats.png"></div>
Комбинации
div.info { border: 1px solid black; }
.info.red { color: red; }
a[href].red { opacity: .9; }
a:hover.red { color: purple; }
#red#big { opacity: .9 }<a href="/" class="red">На главную</a>
<div class="info">
Вот вам яркий пример
современных тенденций -
реализация намеченных
плановых заданий является
качественно новой ступенью
модели развития!
</div>
<div><img src="./cats.png"></div>
Комбинации
div.info { border: 1px solid black; }
.info.red { color: red; }
a[href].red { opacity: .9; }
a:hover.red { color: purple; }
#red#big { opacity: .9 }<a href="/" class="red">На главную</a>
<div class="info">
Вот вам яркий пример
современных тенденций -
реализация намеченных
плановых заданий является
качественно новой ступенью
модели развития!
</div>
<div><img src="./cats.png"></div>
Комбинации
div.info { border: 1px solid black; }
.info.red { color: red; }
a[href].red { opacity: .9; }
a:hover.red { color: purple; }
#red#big { opacity: .9 }<a href="/" class="red">На главную</a>
<div class="info">
Вот вам яркий пример
современных тенденций -
реализация намеченных
плановых заданий является
качественно новой ступенью
модели развития!
</div>
<div><img src="./cats.png"></div>
Комбинации
div.info { border: 1px solid black; }
.info.red { color: red; }
a[href].red { opacity: .9; }
a:hover.red { color: purple; }
#red#big { opacity: .9 }<a href="/" class="red">На главную</a>
<div class="info">
Вот вам яркий пример
современных тенденций -
реализация намеченных
плановых заданий является
качественно новой ступенью
модели развития!
</div>
<div><img src="./cats.png"></div>
Комбинации
div.info { border: 1px solid black; }
.info.red { color: red; }
a[href].red { opacity: .9; }
a:hover.red { color: purple; }
#red#big { opacity: .9 }<a href="/" class="red">На главную</a>
<div class="info">
Вот вам яркий пример
современных тенденций -
реализация намеченных
плановых заданий является
качественно новой ступенью
модели развития!
</div>
<div><img src="./cats.png"></div>
Комбинаторы
div div - потомок
div > div - сын
div + div - младший брат
div ~ div - младшие братья
ul li
<html>
<ul>
<li></li>
<li></li>
<li>
<ul>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
</ul>
</li>
</ul>
<p></p>
</html>
li li
<html>
<ul>
<li></li>
<li></li>
<li>
<ul>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
</ul>
</li>
</ul>
<p></p>
</html>
html > *
<html>
<ul>
<li></li>
<li></li>
<li>
<ul>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
</ul>
</li>
</ul>
<p></p>
</html>
li:first-child + li
<html>
<ul>
<li></li>
<li></li>
<li>
<ul>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
</ul>
</li>
</ul>
<p></p>
</html>
li:first-child ~ li
<html>
<ul>
<li></li>
<li></li>
<li>
<ul>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
</ul>
</li>
</ul>
<p></p>
</html>
Специфичность
Пример
Красный или желтый
.yellow {
color: yellow;
}
.red {
color: red;
}Красный или желтый
Пример
Красный или желтый
p.yellow {
color: yellow;
}
.red {
color: red;
}Красный или желтый
Пример
Красный или желтый
html .yellow {
color: yellow;
}
.red {
color: red;
}Красный или желтый
Пример
Красный или желтый
html .yellow {
color: yellow;
}
#red {
color: red;
}Красный или желтый
идентификаторы
классы
псевдоклассы
атрибуты
элемент
псевдоэлемент
универсальный селектор, комбинаторы потомков, детей и прочие не влияют на специфичность
0
0
0
Применяем высчитанные значения:
- Находим каждому HTML элементу соответствующие ему селекторы
- Сортируем селекторы исходя из специфичности (от менее приоритетных к более приоритетным)
- Применяем правила последовательно
Специфичность
div { /* 0 0 1 */
color: blue;
font-weight: bold;
font-size: 12px;
}
div#id { /* 1 0 1 */
font-size: 15px;
}
html div { /* 0 0 2 */
color: red;
}
Специфичность
div { /* 0 0 1 */
color: blue;
font-weight: bold;
font-size: 12px;
}
html div { /* 0 0 2 */
color: red;
}
div#id { /* 1 0 1 */
font-size: 15px;
}
Специфичность
div {
color: blue; /* 0 0 1 */
font-weight: bold; /* 0 0 1 */
font-size: 12px; /* 0 0 1 */
}
html div {
color: red; /* 0 0 2 */
}
div#id {
font-size: 15px; /* 1 0 1 */
}
Специфичность
color: blue; /* 0 0 1 */
font-weight: bold; /* 0 0 1 */
font-size: 12px; /* 0 0 1 */
color: red; /* 0 0 2 */
font-size: 15px; /* 1 0 1 */
Специфичность
color: blue; /* 0 0 1 */
font: 13px Arial; /* 0 0 1 */
font-size: 12px; /* 0 0 1 */
font-weight: bold; /* 0 0 1 */
color: red; /* 0 0 2 */
font-size: 15px; /* 1 0 1 */
Инлайн и !important
div {
color: green !important;
}- Инлайн стили по умолчанию приоритетнее стилей в CSS
- Стили в CSS с !important приоритетнее инлайн стилей
- Инлайн стили с !important приоритетнее всего (на самом деле нет)
Специфичность
color: blue; /* 0 0 1 */
font-weight: bold; /* 0 0 1 */
font-size: 12px; /* 0 0 1 */
font-size: 15px; /* 0 0 1 */
color: red; /* 0 0 2 */
<div style="color: blue"></div>
color: green !important;
<div style="color: white !important"></div>
p.class /* 0 1 1 */
.class-1.class-2:first-child /* 0 3 0 */
#id#id /* 2 0 0 */
p.class-1.class-2:nth-child(2n)[href]::after /* 0 4 2 */
Наследование
- Некоторые стили применяются не только к целевому элементу, но и к его потомкам
- Унаследованные стили не имеют специфичности, то есть их всегда перебивает любой селектор
Пример наследования
Привет,
УрФУ
div {
color: green; /* 0 0 1 */
/* abbr { color : green } – нет специфичности */
}
Привет,
УрФУ
Пример наследования
Привет,
УрФУ
* {
color: red; /* 0 0 0 */
}
div {
color: green; /* 0 0 1 */
/* abbr { color : green } – нет специфичности */
}
Привет,
УрФУ
Наследование
Стили, которые наследуются (Полный список)
color
cursor
direction
empty-cells
font-family
font-size
font-weight
font-style
font-variant
font
letter-spacing
list-style-type
list-style-position
list-style-image
list-style
line-height
quotes
text-align
text-indent
text-transform
visibility
white-space
word-spacing
cursor
direction
empty-cells
font-family
font-size
font-weight
font-style
font-variant
font
letter-spacing
list-style-type
list-style-position
list-style-image
list-style
line-height
quotes
text-align
text-indent
text-transform
visibility
white-space
word-spacing
Порядок применения стилей
- Стили браузера
- Стили пользователя и/или плагинов браузера
- Стили страницы
- Стили пользователя и/или плагинов браузера с !important
Значения свойств
Числовые значения
- Целые числа (1, 2, 3...)
- Дробные числа (.5, 1.5)
- Процентные значения (50%)
Абсолютные единицы измерения длины
- Миллиметры (mm)
- Сантиметры (cm)
- Дюймы (in)
- Пункты – используется в типографиях, 1 дюйм = 72 пункта (pt)
- Пики – 12 пунктов (pc)
Абсолютные единицы удобны при определении CSS для печати. В вебе же практически не используются
Относительные единицы измерения длины
- пикселы* (px)
- em – зависит от размера шрифта (em)
- rem – зависит от размера шрифта корневого элемента (rem)
- ex – зависит от высоты символа x в данном шрифте
- ch – зависит от ширины символа 0 в данном шрифте
- vh/vw – 1/100 высоты и ширины viewport'а соответственно
- vmax – 1/100 от максимума между высотой и шириной viewport'а
- vmin – 1/100 от минимума между высотой и шириной viewport'а
Способы задания цвета
- Именованные цвета – red
- Функциональный – rgb(255, 0, 0) или rgba(255, 0, 0, 1)
- Шестнадцатиричный – #ff0000 или #f00
- Шестнадцатиричный с прозрачностью - #ff000000
Ещё типы значений
- Именованные слова: bold, underline
- Комбинации: 1px solid red
- Функциональные: url(), attr(), rgb(), calc()
Вопросы
