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

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

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

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

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

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

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

    <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 селекторов атрибутов
  3. Селектор атрибута со значением

Синтаксис:

[атрибут="значение"]{
  свойство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>
<a href="2.html">Обычная ссылка</a> 
<a href="2.html" target="_blank">Ссылка в новом окне</a>
</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;
}

Группировка 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>
  3. Более конкретные стили имеют приоритет перед менее конкретными.
    • Стилевой класс приоритетнее стиля для конкретного тега:
    • 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
  4. В случае привязки к тегу нескольких стилевых классов, приоритетными считаются те, что указаны правее.
  5. В примере приоритетным будет class2, то есть текст станет синего цвета:

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

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

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

*
*

Вставить формулу как
Блок
Строка
Дополнительные настройки
Цвет формулы
Цвет текста
#333333
Используйте LaTeX для набора формулы
Предпросмотр
\({}\)
Формула не набрана
Вставить