WWW — b14esh.com

Конспект: основы CSS

ссылка

https://htmlacademy.ru/
https://htmlacademy.ru/courses/307/run/16

1 2	https://htmlacademy.ru/ https://htmlacademy.ru/courses/307/run/16

Конспект: основы CSS

CSS-правила
CSS — это язык для оформления структурированных документов, например, HTML- документов. 
Синтаксис — это плоский список CSS-правил. 
CSS-правило состоит из селектора и перечня свойств и их значений:

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


Для комментариев в CSS используются символы /* и */.



Селекторы
Селектор находится в начале CSS-правила, до фигурных скобок, и определяет, к каким HTML-элементам применятся свойства и значения из правила.

.feature-kitten {
  padding-top: 60px;
}

Простейшие (и самые популярные) селекторы — это селекторы по тегам и по классам. 
Селекторы по тегам содержат имя тега без символов < и > и применяются ко всем подходящим тегам. 
Селекторы по классам начинаются с точки, за которой идёт имя класса, и применяются ко всем тегам с подходящим атрибутом class.

h1 { color: red; }
.info { color: blue; }

На странице может быть несколько списков, и стили применятся ко всем спискам, даже к тем, которые вы менять не хотели. 
Чтобы избежать таких ситуаций, лучше не использовать селекторы по тегам или использовать их как можно реже.

Если у CSS-правил отличаются только селекторы, а свойства и значения одинаковые, то их можно сгруппировать через запятую.

Также можно комбинировать любые типы селекторов через пробел. 
Такие селекторы называются вложенными или контекстными и читаются справа налево. 

Например:
nav a {…}
  .menu ul {…}
  .post .title {…}



Свойства и значения
Список свойств и значений находится внутри фигурных скобок CSS-правила. 
Свойство определяет, какую характеристику внешнего вида мы хотим изменить, а значение — как именно.

.feature-kitten {
  padding-top: 60px;
}

Каждый раз, когда мы добавляем новое свойство или изменяем его значение, мы меняем что-то на странице.



Наследование
Наследование в CSS — это механизм, с помощью которого значения свойств элемента-родителя передаются его элементам-потомкам. 
Стили, присвоенные одному элементу, наследуются всеми потомками (вложенными элементами), но только в том случае, если они где-то явно не переопределены.



Составные свойства
В CSS есть обычные свойства, управляющие одним параметром отображения, и есть составные свойства, управляющие одновременно несколькими параметрами. 
Например, свойство font.
 Оно задаёт сразу шесть параметров: размер и название шрифта, высоту строки и некоторые другие.


font: 16px/26px "Arial", sans-serif;
Если значение обычного свойства не было задано в составном, то браузер при «расшифровке» использует исходное значение этого свойства.



Типы значений: абсолютные и относительные
Абсолютные единицы измерения привязаны к настоящим физическим размерам и связаны между собой жёсткими пропорциями. 
Пиксели, px, используют чаще всего, остальные абсолютные единицы почти не применяют. 

Примеры абсолютных единиц измерения:
font-size: 1cm;
font-size: 10mm;
font-size: 38px;


Относительные единицы измерения описывают значения, которые зависят от других значений. 
Например, ширина элемента в процентах зависит от ширины родительского элемента, а ширина элемента в em зависит от размера шрифта самого элемента. 
К относительным единицам относятся em, rem, vh, vw и некоторые другие, ну и, конечно же, проценты.



Стили по умолчанию
Некоторым элементам можно не задавать никаких стилей, но у них всё равно будет какое-то оформление. 
Например, у списка <ul> есть отступы и маркеры. 
Такие стили называются стилями по умолчанию и задаются внутри браузерных стилей изначально. 
Их можно переопределить или сбросить, задав другие значения свойств элементу.




Каскадирование
Когда браузер отрисовывает страницу, он должен определить итоговый вид каждого HTML-элемента. 
Для этого он собирает все CSS-правила, которые относятся к каждому элементу, ведь на элемент могут влиять сразу несколько CSS-правил. 
Механизм комбинирования стилей из разных источников в итоговый набор свойств и значений для каждого тега называется каскадностью. 

Например, есть такой элемент в разметке:

<p class="beloved-color">Зелёный - мой любимый цвет</p>

Заданные стили:
.beloved-color { color: green; }

Браузерные стили:
margin: 1em 0;

Итоговые стили:
color: green;
margin: 1em 0;




Конфликт свойств
На один элемент могут действовать несколько CSS-правил. 
Если в этих правилах есть одинаковые свойства с разными значениями, то возникает конфликт. 
Например:
ul { list-style: disc; }
.blog-navigation ul { list-style: none; }

Браузеру нужно как-то решать, какими будут итоговые значения конфликтующих свойств. 
Конфликт разрешается максимум за три шага. Если на текущем шаге определиться не удалось, то выполняется следующий шаг. 



Вот эти шаги:
Сравниваются приоритеты стилевых файлов, в которых находятся конфликтующие свойства. 
Например, авторские (то есть наши) стили приоритетнее браузерных.
Сравнивается специфичность селекторов у CSS-правил с конфликтующими свойствами. 
Например, селектор по классу более специфичен, чем селектор по тегу.
Побеждает то свойство, которое находится ниже в коде.
Каскад работает и внутри CSS-правил.




Встраивание и подключение внешних стилей
Внешние стили подключаются через тег <link>
<link rel="stylesheet" href="style.css">



Встраивание стилей в тег <style>. 
Его обычно размещают внутри <head>:
<head>
  <style>
    CSS-код
  </style>
</head>
Такой способ используется для оптимизации загрузки страницы, ведь в таком случае браузер не будет отправлять дополнительных запросов на сервер.




Встраивание в атрибут style:
<div style="width: 50%;"></div>
Свойства и значения, прописанные таким образом, применятся точечно к одному элементу.
Обычно использование этого способа считается плохой практикой. 
Но иногда в виде исключения бывает удобнее воспользоваться встраиванием стилей в атрибут style, чем писать отдельные CSS-правила. 
Например, когда нужно управлять стилями именно из разметки, и создавать отдельные классы при этом будет излишне. 
Так бывает, когда какие-то стилевые параметры устанавливаются с помощью сторонних программ или другими людьми, например, через CMS.

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

CSS-правила

CSS — это язык для оформления структурированных документов, например, HTML- документов.

Синтаксис — это плоский список CSS-правил.

CSS-правило состоит из селектора и перечня свойств и их значений:

селектор {

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

}

Для комментариев в CSS используются символы /* и */.

Селекторы

Селектор находится в начале CSS-правила, до фигурных скобок, и определяет, к каким HTML-элементам применятся свойства и значения из правила.

.feature-kitten {

padding-top: 60px;

}

Простейшие (и самые популярные) селекторы — это селекторы по тегам и по классам.

Селекторы по тегам содержат имя тега без символов < и > и применяются ко всем подходящим тегам.

Селекторы по классам начинаются с точки, за которой идёт имя класса, и применяются ко всем тегам с подходящим атрибутом class.

h1 { color: red; }

.info { color: blue; }

На странице может быть несколько списков, и стили применятся ко всем спискам, даже к тем, которые вы менять не хотели.

Чтобы избежать таких ситуаций, лучше не использовать селекторы по тегам или использовать их как можно реже.

Если у CSS-правил отличаются только селекторы, а свойства и значения одинаковые, то их можно сгруппировать через запятую.

Также можно комбинировать любые типы селекторов через пробел.

Такие селекторы называются вложенными или контекстными и читаются справа налево.

Например:

nav a {…}

.menu ul {…}

.post .title {…}

Свойства и значения

Список свойств и значений находится внутри фигурных скобок CSS-правила.

Свойство определяет, какую характеристику внешнего вида мы хотим изменить, а значение — как именно.

.feature-kitten {

padding-top: 60px;

}

Каждый раз, когда мы добавляем новое свойство или изменяем его значение, мы меняем что-то на странице.

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

Наследование в CSS — это механизм, с помощью которого значения свойств элемента-родителя передаются его элементам-потомкам.

Стили, присвоенные одному элементу, наследуются всеми потомками (вложенными элементами), но только в том случае, если они где-то явно не переопределены.

Составные свойства

В CSS есть обычные свойства, управляющие одним параметром отображения, и есть составные свойства, управляющие одновременно несколькими параметрами.

Например, свойство font.

Оно задаёт сразу шесть параметров: размер и название шрифта, высоту строки и некоторые другие.

font: 16px/26px "Arial", sans-serif;

Если значение обычного свойства не было задано в составном, то браузер при «расшифровке» использует исходное значение этого свойства.

Типы значений: абсолютные и относительные

Абсолютные единицы измерения привязаны к настоящим физическим размерам и связаны между собой жёсткими пропорциями.

Пиксели, px, используют чаще всего, остальные абсолютные единицы почти не применяют.

Примеры абсолютных единиц измерения:

font-size: 1cm;

font-size: 10mm;

font-size: 38px;

Относительные единицы измерения описывают значения, которые зависят от других значений.

Например, ширина элемента в процентах зависит от ширины родительского элемента, а ширина элемента в em зависит от размера шрифта самого элемента.

К относительным единицам относятся em, rem, vh, vw и некоторые другие, ну и, конечно же, проценты.

Стили по умолчанию

Некоторым элементам можно не задавать никаких стилей, но у них всё равно будет какое-то оформление.

Например, у списка <ul> есть отступы и маркеры.

Такие стили называются стилями по умолчанию и задаются внутри браузерных стилей изначально.

Их можно переопределить или сбросить, задав другие значения свойств элементу.

Каскадирование

Когда браузер отрисовывает страницу, он должен определить итоговый вид каждого HTML-элемента.

Для этого он собирает все CSS-правила, которые относятся к каждому элементу, ведь на элемент могут влиять сразу несколько CSS-правил.

Механизм комбинирования стилей из разных источников в итоговый набор свойств и значений для каждого тега называется каскадностью.

Например, есть такой элемент в разметке:

<p class="beloved-color">Зелёный - мой любимый цвет</p>

Заданные стили:

.beloved-color { color: green; }

Браузерные стили:

margin: 1em 0;

Итоговые стили:

color: green;

margin: 1em 0;

Конфликт свойств

На один элемент могут действовать несколько CSS-правил.

Если в этих правилах есть одинаковые свойства с разными значениями, то возникает конфликт.

Например:

ul { list-style: disc; }

.blog-navigation ul { list-style: none; }

Браузеру нужно как-то решать, какими будут итоговые значения конфликтующих свойств.

Конфликт разрешается максимум за три шага. Если на текущем шаге определиться не удалось, то выполняется следующий шаг.

Вот эти шаги:

Сравниваются приоритеты стилевых файлов, в которых находятся конфликтующие свойства.

Например, авторские (то есть наши) стили приоритетнее браузерных.

Сравнивается специфичность селекторов у CSS-правил с конфликтующими свойствами.

Например, селектор по классу более специфичен, чем селектор по тегу.

Побеждает то свойство, которое находится ниже в коде.

Каскад работает и внутри CSS-правил.

Встраивание и подключение внешних стилей

Внешние стили подключаются через тег <link>

Встраивание стилей в тег <style>.

Его обычно размещают внутри <head>:

<head>

<style>

CSS-код

</style>

</head>

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

Встраивание в атрибут style:

Свойства и значения, прописанные таким образом, применятся точечно к одному элементу.

Обычно использование этого способа считается плохой практикой.

Но иногда в виде исключения бывает удобнее воспользоваться встраиванием стилей в атрибут style, чем писать отдельные CSS-правила.

Например, когда нужно управлять стилями именно из разметки, и создавать отдельные классы при этом будет излишне.

Так бывает, когда какие-то стилевые параметры устанавливаются с помощью сторонних программ или другими людьми, например, через CMS.

Конспект: Наследование и каскадирование

Ссылки

https://htmlacademy.ru/

1	https://htmlacademy.ru/

Иерархическое дерево

HTML-документ представляет собой иерархическое дерево. 
Это означает, что у каждого элемента (кроме корневого) есть только один родитель, то есть элемент, 
внутри которого он располагается. 
У корневого раздела родитель отсутствует. 

Рассмотрим простейшую страницу:

<html>
   <head></head>
   <body>
      <p>Текст документа</p>
      <p class="text">Выделенная <span>строка</span></p>
   </body>
</html>

В данном примере видно, что у элемента span родителем является p.text, а у p.text родитель — body.
Иерархическая структура документа определяет основы концепции наследования.

HTML-документ представляет собой иерархическое дерево.

Это означает, что у каждого элемента (кроме корневого) есть только один родитель, то есть элемент,

внутри которого он располагается.

У корневого раздела родитель отсутствует.

Рассмотрим простейшую страницу:

<html>

<body>

<p>Текст документа</p>

<p class="text">Выделенная <span>строка</span></p>

</body>

</html>

В данном примере видно, что у элемента span родителем является p.text, а у p.text родитель — body.

Иерархическая структура документа определяет основы концепции наследования.

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

Наследование в CSS — механизм, с помощью которого значения свойств элемента-родителя передаются его элементам-потомкам.
Стили, присвоенные некоторому элементу, наследуются всеми потомками (вложенными элементами), если они не переопределены явно. 
Например, размер шрифта и его цвет достаточно применить к body, чтобы все элементы внутри имели те же свойства.
Наследование позволяет сократить размер таблицы стилей, но если стилей много, 
то отследить какой родительский элемент установил некоторое свойство, становится сложнее.

<!DOCTYPE html>
<html>
  <head>
    <title>Наследование</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="setting.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Заголовок</h1>
    <ul>
      <li>Пункт списка</li>
      <li>Пункт списка</li>
      <li>Пункт списка</li>
    </ul>
    <p>Текст первого параграфа.</p>
    <p>Текст второго параграфа.</p>
  </body>
</html>


body {
  font-family: "PT Sans", sans-serif;
  color: #2980b9;
  font-size: 12px;
}

li {
color: #1abc9c;
}

Наследование в CSS — механизм, с помощью которого значения свойств элемента-родителя передаются его элементам-потомкам.

