Инструменты пользователя

Инструменты сайта


selektory

Различия

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

Ссылка на это сравнение

selektory [2018/02/21 07:59] (текущий)
Строка 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>​
загрузка...
selektory.txt · Последние изменения: 2018/02/21 07:59 (внешнее изменение)