Как сделать обводку текста в css?

Содержание:

More Examples

Example

Set a color for the border with a HEX value:

div {border-color: #92a8d1;}

Example

Set a color for the border with an RGB value:

div {border-color: rgb(201, 76, 76);}

Example

Set a color for the border with an RGBA value:

div {border-color: rgba(201, 76, 76, 0.3);}

Example

Set a color for the border with a HSL value:

div {border-color: hsl(89, 43%, 51%);}

Example

Set a color for the border with a HSLA value:

div {border-color: hsla(89, 43%, 51%, 0.3);}

Example

Set a different border-color for each side of an element:

div.ex1 {border-color: #0000ff;}div.ex2 {border-color: #ff0000 #0000ff;}
div.ex3 {border-color: #ff0000 #00ff00 #0000ff;}div.ex4 {border-color:
#ff0000 #00ff00 #0000ff rgb(250,0,255);}

Оформление рамок HTML-элементов с помощью CSS-свойств

1. Стиль рамки border-style

По умолчанию рамки всегда отрисовываются поверх фона элемента, фон распространяется до внешнего края элемента. Стиль рамки определяет ее отображение, без этого свойства рамки не будут видны вообще. Для элемента можно задавать рамку для всех сторон одновременно с помощью свойства border-style или для каждой стороны отдельно с помощью уточняющих свойств border-top-style и т.д. Не наследуется.

border-style(border-top-style, border-right-style, border-bottom-style, border-left-style)
Значения:
none Значение по умолчанию, означает отсутствие рамки. Также убирает рамку элемента из группы элементов с установленным значением данного свойства.
hidden Эквивалентно none.
dotted
dotted
dashed
dashed
solid
solid
double
double
groove
groove
ridge
ridge
inset
inset
outset
outset
{1,4}
Одновременное перечисление четырех разных стилей для рамок элемента, только для свойства border-style:{border-style: solid dotted none dotted;}
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

2. Цвет рамки border-color

Свойство задаёт цвет рамок всех сторон одновременно. С помощью уточняющих свойств можно установить свой цвет для рамки каждой стороны элемента. Если для рамки цвет не задан, то он будет таким же, как и цвет текста элемента. Если в элементе нет текста, то цвет рамки будет таким же, как и цвет текста родительского элемента. Не наследуется.

border-color(border-top-color, border-right-color, border-bottom-color, border-left-color)
Значения:
transparent Устанавливает прозрачный цвет для рамки. При этом ширина рамки остается. Можно использовать для смены цвета рамки при наведении курсора мыши на элемент, чтобы избежать смещение элемента.
цвет Цвет рамок задается при помощи значений свойства .

{border-color: #cacd58;}
{1,4}
Одновременное перечисление четырех разных цветов для рамок элемента, только для свойства border-color:{border-color: #cacd58 #5faf8a #b9cea5 #aab238;}
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

3. Ширина рамки border-width

Ширина рамки задается с помощью единиц измерения длины или ключевых слов. Если для свойства border-style задано значение none, и для рамки элемента установлена какая-то ширина, то в данном случае ширина рамки приравнивается к нулю. Не наследуется.

border-width(border-top-width, border-right-width, border-bottom-width, border-left-width)
Значения:
thin / medium / thick Ключевые слова, устанавливают ширину рамки относительно друг друга. Первое значение уже, чем второе, второе — тоньше третьего. Значение по умолчанию — medium
width (px, em)
{border-width: 5px;}
{1,4}
Возможность одновременного задания четырех разных ширин для рамок элемента, только для свойства border-width:{border-width: 5px 10px 15px 3px;}
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

4. Задание рамки одним свойством

Свойство border позволяет объединить в себе следующие свойства: border-width, border-style, border-color, например:

При этом заданные свойства будут применяться ко всем границам элемента одновременно. Если какое-то из значений не указано, его место займет значение по умолчанию.

5. Задание рамки для одной границы элемента

В случае, когда необходимо задать разный стиль границ элемента, можно воспользоваться краткой записью для соответствующей границы.
Перечисленные ниже свойства объединяют в одно объявление следующие свойства: border-width, border-style и border-color. Перечень свойств указывается в заданном порядке, при этом одно или два значения могут быть пропущены, в этом случае их значения примут значения по умолчанию.

Стиль верхней границы задается с помощью свойства border-top, нижней — border-bottom, левой — border-left, правой — border-right.

Синтаксис

CSS-фон
CSS content

CSS border-radius — Specify Each Corner

The property can have from one
to four values. Here are the rules:

Four values — border-radius: 15px 50px 30px 5px; (first
value applies to top-left corner, second value applies to top-right corner,
third value applies to bottom-right corner, and fourth value applies to
bottom-left corner): 

Three values — border-radius: 15px 50px 30px; (first value
applies to top-left corner, second value applies to top-right and bottom-left
corners, and third value applies to bottom-right corner):

Two values — border-radius: 15px 50px; (first value applies
to top-left and bottom-right corners, and the second value applies to top-right
and bottom-left corners):

One value — border-radius: 15px; (the value applies to all
four corners, which are rounded equally:

Here is the code:

Example

#rcorners1 {  border-radius: 15px 50px 30px 5px; 
background: #73AD21;  padding: 20px;  
width: 200px;  height: 150px; }#rcorners2 {  border-radius: 15px 50px 30px;
  background: #73AD21; 
padding: 20px;   width: 200px; 
height: 150px; }#rcorners3 {  border-radius: 15px 50px;  background: #73AD21;  padding: 20px;   width: 200px;
 
height: 150px; }#rcorners4 {  border-radius: 15px;
  background: #73AD21; 
padding: 20px;   width: 200px;  height: 150px; }

You could also create elliptical corners:

Example

#rcorners1 {  border-radius: 50px / 15px; 
background: #73AD21;  padding: 20px;   width: 200px;  height: 150px; }#rcorners2 {  border-radius: 15px / 50px;  background: #73AD21;
 
padding: 20px;   width: 200px;  height: 150px; }#rcorners3 {
 
border-radius: 50%;  background: #73AD21; 
padding: 20px;   width: 200px;  height: 150px;}

CSS Rounded Corners Properties

Property Description
border-radius A shorthand property for setting all the four border-*-*-radius properties
border-top-left-radius Defines the shape of the border of the top-left corner
border-top-right-radius Defines the shape of the border of the top-right corner
border-bottom-right-radius Defines the shape of the border of the bottom-right corner
border-bottom-left-radius Defines the shape of the border of the bottom-left corner

❮ Previous
Next ❯

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !important

CSS Properties

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-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgapgridgrid-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-eventspositionquotesresizerightrow-gapscroll-behaviortab-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

Rounded Borders

To add rounded borders, add one of the w3-round-size classes:

I have normal borders.

I have small rounded borders.

I have rounded borders.

I have large rounded borders.

I have xlarge rounded borders.

I have xxlarge rounded borders.

Example

<div class=»w3-panel w3-border»>  <p>My borders are normal.</p>
</div><div class=»w3-panel w3-border w3-round-small»> 
<p>My borders are rounded (small).</p></div><div class=»w3-panel
w3-border w3-round»>  <p>My borders are rounded.</p></div><div class=»w3-panel w3-border w3-round-large»>  <p>I have
large rounded borders.</p></div><div class=»w3-panel w3-border
w3-round-xlarge»>  <p>I have xlarge rounded borders.</p></div><div class=»w3-panel w3-border w3-round-xxlarge»>  <p>I have
xxlarge rounded borders.</p></div>

Thick Borders

The w3-topbar, w3-bottombar, w3-leftbar,
and w3-rightbar classes are used to add thick borders to an element:

I have a thick left border.

I have a thick blue left border.

I have a thick blue left border and a pale-blue background color.

Example

<div class=»w3-panel w3-leftbar»>  <p>I have a thick left border.</p>
</div><div class=»w3-panel w3-leftbar w3-border-blue»>
  <p>I have a thick blue left border.</p>
</div><div class=»w3-panel w3-leftbar w3-border-blue w3-pale-blue»>
  <p>I have a thick blue left border and a pale-blue background color.</p>
</div>
<div class=»w3-panel w3-topbar w3-bottombar w3-border-red w3-pale-red»>
  <p>I have a thick red top and bottom border and a pale-red background color.</p>
</div>

Definition and Usage

The property sets the width of an element’s four borders. This property can
have from one to four values.

Examples:

  • border-width: thin medium thick 10px;

    • top border is thin
    • right border is medium
    • bottom border is thick
    • left border is 10px
  • border-width: thin medium thick;

    • top border is thin
    • right and left borders are medium
    • bottom border is thick
  • border-width: thin medium;

    • top and bottom borders are thin
    • right and left borders are medium
  • border-width: thin;

    all four borders are thin

Note: Always declare the border-style property before the
property. An element must have borders before you can set the width.

Default value: medium
Inherited: no
Animatable: yes. Read about animatable
Try it
Version: CSS1
JavaScript syntax: object.style.borderWidth=»1px 5px»
Try it

Пример кода: гибкие искусственные колонки

Другим применением описываемой техники является создание гибких колонок равной высоты без использования изображений или дополнительных связанных элементов.

