HTML + CSS › slides › first-semester › ... · Универсальные атрибуты...

HTML + CSS

Кузнецов Василий

1

HTML

2

Типичный html<!DOCTYPE html> <html> <head>

<meta charset="utf-8" /> <title>HTML</title> </head> <body> <p> <a href="https://www.w3.org/html/">HTML</a> – это стандартизированный язык разметки документов в Вебе. </p> </body> </html>

3

HTML-элементы (теги)

<a href="https://www.w3.org/html/">HTML</a>

4


Открывающий тег


5


Закрывающий тег


6


Атрибут


7


Содержимое


8

HTML-элементы (теги) <p> <a href="https://www.w3.org/html/">HTML</a>

– это стандартизированный язык разметки... </p>

 <title>HTML</title>

 <img src="../images/cat.png" alt="Кот">

9

Атрибуты <input type="button" value="Click me">

 <input type=button value=Click> 

 <input disabled>  <input disabled="sometext">

10

Универсальные атрибуты

11


id – задает уникальный идентификатор элемента

У элемента может быть только один id

<input id="email-input" type="email">

/*В стилях*/ #email-input { width: 100px; }

// Получаем доступ к элементу как к JS объекту по id var email = document.getElementById('email-input');

12


class – задает класс элементов, позволяягруппировать их

Список покупок: <ul class="list"> <li class="food">Молоко</li> <li class="food">Хлеб</li> <li class="car">Audi TT</li> <li class="car">Audi Q5</li>

/*В стилях*/ .food { color: blue; } .car { color: red; }

13


У элемента может быть несколько классов, тогда онизаписываются через пробел

<a class="big red link">Большая красная ссылка</a>

14


Можно считать, что id задает класс из одногоэлемента, и для единообразия использовать class

<input id="email-input" type="email">

/*В стилях*/ #email-input { width: 100px }

// Получаем доступ к элементу как к JS объекту по id var email = document.getElementById('email-input'); 15


Можно считать, что id задает класс из одногоэлемента, и для единообразия использовать class

<input class="email-input" type="email">

/*В стилях*/ .email-input { width: 100px }

// Получаем доступ к элементу как к JS объекту по классу var email = document.querySelector('.email-input'); 16


title – добавляет пояснение к содержимому элемента,которое появляется при наведении

<abbr title="World Wide Web">www</abbr> <p title="application programming interface">API</p>

17

Отображается как: <input type="button">

HTML Entity<p>©</p>  <p>&</p>  <p>∀</p> 

<p><</p>  <p> </p>  <p>∞</p> 

 <input type="button">

18

https://developer.mozilla.org/en-US/docs/Glossary/Entity

HTML-элементы

19

Структура html<!DOCTYPE html> <html> <head>


20



21

!DOCTYPE

– директива, которая указывает наспецификацию, по которой был создан документ

Для стандарта HTML5 всегда используется:

Поэтому всегда используем егоОбязательно надо указывать

!DOCTYPE

<!DOCTYPE html>

22

https://www.w3schools.com/tags/tag_doctype.asp

Структура html<!DOCTYPE html> <html> <head> 


23

head

title – задает заголовок страницы, отображаемый вовкладке браузера

<head>  <title>HTML + CSS<title> </head>

24

head

link – описывает связь с внешним документом,например, файлом со стилями или шрифтами

<head> <link href="styles.css">  <link href="print-styles.css" media="print">  25

head

script/style – описывают скрипты/стили

<head> <script src="path/jquery-plugin.js"></script> <style> p { color: red; } </style> </head>

26

head

script/style могут находиться в body

<body> <script> console.log('Hello!'); </script> <style> p { color: red; } </style> </body>

27

head

meta – метатеги, предназначенные для браузеров,поисковых систем, соцсетей

Используется в

<head> <meta charset="utf-8">  <meta name="description" content="HTML lecture"> <meta name="author" content="kvas"> </head>

Open Graph 28

http://fbdevwiki.com/wiki/Open_Graph_protocol

Базовые теги

div – блочный элемент, span – строчный элемент

Несемантично – непонятно, какой элемент что значитЛучше использовать только для добавления стилей

<div> <div><span title="HyperText Markup Language">HTML</span> – это ... </div> <div>Как правило, передаются ... </div> <div>Последнее изменение: 2001-04-23</div> <div>Автор: [email protected]</div> </div>

30

Семантичная верстка <article> 

<p><abbr title="HyperText Markup Language">HTML</abbr> – это ... </p> <p>Как правило, передаются ... </p> </article>  <footer>  <p>Последнее изменение: <time>2001-04-23</time></p>  <address>Автор: [email protected]</address> </footer>

31

section/article

aside

header/main/footer

figure и figcaption

h1-h6

nav

...

Семантичные теги

32

https://www.w3schools.com/html/html5_semantic_elements.asp

Что будет?

Подряд идущие пробельные символы схлапываются в одинпробел

<p> ,--. ,--. ,---. ,------. ,---. | `.' | / O \ | .--. '' .-'

| |'.'| || .-. || '--'.'`. `-. | | | || | | || |\ \ .-' | `--' `--'`--' `--'`--' '--'`-----' </p>

33

pre(preformatted text)<pre> ,--. ,--. ,---. ,------. ,---. | `.' | / O \ | .--. '' .-'

| |'.'| || .-. || '--'.'`. `-. | | | || | | || |\ \ .-' | `--' `--'`--' `--'`--' '--'`-----' </pre>

34

Теги ul, ol, liСписки

<ol type="I"> <li>Сельдь</li> <li>Хлеб</li> <li>Фрукты: <ul> <li>Бананы</li> <li>Яблоки</li> </ul> </li> <li>Молоко</li> <li>Audi TT</li> </ol>

35

https://www.w3schools.com/html/html_lists.asp

Теги table, thead, tfoot, tbody, th, tr, tdТаблицы

<table border="1" cellspacing="0"> <tr> <td>A 1.1</td> <td>A 1.2</td> <td>A 1.3</td> </tr> <tr> <td>A 2.1</td> <td>A 2.2</td> <td>A 2.3</td> </tr> </table>

36

https://html5book.ru/html-table/

Объединение ячеекТаблицы

<table border="1" cellspacing="0"> <tr>  <td colspan="2">A 1.1</td>   <td rowspan="2">A 1.3</td> </tr> <tr> <td>A 2.1</td> <td>A 2.2</td>  </tr> </table> 37

Форматирование текста:

em - для акцентирования текста

strong – для обозначения важной информации

mark – помечает текст как выделенный

small – для различной уточняющей информации

i – для дополнительного выделения(экспрессивно-эмоциональным)

b – для выделения из окружающего его контекста(ключевые слова в выдержках)

<sub> <sup> <ins> <del>

Для кода: <code> <kbd> <samp> <var> <pre>

Перенос текста: <p> <br> <hr> <wbr>

Цитаты/определения: <abbr> <blockquote> <q> <dfn> <cite> <bdo>

Текстовые элементы

Примеры 38

https://www.w3schools.com/html/html_formatting.asp

Ссылки<a href="https://yandex.ru">Yandex</a>

 <a href="https://yandex.ru" target="_blank">Yandex</a>

 <a href="examples/title.html" >Yandex</a> 

 <a href="/examples/title.html" >Yandex</a> 

39

https://ru.wikipedia.org/wiki/URL

Ссылки

Протоколы

<a href="http://images.yandex.ru">По http</a> <a href="//images.yandex.ru">По тому же протоколу</a> <a href="mailto:[email protected]">Написать письмо</a> <a href="skype:kvaser5">Позвонить по скайпу</a> <a href="tel:+79000000000">Позвонить</a>

40

Ссылки

Якоря

<a href="#anchor">ссылка на якорь</a> <article>Много текста...</article>  <div id="anchor">якорь</div>

41

Картинки

Картинка загрузилась:

Ошибка загрузки:

image of a cute cat

<img src="cat.jpg" title="cat" alt="image of a cute cat">

42

Картинки

Атрибут alt

Используется, если картинку не удалось загрузить

Используется, если загрузка картинок отключенапользователем

Используется скрин-ридерами

Подробнее про alt

43

https://ru.wikipedia.org/wiki/%D0%AD%D0%BA%D1%80%D0%B0%D0%BD%D0%BD%D0%BE%D0%B5_%D1%81%D1%87%D0%B8%D1%82%D1%8B%D0%B2%D0%B0%D1%8E%D1%89%D0%B5%D0%B5_%D1%83%D1%81%D1%82%D1%80%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%BE

http://prgssr.ru/development/alternativnyj-tekst-dlya-izobrazhenij.html

Размеры картинок

<img src="img/cat.png" width="300"> <img src="img/cat.png" height="300"> <img src="img/cat.png" height="300" width="300">

44

Теги для вставки контента

img

/iframeaudio videotrack

45

https://webref.ru/html/iframe

https://webref.ru/html/audio

https://webref.ru/html/video

https://webref.ru/html/track

Формы<form action="/send-data"> <input type="text" name="name"> <input type="text" name="phone">

<select name="option"> <option selected value="a">A</option> <option value="b">B</option> </select> <textarea name="text" cols="30" rows="10"></textarea> <button>Submit</button> </form>

47



48

input<input type="text"> 

<input type="text" value="Текстовое поле">  <input type="text" placeholder="Введите текст">  <input type="password">  <input type="file">

49

input

type="checkbox"/"radio"

 <input type="checkbox" checked> Хлеб <input type="checkbox"> Молоко  <input type="radio" name="drink"> Вода <input type="radio" name="drink" checked> Сок

50

input

ДЕМО: Атрибут type в HTML5

Подробнее про type

51

https://www.w3schools.com/html/html_form_input_types.asp

select<select name="hero"> <option selected>Выберите героя</option> <option value="Чебурашка">Чебурашка</option>

<option value="Крокодил Гена">Крокодил Гена</option> <option value="Шапокляк">Шапокляк</option> <option value="Крыса Лариса">Крыса Лариса</option> </select>

52

textarea<textarea rows="7" cols="35"

name="text" placeholder="Введите текст" >Текст</textarea>

53

button<button>Это кнопка</button> <input type="button" value="Тоже кнопка">

<button disabled>Эта кнопка заблокирована</button>  <button type="button">Это кнопка</button>

54

label<p>Выберите напиток</p> <input type="checkbox" id="water-checkbox">

 <label for="water-checkbox">Вода</label> <label><input type="checkbox">Сок</label>

55



56

formСлужит для передачи данных на сервер

name=[значение1]&email=[значение2]&secret=[значение3]

  <form method="get" action="/handler"> <input name="name" placeholder="Ваше ФИО"> <input name="email" placeholder="Ваш email" type="email"> <input name="secret" type="hidden" value="secretvalue"> <button type="submit">Отправить</button> <button type="reset">Сбросить</button> </form>

Подробнее про формы57

https://www.w3schools.com/html/html_forms.asp

Валидация

<form method="post"> <input type="text" required placeholder="Как вас зовут?"> <input type="email" placeholder="email" required> <input type="url" placeholder="url" required> <input type="tel" pattern="2-[0-9]{3}-[0-9]{3}" placeholder="2-123-312" required> <button>Отправить</button> <button type="reset">Очистить</button> </form>

58

ВалидацияОбязательное поле


59

ВалидацияПроверка соответствия типу


60

ВалидацияПроверка соответствия шаблону


61

Полезные ссылки по HTML

HTML I

HTML IIdiv или section или article?W3CHTML5BOOKЧеллендж на знание HTML-тегов

62

https://github.com/urfu-2015/verstka-lectures/blob/master/html/part-1.md


http://front-end.su/2015/11/01/div-or-section-or-article/

https://www.w3.org/

https://html5book.ru/html-html5/

https://tags.isthe.link/?setting=html5

Перерыв

63

CSS

64

CSS (каскадные таблицы стилей) - это язык,отвечающий за внешний вид

HTML-документа

65

Добавление стилей к HTML

Определить стили в HTML

<style> .p { color: red; } </style>

66

Добавление стилей к HTML

Отдельным файлом

�webpage │ ├──index.html │ └──index.css

 <head> <link rel="stylesheet" href="./index.css"> </head>

67

Типичный css@import url('https://example.ru/font'); div {

color: white; } .red { background-color: red; } #square { width: 100px; height: 100px; }

68



69

Правилосвойство: значение; /* правило */

70



71

Блок объявления стилейселектор { свойство: значение; }

72

Блок объявления стилей/* можно указать набор правил */ селектор { свойство: значение;

свойство: значение; свойство: значение; }

73

Блок объявления стилей/* можно указать набор селекторов для набора правил */ селектор, селектор,

селектор { свойство: значение; свойство: значение; свойство: значение; }

74



75

@charset – задает кодировку

@import – подключает внешний css-файл

@media

@document

@font-face

@supports

At-правила

76

https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule

Селекторы

77

Селектор тегаp { color: red; }

h1 { font-size: 34px; } nav { opacity: .5; }

<h1>Очень важный текст</h1> <nav> <a href="/">Главная</a>

<a href="/profile">Профиль</a> </nav> <img src="/cats.png"> <p>Вот вам яркий пример современных тенденций - реализация намеченных плановых заданий является качественно новой ступенью модели развития!</p>

78

Селектор тегаp { color: red; }

h1 { font-size: 34px; } nav { opacity: .5; }



79

Селектор класса.red { color: red; }

.title { font-size: 34px; } .info { opacity: .5; }

<h1 class="title">Очень важный текст</h1> <nav class="nav"> <a href="/" class="red">Главная</a>

<a href="/profile" class="blue">Профиль</nav> <img src="/cats.png" class="cats"> <p class="info red">Вот вам яркий пример современных тенденций - реализация намеченных плановых заданий является качественно новой ступенью модели развития!</p>

80

Селектор класса.red { color: red; }

.title { font-size: 34px; } .info { opacity: .5; }

<h1 class="title">Очень важный текст</h1> <nav class="nav"> <a href="/" class="red">Главная</a>

<a href="/profile" class="blue">Профиль</nav> <img src="/cats.png" class="cats"> <p class="info red">Вот вам яркий пример современных тенденций - реализация намеченных плановых заданий является качественно новой ступенью модели развития!</p>

81

Селектор идентификатора#red { color: red; }

#title { font-size: 34px; } #info { opacity: .5; }

<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>

82

Селектор идентификатора#red { color: red; }

#title { font-size: 34px; } #info { opacity: .5; }

<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>

83

Универсальный селектор* { font-size: 24px; }



84

Универсальный селектор* { font-size: 24px; }



Стоит использовать с осторожностью

85

Селекторы атрибутов

/* применится, если атрибут есть */ [href] {

color: red; }

<a href="https://yandex.ru">Яндекс</a> <a>Пустая ссылка</a>

ЯндексПустая ссылка

86

https://yandex.ru/


/* применится, если равен "https://yandex.ru" */ [href="https://yandex.ru"] {

color: red; }

<a href="https://yandex.ru">Яндекс</a> <a href="https://google.com">Google</a>

ЯндексGoogle

87

https://yandex.ru/

https://google.com/


/* применится, если начинается с "https://" */ [href^="https://"] {

color: red; }

<a href="https://yandex.ru">Яндекс</a> <a href="https://google.com">Google</a>

ЯндексGoogle

88

https://yandex.ru/

https://google.com/


/* применится, если кончается на "yandex.ru" */ [href$="yandex.ru"] {

color: red; }

<a href="https://yandex.ru">Яндекс</a> <a href="https://yandex.ru/maps">Яндекс.Карты</a>

ЯндексЯндекс.Карты

89

https://yandex.ru/

https://yandex.ru/maps


/* применится, если содержит на "yandex.ru" */ [href*="yandex.ru"] {

color: red; }

<a href="https://yandex.ru">Яндекс</a> <a href="https://yandex.ru/maps">Яндекс.Карты</a>

ЯндексЯндекс.Карты

90

https://yandex.ru/

https://yandex.ru/maps

:active:any-link

: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:le�: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

Псевдоклассы

91

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

Динамические псевдоклассыa:visited { color: green; } a:focus { color: blue; }

a:hover { color: red; }

<a>Ссылка</a>

Ссылка

92

https://yandex.ru/?rand=0.7001713892779748

Динамические псевдоклассы

Неактивный Активный

input:disabled { background: red; }

input:enabled { background: green; }

<input type="text" disabled placeholder="Неактивный"> <input type="text" placeholder="Активный">

93

Динамические псевдоклассы

Поле с валидацией

input:valid { background: green; }

input:invalid { background: red; }

<input type="text" pattern="^[a-zA-Z]*$">

94

Структурные псевдоклассы

: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

95

:first-child<html> <ul> <li></li> <li></li>

<li> <ul> <li></li> <li></li> </ul> <ul> <li></li> </ul> </li> </ul> <p></p> </html>

96

:last-child<html> <ul> <li></li> <li></li>


97

:only-child<html> <ul> <li></li> <li></li>


98

: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>

99

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>

100

li:not(:first-child)<html> <ul> <li></li> <li></li>


101

::before

::a�er

::first-letter

::first-line

::selection

::backdrop

Псевдоэлементы

102

https://developer.mozilla.org/ru/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements#%D0%9F%D1%81%D0%B5%D0%B2%D0%B4%D0%BE%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%8B


Первая строка Вторая строка

Первая строка Вторая строка

::first-letter { color: red; } ::first-line { color: blue; }

103

Псевдоэлементы<div>::beforeCSS is awesome::after</div>

104


CSS is awesome

«CSS is awesome»

::before, ::after { color: red;

font-weight: bold; } ::before { content: '«'; } ::after { content: '»'; }

105

Комбинацииdiv.info { color: red; } .info.link { color: green; }

a[href].link { opacity: .9; } a.link:hover { color: blue; } #link#big { opacity: .9 }

<a href="/" class="link">На главную</a> <div class="info"> Вот вам яркий пример

современных тенденций - реализация намеченных плановых заданий является качественно новой ступенью модели развития! </div> <div><img src="./cats.png"></div>

106





107





108





109

Комбинации

*Применится при наведении

div.info { color: red; } .info.link { color: green; }




110

Комбинации

*У одного элемента не может быть двух id

div.info { color: red; } .info.link { color: green; }




111

Комбинаторы

div div – потомок

div > div – сынdiv + div – младший братdiv ~ div – младшие братья

112

ul li<html> <ul> <li></li>

<li></li> <li> <ul> <li></li> <li></li> </ul> <ul> <li></li> </ul> </li> </ul> <p></p> </html> 113

li li<html> <ul> <li></li>


html > *<html> <ul> <li></li>


li:first-child + li<html> <ul> <li></li>


li:first-child ~ li<html> <ul> <li></li>


Пример

Красный или синий?

<p class="red blue"> Красный или синий? </p>

.blue { color: blue; }

.red { color: red; }

118

Пример


<p class="blue red"> Красный или синий? </p>

.blue { color: blue; }


119

Пример



p.blue { color: blue; }


120

Пример



html .blue { color: blue; }


121

Пример


<p id="red" class="blue"> Красный или синий? </p>

html .blue { color: blue; }

#red { color: red; }

122

Специфичность

123

идентификаторы

классы

псевдоклассы атрибуты

элементы (теги) псевдоэлементы

универсальный селектор и комбинаторы невлияют на специфичность

124

Применяем высчитанные значения:

1. Каждому HTML-элементу находим соответствующие емуселекторы

2. Сортируем селекторы по специфичности

От менее приоритетных к более приоритетным

Если специфичность совпадает, то раньше тот, которыйвстретился раньше

3. Применяем правила последовательно

125

Специфичность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; }

126

Специфичность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; }

127

Специфичность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 */ }

128

Специфичность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 */

129

Специфичность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 */

130

Атрибут style и !important

1. Атрибут style по умолчанию приоритетнее стилей в CSS

2. Стили в CSS с !important приоритетнее атрибута style

3. Атрибут style с !important приоритетнее всего (на самомделе нет)

<div style="color: blue;"></div>

div { color: green !important;

}

<div style="color: white !important;"></div>

131

Атрибут style и !importantcolor: 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>

132

Атрибут style и !important

Атрибут style стоит использовать, только если стиливысчитываются динамически

Вместо !important чаще всего можно указать бо́льшуюспецифичность

133

Тренировка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 */

134

Наследование

Некоторые стили применяются не только к целевомуэлементу, но и к его потомкам

Унаследованные стили не имеют специфичности, то естьих всегда перебивает любой селектор

135


Привет, УрФУ

<div> Привет, <abbr title="Уральский федеральный университет"> УрФУ

</abbr> </div>

div { color: red; /* 0 0 1 */ /* abbr { color : red } – нет специфичности */ }

136


Привет, УрФУ

<div> Привет, <abbr title="Уральский федеральный университет"> УрФУ

</abbr> </div>

* { color: blue; /* 0 0 0 */ } div { color: red; /* 0 0 1 */ /* abbr { color : red } – нет специфичности */ }

137

НаследованиеСтили, которые наследуются ( )

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

Подробнее

138

http://www.w3.org/TR/CSS21/propidx.html

Порядок применения стилей

Стили браузера

Стили пользователя и/или плагинов браузера

Стили страницы

Стили пользователя и/или плагинов браузера с !important

139

Значения свойств

140

Числовые значения

Целые числа (1, 2, 3...)

Дробные числа (.5, 1.5)

Процентные значения (50%)

141

Абсолютные единицы измерения

Миллиметры (mm)

Сантиметры (cm)

Дюймы (in)

Пункты – используется в типографиях, 1 дюйм = 72 пункта (pt)

Пики – 12 пунктов (pc)

Абсолютные единицы удобны при определении CSS для печати. Ввебе же практически не используются

142

Относительные единицы измерения

пикселы (px)

em – зависит от размера шрифта (em)

rem – зависит от размера шрифта корневого элемента (rem)

ex – зависит от высоты символа x в данном шрифте

ch – зависит от ширины символа 0 в данном шрифте

vh/vw – 1/100 высоты и ширины viewport'а соответственно

vmax – 1/100 от максимума между высотой и шириной viewport'а

vmin – 1/100 от минимума между высотой и шириной viewport'а

143

Способы задания цвета

Именованные цвета – red

Функциональный – rgb(255, 0, 0) или rgba(255, 0, 0, 1)

Шестнадцатиричный – #ff0000 или #f00

Шестнадцатиричный с прозрачностью - #ff000000

144

Ещё типы значений

Именованные слова: bold, underline

Комбинации: 1px solid red

Функциональные: url(), attr(), rgb(), calc()

145

Полезные ссылки по CSS

MDN

HTML5BOOKИгра про селекторыСпецифичность через Звездные войны

146

https://developer.mozilla.org/ru/docs/Web/CSS/Reference

https://html5book.ru/osnovy-css/

https://flukeout.github.io/

https://stuffandnonsense.co.uk/archives/css_specificity_wars.html

Вопросы?

147

Все ссылки

/

HTML Entity

!DOCTYPE

Open Graph

Семантичные теги

Списки

Таблицы

Текстовые элементы

Подробнее про URL

Скрин-ридеры

Подробнее про alt

iframe

audio video

track

Подробнее про атрибут type

Подробнее про формы

HTML I

HTML II

div или section или article?

148

https://developer.mozilla.org/en-US/docs/Glossary/Entity

https://www.w3schools.com/tags/tag_doctype.asp

http://fbdevwiki.com/wiki/Open_Graph_protocol

https://www.w3schools.com/html/html5_semantic_elements.asp

https://www.w3schools.com/html/html_lists.asp


https://www.w3schools.com/html/html_formatting.asp

https://ru.wikipedia.org/wiki/URL

https://ru.wikipedia.org/wiki/%D0%AD%D0%BA%D1%80%D0%B0%D0%BD%D0%BD%D0%BE%D0%B5_%D1%81%D1%87%D0%B8%D1%82%D1%8B%D0%B2%D0%B0%D1%8E%D1%89%D0%B5%D0%B5_%D1%83%D1%81%D1%82%D1%80%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%BE

http://prgssr.ru/development/alternativnyj-tekst-dlya-izobrazhenij.html

https://webref.ru/html/iframe

https://webref.ru/html/audio

https://webref.ru/html/video

https://webref.ru/html/track

https://www.w3schools.com/html/html_form_input_types.asp

https://www.w3schools.com/html/html_forms.asp



http://front-end.su/2015/11/01/div-or-section-or-article/

Все ссылки

W3C

HTML5BOOK

Челлендж на знание HTML-тегов

At-правила

Псевдоклассы

Наследуемые стили

MDN

HTML5BOOK

Игра про селекторы

Специфичность через Звездныевойны

149

https://www.w3.org/

https://html5book.ru/html-html5/

https://tags.isthe.link/?setting=html5

https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

http://www.w3.org/TR/CSS21/propidx.html

https://developer.mozilla.org/ru/docs/Web/CSS/Reference



https://flukeout.github.io/

https://stuffandnonsense.co.uk/archives/css_specificity_wars.html

Спасибо!

150

HTML + CSS › slides › first-semester › ... · Универсальные атрибуты...

Documents

Transcript of HTML + CSS › slides › first-semester › ... · Универсальные атрибуты...