<MyRusakov.ru />

Создание Интернет-магазина на PHP и MySQL

Создание Интернет-магазина на PHP и MySQL

Видеокурс "Создание Интернет-магазина на PHP и MySQL" - это уникальный курс по созданию Интернет-магазина с нуля. Особенностью данного курса является то, что создание идёт с самого начала, то есть от идеи. Далее создаётся дизайн всех необходимых страниц, после делается их вёрстка. Затем создаётся движок на PHP и MySQL, после делается Admin-панель и, наконец, готовый сайт размещается в Интернете.

Адрес созданного в этом курсе сайта: http://storedvd.ru

Всё создание сайта будет происходить на Ваших глазах, поэтому Вы легко сможете повторить весь процесс создания сложного функционального сайта уже при разработке своего портала.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Селекторы CSS

Селекторы CSS

В этой статье мы разберём различные виды селекторов. У каждого из них своя задача и каждый срабатывает лишь при соблюдении условий, и по этим условиям делятся на несколько видов:

1) Обычный селектор.

2) Контекстный селектор.

3) Селектор ID.

4) Селектор CLASS.

5) Селектор параметров.

Обсуждать обычный селектор мы не будем, потому что, во-первых, мы его обсуждали, а, во-вторых, это обычный HTML-тег, поэтому тут и сказать нечего.

А теперь подробно разберём контекстные селекторы, так как их используют, пожалуй, чаще всего. Они нужны для того, чтобы к элементу применялся стиль при условии, что данный элемент лежит внутри тега, который лежит внутри другого тега. Звучит запутанно, не спорю, но давайте разберёмся на примере

<div><h2>Заголовок в контейнере</h2></div>

Элемент, в данном случае - это текст "заголовок в контейнере" лежит в теге <h2>, который в свою очередь лежит в теге <div>. Этот пример поясняет то, что я написал чуть выше. А теперь вернёмся к контекстным селекторам. Синтаксис следующий:

тег1 тег2 {
  свойство1: значение1;
  свойство2: значение2;
}

И работает это так: если тег2 находится внутри тега 1, то элементы внутри тега2 примут свойства1 и свойства2 со значениями значение1 и значение2. А теперь пример CSS для примера выше.

div h2 {
  font-weight: bold;
}

Такой стиль будет применён к примеру выше и "заголовок в контейнере" станет жирным. А если будет написано просто:

<h2>Заголовок</h2>

То стиль применён к этому элементу не будет, ведь он не находится внутри тега <div>.

Вопрос: для чего же нужны контекстные селекторы? Их Вы будете вынуждены использовать многократно, ввиду того, что на Вашей странице наверняка будет множество повторяющихся тегов (<div>, <p>, <tr>, <td>, <table> и прочие), и, разумеется, Вы захотите, чтобы у них был далеко не всегда одинаковый внешний вид. И вот тут и придут на помощь контекстные селекторы.

Селекторы ID тоже очень распространены. Они позволяют задать уникальный элемент на странице, и синтаксис объявления этого селектора следующий:

имятега#имя {
  свойство1: значение1;
  свойство2: значение2;
}

Теперь если тегу "имятега" имеет атрибут "id" со значением "имя", то к элементам внутри тега "имятега" будет применён стиль.

Если "имятега" отсутствует (то есть селектор начинается с символа "#"), то тогда данный стиль может быть применён к любым тегам, у которых стоит атрибут "id" в значении "имя".

А теперь пример:

#red {
  color: red;
}

И теперь HTML-код, к которому будет применён данный стиль:

<p id = "red">Красный текст</p>

Как видите, всё очень просто, однако есть одно большое НО! Используйте ОДИН идентификатор только ОДИН РАЗ на странице! Например, вот так писать нельзя:

<p id = "red">Красный текст</p>
<p id = "red">Ещё один красный текст</p>

В таких случаях надо создавать два идентификатора вот так:

#red1, #red2 {
  color: red;
}

И HTML-код:

<p id = "red1">Красный текст</p>
<p id = "red2">Ещё один красный текст</p>

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

Теперь о селекторе CLASS. Он очень похож на селектор ID, но его "имя" может использоваться несколько раз на странице. Общий синтаксис этого селектора следующий:

имятега.имя {
  свойство1: значение1;
  свойство2: значение2;
}

Таким образом, если у тега "имятега" стоит атрибут "class" со значением "имя", то к элементам внутри будет применён данный стиль.

Аналогично, с селектором ID, если "имятега" не задано (то есть описание селектора начинается с символа "."), то данный стиль может быть присвоен любым элементам.

А теперь пример:

.red {
  color: red;
}

И HTML-код под этот стиль:

<p class = "red">Красный текст</p>
<p class = "red">Ещё один красный текст</p>

Вновь всё очень просто. Теперь встаёт вопрос: чем же тогда лучше селектор ID? А лучше он тем, что к данным элементам очень удобное обращение через, например, JavaScript. Поэтому очень удобно задать именно ID, при условии, что такой элемент всего один на странице, то есть он является уникальным.

И последний тип селекторов CSS - это селектор параметров. Не очень часто используют, но в некоторых случаях он является практически незаменимым. Я, надеюсь, что Вы заметили, что вид многих тегов зависит от их атрибутов. Ярким примеров является тег <input>, который может быть и кнопкой, и переключателем, и текстовым полем. Согласитесь, что выглядят все эти элементы совершенно по-разному, однако, отвечает за них один и тот же тег. И для того, чтобы применять стиль лишь при определённом значении какого-либо атрибута, и используют селекторы параметров. Синтаксис следующий

имятега[имяатрибута="значениеатрибута"] {
  свойство1: значение1;
  свойство2: значение2;
}

Применяется данный стиль в следующем случае: если в теге "имятега" значение "имяатрубита" равно "значениеатрибута" то будет применён стиль, в противном случае стиль не применяется.

Чтобы стало ещё понятнее, привожу пример:

input[type="submit"] {
  border: 2px double black;
}

И HTML:

<input type = "submit" value = "Кнопка с двойной чёрной рамкой">
<input type = "button" value = "Другая кнопка">

Надеюсь, что и здесь всё прозрачно. Ещё один очень важный момент, виды селекторов можно совмещать, например, данный CSS вполне нормальный и рабочий:

#header li a {
  font-size: 150%;
}

И HTML-код, который вызовет этот стиль:

<ul id = "header">
  <li>
    <a href = "http://myrusakov.ru">Текст с размером 150%</a>
  </li>
</ul>

Думаю, что и здесь вопросов не возникнет.

Напоследок хочется сказать, что селекторы - это основа CSS, которую обязан знать любой, кто создаёт сайты с нуля. А как применять эти селекторы - это уже зависит только от Ваших дизайнерских навыков.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (24):

Bizmatek Bizmatek 07.04.2011 17:07:29

Здравствуйте. прочитал статью о селекторах CSS и озадачился вопросом: может ли имя класса/ID состоять из 2х и боле слов? и если может, то можно ли брать его в какие-нибудь кавычки в случае описания стиля, содержжащего контекстные или соседние селекторы? Заранее спасибо.

Ответить

Admin Admin 07.04.2011 17:09:55

Безусловно, можно. Например такое имя MyName. Но только важно, чтобы между словами не было пробелов и чтобы в имени не было различных спецсимволов. Никаких кавычек не нужно.

Ответить

Alim_(I) Alim_(I) 01.05.2011 07:52:46

А на этом сайте точно все материалы о языках HTML, CSS, Java, PHP?

Ответить

Admin Admin 01.05.2011 12:17:45

Нет, конечно. Чтобы были все материалы по всем этим языкам, потребуется не меньше 10 лет ежедневного написания. Никто полностью эти языки не знает. Да это и не нужно. По Java здесь вообще ничего нет. Здесь только по JavaScript.

Ответить

malina95 malina95 21.07.2012 01:18:05

Извините за тупой вопрос, но как сделать отступ текста от блока? Я просто совсем эту тему забыл...

Ответить

Admin Admin 21.07.2012 12:05:12

Отступ делается с помощью padding.

Ответить

malina95 malina95 21.07.2012 17:11:25

Но у меня тогда растягивается сам блок но отступы внутри появляются...А как сделать чтобы блок не растягивался?

Ответить

Admin Admin 21.07.2012 21:46:52

Делайте тогда фиксированные размеры блока.

Ответить

malina95 malina95 21.07.2012 23:50:32

Ну у меня и так 2 сайдбара по 200 пикс. А если я делаю паддинг то у меня они один на один залазят