Стили, присвоенные некоторому элементу, наследуются всеми потомками (вложенными элементами), если они не переопределены явно.

Например, размер шрифта и его цвет достаточно применить к body, чтобы все элементы внутри имели те же свойства.

Наследование позволяет сократить размер таблицы стилей, но если стилей много,

то отследить какой родительский элемент установил некоторое свойство, становится сложнее.

<!DOCTYPE html>

<html>

<head>

<title>Наследование</title>

</head>

<body>

<h1>Заголовок</h1>

<ul>

<li>Пункт списка</li>

</ul>

<p>Текст первого параграфа.</p>

<p>Текст второго параграфа.</p>

</body>

</html>

body {

font-family: "PT Sans", sans-serif;

color: #2980b9;

font-size: 12px;

}

li {

color: #1abc9c;

}

Наследование «на пальцах»

Рассмотрим пример:

<p class="text">Строка c выделенным <span>словом</span></p>

Представим, что нам нужно установить красный цвет текста для всего текста. 
Зададим CSS-свойства следующим образом:

.text {
  color: red;
}

Благодаря наследованию цвет текста в теге span автоматически станет красным:
Нам пришлось бы отдельно прописывать цвет текста для тега span.
И тогда установка таких простых свойств как стиль шрифта стала бы большой проблемой:
нужно было бы задавать свойства для всех возможных вложенных тегов.

Рассмотрим пример:

<p class="text">Строка c выделенным <span>словом</span></p>

Представим, что нам нужно установить красный цвет текста для всего текста.

Зададим CSS-свойства следующим образом:

.text {

color: red;

}

Благодаря наследованию цвет текста в теге span автоматически станет красным:

Нам пришлось бы отдельно прописывать цвет текста для тега span.

И тогда установка таких простых свойств как стиль шрифта стала бы большой проблемой:

нужно было бы задавать свойства для всех возможных вложенных тегов.

Ещё немного про наследование

Наверняка вы обращали внимание, что не все свойства наследуются тегами-потомками от их родителей.
Действительно, было бы странно, если бы свойство border автоматически устанавливалось для всех вложенных элементов.

Например, для этого куска кода:
<p class="bordered">Cтрока c выделенным <span>словом</span></p>

Установим CSS-свойство:
.bordered {
  border: 1px solid green;
}

На самом деле граница будет нарисована только у тега p.

Наверняка вы обращали внимание, что не все свойства наследуются тегами-потомками от их родителей.

Действительно, было бы странно, если бы свойство border автоматически устанавливалось для всех вложенных элементов.

Например, для этого куска кода:

<p class="bordered">Cтрока c выделенным <span>словом</span></p>

Установим CSS-свойство:

.bordered {

border: 1px solid green;

}

На самом деле граница будет нарисована только у тега p.

Наследуемые свойства

К наследуемым свойствам относятся в первую очередь свойства, определяющие параметры отображения текста:
font-size, font-family, font-style, font-weight, color, text-align, text-transform, text-indent, line-height, letter-spacing, word-spacing, white-space, direction и т. д.
Также к наследуемым свойствам относятся list-style, cursor, visibility, border-collapse и некоторые другие. Но они используются значительно реже.

Весь список наследуемых свойств смотрите в стандарте CSS.
https://www.w3.org/TR/CSS21/propidx.html 
Значение yes в колонке Inherited?.
Эти свойства можно и нужно задавать через предков, следуя семантике документа.

Например, параметры текста зачастую не меняются в пределах отдельных блоков страницы: 
меню, основного содержания, информационных панелей. 
Поэтому общие параметры текста (цвет, размер, гарнитура) обычно указывают в стилях самих блоков.

К наследуемым свойствам относятся в первую очередь свойства, определяющие параметры отображения текста:

font-size, font-family, font-style, font-weight, color, text-align, text-transform, text-indent, line-height, letter-spacing, word-spacing, white-space, direction и т. д.

Также к наследуемым свойствам относятся list-style, cursor, visibility, border-collapse и некоторые другие. Но они используются значительно реже.

Весь список наследуемых свойств смотрите в стандарте CSS.

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

Значение yes в колонке Inherited?.

Эти свойства можно и нужно задавать через предков, следуя семантике документа.

Например, параметры текста зачастую не меняются в пределах отдельных блоков страницы:

меню, основного содержания, информационных панелей.

Поэтому общие параметры текста (цвет, размер, гарнитура) обычно указывают в стилях самих блоков.

Не наследуемые свойства

В предыдущем задании мы перечислили основные наследуемые свойства. 
Все остальные относятся к не наследуемым. 
Это параметры позиционирования, размеров, отступов, фона, рамок и т. д.

А именно: 
background, border, padding, margin, width, height, position и др.

Весь список не наследуемых свойств смотрите в стандарте CSS. 
https://www.w3.org/TR/CSS21/propidx.html
Значение no в колонке Inherited?.

Не наследуются они из соображений здравого смысла. 
Например: 
если для какого-либо блока установлен внутренний отступ,
автоматически выставлять такой же отступ каждому вложенному элементу нет никакой надобности. 
Эти параметры чаще всего уникальны для каждого отдельного блока.

В предыдущем задании мы перечислили основные наследуемые свойства.

Все остальные относятся к не наследуемым.

Это параметры позиционирования, размеров, отступов, фона, рамок и т. д.

А именно:

background, border, padding, margin, width, height, position и др.

Весь список не наследуемых свойств смотрите в стандарте CSS.

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

Значение no в колонке Inherited?.

Не наследуются они из соображений здравого смысла.

Например:

если для какого-либо блока установлен внутренний отступ,

автоматически выставлять такой же отступ каждому вложенному элементу нет никакой надобности.

Эти параметры чаще всего уникальны для каждого отдельного блока.

Принудительное наследование

Для каждого свойства может быть задано значение inherit.
Оно означает, что данное свойство принимает такое же значение, как и у родительского элемента. 
Значение inherit может быть использовано для усиления наследуемых значений, а также в свойствах, которые обычно не наследуются.

Запись выглядит следующим образом:
p {
  background: inherit;
}

В данном случае у тегов p свойство background будет таким же, как и у их родительских тегов.


<!DOCTYPE html>
<html>
  <head>
    <title>Принудительное наследование</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="setting.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <p>Первый список</p>
    <ul class="first-list">
      <li>Первый элемент списка</li>
      <li>Второй элемент списка</li>
      <li>Третий элемент списка</li>
    </ul>
    <p>Второй список</p>
    <ul class="second-list">
      <li>Первый элемент списка</li>
      <li>Второй элемент списка</li>
      <li>Третий элемент списка</li>
    </ul>
  </body>
</html>


body {
  font-family: "PT Sans", sans-serif;
}

ul {
  margin: 5px;
  padding: 5px;
  border: 1px solid #666666;

  list-style: none;
}

.second-list li {
  border: inherit;
  margin: inherit;
  padding: inherit;
  }

Для каждого свойства может быть задано значение inherit.

Оно означает, что данное свойство принимает такое же значение, как и у родительского элемента.

Значение inherit может быть использовано для усиления наследуемых значений, а также в свойствах, которые обычно не наследуются.

Запись выглядит следующим образом:

p {

background: inherit;

}

В данном случае у тегов p свойство background будет таким же, как и у их родительских тегов.

<!DOCTYPE html>

<html>

<head>

<title>Принудительное наследование</title>

</head>

<body>

<p>Первый список</p>

<li>Первый элемент списка</li>

<li>Второй элемент списка</li>

<li>Третий элемент списка</li>

</ul>

<p>Второй список</p>

<li>Первый элемент списка</li>

<li>Второй элемент списка</li>

<li>Третий элемент списка</li>

</ul>

</body>

</html>

body {

font-family: "PT Sans", sans-serif;

}

ul {

margin: 5px;

padding: 5px;

border: 1px solid #666666;

list-style: none;

}

.second-list li {

border: inherit;

margin: inherit;

padding: inherit;

}

Каскадирование

CSS расшифровывается как «Cascading Style Sheets» или «каскадные таблицы стилей».
Каскадность обозначает, что к одному и тому же элементу может применяться несколько CSS-правил (наборов CSS-свойств). 
Среди этих свойств могут быть и конфликтующие между собой.
Поэтому существуют инструкции, которые определяют, каким будет финальный набор свойств элемента.

Например, для элемента:
<p class="text" style="color: red;"></p>

CSS-правила существуют как минимум в трёх разных местах:
в подключаемом файле style.css для селекторов p или .text;
в атрибуте style;
в стандартных стилях отображения, встроенных в браузер.
Каскадирование как раз и определяет, какие именно свойства из этих источников применятся к данному абзацу.

Имеется три основные концепции, управляющие порядком, в котором применяются CSS-свойства:
важность;
специфичность;
порядок исходного кода.
Самыми важными для нас являются последние две и подробнее о них мы поговорим отдельно.

CSS расшифровывается как «Cascading Style Sheets» или «каскадные таблицы стилей».

Каскадность обозначает, что к одному и тому же элементу может применяться несколько CSS-правил (наборов CSS-свойств).

Среди этих свойств могут быть и конфликтующие между собой.

Поэтому существуют инструкции, которые определяют, каким будет финальный набор свойств элемента.

Например, для элемента:

CSS-правила существуют как минимум в трёх разных местах:

в подключаемом файле style.css для селекторов p или .text;

в атрибуте style;

в стандартных стилях отображения, встроенных в браузер.

Каскадирование как раз и определяет, какие именно свойства из этих источников применятся к данному абзацу.

Имеется три основные концепции, управляющие порядком, в котором применяются CSS-свойства:

важность;

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

порядок исходного кода.

Самыми важными для нас являются последние две и подробнее о них мы поговорим отдельно.

Битва за курочку

Вот HTML-код, в котором есть абзац с двумя классами:
<p class="red blue">Синий или красный?</p>
А вот CSS-код c двумя правилами для этих классов:

.blue {
  color: blue;
}

.red {
  color: red;
}

Вопрос: какого цвета будет текст абзаца? Какое из CSS-правил приоритетнее?
Ответ: красного цвета, второе правило приоритетнее.

Это происходит потому, что селекторы у правил одинакового типа, и соответственно обладают одинаковой специфичностью. 
В таком случае более высоким приоритетом обладает то правило, которое расположено в CSS-коде ниже.
В нашем случае это правило для класса red.

Вот HTML-код, в котором есть абзац с двумя классами:

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

А вот CSS-код c двумя правилами для этих классов:

.blue {

color: blue;

}

.red {

color: red;

}

Вопрос: какого цвета будет текст абзаца? Какое из CSS-правил приоритетнее?

Ответ: красного цвета, второе правило приоритетнее.

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

В таком случае более высоким приоритетом обладает то правило, которое расположено в CSS-коде ниже.

В нашем случае это правило для класса red.

Битва за курочку. Раунд второй

Чуть более сложный пример. 
Тот же HTML:
<p class="red blue">Синий или красный?</p>

Немного другой CSS:
p.blue {
  color: blue;
}

.red {
  color: red;
}

В этом случае текст абзаца будет синим. 
Происходит это потому, что селектор p.blue более специфичный, чем селектор .red.

Простое объяснение специфичности звучит так:
Чем меньшее количество элементов потенциально может выбрать селектор, тем он специфичнее.
В нашем примере селектор .red выберет все теги с нужным классом, а селектор p.blue выберет только абзацы с нужным классом.

Чуть более сложный пример.

Тот же HTML:

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

Немного другой CSS:

p.blue {

color: blue;

}

.red {

color: red;

}

В этом случае текст абзаца будет синим.

Происходит это потому, что селектор p.blue более специфичный, чем селектор .red.

Простое объяснение специфичности звучит так:

Чем меньшее количество элементов потенциально может выбрать селектор, тем он специфичнее.

В нашем примере селектор .red выберет все теги с нужным классом, а селектор p.blue выберет только абзацы с нужным классом.

Битва за курочку. Борьба накаляется

Как вы уже знаете, существуют селекторы не только по классам, но и по id. 
Они начинаются с решётки #.

HTML:

<div id="experiment-1" class="experiment">
  <p class="red blue">Синий или красный?</p>
</div>

CSS:

#experiment-1 .blue {
  color: blue;
}
.experiment .red {
  color: red;
}

Особенность атрибута id заключается в том, что его значение должно быть уникальным в пределах страницы. 
То есть, может существовать только один тег с определённым значением id.
Получается, что селектор по id может выбрать только один элемент.
И поэтому он на порядок специфичнее селекторов по тегам, классам, а также комбинаций этих селекторов.
Синий победит.

Как вы уже знаете, существуют селекторы не только по классам, но и по id.

Они начинаются с решётки #.

HTML:

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

</div>

CSS:

#experiment-1 .blue {

color: blue;

}

.experiment .red {

color: red;

}

Особенность атрибута id заключается в том, что его значение должно быть уникальным в пределах страницы.

То есть, может существовать только один тег с определённым значением id.

Получается, что селектор по id может выбрать только один элемент.

И поэтому он на порядок специфичнее селекторов по тегам, классам, а также комбинаций этих селекторов.

Синий победит.

Битва за курочку. Запрещённый приём

CSS-правила, которые прописаны в style обладают наивысшим приоритетом. 
Такой способ задания стилей не приветствуется в профессиональной вёрстке сайтов и годится только для создания быстрых прототипов. 
Поэтому мы и назвали этот приём запрещённым.

Однако существует способ переопределить из подключаемых CSS-файлов даже стили, заданные в атрибуте style. 
Для этого нужно использовать ключевое слово !important. 
Оно задаёт CSS-свойству усиленный приоритет. 

Вот пример:
HTML:

<p style="color: red;" class="blue">Синий или красный?</p>
CSS:

.blue {
  color: blue !important;
}

Цвет текста в этом примере будет синим.

CSS-правила, которые прописаны в style обладают наивысшим приоритетом.

Такой способ задания стилей не приветствуется в профессиональной вёрстке сайтов и годится только для создания быстрых прототипов.

Поэтому мы и назвали этот приём запрещённым.

Однако существует способ переопределить из подключаемых CSS-файлов даже стили, заданные в атрибуте style.

Для этого нужно использовать ключевое слово !important.

Оно задаёт CSS-свойству усиленный приоритет.

Вот пример:

HTML:

<p style="color: red;" class="blue">Синий или красный?</p>

CSS:

.blue {

color: blue !important;

}

Цвет текста в этом примере будет синим.

Конспект: селекторы

Ссылки

https://htmlacademy.ru/

1	https://htmlacademy.ru/

Нелёгкая жизнь без селекторов

Селекторы позволяют очень точно указывать к каким элементам применять CSS-свойства. 
Селекторы — это наш снайперский прицел.

Но для начала представим, что механизма селекторов не существует. 
Как в этом случае задавать CSS-свойства элементам? 
С помощью атрибута style. 


Например:

<p style="color: red;">...</p>

<ul class="target">
      <li style="background-color: white;">1</li>
      <li style="background-color: white;">2</li>
      <li style="background-color: white;">3</li>
      <li style="background-color: white;">4</li>
      <li style="background-color: white;">5</li>
    </ul>

Селекторы позволяют очень точно указывать к каким элементам применять CSS-свойства.

Селекторы — это наш снайперский прицел.

Но для начала представим, что механизма селекторов не существует.

Как в этом случае задавать CSS-свойства элементам?

С помощью атрибута style.

Например:

</ul>

Селекторы по тегам

Задавать атрибут style для каждого тега неудобно и долго. 
Особенно, если тот же результат можно получить с помощью единственного CSS-правила, в котором используется селектор для тега li.
С помощью селекторов по именам тегов можно задать стили для всех элементов списка, изображений, абзацев и так далее. 
Эти селекторы содержат имя тега без символов < и >. 

Например:
li {
  /* стили для элементов списка */
}

Одно правило может относиться сразу к нескольким селекторам, в таком случае селекторы перечисляются через запятую:

a, img {
  /* стили для ссылок и изображений */
}

li { 
  
  background-color: white; 
  
  }

Задавать атрибут style для каждого тега неудобно и долго.

Особенно, если тот же результат можно получить с помощью единственного CSS-правила, в котором используется селектор для тега li.

С помощью селекторов по именам тегов можно задать стили для всех элементов списка, изображений, абзацев и так далее.

Эти селекторы содержат имя тега без символов < и >.

Например:

li {

/* стили для элементов списка */

}

Одно правило может относиться сразу к нескольким селекторам, в таком случае селекторы перечисляются через запятую:

a, img {

/* стили для ссылок и изображений */

}

li {

background-color: white;

}

Селекторы по классам

Класс — это один из атрибутов тегов. 

Выглядит он вот так:

<li class="first"></li>
Этот атрибут особенный, так как в CSS существует возможность выбирать элементы по классу. 
Делается это с помощью такого селектора: .имя_класса. 

Например:

.first {
  /* стили для класса first */
}

Имена классов могут состоять из латинских символов, цифр и знаков - и _. 
Имя класса должно начинаться с латинской буквы.

Класс — это один из атрибутов тегов.

Выглядит он вот так:

Этот атрибут особенный, так как в CSS существует возможность выбирать элементы по классу.

Делается это с помощью такого селектора: .имя_класса.

Например:

.first {

/* стили для класса first */

}

Имена классов могут состоять из латинских символов, цифр и знаков - и _.

Имя класса должно начинаться с латинской буквы.

Отрабатываем селекторы по классам

Синтаксис CSS позволяет выбирать элементы не только по одному классу или тегу. 
Можно, например, выбрать элемент одновременно по тегу и по классу или же элемент с двумя классами сразу. 
Для этого селектор составляется просто одной строкой из всех желаемых «частей» без пробелов. 
Давайте рассмотрим примеры.


В селекторе по тегу и классу первым пишется название тега, а потом идёт класс:
/* выбор всех тегов ul с классом target */
ul.target {...}

<ul class="target"></ul>
Если у элемента задано несколько классов, в HTML и в CSS-селекторе они могут идти в разном порядке — это не будет влиять на выборку элементов:
/* выбор элементов с двумя классами: text и green */
.text.green {...}

<span class="text green"></span>
<p class="green text"></p>


Количество классов в селекторе может быть любым:
/* выбор тегов span с четырьмя классами: underlined, red, big и text */
span.underlined.red.big.text {...}

<span class="underlined red big text"></span>

Синтаксис CSS позволяет выбирать элементы не только по одному классу или тегу.

Можно, например, выбрать элемент одновременно по тегу и по классу или же элемент с двумя классами сразу.

Для этого селектор составляется просто одной строкой из всех желаемых «частей» без пробелов.

Давайте рассмотрим примеры.

В селекторе по тегу и классу первым пишется название тега, а потом идёт класс:

/* выбор всех тегов ul с классом target */

ul.target {...}

Если у элемента задано несколько классов, в HTML и в CSS-селекторе они могут идти в разном порядке — это не будет влиять на выборку элементов:

/* выбор элементов с двумя классами: text и green */

.text.green {...}

Количество классов в селекторе может быть любым:

/* выбор тегов span с четырьмя классами: underlined, red, big и text */

span.underlined.red.big.text {...}

Контекстные селекторы

Селектор может состоять из нескольких частей, разделённых пробелом, например:

p strong { ... }
ul .hit { ... }
.footer .menu a { ... }

Такие селекторы называют контекстными или вложенными. 
Их используют для того, чтобы применить стили к элементу, только если он вложен в нужный элемент.
Например, селектор .menu a сработает для ссылки a только в том случае, если она расположена внутри элемента с классом .menu.

Читать их проще всего справа налево:
/* выбрать все теги strong внутри тегов p */
p strong { ... }

/* выбрать все элементы с классом .hit внутри тегов ul */
ul .hit { ... }

/* выбрать все ссылки внутри элементов с классом .menu,
   которые лежат внутри элементов с классом .footer */
.footer .menu a { ... }

Таким образом, можно задавать элементам различные стили в зависимости от их контекста. 
Если ссылка расположена внутри меню, сделать её крупнее, а если внутри основного текста, то задать ей нужный цвет.

Селектор может состоять из нескольких частей, разделённых пробелом, например:

p strong { ... }

ul .hit { ... }

.footer .menu a { ... }

Такие селекторы называют контекстными или вложенными.

Их используют для того, чтобы применить стили к элементу, только если он вложен в нужный элемент.

Например, селектор .menu a сработает для ссылки a только в том случае, если она расположена внутри элемента с классом .menu.

Читать их проще всего справа налево:

/* выбрать все теги strong внутри тегов p */

p strong { ... }

/* выбрать все элементы с классом .hit внутри тегов ul */

ul .hit { ... }

/* выбрать все ссылки внутри элементов с классом .menu,

которые лежат внутри элементов с классом .footer */

.footer .menu a { ... }

Таким образом, можно задавать элементам различные стили в зависимости от их контекста.

Если ссылка расположена внутри меню, сделать её крупнее, а если внутри основного текста, то задать ей нужный цвет.

Соседние селекторы

Контекстные селекторы используются для вложенных друг в друга элементов, а соседние — для расположенных рядом.
Например, теги <li> в списке являются соседними по отношению друг к другу и вложенными в тег <ul>.
Соседние селекторы записываются с помощью знака +, например, селектор1 + селектор2. 
Стили применятся к элементу, подходящему под селектор2, только если сразу перед ним расположен элемент, подходящий под селектор1.

Пример. Есть два элемента списка:

<ul>
  <li class="hit"></li>
  <li class="miss"></li>
</ul>

Селектор .hit + .miss применит стили к элементу с классом miss, так как перед ним есть элемент с классом hit.
Селектор .hit + li, а также селектор li + .miss, или даже li + li тоже применит стили к элементу с классом miss, то есть ко второму элементу списка.
А вот селектор .miss + .hit не сработает, так как элемент с классом miss находится после элемента с классом hit в разметке.

.first + li + li {
  background-color: white;
  }

Контекстные селекторы используются для вложенных друг в друга элементов, а соседние — для расположенных рядом.

Например, теги <li> в списке являются соседними по отношению друг к другу и вложенными в тег <ul>.

Соседние селекторы записываются с помощью знака +, например, селектор1 + селектор2.

Стили применятся к элементу, подходящему под селектор2, только если сразу перед ним расположен элемент, подходящий под селектор1.

Пример. Есть два элемента списка:

<ul>

</ul>

Селектор .hit + .miss применит стили к элементу с классом miss, так как перед ним есть элемент с классом hit.

Селектор .hit + li, а также селектор li + .miss, или даже li + li тоже применит стили к элементу с классом miss, то есть ко второму элементу списка.

А вот селектор .miss + .hit не сработает, так как элемент с классом miss находится после элемента с классом hit в разметке.

.first + li + li {

background-color: white;

}

Контекстные и соседние селекторы

Селекторы в CSS можно очень гибко комбинировать. 
В частности, можно комбинировать контекстные и соседние селекторы.
Например, селектор .player-1 .hit + .miss сработает для тега с классом miss, если сразу перед ним расположен тег с классом hit и оба тега расположены внутри тега с классом player-1.


li {
  background-color: white;
  }
  
  .third + li {
    background-color: red;
    }
    
.first + li  {
  background-color: red;
  }   
  
.shooter-2 .third + li  {
  background-color: yellow;
  }

Селекторы в CSS можно очень гибко комбинировать.

В частности, можно комбинировать контекстные и соседние селекторы.

Например, селектор .player-1 .hit + .miss сработает для тега с классом miss, если сразу перед ним расположен тег с классом hit и оба тега расположены внутри тега с классом player-1.

li {

background-color: white;

}

.third + li {

background-color: red;

}

.first + li {

background-color: red;

}

.shooter-2 .third + li {

background-color: yellow;

}

Дочерние селекторы

Потомком называются любые элементы, расположенные внутри родительского элемента. 
А дочерними элементами называются ближайшие потомки. 

Взгляните на пример:

<ul>
  <li><span>...</span></li>
  <li><span>...</span></li>
</ul>

По отношению к списку <ul> элементы <li> являются дочерними элементами и потомками, а <span> — потомки, но не дочерние элементы.
Контекстные селекторы влияют на всех потомков, что не всегда удобно. 
Иногда необходимо задать стили только для дочерних элементов. 
Особенно это полезно при работе с многоуровневыми списками.

Для этого существует дочерний селектор, в котором используется символ >. 

Например: ul > li или ul > li > span.

.places li {
  border-bottom: 2px solid #cccccc;
}

.places span {
  font-weight: bold;
}

.places ul > li {
  border-bottom: none;
  
}


.places ul > li > span {
  border-bottom: none;
  font-weight: normal;
}

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

А дочерними элементами называются ближайшие потомки.

Взгляните на пример:

<ul>

</ul>

По отношению к списку <ul> элементы <li> являются дочерними элементами и потомками, а <span> — потомки, но не дочерние элементы.

Контекстные селекторы влияют на всех потомков, что не всегда удобно.

Иногда необходимо задать стили только для дочерних элементов.

Особенно это полезно при работе с многоуровневыми списками.

Для этого существует дочерний селектор, в котором используется символ >.

Например: ul > li или ul > li > span.

.places li {

border-bottom: 2px solid #cccccc;

}

.places span {

font-weight: bold;

}

.places ul > li {

border-bottom: none;

}

.places ul > li > span {

border-bottom: none;

font-weight: normal;

}

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

Псевдоклассы — это дополнения к обычным селекторам, которые делают их ещё точнее и мощнее. 
Обычный селектор — это снайперский прицел, а с псевдоклассом он становится прибором ночного видения.

Псевдокласс добавляется к селектору c помощью символа :  , вот так селектор:псевдокласс. 


Например:

a:visited { ... }
li:last-child { ... }
.alert:hover { ... }

Знакомство с псевдоклассами мы начнём с first-child и last-child.

Псевдокласс first-child позволяет выбрать первый дочерний элемент родителя, а last-child — последний дочерний элемент. 


Например:
li:last-child { ... }
Этот селектор выберет последний элемент списка.

li {
  background-color: white;
    }
    
li:first-child {
  background-color: red;
  }    
  
li:last-child {
  background-color: yellow;
  }

Псевдоклассы — это дополнения к обычным селекторам, которые делают их ещё точнее и мощнее.

Обычный селектор — это снайперский прицел, а с псевдоклассом он становится прибором ночного видения.

Псевдокласс добавляется к селектору c помощью символа : , вот так селектор:псевдокласс.

Например:

a:visited { ... }

li:last-child { ... }

.alert:hover { ... }

Знакомство с псевдоклассами мы начнём с first-child и last-child.

Псевдокласс first-child позволяет выбрать первый дочерний элемент родителя, а last-child — последний дочерний элемент.

Например:

li:last-child { ... }

Этот селектор выберет последний элемент списка.

li {

background-color: white;

}

li:first-child {

background-color: red;

}

li:last-child {

background-color: yellow;

}

Псевдокласс :nth-child

Псевдоклассы из предыдущего примера относятся к семейству псевдоклассов, помогающих выбирать элементы по их расположению.
С помощью псевдокласса nth-child можно выбирать теги по порядковому номеру, не используя классы. 
Синтаксис псевдокласса: селектор:nth-child(выражение). 
Выражением может быть число или формула. 

Например:

1. li:nth-child(2) { ... }
2. li:nth-child(4) { ... }
3. li:nth-child(2n) { ... }

Первый селектор выберет второй элемент списка, второй селектор — четвёртый элемент списка, третий селектор — все чётные элементы. 

li {
  background-color: white;
  }
  
li:nth-child(3) {
  background-color: red;
  
  }  
  
  li:nth-child(4) {
  background-color: red;
  
  }

Псевдоклассы из предыдущего примера относятся к семейству псевдоклассов, помогающих выбирать элементы по их расположению.

С помощью псевдокласса nth-child можно выбирать теги по порядковому номеру, не используя классы.

Синтаксис псевдокласса: селектор:nth-child(выражение).

Выражением может быть число или формула.

Например:

1. li:nth-child(2) { ... }

2. li:nth-child(4) { ... }

3. li:nth-child(2n) { ... }

Первый селектор выберет второй элемент списка, второй селектор — четвёртый элемент списка, третий селектор — все чётные элементы.

li {

background-color: white;

}

li:nth-child(3) {

background-color: red;

}

li:nth-child(4) {

background-color: red;

}

:nth-child и контекстные селекторы

Селекторы с псевдоклассами хорошо сочетаются с контекстными селекторами.
Например, следующий селектор выберет третий тег <li> внутри блока с классом shooter-2.

.shooter-2 li:nth-child(3) { ... }

Селектор не обязательно должен заканчивается псевдоклассом. 
Например, следующий селектор выберет элемент с классом .text в четвёртом элементе списка <li>.

li:nth-child(4) .text { ... }



li {
  background-color: white;
  }
  
.shooter-1 li:nth-child(2) {
  background-color: red;
  }
.shooter-1 li:nth-child(5) {
  background-color: red;
  }  
  
.shooter-2 li:nth-child(1) {
  background-color: red;
  }

Селекторы с псевдоклассами хорошо сочетаются с контекстными селекторами.

Например, следующий селектор выберет третий тег <li> внутри блока с классом shooter-2.

.shooter-2 li:nth-child(3) { ... }

Селектор не обязательно должен заканчивается псевдоклассом.

Например, следующий селектор выберет элемент с классом .text в четвёртом элементе списка <li>.

li:nth-child(4) .text { ... }

li {

background-color: white;

}

.shooter-1 li:nth-child(2) {

background-color: red;

}

.shooter-1 li:nth-child(5) {

background-color: red;

}

.shooter-2 li:nth-child(1) {

background-color: red;

}

Псевдокласс :hover

Некоторые псевдоклассы позволяют выбирать элементы, с которыми взаимодействует пользователь. 
Сначала познакомимся с псевдоклассом :hover.

Этот псевдокласс позволяет выбрать элемент, когда на него наведён курсор мыши и кнопка мыши не нажата. 

Примеры:
1. a:hover { ... }
2. tr:hover { ... }
3 .menu-item:hover { ... }

Первый селектор выбирает ссылку, второй строку таблицы, третий элемент с классом menu-item, но только в том случае, если на них наведён курсор мыши.
Благодаря этому псевдоклассу можно добавлять в интерфейс динамику и интерактивность, так как элементы начинают реагировать на действия пользователя, изменяя свой внешний вид.

table {
  background: rgba(255, 255, 255, 0.95);
}

tr:hover {
  background-color: #fcf8e3;
}

strong:hover {
  color: #0088cc;
}

Некоторые псевдоклассы позволяют выбирать элементы, с которыми взаимодействует пользователь.

Сначала познакомимся с псевдоклассом :hover.

Этот псевдокласс позволяет выбрать элемент, когда на него наведён курсор мыши и кнопка мыши не нажата.

Примеры:

1. a:hover { ... }

2. tr:hover { ... }

3 .menu-item:hover { ... }

Первый селектор выбирает ссылку, второй строку таблицы, третий элемент с классом menu-item, но только в том случае, если на них наведён курсор мыши.

Благодаря этому псевдоклассу можно добавлять в интерфейс динамику и интерактивность, так как элементы начинают реагировать на действия пользователя, изменяя свой внешний вид.

table {

background: rgba(255, 255, 255, 0.95);

}

tr:hover {

background-color: #fcf8e3;

}

strong:hover {

color: #0088cc;

}

Динамические эффекты с помощью :hover

Интересовались ли вы, как с помощью CSS создаются выпадающие меню?
Львиная доля динамических эффектов, создаваемых с помощью CSS, опираются на несколько псевдоклассов, главный из которых, конечно же, :hover. 
Весь секрет заключается в сочетании контекстных селекторов и псевдоклассов. 

Посмотрите на пример:

li.top ul.submenu {
  display: none;
}

li.top:hover ul.submenu {
  display: block;
}


Первое правило прячет список-подменю. 
Второе правило гласит: «если на верхний пункт меню, в котором находится подменю, наведут курсор, то надо показать подменю». 
Вот так всё просто.

Общий принцип такой: родительский элемент реагирует на наведение мыши и изменяет свойства элементов-потомков. 
То есть всё работает на контекстных селекторах вида селектор1:hover селектор2.


em {
  display: none;
}

:hover > em {
  display: inline;
  color:red;
  }
  
strong:hover {
  color: #0088cc;
  }

Интересовались ли вы, как с помощью CSS создаются выпадающие меню?

Львиная доля динамических эффектов, создаваемых с помощью CSS, опираются на несколько псевдоклассов, главный из которых, конечно же, :hover.

Весь секрет заключается в сочетании контекстных селекторов и псевдоклассов.

Посмотрите на пример:

li.top ul.submenu {

display: none;

}

li.top:hover ul.submenu {

display: block;

}

Первое правило прячет список-подменю.

Второе правило гласит: «если на верхний пункт меню, в котором находится подменю, наведут курсор, то надо показать подменю».

Вот так всё просто.

Общий принцип такой: родительский элемент реагирует на наведение мыши и изменяет свойства элементов-потомков.

То есть всё работает на контекстных селекторах вида селектор1:hover селектор2.

em {

display: none;

}

:hover > em {

display: inline;

color:red;

}

strong:hover {

color: #0088cc;

}

Псевдоклассы :link, :visited и :active

Отвлечёмся от биатлона и познакомимся с псевдоклассами для ссылок.

:link выбирает ещё не посещённые ссылки.
:visited выбирает посещённые ссылки.
:active выбирает активные ссылки (кнопка мыши зажата на ссылке).

Пример задания CSS-правил для ссылок:
a:link { ... }
a:visited { ... }
a:hover { ... }
a:active { ... }

Обратите внимание на порядок правил. 
Если их расположить по-другому, то некоторые могут не сработать.

a:link {
  color: black;
  }
  
a:visited {
  color: #cccccc;
  } 
  
a:active {
  color: green;
  }

Отвлечёмся от биатлона и познакомимся с псевдоклассами для ссылок.

:link выбирает ещё не посещённые ссылки.

:visited выбирает посещённые ссылки.

:active выбирает активные ссылки (кнопка мыши зажата на ссылке).

Пример задания CSS-правил для ссылок:

a:link { ... }

a:visited { ... }

a:hover { ... }

a:active { ... }

Обратите внимание на порядок правил.

Если их расположить по-другому, то некоторые могут не сработать.

a:link {

color: black;

}

a:visited {

color: #cccccc;

}

a:active {

color: green;

}

Псевдокласс :focus

Псевдокласс :focus позволяет выбрать элемент, который в данный момент в фокусе. 
Например, текстовое поле, в которое установлен курсор, находится в фокусе.
В фокусе могут быть не только текстовые поля. 
Если вы переключаетесь между элементами веб-страницы с помощью клавиши tab, то в фокус будут попадать ссылки.

Пример использования псевдокласса:

input:focus {
  /* стили для поля в фокусе */
}


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Псевдокласс :focus</title>
    <link rel="stylesheet" href="course-5.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <form class="login" action="https://echo.htmlacademy.ru/courses" method="post">
      <label for="academy-login">Логин</label>
      <input type="text" id="academy-login" name="academy-login">

      <label for="academy-password">Пароль</label>
      <input type="password" id="academy-password" name="academy-password">

      <input type="submit" value="Войти">
    </form>
  </body>
</html>

form input:focus {
  border-color: #0088cc;
}

Псевдокласс :focus позволяет выбрать элемент, который в данный момент в фокусе.

Например, текстовое поле, в которое установлен курсор, находится в фокусе.

В фокусе могут быть не только текстовые поля.

Если вы переключаетесь между элементами веб-страницы с помощью клавиши tab, то в фокус будут попадать ссылки.

Пример использования псевдокласса:

input:focus {

/* стили для поля в фокусе */

}

<!DOCTYPE html>

<html>

<head>

<title>Псевдокласс :focus</title>

</head>

<body>

<label for="academy-login">Логин</label>

<label for="academy-password">Пароль</label>

</form>

</body>

</html>

form input:focus {

border-color: #0088cc;

}

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

Существуют селекторы, которые позволяют выбирать элементы по любым атрибутам.
Чаще всего такие селекторы используются при работе с формами, так как поля форм имеют атрибут type с разными значениями.
Селекторы атрибутов записываются с использованием квадратных скобок: элемент[атрибут]. 

Примеры селекторов:

1. input[checked] { ... }
2. input[type="text"] { ... }

Первый селектор выберет поля формы, у которых есть атрибут checked, 
второй селектор выберет поля формы, у которых атрибут type имеет значение text.

input[required] {
  background-color: #fcf8e3;
  }

input[name="password"] {
  background-color: #f2dede;
  }
  
input[type="submit"] {
  border-color: green;
  }

Существуют селекторы, которые позволяют выбирать элементы по любым атрибутам.

Чаще всего такие селекторы используются при работе с формами, так как поля форм имеют атрибут type с разными значениями.

Селекторы атрибутов записываются с использованием квадратных скобок: элемент[атрибут].

Примеры селекторов:

1. input[checked] { ... }

2. input[type="text"] { ... }

Первый селектор выберет поля формы, у которых есть атрибут checked,

второй селектор выберет поля формы, у которых атрибут type имеет значение text.

input[required] {

background-color: #fcf8e3;

}

input[name="password"] {

background-color: #f2dede;

}

input[type="submit"] {

border-color: green;

}

Селектор по id

Существует ещё один HTML-атрибут, для которого существует специальный селектор. 
Этот атрибут id (идентификатор), а селектор записывается с помощью символа #, например, #some-id.
На значение id распространяются те же ограничения, что и на имя класса. 
Также id должен быть уникальным на странице.

Пример:

HTML<p id="greeting">Приветствие!</p>
CSS#greeting {
  ...
}

Использование селекторов по id при оформлении считается плохой практикой. 
Существуют редкие исключения из этого правила, например, при оживлении слайдера на чистом CSS.

Существует ещё один HTML-атрибут, для которого существует специальный селектор.

Этот атрибут id (идентификатор), а селектор записывается с помощью символа #, например, #some-id.

На значение id распространяются те же ограничения, что и на имя класса.

Также id должен быть уникальным на странице.

Пример:

HTML<p id="greeting">Приветствие!</p>

CSS#greeting {

...

}

Использование селекторов по id при оформлении считается плохой практикой.

Существуют редкие исключения из этого правила, например, при оживлении слайдера на чистом CSS.

итог

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Испытание: интерактивное расследование</title>
    <link rel="stylesheet" href="challenge.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Результаты соревнования</h1>
    <table class="results">
      <tr>
        <th>Игрок</th>
        <th>Раунд 1</th>
        <th>Раунд 2</th>
        <th>Раунд 3</th>
        <th> Итог</th>
      </tr>
      <tr class="player-1"> 
        <td>Иван Васильев</td>
        <td>10</td>
        <td>-20</td>
        <td>30</td>
        <td class="total"> <span> 20 </span> </td>
      </tr>
      <tr class="player-2">
        <td>Анна Иванова</td>
        <td>50</td>
        <td>10</td>
        <td>-30</td>
        <td class="total"> <span>30 </span></td>
      </tr>
      <tr class="player-3 disqualified">
        <td  class="" >Василий Ольгин</td>
        <td> 50</td>
        <td> 50</td>
        <td> 50</td>
        <td class="total disqualified "> <span>150 </span></td>
      </tr>
      <tr class="player-4">
        <td>Ольга Аннова</td>
        <td>-10</td>
        <td>-20</td>
        <td>40</td>
        <td class="total"> <span> 10 </span></td>
      </tr>
          </table>
  </body>
</html>


h1 {
  font-size: 20px;
}

h1 + .results {
  margin-top: 20px;
}

th {
  font-weight: normal;
  background-color: #dad7f4;
  text-align: left;
}

td:nth-child(5) > span {
  font-weight: bold;
}

.disqualified {
  text-decoration: line-through;
}

.player-1 .total {
  background-color: silver;
}

.player-2 .total {
  background-color: gold;
}

.player-3 .total {
  background-color: red;
}

.player-4 .total {
  background-color: chocolate;
}

<!DOCTYPE html>

<html>

<head>

<title>Испытание: интерактивное расследование</title>

</head>

<body>

<h1>Результаты соревнования</h1>

<tr>

<th>Игрок</th>

<th>Раунд 1</th>

<th>Раунд 2</th>

<th>Раунд 3</th>

</tr>

<td>Иван Васильев</td>

</tr>

<td>Анна Иванова</td>

</tr>

<td class="" >Василий Ольгин</td>

</tr>

<td>Ольга Аннова</td>

</tr>

</table>

</body>

</html>

h1 {

font-size: 20px;

}

h1 + .results {

margin-top: 20px;

}

th {

font-weight: normal;

background-color: #dad7f4;

text-align: left;

}

td:nth-child(5) > span {

font-weight: bold;

}

.disqualified {

text-decoration: line-through;

}

.player-1 .total {

background-color: silver;

}

.player-2 .total {

background-color: gold;

}

.player-3 .total {

background-color: red;

}

.player-4 .total {

background-color: chocolate;

}

Конспект: Формы

Ссылки

https://htmlacademy.ru/

1	https://htmlacademy.ru/

Первая форма

Формы нужны для того, чтобы отправлять данные с веб-страницы на веб-сервер, который сможет эти данные обработать: 
зарегистрировать пользователя, 
создать сообщение на форуме, 
отправить письмо 
и так далее. 
В общем, формы в вебе просто необходимы.

Чтобы создать форму, нужно использовать парный тег <form>, внутри которого размещаются поля формы. 

У тега <form> есть два важных атрибута:
action задаёт адрес, URL, отправки формы;
method задаёт метод отправки формы.

Пример:
<form action="https://echo.htmlacademy.ru/courses" method="get">
  поля формы
</form>

Для отправки формы обычно используют методы get или post. 
Если не указать атрибут method, то будет использован get.

Метод get посылает данные формы в строке запроса, то есть они видны в адресной строке браузера и следуют после знака вопроса. 
Например:
https://www.google.com/search?q=htmlacademy

