background
background-attachment
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
-----------------
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-left
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-shadow
box-sizing
caption-side
clear
clip
color
column-gap
column-rule
column-width
content
counter-increment
cursor
direction
display
empty-cells
height
quotes
float
font
font-family
font-size
font-stretch
font-style
font-variant
font-weight
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
min-height
min-width
opacity
orphans
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
position
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-overflow
text-transform
top
transform
transform-origin
transition
transition-delay
transition-duration
transition-property
transition-timing-function
resize
right
unicode-bidi
vertical-align
visibility
z-index
Interner Explorer
-ms-radial-gradient
background-position-x
background-position-y
---------------
filter
hasLayout
scrollbar-3dlight-color
scrollbar-arrow-color
scrollbar-base-color
scrollbar-darkshadow-color
scrollbar-face-color
scrollbar-highlight-color
scrollbar-shadow-color
scrollbar-track-color
zoom
---------------
Firefox
-moz-border-bottom-colors
-moz-border-left-colors
-moz-border-right-colors
-moz-border-top-colors
-moz-linear-gradient
-moz-orient
-moz-radial-gradient
-moz-user-select
:-moz-placeholder
::-moz-selection
image-rendering
---------------
Opera
-o-object-fit
-o-radial-gradient
---------------
Safari и Chrome
-webkit-linear-gradient
-webkit-radial-gradient
-webkit-user-select
---------------
@-правила
@charset
@font-face
@import
@media
@page
---------------
Селекторы и их комбинации
A
#id
.class
.class1.class2
*
A B
A > B
A + B
A ~ B
[attr]
[attr='value']
[attr^='value']
[attr$='value']
[attr*='value']
[attr~='value']
[attr|='value']
---------------
Псевдоклассы
:active
:checked
:default
:disabled
:empty
:enabled
:first-child
:first-letter
:first-line
:first-of-type
:focus
:hover
:indeterminate
:invalid
:lang
:last-child
:last-of-type
:link
:not
:nth-child
:nth-last-child
:nth-last-of-type
:nth-of-type
:only-child
:only-of-type
:optional
:read-only
:read-write
:required
:root
:target
:valid
:visited
---------------
Псевдоэлементы
::after (:after)
::before (:before)
::first-letter
::first-line
::selection
---------------
Функции
attr()
calc()
---------------
Значения свойств
Строки
Числа
Проценты
Размер
Адрес
Цвет
Угол
Медиа-запросы
inherit
initial
Помогли мы вам |
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
7.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Версии CSS
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
---|---|---|---|
Описание
Возможны варианты, когда стиль следует применить к тегу с определённым атрибутом, когда частью его значения является некоторый текст. При этом точно не известно, в каком месте значения включен данный текст — в начале, середине или конце. В подобном случае следует использовать конструкцию *=. Она определяет, что значение атрибута содержит указанный текст.
Синтаксис
[атрибут*="значение"] { Описание правил стиля }
E[атрибут*="значение"] { Описание правил стиля }
Пример
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Селекторы атрибутов</title>
<style>
[href*="hs-design"] {
background: yellow; /* Желтый цвет фона */
}
</style>
</head>
<body>
<p><a href="https://hs-design.ru/html/">Теги HTML</a> |
<a href="http://stepbystep.hs-design.ru">Шаг за шагом</a> |
<a href="http://webthumb.ru">Графика для Веб</a></p>
</body>
</html>
Результат данного примера показан на рис. 1. В примере показано изменение стиля ссылок, в атрибуте href которых встречается слово «htmlbook».
Рис. 1. Изменение стиля для ссылок, в адресе которых встречается «htmlbook»
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
- © text-overflow
- © text-indent
- © text-decoration-line
- © text-decoration
- © max-width
- © list-style-position
- © content
- © border-spacing
- © Селекторы атрибутов - «CSS»
- © Как добавить картинку на веб-страницу? - «Изображения»
|
|
- Новости мира Интернет
- Афоризмы
- Видео уроки
- Справочник CSS
Процессор с ароматом жареной курочки: Intel якобы готовит чип Core i9-9900KFC - «Новости сети»
Проект устранения цифрового неравенства в РФ активно развивается - «Новости сети»
Гравитационная обсерватория LIGO получит апгрейд - «Новости сети»
Xiaomi соберёт деньги на производство спортивных смарт-часов с помощью краудфандинга - «Новости сети»
Раскрыты характеристики мощной тройной камеры Xiaomi Mi 9 - «Новости сети»
Wacom начала выпуск тонкого цифрового пера Pro Pen slim - «Новости сети»
Гид по выбору подарка к 23 февраля с партнёрами 3DNews - «Новости сети»
Складной iPhone показался в новом патенте Apple - «Новости сети»
Попытки установить связь с обсерваторией «Спектр-Р» продлятся ещё три месяца - «Новости сети»
Пользуясь проблемами Huawei, Samsung делает ставку на сетевое оборудование - «Новости сети»
Российские космонавты в мае выйдут в открытый космос - «Новости сети»
Место посадки зонда «Чанъэ-4» официально стало второй в истории лунной базой - «Новости сети»

Как Заработать 1000 Рублей за Сутки В Новом Проекте "24HOURS". Новинка / ЗАРАБОТОК В ИНТЕРНЕТЕ - «Видео уроки - CSS»

ЗАРАБОТОК В 24HOURS +10% КАЖДЫЙ ДЕНЬ. ВЫВОДИМ ПЕРВЫЕ ДЕНЬГИ / ЗАРАБОТОК В ИНТЕРНЕТЕ - «Видео уроки - CSS»

САЙТ ДЛЯ ЗАРАБОТКА БЕЗ ВЛОЖЕНИЙ 1000 РУБЛЕЙ / ЗАРАБОТОК В ИНТЕРНЕТЕ - «Видео уроки - CSS»

Новинки React 16.8 — Суровый веб #194 - «Видео уроки - CSS»

Основы After Effects — #7 Parenting и Expressions - «Видео уроки - CSS»

Microsoft против Int. Explorer, Нейросеть от Skychain, Беспилотный трамвай - «Видео уроки - CSS»

ЗАРАБОТОК В ИНТЕРНЕТЕ В ИГРЕ СТРАЖИ ГАЛАКТИКИ. ВЫВОД ДЕНЕГ / ЗАРАБОТОК В ИНТЕРНЕТЕ - «Видео уроки - CSS»

Веб-приложение на asp.net mvc core — #7 Business Layer: создание уровня бизнес-логики - «Видео уроки - CSS»

Frontend-разработчик. 15 необходимых навыков - «Видео уроки - CSS»

Инстаграм здорового человека. Часть 1 - «Видео уроки - CSS»

Основы After Effects — #6 Применение эффектов - «Видео уроки - CSS»

ОТЛИЧНАЯ ИГРА С ВЫВОДОМ ДЕНЕГ. СТРАЖИ ГАЛАКТИКИ - САЙТ ДЛЯ ЗАРАБОТКА / ЗАРАБОТОК В ИНТЕРНЕТЕ - «Видео уроки - CSS»
! | |||
B | border-left-color | border-top | |
C | column-count | columns
|
counter-reset
|
D | E
|
H
|
Q
|
F
|
L
|
M
|
O |
P
|
W
|
T
|
text-shadow |
R | U
|
V | Z
|
Firefox | Opera | Safari и Chrome | |
-moz-border-bottom-colors
|
-moz-orient
|
-o-linear-gradient
|
-webkit-linear-gradient
|
@-правила | |||
@font-face | @media |
Селекторы и их комбинации | |||
A
|
A B
|
[attr]
|
[attr~='value']
|
Псевдоклассы | |||
:active
|
:enabled
|
:hover | :not
|
:only-child
|
:read-only | :target
|
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.