Ответить

Spartak_Belarus Spartak_Belarus 27.02.2013 15:28:20

Контекстный селектор Тег1 Тег2 { ... } применяет стиль к Тег2. А как применить стиль к Тег1, если в нем есть Тег2 ?

Ответить

Admin Admin 27.02.2013 16:09:11

Никак не получится. Поэтому выход только один - обратиться как-то иначе, например, поставить селектор ID или CLASS.

Ответить

samisite samisite 10.03.2013 06:50:32

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

Ответить

Bf-109g81 Bf-109g81 24.03.2013 21:40:01

Михаил, из-за чего могут не работать селекторы параметров в IE9. В Мозиле всё отлично работает.

Ответить

Admin Admin 25.03.2013 04:12:34

В IE9 всё работает, поэтому проблема конкретно с Вашим браузером, либо какие-то свойства специфичные применяете, попробуйте с тривиальным чем-нибудь, например, font-size или color.

Ответить

Bf-109g81 Bf-109g81 26.03.2013 22:32:50

Привет михаил! Получилось задействовать селекторы параметров путём прямого указания на файл стиля во вкладке:свойства обозревателя/общие/оформление. Но никак не получается автоматически выполнить эти свойства. Два дня уже бьюсь над этим :-) Может есть соображения, где этот флажок найти?

Ответить

Hekyba Hekyba 03.05.2013 19:13:15

Подскажите пожалуйста, по незнанию написала код через селекторы ID, сказали все заменить на Class. Когда меняю разваливается вся страница?Что делать ? писать весь код заново через классы?

Ответить

Admin Admin 03.05.2013 20:30:58

Внимательно надо всё исправлять, больше тут писать нечего.

Ответить

pavell pavell 29.06.2013 20:51:32

Есть отличия в кодах цветов в html и и а css у меня почему-то свет #E6E6FA в html и в css по разному выглядит. А большинство вабще не отображаются. Может там только словами задавать можно ? style="background-color:green"

Ответить

Admin Admin 30.06.2013 05:55:12

Все цвета лучше задавать через CSS, и лучше кодом, а не словами.

Ответить

Ruthenium Ruthenium 20.12.2013 23:54:14

Извините за тупой вопрос, но куда нужно поместить CSS file для его функционирования?(у меня в той же папке что и HTML file - не работает...) Помогите новичку!!! Спасите!!! P.S Автору сайта огромное СПАСИБО!!!

Ответить

alexandrdante alexandrdante 21.12.2013 00:28:52

Вам нужно поместить файл в любое место,в идеале в ту же папку,где и html документ,и потом подключить его в самом html документе

Ответить

AlexTruck AlexTruck 07.07.2014 12:29:26

Мой html <html> <head> <b>MidLate</b> <link rel="stylesheet" type="text/css" href="MidLate.css"> </head> <body> <div id="main"> <img name = "img" src="http://abali.ru/wp-content/uploads/2013/03/razbitoe_steklo.png"/> </div> </body> </html> мой css body { background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,rgba(148,179,222,1)), color-stop(27%,rgba(174,199,236,1)), color-stop(64%,rgba(204,219,242,1))); margin-left: auto; margin-right: auto; } b { background-color: #6acccc; } #main { height: 200 px; width: 300 px; } Стиль для id не срабатывает. При этом для body срабатывает. В чем может быть причина? Уже кучу инфы перерыл - такое чувство, что эта проблема только у меня

Ответить

webslesar webslesar 29.07.2014 09:16:01

Не работает селектор параметров! Вот код HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>MySite</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style2.css"> </head> <body> <form name="myform" action="#" method="post"> <div> <input type="text" name="name" /> </div> </form> </body> </html> А вот код CSS из файла style2.css: input [type="text"] { color: #f00; } больше никакого лишнего кода нигде нет и ничего не работает. Битый час смотрю уже примеры на других разных сайтах, вроде всё должно работать, а не работает. Почему?

Ответить

sprogr sprogr 21.06.2016 13:40:27

Здравствуйте, не работает только селектор параметров при запуске в браузере IE8, всё остальное работает. Если запускать из Notepad++ Запуск\ Launch IE, то работают все селекторы и параметров тоже. Подскажите, пожалуйста, в чём может быть причина.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.