<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

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

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

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

Подписавшись по 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, то работают все селекторы и параметров тоже. Подскажите, пожалуйста, в чём может быть причина.

Ответить

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