Памятка записи селекторов. Красивый поиск на сайте

Скачать материалы:

Скачать 1-ый бонусный видеоурок по CSS Размер: 23.73 MB, скачали: 485 раз.
Скачать исходники к 1 бонусному видеоуроку по CSS Размер: 385.98 kB, скачали: 473 раз.
Скачать памятку записи селекторов в CSS Размер: 109.1 kB, скачали: 587 раз. 

Как запустить видеоурок:

1. Разархивировать скачанный файл.
2. Открыть папку index.
3. Запустить файл index.html в браузере.

Памятка записи селекторов

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

Итак, для чего нужна памятка записей селекторов CSS? Для того чтобы вы не забивали себе голову тем, как записывать селекторы в CSS. В этой памятке есть несколько новых примеров записи селекторов CSS, которые мы еще не проходили. Мы их не проходили потому, что они нужны достаточно редко. Если они все же вам понадобятся, то у вас будет эта памятка записи селекторов CSS. Я думаю, она вам пригодится и послужит своеобразной подушкой безопасности.

Я открою эту памятку, как изображение, на полный экран. Первая колонка памятки — запись селектора. Первые шесть пунктов относятся к элементам HTML. Оставшиеся пять — к взаимодействию элементов HTML. Давайте я научу вас пользоваться этой таблицей.

Первый пункт — селектор тега. Пример записи в CSS – записываем тег, а потом стили в фигурных скобках. Примечание к примеру: стили применяются для элементов, у которых задан тег. Пример использования в HTML: <тег>Текст</тег>.

Второй пункт таблицы — класс. Пример записи в CSS: .класс{стили}. Примечание к примеру: стили применяются для элементов, у которых задан класс. Элементы, которые мы разбираем в пунктах, я писал на русском языке по двум причинам: первая достаточно банальна — не все знают английский язык, а вторая — удобство чтения кода. То, что написано на русском, нужно заменить. Если у нас элемент «класс» во втором пункте, следовательно, только этот класс в кавычках и следует менять. Так как теги здесь не имеют большого значения, и на их месте может быть любой тег, то они написаны на английском языке, в отличие от тега в первом пункте.

Переходим к третьему пункту. Идентификатор. Обозначается в CSS с помощью символа «#». Примечание к примеру: стили применяются для элементов, у которых задан идентификатор. Пример использования в HTML – при помощи атрибута id и значения, которое является именем идентификатора.

Четвертый пункт. Селектор атрибута. С селекторами, которые связаны с атрибутами, мы еще не знакомились. Но, уверяю вас, ничего сложного здесь нет. Пример записи в CSS: атрибут в квадратных скобках, за ним следуют стили. Примечание к примеру: стили применяются к тегам, имеющим атрибут. Если мы укажем атрибут href и укажем ему стили, то ко всем тегам, имеющим атрибут href будут применены эти стили. Пример использования в HTML также показан.

Переходим к пятому пункту — атрибут со значением. Пример записи в CSS: в квадратных скобках указывается атрибут, а после «=» в кавычках указывается значение, потом идут стили, применяемые к этому селектору. Стили применяются, если атрибут содержит значение, которое мы указали в кавычках. Пример использования в HTML: <a href="знач">Текст</a>. Если мы укажем атрибут href, а значение — ссылку на мой сайт, то для всех тегов, имеющих атрибут href со значением ссылки на мой сайт, будут применены стили, которые мы укажем в фигурных скобках.

Пункт шестой — один из значений атрибута. Пример записи в CSS: в квадратных скобках указываем атрибут, затем ставим тильду, знак равенства и значение, закрываем квадратную скобку и прописываем стили, которые требуются применить к этому селектору. Примечание к  примеру: стили применяются, если атрибут имеет указанное значение. Отличие шестого пункта от пятого лишь в одном слове. В пятом пункте подразумевается то, что в атрибуте должно находиться только то значение, которое мы указали, а в шестом пункте подразумевается то, что атрибут должен иметь это значение. Значений может быть и пять, но наше значение должно быть среди них. Пример использования в HTML: тег абзаца, потом класс и указываем, например, два класса: red и знач2 — потом идет текст и закрывающийся абзац. В данном случае стили у нас будут применяться, так как среди двух значений имеется «знач2».

Переходим к седьмому пункту. С седьмого по одиннадцатый пункты идут правила, связанные с записью элементов, с их взаимодействием. Седьмой пункт — запись селекторов через запятую. В примере в CSS в качестве селектора мы взяли класс: класс1 и класс2. Указали их через запятую, а потом написали стили, которые к ним следует применить. Примечание к примеру: стили применяются для элементов, у которых задан класс1 или класс2. То есть для всех элементов, имеющих либо класс1, либо класс2 будут использоваться эти стили. Пример использования этих стилей в HTML достаточно обычен. Во время прохождения курса мы его использовали много раз.

Восьмой пункт — запись селекторов вместе: .класс1 .класс2. Потом идут стили. Примечания к примеру: стили применяются для элементов, у которых класс1 и класс2 заданы одновременно. Пример использования в HTML: <p class «класс1 класс2»>Текст</p>.

Девятый пункт — запись селекторов через пробел. Решетка, идентификатор, пробел, точка, класс. Потом идут стили в фигурных скобках. Примечание к примеру: стили применяются к элементам, имеющим класс, который располагается внутри идентификатора. Знак пробела наделяет первый элемент (до знака пробела) родительскими правами, а второй элемент — дочерними. В таком случае, если дочерний элемент располагается внутри родительского, то и применяются эти стили. Пример использования в HTML вы видите на своих экранах.

Десятый пункт — запись селекторов через «плюс». Пример записи в CSS: тег1 + тег2 {стили}. Примечание к примеру: стили применяются к тегу2, если тег1 и тег2 являются соседними. Какие теги называются соседними? Разумеется, те, между которыми нет других тегов. Вы это можете увидеть в примере использования в HTML. Сначала указывается тег1 и он же закрывается, а потом — тег2 и тоже закрывается. Эти теги называются соседними. Наконец последний, одиннадцатый, пункт — запись селекторов через знак «>». Тег1 больше тег2 {стили}. Примечания к примеру: стили применяются к тегу2, если он является прямым дочерним элементом для тега1. Что значит «прямым дочерним элементом»? Ключевое слово — «прямым». Это значит, что между тегами в их родительско-дочерней связи не должно стоять никаких других тегов. Для отца в реальной жизни прямым дочерним элементом является сын, но сын сына не является прямым дочерним элементом для отца. Иногда реальная жизнь настолько запутана, что я вам советую посмотреть на пример использования в HTML. Это даже понятнее. Тег2 находится внутри тега1, поэтому стили у нас будут применяться. Если бы между тегом1 и тегом2 был еще какой-то элемент, то стили бы не применялись. В этом, кстати, и отличие одиннадцатого пункта от девятого.

С таблицей мы разобрались. Как я уже сказал, эту памятку селекторов CSS я прикладываю к данному видеоуроку. Вы ее можете скачать и распечатать.

Создание красивой поисковой формы

Теперь давайте перейдем ко второму шагу — создание рабочей формы поиска на нашем сайте. Создадим ее в левой колонке. Что включает в себя форма поиска? Она у нас будет включать одно поле, куда пользователь будет вводить текст, который его интересует, и две кнопки: «найти» и «очистить».

Переходим в исходный код файла page.html. Ставим курсор на абзац левого меню, выделяем его и заменяем на следующий кусок кода:

 <div id="left_menu">
 <form name="search" action="" target="_blank">
 <p>
 <input type="text" maxlength="128"><br>
 <input type="submit" value="Найти"><input type="reset"
 value="Очистить">
 </p>
 </form>
 

Разберемся с ним по порядку. Тег <form> создает форму с именем «search» (поиск). Action означает «действие». Пока мы в него ничего вписывать не будем. И target = «_blank» означает то, что действия будут происходить в новом окне. Далее идет абзац. В нем находится поле input type="text". Максимальная длина ввода символов в поле — 128. потом идет перенос строки, а дальше — две кнопки: input type="submit" со значением «найти» и input type="reset" со значением «очистить». Затем форма закрывается.

Сохраняем, откроем браузер, обновим страницу. Мы видим, что у нас появилось поле и две кнопки: «найти» и «очистить». Если мы сейчас что-то введем в это поле, нажмем «очистить», то все написанное удаляется. Нажмем «найти», у нас создается новая страница. Поиск пока не работает, да и форма как-то коряво выглядит.

Давайте перейдем в код, но уже в таблицу стилей st.css. Ставим курсор на left_menu, и давайте сделаем шире левую колонку, чтобы вместить форму поиска.

 #left_menu {
 background: #CCC url('img/bg_l_menu.png') repeat;
 float: left;
 width: 160px;
 overflow: hidden;
 padding-bottom: 40px;
 }
 

Сохраняем. Посмотрим. Вместилась она не до конца, потому что мы ей не указали ширину, но две кнопки уместились на одной строке.

Переходим обратно в код. Теперь мы используем из памятки записи селекторов CSS запись селектора с атрибутом. Это пункт №5. Итак, я селектор записал:

 #left_menu input[type="text"] {
 }
 

Зададим ему ширину, высоту и рамку:

 #left_menu input[type="text"] {
 width: 106px;
 height: 17px;
 border: 2px solid #CCC;
 }
 

Сохраним. Посмотрим, что получилось. Теперь поле с поиском стало выглядеть симпатичнее.

Перейдем снова в код. Сделаем рамку с радиусом. Указываем border-radius 5 пикселей, а остальные две строчки указаны для определенных браузеров. Значения в них должно совпадать со значением border-radius.

 #left_menu input[type="text"] {
 width: 106px;
 height: 17px;
 border: 2px solid #CCC;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 }
 

Сохраняем. Смотрим, что получается в браузере. Поле поиска стало с закругленными углами.

Переходим в код и добавим фоновое изображение полю поиска. Это изображение лежит в папке img и называется find.png. Отменяем повторение изображения с помощью no repeat и указываем расположение слева и по высоте по центру.

 #left_menu input[type="text"] {
 width: 106px;
 height: 17px;
 border: 2px solid #CCC;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 background: #fff url(img/find.png) no-repeat left center
 }
 

Сохраняем. Смотрим, как оно располагается. Итак, оно расположилось в поле поиска. При вводе текста в поле текст прописывается на этом изображении.

Давайте сделаем так, чтобы текст прописывался правее этого изображения. Сделать это можно с помощью свойства padding. Сверху и снизу я решил задать отступ в два пикселя. Слева отступ в 18 пикселей, а справа — в шесть.

 #left_menu input[type="text"] {
 width: 106px;
 height: 17px;
 border: 2px solid #CCC;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 background: #fff url(img/find.png) no-repeat left center;
 padding: 2px 6px 2px 18px;
 }
 

Сохраняем. Обновляем. Теперь поле поиска стало чуть больше и текст не налезает на изображение.

Доделаем последние штрихи — добавим отступ от верхнего края, чтобы форма поиска не прилегала к шапке. Это делаем с помощью свойства margin-top со значением в пять пикселей.

 #left_menu input[type="text"] {
 width: 106px;
 height: 17px;
 border: 2px solid #CCC;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 background: #fff url(img/find.png) no-repeat left center;
 padding: 2px 6px 2px 18px;
 margin-top: 5px;
 }
 

Теперь давайте сделаем поле поиска более живым. При наведении и вставке курсора в это поле, должен меняться цвет рамки и цвет изображения. Переходим в st.css и добавляем код с псевдоэлементами hover и focus.

 #left_menu input[type="text"]:hover, #left_menu input[type="text"]:focus {
 background-image: url(img/find_focus.png);
 border-color: #6EC9CC;
 }
 

Цвет рамки у нас меняется с помощью свойства border-color, а цвет изображения — с помощью замены изображения. Картинка find_focus.png также находится в папке.

Сохраняем. Смотрим, что получилось в браузере. При наведении у нас меняется рамка и изображение. При вставке курсора оно остается. Если мы введем текст, нажмем «очистить», то курсор перестает находиться в поле поиска, поэтому рамка и изображение стали снова серого цвета.

Теперь давайте разберемся с кнопками. Переходим в документ st.css и прописываем стили для кнопок.

 #left_menu input[type="submit"], #left_menu input[type="reset"] {
 background-color: #CCC;
 padding: 3px;
 width: 65px;
 margin: 2px 0 0;
 }
 

background-color, как мы знаем, задает фоновый цвет. Внутри него отступы по три пикселя. Ширина кнопок — 65 пикселей. Верхний отступ — 2 пикселя. Хочу заметить, что мы это задаем для двух кнопок.

Сохраняем и смотрим изменения. Кнопки стали симпатичнее. Теперь давайте сделаем и кнопки более живыми. В этом нам помогут две строчки кода:

 #left_menu input[type="submit"]:hover, #left_menu input[type="reset"]:hover {
 background-color: #6EC9CC;
 }
 

Сохраняем. Ну вот, стало гораздо лучше.

Форму поиска мы создали, мы ее красиво оформили. Нам осталось сделать так, чтобы она заработала. Сделать это можно разными способами. Мы разберем три:

1. Написать код поиска самостоятельно. Для организации собственного поиска на сайте нужно быть знакомым с PHP.
2. Найти скрипт, но все равно нам понадобится иметь хотя бы малейшее представление о PHP.
3. Присоединить поиск от Google, Yandex или других поисковых систем к своему сайту. Здесь вам понадобится лишь знание об HTML. Не все поисковики предлагают присоединить свой поиск к вашему сайту, но, покопавшись с кодом, это можно сделать и самому.

Поиск от Google на Вашем сайте

Сейчас, буквально за пару минут, мы присоединим к нашему сайту поиск от Google. Когда пользователь будет вводить на нашем сайте в это поле какие-то слова, которые имеются на нашем сайте, то Google будет искать эти слова в проиндексированных им страницах. Google индексирует страницы очень быстро, поэтому я вам советую пользоваться именно его поиском.

Давайте приступим. Переходим в код на страницу page.html. В значение атрибута action мы поставим ссылку на поиск Google.

 <form name="search" action="http://google.com/search" target="_blank">
 

Далее мы вставляем скрытую строку кода — скрытое поле. Оно не будет видно пользователям. Его увидят только поисковики. Даем ему имя «q». Это обязательно. В значении value указываем «site:ссылка_на_свой_сайт». Так как наш сайт еще не размещен в интернете, то я указываю ссылку на сайт info-line.net.

 <form name="search" action="http://google.com/search" target="_blank">
 <input type="hidden" name="q" value="site:info-line.net">
 

Теперь нам нужно задать name="q" тому полю, в которое мы будем вводить поисковую фразу. Это текстовое поле.

 <form name="search" action="http://google.com/search" target="_blank">
 <input type="hidden" name="q" value="site:info-line.net">
 <p>
 <input type="text" name="q" maxlength="128"><br>
 

В принципе, все. Сохраняем и обновляем страницу. Давайте попробуем ввести что-то такое, что есть на сайте info-line.net. Я ввожу слово «видеоурок». Жму «найти». Google производит поиск на моем сайте. Он выдает все результаты, которые нашел на страницах моего сайта. Нажмем кнопку «очистить», поле очищается. Таким образом и происходит поиск на сайте.

Замечательно, что мы в одном бонусном видеоуроке рассмотрели как памятку записи селекторов CSS, так и размещение формы поиска на сайте. До встречи в следующем бонусном видеоуроке, посвященному браузеру Opera!