Метод get лучше использовать в поисковых формах, потому что он позволяет получить ссылку на результаты поиска и передать её кому-то.

Метод post посылает данные в теле HTTP-запроса и используется, когда нужно отправить много данных и ссылка на результат обработки этих данных не нужна. 
Например, при редактировании личного профиля.

Формы нужны для того, чтобы отправлять данные с веб-страницы на веб-сервер, который сможет эти данные обработать:

зарегистрировать пользователя,

создать сообщение на форуме,

отправить письмо

и так далее.

В общем, формы в вебе просто необходимы.

Чтобы создать форму, нужно использовать парный тег <form>, внутри которого размещаются поля формы.

У тега <form> есть два важных атрибута:

action задаёт адрес, URL, отправки формы;

method задаёт метод отправки формы.

Пример:

поля формы

</form>

Для отправки формы обычно используют методы get или post.

Если не указать атрибут method, то будет использован get.

Метод get посылает данные формы в строке запроса, то есть они видны в адресной строке браузера и следуют после знака вопроса.

Например:

https://www.google.com/search?q=htmlacademy

Метод get лучше использовать в поисковых формах, потому что он позволяет получить ссылку на результаты поиска и передать её кому-то.

Метод post посылает данные в теле HTTP-запроса и используется, когда нужно отправить много данных и ссылка на результат обработки этих данных не нужна.

Например, при редактировании личного профиля.

Текстовое поле ввода

Большинство полей форм создаётся с помощью одиночного тега <input>. 

У этого тега два обязательных атрибута:
type задаёт тип поля;
name задаёт имя поля.

Тип поля влияет на то, как оно будет отображаться и вести себя. 
Самый распространённый тип — это text, который обозначает текстовое поле. 
Он же используется по умолчанию. 

Пример:
<form action="https://echo.htmlacademy.ru/courses" method="get">
  <input type="text" name="search">
</form>

Имя поля нужно, чтобы правильно обработать данные на сервере. 
Обычно, имя поля должно быть уникальным в пределах формы, хотя есть исключения. 
Для задания имени поля используют латинские буквы и цифры.

Большинство полей форм создаётся с помощью одиночного тега <input>.

У этого тега два обязательных атрибута:

type задаёт тип поля;

name задаёт имя поля.

Тип поля влияет на то, как оно будет отображаться и вести себя.

Самый распространённый тип — это text, который обозначает текстовое поле.

Он же используется по умолчанию.

Пример:

</form>

Имя поля нужно, чтобы правильно обработать данные на сервере.

Обычно, имя поля должно быть уникальным в пределах формы, хотя есть исключения.

Для задания имени поля используют латинские буквы и цифры.

Идентификатор и значение по умолчанию

Атрибут id поля ввода обозначает идентификатор. 
Он должен быть уникальным не только в пределах формы, но и на всей странице.
Обычно идентификаторы используют для повышения удобства работы с формой, например, создают подписи, связанные с мелкими полями. 
При нажатии на такие подписи активируется связанное поле. 
И это удобно, так как по большой подписи попасть легче, чем по маленькому полю. 
Также идентификаторы используют в JavaScript для работы с полями.

Идентификатор в отличие от имени поля не передаётся на сервер. 
Лучше использовать идентификаторы, отличающиеся от имени поля, 
особенно актуально это для полей множественного выбора.

Атрибут value задаёт значение поля ввода по умолчанию. 
Это тоже повышает удобство.

Согласитесь, приятно зайти в огромную анкету на каких-нибудь госуслугах, 
а там ваши паспортные данные уже подставлены в нужные поля и заполнять их не надо. 
И всё благодаря тому, что программист добавил к полям атрибут value с нужными данными.

Атрибут id поля ввода обозначает идентификатор.

Он должен быть уникальным не только в пределах формы, но и на всей странице.

Обычно идентификаторы используют для повышения удобства работы с формой, например, создают подписи, связанные с мелкими полями.

При нажатии на такие подписи активируется связанное поле.

И это удобно, так как по большой подписи попасть легче, чем по маленькому полю.

Также идентификаторы используют в JavaScript для работы с полями.

Идентификатор в отличие от имени поля не передаётся на сервер.

Лучше использовать идентификаторы, отличающиеся от имени поля,

особенно актуально это для полей множественного выбора.

Атрибут value задаёт значение поля ввода по умолчанию.

Это тоже повышает удобство.

Согласитесь, приятно зайти в огромную анкету на каких-нибудь госуслугах,

а там ваши паспортные данные уже подставлены в нужные поля и заполнять их не надо.

И всё благодаря тому, что программист добавил к полям атрибут value с нужными данными.

Подпись для поля ввода

Можно подумать, что сделать подпись к полю очень просто. 

Пишем текст рядом с полем и всё готово:
Подпись <input type="text" name="username">

На самом деле этого недостаточно — мы получили просто кусок текста и поле, 
которые расположены рядом друг с другом, но логически никак не связаны.
Есть специальный тег, который позволяет смело сказать: 
«Этот кусок текста действительно подпись к этому полю!». 
Это парный тег <label>.

Он связывает текст и поле ввода логически. 
А ещё если нажать на текст в такой подписи, то курсор переместится в соответствующее поле.

Создавать подписи к полям с помощью <label> — хороший приём. 
Используйте его.

Первый способ создать подпись — просто обернуть текст подписи и тег поля в тег <label>, вот так:

<label>
  Подпись <input type="text" name="username">
</label>

Надо отметить, что при оборачивании текста в тег <label> он визуально никак не меняется, ведь главная задача подписи — создать логическую связь.

Можно подумать, что сделать подпись к полю очень просто.

Пишем текст рядом с полем и всё готово:

Подпись <input type="text" name="username">

На самом деле этого недостаточно — мы получили просто кусок текста и поле,

которые расположены рядом друг с другом, но логически никак не связаны.

Есть специальный тег, который позволяет смело сказать:

«Этот кусок текста действительно подпись к этому полю!».

Это парный тег <label>.

Он связывает текст и поле ввода логически.

А ещё если нажать на текст в такой подписи, то курсор переместится в соответствующее поле.

Создавать подписи к полям с помощью <label> — хороший приём.

Используйте его.

Первый способ создать подпись — просто обернуть текст подписи и тег поля в тег <label>, вот так:

<label>

Подпись <input type="text" name="username">

</label>

Надо отметить, что при оборачивании текста в тег <label> он визуально никак не меняется, ведь главная задача подписи — создать логическую связь.

Связываем подпись и поле по id

Иногда обернуть поле и текст подписи в тег <label> нельзя. 
Например, когда они размещены в разных ячейках таблицы.
В этом случае можно связать подпись с полем с помощью атрибута id. 

Алгоритм такой:
Добавляем к полю ввода идентификатор с помощью атрибута id.
Оборачиваем текст подписи в тег <label>.
Добавляем тегу <label> атрибут for.

В атрибут for записываем такое же значение, что и в атрибуте id у поля.

Например:
<label for="user-field-id">Имя пользователя</label>
...
много-много других тегов
...
<input id="user-field-id" type="text" name="username">



<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Добавим ещё одно поле</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Форма входа</h1>

    <form action="https://echo.htmlacademy.ru/courses" method="post">
      <label for="login-field">Ваш логин</label>
      <input type="text" name="login" id="login-field">
      <br>
      <br>
      <label for="password-field"> Ваш пароль </label>
      <input type="text" name="password" id="password-field">
    </form>
  </body>
</html>

Иногда обернуть поле и текст подписи в тег <label> нельзя.

Например, когда они размещены в разных ячейках таблицы.

В этом случае можно связать подпись с полем с помощью атрибута id.

Алгоритм такой:

Добавляем к полю ввода идентификатор с помощью атрибута id.

Оборачиваем текст подписи в тег <label>.

Добавляем тегу <label> атрибут for.

В атрибут for записываем такое же значение, что и в атрибуте id у поля.

Например:

<label for="user-field-id">Имя пользователя</label>

...

много-много других тегов

...

<!DOCTYPE html>

<html>

<head>

<title>Добавим ещё одно поле</title>

</head>

<body>

<h1>Форма входа</h1>

<label for="login-field">Ваш логин</label>

<br>

<label for="password-field"> Ваш пароль </label>

</form>

</body>

</html>

Поле для ввода пароля

Мы создаём простую форму входа. 
Уже есть два поля и связанные с ними подписи. Одно из полей предназначено для ввода пароля, но сейчас оно является простым текстовым полем.
Чтобы сделать его настоящим полем для ввода пароля, в котором текст будет отображаться «звёздочками», нужно просто изменить значение атрибута type на password.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Поле для ввода пароля</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Форма входа</h1>

    <form action="https://echo.htmlacademy.ru/courses" method="post">
      <label for="login-field">Ваш логин</label>
      <input type="text" name="login" id="login-field">
      <br>
      <br>
      <label for="password-field">Ваш пароль</label>
      <input type="password" name="password" id="password-field" value="Где же звёздочки?">
    </form>
  </body>
</html>

Мы создаём простую форму входа.

Уже есть два поля и связанные с ними подписи. Одно из полей предназначено для ввода пароля, но сейчас оно является простым текстовым полем.

Чтобы сделать его настоящим полем для ввода пароля, в котором текст будет отображаться «звёздочками», нужно просто изменить значение атрибута type на password.

<!DOCTYPE html>

<html>

<head>

<title>Поле для ввода пароля</title>

</head>

<body>

<h1>Форма входа</h1>

<label for="login-field">Ваш логин</label>

<br>

<label for="password-field">Ваш пароль</label>

</form>

</body>

</html>

Кнопка отправки формы

Такая кнопка создаётся с помощью тега <input> c типом submit.
Надпись на кнопке можно задать с помощью атрибута value. 
Для кнопки отправки формы задавать имя необязательно. 
Но если имя задано, то на сервер будут отправляться имя и значение кнопки.
Обычно имя для кнопки отправки задают, когда в форме несколько кнопок, отвечающих за разные действия. 
Браузер отправляет на сервер имя и значение только той из них, на которую нажал пользователь. 
Таким образом, сервер может понять, какую кнопку нажали и что нужно сделать.

<input type="submit" value="Отправить" >

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Кнопка отправки формы</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Форма входа</h1>

    <form action="https://echo.htmlacademy.ru/courses" method="post">
      <label for="login-field">Ваш логин</label>
      <input type="text" name="login" id="login-field">
      <br>
      <br>
      <label for="password-field">Ваш пароль</label>
      <input type="password" name="password" id="password-field">
      <br>
      <br>
       <input type="submit" value="Отправить" >
    </form>
  </body>
</html>

Такая кнопка создаётся с помощью тега <input> c типом submit.

Надпись на кнопке можно задать с помощью атрибута value.

Для кнопки отправки формы задавать имя необязательно.

Но если имя задано, то на сервер будут отправляться имя и значение кнопки.

Обычно имя для кнопки отправки задают, когда в форме несколько кнопок, отвечающих за разные действия.

Браузер отправляет на сервер имя и значение только той из них, на которую нажал пользователь.

Таким образом, сервер может понять, какую кнопку нажали и что нужно сделать.

<!DOCTYPE html>

<html>

<head>

<title>Кнопка отправки формы</title>

</head>

<body>

<h1>Форма входа</h1>

<label for="login-field">Ваш логин</label>

<br>

<label for="password-field">Ваш пароль</label>

<br>

</form>

</body>

</html>

Многострочное поле ввода

Мы научились создавать простейшие формы с текстовыми полями и кнопками. 
А теперь познакомимся с более сложными элементами формы.
Многострочное текстовое поле создаётся с помощью парного тега <textarea>. 
У него есть атрибуты name и id, которые аналогичны атрибутам текстового поля.
Атрибут rows принимает целочисленное значение и задаёт высоту многострочного поля в строках. 
Атрибут cols задаёт ширину поля в символах. В качестве ширины символа берётся некоторая «усреднённая ширина».
Атрибут value у многострочного поля отсутствует, а значение по умолчанию задаётся по-другому. 
Текст, расположенный между открывающим и закрывающим тегом <textarea> и является значением по умолчанию. 

Вот так:
<textarea>Значение по умолчанию</textarea>

Мы научились создавать простейшие формы с текстовыми полями и кнопками.

А теперь познакомимся с более сложными элементами формы.

Многострочное текстовое поле создаётся с помощью парного тега <textarea>.

У него есть атрибуты name и id, которые аналогичны атрибутам текстового поля.

Атрибут rows принимает целочисленное значение и задаёт высоту многострочного поля в строках.

Атрибут cols задаёт ширину поля в символах. В качестве ширины символа берётся некоторая «усреднённая ширина».

Атрибут value у многострочного поля отсутствует, а значение по умолчанию задаётся по-другому.

Текст, расположенный между открывающим и закрывающим тегом <textarea> и является значением по умолчанию.

Вот так:

<textarea>Значение по умолчанию</textarea>

Чекбокс или «галочка»

Поле-галочка — это тег <input> с типом checkbox.
Галочка работает по принципу «либо да, либо нет». 
Если галочка стоит, то браузер посылает переменную с именем поля на сервер, если галочки нет, то не посылается ничего. 
Таким образом, атрибут value не является обязательным.
Чтобы галочка стояла по умолчанию, нужно добавить к тегу атрибут checked. 

Вот так:
<input type="checkbox" checked>

Чекбокс не подразумевает выбор одного элемента из нескольких. 
Поэтому если в одной форме есть несколько чекбоксов, то имена у них должны быть разными.

Поле-галочка — это тег <input> с типом checkbox.

Галочка работает по принципу «либо да, либо нет».

Если галочка стоит, то браузер посылает переменную с именем поля на сервер, если галочки нет, то не посылается ничего.

Таким образом, атрибут value не является обязательным.

Чтобы галочка стояла по умолчанию, нужно добавить к тегу атрибут checked.

Вот так:

Чекбокс не подразумевает выбор одного элемента из нескольких.

Поэтому если в одной форме есть несколько чекбоксов, то имена у них должны быть разными.

Переключатель или «радиобаттон»

Поле-переключатель — это тег <input> с типом radio.
Обычно переключатели размещают группами по несколько штук. 
Причём у переключателей из одной группы должно быть одинаковое имя и разные значения, которые задаются c помощью value.
Таким образом, атрибут value является для переключателей обязательным. 
Браузер отправляет на сервер значение value выбранного переключателя.
В этом задании мы начнём создавать переключатель.

<input type="radio" name="question-one" value="p">

Поле-переключатель — это тег <input> с типом radio.

Обычно переключатели размещают группами по несколько штук.

Причём у переключателей из одной группы должно быть одинаковое имя и разные значения, которые задаются c помощью value.

Таким образом, атрибут value является для переключателей обязательным.

Браузер отправляет на сервер значение value выбранного переключателя.

В этом задании мы начнём создавать переключатель.

Группа переключателей

Теперь добавим ещё один вариант ответа в наш переключатель. 
Для этого нужно добавить ещё один <input> с таким же именем, но другим значением value.
Подобным образом можно создавать группы переключателей с любым количеством вариантов.
Чтобы сделать какой-либо вариант в переключателе выбранным по умолчанию, нужно добавить к соответствующему тегу <input> атрибут checked, как у поля-галочки.
Кстати, имя поля у переключателей одной группы должно быть одинаковым, но идентификаторы всегда должны быть уникальными.

<input type="radio" name="question-one" value="b" checked>

Теперь добавим ещё один вариант ответа в наш переключатель.

Для этого нужно добавить ещё один <input> с таким же именем, но другим значением value.

Подобным образом можно создавать группы переключателей с любым количеством вариантов.

Чтобы сделать какой-либо вариант в переключателе выбранным по умолчанию, нужно добавить к соответствующему тегу <input> атрибут checked, как у поля-галочки.

Кстати, имя поля у переключателей одной группы должно быть одинаковым, но идентификаторы всегда должны быть уникальными.

Раскрывающийся список или «селект»

Раскрывающийся список так же, как и переключатель, позволяет выбрать один вариант ответа из нескольких.
Раскрывающийся список создаётся с помощью парного тега <select>, у которого есть знакомые атрибуты name и id.
Варианты ответов задаются с помощью парных тегов <option>, которые должны располагаться внутри тега <select>. 

Например:
<select name="theme">
  <option value="light">Светлая тема</option>
  <option value="dark">Тёмная тема</option>
  ...
</select>

В атрибуте value тега <option> задаётся значение варианта ответа, а внутри этого тега располагается подпись варианта ответа.
Если при отправке формы у выбранного варианта задан value, то на сервер отправится значение этого атрибута. В противном случае будет отправлен текст подписи.

Раскрывающийся список так же, как и переключатель, позволяет выбрать один вариант ответа из нескольких.

Раскрывающийся список создаётся с помощью парного тега <select>, у которого есть знакомые атрибуты name и id.

Варианты ответов задаются с помощью парных тегов <option>, которые должны располагаться внутри тега <select>.

Например:

<option value="light">Светлая тема</option>

<option value="dark">Тёмная тема</option>

...

</select>

В атрибуте value тега <option> задаётся значение варианта ответа, а внутри этого тега располагается подпись варианта ответа.

Если при отправке формы у выбранного варианта задан value, то на сервер отправится значение этого атрибута. В противном случае будет отправлен текст подписи.

«Мультиселект»

Раскрывающийся список можно превратить в так называемый «мультиселект», то есть список, в котором можно выбрать не один, а несколько вариантов.
Чтобы сделать это, нужно добавить к тегу <select> атрибут multiple.
Выбрать несколько вариантов можно, щёлкая по ним с зажатой клавишей Ctrl на Windows или Command на MacOS.
Высоту мультиселекта можно изменять с помощью атрибута size тега <select>.
Чтобы отметить как выбранные по умолчанию одно или несколько значений, нужно к соответствующим тегам <option> добавить атрибут selected.
При отправке данных мультиселекта на сервер с PHP после имени в значении атрибута name ставятся символы квадратных скобок []. 
Например, <select name="days[]">. 
Это необязательное требование для имени мультиселекта, а нужно только для корректной обработки данных в PHP.


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>«Мультиселект»</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Анкета</h1>

    <form action="https://echo.htmlacademy.ru/courses" method="post">
      <p>В мультиселекте можно выбрать несколько вариантов, щёлкая по ним с зажатой клавишей Ctrl на Windows или Command на MacOS.</p>

      <p><i>Любимые дни недели:</i></p>
      <select name="days" multiple size="7">
        <option>Понедельник</option>
        <option>Вторник</option>
        <option>Среда</option>
        <option>Четверг</option>
        <option>Пятница</option>
        <option>Суббота</option>
        <option selected>Воскресенье</option>
      </select>

      <input type="submit" value="Отправить">
    </form>
  </body>
</html>

Раскрывающийся список можно превратить в так называемый «мультиселект», то есть список, в котором можно выбрать не один, а несколько вариантов.

Чтобы сделать это, нужно добавить к тегу <select> атрибут multiple.

Выбрать несколько вариантов можно, щёлкая по ним с зажатой клавишей Ctrl на Windows или Command на MacOS.

Высоту мультиселекта можно изменять с помощью атрибута size тега <select>.

Чтобы отметить как выбранные по умолчанию одно или несколько значений, нужно к соответствующим тегам <option> добавить атрибут selected.

При отправке данных мультиселекта на сервер с PHP после имени в значении атрибута name ставятся символы квадратных скобок [].

Например, <select name="days[]">.

Это необязательное требование для имени мультиселекта, а нужно только для корректной обработки данных в PHP.

<!DOCTYPE html>

<html>

<head>

<title>«Мультиселект»</title>

</head>

<body>

<h1>Анкета</h1>

<p>В мультиселекте можно выбрать несколько вариантов, щёлкая по ним с зажатой клавишей Ctrl на Windows или Command на MacOS.</p>

<p><i>Любимые дни недели:</i></p>

<option>Понедельник</option>

<option>Вторник</option>

<option>Среда</option>

<option>Четверг</option>

<option>Пятница</option>

<option>Суббота</option>

<option selected>Воскресенье</option>

</select>

</form>

</body>

</html>

Поле для загрузки файлов

Поле для загрузки файлов — это тег <input> с типом file. 
Для этого поля обязательным атрибутом является имя.
Чтобы поле заработало и браузер смог передать выбранный файл на сервер, 
необходимо добавить форме атрибут enctype со значением multipart/form-data. 
Не полю, а форме.

Этот атрибут указывает браузеру, в каком виде пересылать данные. 
Если вы хотите отправить на сервер файл, данные из формы эффективнее всего передавать по частям. 
За это и отвечает значение multipart/form-data.

Кстати, внешний вид полей с типом file очень сильно отличается в зависимости от операционной системы и очень плохо изменяется с помощью стилей.


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Поле для загрузки файлов</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Профиль</h1>

    <form enctype="multipart/form-data" action="https://echo.htmlacademy.ru/courses" method="post">
      <p>Выберите изображение для своего аватара:</p>
      <input type="file" name="avatar">
      <input type="submit" value="Загрузить">
    </form>
  </body>
</html>

Поле для загрузки файлов — это тег <input> с типом file.

Для этого поля обязательным атрибутом является имя.

Чтобы поле заработало и браузер смог передать выбранный файл на сервер,

необходимо добавить форме атрибут enctype со значением multipart/form-data.

Не полю, а форме.

Этот атрибут указывает браузеру, в каком виде пересылать данные.

Если вы хотите отправить на сервер файл, данные из формы эффективнее всего передавать по частям.

За это и отвечает значение multipart/form-data.

Кстати, внешний вид полей с типом file очень сильно отличается в зависимости от операционной системы и очень плохо изменяется с помощью стилей.

<!DOCTYPE html>

<html>

<head>

<title>Поле для загрузки файлов</title>

</head>

<body>

<h1>Профиль</h1>

<p>Выберите изображение для своего аватара:</p>

</form>

</body>

</html>

Скрытое поле

И ещё одно невидимое и очень полезное поле. 
Это скрытое поле. 
Его используют, когда в форме нужно отправить какие-то дополнительные служебные данные, которые не вводятся пользователем.
Например, это могут быть реквизиты заказа или номер пользователя в форме оплаты.

Скрытое поле — это тег <input> с типом hidden.

<input name="account_number" type="hidden" value="20">

И ещё одно невидимое и очень полезное поле.

Это скрытое поле.

Его используют, когда в форме нужно отправить какие-то дополнительные служебные данные, которые не вводятся пользователем.

Например, это могут быть реквизиты заказа или номер пользователя в форме оплаты.

Скрытое поле — это тег <input> с типом hidden.

Конспект: Таблици

ссылки

https://htmlacademy.ru/

1	https://htmlacademy.ru/

Простейшая таблица

Простейшая таблица описывается с помощью трёх тегов:
<table> обозначает таблицу.
<tr> расшифровывается как «table row», обозначает строку таблицы.
<td> расшифровывается как «table data», обозначает ячейку внутри строки таблицы.
Теги <td> располагаются внутри тегов <tr>, а те, в свою очередь, внутри <table>. 
Почти всё текстовое содержимое таблицы размещается внутри тегов <td>.
В простейшей таблице в каждой строке должно быть одинаковое количество ячеек, то есть внутри всех <tr> должно быть одинаковое количество <td>.
Для того чтобы добавить столбец в таблицу, надо в каждую строку <tr> добавить по ячейке <td>

Простейшая таблица описывается с помощью трёх тегов:

<table> обозначает таблицу.

<tr> расшифровывается как «table row», обозначает строку таблицы.

<td> расшифровывается как «table data», обозначает ячейку внутри строки таблицы.

Теги <td> располагаются внутри тегов <tr>, а те, в свою очередь, внутри <table>.

Почти всё текстовое содержимое таблицы размещается внутри тегов <td>.

В простейшей таблице в каждой строке должно быть одинаковое количество ячеек, то есть внутри всех <tr> должно быть одинаковое количество <td>.

Для того чтобы добавить столбец в таблицу, надо в каждую строку <tr> добавить по ячейке <td>

Пример

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Простейшая таблица</title>
  </head>
  <body>
  <h1>Распределение браузеров</h1>
     <table border="1">
      <tr>
        <td>Браузер</td>
        <td>Посещения</td>
      </tr>
      <tr>
        <td>Mozilla Firefox</td>
        <td>163</td>
      </tr>
      <tr>
        <td>Google Chrome</td>
        <td>78</td>
      </tr>
      <tr>
        <td>Safari</td>
        <td>35</td>
      </tr>
    </table>
   </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Простейшая таблица</title>

</head>

<body>

<h1>Распределение браузеров</h1>

<tr>

<td>Браузер</td>

<td>Посещения</td>

</tr>

<tr>

<td>Mozilla Firefox</td>

</tr>

<tr>

<td>Google Chrome</td>

</tr>

<tr>

<td>Safari</td>

</tr>

</table>

</body>

</html>

Задаём рамки с помощью CSS

Таблицы в предыдущих заданиях отображались с рамками по умолчанию. 
Такие рамки отображаются, если у тега <table> задан атрибут border с ненулевым значением.
Но с помощью атрибута border гибко управлять рамками не получается. 
С его помощью можно только изменять их толщину.

Таблицы в предыдущих заданиях отображались с рамками по умолчанию.

Такие рамки отображаются, если у тега <table> задан атрибут border с ненулевым значением.

Но с помощью атрибута border гибко управлять рамками не получается.

С его помощью можно только изменять их толщину.

Улучшаем отображение рамок

По умолчанию браузер рисует рамки таблицы и рамки отдельных ячеек раздельно, это отлично видно на примере.
Чтобы избавиться от таких двойных рамок, используется CSS-свойство таблицы border-collapse. 
Вот так:

table {
  border-collapse: collapse;
}

Значение collapse убирает двойные рамки: 
схлопываются рамки соседних ячеек, а также рамки ячеек и внешняя рамка таблицы. 
При этом внешняя рамка таблицы может исчезнуть, и чтобы её вернуть, можно увеличить её ширину.

По умолчанию браузер рисует рамки таблицы и рамки отдельных ячеек раздельно, это отлично видно на примере.

Чтобы избавиться от таких двойных рамок, используется CSS-свойство таблицы border-collapse.

Вот так:

table {

border-collapse: collapse;

}

Значение collapse убирает двойные рамки:

схлопываются рамки соседних ячеек, а также рамки ячеек и внешняя рамка таблицы.

При этом внешняя рамка таблицы может исчезнуть, и чтобы её вернуть, можно увеличить её ширину.

Горизонтальные и вертикальные рамки

Иногда требуется, чтобы рамки ячеек в таблице отображались не полностью. 
Например, чтобы отображалась только нижняя рамка ячеек, тогда таблица получается расчерченной по горизонтали. 
Аналогично, если отображать только боковые рамки ячеек, то таблица получается разбитой на столбцы.
Такие эффекты легко достигаются с помощью CSS. 

Для этого необходимо использовать не свойство border, которое задаёт рамки для всех сторон ячейки, а одно из свойств:
border-top,
border-right,
border-bottom,
border-left.

Эти свойства задают отображение только одной рамки ячейки: 
верхней, правой, нижней или левой соответственно.

table {
  border-collapse: collapse;
  border: 3px solid black;
}

td {
  border: 2px solid lightgray;
}

.td_black {
border-top: 1px solid black;
}

Иногда требуется, чтобы рамки ячеек в таблице отображались не полностью.

Например, чтобы отображалась только нижняя рамка ячеек, тогда таблица получается расчерченной по горизонтали.

Аналогично, если отображать только боковые рамки ячеек, то таблица получается разбитой на столбцы.

Такие эффекты легко достигаются с помощью CSS.

Для этого необходимо использовать не свойство border, которое задаёт рамки для всех сторон ячейки, а одно из свойств:

border-top,

border-right,

border-bottom,

border-left.

Эти свойства задают отображение только одной рамки ячейки:

верхней, правой, нижней или левой соответственно.

table {

border-collapse: collapse;

border: 3px solid black;

}

td {

border: 2px solid lightgray;

}

.td_black {

border-top: 1px solid black;

}

Отступы между ячейками

Большинство задач по оформлению таблиц решаются с помощью работы с рамками, отступами внутри ячеек, изменения цвета фона ячеек.
Помимо внутренних отступов можно задавать отступы между ячейками таблицы.
Отступы между ячейками не работают с border-collapse: 
collapse, что достаточно логично, ведь рамки ячеек в этом режиме «склеены» и их не разорвать.

Отступы между ячейками можно задать:
с помощью атрибута cellspacing тега <table>
или c помощью CSS-свойства border-spacing.
Отметим, что свойство border-spacing задаётся для таблицы, в отличие от padding, которое задаётся для ячеек.

Большинство задач по оформлению таблиц решаются с помощью работы с рамками, отступами внутри ячеек, изменения цвета фона ячеек.

Помимо внутренних отступов можно задавать отступы между ячейками таблицы.

Отступы между ячейками не работают с border-collapse:

collapse, что достаточно логично, ведь рамки ячеек в этом режиме «склеены» и их не разорвать.

Отступы между ячейками можно задать:

с помощью атрибута cellspacing тега <table>

или c помощью CSS-свойства border-spacing.

Отметим, что свойство border-spacing задаётся для таблицы, в отличие от padding, которое задаётся для ячеек.

Ячейки-заголовки

Поздравляем! Вы научились создавать простейшие таблицы и оформлять их. 
В следующей части курса мы познакомимся с ещё несколькими табличными тегами и научимся создавать более сложные таблицы.
Обычно в таблицах выделяют названия столбцов или строк.
В HTML для этого предусмотрен специальный тег <th>, который расшифровывается как «table header» и обозначает ячейку-заголовок. 
Тег <th> аналогичен <td>, он так же должен располагаться внутри <tr>, для него стилями можно задавать все те же свойства.
По умолчанию текст внутри <th> выделяется жирным и выравнивается по центру ячейки.

Поздравляем! Вы научились создавать простейшие таблицы и оформлять их.

В следующей части курса мы познакомимся с ещё несколькими табличными тегами и научимся создавать более сложные таблицы.

Обычно в таблицах выделяют названия столбцов или строк.

В HTML для этого предусмотрен специальный тег <th>, который расшифровывается как «table header» и обозначает ячейку-заголовок.

Тег <th> аналогичен <td>, он так же должен располагаться внутри <tr>, для него стилями можно задавать все те же свойства.

По умолчанию текст внутри <th> выделяется жирным и выравнивается по центру ячейки.

Заголовок таблицы

В предыдущем задании вы создали заголовочные ячейки с помощью подходящих тегов, в этом задании мы создадим подпись к таблице (или заголовок таблицы).
Сейчас подпись Распределение браузеров сделана с помощью заголовка первого уровня. 
В принципе, можно догадаться, что это название таблицы, но семантически правильнее будет сделать это название с помощью тега <caption>.
Тег <caption> должен размещаться внутри тега <table>, причём непосредственно внутри него и первым, до остальных вложенных тегов. 

Вот так:
<table>
  <caption>Текст</caption>
  ...
 </table>

Тег заголовка идёт первым внутри таблицы, но с помощью CSS можно переместить заголовок таблицы в любое место: сверху или снизу таблицы, по центру, справа или слева.
По вертикали заголовок таблицы перемещается CSS-свойством caption-side со значениями top и bottom, которые обозначают до и после таблицы соответственно.
По горизонтали заголовок таблицы выравнивается CSS-свойством text-align со значениями left, right и center.

caption {
  caption-side: bottom;
  text-align: right;
}

В предыдущем задании вы создали заголовочные ячейки с помощью подходящих тегов, в этом задании мы создадим подпись к таблице (или заголовок таблицы).

Сейчас подпись Распределение браузеров сделана с помощью заголовка первого уровня.

В принципе, можно догадаться, что это название таблицы, но семантически правильнее будет сделать это название с помощью тега <caption>.

Тег <caption> должен размещаться внутри тега <table>, причём непосредственно внутри него и первым, до остальных вложенных тегов.

Вот так:

<table>

<caption>Текст</caption>

...

</table>

Тег заголовка идёт первым внутри таблицы, но с помощью CSS можно переместить заголовок таблицы в любое место: сверху или снизу таблицы, по центру, справа или слева.

По вертикали заголовок таблицы перемещается CSS-свойством caption-side со значениями top и bottom, которые обозначают до и после таблицы соответственно.

По горизонтали заголовок таблицы выравнивается CSS-свойством text-align со значениями left, right и center.

caption {

caption-side: bottom;

text-align: right;

}

Объединяем ячейки в строках

Чтобы объединить ячейки по горизонтали, необходимо использовать атрибут colspan у тегов <th> или <td>.
Когда вы задаёте ячейке атрибут colspan со значением 2, то ячейка как бы «растягивается» на ячейку справа, 
но та ячейка не исчезает, а отодвигается и в таблице появляется новый столбец. 
Чтобы удалить его, нужно удалить ячейку, которая находится справа от «растянутой».


<table>
      <caption>Распределение браузеров</caption>
      <tr>
        <th>Браузер</th>
        <th colspan="2">Посещения</th>
        <th> можно удалить </th>
              </tr>
      <tr>
        <th></th>
        <th>Количество</th>
        <th>В процентах</th>
      </tr>
      <tr>
        <td>Mozilla Firefox</td>
        <td>163</td>
        <td>59%</td>
      </tr>
      <tr>
        <td>Google Chrome</td>
        <td>78</td>
        <td>28%</td>
      </tr>
      <tr>
        <td>Safari</td>
        <td>35</td>
        <td>13%</td>
      </tr>
    </table>

Чтобы объединить ячейки по горизонтали, необходимо использовать атрибут colspan у тегов <th> или <td>.

Когда вы задаёте ячейке атрибут colspan со значением 2, то ячейка как бы «растягивается» на ячейку справа,

но та ячейка не исчезает, а отодвигается и в таблице появляется новый столбец.

Чтобы удалить его, нужно удалить ячейку, которая находится справа от «растянутой».

<table>

<caption>Распределение браузеров</caption>

<tr>

<th>Браузер</th>

<th colspan="2">Посещения</th>

<th> можно удалить </th>

</tr>

<tr>

<th>Количество</th>

<th>В процентах</th>

</tr>

<tr>

<td>Mozilla Firefox</td>

</tr>

<tr>

<td>Google Chrome</td>

</tr>

<tr>

<td>Safari</td>

</tr>

</table>

Объединяем ячейки в столбцах

Объединение ячеек по вертикали немного сложнее. 
Оно осуществляется с помощью атрибута rowspan у тега <td> или <th>.
Когда вы задаёте ячейке атрибут rowspan со значением 2, то ячейка как бы «растягивается» на следующую строку. 
При этом ячейка, которая была под «растянутой» отодвигается в своей же строке вправо, что добавляет в таблицу лишний столбец. 
Удалив ячейку, которая была под «растянутой», мы избавимся от этого столбца.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Объединяем ячейки в столбцах</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <table>
      <caption>Распределение браузеров</caption>
      <tr>
        <th rowspan="2">Браузер</th>
        <th colspan="2">Посещения</th>
      </tr>
      <tr>
        <th class="pink"></th>
        <th>Количество</th>
        <th>В процентах</th>
      </tr>
      <tr>
        <td>Mozilla Firefox</td>
        <td>163</td>
        <td>59%</td>
      </tr>
      <tr>
        <td>Google Chrome</td>
        <td>78</td>
        <td>28%</td>
      </tr>
      <tr>
        <td>Safari</td>
        <td>35</td>
        <td>13%</td>
      </tr>
    </table>
  </body>
</html>


table {
  border-collapse: separate;
  border-spacing: 4px;
  border: 2px solid black;
}

td {
  padding: 5px;
  padding-right: 30px;
  border: 1px solid lightgray;
}

th {
  padding: 10px;
  border: 1px solid black;
}

caption {
  margin-bottom: 10px;
  font-size: 18px;
}

.pink {
  background-color: pink;
}

Объединение ячеек по вертикали немного сложнее.

Оно осуществляется с помощью атрибута rowspan у тега <td> или <th>.

Когда вы задаёте ячейке атрибут rowspan со значением 2, то ячейка как бы «растягивается» на следующую строку.

При этом ячейка, которая была под «растянутой» отодвигается в своей же строке вправо, что добавляет в таблицу лишний столбец.

Удалив ячейку, которая была под «растянутой», мы избавимся от этого столбца.

<!DOCTYPE html>

<html>

<head>

<title>Объединяем ячейки в столбцах</title>

</head>

<body>

<table>

<caption>Распределение браузеров</caption>

<tr>

<th rowspan="2">Браузер</th>

<th colspan="2">Посещения</th>

</tr>

<tr>

<th>Количество</th>

<th>В процентах</th>

</tr>

<tr>

<td>Mozilla Firefox</td>

</tr>

<tr>

<td>Google Chrome</td>

</tr>

<tr>

<td>Safari</td>

</tr>

</table>

</body>

</html>

table {

border-collapse: separate;

border-spacing: 4px;

border: 2px solid black;

}

td {

padding: 5px;

padding-right: 30px;

border: 1px solid lightgray;

}

th {

padding: 10px;

border: 1px solid black;

}

caption {

margin-bottom: 10px;

font-size: 18px;

}

.pink {

background-color: pink;

}

Комбо: colspan + rowspan

Можно растягивать ячейку одновременно и по вертикали, и по горизонтали.
Для этого нужно задать ячейке два атрибута: rowspan и colspan.

Вытеснение соседних ячеек будет происходить так же, как и при обычном объединении ячеек. 
Правда, вытесненных ячеек окажется больше. 
Например, ячейка с rowspan="2" и colspan="2" вытеснит три соседних ячейки.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Комбо: colspan + rowspan</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <table>
      <tr>
        <td colspan="2" rowspan="2">1.1</td>
        <td class="pink">1.2</td>
        <td>1.3</td>
      </tr>
      <tr>
        <td class="pink">2.1</td>
        <td class="pink">2.2</td>
        <td>2.3</td>
      </tr>
      <tr>
        <td>3.1</td>
        <td>3.2</td>
        <td>3.3</td>
      </tr>
    </table>
  </body>
</html>



table {
  border-collapse: separate;
  border-spacing: 4px;
  border: 2px solid black;
}

td {
  padding: 5px;
  padding-right: 30px;
  border: 1px solid lightgray;
}

.pink {
  background-color: pink;
}

Можно растягивать ячейку одновременно и по вертикали, и по горизонтали.

Для этого нужно задать ячейке два атрибута: rowspan и colspan.

Вытеснение соседних ячеек будет происходить так же, как и при обычном объединении ячеек.

Правда, вытесненных ячеек окажется больше.

Например, ячейка с rowspan="2" и colspan="2" вытеснит три соседних ячейки.

<!DOCTYPE html>

<html>

<head>

<title>Комбо: colspan + rowspan</title>

</head>

<body>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

table {

border-collapse: separate;

border-spacing: 4px;

border: 2px solid black;

}

td {

padding: 5px;

padding-right: 30px;

border: 1px solid lightgray;

}

.pink {

background-color: pink;

}

Выравнивание содержимого в ячейках

Выравнивание содержимого в ячейках
Содержимое ячеек можно выравнивать по горизонтали и по вертикали с помощью CSS.
За выравнивание по горизонтали отвечает CSS-свойство text-align. 
Чаще всего используются значения left, center и right.

За выравнивание по вертикали отвечает CSS-свойство vertical-align. 
Чаще всего используются значения top, middle и bottom.

На самом деле, значений у обоих свойств больше, но в случае с ячейками нас интересуют только перечисленные.
Чтобы задать выравнивание содержимого ячеек, надо в стилях указать:

 {
  vertical-align: значение;
  text-align: значение;
}

Эти стили повлияют на все ячейки. Чтобы задать выравнивание только в определённых ячейках, нужно назначить им классы и определить стили для классов.

Выравнивание содержимого в ячейках

Содержимое ячеек можно выравнивать по горизонтали и по вертикали с помощью CSS.

За выравнивание по горизонтали отвечает CSS-свойство text-align.

Чаще всего используются значения left, center и right.

За выравнивание по вертикали отвечает CSS-свойство vertical-align.

Чаще всего используются значения top, middle и bottom.

На самом деле, значений у обоих свойств больше, но в случае с ячейками нас интересуют только перечисленные.

Чтобы задать выравнивание содержимого ячеек, надо в стилях указать:

{

vertical-align: значение;

text-align: значение;

}

Эти стили повлияют на все ячейки. Чтобы задать выравнивание только в определённых ячейках, нужно назначить им классы и определить стили для классов.

Добавим цвета

 Таблицы можно раскрашивать, задавая цвет фона ячеек, цвет текста в ячейках, а также цвет рамок. 
Можно задавать и фоновые изображения.

Цветами можно управлять с помощью этих свойств:
background-color — задаёт цвет фона,
color — цвет текста,
border-color — цвет рамок.

До этого мы использовали компактную форму для описания рамок: 
border: 1px solid lightgray;

Таким образом, чтобы задать цвета для ячейки в CSS, нужен такой код:
td {
  color: цвет;
  background-color: цвет;
  border: 1px solid цвет;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Добавим цвета</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <table>
      <caption>Распределение браузеров</caption>
      <tr>
        <th rowspan="2">Браузер</th>
        <th colspan="2">Посещения</th>
      </tr>
      <tr>
        <th>Количество</th>
        <th>В процентах</th>
      </tr>
      <tr>
        <td>Mozilla Firefox</td>
        <td>126</td>
        <td>59%</td>
      </tr>
      <tr>
        <td>Google Chrome</td>
        <td>78</td>
        <td>30%</td>
      </tr>
      <tr>
        <td>Safari</td>
        <td>34</td>
        <td>11%</td>
      </tr>
    </table>
  </body>
</html>

table {
  border-collapse: collapse;
  border: 2px solid black;
  border-color: red;
}

td {
  padding: 5px;
  padding-right: 10px;
  border: 1px solid lightgray;
  color: brown;
  background-color: lightyellow;
  border-color: green;
}

th {
  padding: 10px;
  border: 1px solid black;
  color: darkblue;
  background-color: lightcyan;
  border-color: yellow;
}

caption {
  margin-bottom: 10px;
  font-size: 18px;
}


Как быть, если стили нужно задать для какой-то определённой ячейки, группы ячеек, или строки? 
Можно использовать классы и применять стили для этих классов. 

Например, вот так:
.my-class {
  стили
}

Таблицы можно раскрашивать, задавая цвет фона ячеек, цвет текста в ячейках, а также цвет рамок.

Можно задавать и фоновые изображения.

Цветами можно управлять с помощью этих свойств:

background-color — задаёт цвет фона,

color — цвет текста,

border-color — цвет рамок.

До этого мы использовали компактную форму для описания рамок:

border: 1px solid lightgray;

Таким образом, чтобы задать цвета для ячейки в CSS, нужен такой код:

td {

color: цвет;

background-color: цвет;

border: 1px solid цвет;

}

<!DOCTYPE html>

<html>

<head>

<title>Добавим цвета</title>

</head>

<body>

<table>

<caption>Распределение браузеров</caption>

<tr>

<th rowspan="2">Браузер</th>

<th colspan="2">Посещения</th>

</tr>

<tr>

<th>Количество</th>

<th>В процентах</th>

</tr>

<tr>

<td>Mozilla Firefox</td>

</tr>

<tr>

<td>Google Chrome</td>

</tr>

<tr>

<td>Safari</td>

</tr>

</table>

</body>

</html>

table {

border-collapse: collapse;

border: 2px solid black;

border-color: red;

}

td {

padding: 5px;

padding-right: 10px;

border: 1px solid lightgray;

color: brown;

background-color: lightyellow;

border-color: green;

}

th {

padding: 10px;

border: 1px solid black;

color: darkblue;

background-color: lightcyan;

border-color: yellow;

}

caption {

margin-bottom: 10px;

font-size: 18px;

}

Как быть, если стили нужно задать для какой-то определённой ячейки, группы ячеек, или строки?

Можно использовать классы и применять стили для этих классов.

Например, вот так:

.my-class {

стили

}

Задаём размеры таблицы

По умолчанию ширина и высота таблицы зависит от содержимого и отступов внутри ячеек. 
Чем меньше содержимого, тем меньше размеры таблицы.
С помощью CSS можно управлять размерами таблицы, задавать желаемую ширину и высоту. 
Также размерами можно управлять с помощью атрибутов таблицы, но мы рассмотрим только CSS.
Стоит отметить, что у таблицы есть минимальные размеры, которые зависят от содержания, меньше которых она не сожмётся, какое бы значение ширины или высоты ни задавалось.
Ширина таблицы задаётся с помощью CSS-свойства width, а высота с помощью свойства height, например:

table {
  width: 100px;
  height: 100px;
}

Размеры таблицы можно задавать как в абсолютных единицах, например, в пикселях — 20px, так и в относительных, в процентах — 20%.
При использовании процентов размеры таблицы будут вычисляться с учётом размеров родительского элемента, в нашем случае окна мини-браузера.
Особое значение auto включает расчёт размеров по умолчанию. 

Например: 
width: auto; 
height: auto;

!!!Важное замечание. 
Проценты при задании высоты обычно не работают.


Размеры ячеек и столбцов тоже можно задавать вручную, особенно если вам не нравится, как браузер распределил ширину колонок. 
Размеры ячеек задаются точно так же, как и размеры таблицы: с помощью CSS-свойств width и height.

Есть два варианта добавления стилей ячейкам:
Назначать ячейкам уникальные имена классов, например, class="cell-11", и применять стили для этих классов.
Использовать атрибут style, внутри которого можно писать CSS-код.

Пример второго варианта:
<td style="width: 100px;">
  ...
</td>

По умолчанию ширина и высота таблицы зависит от содержимого и отступов внутри ячеек.

Чем меньше содержимого, тем меньше размеры таблицы.

С помощью CSS можно управлять размерами таблицы, задавать желаемую ширину и высоту.

Также размерами можно управлять с помощью атрибутов таблицы, но мы рассмотрим только CSS.

Стоит отметить, что у таблицы есть минимальные размеры, которые зависят от содержания, меньше которых она не сожмётся, какое бы значение ширины или высоты ни задавалось.

Ширина таблицы задаётся с помощью CSS-свойства width, а высота с помощью свойства height, например:

table {

width: 100px;

height: 100px;

}

Размеры таблицы можно задавать как в абсолютных единицах, например, в пикселях — 20px, так и в относительных, в процентах — 20%.

При использовании процентов размеры таблицы будут вычисляться с учётом размеров родительского элемента, в нашем случае окна мини-браузера.

Особое значение auto включает расчёт размеров по умолчанию.

Например:

width: auto;

height: auto;

!!!Важное замечание.

Проценты при задании высоты обычно не работают.

Размеры ячеек и столбцов тоже можно задавать вручную, особенно если вам не нравится, как браузер распределил ширину колонок.

Размеры ячеек задаются точно так же, как и размеры таблицы: с помощью CSS-свойств width и height.

Есть два варианта добавления стилей ячейкам:

Назначать ячейкам уникальные имена классов, например, class="cell-11", и применять стили для этих классов.

Использовать атрибут style, внутри которого можно писать CSS-код.

Пример второго варианта:

...

</td>

Конспект «Оформление текста»

ссылка

https://htmlacademy.ru/courses/309/run/19

1	https://htmlacademy.ru/courses/309/run/19

Свойство font-size

Управляет размером шрифта. 
Значение свойства задаёт желаемую высоту символа шрифта. 
Причём единицы измерения могут быть абсолютными или относительными.

Самая часто используемая единица измерения размера шрифта — пиксели px:
p {
  font-size: 20px;
}

Но, чтобы при изменении основного размера шрифта родителя его дочерние элементы пропорционально меняли свои размеры шрифта, есть специальная единица измерения — em.
Величина 1em — это такой же размер шрифта, что и у родителя. 
Соответственно, если нужно, чтобы шрифт дочернего элемента был всегда в 2 раза больше родительского, то надо задать значение 2em:
h1 {
  font-size: 2em;
}

Управляет размером шрифта.

Значение свойства задаёт желаемую высоту символа шрифта.

Причём единицы измерения могут быть абсолютными или относительными.

Самая часто используемая единица измерения размера шрифта — пиксели px:

p {

font-size: 20px;

}

Но, чтобы при изменении основного размера шрифта родителя его дочерние элементы пропорционально меняли свои размеры шрифта, есть специальная единица измерения — em.

Величина 1em — это такой же размер шрифта, что и у родителя.

Соответственно, если нужно, чтобы шрифт дочернего элемента был всегда в 2 раза больше родительского, то надо задать значение 2em:

h1 {

font-size: 2em;

}

Свойство line-height

Свойство управляет высотой строки или межстрочным интервалом.
По умолчанию это свойство имеет значение normal. 
Оно указывает браузеру, что межстрочный интервал нужно подобрать автоматически, исходя из размера шрифта. 
Спецификация рекомендует устанавливать его в пределах 100-120% от размера шрифта. 

То есть:
p {
  font-size: 10px;
  line-height: normal; /* значение будет примерно 12px */
}

Значение normal позволяет всем нестилизованным текстам выглядеть удобочитаемо. 
Однако, если есть необходимость отойти от стилизации по умолчанию, line-height можно задать фиксированное абсолютное значение в px.

p {
  font-size: 16px;
  line-height: 26px;
}

Если нужно задать line-height относительное значение, но не такое, как normal, то значение задаётся в процентах или в виде множителя.
В таком случае браузер вычисляет значение динамически в зависимости от font-size:

p {
  font-size: 10px;
  line-height: 150%; /* вычисленное значение: 10px * 150% = 15px */
  line-height: 2;    /* вычисленное значение: 10px * 2 = 20px */
}

Относительные значения более гибкие, чем абсолютные. 
Но для простых сайтов фиксированных font-size и line-height будет вполне достаточно.

Свойство управляет высотой строки или межстрочным интервалом.

По умолчанию это свойство имеет значение normal.

Оно указывает браузеру, что межстрочный интервал нужно подобрать автоматически, исходя из размера шрифта.

Спецификация рекомендует устанавливать его в пределах 100-120% от размера шрифта.

То есть:

p {

font-size: 10px;

line-height: normal; /* значение будет примерно 12px */

}

Значение normal позволяет всем нестилизованным текстам выглядеть удобочитаемо.

Однако, если есть необходимость отойти от стилизации по умолчанию, line-height можно задать фиксированное абсолютное значение в px.

p {

font-size: 16px;

line-height: 26px;

}

Если нужно задать line-height относительное значение, но не такое, как normal, то значение задаётся в процентах или в виде множителя.

В таком случае браузер вычисляет значение динамически в зависимости от font-size:

p {

font-size: 10px;

line-height: 150%; /* вычисленное значение: 10px * 150% = 15px */

line-height: 2; /* вычисленное значение: 10px * 2 = 20px */

}

Относительные значения более гибкие, чем абсолютные.

Но для простых сайтов фиксированных font-size и line-height будет вполне достаточно.

Свойство font-family

В значении этого свойства указывается список названий шрифтов, перечисленных через запятую. 
В начале списка располагают самый желаемый шрифт, затем менее желаемый, а в самом конце списка — общий тип шрифта. 
Браузер проходит по списку слева направо и использует первый найденный в системе или на сайте шрифт. 
Если название шрифта состоит из нескольких слов, то его нужно заключать в кавычки.

body {
  font-family: "PT Sans", "Arial", sans-serif;
}

В значении этого свойства указывается список названий шрифтов, перечисленных через запятую.

В начале списка располагают самый желаемый шрифт, затем менее желаемый, а в самом конце списка — общий тип шрифта.

Браузер проходит по списку слева направо и использует первый найденный в системе или на сайте шрифт.

Если название шрифта состоит из нескольких слов, то его нужно заключать в кавычки.

body {

font-family: "PT Sans", "Arial", sans-serif;

}

Свойство font-weight

Свойство задаёт насыщенность или толщину шрифта. 
Шрифт может быть жирнее или тоньше обычного начертания. 
В качестве значения можно использовать ключевое слово или число. 

Самые часто встречающиеся значения:
400 или normal — обычный шрифт, значение по умолчанию;
700 или bold — жирный шрифт.


Например:
h1 {
  font-weight: 400; /* то же самое что и normal */
}

p {
  font-weight: bold; /* то же самое что и 700 */
}

Свойство задаёт насыщенность или толщину шрифта.

Шрифт может быть жирнее или тоньше обычного начертания.

В качестве значения можно использовать ключевое слово или число.

Самые часто встречающиеся значения:

400 или normal — обычный шрифт, значение по умолчанию;

700 или bold — жирный шрифт.

Например:

h1 {

font-weight: 400; /* то же самое что и normal */

}

p {

font-weight: bold; /* то же самое что и 700 */

}

Свойство text-align

Описывает, как выравнивается текст и другие инлайновые элементы (изображения, инлайн-блоки, инлайн-таблицы и другие) внутри блока по горизонтали.

Свойство может принимать следующие значения:

left — выравнивание по левому краю блока, это значение по умолчанию;
right — по правому краю блока;
center — по центру блока;
justify — по ширине блока, при этом слова в строке будут размещаться так, чтобы занять равномерно всё пространство строки (пробелы между словами в таком случае становятся неравномерными, 
          так как браузер «растягивает» слова в строке).


Важно помнить, что свойство text-align применяется именно к самому блоку-контейнеру, внутри которого находится текстовый контент:
HTML:
<p>
  Я текст внутри абзаца
</p>

CSS:
p {
  text-align: center;
}

Описывает, как выравнивается текст и другие инлайновые элементы (изображения, инлайн-блоки, инлайн-таблицы и другие) внутри блока по горизонтали.

Свойство может принимать следующие значения:

left — выравнивание по левому краю блока, это значение по умолчанию;

right — по правому краю блока;

center — по центру блока;

justify — по ширине блока, при этом слова в строке будут размещаться так, чтобы занять равномерно всё пространство строки (пробелы между словами в таком случае становятся неравномерными,

так как браузер «растягивает» слова в строке).

Важно помнить, что свойство text-align применяется именно к самому блоку-контейнеру, внутри которого находится текстовый контент:

HTML:

<p>

Я текст внутри абзаца

</p>

CSS:

p {

text-align: center;

}

Свойство vertical-align

Свойством можно выравнивать инлайновые элементы относительно содержащей его строки. 
Самый простой пример — выровнять картинку <img> по вертикали в текстовой строке.

У свойства vertical-align много значений, но самые часто используемые:
top — выравнивание по верхнему краю строки;
middle — по середине строки;
bottom — по нижнему краю строки;
baseline — по базовой линии строки (значение по умолчанию).
В отличие от text-align свойство vertical-align задаётся самому элементу, а не содержащему его контейнеру:

HTML:
<p>
  <img src="picture.png" alt="Я картинка">
  Я текст внутри абзаца
</p>

CSS:
img {
  vertical-align: middle;
}

Свойством можно выравнивать инлайновые элементы относительно содержащей его строки.

Самый простой пример — выровнять картинку <img> по вертикали в текстовой строке.

У свойства vertical-align много значений, но самые часто используемые:

top — выравнивание по верхнему краю строки;

middle — по середине строки;

bottom — по нижнему краю строки;

baseline — по базовой линии строки (значение по умолчанию).

В отличие от text-align свойство vertical-align задаётся самому элементу, а не содержащему его контейнеру:

HTML:

<p>

Я текст внутри абзаца

</p>

CSS:

img {

vertical</

Главная » WWW

Рубрика: WWW

Конспект: основы CSS

Конспект: Наследование и каскадирование

Конспект: селекторы

Конспект: Формы

Конспект: Таблици

Конспект «Оформление текста»