Разметка HTML очень проста. Используем классы для каждого элемента   вместо селекторов CSS 2.1,  которые не поддерживаются IE6. Если нет необходимости поддерживать IE6, то можно использовать селекторы.

<div id="faux">
    <div class="main"></div>
    <div class="supp1"></div>
    <div class="supp2"></div>
</div>

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

#faux {
   position:relative;
   z-index:1;
   width:80%;
   margin:0 auto;
   overflow:hidden;
   background:#ffaf00;
}

Использование относительного позиционирования для элементов-потомков , позволяет управлять порядком колонок независимо от их следования в исходной разметке.

#faux div {
   position:relative;
   float:left;
   width:30%;
}

#faux .main {left:35%}
#faux .supp1 {left:-28.5%}
#faux .supp2 {left:8.5%}

Две другие колонки создаются с помощью псевдо-элементов с фонами. В качестве фонов можно использовать изображения, если нужно.

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !important

Property Values

Value Description Play it
none Default value. Specifies no border Play it »
hidden The same as «none», except in border conflict
resolution for table elements
Play it »
dotted Specifies a dotted border Play it »
dashed Specifies a dashed border Play it »
solid Specifies a solid border Play it »
double Specifies a double border Play it »
groove Specifies a 3D grooved border. The effect depends on the
border-color value
Play it »
ridge Specifies a 3D ridged border. The effect depends on the
border-color value
Play it »
inset Specifies a 3D inset border. The effect depends on the
border-color value
Play it »
outset Specifies a 3D outset border. The effect depends on the
border-color value
Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

Пример использования

<!DOCTYPE html>
<html>
<head>
	<title>Использование изображения в качестве границы</title>
<style> 
div {
width : 150px; /* устанавливаем ширину блока */
height : 50px; /* устанавливаем высоту блока */
padding : 50px; /* устанавливаем величину внутреннего отступа элемента */
border : 55px solid transparent; /* прозрачная сплошная граница размером 55px */
border-image : url(ramka.png) 100 round; /* указываем путь к изображению, устанавливаем смещение 100px от верхней, правой, нижней и левой кромки изображения, указываем, что изображение масштабируемо и должно повторяться, пока не заполнит зазор между двумя границами.  */
}
</style>
</head>
	<body>
		<div class = "test">Ваш текст</div>
	</body>
</html>

В этом примере мы используем изображение 800 на 687, которое мы установили в качестве изображения рамки. Кроме того, установили смещение 100px от верхней, правой, нижней и левой кромки изображения и указали, что изображение масштабируемо и должно повторяться, пока не заполнит зазор между двумя границами.

Результат нашего примера:

Пример использования изображения в качестве границы.

Рассмотрим следующий пример в котором мы установим в качестве границы-изображения линейный градиент, повторяющийся линейный градиент и радиальный градиент:

<!DOCTYPE html>
<html>
<head>
<title>Изображение-граница на CSS</title>
<style> 
div {
display : inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
width : 150px; /* устанавливаем ширину блока */
height : 70px; /* устанавливаем высоту блока */
border : 10px solid transparent; /* прозрачная сплошная граница размером 10px для все элементов <div> */
margin-right : 20px; /* устанавливаем отступ справа 20px */
}
.test {
border-image : repeating-linear-gradient( 45deg, red, red 1%, yellow 1%, red 8%) 10; /* устанавливаем повторяющийся линейный градиент, который будет использован в качестве границы-изображения */
}
.test2 {
border-image : linear-gradient(to right, pink , green) 10;; /* устанавливаем линейный градиент, который будет использован в качестве границы-изображения  */
}
.test3 {
border-image : radial-gradient(yellow 50%, green 65%, red 100%) 10; /* устанавливаем круговой градиент, который будет использован в качестве границы-изображения  */
}
.test4 {
border-image : url(img-border.png) 25 stretch; /* указываем путь к изображению, устанавливаем смещение 25px от верхней, правой, нижней и левой кромки изображения, указываем, что изображение будет растянуто на всю длину.  */
}
.test5 {
border-image : url(img-border.png) 15 round; /* указываем путь к изображению, устанавливаем смещение 15px от верхней, правой, нижней и левой кромки изображения, указываем, что изображение масштабируемо и должно повторяться, пока не заполнит зазор между двумя границами.  */
}
</style>
</head>
	<body>
		<p><b>Использование градиентов:</b></p>
		<div class = "test"></div>
		<div class = "test2"></div>
		<div class = "test3"></div>
		<p><b>Использование изображения:</b></p>
		<img src = "img-border.png" alt = "ramka">
		<div class = "test4"></div>
		<div class = "test5"></div>
	</body>
</html>

