Бұл мысалда әр элемент үшін 1 пиксель қалындығы болатын қара тұтас шекара қосылады.

· Атрибут селекторлары – атрибут негізіндегі элементтерді таңдауға мүмкіндік береді.

Мысал: img[alt] { border: 1px solid #000000;}Бұл мысалда alt атрибуты болатын әр img элементі таңдалады.

(Обратите внимание на квадратные скобки.

Используя приведенный выше селектор, можно было бы, возможно, создать черную границу вокруг любого изображения, которое имеет атрибут alt, и оформить другие изображения ярко-красной границей — что было бы полезно при тестировании доступности.)

Келесі ереже src атрибуты болатын элементтеріне alert.gif мағынасын береді:img[src="alert.gif"] { border: 1px solid #000000;}Бірлескен бірдеңгейдегі селекторлар – бірінен соң бірі қолданатын селекторлар керек болса, онда осы селекторларды қолданамыз. Мысалы, h2 элементінен тұратын p элементі керек болса, онда келесі ережені қолданамыз: h2 + p { ...}

· Псевдо-класстар: элемент күйін белдіретін селекторлар (мысалы, гиперсілтеме күйі).

Келесі тізімде гиперсілтеме күйін білдіретін псевдо-класстар ұсынылып тұр.

:link – алдын ала келісілген сілтеменің күйі.

:visited – осы уақытта қолданатын браузердегі пайдаланылған сілтемелердің күйі.

:focus – осы уақытта пернетақтаның курсорымен белгіленген сілтеме немесе кей бір форма.

:hover – осы уақытта тышқанның нұсқасы тұратын сілтеме.

:active – осы уақытта сілтемеде болатын әрекет.

Келесі CSS ережелері гиперсілтеменің күйін анықтайды.

(Следующие правила CSS делают так, что по умолчанию ссылки будут синими (в большинстве браузеров все равно используется по умолчанию). Когда курсор мыши оказывается над ссылкой, используемое по умолчанию подчеркивание ссылки исчезает. Мы хотим получить такой же эффект, когда ссылка попадает в фокус клавиатуры, поэтому дублируем правило :hover c использованием :focus. Когда ссылка будет посещена, она станет серой. Наконец, когда ссылка активна, она становится жирной, как дополнительный признак, что что-то сейчас произойдет.)

a:link{ color: blue;}a:visited{ color: gray;}a:hover{ text-decoration: none;}a:active{ font-weight: bold;}

Ескерту: Бұл ережелерді ұсынылған ретімен жазу қажет. Себебі, соңындағы қойылған ережелерді алдынғы ережелерді қайта анықтап алады.

· Псевдо-элементтер: элементтін кей бір бөлігін дайындайтын арнайы селекторлар. Псевдо-элементтерде екі мағына болады. Мысалы, Буквицаныжасау үшін келесі ережені пайдаланамыз.

p:first-letter { font-weight: bold; font-size: 300% background-color: red;}

(Первая буква каждого параграфа будет теперь жирной и на 300% больше остального параграфа, и будет иметь красный фон.)

Мысалы,әр параграфтың бірінші жолын ерекше дайындауға болады. p:first-line { font-weight: bold;}CSS кестелердегі қысқаша жазбасы

Мысалы, border: 2px solid black; бұл төменде жазылған ережелердің қысқаша жазбасы: