{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Селекторы — это часть правила CSS, которые позволяют определить к какому элементу веб страницы следует применять правила. Они могут быть: простыми, сложными, составными (список селекторов).","type":"unstyled","key":"92dna"},{"data":{"image":{"id":"628c97e4f25d1c3b4e5ef897"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"16cup"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"К простым селекторам относятся:","type":"unstyled","key":"d2g8p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"классы;","type":"unordered-list-item","key":"cru6b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"селектор тега;","type":"unordered-list-item","key":"4h2t2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"идентификаторы;","type":"unordered-list-item","key":"1p80l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"универсальный селектор.","type":"unordered-list-item","key":"98jlt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Простые селекторы","type":"header-three","key":"4eget"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Классы задаются элементам с помощью атрибута class=»имя_класса».","type":"unstyled","key":"4rl21"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":9,"style":"BOLD"},{"length":7,"offset":56,"style":"BOLD"}],"text":"Например:

Блок с основным контентом

","type":"blockquote","key":"6nlam"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Главная и отличительная особенность классов в том, что один класс может быть присвоен нескольким тегам одновременно. Соответственно правила CSS будут применяться ко все элементам содержащим атрибут class с соответствующим значением.","type":"unstyled","key":"5cnqg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":69,"style":"BOLD"},{"length":21,"offset":223,"style":"BOLD"},{"length":6,"offset":276,"style":"BOLD"}],"text":"Описание классов CSS:Все классы на CSS записываются в следующем виде:.content {width: 50%;color: green;}Теперь после того как мы присвоим элементу класс со значением контент, он будет иметь ширину 50% и цвет текста зеленый.

Ширина 50% и цвет текста зеленый

","type":"blockquote","key":"805ul"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как мы и говорили ранее классы можно назначать многим элементам веб-страницы. То есть, если у вас на одной странице будет несколько элементов с одним классом, то ошибкой это не будет.","type":"unstyled","key":"fd03a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Селекторы тегов правила написанные для селектора тега будут применяться ко всем одинаковым тегам на веб странице. В качестве самого селектора выступают названия тегов.","type":"unstyled","key":"cc0uj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":9,"style":"BOLD"}],"text":"Например:p {color: green;}В данном случае ко всем тегам

будет применен стиль написанный выше. При таком написание правил не нужно добавлять дополнительные атрибуты. Правила применяются ко всем тегам имеющим заданное название.","type":"blockquote","key":"4k66s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Следует учитывать факт применения ко всем тегам правил. В основном данные селекторы используются для того чтобы задать всем тегам одни и те же правила. В основном это правила определяющие написание текста (шрифт, размер, цвет и тп.).","type":"unstyled","key":"aan8q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Идентификаторы в отличии от классов могут применяться только к одному объекту веб страницы. Присутствие на странице двух объектов с одним идентификатором не допустимо. Это вызовет ошибку компиляции кода. Присваивается идентификатор тегу с помощью атрибута id.","type":"unstyled","key":"69sdn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":25,"style":"BOLD"},{"length":4,"offset":90,"style":"BOLD"}],"text":"Вид идентификатора в HTML

Второго такого идентификатора быть не должно

","type":"blockquote","key":"d6cuc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В коде CSS идентификаторы описываются следующим образом:","type":"unstyled","key":"3qqt7"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":13,"offset":0}],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"}],"text":"#content_plus {color: red;}","type":"blockquote","key":"du05a"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":10,"offset":165}],"inlineStyleRanges":[],"text":"Идентификаторы используются довольно редко для описания стилей. В основном атрибут id для тега предназначен для работы со скриптами. Особенно активно используется в JavaScript.","type":"unstyled","key":"pa45"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Составные селекторы","type":"header-three","key":"52lo3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"К составным селекторам относятся простые селекторы, перечисленные через запятую. Применяются когда к нескольким объектам с различными классами необходимо применить один стиль оформления. Конечно можно изменить написание каждого правила, но это займет время и увеличит размер CSS. Следовательно увеличится время загрузки страницы.","type":"unstyled","key":"6j9bo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":28,"style":"BOLD"},{"length":24,"offset":69,"style":"BOLD"},{"length":5,"offset":111,"style":"BOLD"},{"length":73,"offset":151,"style":"BOLD"}],"text":"Пример составного селектора:

блок контента сайта

блок подвала сайта

