Эволюция css: от css, sass, bem и css–модулей до styled-components
Содержание:
- CSS Tutorial
- Border Color CSS
- Definition and Usage
- CSS Tutorial
- More Examples
- Как это работает
- Атрибуты бирки
- Значения свойств
- CSS Border — Individual Sides
- CSS Свойства
- Значения свойств
- CSS Reference
- CSS Properties
- CSS Справочники
- CSS Свойства
- Стиль границы
- Другие примеры
- Relative Lengths
- Определение и использование
- CSS Tutorial
- Значения свойства
- Absolute Lengths
- Цвет границы
- CSS Tutorial
- More Examples
- CSS Advanced
- Definition and Usage
- CSS Advanced
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
Border Color CSS
Свойство HTML border-color используется, чтобы указать цвет границы для одной из четырех сторон элемента.
Цвет можно указывать несколькими способами:
- Названием – вписывается название цвета (например, red);
- Hex – указывается hex-значение цвета (например, #FF0000);
- RGB – указывается RGB-значение цвета (например, rgb(255,0,0));
- transparent (прозрачная).
У свойства border-color может быть от одного до четырех значений (для верхней, правой, нижней и левой стороны).
Если не выставить свойство border-color, то границы будут наследовать цвет элемента.
Пример
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: green;
}
p.three {
border-style: solid;
border-color: red green blue yellow;
}
Посмотреть результат
Definition and Usage
The property sets the color of an element’s four borders. This property can
have from one to four values.
If the border-color property has four values:
- border-color: red green blue pink;
- top border is red
- right border is green
- bottom border is blue
- left border is pink
If the border-color property has three values:
- border-color: red green blue;
- top border is red
- right and left borders are green
- bottom border is blue
If the border-color property has two values:
- border-color: red green;
- top and bottom borders are red
- right and left borders are green
If the border-color property has one value:
- border-color: red;
Note: Always declare the border-style property before the
property. An element must have borders before you can change the color.
| Default value: | The current color of the element |
|---|---|
| Inherited: | no |
| Animatable: | yes. Read about animatable Try it |
| Version: | CSS1 |
| JavaScript syntax: | object.style.borderColor=»#FF0000 blue» Try it |
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
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 border style будет четыре значения:
- border-style: dotted solid double dashed;
- верхняя граница имеет значение dotted;
- правая граница имеет значение solid;
- нижняя граница имеет значение double;
- левая граница имеет значение dashed.
Если у border-style будет три значения:
- border-style: solid dotted double;
- верхняя граница имеет значение dotted;
- правая и левая границы имеют значение solid;
- нижняя граница имеет значение double.
Если у border-style будет два значения:
- border-style: solid dotted;
- верхняя и нижняя границы имеют значение dotted;
- правая и левая границы имеют значение solid.
Если у HTML border style будет одно значение:
- border-style: dotted;
- то все четыре границы будут иметь значение dotted.
В примерах, приведенных выше, мы использовали свойство border-style. Но учтите, что те же правила применения касаются и border-width, и border-color.
Атрибуты бирки
Следование важные атрибуты бирки <frame>:
Атрибут
Описание
src
Этот атрибут использован для того чтобы дать имя файла которое должно быть нагружено в рамке. Свое значение может быть любым URL. Например, src=» /html/top_frame.htm» нагрузит архив HTML доступный в директории HTML.
имя
Этот атрибут позволяет вам дать имя к рамке. Он использован для того чтобы показать которую рамку документ должен быть нагружен в
Это специально важно когда вы хотите создать соединения в одном кадре которые нагружают страницы в другую рамку, в случае которой второй рамке нужно имя определить как цель соединения.
frameborder
Этот атрибут определяет ли или не показаны границы той рамки; он отвергает значение уступанное атрибут frameborder на бирке если одно дается, и это может принять значения или 1 (да) или 0, то (нет).
marginwidth
Этот атрибут позволяет вам определить ширину пространства между левое и право границ рамки и содержания рамки. Значение уступано пикселы
Например marginwidth= » 10″.
marginheight
Этот атрибут позволяет вам определить высоту пространства между верхняя часть и дно своего содержания рамки границ и. Значение уступано пикселы. Например marginheight= » 10″.
noresize
значением по умолчанию вы можете изменить размеры любая рамка путем щелкать и волочить на границах рамки. Атрибут noresize предотвращает потребителя от мочь изменить размеры рамка. Например noresize= » noresize».
перечислять
Этот атрибут контролирует возникновение scrollbars которые появляются на рамку. Это не принимает значения или «да», «нет» или «автомобиль». Например scrolling= » нет» середины оно не должен иметь линейки прокрутки.
longdesc
Этот атрибут позволяет вам снабдить соединение другая страница содержа длиннее описание содержания рамки. Например longdesc= » framedescription.htm»
Значения свойств
| Значение | Описание | Воспроизвести |
|---|---|---|
| inline | Отображает элемент как встроенный элемент (например, <span>). Любые свойства высоты и ширины не будут иметь никакого эффекта | Воспроизвести » |
| block | Отображает элемент в виде блочного элемента (например, <p>). Он начинается на новой линии и занимает всю ширину | Воспроизвести » |
| contents | Делает контейнер исчезнуть, создание дочерних элементов элемента на следующий уровень вверх в DOM | Воспроизвести » |
| flex | Отображает элемент в виде контейнера flex уровня блока | Воспроизвести » |
| grid | Отображение элемента в виде контейнера сетки уровня блока | Воспроизвести » |
| inline-block | Отображает элемент в виде контейнера блоков встроенного уровня. Сам элемент отформатирован как встроенный элемент, но вы можете применить значения высоты и ширины | Воспроизвести » |
| inline-flex | Отображает элемент в виде контейнера flex встроенного уровня | Воспроизвести » |
| inline-grid | Отображает элемент в виде контейнера сетки встроенного уровня | Воспроизвести » |
| inline-table | Элемент отображается в виде таблицы встроенного уровня | Воспроизвести » |
| list-item | Пусть элемент ведет себя как элемент <li> | Воспроизвести » |
| run-in | Отображает элемент как блочный или встроенный в зависимости от контекста | Воспроизвести » |
| table | Пусть элемент ведет себя как элемент <table> | Воспроизвести » |
| table-caption | Пусть элемент ведет себя как элемент <caption> | Воспроизвести » |
| table-column-group | Пусть элемент ведет себя как элемент <colgroup> | Воспроизвести » |
| table-header-group | Пусть элемент ведет себя как элемент <thead> | Воспроизвести » |
| table-footer-group | Пусть элемент ведет себя как элемент <tfoot> | Воспроизвести » |
| table-row-group | Пусть элемент ведет себя как элемент <tbody> | Воспроизвести » |
| table-cell | Пусть элемент ведет себя как элемент <td> | Воспроизвести » |
| table-column | Пусть элемент ведет себя как элемент <col> | Воспроизвести » |
| table-row | Пусть элемент ведет себя как элемент <tr> | Воспроизвести » |
| none | Элемент полностью удален | Воспроизвести » |
| initial | Устанавливает для этого свойства значение по умолчанию. Прочитать о initial | Воспроизвести » |
| inherit | Наследует это свойство от родительского элемента. Прочитать о inherit |
CSS Border — Individual Sides
From the examples on the previous pages, you have seen that it is possible to specify a
different border for each side.
In CSS, there are also properties for specifying each of the borders (top,
right, bottom, and left):
Example
p
{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
Result:
Different Border Styles
The example above gives the same result as this:
Example
p {
border-style: dotted solid;}
So, here is how it works:
If the property has four values:
-
border-style: dotted solid double dashed;
- top border is dotted
- right border is solid
- bottom border is double
- left border is dashed
If the property has three values:
-
border-style: dotted solid double;
- top border is dotted
- right and left borders are solid
- bottom border is double
If the property has two values:
-
border-style: dotted solid;
- top and bottom borders are dotted
- right and left borders are solid
If the property has one value:
-
border-style: dotted;
all four borders are dotted
Example
/* Four values */p { border-style: dotted solid double dashed; }/* Three
values */p { border-style: dotted solid double; }/* Two values */p { border-style: dotted solid; }/* One value */p { border-style: dotted; }
The property is used in the example above. However, it also works with
and .
❮ Previous
Next ❯
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
Значения свойств
| Значение | Описание | |
|---|---|---|
| none | Значение по умолчанию. Не указывает границы | |
| hidden | Так же, как «None», за исключением разрешения пограничного конфликта для элементов таблицы | |
| dotted | Задает пунктирную границу | |
| dashed | Задает пунктирную границу | |
| solid | Задает сплошную границу | |
| double | Задает двойную границу | |
| groove | Задание трехмерной границы с канавкой. Эффект зависит от значения цвета границы | |
| ridge | Задание трехмерной ребристой границы. Эффект зависит от значения цвета границы | |
| inset | Задает 3D-вставку границы. Эффект зависит от значения цвета границы | |
| outset | Задание трехмерной границы начала. Эффект зависит от значения цвета границы | |
| initial | Присваивает этому свойству значение по умолчанию. (Читайте о initial) | |
| inherit | Наследует это свойство из родительского элемента. (Читайте о inherit) |
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 Справочники
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
Стиль границы
Свойство border-style позволяет определить тип (стиль) границы.
Это свойство принимает разные значения:
- dotted – граница в точку;
- dashed – граница в штрих;
- solid – цельная граница;
- double – двойная граница;
- groove – трёхмерная граница. Эффект зависит от того, каким будет значение свойства border-color;
- ridge — трёхмерная граница. Эффект зависит от того, каким будет значение свойства border-color;
- inset – трёхмерная утопленная граница. Эффект зависит от того, каким будет значение свойства border-color;
- outset — трёхмерная выпуклая граница. Эффект зависит от того, каким будет значение свойства border-color;
- none – отключение;
- hidden – скрытые границы.
У свойства HTML border style может быть от одного до четырех значений (для верхней, правой, нижней и левой стороны).
Пример
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;}
Посмотреть результат
Важно! Ни одно из приведенных выше свойств border HTML не вступит в силу, если не установлено значение border-style!
Другие примеры
Пример
Пунктирная граница:
div {border-style: dashed;}
Пример
Сплошная граница:
div {border-style: solid;}
Пример
Двойная граница:
div {border-style: double;}
Пример
Граница канавки:
div { border-style: groove; border-color: coral; border-width: 7px;}
Пример
Граница хребта:
div { border-style: ridge; border-color: coral; border-width: 7px;}
Пример
Граница вставки:
div { border-style: inset; border-color: coral; border-width: 7px;}
Пример
Граница начала:
div { border-style: outset; border-color: coral; border-width: 7px;}
Пример
Задайте различные границы для каждой стороны элемента:
p.one {border-style: dotted solid dashed double;}
p.two {border-style: dotted solid dashed;}
p.three {border-style: dotted solid;}
p.four {border-style: dotted;}
Relative Lengths
Relative length units specify a length relative to another length property.
Relative length units scale better between different rendering medium.
| Unit | Description | |
|---|---|---|
| em | Relative to the font-size of the element (2em means 2 times the size of the current font) | Try it |
| ex | Relative to the x-height of the current font (rarely used) | Try it |
| ch | Relative to the width of the «0» (zero) | Try it |
| rem | Relative to font-size of the root element | Try it |
| vw | Relative to 1% of the width of the viewport* | Try it |
| vh | Relative to 1% of the height of the viewport* | Try it |
| vmin | Relative to 1% of viewport’s* smaller dimension | Try it |
| vmax | Relative to 1% of viewport’s* larger dimension | Try it |
| % | Relative to the parent element | Try it |
Tip: The em and rem units are practical in creating perfectly
scalable layout!* Viewport = the browser window size. If the viewport is 50cm
wide, 1vw = 0.5cm.
Определение и использование
Свойство задает стиль четырех границ элемента. Это свойство может иметь от одного до четырех значений.
Примеры:
-
border-style: dotted solid double dashed;
- top border is dotted
- right border is solid
- bottom border is double
- left border is dashed
-
border-style: dotted solid double;
- top border is dotted
- right and left borders are solid
- bottom border is double
-
border-style: dotted solid;
- top and bottom borders are dotted
- right and left borders are solid
-
border-style: dotted;
all four borders are dotted
| Значение по умолчанию: | none |
|---|---|
| Inherited: | no |
| Animatable: | no. Читайте о animatable |
| Version: | CSS1 |
| Синтаксис JavaScript: |
object.style.borderStyle=»dotted double» |
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
Значения свойства
| Значение | Описание |
|---|---|
| border-width | Указывает ширину для рамки с помощью любой допустимой единицы измерения CSS (кроме процентов). |
| border-style | Указывает стиль для рамки, который определяется одним из ключевых слов: , , , , , , , , и . Значения и являются взаимозаменяемыми, они указывают, что рамка отсутствует. |
| border-color | Задает цвет для рамки одним из следующих способов: имя цвета, шестнадцатеричное значение или RGB, выбрать подходящий цвет или значение можно с помощью таблицы цветов. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Пример</title>
<style type="text/css">
p { border: 5px solid red; }
</style>
</head>
<body>
<p>Здесь содержится какой-то текст.</p>
</body>
</html>
Результат данного примера в окне браузера:
Absolute Lengths
The absolute length units are fixed and a length expressed in any of these will appear as exactly that size.
Absolute length units are not recommended for use on screen, because screen sizes vary so much.
However, they can be used if the output medium is known, such
as for print layout.
| Unit | Description |
|---|---|
| cm | centimeters Try it |
| mm | millimeters Try it |
| in | inches (1in = 96px = 2.54cm) Try it |
| px * | pixels (1px = 1/96th of 1in) Try it |
| pt | points (1pt = 1/72 of 1in) Try it |
| pc | picas (1pc = 12 pt) Try it |
* Pixels (px) are relative to the viewing device. For low-dpi devices, 1px is one device pixel (dot) of the display. For printers and high resolution
screens 1px implies multiple device pixels.
Цвет границы
Свойство используется для задания цвета четырех границ.
Цвет может быть установлен:
- Name-укажите имя цвета, например «Red»
- Hex-укажите шестнадцатеричное значение, например «#ff0000»
- RGB-укажите RGB-значение, например «RGB (255, 0, 0)»
- Прозрачный
Свойство может иметь от одного до четырех значений (для верхней границы, правой границы, нижней границы и левой границы).
Если не задан, он наследует цвет элемента.
Red border
Пример
p.one
{
border-style: solid;
border-color: red;
}
p.two
{
border-style: solid;
border-color: green;
}p.three { border-style: solid;
border-color: red green blue yellow;}
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
More Examples
Example
A dashed bottom border:
div {border-bottom-style: dashed;}
Example
A solid bottom border:
div {border-bottom-style: solid;}
Example
A double bottom border:
div {border-bottom-style: double;}
Example
Remove the bottom border:
div {border-bottom-style: none;}
Example
A groove bottom border:
div { border-bottom-style: groove; border-bottom-color: coral; border-bottom-width: 7px;}
Example
A ridge bottom border:
div { border-bottom-style: ridge; border-bottom-color: coral; border-bottom-width: 7px;}
Example
An inset bottom border:
div { border-bottom-style: inset; border-bottom-color: coral; border-bottom-width: 7px;}
Example
An outset bottom border:
div { border-bottom-style: outset; border-bottom-color: coral; border-bottom-width: 7px;}
CSS Advanced
CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients
CSS Shadows
Shadow Effects
Box Shadow
CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS Image ReflectionCSS object-fitCSS object-positionCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries
CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive
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 |
CSS Advanced
CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients
CSS Shadows
Shadow Effects
Box Shadow
CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS Image ReflectionCSS object-fitCSS object-positionCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries
CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive
