Рубрика: css

css

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

Автор записи Автор: Evgeny Yakovlev
Дата записи 2020/04/22

ссылка

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.

css

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

Автор записи Автор: Evgeny Yakovlev
Дата записи 2020/04/22

Ссылки

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;

}

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

css

css слои \ DIV

Автор записи Автор: Evgeny Yakovlev
Дата записи 2019/09/21

теги <LAYER> либо <DIV>
Создание слоя с помощью парного тега <DIV>
атрибуты тега <DIV>
<DIV ALING=RIGHT/LEFT/CENTER> расположить текст с право/слева/по центру </DIV>
<DIV CLASS=ITALICFONT> отображение текста курсивом </DIV>
<DIV CLASS=BOLDFONT>  отображение текста полужирным шрифтом </DIV>
ID позволяет использовать глобальные идентификатор.
атрибут ID  используется  однократно.в противном случае используют классы
<DIV STYLE="left: 50px; position: absolute; top: 70px; "  задает отступы слева \ с право \сверху \снизу  и  положении на странице

теги <LAYER> либо <DIV>

Создание слоя с помощью парного тега <DIV>

атрибуты тега <DIV>

<DIV ALING=RIGHT/LEFT/CENTER> расположить текст с право/слева/по центру </DIV>

<DIV CLASS=ITALICFONT> отображение текста курсивом </DIV>

<DIV CLASS=BOLDFONT> отображение текста полужирным шрифтом </DIV>

ID позволяет использовать глобальные идентификатор.

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

<DIV STYLE="left: 50px; position: absolute; top: 70px; " задает отступы слева \ с право \сверху \снизу и положении на странице

Каскадные Листы Стилей Cascading Style Sheets CSS

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

a.menu: link
{
color: #34522f;
font-famaly: arial;
font-size: 32px;
font-waight: bold;
text-decoration: none
}

<HEAD> <meta http-equiv=content-style-type content="text/css";> </HEAD> это говорит о том что в документе применяются css

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

CSS позволяет более гибко контролировать шрифт , цвет фона и т. д.

CSS позволяет быстро менять оформление страницы

a.menu: link

{

color: #34522f;

font-famaly: arial;

font-size: 32px;

font-waight: bold;

text-decoration: none

}

<HEAD> <meta http-equiv=content-style-type content="text/css";> </HEAD> это говорит о том что в документе применяются css

css

css синтаксис

Автор записи Автор: Evgeny Yakovlev
Дата записи 2019/09/21

Элемент.
Все начинается с элемента или с селектора
Элементами могут быть любые теги. 
Например <H1> <P> <A>  <TD>

Свойства. 
Именно для элемента назначаются атрибуты. 
MARGIN WIDHT FONT-FAMALY BORDER-RIGHT HEIGHT

Значение. 
Каждое свойство достигает определенного значения

Объявление.
значения которые оно должно принять образует объявления. 

Правило.
Элемент и его объявления образуют правило
h1 {color: red; size: 20pt} пример правила

Группировки стилей и селектором класса:
<pre class="lang:default decode:true " >
Группировка может производится по одинаковым тегам или по атрибутам одного семейства

до группировки по тегам
h1 {font-famely: arial;  font-size: 14pt }
h2 {font-famely: arial;  font-size: 14pt }
h3 {font-famely: arial;  font-size: 14pt }
после группировки по тегам
h1, h2, h3 {font-famaly: arial font-size 14pt}

до группировки по атрибутам одного семейства
body {margin-top: 12pt;margin-left: 10pt;margin-right: 14pt }
после группировки по атрибутам
body {margin: 12pt 10pt 14pt}

Селекторы классов (class selectors) синтаксис 
селектор.класс {свойства}
.класс  {свойства}

Элемент.

Все начинается с элемента или с селектора

Элементами могут быть любые теги.

Например <H1> <P> <A> <TD>

Свойства.

Именно для элемента назначаются атрибуты.

MARGIN WIDHT FONT-FAMALY BORDER-RIGHT HEIGHT

Значение.

Каждое свойство достигает определенного значения

Объявление.

значения которые оно должно принять образует объявления.

Правило.

Элемент и его объявления образуют правило

h1 {color: red; size: 20pt} пример правила

Группировки стилей и селектором класса:

Группировка может производится по одинаковым тегам или по атрибутам одного семейства

до группировки по тегам

h1 {font-famely: arial; font-size: 14pt }

h2 {font-famely: arial; font-size: 14pt }

h3 {font-famely: arial; font-size: 14pt }

после группировки по тегам

h1, h2, h3 {font-famaly: arial font-size 14pt}

до группировки по атрибутам одного семейства

body {margin-top: 12pt;margin-left: 10pt;margin-right: 14pt }

после группировки по атрибутам

body {margin: 12pt 10pt 14pt}

Селекторы классов (class selectors) синтаксис

селектор.класс {свойства}

.класс {свойства}

css

css четыре варианта использования \ встраивание \ подключение \ связывание \ импорт

Автор записи Автор: Evgeny Yakovlev
Дата записи 2019/09/21

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

Правила каскадирования:
встраиваемые стили приоритет перед подключаемыми
подключаемые имеют приоритет перед связными
связанные стили имеют приоритет перед импортированными

встраиваемые стили имеют влияние только на тег
<html><head><title> заголовок </title></head>
<body>
<p style="font: 17pt comic sans ms"> Текст этого абзаца отобразится шрифтом Comic sans ms и размером в 17 пунктов" </p>
</body>
</html>

подключаемые стили применяются ко всей страницы для этого служит парный тег <STYLE>

<html><head><title> подключаемые стили </title>
<style>
<!--
body {
background: #ffffff;
color: #000000;
}
h1 {
font: 14 pt Book Antiqua;
color: #cc0000;
}
p {
font: 12pt times;
}
a {
color: #ffffff ; text
</head>
<body>
<h1> заголовок </h1>
<p> типа тест <br> еще текст <br> два разе еще тест </p>
</body>
</html>

встраивание

подключение

связывание

импорт

Правила каскадирования:

встраиваемые стили приоритет перед подключаемыми

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

связанные стили имеют приоритет перед импортированными

встраиваемые стили имеют влияние только на тег

<html><head><title> заголовок </title></head>

<body>

<p style="font: 17pt comic sans ms"> Текст этого абзаца отобразится шрифтом Comic sans ms и размером в 17 пунктов" </p>

</body>

</html>

подключаемые стили применяются ко всей страницы для этого служит парный тег <STYLE>

<html><head><title> подключаемые стили </title>

<style>

<!--

body {

background: #ffffff;

color: #000000;

}

h1 {

font: 14 pt Book Antiqua;

color: #cc0000;

}

p {

font: 12pt times;

}

a {

color: #ffffff ; text

</head>

<body>

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

<p> типа тест <br> еще текст <br> два разе еще тест </p>

</body>

</html>

css

css ссылки \ A \ color

Автор записи Автор: Evgeny Yakovlev
Дата записи 2013/10/06

a:link { color: green; } - этот селектор применяется к не посещенным ссылкам

a:visited { color: red; } - этот селектор применяется к посещенным ссылкам

a:hover { color: yellow; } - этот селектор применяется когда пользователь наводит курсор

a { color: red;} - для всех состояний ссылок красный цвет

a:link { color: green; } - этот селектор применяется к не посещенным ссылкам

a:visited { color: red; } - этот селектор применяется к посещенным ссылкам

a:hover { color: yellow; } - этот селектор применяется когда пользователь наводит курсор

a { color: red;} - для всех состояний ссылок красный цвет