Предлоги until и before
Содержание:
- Что такое псевдоэлемент?
- CSS псевдоэлемент before
- Property Values
- Примеры использования псевдоэлементов after и before
- .before( content [, content ] )Возвращает: jQuery
- CSS Справочники
- CSS Свойства
- CSS Свойства
- CSS Reference
- CSS Properties
- Предложения
- Какие браузеры поддерживают :before и :after?
- CSS Reference
- CSS Properties
- Пример использования
Что такое псевдоэлемент?
Псевдоэлемент — это некий контент, которым можно управлять с помощью CSS. Причем управление касается либо какой-то части элемента (первой буквы или строки), выделения текста или несуществующего в html-разметке контента.
Добавлять псевдоэлементы нужно к существующим элементам, в основном к селекторам тегов, классов или id. Поэтому в коде css-файла псевдоэлементы записываются сразу после основного селектора с одним или двумя двоеточиями перед своим названием:
Запись псевдоэлемента
selector::pseudo-element {
свойство: значение;
}
|
1 2 3 |
selector::pseudo-element{ свойствозначение; } |
Например:
Запись псевдоэлементов в css
*::selection{
color:#ff0;
background: #000:
}
h2::before {
content: «News: «;
}
.readmore:after {
content: » >»;
}
blockquote:first-letter{
color: red;
font-size: 2em;
font-weight: bold;
}
p:first-line {
color: #0a4;
font-family: Cambria, serif;
font-size: 1.2em;
}
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
*::selection{ color#ff0; background#000: } h2::before{ content»News: «; } .readmoreafter{ content» >»; } blockquotefirst-letter{ colorred; font-size2em; font-weightbold; } pfirst-line{ color#0a4; font-familyCambria,serif; font-size1.2em; } |
Обратите внимание, что в некоторых случаях перед наименованием псевдоэлемента стоит одно двоеточие, а в других — 2 двоеточия. И тот, и другой вариант вполне допустимы, т.к
синтаксис CSS2 позволяет писать их с одним двоеточием, а синтаксис CSS3 — с двумя. Второе двоеточие в CSS3 было введено для того, чтобы отличать псевдоклассы (:hover, :active, :focus и т.д.) от псевдоэлементов
Поскольку браузеры понимают оба синтаксиса, неважно, в сущности, одно или два двоеточия вы поставите перед псевдоэлементами. Главное, чтобы вы не делали пробел ни ДО, ни После двоеточия(-ий), т.к
это приведет к ошибке. Исключение составляет псевдоэлемент , который всегда указывается с двумя двоеточиями.
CSS псевдоэлемент before
предназначен для создания псевдоэлемента внутри элемента перед его контентом. По умолчанию данный псевдоэлемент имеет . Если псевдоэлементу before нужно установить другое отображение, то его нужно указать явно (например: ).
Содержимое данного псевдоэлемента задаётся с помощью CSS свойства . При этом если псевдоэлемент будет без содержимого, то данное свойство всё равно необходимо указывать и использовать в качестве его значения пустую строку . Без указания псевдоэлемент отображаться не будет.
Псевдоэлемент не наследует стили. Поэтому если необходимо чтобы у него были стили как у родительского элемента, то ему необходимо их явно прописывать.
Property Values
| Value | Description |
|---|---|
| auto | Default. Automatic page/column/region break before the element |
| all | Always insert a page-break right before the principal box |
| always | Always insert a page-break before the element |
| avoid | Avoid a page/column/region break before the element |
| avoid-column | Avoid a column-break before the element |
| avoid-page | Avoid a page-break before the element |
| avoid-region | Avoid a region-break before the element |
| column | Always insert a column-break before the element |
| left | Insert one or two page-breaks before the element so that the next page is formatted as a left page |
| page | Always insert a page-break before the element |
| recto | Insert one or two page-breaks before the principal box so that the next page is formatted as a recto page |
| region | Always insert a region-break before the element |
| right | Insert one or two page-breaks before the element so that the next page is formatted as a right page |
| verso | Insert one or two page-breaks before the principal box so that the next page is formatted as a verso page |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Примеры использования псевдоэлементов after и before
1. Применение CSS псевдоэлементов и для оформления цитаты.
HTML разметка цитаты:
<div class="blockquote">Текст цитаты...</div>
CSS код для оформления цитаты:
.blockquote {
margin: 0 auto;
max-width: 400px;
position: relative;
padding: 5px 32px;
background-color: #e0f2f1;
color: #004d40;
border-radius: 4px;
}
.blockquote::before {
content: '\201e';
position: absolute;
top: -16px;
left: 6px;
font-family: Georgia, serif;
font-size: 40px;
line-height: 1;
font-weight: bold;
}
.blockquote::after {
content: '\201c';
position: absolute;
right: 6px;
font-family: Georgia, serif;
font-size: 40px;
line-height: 1;
font-weight: bold;
}
2. Пример использования псевдоэлемента для разделения элементов в хлебных крошках.
HTML структура хлебных крошек:
<ol class="breadcrumb"> <li class="breadcrumb__item"><a href="#">Home</a></li> <li class="breadcrumb__item"><a href="#">Blog</a></li> <li class="breadcrumb__item breadcrumb__item_active" aria-current="page">Single post</li> </ol>
CSS код хлебных крошек:
.breadcrumb {
display: flex;
flex-wrap: wrap;
padding: .75rem 1rem;
margin-bottom: 1rem;
list-style: none;
color: #b39ddb;
background-color: #ede7f6;
border-radius: .25rem;
}
.breadcrumb__item>a {
text-decoration: none;
color: #673ab7;
}
.breadcrumb__item>a:hover {
text-decoration: none;
color: #311b92;
}
.breadcrumb__item+.breadcrumb__item {
padding-left: 8px;
}
/* добавление разделителя между элементами хлебных крошек с помощью псевдоэлемента before */
.breadcrumb__item+.breadcrumb__item::before {
display: inline-block;
padding-right: 8px;
color: #673ab7;
content: "•";
}
Изображние хлебных крошек:
3. Пример добавления hover эффекта к ссылке, оформленной с помощью background картинки, с использованием псевдоэлементов after и before.
Псевдоэлемент используется для затемнения изображения, а — для отображения картинки «Запустить».
HTML код ссылки:
<a href="#" class="image__over"></a>
CSS код с использованием after и before:
.image__over {
position: relative;
display: block;
overflow: hidden;
padding-top: 56.25%;
background: url(buterfly.jpg) no-repeat;
background-size: cover;
border-radius: 4px;
}
.image__over:hover::before,
.image__over:focus::before {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(48, 53, 71, .4);
cursor: pointer;
}
.image__over:hover::after,
.image__over:focus::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
height: 64px;
width: 72px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16' width='14' height='16'%3E%3Cpath d='M13.262 6.708l-11-6.503C1.37-.323 0 .19 0 1.495v13.003c0 1.172 1.272 1.878 2.262 1.291l11-6.5c.981-.578.984-2.003 0-2.58z' fill='%23ffffff'/%3E%3C/svg%3E");
background-size: 72px 64px;
background-repeat: no-repeat;
background-position: center center;
margin-left: -32px;
margin-top: -36px;
cursor: pointer;
}
4. Пример, аналогичный предыдущему, за исключением того что изображение будем задавать с помощью элемента .
HTML разметка этого примера:
<a href="#" class="image__over"> <img src="buterfly.jpg" alt=""> </a>
CSS код:
.image__over {
display: inline-block;
font-size: 0;
position: relative;
overflow: hidden;
border-radius: 4px;
}
.image__over>img {
max-width: 400px;
}
.image__over:hover::before,
.image__over:focus::before {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(48, 53, 71, .4);
cursor: pointer;
}
.image__over:hover::after,
.image__over:focus::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
height: 64px;
width: 72px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16' width='14' height='16'%3E%3Cpath d='M13.262 6.708l-11-6.503C1.37-.323 0 .19 0 1.495v13.003c0 1.172 1.272 1.878 2.262 1.291l11-6.5c.981-.578.984-2.003 0-2.58z' fill='%23ffffff'/%3E%3C/svg%3E");
background-size: 72px 64px;
background-repeat: no-repeat;
background-position: center center;
margin-left: -32px;
margin-top: -36px;
cursor: pointer;
}
.before( content [, content ] )Возвращает: jQuery
Описание: Функция помещает заданное содержимое перед определенными элементами страницы.
-
-
content
Тип: or or or orHTML string, DOM element, text node, array of elements and text nodes, or jQuery object to insert before each element in the set of matched elements.
-
content
Тип: or or or orOne or more additional DOM elements, text nodes, arrays of elements and text nodes, HTML strings, or jQuery objects to insert before each element in the set of matched elements.
-
-
A function that returns an HTML string, DOM element(s), text node(s), or jQuery object to insert before each element in the set of matched elements. Receives the index position of the element in the set as an argument. Within the function, this refers to the current element in the set.
-
A function that returns an HTML string, DOM element(s), text node(s), or jQuery object to insert before each element in the set of matched elements. Receives the index position of the element in the set and the old HTML value of the element as arguments. Within the function, this refers to the current element in the set.
The and methods perform the same task. The major difference is in the syntax—specifically, in the placement of the content and target. With , the content to be inserted comes from the method’s argument: . With , on the other hand, the content precedes the method and is inserted before the target, which in turn is passed as the method’s argument: .
Consider the following HTML:
|
1 2 3 4 5 |
You can create content and insert it before several elements at once:
|
1 |
Each inner element gets this new content:
|
1 2 3 4 5 6 7 |
You can also select an element on the page and insert it before another:
|
1 |
If an element selected this way is inserted into a single location elsewhere in the DOM, it will be moved before the target (not cloned):
|
1 2 3 4 5 |
Important: If there is more than one target element, however, cloned copies of the inserted element will be created for each target except for the last one.
Additional Arguments
Similar to other content-adding methods such as and , also supports passing in multiple arguments as input. Supported input includes DOM elements, jQuery objects, HTML strings, and arrays of DOM elements.
For example, the following will insert two new s and an existing before the first paragraph:
|
1 2 3 4 5 |
Since can accept any number of additional arguments, the same result can be achieved by passing in the three s as three separate arguments, like so: . The type and number of arguments will largely depend on how you collect the elements in your code.
Дополнительные замечания:
- Prior to jQuery 1.9, would attempt to add or change nodes in the current jQuery set if the first node in the set was not connected to a document, and in those cases return a new jQuery set rather than the original set. The method might or might not have returned a new result depending on the number or connectedness of its arguments! As of jQuery 1.9, , , and always return the original unmodified set. Attempting to use these methods on a node without a parent has no effect—that is, neither the set nor the nodes it contains are changed.
- By design, any jQuery constructor or method that accepts an HTML string — jQuery(), .append(), .after(), etc. — can potentially execute code. This can occur by injection of script tags or use of HTML attributes that execute code (for example, ). Do not use these methods to insert strings obtained from untrusted sources such as URL query parameters, cookies, or form inputs. Doing so can introduce cross-site-scripting (XSS) vulnerabilities. Remove or escape any user input before adding content to the document.
CSS Справочники
CSS СправочникCSS ПоддержкаCSS СелекторыCSS ФункцииCSS ЗвукCSS Веб шрифтыCSS АнимацииCSS ДлиныCSS Конвертер px-emCSS Названия цветаCSS Значения цветаCSS по умолчаниюCSS Символы
CSS Свойства
align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
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
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
caption-side
caret-color
@charset
clear
clip
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows
hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
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
@media
min-height
min-width
mix-blend-mode
object-fit
object-position
opacity
order
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
perspective
perspective-origin
pointer-events
position
quotes
resize
right
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top
transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
unicode-bidi
user-select
vertical-align
visibility
white-space
width
word-break
word-spacing
word-wrap
writing-mode
z-index
CSS Свойства
align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingcaption-sidecaret-color@charsetclearclipcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerighttab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index
CSS Reference
CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Font FallbacksCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities
CSS Properties
align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
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
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside
caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows
hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
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
@media
min-height
min-width
mix-blend-mode
object-fit
object-position
opacity
order
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
perspective
perspective-origin
pointer-events
position
quotes
resize
right
scroll-behavior
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top
transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
unicode-bidi
user-select
vertical-align
visibility
white-space
width
word-break
word-spacing
word-wrap
writing-mode
z-index
Предложения
There were three people waiting before me.Передо мной было трое ожидающих.
He reads before bedtime.Он читает перед сном.
Living organisms had existed on earth, without ever knowing why, for over three thousand million years before the truth finally dawned on one of them.Живые организмы существовали на земле, без всякого знания почему, более чем три миллиона лет перед тем как один из них наконец осознал правду.
I want a hot shower before I go back to work.Я хочу горячий душ, прежде чем вернуться к работе.
Tom doesn’t always go to bed before midnight.Том не всегда ложится спать до полуночи.
She left for America the day before yesterday.Она уехала в Америку позавчера.
The matter is coming up before the board of executives tomorrow.Дело завтра будет обсуждаться на заседании совета директоров.
Let me add a few words before you seal the letter.Дайте мне добавить несколько слов, прежде чем запечатаете письмо.
Please put out your cigarettes before entering the museum.Пожалуйста, погасите ваши сигареты перед тем, как входить в музей.
Tom wanted to take a nap before dinner.Том хотел вздремнуть перед обедом.
We cannot finish it before Saturday even if everything goes well.Нам не закончить этого до воскресенья, даже если всё пойдет хорошо.
Shake the medicine bottle before use.Перед употреблением флакон с лекарством необходимо встряхнуть.
Tom went for three weeks without shaving before his wife complained.Том не брился три недели, пока этому не воспротивилась его жена.
Do your homework before you watch TV.Сделай свою домашнюю работу, прежде чем смотреть телевизор.
A man was seen acting suspiciously shortly before the explosion.Незадолго до взрыва был замечен мужчина, ведущий себя подозрительно.
When the little girl was eight years old the mother fell ill, and before many days it was plain to be seen that she must die.Когда девочке было восемь лет от роду, её мать заболела, и всего через несколько дней стало ясно, что ей суждено умереть.
Don’t cast pearls before swine.Не мечите бисера перед свиньями.
There were honest people long before there were Christians and there are, God be praised, still honest people where there are no Christians.Честные люди были задолго до христиан, и они, хвала Господу, все ещё есть там, где последних нет.
Before I met you, I never felt this way.До встречи с тобой я никогда такого не испытывал.
And I was fourteen years old before I touched a piano for the first time.И мне было четырнадцать лет, когда я впервые дотронулся до пианино.
I make it a rule to read before going to bed.Я взял за правило читать перед сном.
See to it that all the doors are locked before you go out.Убедитесь, что Вы заперли все двери, прежде чем выйти из дома.
We hoped to have done with the work before the holidays.Мы надеялись, что закончим работу до праздников.
Such a judge should retire from his job before retirement age.Такому судье следует уйти на пенсию до наступления пенсионного возраста.
We’ll be back before dark.Мы вернёмся до наступления темноты.
All their great-grandparents were dead before Tom and Mary were born.Все их прабабушки и прадедушки умерли до рождения Тома и Мэри.
You should write it down before you forget it.Тебе следовало бы записать это, пока ты не забыла.
We have to tell Tom before he hears it from someone else.Мы должны рассказать Тому, прежде чем он услышит это от кого-то другого.
Suddenly a bear appeared before us.Вдруг перед нами появился медведь.
Какие браузеры поддерживают :before и :after?
Особенно в последнее время важна кроссбраузерность в дизайне. Поэтому, перед использованием
какого-то метода, необходимо проверять его в разных версиях браузеров. Ниже
предоставлен список браузеров, которые поддерживают псевдоэлементы :before и
:after.
Chrome 2+,
Firefox
3.5+ (3.0 имеет частичную поддержку),
Safari
1.3+,
Opera 9.2+,
IE8+ (С
небольшими багами),
А также много других мобильных браузеров.
Существует только одна проблема (надеюсь это не новость для
вас) IE6 и IE7, которые не поддерживают
псевдоэлементы. Если ваша аудитория пользователей использует такие браузеры,
придется помучится или просто предложить им обновить браузер.
Как
видите использование псевдоэлементов before и after не так
критично, как многие возомнили. На этом все, желаю творческих успехов!
Дальше: Примеры htaccess: 8 изумительных примеров .htaccess файлов
CSS Reference
CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Font FallbacksCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities
CSS Properties
align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
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
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside
caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows
hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
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
@media
min-height
min-width
mix-blend-mode
object-fit
object-position
opacity
order
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
perspective
perspective-origin
pointer-events
position
quotes
resize
right
scroll-behavior
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top
transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
unicode-bidi
user-select
vertical-align
visibility
white-space
width
word-break
word-spacing
word-wrap
writing-mode
z-index
Пример использования
Изменение цвета маркера через использование CSS свойства content и псевдоэлемента :before:
<!DOCTYPE html>
<html>
<head>
<title> Пример CSS свойства content.</title>
<style>
ul {
list-style : none; /* убираем маркеры у маркированного списка */
}
li:before {/* Псевдоэлемент :before добавляет содержимое, указанное в свойстве content перед каждым элементом <li> */
content : "•"; /* вставляем содержимое, которое выглядит как маркер */
padding-right : 10px; /* устанавливаем правый внутренний отступ элемента. */
color : red; /* устанавливаем цвет шрифта */
}
</style>
</head>
<body>
<ul>
<li>Элемент списка</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
</ul>
</body>
</html>
Изменение цвета маркера через использование CSS свойства content.
Пример использования счетчиков в CSS через использование CSS свойств content, counter-reset, counter-increment и псевдоэлемента :before:.
<!DOCTYPE html>
<html>
<head>
<title>Пример использования счетчиков в CSS.</title>
<style>
body {
counter-reset : schetchik1; /* инициализируем счетчик №1 */
line-height : .3em; /* устанавливаем междустрочный интервал для всего документа */
}
h2 {
counter-reset : schetchik2; /* инициализируем счетчик №2 */
}
h2:before { /* Псевдоэлемент :before добавляет содержимое, указанное в свойстве content перед каждым элементом <h2> */
counter-increment : schetchik1; /* определяем инкремент для глав с шагом 1 (значение по умолчанию) */
content : "Глава № " counter(schetchik1) ". "; /* указываем, содержимое, которое будет добавлено перед каждым элементом <h2>. Значение counter определяет счетчик */
}
h3 {
margin-left : 20px; /* устанавливаем величину отступа от левого края элемента */
}
h3:before {/* Псевдоэлемент :before добавляет содержимое, указанное в свойстве content перед каждым элементом <h3> */
counter-increment : schetchik2; /* определяем инкремент для статей с шагом 1 (значение по умолчанию) */
content : counter(schetchik1) "." counter(schetchik2) " "; /* указываем, содержимое, которое будет добавлено перед каждым элементом <h3>. Значение counter определяет счетчик */
}
</style>
</head>
<body>
<h2>Название главы</h2>
<h3>Статья</h3>
<h3>Статья</h3>
<h3>Статья</h3>
<h2>Название главы</h2>
<h3>Статья</h3>
<h3>Статья</h3>
<h3>Статья</h3>
<h2>Название главы</h2>
<h3>Статья</h3>
<h3>Статья</h3>
<h3>Статья</h3>
</body>
</html>
Пример использования счетчиков в CSS (свойства counter-reset и counter-increment).
Выведем содержание, как значение атрибута элемента, использую псевдоэлемент :after и свойство content:
<!DOCTYPE html>
<html>
<head>
<title>Пример использования счетчиков в CSS.</title>
<style>
a:after {/* Псевдоэлемент :after добавляет содержимое, указанное в свойстве content после каждого элемента <а> */
content : ""attr(title)""; /* между всеми тегами <a></a> автоматически будет проставляться значение атрибута title */
}
</style>
</head>
<body>
<a href = "http://basicweb.ru" title = "Basicweb.ru"></a>
</body>
</html>
Пример добавления и изменения кавычек в тексте, используя CSS свойства content, quotes, а также псевдоэлементов :before и :after:
<!DOCTYPE html>
<html>
<head>
<title>Пример добавления кавычек к тексту в CSS</title>
<style>
* {
quotes : "«" "»" "‹" "›"; /* используя универсальный селектор устанавливаем тип кавычек для первого и второго уровня вложенности (для всех элементов) */
}
p:before {content : open-quote;} /* используя псевдоэлемент :before добавляем перед элементом <p> открывающиеся кавычки */
p:after {content : close-quote;} /* используя псевдоэлемент :after добавляем после элемента <p> закрывающиеся кавычки */
</style>
</head>
<body>
<q>Обычная цитата<q>
<q>Это <q>ЦИТАТА</q> внутри цитаты</q>
<p>Параграф, к которому, используя псевдоклассы добавлены кавычки.</p>
</body>
</html>
Пример добавления и изменения кавычек в тексте.CSS свойства