В этом примере с использованием свойства border-image мы установили различные значения для изображения, либо градиентов которые использованы вместо границы вокруг наших элементов.

Результат нашего примера:

Пример использования свойства border-image.CSS свойства

CSS Border Style

The property specifies what kind of border to display.

The following values are allowed:

  • — Defines a dotted border
  • — Defines a dashed border
  • — Defines a solid border
  • — Defines a double border
  • — Defines a 3D grooved border. The effect depends on the border-color value
  • — Defines a 3D ridged border. The effect depends on the border-color value
  • — Defines a 3D inset border. The effect depends on the border-color value
  • — Defines a 3D outset border. The effect depends on the border-color value
  • — Defines no border
  • — Defines a hidden border

The property can have from one to four values (for
the top border, right border, bottom border, and the left border).

Example

Demonstration of the different border styles:

p.dotted {border-style: dotted;}p.dashed
{border-style: dashed;}p.solid {border-style: solid;}p.double
{border-style: double;}p.groove {border-style: groove;}p.ridge
{border-style: ridge;}p.inset {border-style: inset;}p.outset
{border-style: outset;}p.none {border-style: none;}p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

Result:

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border. The effect depends on the border-color value.

A ridge border. The effect depends on the border-color value.

An inset border. The effect depends on the border-color value.

An outset border. The effect depends on the border-color value.

No border.

A hidden border.

A mixed border.

Note: None of the OTHER CSS border properties (which you will learn more about in the next chapters) will have ANY effect unless the
property is set!

❮ Previous
Next ❯

Пример кода: множественные изображения для фона

С помощью данной техники можно воспроизвести эффект параллакса с множественными изображениями для фона  (такой используется на сайте Silverback), задействовав при этом только один HTML элемент.

Элемент получает свой собственный фон и нужные отступы. Относительное позиционирование элемента действует как точка отсчета при абсолютном позиционировании псевдо-элементов. Положительное значение позволяет корректировать положение псевдо-элементов по оси z.

#silverback {
   position:relative;
   z-index:1;
   min-width:200px;
   min-height:200px;
   padding:120px 200px 50px;
   background:#d3ff99 url(vines-back.png) -10% 0 repeat-x;
}

Оба псевдо-элемента позиционируются абсолютно и размещаются по сторонам элемента. Значение равное размещает псевдо-элемент позади слоя  контента. Таким образом, псевдо-элементы располагаются поверх фона элемента и его обводки, но весь контент остается доступным для выделения и воспринимает нажатия кнопки мыши.

#silverback:before,
#silverback:after {
   position:absolute;
   z-index:-1;
   top:0;
   left:0;
   right:0;
   bottom:0;
   padding-top:100px;
}

Каждый псевдо-элемент имеет повторяющийся набор фоновых изображений. Для воспроизведения эффекта параллакса больше ничего не нужно.

Свойство позволяет добавлять изображение как генерированный контент. Имея два псевдо элемента можно добавить 2 дополнительных изображения к элементу. Они могут быть грубо позиционированы в псевдо-элементах с помощью других свойств, таких как и .

#silverback:before {
   content:url(gorilla-1.png);
   padding-left:3%;
   text-align:left;
   background:transparent url(vines-mid.png) 300% 0 repeat-x;
}

#silverback:after {
   content:url(gorilla-2.png);
   padding-right:3%;
   text-align:right;
   background:transparent url(vines-front.png) 70% 0 repeat-x;
}

Hoverable Borders

The w3-hover-border-color classes change the color of the border on mouse-over:

Border that turns red on hover.

Red border that turns green on hover.

Example

<div class=»w3-panel w3-border w3-hover-border-red»>
  <p>Border that turns red on hover</p>
</div>
<div class=»w3-panel w3-border w3-border-red w3-hover-border-green»>
  <p>Red border that turns green on hover</p>
</div>

Thick (invisible) left border that turns green on hover.

Example

<div class=»w3-panel w3-leftbar w3-border-white w3-hover-border-green»>
  <p>Thick (invisible) left border that turns green on hover.</p>
</div><div class=»w3-panel w3-bottombar w3-border-white w3-hover-border-green»>
  <p>Thick (invisible) bottom border that turns green on hover.</p>
</div>

Thick white (invisible) border that turns green on hover.

Thick white (invisible) border that turns black on hover.

Example

<div style=»border:16px solid white» class=»w3-panel w3-hover-border-green»> 
<p>Thick (invisible) border that turns green on hover.</p></div>
<div style=»border:16px solid white» class=»w3-panel w3-hover-border-black»> 
<p>Thick (invisible) border that turns black on hover.</p></div>

❮ Previous
Next ❯

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !important

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

gap
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
row-gap

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 Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !important

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector