Html селектор цвета: HTML CSS Палитра цветов – Цвета html — Википедия

Содержание

Селекторы потомков | CSS справочник

CSS селекторы

Значение и применение

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

HTML элемент, расположенный внутри другого элемента является его потомком. Элемент <title> потомок <head>, а элемент <h3> и <p> на изображении потомки <body>.


Потомки в HTML документе.

Обратите внимание на важный момент, что элемент <i> является потомком одновременно для элемента <p>, <body> и для <html>.


Потомок для нескольких элементов.

Поддержка браузерами

CSS синтаксис:

selector selector {
блок объявлений;
}

Версия CSS

CSS1

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

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Cелекторы потомков</title>
<style>
.test {
background-color: lime; /* задаём цвет заднего фона */
color: white; /* задаём цвет шрифта*/
font-size: 30px; /*Указываем размер шрифта*/
height: 40px; /* указываем высоту элемента*/
text-align: center; /* горизонтальное выравнивание текста по центру */
}
h3 i
{ color:red; /* задаём цвет шрифта*/ } </style> </head> <body> <h3 class = "test">Заголовок <i>второго</i> уровня</h3> <h3>Заголовок <i>второго</i> уровня</h3> <h3>Заголовок <i>второго</i> уровня</h3> </body> </html>

В этом примере мы использовали селектор потомков, чтобы выделить определенным цветом все элементы <i>, размещенные внутри элементов <h3>. Кроме того, для первого элемента <h3> мы создали с помощью селектора класса определенный стиль.

Результат нашего примера:

Рис. 9 Пример использования селектора потомков.

В следующем примере я разместили три ссылки (элементы <a>) внутри элемента маркированного списка (элемент <li>), и разместил еще одну ссылку внутри абзаца:


Древовидная структура страницы.

При создании селектора потомков вы объединяете селекторы вместе согласно "ветви дерева" документа, помещая самого старшего родителя слева, а форматируемый элемент располагаете справа.

Селекторы, которые будут работать аналогично и выбирать элементы <a> внутри элементов <li>:

html body ul li a {блок объявлений}
html ul li a {блок объявлений}
html li a {блок объявлений}
body ul li a {блок объявлений}
body li a {блок объявлений}
ul li a {блок объявлений}
li a {блок объявлений}

Обратите внимание, что селекторы потомков могут включать более двух элементов, то есть содержать весь путь по дереву страницы, или наоборот могут не включать какие-то элементы, которые вложены по пути к форматируемому элементу и это тоже будет работать. Старайтесь без необходимости не включать "лишние" селекторы по пути к форматируемому элементу и использовать короткие селекторы.


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

li a {
text-decoration: none; /* убираем декорирование текста (нижнее подчеркивание под ссылкой) */
font-size: 20px; /* устанавливаем размер шрифта */
}

Как вы понимаете, ссылка, помещённая внутри элемента <p> не будет отформатирована, для неё мы создадим свой стиль:

p a {
color: #000; /* устанавливаем черный цвет текста */
background-color: yellow; /* устанавливаем цвет заднего фона */
}

Теперь соберем это в одном примере и посмотрим результат:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title> Декорирование ссылок с использованием селекторов потомков</title>
<style>
li a {
text-decoration: none; /* убираем декорирование текста (нижнее подчеркивание под ссылкой) */
font-size: 20px; /* устанавливаем размер шрифта */
}
p a {
color: #000; /* устанавливаем черный цвет текста */
background-color: yellow; /* устанавливаем цвет заднего фона */
}
</style>
</head>
	<body>
		<p> Нажмите для перехода к поиску <a href = "http://yandex.ru"> Яндекс</a></p>
		<ul>
			<li><a  href = "http://yandex.ru">Яндекс</a></li>
			<li><a href = "http://yandex.ru">Яндекс</a></li>
			<li><a href = "http://yandex.ru">Яндекс</a></li>
		</ul>
	</body>
</html> 

Результат нашего примера:

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

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

Рассмотрим пример, который более приближен к текущим реалиям, а именно комбинирование селекторов класса, а не селекторов типа, как мы рассматривали в примерах выше.

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

Предлагаю каждого сотрудника поместить в отдельный контейнер (элемент <div>) и внутри контейнера отдельно стилизовать контактные данные о сотруднике:

<div class = "top-card"> /* создаем контейнер с классом  top-card */
	<img src = "nich.jpg"> /* добавляем фото сотрудника */
	<p class = "name">Boris Britva</p> /* добавляем абзац с классом  name (фамилия имя сотрудника) */
	<p class = "phone">88005553535</p> /* добавляем абзац с классом  phone (телефон сотрудника) */
	<p>[email protected]</p> /* добавляем абзац с адресом электронной почты сотрудника */
</div> 

Затем мы создаем стили для контейнера и селекторов потомков:

.top-card { /* выбирает контейнер с классом  top-card */
border: 5px solid orange; /* создаем сплошную границу оранжевого цвета размером 5 пикселей */
width: 100px; /* задаем ширину элемента */
}
.top-card img { /* выбирает все изображения (элемент <img>) внутри контейнера с классом top-card */
width: 100px; /* задаем ширину изображения */
height: 100px; /* задаем высоту изображения */
border-bottom: 1px solid; /* устанавливаем сплошную границу снизу размером 1 пиксель (черный цвет по умолчанию) */
}
.top-card .name { /* выбирает элементы с классом name внутри контейнера с классом top-card */
color: blue; /* устанавливаем цвет текста */
}
.top-card .phone { /* выбирает элементы с классом name внутри контейнера с классом top-card */
color:  red; /* устанавливаем цвет текста */
}
.top-card p { /* выбирает все абзацы (элемент <p>) внутри контейнера с классом top-card */
text-align: center; /* горизонтальное выравнивание текста по центру */
}

Теперь соберем это в одном примере и посмотрим результат:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title> Стилизация карточки сотрудника</title>
<style>
.top-card
{ /* выбирает контейнер с классом top-card */ border: 5px solid orange; /* создаем сплошную границу оранжевого цвета размером 5 пикселей */ width: 100px; /* задаем ширину элемента */ } .top-card img { /* выбирает все изображения (элемент <img>) внутри контейнера с классом top-card */ width: 100px; /* задаем ширину изображения */ height: 100px; /* задаем высоту изображения */ border-bottom: 1px solid; /* устанавливаем сплошную границу снизу размером 1 пиксель (черный цвет по умолчанию) */ } .top-card .name { /* выбирает элементы с классом name внутри контейнера с классом top-card */ color: blue; /* устанавливаем цвет текста */ } .top-card .phone { /* выбирает элементы с классом name внутри контейнера с классом top-card */ color: red; /* устанавливаем цвет текста */ } .top-card p { /* выбирает все абзацы (элемент <p>) внутри контейнера с классом top-card */ text-align: center; /* горизонтальное выравнивание текста по центру */ } </style> </head> <body> <div class = "top-card"> /* создаем контейнер с классом top-card */ <img src = "nich.jpg"> /* добавляем фото сотрудника */ <p class = "name">Boris Britva</p> /* добавляем абзац с классом name (фамилия имя сотрудника) */ <p class = "phone">88005553535</p> /* добавляем абзац с классом phone (телефон сотрудника) */ <p>[email protected]</p> /* добавляем абзац с адресом электронной почты сотрудника */ </div> </body> </html>

Результат нашего примера:

Пример стилизации карточки сотрудников с использованием селекторов потомков.CSS селекторы

Псевдокласс отрицания :not(селектор) | CSS справочник

CSS селекторы

Значение и применение

Селектор :not() или псевдокласс отрицания, позволяет выбрать элементы, или селекторы отличные от указанных.

Что нельзя использовать с псевдоклассом :not():

  • Использовать в одном селекторе несколько псевдоклассов :not().
  • Использовать с псевдоэлементами (::first-letter, ::first-line и так далее).
  • Нельзя использовать с селекторами потомков (например, div ul a).
  • Использовать в групповых селекторах (комбинации из селекторов).

Поддержка браузерами

CSS синтаксис:

:not(селектор) {
блок объявлений;
}

Версия CSS

CSS3

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

Давайте рассмотрим пример в котором по разному стилизуем изображения. Допустим у нас есть изображения фиксированного размера со следующими значениями:

img { /* выбираем все изображения */
width: 100px; /* ширина элемента в пикселях */
height: 100px; /* высота элемента в пикселях */
}

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

.photo { /* выбираем все элементы с классом photo */
border: 2px solid orange; /* сплошная граница размером 2 пикселя оранжевого цвета */
}

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

img:not(.photo)  { /* выбираем все изображения, которые не имеют класса photo */
border: 2px dashed green; /* пунктирная граница размером 2 пикселя зеленого цвета */
}

Всё вместе и результат:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Псевдокласс отрицания :not()</title>
<style>
img { /* выбираем все изображения */
width: 100px; /* ширина элемента в пикселях */
height: 100px; /* высота элемента в пикселях */
}
.photo { /* выбираем все элементы с классом photo */
border: 2px solid orange; /* сплошная граница размером 2 пикселя оранжевого цвета */
}
img:not(.photo)  { /* выбираем все изображения, которые не имеют класса photo */
border: 2px dashed green; /* пунктирная граница размером 2 пикселя зеленого цвета */
}
</style>
</head>
	<body>
		<img src = "nich.jpg" alt = "nich" class = "photo">
		<img src = "nich.jpg" alt = "nich" class = "photo"><br>
		<img src = "nich.jpg" alt = "nich"> 
		<img src = "nich.jpg" alt = "nich"> 
		<img src = "nich.jpg" alt = "nich">
	</body>
</html>

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

:not() все изображения, отлично от изображений с классом photo:

Пример использования псевдокласса отрицания :not() в CSS.CSS селекторы

Универсальный селектор | htmlbook.ru

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

Для обозначения универсального селектора применяется символ звёздочки (*) и в общем случае синтаксис будет следующий.

* { Описание правил стиля }

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

В примере 14.1 показано одно из возможных приложений универсального селектора — выбор шрифта и размера текста для всех элементов документа.

Пример 14.1. Использование универсального селектора

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML> 
<html> 
 <head> 
  <meta charset="utf-8"> 
  <title>Универсальный селектор</title> 
  <style> 
   * { 
    font-family: Arial, Verdana, sans-serif; /* Рубленый шрифт для текста */ 
    font-size: 96%; /* Размер текста */ 
   } 
  </style> 
 </head> 
 <body> 
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> 
 </body> 
</html>

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

Вопросы для проверки

1. Какой стиль установит красный цвет текста в абзаце?

  1. * HTML P { color: red; }
  2. HTML * P { color: red; }
  3. P * { color: red; }
  4. BODY * P { color: red; }
  5. BODY P * { color: red; }

2. Что означает следующая запись в стилях?

* DIV * { background: green; }

  1. Установить фоновый цвет для всех элементов веб-страницы.
  2. Задать цвет для всех текстовых элементов документа.
  3. Установить фоновый цвет для всех элементов внутри контейнера <DIV>.
  4. Установить фоновый цвет только для тегов <DIV>, вложенных в другие контейнеры.
  5. Зеленый цвет фона для всех тегов <DIV> в коде.

3. К какому слову применяется стиль селектора div * em * в следующем фрагменте кода?

<div>
 <h2><em>Lorem</em> ipsum</h2>
 <p>Lorem ipsum dolor sit amet, <strong>consectetuer</strong> adipiscing elit.</p>
 <ul>
  <li><em>Ut</em> wisis enim ad</li> 
  <li>Quis <em><span>nostrud</span></em> exerci</li>
  <li>Tution ullamcorper suscipit</li>
 </ul>
 <em>Nisl</em> ut aliquip exea commodo consequat.
</div>
  1. Lorem
  2. consectetuer
  3. Ut
  4. nostrud
  5. Nisl

Ответы

1. HTML * P { color: red; }

2. Установить фоновый цвет для всех элементов внутри контейнера <DIV>.

3. nostrud

Селектор атрибута (заканчивается определёнными символами)

CSS селекторы

Значение и применение

Селектор [attribute$ = value] выбирает каждый элемент, значение атрибута которого заканчивается указанным значением.

Поддержка браузерами

CSS синтаксис:

[attribute$ = value] {
блок объявлений;
}

Версия CSS

CSS3

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

В CSS 3 был введен не только селектор атрибутов, который позволяет выбирать элементы, чьи атрибуты начинаются с определённых символов, но и элементы, чьи атрибуты заканчиваются определёнными символами.

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

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Селектор атрибута со значением, заканчивающимся определёнными символами</title>
<style> 
a[href$=".doc"] { /* выбираем все элементы с атрибутом href, значение которого закачивается на .doc */
color: green; /* устанавливаем цвет текста */
background-color: lightblue; /* устанавливаем цвет заднего фона */
}
a[href$=".mp3"] { /* выбираем все элементы с атрибутом href, значение которого закачивается на .mp3 */
background-color: khaki; /* устанавливаем цвет заднего фона */
}
</style>
</head>
	<body>
		<a href ="http:/path.to/test.doc">Инструкция</a><br>
		<a href ="http:/path.to/test.mp3">Песня про зайцев</a>
	</body>
</html>

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


Результат нашего примера:

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *