Селекторы CSS - Справочник CSS3 | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Четверг, 08.12.2016
Главная » Справочник CSS3 » Полезные статьи


2D & 3D ТрансформацияСвойства контента
Свойства импортаСвойства углов
Свойства границСвойства анимации
ПсевдоклассыПсевдоэлементы
Свойства размераСвойства контура
Свойства переходаСвойства печати
Свойства тениСвойства отступов
Свойства текстаСвойства колонок
Свойства полейПозиционирование
Свойства интерфейсаТипы значений
Полезные статьиСвойства списка
Свойства шрифтаСвойства таблицы
Свойства фонаВендорные префиксы



Адаптивный сайт - aTmpl


Селекторы CSS

Способы управления селекторами и их атрибутами в CSS




Уменьшить размер стилей Вашего сайта помогут знания о возможностях применения селекторов и их атрибутов в вёрстке таблицы стилей сайта или блога.Я сам ругался матом когда столкнулся с подобным материалом, пришлось потратить время и не только на то чтобы понять как всё это работает, но и написать эту статью о возможностях манипулирования селекторами. Советую потратить немного безценного времени на изучение этой статьи, это поможет сократить время при формировании CSS в дальнейшем.Постараюсь более объективно отразить полезные возможности управления селекторами и их атрибутами, все примеры сделаны с подробным описанием и показаны в работе.В настоящее время свойства CSS3 обладают большими возможностями чем во времена канувшими в небытие.В нижней части сайта есть редактор, с помощю которого можно поэкспериментировать с примерами по своему усмотрению, чтобы понимание действий было более детальным.Если я буду не объективен или допущу ошибки, не сочтите за труд, укажите на них в комментарии.При существующих вопросах или предложениях используйте форму комментариев.





Типы селекторов

Существует шесть типов селекторов применяемых к атрибутам


Тип
Описание
[att=value]Атрибут будет иметь точное значение.
[att~=value]Если значение указананное в атрибуте будет прописано через пробел, до или после без разницы.
[att|=value]Если после значения указанном в атрибуте будет стоять дефис "-".
[att^=value]Если атрибут начинается с заданного значения, т.е если он находится в начале
[att$=value]Если атрибут заканчивается на заданном значении, т.е если он находится в конце
[att*=value]Если заданное значение существует в атрибуте, в любом месте, поэтому относитесь серьёзно к установке подобного типа.


Пример применения [att=value]

В этом примере атрибутом будет являтся class которому нужно указать точные значения.



<style>
[class="dsborder"] {
border:5px solid green;
width:100px;
height:50px;
}
</style><div class="dsborder"></div>


Пример [att=value] в действии



Пример применения [att~=value]

В этом примере атрибутом будет являтся alt, в обоих изображениях значение прописано через пробел.



<style>
[alt~="ICON"] {
border:15px solid red;
}
</style>
<img src="http://delaisait.ucoz.ru/favicon.ico" alt="Мой ICON" />
<img src="http://delaisait.ucoz.ru/favicon.ico" alt="Мой ICON сайта" />



Пример [att~=value] в действии

Мой ICONМой ICON сайта

Пример применения [att|=value]

В этом примере атрибутом будет являтся title, во втором варианте дефис "-" находится после, поэтому свойство будет применено к нему.



<style>
[title|="DEFIS"] {
color:green;
}
</style>
<p title="ГДЕ-DEFIS">Дефис находится до</p>
<p title="DEFIS-ЗДЕСЬ">Дефис находится после</p>



Пример [att|=value] в действии

Дефис находится до
Дефис находится после


Пример применения [att^=value]

В этом примере атрибутом будет являтся href, в первой ссылке укзано значение в начале, значит свойства будут применены к ней.



<style>
[href^="http://delaisait.ucoz.ru/"] {
color:indigo;
font-weight:bold;
}
</style>
<a href="http://delaisait.ucoz.ru/blog">Что в начале?</a>
<br>
<a href="http://shrift.ucoz.ru/blog">Что в начале?</a>



Пример [att^=value] в действии

Что в начале?
Что в начале?

Пример применения [att$=value]

В этом примере атрибутом будет являтся class, в первом блоке значение стоит в конце, значит свойства будут применены к нему, а второго вообще не будет.



<style>
[class$="dsblog"] {
border:5px solid blue;
width:100px;
height:100px;
}
</style>
<div class="moidsblog"></div>
<div class="dsblogmoi"></div>



Пример [att$=value] в действии



Пример применения [att*=value]

В этом примере атрибутом будет являтся class, и в первом и во втором блоке существует указанное значение, а значит свойства будут применены к обоим.



<style>
[class*="dsfail"] {
border:5px solid red;
width:100px;
height:100px;
}
</style>
<div class="moidsfail"></div>
<div class="dsfailmoi"></div>



Пример [att*=value] в действии



Дочерние селекторы

Дочерние селекторы находятся вложенными друг в друга, при этом должна соблюдаться последовательность которая прописана для них. Дочерние селекторы ещё называют наследниками селекторов, они прописываются через символ > (знак больше). Обратите внимание, здесь делается на прогнозируемую поледовательность, именно она является сутью применения подобной комбинации. Можно использовать существующее расположение селекторов и применить в удобном месте изменения.


Пример применения дочерних селекторов

В этом примере показаны 2 варианта применения дочерних селекторов, дополнительно они дополняют друг друга.



<style>
div > p > span {
color:green;
}
#one > .two > span:hover {
font-weight:bold;
}
</style>
<div><p>Применение <span>Дочернего селектора</span> в работе</p></div>
<div id="one"><p class="two"><span>Вот тоже вариант</span></p></div>



Пример применения дочерних селекторов в действии

Применение Дочернего селектора в работе

Вот тоже вариант



Контекстные селекторы

Контекстные селекторы находятся в одном замкнутом пространстве, если между ними попадают элементы в виде неописанных тегов они всё равно работают. Это довольно распространённый способ снижающий совокупный вес таблицы стилей, между селекторами должен быть пробел.


Пример применения контекстных селекторов

В этом примере видно что даже если в последовательность вложения попадает не описанный селектор его работа продолжается.



<style>
div p span {
color:green;
}
#one .two span:hover {
font-weight:bold;
}
</style>
<div><p>Применение <span>Контекстного селектора</span> в работе</p></div>
<div id="one"><p class="two"><span>Вот тоже вариант</span></p></div>



Пример применения контекстных селекторов в действии

Применение Контекстного селектора в работе

Вот тоже вариант



Соседние селекторы

Соседние селекторы, они же родственные комбинаторы существуют для объединения селекторов в последовательности в одном из контейнеров. При этом свойства будут реагировать именно на последний элемент. Это удобно расчитать если последовательность является постоянной, например в параграфе часто применяется выделение.


Пример применения соседних селекторов

Вот пару способов как применить соседние селекторы в работу, остальное на Вашем воображении.



<style>
p + div {
border-bottom:6px solid red;
width:60px;
}
div h1 + p {
font-size:40px;
}
</style> <div><p>Пример</p><div></div></div>
<div><h1>Ещё вариант</h1><p>В О Т</p></div>



Пример применения соседних селекторов в действии

Пример

Ещё вариант

В О Т



Комбинированные селекторы

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


Пример применения комбинированных селекторов

В этом примере вложенность разрывается, но воздействие свойств остаётся, при наведении фавикон будет вращаться, а при нажатии можно поставить ссылку.



<style>
p ~ #rotateimg img {
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
p ~ #rotateimg img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>
<div>
<p>ЖМИ</p>
<div id="rotateimg">
<a href="#dscomment">
<img src="http://delaisait.ucoz.ru/favicon.ico" />
</a>
</div>
</div>



Пример применения комбинированных селекторов в действии

ЖМИ



Поэкспериментируйте в редакторе

Редактор поддерживает любые компановки кодов, поместите код из примера в редактор и он покажет работу примера. Попробуйте сами изменить пример, тем самым Вам будет понятнее процесс.





Русские шрифты





Категория: Полезные статьи | Добавил: IZOTOP (28.05.2013) | Автор: Меренков Михаил W
Просмотров: 3193 | Теги: css, атрибуты, селекторы | Рейтинг: 0.0/0

Вопросов / Советов / Предложений - относящихся к материалу: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]