CSS урок 4. Селекторы атрибутов и универсальный селектор

Авторadmin / Опубликовано

Цель урока: знакомство с css селекторами атрибутов, а также универсальным селектором. Рассмотрены примеры создания стилей, приоритет селекторов и их группировка

Назад
К оглавлению
Далее

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

  1. Селектор атрибута, значение которого не важно

    2. Синтаксис:

    [атрибут]{
  свойство1: значение;
  свойство2: значение;
}
/* или */
x[атрибут]{
  свойство1: значение;
  свойство2: значение;
}

    где x — селектор (тег), для которого и создается правило

    Пример: В html-код страницы необходимо добавить правило для селектора атрибута:

    <html>
<head>
<style type="text/css">
...
</style>
</head>
<body>
<img src="1.jpg" alt="надпись">
</body>
</html>

    Необходимо: Создать правило для селектора img с атрибутом alt

    Выполнение:

    <style type="text/css">
img[alt]{
  border:1px solid red; /* граница красного цвета */
}
</style>

    Результат:

    пример в css селекторов атрибутов
  2. Селектор атрибута со значением

Синтаксис:

[атрибут="значение"]{
  свойство1: значение;
  свойство2: значение;
}
/* или */
x[атрибут="значение"]{
  свойство1: значение;
  свойство2: значение;
}

где x — селектор (тег), для которого и создается правило

Пример: В hrml-код страницы необходимо добавить правило для селектора атрибута:

<body>
<input type="text" value="логин"><br>
<input type="radio" value="yes">Да<br>
<input type="radio" value="no">Нет<br>
</body>
</html>

Необходимо: Создать правило для текстового поля, добавив рамку и внутренние отступы, и для radio кнокпи, скрыв ее (свойство display)

Выполнение:

input[type="text"]{
  padding:3px; /* внутренние отступы */
  border:1px solid red;
}
input[type="radio"]{
   display:none;/* скрываем элемент */
}

Результат:

селектор атрибута со значением

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

Пример: Для цитатного текста (тег q), у которого установлен атрибут title, необходимо добавить свойство для цвета элемента. Цитатный текст без атрибута необходимо сделать курсивом

Выполнение:

<html>
<head>
<style type="text/css">
q{
   font-style:italic;
}
q[title]{
   color:maroon;
}
</style>
</head>
<body>
<p>Закон Мерфи гласит: 
<q>Если неприятность может случиться, то она обязательно случится</q>, можем ввести свое наблюдение: 
<q title="Из законов Фергюсона-Мержевича">После того, как веб-страница будет корректно отображаться в одном браузере, выяснится, что она неправильно показывается в другом</q>.
</p> 
</body>
</html>

Результат:

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

Пример: Для гиперссылки, которая выводится в новом окне (атрибут target="_blank") установить задний фон и отступ слева

Выполнение:

<html>
<head>
<style type="text/css">
a[target="_blank"]{
	background-color:#00cc00;
	padding-left:15px
}
</style>
</head>
<body>
<а href="2.html">Обычная ссылка</а> 
<а href="2.html" target="_blank" rel="noopener">Ссылка в новом окне</а>
</body>
</html>

Результат:

Обычная ссылка
Ссылка в новом окне

Дополнительные параметры в фильтрации атрибутов

[атрибут*=значение]{...}

Атрибут содержит данное значение (но не строго равняется ему)

Пример:

...
<style type="text/css">
div[id*=post]{color:red;}
</style>
</head>
<body>
<div id="post_1">one</div> 
<div id="post_two">two</div> 
<div id="third_post">three</div>
 ...

Результат:

значение селектора атрибута 
[атрибут^=значение]{...}

Атрибут начинается с данного значения

Пример:

div[id^=post]{color: red;}
...
<div id="post_1">one</div> 
<div id="post_two">two</div> 
<div id="third_post">three</div>

Результат:

начало значения атрибута css 
[атрибут$=значение]{...}

Атрибут заканчивается на данное значение 

