Уважаемые друзья и пользователи сайта ART-UCOZ!
Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!
Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.
Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!
Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.
Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!
Подобные просьбы и вопросы - будут игнорироваться!
CSS селекторы и Как они работают (Начинающие понятия)
Дата добавления: 10.08.2014 - 23:35
Категория: Уроки / Литература / Пособия
Добавил: Buger
Количество просмотров: 2.1k
Количество комментариев: 0
Рейтинг материала: 5.0 / 2
БЕСПЛАТНО
рейтинг
5.0
/
голосов
2
Вы новичок в CSS? Значит эта статья предназначена для вас! Возможно,
самый большой ключ к пониманию CSS, является понимание селекторов.
Селекторы, позволяют ориентироваться на конкретные HTML элементы и
применять к ним стиль. Давайте не будем прямо сейчас думать о конкретном
стиле, а просто давайте сосредоточимся.
В приведенных ниже примерах, CSS будет в файле с именем style.css который ссылается от HTML документа, который называется как index.html. Они представляют собой отдельные файлы с разным разрешением, и в тоже время является большая частью CSS, сохраняя дизайн в документе.
Вот то, что, будет у нас в HTML файле:
И файл CSS, который будет содержать только те селекторные блоки которые вы увидите ниже.
Селектор ID
Информация:
ID селекторы самый мощный тип селектора в плане CSS специфики. Это означает, что они выбивают другие виды селекторов и стили, определенные в системе. Это звучит хорошо, но как правило, считается плохим, потому что, когда есть нижняя специфичность селекторов, которые легче переопределить при необходимости.
Селектор Class
HTML
Информация:
Селекторы классов ваш друг. Они, наверное, самые полезные и универсальные селекторы. Отчасти потому, что они хорошо поддерживаются во всех браузерах. Еще вы можете добавить несколько классов (только через пробел) для HTML элементов. Также есть JavaScript вещи, которые вы можете применить, специально для манипулирования классами.
Селектор тегов
Информация:
В селекторах Тегов самое полезное, это при изменении свойства, которые являются уникальными для отдельных HTML элементов.
Например как установка стилей списков (list-style) на <ul> или размер вкладок (tab-size) на <pre>
Не полагайтесь на их слишком много, как правило, более полезно иметь класс с определенным стилем, который можно использовать на любом HTML элементе.
Селектор Атрибутов
Информация:
Вы можете возразить, что селекторы атрибутов являются еще более полезным, чем классы, потому что они имеют одинаковое значение специфичности.
Вряд ли проблемой станет меньше, селекторы атрибутов не поддерживаются в IE 6.
Позиционные селекторы
Информация:
Есть несколько различных позиционных селекторов :nth-child. Используя простые выражения (как 3n = "каждый третий") вы можете выбирать элементы на основе их положения в HTML.
Другие Псевдо селекторы
Информация:
:empty является одним из многих псевдо селекторов, который вы можете увидеть после двоеточия (:) в них. Как правило, они представляют собой нечто, что вы не могли знать всего на элементе и атрибутов в одиночку.
Заметим, что это немного отличается от псевдо элементов, которые вы можете увидеть после двойного двоеточия (: :). Они несут ответственность за добавление элементов на странице, которые они выбрали.
Ну и на закуску :)
Есть также селекторы комбинаторы такие как: "~" , "+" и ">" , что влияет на селекторы, таким образом:
Источник: http://art-ucoz.ru
В приведенных ниже примерах, CSS будет в файле с именем style.css который ссылается от HTML документа, который называется как index.html. Они представляют собой отдельные файлы с разным разрешением, и в тоже время является большая частью CSS, сохраняя дизайн в документе.
Вот то, что, будет у нас в HTML файле:
Код
<!DOCTYPE html>
<html lang="en">
<head>
<title>Мы учим селекторы!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="yay">Ура</h1>
<body>
</html>
<html lang="en">
<head>
<title>Мы учим селекторы!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="yay">Ура</h1>
<body>
</html>
И файл CSS, который будет содержать только те селекторные блоки которые вы увидите ниже.
Селектор ID
CSS
#happy-cake {
}
}
HTML
<!-- будет соответствовать -->
<div id="happy-cake"></div>
<!-- будет соответствовать -->
<aside id="happy-cake"></aside>
<!-- Не будет соответствовать -->
<div id="sad-cake">Неправильный ID!</div>
<!-- Не будет соответствовать -->
<div class="happy-cake">Это не ID!</div>
<div id="happy-cake"></div>
<!-- будет соответствовать -->
<aside id="happy-cake"></aside>
<!-- Не будет соответствовать -->
<div id="sad-cake">Неправильный ID!</div>
<!-- Не будет соответствовать -->
<div class="happy-cake">Это не ID!</div>
Информация:
ID селекторы самый мощный тип селектора в плане CSS специфики. Это означает, что они выбивают другие виды селекторов и стили, определенные в системе. Это звучит хорошо, но как правило, считается плохим, потому что, когда есть нижняя специфичность селекторов, которые легче переопределить при необходимости.
Селектор Class
CSS
.module {
}
}
HTML
<!-- будет соответствовать -->
<div class="module"></div>
<!-- будет соответствовать -->
<aside class="country module iceland"></aside>
<!-- Не будет соответствовать -->
<div class=".module">Точка является для CSS, а не для HTML</div>
<!-- Не будет соответствовать -->
<div class="bigmodule">Неправильный класс</div>
<div class="module"></div>
<!-- будет соответствовать -->
<aside class="country module iceland"></aside>
<!-- Не будет соответствовать -->
<div class=".module">Точка является для CSS, а не для HTML</div>
<!-- Не будет соответствовать -->
<div class="bigmodule">Неправильный класс</div>
Информация:
Селекторы классов ваш друг. Они, наверное, самые полезные и универсальные селекторы. Отчасти потому, что они хорошо поддерживаются во всех браузерах. Еще вы можете добавить несколько классов (только через пробел) для HTML элементов. Также есть JavaScript вещи, которые вы можете применить, специально для манипулирования классами.
Селектор тегов
CSS
h2 {
}
}
HTML
<!-- будет соответствовать -->
<h2>Привет, Мир!</h2>
<main>
<div>
<!-- будет соответствовать -->
<h2>везде</h2>
</div>
</main>
<!-- Не будет соответствовать -->
<div class="h2">Неправильный тег, нельзя его обмануть </div>
<!-- Не будет соответствовать -->
<h2class="yolo">Убедитесь, что тег имеет пробел после него!</h2>
<h2>Привет, Мир!</h2>
<main>
<div>
<!-- будет соответствовать -->
<h2>везде</h2>
</div>
</main>
<!-- Не будет соответствовать -->
<div class="h2">Неправильный тег, нельзя его обмануть </div>
<!-- Не будет соответствовать -->
<h2class="yolo">Убедитесь, что тег имеет пробел после него!</h2>
Информация:
В селекторах Тегов самое полезное, это при изменении свойства, которые являются уникальными для отдельных HTML элементов.
Например как установка стилей списков (list-style) на <ul> или размер вкладок (tab-size) на <pre>
Не полагайтесь на их слишком много, как правило, более полезно иметь класс с определенным стилем, который можно использовать на любом HTML элементе.
Селектор Атрибутов
CSS
[data-modal="open"] {
}
}
HTML
<!-- будет соответствовать -->
<div data-modal="open"></div>
<!-- будет соответствовать -->
<aside class='closed' data-modal='open'></aside>
<!-- Не будет соответствовать -->
<div data-modal="false">Неверное значение</div>
<!-- Не будет соответствовать -->
<div data-modal>Нет значения</div>
<!-- Не будет соответствовать -->
<div data-modal-open>Неправильный атрибут</div>
<div data-modal="open"></div>
<!-- будет соответствовать -->
<aside class='closed' data-modal='open'></aside>
<!-- Не будет соответствовать -->
<div data-modal="false">Неверное значение</div>
<!-- Не будет соответствовать -->
<div data-modal>Нет значения</div>
<!-- Не будет соответствовать -->
<div data-modal-open>Неправильный атрибут</div>
Информация:
Вы можете возразить, что селекторы атрибутов являются еще более полезным, чем классы, потому что они имеют одинаковое значение специфичности.
Вряд ли проблемой станет меньше, селекторы атрибутов не поддерживаются в IE 6.
Позиционные селекторы
CSS
:nth-child(2) {
}
}
HTML
<ul>
<li>Нет</li>
<!-- будет соответствовать -->
<li>да, я второй номер по счету</li>
<li>Нет</li>
</ul>
<li>Нет</li>
<!-- будет соответствовать -->
<li>да, я второй номер по счету</li>
<li>Нет</li>
</ul>
Информация:
Есть несколько различных позиционных селекторов :nth-child. Используя простые выражения (как 3n = "каждый третий") вы можете выбирать элементы на основе их положения в HTML.
Другие Псевдо селекторы
CSS
:empty {
}
}
HTML
<!-- будет соответствовать -->
<div></div>
<!-- будет соответствовать -->
<aside data-blah><!-- ничего --></aside>
<!-- Не будет соответствовать -->
<div> </div>
<!-- Не будет соответствовать -->
<div>
</div>
<div></div>
<!-- будет соответствовать -->
<aside data-blah><!-- ничего --></aside>
<!-- Не будет соответствовать -->
<div> </div>
<!-- Не будет соответствовать -->
<div>
</div>
Информация:
:empty является одним из многих псевдо селекторов, который вы можете увидеть после двоеточия (:) в них. Как правило, они представляют собой нечто, что вы не могли знать всего на элементе и атрибутов в одиночку.
Заметим, что это немного отличается от псевдо элементов, которые вы можете увидеть после двойного двоеточия (: :). Они несут ответственность за добавление элементов на странице, которые они выбрали.
Ну и на закуску :)
CSS
.module.news {
/* Выбор элементов с обоими из этих классов */
}
#site-footer::after {
/* Добавляет содержимое после элемента с таким идентификатором ID */
}
section[data-open] {
/* Выбирает только элементы раздела, если у них есть этот атрибут */
}
/* Выбор элементов с обоими из этих классов */
}
#site-footer::after {
/* Добавляет содержимое после элемента с таким идентификатором ID */
}
section[data-open] {
/* Выбирает только элементы раздела, если у них есть этот атрибут */
}
Есть также селекторы комбинаторы такие как: "~" , "+" и ">" , что влияет на селекторы, таким образом:
CSS
.module > h2 {
/* Выбирает элементы h2, являющиеся прямым дочерним элемента для этого класса */
}
h2 + p {
/* Выбирает элементы р, которые непосредственно следуют в элементе h2 */
}
li ~ li {
/* Выбирает элементы li, которые являются родственные (и следующих) другой li элемент. */
}
/* Выбирает элементы h2, являющиеся прямым дочерним элемента для этого класса */
}
h2 + p {
/* Выбирает элементы р, которые непосредственно следуют в элементе h2 */
}
li ~ li {
/* Выбирает элементы li, которые являются родственные (и следующих) другой li элемент. */
}
Источник: http://art-ucoz.ru
Добавлять комментарии могут только зарегистрированные пользователи.
Поделись с друзьями: