Skip to main content

Пишем сайт. Селекторы в CSS

3 votes

Очень давно,я писал про Css но осветил лишь небольшую часть,сейчас же хочется дополнить моменты, которые существенно облегчат собственно создание сайта)На самом деле я буду выдавать информацию небольшими постами(я знаю как неохота читать длинные посты)),просто буду стараться делать очень маленькие перерывы между постами. Прежде всего начну с такой вещи, как селекторы. Существует 4 типа селекторов: Селекторы тегов, селекторы идентификаторов, селекторы классов и селекторы атрибутов. А теперь отдельно о каждом)
Селекторы тегов
В этом случае свойства,описываемые селекторами тегов будут применены ко всем указанным тегам, например:
h1{
background:red;
}
<h1>Все заголовки первого уровня будут красными</h1>
Селекторы идентификаторов
каждому тегу можно присвоить уникальный id, а затем посредством селектора менять только этот тег. Выглядит это так:
#red{
background:red;
}
<p id="red">
текст абзаца будет красным
</p>
обратите внимание,что id не может начинаться с цифр и содержать только цифры,а так идентификаторы можно придумывать абсолютно любые
Селекторы классов
По сути то же что и идентификатор, но используется атрибут class,а не id. Так же class может быть применен к нескольким тегам одновременно и тогда изменения будут действовать на все теги,у которых этот class. Например:
.red{
background:green;
}
&lt;p class="green"&gt;
текст абзаца будет зеленым
&lt;/p&gt;
<h1>текст заголовков будет зеленый</h1>
Селекторы атрибутов
Как нетрудно догадаться эти селекторы содержат название атрибука,который будет изменен:
img[title]
{
width=:300px;
}
<img src="pic.jpg" title="picture"/>
теперь у всех картинок с атрибутом title ширина будет 300 пикселей
собственно на сегодня это все,в ближайщее время я расскажу о вложенности.

Аватар пользователя linkins_

Ммм, спасибо, об этом я ничего не знала. Очень сокращает код, удобно : )


Кто что думает об этом?))