НОУ ИНТУИТ | Введение в jQuery. Лекция 1: О HTML, CSS и JavaScript

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Регистрация Вход

Твой путь к знаниям!

Опубликован: 28.02.2016 | Уровень: для всех | Доступ: платный

|

Вам нравится? Нравится 47 студентам

| Поделиться |

Поддержать программу

CSS-правила и селекторы

Теперь приступим к CSS, и начнём, пожалуй, с расшифровки аббревиатуры CSS это Cascading Style Sheets, дословно "каскадная таблица стилей", но:

— Почему же она называется каскадной? — этот вопрос я часто задаю на собеседованиях претендентам. Ответом же будет аналогия, ибо она незыблема как перпендикулярная лягушка: представьте себе каскад водопада, вот вы стоите на одной из ступенек каскада с чернильницей в руках, и выливаете ее содержимое в воду — вся вода ниже по каскаду будет окрашиваться в цвет чернил. Применив эту аналогию на HTML — создавая правило для элемента, вы автоматически применяете его на все дочерние элементы (конечно, не все правила так работают, но о них позже) — это наследование стилей. Теперь, если таких умников с чернильницей больше чем один, и цвета разные, то в результате получим смешение цветов, но это в жизни, а в CSS работают правила приоритетов, если кратко:

самый низкий приоритет имеют стили браузера по умолчанию — в разных браузерах они могут отличаться, поэтому придумали CSS Reset (гуглится и юзается), и все будут на равных
чуть важнее — стили заданные пользователем в недрах настроек браузера, встречается редко
самые важные — стили автора странички, но и там всё идёт по порядку
самый низкий приоритет у тех, что лежат во внешнем подключённом файле
затем те, что встроили внутрь HTML с помощью тега <style>
потом те, что захардкодили плохие люди (не вы, вы так делать не будете) в атрибуте "style"
самый высокий приоритет у правил с меткой "!important"
при равенстве приоритетов, тапки у того, кто объявлен последним

Если голова ещё не бо-бо, то я также упомяну, что при расчёте, чьи же правила главней, ещё анализируется специфичность селекторов, и тут считается следующим образом:

за каждый идентификатор получаем [1:0:0] (#id)

за каждый класс, либо псевдо класс — [0:1:0] (.my :pseudo)

за каждый тег — [0:0:1] (div a)

При этом [1:0:0] > [0:x:y] > [0:0:x].

Пример селекторов, выстроенных по приоритету (первые важнее):

#my p#id — [2:0:1] 
#my #id — [2:0:0] 
#my p — [1:0:1] 
#id — [1:0:0]
.wrapper .content p — [0:2:1]
.content div p — [0:1:2]
.content p — [0:1:1] 
p — [0:0:1]

Пример HTML-кода:

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Приоритет CSS селекторов</title>
    <link rel="profile" href="http://gmpg.org/xfn/11"/>
    <link rel="shortcut icon" href="http://anton.shevchuk.name/favicon.ico"/>
    <link rel="stylesheet" href="css/styles.css"/>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/code.js"></script>
    <script>
        function appendStyle(rule) {
            $('head').append('<style>'+rule+'</style>');
        }
    </script>
</head>
<body>
<div class="wrapper">
    <menu>
        <a href="css.float.html" title="go prev" class="button alignleft" rel="prev">← Prev </a>
        <a href="index.html" title="back to Index" class="button alignleft" rel="index">Index §</a>
        <a href="css.selectors.html" title="go next" class="button alignright" rel="next">Next →</a>
        <hr/>
		<h3>Шпаргалка</h3>
<pre><code><em>// weight</em>
#id    = [1,0,0]
.class = [0,1,0]
tag    = [0,0,1]
<em>// compare</em>
[1,0,0] > [0,1,0] > [0,0,1]
[1,0,0] > [0,100,100]
[0,1,0] > [0,0,100]
</code></pre>
        <hr/>
        <pre><code contenteditable="true">appendStyle(<span>'p { color:orange }'</span>)</code></pre>
        <button type="button" class="code">Run Code</button>
        <pre><code>appendStyle(<span>'.content p { color:green }'</span>)</code></pre>
        <button type="button" class="code">Run Code</button>
        <pre><code>appendStyle(<span>'article.content p { color:blue }'</span>)</code></pre>
        <button type="button" class="code">Run Code</button>
        <pre><code>appendStyle(<span>'.wrapper .content p { color:red }'</span>)</code></pre>
        <button type="button" class="code">Run Code</button>
        <pre><code>appendStyle(<span>'#id { color:darkblue }'</span>)</code></pre>
        <button type="button" class="code">Run Code</button>
        <pre><code>appendStyle(<span>'#my p { color:darkcyan }'</span>)</code></pre>
        <button type="button" class="code">Run Code</button>
        <pre><code>appendStyle(<span>'#my #id { color:darkgreen }'</span>)</code></pre>
        <button type="button" class="code">Run Code</button>
        <pre><code>appendStyle(<span>'#my p#id { color:black }'</span>)</code></pre>
        <button type="button" class="code">Run Code</button>
    </menu>
    <header>
        <h1>Приоритет CSS селекторов</h1>
        <h2>Сохраните страницу и попробуйте изменить CSS стили</h2>
    </header>
    <article id="my" class="content">
        <h2>Article Title</h2>
        <p id="id">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum,
        lectus eu varius consectetur, libero velit hendrerit augue, ut posuere enim neque
        in libero. Donec eget sagittis nibh. Suspendisse sed tincidunt urna. Cras quis
        euismod neque. Maecenas auctor ultricies posuere. Pellentesque luctus pulvinar dui
        eget semper. Donec sodales odio eu sapien varius luctus. Donec dictum feugiat diam
        at malesuada. Sed nec massa in augue condimentum faucibus quis ut diam. Quisque
        nisl sem, semper nec vulputate vel, mattis sit amet justo. Aliquam purus felis,
        tempor at scelerisque quis, tincidunt in neque. Etiam ut risus diam. Pellentesque
        fermentum risus id elit feugiat cursus. Ut fringilla dictum diam, sed iaculis
        lorem pulvinar ut. Cras vel elit id velit commodo viverra sit amet vel orci.</p>
    </article>
    <footer>
        ©copyright 2014 Anton Shevchuk — <a href="http://anton.shevchuk.name/jquery-book/">jQuery Book</a>
    </footer>
    <script type="text/javascript">
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-1669896-2']);
        _gaq.push(['_trackPageview']);
        (function() {
         var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
         ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
         var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();
    </script>
</div>
</body>
</html>

<div class="wrapper">
<div id="my" class="content"> 
<p id="id">
Lorem ipsum dolor sit amet, consectetuer...
</p>
</div>
</div>

При равенстве счета — последний главный.

Говорят, что правило с 255 классами будет выше по приоритету, нежели правило с одним "id", но я надеюсь, такого кода в реальности не существует

Вот такое краткое вступительное слово, но пора вернуться к jQuery. Так вот, работая с jQuery, вы должны "на отлично" читать правила CSS, а также уметь составлять CSS-селекторы для поиска необходимых элементов на странице. Но давайте обо всем по порядку, возьмём следующий простенький пример вполне семантического HTML:

<!DOCTYPE html>
<html dir="ltr" lang="en-US"> 
<head>
<meta charset="UTF-8"/> 
<title>Page Title</title>
<link rel="profile" href="http://gmpg.org/xfn/11"/> 
<style type="text/css">
body {
font: 62.5%/1.6 Verdana, Tahoma, sans-serif; color: #333333;
}
h1, h2 {
color: #ff6600;
}
header, main, footer { margin: 30px auto; width: 600px;
}
#content { padding: 8px;
}
.box {
border:1px solid #ccc; border-radius:4px; box-shadow:0 0 2px #ccc;
}
</style>
</head>
<body>
<header>
<h1>Page Title</h1> 
<p>Page Description</p>
</header>
<main id="content" class="wrapper box"> <article>
<h2>Article Title</h2> <p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc urna metus, ultricies eu, congue vel, laoreet...
</p>
</article>
<article>
<h2>Article Title</h2> <p>
Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros...
</p>
</article>
</main>
<footer>©copyright 2014</footer> 
</body>
</html>

Это пример простого и правильного HTML5 с небольшим добавлением CSS3. Давайте разберём селекторы в приведённом CSS-коде (я предумышленно не выносил CSS в отдельный файл, ибо так наглядней):

body – данные правила будут применены к тегу <body> и всем его потомкам

h1,h2 – мы выбираем теги <h1> и <h2>, и устанавливаем цвет шрифта #content – выбираем элемент с "id="content"" и применяем правила

.box – выбираем элементы с "class="box""

Теперь подробнее и с усложнёнными примерами:

h1	ищем элементы по имени тега
#container	ищем элемент по идентификатору "id=container" (идентификатор уникален, значит, на странице он должен быть только один)
div#container	ищем <div> c идентификатором container, но предыдущий селектор работает быстрее, но этот важнее
.news	выбираем элементы по имени класса "class="news""
div.news	все элементы <div> c классом news (так работает быстрее в IE8, т.к. в нём не реализован метод "getElementsByClassName()")
#wrap .post	ищем все элементы с классом post внутри элемента с "id = wrap"
.cls1.cls2	выбираем элементы с двумя классами "class="cls1 cls2""
h1,h2,.posts	перечисление селекторов, выберем всё перечисленное
.post > h2	выбираем элементы <h2>, которые являются непосредственными потомками элемента с классом "post"
a + span	будут выбраны все элементы <span> следующие сразу за элементом <a>
a[href^=http]	будут выбраны все элементы <a> у которых атрибут "href" начинается с http(предположительно, все внешние ссылки)

Это отнюдь не весь список, описание же всех CSS3 селекторов можно найти на соответствующей страничке W3C: http://www.w3.org/TR/css3-selectors/

40% задач, которые вы будете решать с помощью jQuery, сводятся к поиску необходимого элемента на странице, так что знание CSS селекторов обязательно. Вот еще кусочек CSS для тренировки, напишите соответствующий ему HTML (это тоже вопрос с собеседования ;):

#my p.announce, .tt.pm li li a:hover+span { color: #f00; }

Пишите прям тут:

CSS. Погружение

Этот раздел будет полезен начинающим верстальщикам, и тем, кто захочет сделать чуть больше, нежели вывод окна сообщения по клику.

О форматировании

Нет, я не властен над собой, и таки приведу в качестве примера CSS форматирование, которое я использую:

/*header*/ 
header {
margin-bottom: 16px; 
font-weight: 400;
}
header h1 { 
color: #999;
}
header p {
font-size: 1.4em; 
margin-top: 0;
}
/*/header*/

Почему это хорошо:

такой CSS легко читается
есть идентификатор начала и конца блока (можно быстро найти необходимую часть даже в очень большом CSS файле используя поиск по метке "*header")
подобное форматирование явно указывает на вложенность элементов
и можно легко проследить наследование свойств

Я не настаиваю на своём варианте, но хотелось, чтобы вы приняли на вооружение один из многих стандартов форматирования, и всегда следовали ему.

Именование классов и идентификаторов

Я уже затрагивал эту тему, когда рассказывал о релевантности HTML, так вот – имена классов могут быть даже такими: "b-service-list__column b-service-list__column_right" и это будет круто, и "must be" – но лишь в рамках действительно больших проектов, и собственно чего я распинаюсь, дам ссылки – информации из них хватит еще на одну книгу ;):

Клуб "Блок, Элемент, Модификатор" [http://clubs.ya.ru/bem/]
"Что такое БЭМ" [http://bem.github.com/bem-method/pages/beginning/beginning.ru.html]

Обязательно изучите – полезно для расширения кругозора, и прокачки скилов

Дальше >>

Введение в jQuery

Введение в jQuery

О HTML, CSS и JavaScript

CSS-правила и селекторы

CSS. Погружение

О форматировании

Именование классов и идентификаторов

Вопросы и ответы

Студенты

Авторизоваться

Введение в jQuery

Введение в jQuery

О HTML, CSS и JavaScript

CSS-правила и селекторы

CSS. Погружение

О форматировании

Именование классов и идентификаторов

Вопросы и ответы

Студенты