ИП. Селекторы псевдоклассов «для списков» |
МИЭТ, 2017 |
Селекторы структурных псевдоклассов применяют чаще всего для оформления списков
Псевдокласс
:nth-child(even)
:nth-child(odd)
:nth-child(x)
:nth-child(xn)
:nth-child(xn+y)
:nth-last-child()
:first-child, :last-child
:only-child :empty
:nth-of-type(), :nth-last-of-type(), :first-of-type, :last-of-type, :only-of-type
:first-letter
Применить для элементов
четных
нечетных
x-ного по порядку (один раз)
каждого, кратного x
каждого, кратного x начиная с y
то-же что и для nth-child но с конца
Первый или последний дочерний
Единственный дочерний Нет дочерних
аналогично *-child но для типов
Первый символ в абзаце
Пример
:nth-child(even)
:nth-child(odd)
:nth-child(5)
:nth-child(5n) 
:nth-child(5n+3) 
:nth-last-child(5n+3)
ИП. Примеры применения структурных псевдоклассов |
МИЭТ, 2017 |
Применение :before >>>
<<< Оформление таблиц
ИП. Наследование в CSS |
МИЭТ, 2017 |
Элементы наследуют свойства своего родителя |
|
Свойства могут переопределять друг друга. Это называется — каскад
ИП. CSS. Способы подключения |
МИЭТ, 2017 |
Из внешнего файла через link
<link rel="stylesheet" href="css/style.css">
Из блока style
<style>
…
</style>
Из блока style и внешнего файла правилом @import (должно быть первым)
<style>
@import url(css/style.css);
...
</style>
Из атрибута style
<div style='width:100px; ...'> … </div>
ИП. CSS. Использование link и @import |
МИЭТ, 2017 |
При использовании link осуществляется асинхронная загрузка
<link rel="stylesheet" href="css/style1.css">
<link rel="stylesheet" href="css/style2.css"> /* может прийти первым, хотя стоит вторым */
При использовании @import стили загружаются точно в порядке указания
@import url('css/style1.css'); /* придет первым */ @import url('css/style1.css'); /* придет вторым */
С помощью правила @import файлы стилей можно подключать из других файлов стилей
сss/file1.css, css/file2.css, css/file3.css
Содержимое file1.css |
Содержимое file2.css |
Содержимое file2.css |
#Test { font-size:48px; } |
@import url("file3.css"); |
#Test { font-weight: bold; } |
|
#Test { color: #ff0000; } |
|
Содержимое test.html |
|
|
<style> |
|
|
@import url("file1.css"); |
|
|
@import url("file2.css"); |
|
|
</style> |
|
|
ИП. CSS. Порядок применения стилей (каскад) |
МИЭТ, 2017 |
Порядок выполнения:
1. Стили с !impotant
{ font-size:12px!impotant; }
2. Стили с максимальным значением признака специфичность
style |
- |
1000 |
<a href='...' style='font-size:12px;'>...</a> |
||
id |
- |
0100 |
#Test { font-size:12px; } |
|
|
class |
- |
0010 |
.test { font-size:12px; } |
|
|
:псевдо |
- |
0001 |
#Test:hover { font-size:14px; } |
||
Для сложных селекторов специфичность рассчитывается |
|||||
.body #TestTitle:hover { font-size:14px; } |
- |
0010+0100+0001 = 0111 |
|||
3. Порядок следования
<style>
#Test { font-size:12px; }
…
#Test { font-size:12px; } /* выполнится это правило */ </style>
ИП. CSS. @-правила |
МИЭТ, 2017 |
@charset
Применяется для задания кодировки внешнего CSS-файла.
Требуется, если в CSS-файле используются символы национального алфавита.
@font-face
Определяет настройки шрифтов и позволяет загрузить специфичный шрифт.
@import
Позволяет импортировать содержимое CSS-файла в текущую стилевую таблицу.
@media
Определяет тип носителя, для которого будет применяться стиль. Носителями могут быть: принтер, коммуникатор, монитор и др.
@page
Задает значение полей при печати документа.
ИП. CSS. @-правила. @font-face |
МИЭТ, 2017 |
Загрузка локального шрифта.
@font-face {
font-family: 'PT Sans Caption'; font-weight: bold;
src: url('ptc75f_w.eot');
src: local('PT Sans Caption Bold'), url('PTC75F_W.woff') format('woff'), url('PTC75F_W.ttf') format('truetype'),
url('PTC75F_W.svg#PTSans-CaptionBold') format('svg');
}
Требуются файлы шрифта 3-х форматов: woff, truetype, svg
Получить их можно например с https://fonts.google.com
ИП. CSS. @-правила. @font-face. Загрузка удаленных шрифтов |
МИЭТ, 2017 |
ИП. CSS. @-правила. @font-face. Загрузка удаленных шрифтов |
МИЭТ, 2017 |
https://fonts.googleapis.com/css?family=Open+Sans|Roboto
/* cyrillic-ext */ @font-face {
font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: local('Open Sans'), local('OpenSans'),
url(https://fonts.gstatic.com/s/opensans/v13/K88pR3goAWT7BTt32Z01mxJtnKITppOI_IvcXXDNrsc.w off2) format('woff2');
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* greek-ext */ @font-face {
font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: local('Open Sans'), local('OpenSans'),
url(https://fonts.gstatic.com/s/opensans/v13/LWCjsQkB6EMdfHrEVqA1KRJtnKITppOI_IvcXXDNrsc.w off2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* latin-ext */ @font-face {
font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'),
url(https://fonts.gstatic.com/s/roboto/v15/Fcx7Wwv8OzT71A3E1XOAjvesZW2xOQ- xsNqO47m55DA.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}