div[id$=post]{color: red;}
...
<div id="post_1">one</div> 
<div id="post_two">two</div> 
<div id="third_post">three</div>

Результат:

селектор атрибута заканчивается на данное значени
Важно: необходимо обратить внимание на то, что данные примеры работают во всех современных браузерах: Safari, Chrome, Firefox, Opera и IE7 и выше.

Универсальный селектор CSS

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

Синтаксис:

*{
	свойство1: значение;
	свойство2: значение;
	свойство3: значение;
}
Пример: для всех элементов страницы определить единое семейство шрифта и цвет шрифта

Выполнение:

*{
	font-family: Arial, Verdana, sans-serif;
	color: navy;
}
Задание:
Скопируйте html-код и добавьте css-правила для выполнения следующих после кода заданий:

<html>
	<head>
		<style>
		</style>
	</head>
<body>
<a name="top"></a>
<input type="text" value="имя"><br>
<input type="text" value="имя и фамилия"><br>
<input type="button" value="ok"><br>
<p class="text text1-count1-text">Первый абзац</p>
<p class="text text2-count2-text">Второй абзац</p>
<p class="text text3-count3-text">Третий абзац</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="inner">Nullam consequat eget enim sit amet pharetra. 
Curabitur dictum dolor eget urna vehicula cursus.</div> 
<div>In in luctus tellus. Etiam id velit eu enim lobortis tristique.</div>
<h2 id="glava1">Глава 1</h2>
<div>Aliquam erat volutpat. Curabitur euismod accumsan neque at mollis.</div>
<h2 id="glava2">Глава 2</h2>
<a href="#top">Вверх</a>	
</body>
</html>

1) Необходимо задать цвет фона у кнопки.
2) Задать жирный шрифт для текстового поля, значение атрибута value которого заканчивается словом «фамилия».
3) Изменить цвет текста только у второго абзаца (использовать правило для селектора атрибутов с параметром).
4) Установите размера текста для всех элементов документа.
5) Самостоятельно придумайте правила для:

<h2 id="glava2">
<a href="#top">
<div class="inner">

Группировка CSS селекторов

Для сокращения записи правил в CSS принята группировка:
Группировка CSS селекторов

CSS приоритет селекторов

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

Общие правила:

Подробные правила:

  1. Внешняя таблица стилей (подключаемая методом связывания), ссылка на которую встречается в html-документе позже, имеет приоритет по отношению к внешней таблице стилей, ссылка на которую встречается раньше.

    2. В примере стили файла style2.css будут приоритетней стилей файла style1.css:

    <head>
<link rel="stylesheet" type="text/css" href="style1.css" />
<link rel="stylesheet" type="text/css" href="style2.css" />
</head>
  2. Более конкретные стили имеют приоритет перед менее конкретными.
    • Стилевой класс приоритетнее стиля для конкретного тега:
      • p.classname {color:red} /* более высокий приоритет */ 
p {color:blue}
    • Универсальный id имеет более высокий приоритет, чем у класса:
      •   #in{color:red} /* более высокий приоритет */
  .news{color:blue}
      </style></head> 
<body> 
<p id="in" class="news">Параграф будет красного цвета</p>
    • Свойства стиля, объявленные как !important, имеют приоритет перед всеми другими значениями.

      • В примере стиль весь текст в рамках тегов p сделается красным вне зависимости от любых других переопределений стиля для тега p:

      ...
p {color: red !important} 
p.blue{color:blue}
...
      <body>
<p class="blue">Текст красный</p>
...

    Итак, приоритетность:

    I II III IV
    !important; #id .class
    :pseudo-class
    []atributes     		стиль тегов
    :pseudo-elements
  3. В случае привязки к тегу нескольких стилевых классов, приоритетными считаются те, что указаны правее.

    4. В примере приоритетным будет class2, то есть текст станет синего цвета:

    ...
p.class1 {color:red} /* более высокий приоритет */ 
p.class2 {color:blue}
...
    <body>
<p class="class1,class2">Текст синий</p>
...
Назад
К оглавлению
Далее