Код CSS выглядит следующим образом:.content {color: red;}.foot {color: green;}.content, .foot {width: 100%;}","type":"blockquote","key":"602cu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В данном случае у нас есть два разных элемента с разными классами. Каждый класс содержит определенный стиль оформления. Это цвет текста в основном блоке цвет красный, в подвале зеленый. появилась необходимость сделать эти элементы шириной 100%. Можно дописать еще по строчке к каждому классу, но как уже сказали, это увеличит объем работы и вес файла CSS. В нашем случае код очень маленький поэтому эта разница не особо заметна. Но представьте что у вас есть 1000 элементов, сотни классов и идентификаторов, 2000 строк кода. И вам потребовалось некоторые элементы изменить, например убрать или добавить отступ. Таких элементов может быть 20, 30 и больше. И тогда вам придется добавить не 2 строки а 20 или 30 строк. Кроме этого вам нужно найти все места где описаны нужные селекторы а это занимает время. В этом случае составные селекторы очень облегчают задачу верстальщику и сокращают время загрузки страницы.","type":"unstyled","key":"fqmbt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Есть и еще вид составных селекторов. Например, необходимо добавить стиль оформления для определенных тегов содержащих определенный класс. Как говорили ранее, классы могут примененеы ко многим элементам веб страницы.","type":"unstyled","key":"6ek4n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":0,"style":"BOLD"},{"length":23,"offset":100,"style":"BOLD"},{"length":29,"offset":143,"style":"BOLD"},{"length":4,"offset":195,"style":"BOLD"}],"text":"div.content {margin-top: 5 px;}Данный стиль оформления будет применен к тегам div с классом content.

стиль будет применен

Стиль применен не будет

","type":"blockquote","key":"9kg8g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сложные селекторы","type":"header-three","key":"94q40"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В основном это несколько селекторов которые разделены комбинаторами. Комбинаторов может быть несколько: вложенности, дочерние, последовательные.","type":"unstyled","key":"9ftrp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":9,"style":"BOLD"},{"length":9,"offset":113,"style":"BOLD"},{"length":20,"offset":144,"style":"BOLD"},{"length":12,"offset":187,"style":"BOLD"}],"text":"Например:div p {color: green;}Данный код CSS будет применен ко всем тегам

которые находятся внутри тега

Стиль будет применен

Стиль применен не будет

","type":"blockquote","key":"49ntj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это селектор вложенности. Вложенность может быть применена не только к селекторам тегов. Так же она работает и с классами, идентификаторами и тп.","type":"unstyled","key":"2rop9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":14,"style":"BOLD"},{"length":38,"offset":207,"style":"BOLD"},{"length":45,"offset":265,"style":"BOLD"},{"length":10,"offset":333,"style":"BOLD"}],"text":"Другой пример:div.content p.blok {width: 30 px;}В данном примере стиль будет применен для тега

которому присвоен класс blok, который в свою очередь находится в теге

которому присвоен класс content.

Стиль будет применен

Стиль не будет применен

","type":"blockquote","key":"6vnmi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Далее идет селектор на дочерние элементы. Данный селектор применяет стиль оформления строго к дочерним элементам. Очень похоже на вложенность только с одним отличием. Селектор вложенности применяет стиль ко всем вложенным элементам а этот строго к дочерним, исключая другие.","type":"unstyled","key":"ategb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":9,"style":"BOLD"},{"length":9,"offset":112,"style":"BOLD"},{"length":27,"offset":143,"style":"BOLD"},{"length":18,"offset":237,"style":"BOLD"}],"text":"Например:div>p {color: yellow;}Данный стиль будет применяться к тегам

которые находятся только в теге

Стиль будет применент

Стиль не будет применен так как p — это дочерний элемент тега span

","type":"blockquote","key":"ekqo6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И последние сложные селекторы это последовательные. Они применяют стили к элементам стоящим после каких либо других.","type":"unstyled","key":"7ec0m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":9,"style":"BOLD"},{"length":6,"offset":85,"style":"BOLD"},{"length":10,"offset":99,"style":"BOLD"},{"length":10,"offset":129,"style":"BOLD"},{"length":12,"offset":147,"style":"BOLD"},{"length":11,"offset":169,"style":"BOLD"},{"length":4,"offset":203,"style":"BOLD"}],"text":"Например:div+p {width: 30px;}Стиль будет применен к тегу

идущему после тега

контент

Стиль будет применен

контент

Информация

Стиль не будет применен

","type":"blockquote","key":"dpjdq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это вся информация необходимая для начала изучения CSS. Стили могут применяться в различных вариантах. Количество настроек стилей очень разнообразно. Большинство описанных приемов и способов написания селекторов служит для облегчения работы верстальщику и оптимизации кода CSS. Оптимизированный код CSS очень сильно влияет на работу сайта. Стили CSS загружаются полность вместе с сайтом. Это означает что при большом весе и размере CSS файла загрузка всего сайта будет увеличена. Если сайт долго загружается это негативно сказывается на всем. На поведении пользователей, позиции в поиске и тп.","type":"unstyled","key":"eqsao"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"F3DVJM5TYcsjiZDHW4EN"}],"entityMap":{"0":{"data":{},"mutability":"MUTABLE","type":"HASHTAG"},"1":{"data":{"url":"https://web-legko.ru/javascript/"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}