Различия

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

--- selektory [2018/02/21 15:59]
+++ selektory [2020/06/13 13:47] (текущий)
@@ Строка 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>

АйТи бубен

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

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

Различия

Инструменты страницы