Различия

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


—selektory [2025/07/06 12:39] (текущий) – создано - внешнее изменение 127.0.0.1
Строка 1: Строка 1:
 +====== Селекторы ======
 +  * [[http://www.w3.org/TR/CSS2/selector.html|CSS 2.1 Selectors]]
 +  * [[http://www.w3.org/TR/css3-selectors/|CSS 3 Selectors]]
 +  * [[http://everstudent.ru/blog/htmlcss/30-css-seletors-to-memorize/|30 CSS- селекторов, которые вы должны запомнить]] - примеры использования атрибутов и [[RegExp]].
 +  * [[http://jquery.page2page.ru/index.php5/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B|Селекторы jQuery]]
  
 +
 +Селекторы [[CSS]], [[jQuery]]. **Селекторами** называют специальным образом записанные выражения, позволяющие применить правила форматирования некоторой группе элементов web-страницы: 
 +<file css>
 +селектор {
 +   свойство: значение;
 + }
 +</file>
 +Правила форматирования в фигурных скобках записываются с использованием того же синтаксиса, что и при использовании атрибута style. Огромным преимуществом такого подхода по сравнению с внедренными стилями является возможность форматирования сразу группы элементов, имена и атрибуты которых удовлетворяют заданным условиям.
 +<note important>Чувствительность к регистру имён элементов в селекторах зависит от языка документа. Например, в HTML имена элементов нечувствительны к регистру, а в XML - чувствительны к регистру.</note>
 +
 +===== Универсальный селектор =====
 +Для обозначения универсального селектора применяется символ звездочки (*), который означает, что данное правило будет применяться вообще к любому Html тегу в коде. В общем случае синтаксис следующий
 +<file css>
 +* { Описание правил стиля }
 +</file>
 +  * **Пример**. Выбор цвета, шрифта и размера текста для всех элементов документа. Аналогичный результат можно получить, если в данном примере поменять селектор * на body.
 +<file css>
 +<html>
 + <head>
 +  <title>Универсальный селектор</title>
 +  <style type="text/css">
 +   * {
 +    color:black; / *Цвет текста по умолчанию */
 +    font-family: Aral, Verdana, sans-serif; /* Рубленый шрифт для текста */
 +    font-size: 96%; /* Размер текста */
 +   }
 +   </style>
 +</head>
 + <body>
 +</file>
 +  * Многие разработчики используют его для того, чтобы сбросить у всех элементов значения margin и padding
 +<file css>
 +* { margin: 0; padding: 0; }
 +</file>
 +  * Также * можно использовать для выделения дочерних элементов. Например выделить все дочерние элементы #main.
 +<file css>
 +#main * { border: 2px solid black; }
 +</file>
 +===== Селектор элемента =====
 +Одним из наиболее распространенных селекторов является селектор элемента или тип элемента: 
 +
 +<file css>
 +h1 {
 +    font-size: 14pt;
 +    color: #660000;
 +}    
 +p {
 +    text-align: justify;
 +}
 +</file>
 +В данном примере используется стиль для заголовков 1го уровня и абзацев документа. Как можно видеть в коде примера, абзацы не содержат выравнивания, однако их содержимое выравнивается по ширине, как то задает стиль для селектора p. 
 +===== Селектор class =====
 +
 +Классы применяются, когда необходимо задать разные стили для одного тега или просто определить стиль для элемента веб-страницы. При использовании совместно с тегами синтаксис для классов будет следующий:
 +<file css>
 +Элемент.КЛАСС { Правила стиля ... }
 +</file> 
 +Используется класс стиля путем указания атрибута  class с заданным значением у элементов заданного типа. К примеру, если класс и именем "с1" создан для абзаца (элемент "p"), то его нельзя использовать для форматирования, к примеру, заголовков. 
 +
 +Листинг: Использование классов стиля  
 +<file css>
 +p { /* стиль обычного абзаца */
 +    text-align: justify;
 +}  
 +p.cite { /* создание класса альтернативного стиля абзаца */
 +    text-align: justify;
 +    font-style: italic;
 +    font-sise: 8pt;
 +    color: #999999;
 +}    
 +
 +...
 +<!-- использование класса -->
 +<p class="cite">Селекторами называют ... </p>
 +</file>
 +Существует так же возможность создать класс стиля не привязанный к конкретному типу элемента. При создании такого стиля просто не указывайте тип элемента, к которому его можно применить: 
 +<file css>
 +.КЛАСС { Правила стиля ... }
 +</file> 
 +Таким образом, класс получится универсальным и может быть применен с одинаковым успехом как для абзацев, так и для заголовков и для остальных текстовых элементов страницы. 
 +<note>Что бы присвоить блоку несколько классов напишите их через пробел, например: <file html>
 +<div class="a b c">
 +Блок с 3-я классами</div></file></note>
 +===== Селектор ID =====
 +Атрибут ID задает уникальное имя элемента, которое используется для изменения его стиля. Для назначения стиля элементу с заданным ID используется следующий синтаксис: 
 +<file css>
 +#идентификатор { правила форматирования }
 +</file> 
 +После этого любой элемент, имеющий заданный ID примет указанные свойства форматирования. Ограничение состоит в том, что в любом XHTML документе не должны повторятся значения атрибутов ID его элементов, то есть, должна соблюдаться уникальность идентификатора.
 +
 +Пример. Применение селектора ID  
 +<file css>
 +/* селектор в CSS */
 +#copyright {
 +    txt-align: center;
 +    font-size: 10pt;
 +    font-weight: bold;
 +    color: #996633;
 +    border-top: 1px dashed black;
 +}          
 +                          
 +<!-- Применение на странице -->
 +
 +<p id="copyright">
 +    &copy; 2012.
 +</p>
 +</file>
 +===== Селекторы атрибутов и их значений =====
 +  * Синтаксис:<file css>
 +[атрибут] { Описание правил стиля }
 +Селектор[атрибут] { Описание правил стиля }
 +</file>Стиль применяется к тем тегам, внутри которых добавлен указанный атрибут. Пробел между именем селектора и квадратными скобками не допускается.
 +  * Также же можно привязаться к значению атрибута и использовать "="  "~=".<file css>
 +a[rel~="copyright"] { ... }
 +a[href="http://www.w3.org/"] { ... }
 +</file>
 +  * Найти символы, которые могут стоять в любом месте значения этого атрибута (например, атрибуа title)<file css>
 +[title*="Вася"]{font-size:3em;color: red;}
 +</file>
 +  * На странице собраны ссылки на файлы. Нужно выбрать только файлы с расширением pdf:<file css>
 +[href$="pdf"]{
 + padding:0 5px 0 20px;
 + background:url(icon.png) no-repeat -32px 0;
 +}
 +</file>
 +  * [[https://developer.mozilla.org/ru/docs/Web/CSS/Attribute_selectors|Mozilla Селекторы атрибутов]]
 +===== Группирование селекторов =====
 +
 +Для оптимизации стилевых таблиц и сокращения набираемого кода часто можно использовать группирование селекторов, требующих применения одного и того же набора правил форматирования. Примером таких элементов могут служить элементы <b> и <strong> - оба они размечают текст полужирным шрифтом. 
 +
 +Допустим, вы желаете, чтобы текст, отмеченный одним (любым) из этих элементов был полужирным, темно-красным и имел подчеркивание. В этом случае вам придется воспользоваться следующим набором правил: 
 +<file css>
 +b {
 +    color: #660000;
 +    text-decoration: underline;
 +}
 +strong {
 +    color: #660000;
 +    text-decoration: underline;
 +}
 +</file>
 +
 +Или воспользоваться группированием и записать предыдущие стили в более компактной форме:
 +<file css>
 +b, strong {
 +    color: #660000;
 +    text-decoration: underline;
 +}
 +</file>
 +Оба варианта одинаково функционируют и не содержат ошибок. Однако второй вариант предпочтительнее к использованию, так как является более лаконичным и легче модифицируется при необходимости. 
 +
 +Группирование селекторов можно применить и в таком контексте: допустим, необходимо задать заголовкам всех уровней одинаковые свойства font-family, text-align и color и сделать их отличающимися только размерами текста: 
 +<file css>
 +/* Общие свойства */
 +h1, h2, h3, h4, h5, h6 {
 +    font-family: Tahoma;
 +    text-align: Center;
 +    color: navy;
 +}              
 +
 +/* Индивидуальные свойства */
 +h1 { font-size: 18pt; }
 +h2 { font-size: 16pt; }
 +h3 { font-size: 14pt; }
 +
 +</file>
 +
 +===== Селекторы по иерархии =====
 +
 +Селекторы по иерархии, или контекстные селекторы, позволяют задавать правила оформления элементов, с учетом их места в общей иерархии элементов страницы, то есть - с учетом контекста. Так, например, можно по разному представлять обыкновенные абзацы и абзацы, вложенные в ячейки таблицы, простые гиперссылки и гиперссылки основного меню страницы и т.д. 
 +
 +При этом, не играет никакой роли, является ли элемент прямым потомком родителя или же нет. При создани контекстных селекторов, родительские селекторы перечисляются, разделяясь пробелом, от родителей к потомкам. 
 +
 +  * Пример оформления абзаца, вложенного в ячейку таблицы:<file css>
 +td p {
 +    color: #660000;
 +}
 +</file>Наиболее наглядным примером применения контекстных селекторов является создание правил автоматической нумерации многоуровневых упорядоченных списков. 
 +
 +  * **Соседние селекторы**<file css>
 +b + i { color:red }
 +</file>
 +  * **Дочерние селекторы**<file css>
 +div > p { color:red }
 +</file>
 +  * **Селектор атрибута**<file css>
 +p[align] { color:red }
 +p[align="right"] { color:green }
 +p[align~="right"] { color:green }
 +div[lang|="en"] { color:red }
 +</file>
 +
 +===== Псевдоклассы =====
 +Псевдоклассы используются в CSS чтобы применять к элементам разные процедуры форматирования. Синтаксис использования псевдоклассов следующий: 
 +<file css>
 +селектор:псевдокласс { property: value; }
 +</file>
 +Существуют следующие псевдоклассы: 
 +
 +  - active - Активная ссылка. Цвет ссылки меняется при нажатии на ней кнопки мыши.
 +  - link - Непосещенная ссылка.
 +  - hover - Ссылка при наведенном курсоре мыши.
 +  - focus
 +  - visited - Посещенная ссылка.
 +  - first-letter - Определяет стиль для первого символа текстового блока.
 +  - first-line - Устанавливает стиль для первой строки текстового блока.
 +  - after
 +  - before
 +
 +Первые 4 псевдокласса применяются исключительно к гиперссылкам и задают формат гиперссылки в зависимости от ее состояния. Последующие 2 - к любому текстовому блоку. 
 +
 +Использование псевдоклассов для гиперссылок позволяет добиться довольно интересных эффектов. Таких, например, как создание ролловеров. Для этого можно задействовать стиль для класса элемента <a> и его псевдокласса hover: 
 +
 +Листинг: Псевдоклассы гиперссылок  
 +<file css>
 +/* Стилевые правила */
 +a.rollover {
 +    color: #660000;
 +    text-decoration: none;
 +}                         
 +a.rollover:hover {
 +    color: #FF0000;
 +    text-decoration: underline;
 +}                           
 +                                                                        
 +<!-- Применение в HTML -->
 +
 +<a class="rollover" href="#">Ссылка-ролловер</a><br />
 +<a href="#">Обычная гиперссылка</a> <br />
 +</file>
 +Листинг: Unicode символы как иконки
 +<file html>
 +        <style>
 +            .icon-test:before { content: "♒ "; }
 +            .icon-test:after { content: " \2652"; }
 +        </style>
 +    </head>
 +    <body>
 +        <span class="icon-test">Aquarius</span><button>&#x2652; &#9810;</button>
 +</file>
 +===== Селекторы псевдоэлементов =====
 +<file css>
 +p:first-letter{
 + font-size:5em;
 + color:#d30;
 +}
 +p:first-line{
 + font-size:2em;
 + color:#69c;
 +}
 +
 +p:before{
 + content:"Начало параграфа ";
 + font-size:3em;
 + color:#f30;
 +}
 +p:after{
 + content:" Окончание параграфа";
 + font-size:3em;
 + color:#69c;
 +}
 +a:after{
 + content:" [" attr(href) "]";
 +}
 +</file>
 +====== Пример. Селекторы jQuery ======
 +Селекторы служат для отбора элементов DOM. jQuery полностью совместима со спецификацией [[CSS]]3. jQuery не зависит от реализации CSS в браузере, если в нем нет корректной реализации селекторов CSS jQuery все равно будет отбирать элементы в соответствии с правилами W3C.
 +
 +jQuery позволяет объединять несколько селекторов в одно выражение. 
 +
 +  * **Получение элемента с id="id_wh_raw"** <file javascript>
 +$('#id_wh_raw')
 +</file>
 +
 +  * **Выбрать содержимое всех div c одинаковым классом** print_tbl, например <div class="print_tbl">. Создать новый документ с возможностью вывода на печать. Метод .html() позволяет получить содержимое только первого элемента из всех выбранных. Для получения содержимого всех выбранных элементов - используем конструкцию .each(). <file javascript>
 +<script type="text/javascript"> 
 +    function print_table() {
 +        var elhtml = '';  // переменная, которая будет хранить содержимое всех выбранных элеметов
 + 
 +        $(".print_tbl").each(function(indx, element){
 +    
 +            elhtml+=$(element).html();
 +        });
 +
 +        newWin=window.open('','printWindow','Toolbar=0,Location=0,Directories=0,
 +        Status=0,Menubar=0,Scrollbars=0,Resizable=0'); 
 +        newWin.document.open();
 +        pr1 = '<a href="javascript: window.print();">Печатать</a>'+elhtml;
 +        newWin.document.write(pr1); 
 +        newWin.document.close();
 +        return false;
 +    }
 +</script>
 +</file>
 +====== Пример. Селекторы и тег table ======
 +Селекторы и тег [[html5#teg_table_sozdanie_tablic|table]].
 +  * **Выбрать элементы по текстовому содержимому**. В таблице выбрать все строки, если хотя бы одна ячейка этой строки содержит [b]<file>
 +$("tr:contains('[b]')").css('font-weight','bold');
 +</file>
 +  * **При нажатии на ячейку таблицы вывести содержимое четвертого столбца выбранной строки:**<file>
 +<script type="text/javascript">
 +    $(function() {
 +        $('table tr').click(function() {
 +            alert($('td:nth-child(4)', this).html());
 +        });
 +</script>        
 +</file>

📌 Удобный подбор VPS по параметрам доступен на DIEGfinder.com - официальном инструменте проекта DIEG. Это часть единой экосистемы, созданной для того, чтобы помочь быстро найти подходящий VPS/VDS сервер для любых задач хостинга.

📌 Для тестирования скриптов, установщиков VPN и Python-ботов рекомендуем использовать надежные VPS на короткий срок. Подробнее о быстрой аренде VPS для экспериментов - читайте здесь.

💥 Подпишись в Телеграм 💥 и задай вопрос по сайтам и хостингам бесплатно!

7 Самых Популярных Статей

  1. Как запустить скрипты и веб-приложения на Python
  2. Что такое страны TIER 1,2,3
  3. 7 способов сравнения файлов по содержимому в Windows или Linux
  4. Установка и тестирование веб-панели HestiaCP
  5. Nginx простые примеры конфигурации
  6. top, htop, atop определение загрузки ОС (Load average, LA)
  7. Использование rsync в примерах

7 Самых Популярных Обзоров

  1. Хостинг для Python-скриптов и приложений
  2. ТОП 4 лучших антидетект браузеров (Бесплатные & Платные)
  3. Подборка купонов (промокоды) на хостинг, антидетект браузеры
  4. Обзор THE.Hosting (PQ Hosting): надежный хостинг с профессиональной поддержкой
  5. Хостинг в России
  6. Хостинг в Европе
  7. Обзор браузера Dolphin {anty} для мультиаккаунтинга