Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ flex, flexbox

Β Π¨Π°Π±Π»ΠΎΠ½
  • 1. ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€
  • 2. Π‘Π»ΠΎΠΊΠΈ
  • 3. Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚
  • ?

Π’ΠΈΠ΄ отобраТСния

ЗначСния для display

flex: Π‘Π»ΠΎΡ‡Π½Ρ‹ΠΉ.

inline-flex: Π‘Ρ‚Ρ€ΠΎΡ‡Π½Ρ‹ΠΉ.

display: ?
flexinline-flex

НаправлСниС Π³Π»Π°Π²Π½ΠΎΠΉ оси

ГруппируСтся Π² ΠΊΠΎΡ€ΠΎΡ‚ΠΊΡƒΡŽ запись ΠΈ устанавливаСтся ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ: «flex-flow: row nowrap».

ЗначСния для flex-direction

row: β†’ Π‘Π»Π΅Π²Π° Π½Π°ΠΏΡ€Π°Π²ΠΎ.

row-reverse: ← Π‘ΠΏΡ€Π°Π²Π° Π½Π°Π»Π΅Π²ΠΎ.

column: ↓ Π‘Π²Π΅Ρ€Ρ…Ρƒ Π²Π½ΠΈΠ·.

column-reverse: ↑ Π‘Π½ΠΈΠ·Ρƒ Π²Π²Π΅Ρ€Ρ….

flex-direction: ?
rowrow-reversecolumncolumn-reverse

Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π³Π»Π°Π²Π½ΠΎΠΉ оси

ЗначСния для justify-content

flex-start: ← ΠŸΡ€ΠΈΠΆΠ°Ρ‚Ρ‹ ΠΊ Π½Π°Ρ‡Π°Π»Ρƒ.

flex-end: β†’ ΠŸΡ€ΠΈΠΆΠ°Ρ‚Ρ‹ ΠΊ ΠΊΠΎΠ½Ρ†Ρƒ.

center: β†’ ← ΠŸΡ€ΠΈΠΆΠ°Ρ‚Ρ‹ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ.

space-between: ← β†’ Π Π°Π²Π½ΠΎΠΌΠ΅Ρ€Π½ΠΎ Ρ€Π°ΡΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ΡΡ ΠΏΠΎ всСй Π΄Π»ΠΈΠ½Π΅. ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΈ послСдний элСмСнт ΠΏΡ€ΠΈΠΆΠ°Ρ‚Ρ‹ ΠΊ своим краям ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.

space-around: ← β†’ Π Π°Π²Π½ΠΎΠΌΠ΅Ρ€Π½ΠΎ распрСдСлСны ΠΏΠΎ всСй Π΄Π»ΠΈΠ½Π΅. ΠŸΡƒΡΡ‚ΠΎΠ΅ пространство ΠΏΠ΅Ρ€Π΅Π΄ ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ ΠΈ послС послСднСго элСмСнта Ρ€Π°Π²Π½ΠΎ ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Π΅ пространства ΠΌΠ΅ΠΆΠ΄Ρƒ двумя сосСдними элСмСнтами.

justify-content:
?
flex-startflex-endcenterspace-betweenspace-around

Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ ΠΏΠΎΠΏΠ΅Ρ€Π΅Ρ‡Π½ΠΎΠΉ оси

ЗначСния для align-items

flex-start: ↑ Π‘Π»ΠΎΠΊΠΈ Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½Ρ‹ Π² Π½Π°Ρ‡Π°Π»Π΅ ΠΏΠΎΠΏΠ΅Ρ€Π΅Ρ‡Π½ΠΎΠΉ оси ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.

flex-end: ↓ Π‘Π»ΠΎΠΊΠΈ Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½Ρ‹ Π² ΠΊΠΎΠ½Ρ†Π΅ ΠΏΠΎΠΏΠ΅Ρ€Π΅Ρ‡Π½ΠΎΠΉ оси ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.

center: Π‘Π»ΠΎΠΊΠΈ Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½Ρ‹ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ (Π»ΠΈΠ½ΠΈΠΈ ΠΏΠΎΠΏΠ΅Ρ€Π΅Ρ‡Π½ΠΎΠΉ оси) ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.

baseline: Π‘Π»ΠΎΠΊΠΈ Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½Ρ‹ ΠΏΠΎ Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ.

stretch: Π‘Π»ΠΎΠΊΠΈ растянуты Π½Π° всё пространство ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.

align-items: ?
flex-startflex-endcenterbaselinestretch

ΠœΠ½ΠΎΠ³ΠΎΡΡ‚Ρ€ΠΎΡ‡Π½Π°Ρ организация Π±Π»ΠΎΠΊΠΎΠ²

ГруппируСтся Π² ΠΊΠΎΡ€ΠΎΡ‚ΠΊΡƒΡŽ запись ΠΈ устанавливаСтся Π²Ρ‚ΠΎΡ€Ρ‹ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ: «flex-flow: row nowrap«.

ЗначСния для flex-wrap

nowrap: Π’ ΠΎΠ΄Π½Ρƒ линию.

wrap: Π’ нСсколько строк.

wrap-reverse: Π’ нСсколько строк, Π² ΠΏΡ€ΠΎΡ‚ΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½ΠΎΠΌ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠΌ Π² flex-direction.

flex-wrap: ?
nowrapwrapwrap-reverse

Бпособ выравнивания ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ (Ρ‚ΠΎΠ»ΡŒΠΊΠΎ многострочный Ρ€Π΅ΠΆΠΈΠΌ)

ЗначСния для align-content

flex-start: ↑ Π‘Ρ‚Ρ€ΠΎΠΊΠΈ Π² Π½Π°Ρ‡Π°Π»Π΅ ΠΏΠΎΠΏΠ΅Ρ€Π΅Ρ‡Π½ΠΎΠΉ оси (ΠΏΡ€ΠΈΠΆΠ°Ρ‚ΡŒ Π±Π»ΠΎΠΊΠΈ ΠΊ Π²Π΅Ρ€Ρ…Ρƒ).

flex-end: ↓ РасполоТСниС строк начиная с ΠΊΠΎΠ½Ρ†Π° ΠΏΠΎΠΏΠ΅Ρ€Π΅Ρ‡Π½ΠΎΠΉ оси (ΠΏΡ€ΠΈΠΆΠ°Ρ‚ΡŒ Π±Π»ΠΎΠΊΠΈ ΠΊ Π½ΠΈΠ·Ρƒ).

center: Π‘Ρ‚Ρ€ΠΎΠΊΠΈ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.

space-between: Π Π°Π²Π½ΠΎΠΌΠ΅Ρ€Π½ΠΎΠ΅ распрСдСлСниС строк ΠΏΠΎ всСй высотС.

space-around: Π Π°Π²Π½ΠΎΠΌΠ΅Ρ€Π½ΠΎΠ΅ распрСдСлСниС строк ΠΏΠΎ всСй высотС с отступом ΠΏΠ΅Ρ€Π΅Π΄ ΠΏΠ΅Ρ€Π²ΠΎΠΉ строкой ΠΈ послС послСднСй, Ρ€Π°Π²Π½Ρ‹ΠΌΠΈ ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Π΅ рсстояния ΠΌΠ΅ΠΆΠ΄Ρƒ сосСдними строками.

stretch: Π‘Ρ‚Ρ€ΠΎΠΊΠΈ Ρ€Π°Π²Π½ΠΎΠΌΠ΅Ρ€Π½ΠΎ растянуты.

align-content: ?
flex-startflex-endcenterspace-betweenspace-aroundstretch

Π¨ΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°

width: ?
auto300px600px50%100%

Высота ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°

height: ?
auto100px300px500px RTL

ΠžΠ±Ρ‰ΠΈΠ΅ значСния для всСх Π±Π»ΠΎΠΊΠΎΠ² Γ— ΠžΡ‡ΠΈΡΡ‚ΠΈΡ‚ΡŒ

Π‘Π»ΠΎΠΊΠΈ

+

Π–Π°Π΄Π½ΠΎΡΡ‚ΡŒ

ΠžΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² Ρƒ Π±Π»ΠΎΠΊΠΎΠ². Π‘Π»ΠΎΠΊ со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ 2 Π±ΡƒΠ΄Π΅Ρ‚ Π² Π΄Π²Π° Ρ€Π°Π·Π° большС Π±Π»ΠΎΠΊΠ° со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ 1.

ГруппируСтся Π² ΠΊΠΎΡ€ΠΎΡ‚ΠΊΡƒΡŽ запись ΠΈ устанавливаСтся ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ: «flex: 0 1 auto».

flex-grow: ?
0123

Π‘ΠΆΠΈΠΌΠ°Π΅ΠΌΠΎΡΡ‚ΡŒ

ΠšΠΎΡΡ„Ρ„ΠΈΡ†ΠΈΠ΅Π½Ρ‚ сТатия Π±Π»ΠΎΠΊΠΎΠ² Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π΅. Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΡΡ‚Π΅ΠΏΠ΅Π½ΡŒ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΡ ΠΏΠΎ ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡŽ ΠΊ Π΄Ρ€ΡƒΠ³ΠΈΠΌ Π±Π»ΠΎΠΊΠ°ΠΌ, для размСщСния Π±Π»ΠΎΠΊΠΎΠ² Π² ΠΎΠ΄Π½Ρƒ строку.

ГруппируСтся Π² ΠΊΠΎΡ€ΠΎΡ‚ΠΊΡƒΡŽ запись ΠΈ устанавливаСтся Π²Ρ‚ΠΎΡ€Ρ‹ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ: «flex: 0 1 auto».

flex-shrink: ?
0.5123

Π‘Π°Π·ΠΎΠ²Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€

Основа Π±Π»ΠΎΠΊΠ°. ЯвляСтся Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΌ (Π±Π°Π·ΠΎΠ²Ρ‹ΠΌ) Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ элСмСнта. Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… Π΅Π΄ΠΈΠ½ΠΈΡ†Π°Ρ… измСрСния: px, em, %, mm, pt ΠΈ Ρ‚.Π΄..

ГруппируСтся Π² ΠΊΠΎΡ€ΠΎΡ‚ΠΊΡƒΡŽ запись ΠΈ устанавливаСтся Ρ‚Ρ€Π΅Ρ‚ΡŒΠΈΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ: «flex: 0 1 auto«.

flex-basis: ?
auto0100px200px

ΠžΡ‚ΡΡ‚ΡƒΠΏ

Π’Π½Π΅ΡˆΠ½ΠΈΠΉ отступ. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ auto Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΊΠ°ΠΊ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ Ρ‚Π°ΠΊ ΠΈ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ.

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния для Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ отступа Ρ‡Π΅Ρ€Π΅Π· ΠΏΡ€ΠΎΠ±Π΅Π».

ΠŸΡ€ΠΈΠΌΠ΅Ρ€: «10px auto«.

margin: ?
auto05px10px20px

ПолС

Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΉ отступ.

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния для Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ отступа Ρ‡Π΅Ρ€Π΅Π· ΠΏΡ€ΠΎΠ±Π΅Π».

ΠŸΡ€ΠΈΠΌΠ΅Ρ€: «10px auto«.

padding: ?
auto05px10px20px

ΠŸΠΎΡ€ΡΠ΄ΠΎΠΊ (вСс)

ΠŸΠΎΡ€ΡΠ΄ΠΎΠΊ слСдования Π±Π»ΠΎΠΊΠ°. Π‘Π»ΠΎΠΊΠΈ с мСньшим вСсом Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ Π²Π½Π°Ρ‡Π°Π»Π΅.

order: ?
012510

Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ ΠΏΠΎΠΏΠ΅Ρ€Π΅Ρ‡Π½ΠΎΠΉ оси

Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ° Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ строки. ΠŸΠ΅Ρ€Π΅ΠΏΠΈΡΡ‹Π²Π°Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ Π² align-items.

ЗначСния для align-self

auto: Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° ΠΈΠ· align-items.

flex-start: ↑ Π‘Π»ΠΎΠΊΠΈ Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½Ρ‹ Π² Π½Π°Ρ‡Π°Π»Π΅ ΠΏΠΎΠΏΠ΅Ρ€Π΅Ρ‡Π½ΠΎΠΉ оси ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.

flex-end: ↓ Π‘Π»ΠΎΠΊΠΈ Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½Ρ‹ Π² ΠΊΠΎΠ½Ρ†Π΅ ΠΏΠΎΠΏΠ΅Ρ€Π΅Ρ‡Π½ΠΎΠΉ оси ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.

center: Π‘Π»ΠΎΠΊΠΈ Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½Ρ‹ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ (Π»ΠΈΠ½ΠΈΠΈ ΠΏΠΎΠΏΠ΅Ρ€Π΅Ρ‡Π½ΠΎΠΉ оси) ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.

baseline: Π‘Π»ΠΎΠΊΠΈ Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½Ρ‹ ΠΏΠΎ Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ.

stretch: Π‘Π»ΠΎΠΊΠΈ растянуты Π½Π° всё пространство ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.

align-self: ?
autoflex-startflex-endcenterbaselinestretch

Β ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° старых Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² (прСфиксы) Β ΠŸΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ умолчания (ΠΏΠ΅Ρ€Π΅ΠΏΠΈΡΠ°Ρ‚ΡŒ стили)

CSS

βœ‚ ΠšΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ

HTML

βœ‚ ΠšΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ

Π‘Π»ΠΎΠΊ 1

Π‘Π»ΠΎΠΊ 2

Π‘Π»ΠΎΠΊ 3

ОписаниС flex Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€Π°

ΠžΠ±Ρ‰ΠΈΠ΅ свСдСния

Основная идСя flex Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€Π° ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΌ процСсс Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ flex конструкций: обСспСчив Π½Π°Π³Π»ΡΠ΄Π½ΠΎΡΡ‚ΡŒ ΠΈ прСдоставив ΡˆΠΈΡ€ΠΎΠΊΠΈΠΉ Π½Π°Π±ΠΎΡ€ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… настроСк. Π”Π°Π½Π½Ρ‹ΠΉ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ прСдоставляСтся бСсплатно ΠΈ Π±Π΅Π· ΠΊΠ°ΠΊΠΈΡ…-Π»ΠΈΠ±ΠΎ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠΉ Π½Π° сайтС cssworld.ru.

Для простоты, здСсь ΠΈ Π΄Π°Π»Π΅Π΅, ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠΌ называСтся Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ элСмСнт, Π° Π±Π»ΠΎΠΊΠ°ΠΌΠΈ Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠ΅ элСмСнты flex Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ.

ИспользованиС

ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ ΠΈΠΌΠ΅Π΅Ρ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π²Ρ‹Π±ΠΎΡ€Π° прСдустановлСнных Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ. ЗначСния ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π²Ρ‹Π΄Π΅Π»Π΅Π½Ρ‹ Ρ„ΠΎΠ½ΠΎΠΌ. ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠΏΡ€Π΅Π΄ΡƒΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°ΡŽΡ‰ΠΈΠ΅ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½Ρ‹Π΅ значСния ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ.

Π’ самом Π½ΠΈΠ·Ρƒ, ΠΏΠΎΠ΄ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΌ просмотром, отобраТаСтся CSS ΠΊΠΎΠ΄ для Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΡ… установлСнных Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°, Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°, Π»ΠΈΠ±ΠΎ ΠΎΠ±Ρ‰ΠΈΠ΅ значСния Π±Π»ΠΎΠΊΠΎΠ² ΠΏΡ€ΠΈ отсутствии выдСлСния.

Для удобства, процСсс ΠΏΠΎΠ΄Π΅Π»Π΅Π½ Π½Π° Ρ‚Ρ€ΠΈ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ составныС части, Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½Π½Ρ‹Ρ… Π² ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… Π²ΠΊΠ»Π°Π΄ΠΊΠ°Ρ…, Π° Ρ‚Π°ΠΊΠΆΠ΅ Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΠΉ справочный Ρ€Π°Π·Π΄Π΅Π»: ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€, Π‘Π»ΠΎΠΊΠΈ, Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚

1. ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€

Настройка ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° flex Π±Π»ΠΎΠΊΠΎΠ² Ρ‡Π΅Ρ€Π΅Π· установку ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ². Π”Π°Π½Π½Ρ‹Π΅ настройки ΠΈΠΌΠ΅ΡŽΡ‚ ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΊ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠΌΡƒ элСмСнту flex Π±Π»ΠΎΠΊΠΎΠ².

2. Π‘Π»ΠΎΠΊΠΈ

Настройка flex Π±Π»ΠΎΠΊΠΎΠ². Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ количСство Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΡ… Π±Π»ΠΎΠΊΠΎΠ², ΡΠ±Ρ€ΠΎΡΠΈΡ‚ΡŒ значСния Π΄ΠΎ установлСнных ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ значСния ΠΎΠ±Ρ‰ΠΈΠ΅ для всСх Π±Π»ΠΎΠΊΠΎΠ² ΠΈΠ»ΠΈ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния.

Для установки Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΌΡƒ Π±Π»ΠΎΠΊΡƒ Π΅Π³ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ. Π’Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ° Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎ ΠΊΠ»ΠΈΠΊΡƒ Π½Π° Π½Π΅ΠΌ. ΠŸΠΎΠ²Ρ‚ΠΎΡ€Π½Ρ‹ΠΉ ΠΊΠ»ΠΈΠΊ снимаСт Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅. Π’ΠΎ ΠΆΠ΅ самоС Π΄Π΅Π»Π°Π΅Ρ‚ ΠΊΠ½ΠΎΠΏΠΊΠ° «Π“ΠΎΡ‚ΠΎΠ²ΠΎ» отобраТаСмая ΠΏΡ€ΠΈ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌ элСмСнтС, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ Π½Π° Π΄Ρ€ΡƒΠ³ΡƒΡŽ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ снимаСт Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅.

Π£ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ элСмСнта Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ (Π΅Π³ΠΎ тСкстовоС Π½Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅), Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ для Π½Π΅Π³ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΈ ΠΎΡ‡ΠΈΡΡ‚ΠΈΡ‚ΡŒ установлСнныС значСния.

3. Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚

Помимо Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π°, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‰Π΅Π³ΠΎ ΠΏΠΎΠ»Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ CSS стилСй ΠΈ HTML, здСсь Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ряд настроСк совмСстимости Π½Π΅ Π²Π»ΠΈΡΡŽΡ‰ΠΈΡ… Π½Π° Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΡŽ.

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° старых Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ²

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π²ΠΎ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ «Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚» ΠΏΡ€ΠΈ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Π½ΠΎΠΉ ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΊΠ΅ «ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° старых Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² (прСфиксы)». Π”Π°Π½Π½ΠΎΠ΅ дСйствиС добавляСт ΠΏΡ€Π΅Π΄ΡˆΠ΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ с прСфиксами -ms- (Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для IE10) ΠΈ -webkit- (всС ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹).

Π‘Π»ΠΎΠΊ 1

Π‘Π»ΠΎΠΊ 2

Π‘Π»ΠΎΠΊ 3

↑ Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π±Π»ΠΎΠΊ для задания ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½Ρ‹Ρ… ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ²

ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€

βœ‚ ΠšΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ .my-flex-cont { display: flex; height: 100px; }

Π‘Π»ΠΎΠΊΠΈ

βœ‚ ΠšΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ .my-flex-box { margin: 5px; padding: 5px; flex: 0 1 auto; }

Π”Π°Ρ‚Ρ‹ ΠΈ вСрсии Π½Π°Ρ‡Π°Π»Π° ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ Flex Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…

Колонки ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎ Π΄Π°Ρ‚Π΅ ΠΈ названию Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°.

Π”Π°Ρ‚Π° ↓БраузСр ↓ВСрсияВип ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ
04.09.2012 IE10-ms- ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ 2012 синтакс
17.10.2013 IE11ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ с Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ Π±Π°Π³Π°ΠΌΠΈ, см. Π½ΠΈΠΆΠ΅
29.07.2015 Edge12Полная
24.10.2006
Firefox2-moz- ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΡΡ‚Π°Ρ€ΡƒΡŽ ΡΠΏΠ΅Ρ†ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΡŽ ΠΈ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ wrapping
14.05.2013 Firefox22-webkit- НС ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚: flex-wrap, flex-flow, align-content
18.03.2014 Firefox28Полная
25. 01.2010 Chrome4-webkit- ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΡΡ‚Π°Ρ€ΡƒΡŽ ΡΠΏΠ΅Ρ†ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΡŽ ΠΈ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ wrapping
26.06.2012 Chrome21-webkit-
18.07.2013 Chrome29Полная
18.03.2008 Safari3.1-webkit- ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΡΡ‚Π°Ρ€ΡƒΡŽ ΡΠΏΠ΅Ρ†ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΡŽ ΠΈ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ wrapping
22.10.2013 Safari7-webkit-
01.10.2015 Safari9Полная
05.11.2012 Opera12.1Полная
02.07.2013 Opera15-webkit- (ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Opera ΠΏΠ΅Ρ€Π΅ΡˆΠ»Π° Π½Π° Π΄Π²ΠΈΠΆΠΎΠΊ Blink ΠΊΠ°ΠΊ Ρƒ Chrome)
08. 08.2013 Opera17Полная
03.04.2010 iOS Safari3.2-webkit- ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΡΡ‚Π°Ρ€ΡƒΡŽ ΡΠΏΠ΅Ρ†ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΡŽ ΠΈ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ wrapping
10.03.2014 iOS Safari
7
-webkit-
16.09.2015 iOS Safari9Полная
16.03.2015 Opera Mini1Полная (Π‘ вСрсии 8 Π½Π° iOS ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ iOS Safari Π΄Π²ΠΈΠΆΠΎΠΊ)
26.10.2009 Android Browser2.1-webkit- ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΡΡ‚Π°Ρ€ΡƒΡŽ ΡΠΏΠ΅Ρ†ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΡŽ ΠΈ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ wrapping
09.12.2013 Android Browser4.4Полная

ΠžΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΠΈ старых Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² IE

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π² IE10 ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ flex ΠΈΠΌΠ΅Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ «-ms-flex: 0 0 auto» вмСсто «flex: 0 1 auto«. Π’Ρ€Π΅Ρ‚ΡŒΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, flex-basis, Π² ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π΅ «flex: 0 1 auto» для IE11 ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ. НСкоррСктно рассчитываСтся высота ΠΏΡ€ΠΈ установлСнных Ρƒ Π±Π»ΠΎΠΊΠΎΠ² Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ min-height ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ для IE10 ΠΈ IE11.

Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ

Π’Π°ΠΊΠΆΠ΅ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ ΡΡ‚Π°Ρ‚ΡŒΡŽ: ПониманиС flex.

Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ Ρ€Π΅ΠΊΠ»Π°ΠΌΠ½Ρ‹Ρ… Π±Π»ΠΎΠΊΠΎΠ² — Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΉ HTML/CSS

ВсС Π‘Π΅Π· Ρ„ΠΎΡ‚ΠΎ Π‘Π»ΠΎΠΊ внимания Π’ сайдбар Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠšΠ²Π°Π΄Ρ€Π°Ρ‚Π½Ρ‹ΠΉ НСсколько ΠžΠ΄ΠΈΠ½ΠΎΡ‡Π½Ρ‹ΠΉ

ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ ДСсктопы

#21. ΠžΠ΄ΠΈΠ½ΠΎΡ‡Π½Ρ‹ΠΉ Π² сайдбар ΠΈΠ»ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ ΠΏΠΎΠΏΠ°ΠΏ: Ρ„ΠΎΡ‚ΠΎ + тСкст

Π‘Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎ 947 Ρ€Π°Π·

Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ (Π½Π°Π²Π΅Π΄ΠΈ курсор)

#21

ΠžΠ΄ΠΈΠ½ΠΎΡ‡Π½Ρ‹ΠΉ Π² сайдбар ΠΈΠ»ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ ΠΏΠΎΠΏΠ°ΠΏ: Ρ„ΠΎΡ‚ΠΎ + тСкст

Π‘Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ

ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅

#20. ΠŸΡ€ΠΈΠ»ΠΈΠΏΠ°ΡŽΡ‰Π΅Π΅ ΠΎΠΊΠ½ΠΎ Π½Π° мобильникС: Ρ„ΠΎΡ‚ΠΎ + тСкст + ссылка

Π‘Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎ 1186 Ρ€Π°Π·

Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ (Π½Π°Π²Π΅Π΄ΠΈ курсор)

#20

ΠŸΡ€ΠΈΠ»ΠΈΠΏΠ°ΡŽΡ‰Π΅Π΅ ΠΎΠΊΠ½ΠΎ Π½Π° мобильникС: Ρ„ΠΎΡ‚ΠΎ + тСкст + ссылка

Π‘Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ

ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ ДСсктопы

#19. Π‘Π»ΠΎΠΊ внимания «Π‘Π΅Ρ€Ρ‹ΠΉ ΠœΠΈΠΊΡ€ΠΎΡ„ΠΎΠ½»

Π‘Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎ 118 Ρ€Π°Π·

Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ (Π½Π°Π²Π΅Π΄ΠΈ курсор)

#19

Π‘Π»ΠΎΠΊ внимания «Π‘Π΅Ρ€Ρ‹ΠΉ ΠœΠΈΠΊΡ€ΠΎΡ„ΠΎΠ½»

Π‘Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ

ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ ДСсктопы

#18. Π‘Π»ΠΎΠΊ внимания «Π–Π΅Π»Ρ‚Ρ‹ΠΉ Warning»

Π‘Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎ 112 Ρ€Π°Π·Π°

Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ (Π½Π°Π²Π΅Π΄ΠΈ курсор)

#18

Π‘Π»ΠΎΠΊ внимания «Π–Π΅Π»Ρ‚Ρ‹ΠΉ Warning»

Π‘Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ

ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ ДСсктопы

#17. Π‘Π»ΠΎΠΊ внимания «ΠšΡ€Π°ΡΠ½Ρ‹ΠΉ Error»

Π‘Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎ 37 Ρ€Π°Π·

Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ (Π½Π°Π²Π΅Π΄ΠΈ курсор)

#17

Π‘Π»ΠΎΠΊ внимания «ΠšΡ€Π°ΡΠ½Ρ‹ΠΉ Error»

Π‘Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ

ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ ДСсктопы

#16. Π‘Π»ΠΎΠΊ внимания «Π‘ΠΈΠ½ΠΈΠΉ Info»

Π‘Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎ 128 Ρ€Π°Π·

Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ (Π½Π°Π²Π΅Π΄ΠΈ курсор)

#16

Π‘Π»ΠΎΠΊ внимания «Π‘ΠΈΠ½ΠΈΠΉ Info»

Π‘Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ

ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ ДСсктопы

#15. Π‘Π»ΠΎΠΊ внимания «Π—Π΅Π»Π΅Π½Ρ‹ΠΉ Check»

Π‘Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎ 168 Ρ€Π°Π·

Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ (Π½Π°Π²Π΅Π΄ΠΈ курсор)

#15

Π‘Π»ΠΎΠΊ внимания «Π—Π΅Π»Π΅Π½Ρ‹ΠΉ Check»

Π‘Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ

ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅

#14. ΠŸΡ€ΠΈΠ»ΠΈΠΏΠ°ΡŽΡ‰Π΅Π΅ ΠΎΠΊΠ½ΠΎ Π½Π° мобильникС: Ρ„ΠΎΡ‚ΠΎ + тСкст

Π‘Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎ 307 Ρ€Π°Π·

Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ (Π½Π°Π²Π΅Π΄ΠΈ курсор)

#14

ΠŸΡ€ΠΈΠ»ΠΈΠΏΠ°ΡŽΡ‰Π΅Π΅ ΠΎΠΊΠ½ΠΎ Π½Π° мобильникС: Ρ„ΠΎΡ‚ΠΎ + тСкст

Π‘Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ

ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ ДСсктопы

#12. ВСкст Π½Π° ΠΏΠ΅Ρ€Π΅Π»ΠΈΠ²Π°ΡŽΡ‰Π΅ΠΌΡΡ Ρ„ΠΎΠ½Π΅ (анимация)

Π‘Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎ 151 Ρ€Π°Π·

Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ (Π½Π°Π²Π΅Π΄ΠΈ курсор)

#12

ВСкст Π½Π° ΠΏΠ΅Ρ€Π΅Π»ΠΈΠ²Π°ΡŽΡ‰Π΅ΠΌΡΡ Ρ„ΠΎΠ½Π΅ (анимация)

Π‘Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ

ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ ДСсктопы

#11. Набор ΠΈΠ· 4: тСкст Π½Π° Ρ„ΠΎΠ½Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ

Π‘Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎ 233 Ρ€Π°Π·Π°

Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ (Π½Π°Π²Π΅Π΄ΠΈ курсор)

#11

Набор ΠΈΠ· 4: тСкст Π½Π° Ρ„ΠΎΠ½Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ

Π‘Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ

ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ ДСсктопы

#10. Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ Π½Π°Π±ΠΎΡ€ Ρ‚ΠΈΠ·Π΅Ρ€ΠΎΠ²: Ρ„ΠΎΡ‚ΠΎ + тСкст + ΠΊΠ½ΠΎΠΏΠΊΠ°

Π‘Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎ 243 Ρ€Π°Π·Π°

Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ (Π½Π°Π²Π΅Π΄ΠΈ курсор)

#10

Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ Π½Π°Π±ΠΎΡ€ Ρ‚ΠΈΠ·Π΅Ρ€ΠΎΠ²: Ρ„ΠΎΡ‚ΠΎ + тСкст + ΠΊΠ½ΠΎΠΏΠΊΠ°

Π‘Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ

ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ ДСсктопы

#9. Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ список Π² Π²ΠΈΠ΄Π΅ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ Π² сайдбар: Ρ„ΠΎΡ‚ΠΎ + Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ + ΠΊΠ½ΠΎΠΏΠΊΠ°

Π‘Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎ 150 Ρ€Π°Π·

Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ (Π½Π°Π²Π΅Π΄ΠΈ курсор)

#9

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ список Π² Π²ΠΈΠ΄Π΅ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ Π² сайдбар: Ρ„ΠΎΡ‚ΠΎ + Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ + ΠΊΠ½ΠΎΠΏΠΊΠ°

Π‘Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ

ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ ДСсктопы

#8. Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ список Π² сайдбар: Ρ„ΠΎΡ‚ΠΎ + Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ + ΠΊΠ½ΠΎΠΏΠΊΠ°

Π‘Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎ 55 Ρ€Π°Π·

Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ (Π½Π°Π²Π΅Π΄ΠΈ курсор)

#8

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ список Π² сайдбар: Ρ„ΠΎΡ‚ΠΎ + Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ + ΠΊΠ½ΠΎΠΏΠΊΠ°

Π‘Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ

ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ ДСсктопы

#7. ΠŸΡΠ΅Π²Π΄ΠΎΠ±Π°Π½Π½Π΅Ρ€ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ: тСкст + Ρ„ΠΎΡ‚ΠΎ + ΠΊΠ½ΠΎΠΏΠΊΠ°

Π‘Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎ 721 Ρ€Π°Π·

Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ (Π½Π°Π²Π΅Π΄ΠΈ курсор)

#7

ΠŸΡΠ΅Π²Π΄ΠΎΠ±Π°Π½Π½Π΅Ρ€ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ: тСкст + Ρ„ΠΎΡ‚ΠΎ + ΠΊΠ½ΠΎΠΏΠΊΠ°

Π‘Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ

ДСсктопы

#6. ΠžΠ΄ΠΈΠ½ΠΎΡ‡Π½Ρ‹ΠΉ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ: Ρ„ΠΎΡ‚ΠΎ + тСкст + ΠΊΠ½ΠΎΠΏΠΊΠ°

Π‘Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎ 2451 Ρ€Π°Π·

Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ (Π½Π°Π²Π΅Π΄ΠΈ курсор)

#6

ΠžΠ΄ΠΈΠ½ΠΎΡ‡Π½Ρ‹ΠΉ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ: Ρ„ΠΎΡ‚ΠΎ + тСкст + ΠΊΠ½ΠΎΠΏΠΊΠ°

Π‘Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ

ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ ДСсктопы

#5. ΠžΠ΄ΠΈΠ½ΠΎΡ‡Π½Ρ‹ΠΉ: тСкст Π½Π° Ρ„ΠΎΠ½Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ

Π‘Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎ 371 Ρ€Π°Π·

Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ (Π½Π°Π²Π΅Π΄ΠΈ курсор)

#5

ΠžΠ΄ΠΈΠ½ΠΎΡ‡Π½Ρ‹ΠΉ: тСкст Π½Π° Ρ„ΠΎΠ½Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ

Π‘Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ

ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ ДСсктопы

#4. Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ 3 Π² столбСц: Ρ„ΠΎΡ‚ΠΎ + тСкст

Π‘Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎ 291 Ρ€Π°Π·

Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ (Π½Π°Π²Π΅Π΄ΠΈ курсор)

#4

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ 3 Π² столбСц: Ρ„ΠΎΡ‚ΠΎ + тСкст

Π‘Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ

ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ ДСсктопы

#3. ВСкстовый Π±Π»ΠΎΠΊ внимания

Π‘Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎ 349 Ρ€Π°Π·

Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ (Π½Π°Π²Π΅Π΄ΠΈ курсор)

#3

ВСкстовый Π±Π»ΠΎΠΊ внимания

Π‘Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ

ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ ДСсктопы

#2. ΠžΠ΄ΠΈΠ½ΠΎΡ‡Π½Ρ‹ΠΉ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ: Ρ„ΠΎΡ‚ΠΎ + Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ + тСкст

Π‘Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎ 802 Ρ€Π°Π·Π°

Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ (Π½Π°Π²Π΅Π΄ΠΈ курсор)

#2

ΠžΠ΄ΠΈΠ½ΠΎΡ‡Π½Ρ‹ΠΉ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ: Ρ„ΠΎΡ‚ΠΎ + Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ + тСкст

Π‘Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ

ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ ДСсктопы

#1. Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ 3 Π² ряд с полосами свСрху ΠΈ снизу

Π‘Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎ 650 Ρ€Π°Π·

Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ (Π½Π°Π²Π΅Π΄ΠΈ курсор)

#1

Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ 3 Π² ряд с полосами свСрху ΠΈ снизу

Π‘Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ

ΠŸΠΎΠ»ΡƒΡ‡Π°ΠΉΡ‚Π΅ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ появлСнии Π½ΠΎΠ²Ρ‹Ρ… Ρ‚ΠΈΠ·Π΅Ρ€ΠΎΠ² Π² нашСм Π’Π΅Π»Π΅Π³Ρ€Π°ΠΌ ΠΊΠ°Π½Π°Π»Π΅ Β»

Как ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ

  1. Π’Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚Π΅ Π½ΡƒΠΆΠ½Ρ‹ΠΉ Π²Π°ΠΌ Ρ‚ΠΈΠ·Π΅Ρ€.
  2. ЗаполняСтС поля Π½ΡƒΠΆΠ½ΠΎΠΉ Π²Π°ΠΌ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠ΅ΠΉ ΠΈ Π²Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚Π΅ Ρ†Π²Π΅Ρ‚ элСмСнтов. Π£ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Ρ‚ΠΈΠ·Π΅Ρ€Π° ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Ρ€Π°Π·Π½Ρ‹ΠΉ Π½Π°Π±ΠΎΡ€ ΠΏΠΎΠ»Π΅ΠΉ.
  3. Π“Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚Π΅ Ρ‚ΠΈΠ·Π΅Ρ€.
  4. Π‘Π²Π΅Ρ€Ρ…Ρƒ Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ «ΠΆΠΈΠ²ΠΎΠΉ» Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π² окошкС, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡ‚ΡΠ½ΡƒΡ‚ΡŒ Π·Π° ΠΊΡ€Π°ΠΉ ΠΈ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°ΠΊ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Π½Π° Ρ€Π°Π·Π½Ρ‹Ρ… Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡΡ… экрана.
  5. ΠšΠΎΠΏΠΈΡ€ΡƒΠ΅Ρ‚Π΅ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΉ ΠΊΠΎΠ΄ ΠΈ вставляСтС Ρƒ сСбя Π½Π° сайтС ΠΊΠ°ΠΊ Π΅ΡΡ‚ΡŒ Π² Π½ΡƒΠΆΠ½ΠΎΠ΅ мСсто страницы.

Π•ΡΡ‚ΡŒ ΠΈΠ΄Π΅ΠΈ?

Π’ΠΈΠ΄Π΅Π»ΠΈ красивый Ρ€Π΅ΠΊΠ»Π°ΠΌΠ½Ρ‹ΠΉ Π±Π»ΠΎΠΊ ΠΈΠ»ΠΈ Π½Π°Π±ΠΎΡ€ Ρ‚ΠΈΠ·Π΅Ρ€ΠΎΠ²?

Π‘Π±Ρ€ΠΎΡΡŒΡ‚Π΅ Π½Π°ΠΌ Π½Π° ΠΏΠΎΡ‡Ρ‚Ρƒ [email protected] ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚ ΠΈ ΠΌΡ‹ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π΅Π³ΠΎ Π² наш бСсплатный Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ Ρ€Π΅ΠΊΠ»Π°ΠΌΠ½Ρ‹Ρ… Π±Π»ΠΎΠΊΠΎΠ².

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈ нас

position — CSS | MDN

Бвойство cssposition ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, ΠΊΠ°ΠΊ элСмСнт позиционируСтся Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅. top, right, bottom ΠΈ left (en-US) ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠ΅ мСстополоТСниС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… элСмСнтов.

Π’ΠΈΠΏΡ‹ позиционирования

  • ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΠ΅ΠΌΡ‹ΠΉ элСмСнт β€” это элСмСнт, Ρƒ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ вычислСнноС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ position являСтся relative, absolute, fixed Π»ΠΈΠ±ΠΎ sticky. (Π”Ρ€ΡƒΠ³ΠΈΠΌΠΈ словами, это всС, ΠΊΡ€ΠΎΠΌΠ΅ static.)
  • ΠžΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΠ΅ΠΌΡ‹ΠΉ элСмСнт являСтся элСмСнтом, вычислСнноС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ position ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ являСтся relative. Бвойства top ΠΈ bottom ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ смСщСниС ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ ΠΎΡ‚ Π΅Π³ΠΎ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ полоТСния; свойства left (en-US) ΠΈ right Π·Π°Π΄Π°ΡŽΡ‚ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ смСщСниС.
  • ΠΠ±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΠ΅ΠΌΡ‹ΠΉ элСмСнт β€” это элСмСнт, Ρ‡ΡŒΡ‘ вычислСнноС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ position являСтся absolute ΠΈΠ»ΠΈ fixed. top, right, bottom ΠΈ left (en-US) Π·Π°Π΄Π°ΡŽΡ‚ смСщСния ΠΎΡ‚ ΠΊΡ€Π°Ρ‘Π² содСрТащСго Π±Π»ΠΎΠΊ элСмСнта. (Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‰ΠΈΠΉ Π±Π»ΠΎΠΊ являСтся ΠΏΡ€Π΅Π΄ΠΊΠΎΠΌ, ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ располоТСн элСмСнт.) Если элСмСнт ΠΈΠΌΠ΅Π΅Ρ‚ поля, ΠΎΠ½ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ΡΡ ΠΊ ΡΠΌΠ΅Ρ‰Π΅Π½ΠΈΡŽ. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ устанавливаСт Π½ΠΎΠ²Ρ‹ΠΉ контСкст форматирования Π±Π»ΠΎΠΊΠ° (BFC) для своСго содСрТимого.
  • Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ с Π»ΠΈΠΏΠΊΠΎΠΉ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠ΅ΠΉ β€” это элСмСнт, Ρƒ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ вычислСнного position являСтся sticky. Он рассматриваСтся ΠΊΠ°ΠΊ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Π΄ΠΎ Ρ‚Π΅Ρ… ΠΏΠΎΡ€, ΠΏΠΎΠΊΠ° содСрТащий Π΅Π³ΠΎ Π±Π»ΠΎΠΊ Π½Π΅ пСрСсСчёт ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹ΠΉ ΠΏΠΎΡ€ΠΎΠ³ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, установка top Π² Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠ΅ ΠΎΡ‚ auto) Π²Π½ΡƒΡ‚Ρ€ΠΈ Π΅Π³ΠΎ корня ΠΏΠΎΡ‚ΠΎΠΊΠ° (ΠΈΠ»ΠΈ Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π΅, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΎΠ½ прокручиваСтся), послС Ρ‡Π΅Π³ΠΎ ΠΎΠ½ обрабатываСтся ΠΊΠ°ΠΊ Β«Π·Π°ΡΡ‚Ρ€ΡΠ²ΡˆΠΈΠΉΒ» Π΄ΠΎ Ρ‚Π΅Ρ… ΠΏΠΎΡ€, ΠΏΠΎΠΊΠ° Π½Π΅ встрСтит ΠΏΡ€ΠΎΡ‚ΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½Ρ‹ΠΉ ΠΊΡ€Π°ΠΉ содСрТащСго Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°.

Π’ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ элСмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ height ΠΈ width установлСнныС Π² auto, ΠΈΠΌΠ΅ΡŽΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€, ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ ΠΈΡ… содСрТимому. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, Π½Π΅Π·Π°ΠΌΠ΅Ρ‰Π°Π΅ΠΌΡ‹Π΅, Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ элСмСнты ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΈΠΌΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ Π·Π°ΠΏΠΎΠ»Π½ΠΈΠ»ΠΈ доступноС Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ пространство, ΡƒΠΊΠ°Π·Π°Π² ΠΊΠ°ΠΊ top, Ρ‚Π°ΠΊ ΠΈ bottom, ΠΈ оставляя height Π½Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½Ρ‹ΠΌ (Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ , auto). Ими Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ доступноС Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ пространство, ΡƒΠΊΠ°Π·Π°Π² ΠΊΠ°ΠΊ left (en-US), Ρ‚Π°ΠΊ ΠΈ right, ΠΈ оставляя width ΠΊΠ°ΠΊ auto.

Π—Π° ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡Ρ‚ΠΎ описанного случая (Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… элСмСнтов, Π·Π°ΠΏΠΎΠ»Π½ΡΡŽΡ‰ΠΈΡ… доступноС пространство):

  • Если ΡƒΠΊΠ°Π·Π°Π½Ρ‹ top ΠΈ bottom (тСхничСски, Π½Π΅ auto) β€” ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚ Π±ΡƒΠ΄Π΅Ρ‚ Ρƒ top.
  • Если ΡƒΠΊΠ°Π·Π°Π½Ρ‹ left ΠΈ right: ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚ Π±ΡƒΠ΄Π΅Ρ‚ Ρƒ left, ΠΊΠΎΠ³Π΄Π° direction ltr (английский язык, Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ японский ΠΈ Ρ‚. Π΄.), ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚ Π±ΡƒΠ΄Π΅Ρ‚ Ρƒ right, ΠΊΠΎΠ³Π΄Π° direction являСтся rtl (пСрсидский , Арабский, ΠΈΠ²Ρ€ΠΈΡ‚ ΠΈ Ρ‚. Π΄.).

Бвойство position указываСтся ΠΊΠ°ΠΊ ΠΎΠ΄Π½ΠΎ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ΅ слово, Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠ΅ ΠΈΠ· списка Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ Π½ΠΈΠΆΠ΅.

ЗначСния

static

Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ позволяСт элСмСнту Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π² ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΌ Π΅Π³ΠΎ состоянии, располоТСнном Π½Π° своём мСстС Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅. Бвойства top, right, bottom, left ΠΈ z-index Π½Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΠΊ Π΄Π°Π½Π½ΠΎΠΌΡƒ элСмСнту. Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.

relative

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ позиционируСтся Π² соотвСтствии с Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΌ ΠΏΠΎΡ‚ΠΎΠΊΠΎΠΌ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°, Π° Π·Π°Ρ‚Π΅ΠΌ смСщаСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ сСбя Π½Π° основС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ top, right, bottom ΠΈ left. Π‘ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ Π½Π΅ влияСт Π½Π° ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π»ΡŽΠ±Ρ‹Ρ… Π΄Ρ€ΡƒΠ³ΠΈΡ… элСмСнтов; Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, пространство, Π·Π°Π΄Π°Π½Π½ΠΎΠ΅ для элСмСнта Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ страницы, Ρ‚Π°ΠΊΠΎΠ΅ ΠΆΠ΅, ΠΊΠ°ΠΊ Ссли Π±Ρ‹ позиция Π±Ρ‹Π»Π° static.Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ создаёт Π½ΠΎΠ²Ρ‹ΠΉ контСкст налоТСния, ΠΊΠΎΠ³Π΄Π° Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ z-index Π½Π΅ auto. Π•Π³ΠΎ влияниС Π½Π° элСмСнты table-*-group, table-row, table-column, table-cell ΠΈ table-caption Π½Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΎ.

absolute

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ удаляСтся ΠΈΠ· ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ³ΠΎ ΠΏΠΎΡ‚ΠΎΠΊΠ° Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ², ΠΈ для элСмСнта Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ страницы Π½Π΅ создаётся ΠΏΡ€ΠΎΠ±Π΅Π»Π°. Он располоТСн ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΅Π³ΠΎ блиТайшСго ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡ€Π΅Π΄ΠΊΠ°, Ссли Ρ‚Π°ΠΊΠΎΠ²ΠΎΠΉ имССтся; Π² ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС ΠΎΠ½ помСщаСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ исходного содСрТащСго Π±Π»ΠΎΠΊΠ°. Π•Π³ΠΎ конСчная позиция опрСдСляСтся значСниями top, right, bottom, ΠΈ left.Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ создаёт Π½ΠΎΠ²Ρ‹ΠΉ контСкст налоТСния, ΠΊΠΎΠ³Π΄Π° Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ z-index Π½Π΅ auto. Поля Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… ΠΊΠΎΡ€ΠΎΠ±ΠΎΠΊ Π½Π΅ ΡΠ²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°ΡŽΡ‚ΡΡ с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ полями.

fixed

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ выбиваСтся ΠΈΠ· ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ³ΠΎ ΠΏΠΎΡ‚ΠΎΠΊΠ° Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°, ΠΈ для элСмСнта Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ страницы Π½Π΅ создаётся пространство. Он позиционируСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ исходного содСрТащСго Π±Π»ΠΎΠΊΠ°, установлСнного viewport, Π·Π° ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ случаСв, ΠΊΠΎΠ³Π΄Π° ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π΅Π³ΠΎ ΠΏΡ€Π΅Π΄ΠΊΠΎΠ² ΠΈΠΌΠ΅Π΅Ρ‚ свойство transform, perspective, ΠΈΠ»ΠΈ filter, установлСнноС Π½Π° Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΠΈΠ½ΠΎΠ΅, ΠΊΡ€ΠΎΠΌΠ΅ none (см. CSS Transforms Spec), ΠΈ Π² этом случаС этот ΠΏΡ€Π΅Π΄ΠΎΠΊ Π²Π΅Π΄Ρ‘Ρ‚ сСбя ΠΊΠ°ΠΊ содСрТащий Π±Π»ΠΎΠΊ. (ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ нСсогласованности Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° с perspective ΠΈ filter, ΡΠΏΠΎΡΠΎΠ±ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌΠΈ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΡŽ формирования Π±Π»ΠΎΠΊΠΎΠ².) Π•Π³ΠΎ конСчная позиция опрСдСляСтся значСниями top, right, bottom ΠΈ left.Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ всСгда создаёт Π½ΠΎΠ²Ρ‹ΠΉ контСкст налоТСния. Π’ ΠΏΠ΅Ρ‡Π°Ρ‚Π½Ρ‹Ρ… Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ… элСмСнт помСщаСтся Π² ΠΎΠ΄Π½ΠΎ ΠΈ Ρ‚ΠΎ ΠΆΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ страницС.

sticky

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ позиционируСтся Π² соотвСтствии с Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΌ ΠΏΠΎΡ‚ΠΎΠΊΠΎΠΌ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°, Π° Π·Π°Ρ‚Π΅ΠΌ смСщаСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΅Π³ΠΎ блиТайшСго ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°ΡŽΡ‰Π΅Π³ΠΎ ΠΏΡ€Π΅Π΄ΠΊΠ° ΠΈ содСрТащСго Π±Π»ΠΎΠΊΠ° (блиТайший Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ Π±Π»ΠΎΠΊΠ°), Π²ΠΊΠ»ΡŽΡ‡Π°Ρ элСмСнты, связанныС с Ρ‚Π°Π±Π»ΠΈΡ†Π΅ΠΉ, Π½Π° основС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ top, right, bottom, ΠΈ left. Π‘ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ Π½Π΅ влияСт Π½Π° ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π»ΡŽΠ±Ρ‹Ρ… Π΄Ρ€ΡƒΠ³ΠΈΡ… элСмСнтов.Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ всСгда создаёт Π½ΠΎΠ²Ρ‹ΠΉ контСкст налоТСния. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Π»ΠΈΠΏΠΊΠΈΠΉ элСмСнт Β«ΠΏΡ€ΠΈΠ»ΠΈΠΏΠ°Π΅Ρ‚Β» ΠΊ Π΅Π³ΠΎ Π±Π»ΠΈΠΆΠ°ΠΉΡˆΠ΅ΠΌΡƒ ΠΏΡ€Π΅Π΄ΡˆΠ΅ΡΡ‚Π²Π΅Π½Π½ΠΈΠΊΡƒ, ΠΈΠΌΠ΅ΡŽΡ‰Π΅ΠΌΡƒ Β«ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈΒ» (созданный ΠΏΡ€ΠΈ overflow Ρ€Π°Π²Π½ΠΎΠΌ hidden, scroll, auto ΠΈΠ»ΠΈ overlay), Π΄Π°ΠΆΠ΅ Ссли Ρ‚ΠΎΡ‚ Π½Π΅ являСтся блиТайшим фактичСски ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°ΡŽΡ‰ΠΈΠΌ ΠΏΡ€Π΅Π΄ΠΊΠΎΠΌ. Π­Ρ‚ΠΎ эффСктивно прСпятствуСт Π»ΡŽΠ±ΠΎΠΌΡƒ Β«Π»ΠΈΠΏΠΊΠΎΠΌΡƒΒ» повСдСнию (см. Github issue on W3C CSSWG).

Π€ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ синтаксис

position = 
static | (en-US)
relative | (en-US)
absolute | (en-US)
sticky | (en-US)
fixed | (en-US)
running( )

ΠžΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅

ΠžΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ элСмСнты смСщСны Π½Π° ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½ΡƒΡŽ Π²Π΅Π»ΠΈΡ‡ΠΈΠ½Ρƒ ΠΎΡ‚ ΠΈΡ… ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅, Π½ΠΎ Π±Π΅Π· смСщСния, Π²Π»ΠΈΡΡŽΡ‰Π΅Π³ΠΎ Π½Π° Π΄Ρ€ΡƒΠ³ΠΈΠ΅ элСмСнты. Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Ρ‘Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΊΠ°ΠΊ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ элСмСнты, ΠΊΠ°ΠΊ Ссли Π±Ρ‹ Β«TwoΒ» Π·Π°Π½ΠΈΠΌΠ°Π»ΠΎ пространство своСго ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ³ΠΎ располоТСния.

HTML
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
CSS
.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}
#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}

ΠΠ±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹, располоТСнныС ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΄Ρ€ΡƒΠ³ Π΄Ρ€ΡƒΠ³Π°, ΠΎΡΡ‚Π°ΡŽΡ‚ΡΡ Π² Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠΌ ΠΏΠΎΡ‚ΠΎΠΊΠ΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°. Π’ ΠΏΡ€ΠΎΡ‚ΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ этому, элСмСнт с Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ, выбиваСтся ΠΈΠ· ΠΏΠΎΡ‚ΠΎΠΊΠ°; Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π΄Ρ€ΡƒΠ³ΠΈΠ΅ элСмСнты Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ Π±Π΅Π· ΡƒΡ‡Ρ‘Ρ‚Π° Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹Ρ…. ΠΠ±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΠ΅ΠΌΡ‹ΠΉ элСмСнт располагаСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΅Π³ΠΎ блиТайшСго ΠΏΡ€Π΅Π΄ΠΊΠ° (ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ являСтся static). Если Ρ‚Π°ΠΊΠΎΠ³ΠΎ ΠΏΡ€Π΅Π΄ΠΊΠ° Π½Π΅ сущСствуСт, Ρ‚ΠΎ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΉ элСмСнт позиционируСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ICB (Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΉ содСрТащий Π±Π»ΠΎΠΊ — см. Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ W3C), ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ содСрТит Π±Π»ΠΎΠΊ ΠΊΠΎΡ€Π½Π΅Π²ΠΎΠ³ΠΎ элСмСнта Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°.

ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

<h2>ΠΠ±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅</h2>
<p>Π― Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ элСмСнт уровня Π±Π»ΠΎΠΊΠ°. Мои сосСди сидят Π½Π° Π½ΠΎΠ²Ρ‹Ρ… строках Π½ΠΈΠΆΠ΅ мСня.</p>
<p>По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ моя ΡˆΠΈΡ€ΠΈΠ½Π° 100% ΡˆΠΈΡ€ΠΈΠ½Ρ‹ родитСля ΠΈ я достиг Ρ‚Π°ΠΊΠΎΠ³ΠΎ ΠΆΠ΅ высокого уровня, ΠΊΠ°ΠΊ ΠΈ вСсь Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚. Наша общая ΡˆΠΈΡ€ΠΈΠ½Π° ΠΈ высота - это наш ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚+Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅+ΡˆΠΈΡ€ΠΈΠ½Π°/высота Π³Ρ€Π°Π½ΠΈΡ†Ρ‹.</p>
<p>ΠœΡ‹ ΠΎΡ‚Π΄Π΅Π»Π΅Π½Ρ‹ нашСй ΠΌΠ°Ρ€ΠΆΠΎΠΉ. Из-Π·Π° Ρ€Π°Π·Π²Π°Π»Π° края ΠΌΡ‹ ΠΎΡ‚Π΄Π΅Π»Π΅Π½Ρ‹ ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· Π½Π°ΡˆΠΈΡ… ΠΏΠΎΠ»Π΅ΠΉ, Π° Π½Π΅ ΠΎΠ±ΠΎΠΈΡ….</p>
<p>встроСнныС элСмСнты <span>ΠΊΠ°ΠΊ этот</span> ΠΈ <span>Π²ΠΎΡ‚ этот</span> Π±ΡƒΠ΄ΡƒΡ‚ ΡΠΈΠ΄Π΅Ρ‚ΡŒ Π² ΠΎΠ΄Π½ΠΎΠΉ строкС Π΄Ρ€ΡƒΠ³ с Π΄Ρ€ΡƒΠ³ΠΎΠΌ ΠΈ сосСдними тСкстовыми ΡƒΠ·Π»Π°ΠΌΠΈ, Ссли Π² Π½Π΅ΠΉ Π΅ΡΡ‚ΡŒ мСсто.  ΠŸΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ встроСнных элСмСнтов <span>ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Ρ‘Ρ‚ Π½Π° Π½ΠΎΠ²ΡƒΡŽ строку, Ссли это Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, - ΠΊΠ°ΠΊ содСрТимоС этого тСкста</span>, ΠΈΠ»ΠΈ просто ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Ρ‘Ρ‚ ΠΊ Π½ΠΎΠ²ΠΎΠΉ строкС, Π° Ссли Π½Π΅Ρ‚, Ρ‚ΠΎ встанСт, ΠΊΠ°ΠΊ это ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅:<img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
body {
  width: 500px;
  margin: 0 auto;
}
p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}
span {
  background: red;
  border: 1px solid black;
}
.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}

ЀиксированноС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅

ЀиксированноС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠΌΡƒ, Π·Π° ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π±Π»ΠΎΠΊ, содСрТащий элСмСнт, являСтся Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΌ содСрТащим Π±Π»ΠΎΠΊΠΎΠΌ, установлСнным Π² ΠΎΠΊΠ½Π΅ просмотра, Ссли Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρƒ ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ ΠΏΡ€Π΅Π΄ΠΊΠ° Π½Π΅ Π±Ρ‹Π»ΠΎ transform, perspective, ΠΈΠ»ΠΈ свойства filter, ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠ΅ ΠΎΡ‚ none (см. CSS Transforms Spec), ΠΈΠ·-Π·Π° Ρ‡Π΅Π³ΠΎ этот ΠΏΡ€Π΅Π΄ΠΎΠΊ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ мСсто элСмСнтов, содСрТащих Π±Π»ΠΎΠΊ. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для создания Β«ΠΏΠ»Π°Π²Π°ΡŽΡ‰Π΅Π³ΠΎΒ» элСмСнта, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ остаётся Π² Ρ‚ΠΎΠΌ ΠΆΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ нСзависимо ΠΎΡ‚ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ. Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Ρ‘Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΎΠΊΠ½ΠΎ c id="one" фиксируСтся Π² 80 пиксСлях ΠΎΡ‚ Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части страницы ΠΈ Π² 10 пиксСлях слСва. Π”Π°ΠΆΠ΅ послС ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ΠΎΠ½ΠΎ остаётся Π² Ρ‚ΠΎΠΌ ΠΆΠ΅ мСстС ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΠΊΠ½Π° просмотра.

HTML
<div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
    Sed tempor nisl a lorem consequat, id maximus erat aliquet.  Sed sagittis porta libero sed condimentum.
    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Nam congue tortor eget pulvinar lobortis.
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim.
    Sed velit augue, pretium a sem aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id maximus erat aliquet.
    Sed sagittis porta libero sed condimentum. Aliquam finibus lectus nec ante congue rutrum.
    Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. </p>
  <div>One</div>
</div>
CSS
.box {
  background: red;
  width: 100px;
  height: 100px;
  margin: 20px;
  color: white;
}
#one {
  position: fixed;
  top: 80px;
  left: 10px;
}
.outer {
  width: 500px;
  height: 500px;
  overflow: scroll;
  padding-left: 150px;
}

Π›ΠΈΠΏΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅

Π›ΠΈΠΏΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°ΡΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ Π³ΠΈΠ±Ρ€ΠΈΠ΄ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΈ фиксированного позиционирования. Π›ΠΈΠΏΠΊΠΈΠΉ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ элСмСнт обрабатываСтся ΠΊΠ°ΠΊ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Π΄ΠΎ Ρ‚Π΅Ρ… ΠΏΠΎΡ€, ΠΏΠΎΠΊΠ° ΠΎΠ½ Π½Π΅ пСрСсСчёт Π·Π°Π΄Π°Π½Π½Ρ‹ΠΉ ΠΏΠΎΡ€ΠΎΠ³, послС Ρ‡Π΅Π³ΠΎ ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ ΡΡ‡ΠΈΡ‚Π°Ρ‚ΡŒΡΡ фиксированным, ΠΏΠΎΠΊΠ° Π½Π΅ достигнСт Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ Π΅Π³ΠΎ родитСля. НапримСр…

#one { position: sticky; top: 10px; }

… ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΠ΅Ρ‚ элСмСнт с id «one» ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΄ΠΎ Ρ‚Π΅Ρ… ΠΏΠΎΡ€, ΠΏΠΎΠΊΠ° Π²ΠΈΠ΄ΠΎΠ²ΠΎΠΉ экран Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡Π΅Π½ Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ элСмСнт Π±Ρ‹Π» мСньшС 10 пиксСлСй ΠΎΡ‚ Π²Π΅Ρ€ΡˆΠΈΠ½Ρ‹. Помимо этого ΠΏΠΎΡ€ΠΎΠ³Π° элСмСнт Π±ΡƒΠ΄Π΅Ρ‚ зафиксирован Π½Π° 10 пиксСлСй свСрху.

Π’ΠΈΠΏΠΈΡ‡Π½ΠΎΠ΅ использованиС для Π»ΠΈΠΏΠΊΠΎΠ³ΠΎ позиционирования — для Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² Π² Π°Π»Ρ„Π°Π²ΠΈΡ‚Π½ΠΎΠΌ спискС. Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Β«BΒ» появится Ρ‡ΡƒΡ‚ΡŒ Π½ΠΈΠΆΠ΅ элСмСнтов, Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ…ΡΡ с Β«AΒ», ΠΏΠΎΠΊΠ° ΠΎΠ½ΠΈ Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Ρ‚ΡŒΡΡ Π·Π° ΠΊΠ°Π΄Ρ€ΠΎΠΌ. ВмСсто Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΊΠΎΠ»ΡŒΠ·ΠΈΡ‚ΡŒ Π·Π° ΠΊΠ°Π΄Ρ€ΠΎΠΌ с ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΉ Ρ‡Π°ΡΡ‚ΡŒΡŽ содСрТимого, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Β«BΒ» Π·Π°Ρ‚Π΅ΠΌ останСтся фиксированным Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части ΠΎΠΊΠ½Π° просмотра, ΠΏΠΎΠΊΠ° всС элСмСнты Β«BΒ» Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Ρ‚ΡŒΡΡ Π½Π° экранС, ΠΈ Π² этот ΠΌΠΎΠΌΠ΅Π½Ρ‚ ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°ΠΊΡ€Ρ‹Ρ‚ Β«CΒ», Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈ Ρ‚. Π΄.

Π’Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΏΠΎΡ€ΠΎΠ³ с ΠΏΠΎ ΠΊΡ€Π°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅Ρ€Π΅ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· top, right, bottom, ΠΈΠ»ΠΈ left (en-US) для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π»ΠΈΠΏΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΌΠΎΠ³Π»ΠΎ вСсти сСбя Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ оТидалось. Π’ ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ Π½Π΅ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠΌ ΠΎΡ‚ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ позиционирования.

HTML
<div>
  <dl>
    <dt>A</dt>
    <dd>Andrew W.K.</dd>
    <dd>Apparat</dd>
    <dd>Arcade Fire</dd>
    <dd>At The Drive-In</dd>
    <dd>Aziz Ansari</dd>
  </dl>
  <dl>
    <dt>C</dt>
    <dd>Chromeo</dd>
    <dd>Common</dd>
    <dd>Converge</dd>
    <dd>Crystal Castles</dd>
    <dd>Cursive</dd>
  </dl>
  <dl>
    <dt>E</dt>
    <dd>Explosions In The Sky</dd>
  </dl>
  <dl>
    <dt>T</dt>
    <dd>Ted Leo & The Pharmacists</dd>
    <dd>T-Pain</dd>
    <dd>Thrice</dd>
    <dd>TV On The Radio</dd>
    <dd>Two Gallants</dd>
  </dl>
</div>
CSS
* {
  box-sizing: border-box;
}
dl {
  margin: 0;
  padding: 24px 0 0 0;
}
dt {
  background: #B8C1C8;
  border-bottom: 1px solid #989EA4;
  border-top: 1px solid #717D85;
  color: #FFF;
  font: bold 18px/21px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 2px 0 0 12px;
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
}
dd {
  font: bold 20px/45px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0 0 0 12px;
  white-space: nowrap;
}
dd + dd {
  border-top: 1px solid #CCC;
}

Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ элСмСнты, располоТСнныС с absolute ΠΈΠ»ΠΈ fixed Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ, Π½Π΅ Π·Π°Ρ‚Π΅Π½ΡΡŽΡ‚ Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΏΡ€ΠΈ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠΈ страницы, увСличивая Ρ€Π°Π·ΠΌΠ΅Ρ€ тСкста.

  • MDN Understanding WCAG, Guideline 1.4 explanations
  • Visual Presentation: Understanding SC 1.4.8 | Understanding WCAG 2.0

ΠŸΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΈ Π΄ΠΎΡΡ‚ΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ, содСрТащиС fixed ΠΈΠ»ΠΈ sticky ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, ΠΌΠΎΠ³ΡƒΡ‚ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒΡŽ ΠΈ Π΄ΠΎΡΡ‚ΡƒΠΏΠ½ΠΎΡΡ‚ΡŒΡŽ. Когда ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅Ρ‚ страницу, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠ΅Ρ€Π΅Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ sticky ΠΈΠ»ΠΈ fixed ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π² Π½ΠΎΠ²ΠΎΠΌ мСстС. Π’ зависимости ΠΎΡ‚ содСрТимого, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠ΅Ρ€Π΅Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ, ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΈ скорости ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ устройства, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π΅ ΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒΡΡ с пСрСрисовкой со ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒΡŽ 60 ΠΊΠ°Π΄Ρ€ΠΎΠ² Π² сСкунду, Ρ‡Ρ‚ΠΎ Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с Π΄ΠΎΡΡ‚ΡƒΠΏΠ½ΠΎΡΡ‚ΡŒΡŽ для людСй с Ρ‡ΡƒΠ²ΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒΡŽ ΠΈ Ρ€Π°Π·Π΄Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ для всСх. Одним ΠΈΠ· Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ являСтся Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ will-change: transform ΠΊ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌ элСмСнтам для Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ элСмСнта Π½Π° Π΅Π³ΠΎ собствСнном ΡƒΡ€ΠΎΠ²Π½Π΅, ΠΏΠΎΠ²Ρ‹ΡˆΠ΅Π½ΠΈΡ скорости пСрСрисовки ΠΈ, ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, ΠΏΠΎΠ²Ρ‹ΡˆΠ΅Π½ΠΈΡ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ ΠΈ доступности.

BCD tables only load in the browser

with JavaScript enabled. Enable JavaScript to view data.

Last modified: , by MDN contributors

Π˜Π½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ инструмСнт для Π³Π΅Π½Π΅Ρ€Π°Ρ†ΠΈΠΈ вСрстки основанной Π½Π° CSS Flexbox

Для запуска этого прилоТСния Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ JavaScript.

Π Π°Π΄ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π’Π°ΠΌ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ инструмСнт для Π³Π΅Π½Π΅Ρ€Π°Ρ†ΠΈΠΈ вСрстки основанной Π½Π° Π³ΠΈΠ±ΠΊΠΈΡ… ΠΌΠ°ΠΊΠ΅Ρ‚Π°Ρ… сСтки (CSS Flexbox Layout), ΠΎΠ½ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ наглядно произвСсти вСрстку Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° для Π’Π°ΡˆΠ΅Π³ΠΎ сайта. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π²Ρ‹ смоТСтС максимально быстро ΠΎΠ±ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ этой Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ вСрстки, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ встроСнныС подсказки для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ CSS свойства, ΠΈΠ»ΠΈ ΠΏΡ€ΠΈ нСобходимости ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π² справочник CSS свойств для получСния Π±ΠΎΠ»Π΅Π΅ Π΄Π΅Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΌ свойствС.

Если Π’Ρ‹ Ρ€Π°Π½Π΅Π΅ Π½Π΅ ΡΡ‚Π°Π»ΠΊΠΈΠ²Π°Π»ΠΈΡΡŒ с модСлью построСния ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² страниц Flexbox, Π½ΠΎ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π±ΠΎΠ»Π΅Π΅ Π΄Π΅Ρ‚Π°Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ с Π½Π΅ΠΉ, Ρ‚ΠΎ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎΠ± этом Π²Ρ‹ смоТСтС ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… ΡΡ‚Π°Ρ‚ΡŒΡΡ… ΡƒΡ‡Π΅Π±Π½ΠΈΠΊΠ°, посвящСнному CSS:

  • Π‘Ρ‚Π°Ρ‚ΡŒΡ ‘ВСрстка ΠΏΠΎ Flexbox (Ρ€Π°Π±ΠΎΡ‚Π° с ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°ΠΌΠΈ)’
  • Π‘Ρ‚Π°Ρ‚ΡŒΡ ‘ВСрстка ΠΏΠΎ Flexbox (Ρ€Π°Π±ΠΎΡ‚Π° с элСмСнтами)’

Настройки ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°

height ? ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ высоту ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°

display ? ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ ΠΊΠ°ΠΊ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ элСмСнт:

  • flex — элСмСнт отобраТаСтся ΠΊΠ°ΠΊ Π±Π»ΠΎΡ‡Π½Ρ‹ΠΉ флСкс ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€.
  • inline-flex — элСмСнт Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ ΠΊΠ°ΠΊ строчный флСкс ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€.
flexinline-flex

flex-direction ? ΠŸΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ‚ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅, Π² соотвСтствии с ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ флСкс элСмСнты Π²Π½ΡƒΡ‚Ρ€ΠΈ флСкс ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°:

  • row — флСкс элСмСнты ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎ, Π² Π²ΠΈΠ΄Π΅ строки. Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
  • row-reverse — флСкс элСмСнты ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎ, Π² Π²ΠΈΠ΄Π΅ строки ΠΏΠΎ Π°Π½Π°Π»ΠΎΠ³ΠΈΠΈ со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ row, Π½ΠΎ Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ строки ΠΈΠ΄Ρ‘Ρ‚ Π² ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠΌ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ.
  • column — флСкс элСмСнты ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎ ΠΊΠ°ΠΊ ΠΊΠΎΠ»ΠΎΠ½Π½Ρ‹. Π€ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ»ΠΎΠ½Π½Ρ‹ осущСствляСтся свСрху Π²Π½ΠΈΠ·.
  • column-reverse — флСкс элСмСнты ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎ ΠΊΠ°ΠΊ ΠΊΠΎΠ»ΠΎΠ½Π½Ρ‹ ΠΏΠΎ Π°Π½Π°Π»ΠΎΠ³ΠΈΠΈ со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ column, Π½ΠΎ Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ»ΠΎΠ½Π½Ρ‹ ΠΈΠ΄Ρ‘Ρ‚ Π² ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠΌ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ (снизу Π²Π²Π΅Ρ€Ρ…).
rowrow-reversecolumncolumn-reverse

flex-wrap ? ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚, Π±ΡƒΠ΄Π΅Ρ‚ Π»ΠΈ флСкс ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ однострочным, ΠΈΠ»ΠΈ многострочным:

  • nowrap — Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ флСкс элСмСнты Π²Ρ‹ΡΡ‚Ρ€Π°ΠΈΠ²Π°ΡŽΡ‚ΡΡ Π² ΠΎΠ΄Π½Ρƒ строку. Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
  • wrap — Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ флСкс элСмСнты Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ Π² нСсколько Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Ρ… рядов (Π² случаС пСрСполнСния).
  • wrap-reverse — Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ флСкс элСмСнты Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ Π² нСсколько Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Ρ… рядов (Π² случаС пСрСполнСния) ΠΏΠΎ Π°Π½Π°Π»ΠΎΠ³ΠΈΠΈ со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ wrap, Π½ΠΎ Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ строк ΠΈΠ΄Ρ‘Ρ‚ Π² ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠΌ порядкС.
nowrapwrapwrap-reverse

align-content ? ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ ΠΊΠ°ΠΊ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ распрСдСляСт пространство ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΈ Π²ΠΎΠΊΡ€ΡƒΠ³ флСкс элСмСнтов вдоль ΠΏΠΎΠΏΠ΅Ρ€Π΅Ρ‡Π½ΠΎΠΉ оси ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° (Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎ):

  • stretch — строки Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° Ρ€Π°Π²Π½ΠΎΠΌΠ΅Ρ€Π½ΠΎ Ρ€Π°ΡΡ‚ΡΠ³ΠΈΠ²Π°ΡŽΡ‚ΡΡ, заполняя свободноС пространство. Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
  • flex-start — строки Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ Π² Π½Π°Ρ‡Π°Π»Π΅ ΠΏΠΎΠΏΠ΅Ρ€Π΅Ρ‡Π½ΠΎΠΉ оси флСкс ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.
  • flex-end — строки Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ Π² ΠΊΠΎΠ½Ρ†Π΅ ΠΏΠΎΠΏΠ΅Ρ€Π΅Ρ‡Π½ΠΎΠΉ оси флСкс ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.
  • center — строки Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ ΠΏΠΎ Π΅Π³ΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ.
  • space-between — строки Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° Ρ€Π°Π²Π½ΠΎΠΌΠ΅Ρ€Π½ΠΎ Ρ€Π°ΡΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ΡΡ, ΠΏΡ€ΠΈ этом пСрвая строка ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΡŽΡ‚ΡΡ Π² Π½Π°Ρ‡Π°Π»Π΅ ΠΏΠΎΠΏΠ΅Ρ€Π΅Ρ‡Π½ΠΎΠΉ оси, Π° послСдняя строка позиционируСтся с ΠΊΠΎΠ½Ρ†Π° ΠΏΠΎΠΏΠ΅Ρ€Π΅Ρ‡Π½ΠΎΠΉ оси.
  • space-around — строки Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° Ρ€Π°Π²Π½ΠΎΠΌΠ΅Ρ€Π½ΠΎ Ρ€Π°ΡΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ΡΡ, ΠΏΡ€ΠΈ этом пространство ΠΌΠ΅ΠΆΠ΄Ρƒ двумя сосСдними строками ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ, Π° пустоС пространство ΠΏΠ΅Ρ€Π΅Π΄ ΠΏΠ΅Ρ€Π²ΠΎΠΉ строкой ΠΈ послС послСднСй строки Ρ€Π°Π²Π½ΠΎ ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Π΅ ΠΎΡ‚ пространства ΠΌΠ΅ΠΆΠ΄Ρƒ сосСдними строками.
  • space-evenly — Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Π΅Ρ‚ Ρ‡Π΅Ρ‚Π½Ρ‹ΠΉ ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΠΊ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ строкой, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ ΠΈ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΡ€Π°ΠΉ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.
stretchflex-startflex-endcenterspace-betweenspace-aroundspace-evenly

justify-content ? ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ ΠΊΠ°ΠΊ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ распрСдСляСт пространство ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΈ Π²ΠΎΠΊΡ€ΡƒΠ³ флСкс элСмСнтов вдоль Π³Π»Π°Π²Π½ΠΎΠΉ оси ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° (Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎ):

  • flex-start — элСмСнты ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΡŽΡ‚ΡΡ Π² Π½Π°Ρ‡Π°Π»Π΅ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°. Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
  • flex-end — элСмСнты ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΡŽΡ‚ΡΡ Π² ΠΊΠΎΠ½Ρ†Π΅ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.
  • center — элСмСнты ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΡŽΡ‚ΡΡ Π² Ρ†Π΅Π½Ρ‚Ρ€Π΅ строки ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.
  • space-between — элСмСнты Ρ€Π°Π²Π½ΠΎΠΌΠ΅Ρ€Π½ΠΎ Ρ€Π°ΡΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ΡΡ ΠΏΠΎ всСй строкС, ΠΏΡ€ΠΈ этом ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ элСмСнт ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΡŽΡ‚ΡΡ Π² Π½Π°Ρ‡Π°Π»Π΅ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°, Π° послСдний элСмСнт позиционируСтся Π² ΠΊΠΎΠ½Ρ†Π΅ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.
  • space-around — элСмСнты Ρ€Π°Π²Π½ΠΎΠΌΠ΅Ρ€Π½ΠΎ Ρ€Π°ΡΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ΡΡ ΠΏΠΎ всСй строкС, ΠΏΡ€ΠΈ этом пустоС пространство ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ ΠΈ послС послСднСго элСмСнта Ρ€Π°Π²Π½ΠΎ ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Π΅ ΠΌΠ΅ΠΆΠ΄Ρƒ сосСдними элСмСнтами Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π΅.
  • space-evenly — Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Π΅Ρ‚ Ρ‡Π΅Ρ‚Π½Ρ‹ΠΉ ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΠΊ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΌ элСмСнтом, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΈΠΉ ΠΈ дальний ΠΊΠΎΠ½Π΅Ρ† ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.
flex-startflex-endcenterspace-betweenspace-aroundspace-evenly

align-items ? ΠŸΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ всСх элСмСнтов Π²Π½ΡƒΡ‚Ρ€ΠΈ флСкс ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° вдоль ΠΏΠΎΠΏΠ΅Ρ€Π΅Ρ‡Π½ΠΎΠΉ оси:

  • stretch — флСкс элСмСнты Ρ€Π°ΡΡ‚ΡΠ³ΠΈΠ²Π°ΡŽΡ‚ΡΡ ΠΏΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° вдоль ΠΏΠΎΠΏΠ΅Ρ€Π΅Ρ‡Π½ΠΎΠΉ оси. Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
  • center — элСмСнты Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ строки ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° (сСрСдина ΠΏΠΎΠΏΠ΅Ρ€Π΅Ρ‡Π½ΠΎΠΉ оси, ΠΈΠ»ΠΈ оси столбца).
  • flex-start — элСмСнты Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ Π² Π½Π°Ρ‡Π°Π»Π΅ строки ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.
  • flex-end — элСмСнты Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ Π² ΠΊΠΎΠ½Ρ†Π΅ строки ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.
  • baseline — элСмСнты Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠ³Π°ΡŽΡ‚ΡΡ ΠΏΠΎ ΠΈΡ… Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ.
stretchcenterflex-startflex-endbaseline

Настройки элСмСнтов

count?ΠšΠΎΠ»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎ Π±Π»ΠΎΠΊΠΎΠ² Π²Π½ΡƒΡ‚Ρ€ΠΈ флСкс ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.

width?Π¨ΠΈΡ€ΠΈΠ½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° Π²Π½ΡƒΡ‚Ρ€ΠΈ флСкс ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.

height?Высота ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° Π²Π½ΡƒΡ‚Ρ€ΠΈ флСкс ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.

margin?Π’Π½Π΅ΡˆΠ½ΠΈΠ΅ отступы ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° Π²Π½ΡƒΡ‚Ρ€ΠΈ флСкс ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.

padding?Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ отступы ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° Π²Π½ΡƒΡ‚Ρ€ΠΈ флСкс ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.

Настройка элСмСнта

Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ любой Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ элСмСнт для настройки…

width ? Π¨ΠΈΡ€ΠΈΠ½Π° Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° Π²Π½ΡƒΡ‚Ρ€ΠΈ флСкс ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.

height ? Высота Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° Π²Π½ΡƒΡ‚Ρ€ΠΈ флСкс ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.

margin ? УстанавливаСт Π²Π΅Π»ΠΈΡ‡ΠΈΠ½Ρƒ внСшнСго отступа ΠΎΡ‚ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ края элСмСнта Π² ΠΎΠ΄Π½ΠΎΠΌ объявлСнии.

padding ? УстанавливаСт Π²Π΅Π»ΠΈΡ‡ΠΈΠ½Ρƒ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅Π³ΠΎ отступа ΠΎΡ‚ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ края элСмСнта Π² ΠΎΠ΄Π½ΠΎΠΌ объявлСнии.

order ? УстанавливаСт порядок слСдования флСкс элСмСнта Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π΅ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ….
Если Π²Ρ‹ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ для ΠΎΠ΄Π½ΠΎΠ³ΠΎ флСкс элСмСнта Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π΅, Ρ‚ΠΎ это Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΡΠ²Π»ΡΡ‚ΡŒΡΡ Π΅Π³ΠΎ порядковым Π½ΠΎΠΌΠ΅Ρ€ΠΎΠΌ, Π° ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° «Π²Π΅Ρ» Π΅Π³ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ ΠΏΠΎ ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡŽ ΠΊ Π΄Ρ€ΡƒΠ³ΠΈΠΌ элСмСнтам. ДопускаСтся ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ (Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ -1, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, смСщаСт элСмСнт ΠΊ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°). Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ 0.

align-self ? Π—Π°Π΄Π°Π΅Ρ‚ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… элСмСнтов строки Π²Π½ΡƒΡ‚Ρ€ΠΈ флСкс ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°. Бвойство пСрСопрСдСляСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ выравнивания, Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ для ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° свойством align-items ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΌΡƒ элСмСнту. Π’ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ значСния:

  • auto — элСмСнт наслСдуСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π΅Π³ΠΎ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°. Если Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ значСния, Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, устанавливаСтся, ΠΊΠ°ΠΊ stretch. Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
  • stretch — элСмСнт растягиваСтся ΠΏΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ строки ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° вдоль ΠΏΠΎΠΏΠ΅Ρ€Π΅Ρ‡Π½ΠΎΠΉ оси.
  • center — элСмСнт располагаСтся ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ строки ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° (сСрСдина ΠΏΠΎΠΏΠ΅Ρ€Π΅Ρ‡Π½ΠΎΠΉ оси).
  • flex-start — элСмСнт располагаСтся Π² Π½Π°Ρ‡Π°Π»Π΅ строки ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° (Π½Π°Ρ‡Π°Π»ΠΎ ΠΏΠΎΠΏΠ΅Ρ€Π΅Ρ‡Π½ΠΎΠΉ оси).
  • flex-end — элСмСнт располагаСтся Π² ΠΊΠΎΠ½Ρ†Π΅ строки ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° (ΠΊΠΎΠ½Π΅Ρ† ΠΏΠΎΠΏΠ΅Ρ€Π΅Ρ‡Π½ΠΎΠΉ оси).
  • baseline — элСмСнт распологаСтся ΠΏΠΎ Π΅Π³ΠΎ Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ строки ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.
autostretchcenterflex-startflex-endbaseline

flex-grow ? Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π½Π° сколько элСмСнт ΠΌΠΎΠΆΠ΅Ρ‚ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒΡΡ ΠΏΠΎ ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡŽ ΠΊ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹ΠΌ флСкс элСмСнтам Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π΅.
НапримСр, Ссли Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π΅ всС Π±Π»ΠΎΠΊΠΈ ΠΈΠΌΠ΅ΡŽΡ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства Ρ€Π°Π²Π½ΠΎΠ΅ 1, Π° ΠΎΠ΄ΠΈΠ½ Π±Π»ΠΎΠΊ ΠΈΠΌΠ΅Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 2, Ρ‚ΠΎ это ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ Π² Π΄Π²Π° Ρ€Π°Π·Π° большС ΠΏΠΎ ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡŽ ΠΊ Π½ΠΈΠΌ (ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅). Если ΠΌΡ‹ ΠΏΡ€ΠΈ этом Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Π±Π»ΠΎΠΊ, Ρ‚ΠΎ ΠΏΡ€ΠΈ этом ΡˆΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° Π½Π΅ измСнится, Π° Π±Π»ΠΎΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΠΌΠ΅Π» Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 2 ΠΏΠΎ ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ останСтся Π² Π΄Π²Π° Ρ€Π°Π·Π° большС ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ…, ΠΏΡ€ΠΈ этом ΡˆΠΈΡ€ΠΈΠ½Π° всСх Π±Π»ΠΎΠΊΠΎΠ² ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡΡ. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ 0.

flex-shrink ? ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚, ΠΊΠ°ΠΊ элСмСнт Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΆΠΈΠΌΠ°Ρ‚ΡŒΡΡ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… флСкс элСмСнтов Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π΅ (ΠΏΡ€ΠΈ нСдостаткС свободного пространства). Если ΠΌΡ‹ устанавливаСм Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ€Π°Π²Π½ΠΎΠ΅ 0, Ρ‚ΠΎ ΠΌΡ‹ Π·Π°ΠΏΡ€Π΅Ρ‰Π°Π΅ΠΌ ΡΠΆΠΈΠΌΠ°Ρ‚ΡŒΡΡ элСмСнту Π΄ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² мСньшС Ρ‡Π΅ΠΌ Π΅Π³ΠΎ базовая ΡˆΠΈΡ€ΠΈΠ½Π°. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ 1.

flex-basis ? ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ для флСкс элСмСнта, установлСнный ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΏΠ΅Ρ€Π΅Π΄ распрСдСлСниСм пространства Π²Π½ΡƒΡ‚Ρ€ΠΈ флСкс ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°. ДопускаСтся использованиС ΠΊΠ°ΠΊ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ (px, em, pt ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅), Ρ‚Π°ΠΊ ΠΈ значСния Π² ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π°Ρ…. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ auto (Ссли элСмСнт Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, Ρ‚ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹ΡΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒΡΡ Π² зависимости ΠΎΡ‚ содСрТания элСмСнта).

flex ? ЯвляСтся ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΎΠΉ записью для свойств flex-grow, flex-shrink ΠΈ flex-basis.
Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ 0 1 auto.

HTML code:

CSS code:

HTML Builder | HTML ΠšΠΎΠ½ΡΡ‚Ρ€ΡƒΠΊΡ‚ΠΎΡ€ сайтов

Create HTML websites with the best free wysiwyg HTML Website Builder and Page Editor. Start with one of 7000+ free HTML Templates.
Mobile-friendly. No coding. Generate HTML Website.

Download now

Use HTML creator to buildΒ a website with no coding

Simple drag-and-drop HTML editor lets you implement any ideas for HTML Templates. UseΒ responsive image gallery, video backgrounds, parallax,Β  hamburger menu, sticky header and animation to bring sites to life.

all features

Your browser does not support HTML5 video.

What Is


Web Design 3.0?

Learn how to build the most trendy HTML websites on the Web. No need to hire professional web designers with the Nicepage HTML generator.

Open the secret

All You Need to create Sites with HTML Generator

Our HTML maker provides integration with Social Media, Google Maps, Google Fonts, Icons, YouTube, Contact Forms, and many other built-in powerful features. Use our WYSIWYG editor and code generator to launch websites and customize easily with visual drag-and-drop builder.

1000s of

Web Templates

Select from a huge variety of designer-made templates.

Easy Drag-n-Drop

Customize anything on your website with simple dragging.

No Coding

Visually add, edit, move, and modify with no coding!

Mobile-Friendly

Build websites that look great on all modern devices.

See all features

Meet our best multi-purpose templatesΒ hand-picked by professional designers. All page templates look great on all modern devices.Β Select any template and customize it with the powerful webpage editor.

Get templates

Perfect Results With HTML Maker On Any Device

Web pages are absolutely mobile-friendly, retina-ready, and look perfect in all device views. Generated websites have a mobile-optimized version looking beautiful on smaller screens. You can easily customize all your desktop, laptop, and phone views separately.

Nicepage is a must-have tool for any HTML user. It expands any HTML website adding a designer touch to it. It is easy-to-use, and works fast.

Eric Smith

Web developer and joomler

More happy customers

Create modern HTML websites and templates to get more customers

Companies That Use Our HTML Website Builder:

Free HTML Designer

Download the best free HTML creator for Windows or Mac OS today. Generate mobile-friendly websites that look great on all modern devices and browsers. Further, customize your designs with the powerful drag-and-drop editor with no coding.

Download Now

Best Free Generated HTML Templates

Choose from over 7000 HTML templates for business, medicine, portfolio, technology, education, travel and other trending categories. All templates created with HTML designer are updated daily and available for free.

Name

Thank you! Your message has been sent.

Unable to send your message. Please fix errors then try again.

  • ΠŸΡ€ΠΈΡ‡ΡƒΠ΄Π»ΠΈΠ²Ρ‹ΠΉ Π”ΠΈΠ·Π°ΠΉΠ½

  • ΠŸΡ€ΠΈΠ³ΠΎΡ‚ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ Вкусной Π•Π΄Ρ‹ Html Generator Online

  • АрхитСктура И Π”ΠΈΠ·Π°ΠΉΠ½

  • ЀитнСс-Π’Ρ€Π΅Π½ΠΈΡ€ΠΎΠ²ΠΊΠΈ И ΠŸΠΈΡ‚Π°Π½ΠΈΠ΅ Html Page Maker

  • Π›ΡƒΡ‡ΡˆΠΈΠ΅ Онлайн-ΠšΡƒΡ€ΡΡ‹

  • ΠœΡ‹ Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ Π›ΡƒΡ‡ΡˆΠΈΠ΅ Π‘Π°ΠΉΡ‚Ρ‹ Html Page Builder

  • Π‘Ρ€Π΅Π½Π΄Ρ‹ Π›ΡƒΡ‡ΡˆΠΈΠ΅ ΠŸΠ°Ρ€Ρ‚Π½Π΅Ρ€Ρ‹

  • О НашСм ВворчСском БоюзС Html Website Creator

  • ΠœΡƒΠ·Ρ‹ΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ ΠœΠ΅Ρ€ΠΎΠΏΡ€ΠΈΡΡ‚ΠΈΡ

  • ΠŸΡ€ΠΈΡΠΎΠ΅Π΄ΠΈΠ½ΡΠΉΡ‚Π΅ΡΡŒ К ΠΠ°ΡˆΠ΅ΠΌΡƒ Активному БообщСству Html Generator

  • БСсплатноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ΅ обСспСчСниС для создания Π²Π΅Π±-сайтов

    Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

  • Π‘Π΅ΡΠΏΡ€ΠΎΠΈΠ³Ρ€Ρ‹ΡˆΠ½Π°Ρ БизнСс-БтратСгия

  • ΠŸΠΎΠ·Π½Π°ΠΊΠΎΠΌΡŒΡ‚Π΅ΡΡŒ Π‘ Π›ΡƒΡ‡ΡˆΠΈΠΌΠΈ Π‘ΠΎΡ‚Ρ€ΡƒΠ΄Π½ΠΈΠΊΠ°ΠΌΠΈ Build Html Website

  • Π˜Π½Π½ΠΎΠ²Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ ΠšΠΎΠ½ΡΡ‚Ρ€ΡƒΠΊΡ‚ΠΎΡ€ Π‘Π°ΠΉΡ‚ΠΎΠ²

  • ВворчСская Бтудия Π˜Π½Π½ΠΎΠ²Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ Π˜ΡΠΊΡƒΡΡΡ‚Π²Π° Creator Html

  • БыстроС Π Π°Π·Π²ΠΈΡ‚ΠΈΠ΅

  • Бостав ΠžΠ²ΠΎΡ‰Π΅ΠΉ Online Html Page Builder

  • Dj Night Π‘Π°ΠΉΡ‚

  • ΠœΡƒΠ·Π΅ΠΉ Π˜ΡΠΊΡƒΡΡΡ‚Π²Π° Html Website Maker

  • ΠΠ°Ρ‚ΡƒΡ€Π°Π»ΡŒΠ½Π°Ρ Здоровая ΠŸΠΈΡ‰Π°

  • Π‘Π»ΠΎΠ³ О Π”ΠΎΠΌΠ°ΡˆΠ½ΠΈΡ… Π–ΠΈΠ²ΠΎΡ‚Π½Ρ‹Ρ… Html Site Builder

  • Бамая большая коллСкция шаблонов

    Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

  • Π¨Π΅ΡΡ‚ΡŒ Π›ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠΎΠ²

  • Π˜Π½Ρ‚Π΅Ρ€ΡŒΠ΅Ρ€Π½Ρ‹Π΅ РСшСния ΠžΡ‚ Π”ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π° Html Website Builder

  • ЭкспСрты По Π¦ΠΈΡ„Ρ€ΠΎΠ²ΠΎΠΌΡƒ ΠœΠ°Ρ€ΠΊΠ΅Ρ‚ΠΈΠ½Π³Ρƒ

  • ΠŸΡƒΡ‚Π΅ΡˆΠ΅ΡΡ‚Π²ΠΈΠ΅ На Восток Webpage Editor Free

  • ΠžΠ±Ρ‰Π΅ΡΡ‚Ρ€ΠΎΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠœΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Ρ‹

  • Π€ΠΎΡ‚ΠΎ ΠšΠΎΠΌΠ°Π½Π΄Ρ‹ Html Web Page Builder

  • ΠŸΠΎΠ·Π½Π°ΠΊΠΎΠΌΡŒΡ‚Π΅ΡΡŒ Π‘ НашСй Π”Π΅Π»ΠΎΠ²ΠΎΠΉ Командой

  • Π€ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ И Π•Π³ΠΎ Π Π°Π±ΠΎΡ‚Ρ‹ Html Builder

  • Π‘Π»ΠΎΠΊ Адаптивного ЦСнообразования

  • ЧСрная ΠŸΡΡ‚Π½ΠΈΡ†Π° Π‘ΠΊΠΈΠ΄ΠΊΠ° Website Creation Html

  • Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π²Π΅Π±-сайта Π±Π΅Π· программирования

    Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

  • Π‘Π΅Π³ΠΈ, Π§Ρ‚ΠΎΠ±Ρ‹ Π”ΠΎΡΡ‚ΠΈΡ‡ΡŒ Π‘Π²ΠΎΠ΅ΠΉ Π¦Π΅Π»ΠΈ Π’ ЀитнСсС

  • УспСх НачинаСтся Π—Π΄Π΅ΡΡŒ Html Template Generator

  • О Π‘Ρ‚ΡƒΠ΄ΠΈΠΈ Π”ΠΈΠ·Π°ΠΉΠ½Π° Π˜Π½Ρ‚Π΅Ρ€ΡŒΠ΅Ρ€Π°

  • ΠšΠΎΠ½Π΅Ρ† Builder Html

  • ΠšΠΎΡ€ΠΏΠΎΡ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠ΅ ΠžΠ±ΡƒΡ‡Π΅Π½ΠΈΠ΅

  • Бтудия Π’Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ И ΠžΠ±ΠΎΡ€ΡƒΠ΄ΠΎΠ²Π°Π½ΠΈΡ Html Designer

  • Π― Π Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°ΡŽ Π‘Π°ΠΉΡ‚Ρ‹

  • ВСкстовоС РСзюмС Html Builders

  • ΠžΡ‚Π·Ρ‹Π²Ρ‹ О НашСй Π Π°Π±ΠΎΡ‚Π΅

  • Π Π°Π·Π²ΠΈΠ²Π°ΠΉΡ‚Π΅ Π‘Π²ΠΎΠΉ БизнСс Html Website Designer

  • ΠΠ°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ любой шаблон

    Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

  • ВСкст Π‘ Π€ΠΎΡ€ΠΌΠΎΠΉ На Π€ΠΎΠ½Π΅

  • ΠœΡƒΠ·Ρ‹ΠΊΠ°Π»ΡŒΠ½Π°Ρ БСспроводная ВСхнология Drag And Drop Html Builder

  • Π₯ΠΎΡ‚ΠΈΡ‚Π΅ Π‘Ρ‚Π°Ρ‚ΡŒ ΠŸΡ€Π΅Π΄ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚Π΅Π»Π΅ΠΌ

  • Π£Ρ€ΠΎΠΊΠΈ ДрСссировки Π‘ΠΎΠ±Π°ΠΊ Html Maker

  • ВСдущая Π˜Π½Ρ‚Π΅Ρ€ΡŒΠ΅Ρ€Π½Π°Ρ Бтудия

  • Π€ΠΎΡ€ΠΌΠ° Для Бвязи Π‘ Нами Html Page Generator

  • УпраТнСния Для ВсСх

  • Π˜Π½ΠΆΠΈΠ½ΠΈΡ€ΠΈΠ½Π³ΠΎΠ²Π°Ρ Π€ΠΈΡ€ΠΌΠ° Website Html Builder

  • Π£Ρ…ΠΎΠ΄ Π—Π° Кошками И Π‘ΠΎΠ±Π°ΠΊΠ°ΠΌΠΈ

  • ΠœΠΎΡ€ΠΎΠΆΠ΅Π½ΠΎΠ΅ И Π—Π°ΠΌΠΎΡ€ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ Π™ΠΎΠ³ΡƒΡ€Ρ‚ Online Html Generator

HTML Page Creator

HMTL builder will help you build your own website with no effort at all! Download Nicepage HTML page creator for free now!

Download Now

Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ Ρ‚ΠΎΠ²Π°Ρ€ΠΎΠ² | ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° eSputnik

Когда ΠΌΡ‹ Π³ΠΎΡ‚ΠΎΠ²ΠΈΠΌ проморассылку, Π·Π°Ρ‡Π°ΡΡ‚ΡƒΡŽ приходится ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ ΠΎΠ΄Π½ΠΈ ΠΈ Ρ‚Π΅ ΠΆΠ΅ дСйствия Π² письмС нСсколько Ρ€Π°Π·: ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ нСсколько ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ, ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ссылки, названия ΠΈ Ρ†Π΅Π½Ρ‹ для добавляСмых Ρ‚ΠΎΠ²Π°Ρ€ΠΎΠ². Π­Ρ‚ΠΎ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ достаточно большоС количСство Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, Π½ΠΎ Π΅ΡΡ‚ΡŒ способ Π΅Π³ΠΎ ΡΠΎΠΊΡ€Π°Ρ‚ΠΈΡ‚ΡŒ.

Наша ΠΏΠ°Π»ΠΎΡ‡ΠΊΠ°-Π²Ρ‹Ρ€ΡƒΡ‡Π°Π»ΠΎΡ‡ΠΊΠ° — это smart-ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ сущСствСнно ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ‚ΡŒ вашС врСмя Π½Π° созданиС письма.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ smart-элСмСнт?

Smart-элСмСнт β€” это ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€, состоящий ΠΈΠ· Π±Π°Π·ΠΎΠ²Ρ‹Ρ… Π±Π»ΠΎΠΊΠΎΠ² (ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°, тСкст, ΠΊΠ½ΠΎΠΏΠΊΠ°), Π½ΠΎ настроСнных для получСния Π΄Π°Π½Π½Ρ‹Ρ… с вашСго сайта. НуТно ΠΎΠ΄ΠΈΠ½ Ρ€Π°Π· Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ:

  • внСшний Π²ΠΈΠ΄ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°,Β 
  • ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅,Β 
  • ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»Π°, ΠΎΡ‚ΠΊΡƒΠ΄Π° Π±Ρ€Π°Ρ‚ΡŒ значСния ΠΈ ΠΊΡƒΠ΄Π° ΠΈΡ… ΠΏΠΎΠ΄ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ.

Π§Ρ‚ΠΎΠ±Ρ‹ Π² дальнСйшСм просто ΠΏΠΎΠ΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ссылку Π½Π° Ρ‚ΠΎΠ²Π°Ρ€, Π° систСма подтянула Π² ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΡƒ Ρ‚ΠΎΠ²Π°Ρ€Π° всю ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ.

Π’ этом Π²ΠΈΠ΄Π΅ΠΎ ΠΌΡ‹ расскаТСм, ΠΊΠ°ΠΊ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ смарт-Π±Π»ΠΎΠΊ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ создания smart-элСмСнта

Π’ΠΎΠ·ΡŒΠΌΠ΅ΠΌ для ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° сайт toys.com.ua. Для создания ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ Ρ‚ΠΎΠ²Π°Ρ€Π° Π½Π°ΠΌ понадобятся ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°, Π½Π°Π·Π²Π°Π½ΠΈΠ΅ Ρ‚ΠΎΠ²Π°Ρ€Π° ΠΈ Ρ†Π΅Π½Π°.
ΠŸΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΈΠΌ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΡƒ Ρ‚ΠΎΠ²Π°Ρ€Π°. Π’ΠΎΠ·ΡŒΠΌΠ΅ΠΌ структуру с трСмя ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°ΠΌΠΈ (количСство ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠ² ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π»ΡŽΠ±Ρ‹ΠΌ, Π² зависимости ΠΎΡ‚ Π²Π°ΡˆΠΈΡ… потрСбностСй)Β 

Π–Π΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ сразу Π½Π°ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ, для удобства, Ρ‡Ρ‚ΠΎΠ±Ρ‹ сразу Π±Ρ‹Π»ΠΎ Π²ΠΈΠ΄Π½ΠΎ, ΠΊΡƒΠ΄Π° ΠΈ Ρ‡Ρ‚ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ. ВсС элСмСнты Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ располоТСны Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π΅.

Наполним Π΅Π΅ согласно Π΄ΠΈΠ·Π°ΠΉΠ½Π° сайта, Π² Ρ‚Π°ΠΊΠΎΠΉ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ:

  • ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°
  • НазваниС Ρ‚ΠΎΠ²Π°Ρ€Π°
  • Π¦Π΅Π½Π°
  • Кнопка

Π”Π°Π»Π΅Π΅, выдСляСм ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ с Π±Π°Π·ΠΎΠ²Ρ‹ΠΌΠΈ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ (для этого ΠΊΠ»ΠΈΠΊΠ°Π΅ΠΌ ΠΏΠΎ синСму ярлыку ΠΉ β€œΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€β€ свСрху), Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ Π² Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ β€œΠ”Π°Π½Π½Ρ‹Π΅β€ ΠΈ ΠΊΠ»ΠΈΠΊΠ°Π΅ΠΌ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ β€œΠΠ°Ρ‡Π°Ρ‚ΡŒβ€ для Π°ΠΊΡ‚ΠΈΠ²Π°Ρ†ΠΈΠΈ Smart-свойства.

Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ Ρƒ нас открываСтся конфигурация, Π³Π΄Π΅ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ всС Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ ссылки:

Π§Ρ‚ΠΎ Π²Π°ΠΆΠ½ΠΎ Π·Π½Π°Ρ‚ΡŒ — Π΅ΡΡ‚ΡŒ 2 Ρ‚ΠΈΠΏΠ° Π΄Π°Π½Π½Ρ‹Ρ…, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ. Они ΠΏΡ€ΠΎΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‚ΡΡ Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ β€œΠŸΡ€Π°Π²ΠΈΠ»Π° соотвСтствия”:

  • β€œΠšΡƒΠ΄Π° ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒβ€ — Ρ‚ΡƒΡ‚ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»Π° ΠΊΡƒΠ΄Π° ΠΈΠΌΠ΅Π½Π½ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΡƒΠΆΠ΅ ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Π½Ρ‹Π΅ значСния ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Ρ… Π² нашСм smart-элСмСнтС.
  • β€œΠžΡ‚ΠΊΡƒΠ΄Π° Π²Π·ΡΡ‚ΡŒβ€ — здСсь Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°ΡŽΡ‚ΡΡ ΠΏΡ€Π°Π²ΠΈΠ»Π°, ΠΎΡ‚ΠΊΡƒΠ΄Π° Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ значСния ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Ρ… с Π½ΡƒΠΆΠ½ΠΎΠ³ΠΎ Π½Π°ΠΌ сайта.

Π’Π°ΠΆΠ½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π½Π°ΠΌ ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ‚ΡŒ врСмя: настраивайтС Π±Π»ΠΎΠΊ Ρ‚Π°ΠΊ, Π±ΡƒΠ΄Ρ‚ΠΎΒ ΡƒΠΆΠ΅ отправлятС рассылку — ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ‚ΠΎΠ²Π°Ρ€Π° со ссылкой Π½Π° Π½Π΅Π³ΠΎ, с Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΌ тСкстом ΠΈ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ, Ρ†Π΅Π½ΠΎΠΉ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ Π½ΡƒΠΆΠ½Ρ‹ΠΌΠΈ Π½Π°ΠΌ ΠΏΡƒΠ½ΠΊΡ‚Π°ΠΌΠΈ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ Ρ‚ΠΎΠ²Π°Ρ€Π°. Π’ нашСм случаС это ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°, Π½Π°Π·Π²Π°Π½ΠΈΠ΅, Ρ†Π΅Π½Π°.

НачнСм настройку Smart-Π±Π»ΠΎΠΊΠΎΠ²

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ доступна Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ссылка:

Для ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ Ρ‚ΠΎΠ²Π°Ρ€Π° этого ΠΌΠ°Π»ΠΎ, поэтому ΠΌΡ‹ добавляСм, Π½Π°ΠΆΠ°Π² Π½Π° плюсик, Π½ΡƒΠΆΠ½Ρ‹Π΅ Π½Π°ΠΌ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹:Β 

Из Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ списка Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ

  • ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ,Β 
  • Π½Π°Π·Π²Π°Π½ΠΈΠ΅,Β 
  • Ρ†Π΅Π½Ρƒ.

ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡƒΠ·Π½Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊΠΎΠΉ сСлСктор ΠΈΠΌΠ΅Π΅Ρ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² нашСм стандартном Π±Π»ΠΎΠΊΠ΅. Для этого ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ ΠΊΠΎΠ΄ письма, Π½Π°ΠΆΠ°Π² Π½Π° Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ ΠΊΠΎΠ΄Π°.

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ img:

Для удобства Π΄ΠΎΠ±Π°Π²ΠΈΠΌ класс:

Π—Π°Ρ‚Π΅ΠΌ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΠΌ Π² настройки ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΡƒ β€œΠšΡƒΠ΄Π° ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒβ€ ΠΈ прописываСм сСлСктор:

Π£ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Ρ‚Π°ΠΊΠΆΠ΅ Π΅ΡΡ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚, Π² Π΄Π°Π½Π½ΠΎΠΌ случаС — src, Ρ€Π΅ΠΆΠ΅ встрСчаСтся html, Π² зависимости ΠΎΡ‚ сайта. ΠŸΡ€ΠΎΠΏΠΈΡΡ‹Π²Π°Π΅ΠΌ Π΅Π³ΠΎ:

Π—Π°Ρ‚Π΅ΠΌ провСряСм Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ β€œΠ’Π½Π΅ΡˆΠ½ΠΈΠ΅ данныС” — ΠΏΠΎΠ΄ΡΡ‚Π°Π²ΠΈΠ»Π°ΡΡŒ ссылка Π½Π° Π½Π°ΡˆΡƒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ:

НазваниС Ρ‚ΠΎΠ²Π°Ρ€Π°

НачинаСм Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ названия ΠΏΠΎ Π°Π½Π°Π»ΠΎΠ³ΠΈΠΈ. ΠŸΡ€ΠΎΠΏΠΈΡΡ‹Π²Π°Π΅ΠΌ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ Π²ΠΎΠ·Π»Π΅ названия класс, копируя ΠΈΠ· ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ, Π»ΠΈΠ±ΠΎ придумывая своС — Π³Π»Π°Π²Π½ΠΎΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ Π±Ρ‹Π» ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌ.

Π’ нашСм ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ сСлСктор это a.name, Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ здСсь Π½Π΅ Π½ΡƒΠΆΠ΅Π½, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ это ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ΅ тСкстовоС ΠΏΠΎΠ»Π΅.

Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ β€œΠ’Π½Π΅ΡˆΠ½ΠΈΠΉ вид”

Π¦Π΅Π½Π°

По Π°Π½Π°Π»ΠΎΠ³ΠΈΠΈ с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ полями настраиваСм Ρ†Π΅Π½Ρƒ. Π‘ΠΌΠΎΡ‚Ρ€ΠΈΠΌ Π² ΠΊΠΎΠ΄Π΅ html-сСлСктор, Π² Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Ρ†Π΅Π½Π° ΠΈΠΌΠ΅Π΅Ρ‚ сСлСктор span.price. ΠŸΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

Π’ΠΎ Π΅ΡΡ‚ΡŒ ΠΌΡ‹ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ сСлСкторы Π² Π±Π»ΠΎΠΊ, ΠΊΡƒΠ΄Π° Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΠΎΠ΄ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒΡΡ Ρ‚ΠΎΠ²Π°Ρ€Ρ‹ с сайта ΠΈ ΠΏΡ€ΠΎΠ²Π΅Π»ΠΈ ΠΈΡ… настройку. Β Π­Ρ‚ΠΎ настройка Ρ‚ΠΎΠ»ΡŒΠΊΠΎ шаблона письма, ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ шаг — сбор Π΄Π°Π½Π½Ρ‹Ρ… с сайта.

НастраиваСм ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡Ρƒ Π΄Π°Π½Π½Ρ‹Ρ… ΠΈΠ· сайта Π² письмо

Π’ΠΎΠ·ΡŒΠΌΠ΅ΠΌ страницу с Ρ‚ΠΎΠ²Π°Ρ€ΠΎΠΌ, с ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΏΠΎΠ΄Ρ‚ΡΠ³ΠΈΠ²Π°Ρ‚ΡŒ Π΄Π°Π½Π½Ρ‹Π΅:

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅

Находим сСлСктор изобраТСния Π½Π° сайтС. Если Π²Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚Π΅ Π² Google ChromΠ΅, ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ инспСктор ΠΊΠΎΠ΄Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠ½ΠΎΠΏΠΊΠΈ F12 ΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ поиска элСмСнта Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ:

ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΠΌ ΠΊ настройкС Π²Ρ‚ΠΎΡ€ΠΎΠΉ части: заполняСм Ρ€Π°Π·Π΄Π΅Π» β€œΠžΡ‚ΠΊΡƒΠ΄Π° Π²Π·ΡΡ‚ΡŒβ€.
На сайтС Π½Π°Ρ…ΠΎΠ΄ΠΈΠΌ ссылку Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ‚ΠΎΠ²Π°Ρ€Π° Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ ΠΊΠΎΠ΄Π° ΠΈ смотрим сСлСктор ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚, Π² нашСм случаС это src:

ΠŸΡ€ΠΎΠΏΠΈΡΡ‹Π²Π°Π΅ΠΌ Π΅Π³ΠΎ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ β€œΠžΡ‚ΠΊΡƒΠ΄Π° Π²Π·ΡΡ‚ΡŒβ€:

ΠŸΠΎΠ΄ΡΡ‚Π°Π²Π»ΡΠ΅ΠΌ ссылку Π½Π° Ρ‚ΠΎΠ²Π°Ρ€:Β 

Если всС настроСно ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ, Ρƒ вас сразу ΠΆΠ΅ подтянСтся ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ ΠΏΠΎΠ΄Ρ‚ΡΠ³ΠΈΠ²Π°Π»ΠΎΡΡŒ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½ΠΎΠ΅ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ Π² ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ Ρ‚ΠΎΠ²Π°Ρ€Π°, добавляСм сСлСктор h2:

Π—Π°Ρ‚Π΅ΠΌ ΠΏΡ€ΠΎΠΏΠΈΡˆΠ΅ΠΌ 2 сСлСктора Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ β€œΠšΡƒΠ΄Π° ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒβ€:

Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ alt ΠΈ title.Β 

Π¦Π΅Π½Π°

ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅ΠΌ Π½Π° сайтС сСлСктор Ρ†Π΅Π½Ρ‹, Π² нашСм случаС это [itemprop=price]

ΠΈ прописываСм Π΅Π³ΠΎ Π² самом Π±Π»ΠΎΠΊΠ΅.

НаТимаСм β€œΠŸΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ значСниС” ΠΈ сравниваСм Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚.
ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ сСлСктор, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ΄Ρ‚ΡΠ³ΠΈΠ²Π°Π»Π°ΡΡŒ Π²Π°Π»ΡŽΡ‚Π° с сайта, ΠΈΠ»ΠΈ сразу ΠΆΠ΅ ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ Π²Π°Π»ΡŽΡ‚Ρƒ Π² ΠΊΠΎΠ΄Π΅ письма, Ссли ΠΎΠ½Π° Π½Π΅ мСняСтся.

ΠŸΡ€ΠΎΠ²Π΅Ρ€ΡΠ΅ΠΌ ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Π½Ρ‹ΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚

Для ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΡΡ‚ΠΈ настроСк ΠΊΠΎΠΏΠΈΡ€ΡƒΠ΅ΠΌ ΠΊΠΎΠ΄ ΠΈ вставляСм Π² сосСдниС 2 ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚, Π±Π΅Ρ€Π΅ΠΌ ссылки Π½Π° Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ‚ΠΎΠ²Π°Ρ€Ρ‹ ΠΈ подставляСм Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€:Β 

ΠŸΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

НСбольшиС Π»Π°ΠΉΡ„Ρ…Π°ΠΊΠΈ:

1. НастройтС ΠΎΠ΄ΠΈΠ½ смарт-Π±Π»ΠΎΠΊ со всСми Π΄Π°Π½Π½Ρ‹ΠΌΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ. ΠŸΡ€ΠΈ нСобходимости ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ΄Π°Π»ΡΡ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹ Π² Π±Π»ΠΎΠΊΠ΅.

2. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ структуру Π² Π΄Ρ€ΡƒΠ³ΠΎΠ΅ письмо, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ JSON.

Π‘ΠΊΠΎΠΏΠΈΡ€ΡƒΠΉΡ‚Π΅ вСсь ΠΊΠΎΠ΄ ΠΈΠ· этого Ρ€Π°Π·Π΄Π΅Π»Π° ΠΈ Π·Π°Ρ‚Π΅ΠΌ Π²ΡΡ‚Π°Π²ΡŒΡ‚Π΅ Π΅Π³ΠΎ Π² Π΄Ρ€ΡƒΠ³ΠΎΠ΅ письмо ΠΊ Π½ΡƒΠΆΠ½ΠΎΠΉ структурС.

3. БохраняйтС ΠΏΠΎ-Ρ€Π°Π·Π½ΠΎΠΌΡƒ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½Π½Ρ‹Π΅ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹ Π² Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΈΡ… Π² любом письмС.

4. Из ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π»ΡŽΠ±ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΡƒ: Ρ‚Ρ€ΠΈ Π² ряд, Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ Π² столбик, поэтому Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ с нуля ΠΏΠΎΠ»Π½ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΡƒ — просто скопируйтС содСрТимоС ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° Π² сосСднюю ячСйку.

5. МоТно Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ для тСкстовых Π±Π»ΠΎΠΊΠΎΠ² Ρ‚Π°ΠΊΠΈΠ΅ ΠΆΠ΅ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, для Π±Π»ΠΎΠ³ΠΎΠ²Ρ‹Ρ… статСй.

10 Π»ΡƒΡ‡ΡˆΠΈΡ… Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ΠΎΠ² ΠΊΠΎΠ΄Π° CSS Π½Π° 2022 Π³ΠΎΠ΄ | by Imia Hazel

Π’Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ постоянно ΠΈΡ‰ΡƒΡ‚ ярлыки, ΠΏΠΎΠ²Ρ‹ΡˆΠ°ΡŽΡ‰ΠΈΠ΅ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ. Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Ρ‹ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΠ»ΠΈΡΡŒ Π·Π° послСдниС Π³ΠΎΠ΄Ρ‹, Ρ‡Ρ‚ΠΎ ΡƒΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ Π½Π°Ρ‡Π°Π»ΠΎ ΠΈ быстроС Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΠ΅ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°. Π’Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ°, ΠΏΠΎΡ…ΠΎΠΆΠ΅, ΠΎΡ‚Ρ…ΠΎΠ΄ΠΈΡ‚ ΠΎΡ‚ Ρ€Π°Π±ΠΎΡ‡Π΅Π³ΠΎ стола с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ IDE Π½Π° основС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°. Помимо тСстирования ΠΊΠΎΠ΄Π° Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΈΡΠ°Ρ‚ΡŒ Π΅Π³ΠΎ с любого ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π° Π² ΠΌΠΈΡ€Π΅.

БСсплатныС ΠΎΠ½Π»Π°ΠΉΠ½-Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€Ρ‹ ΠΊΠΎΠ΄Π° позволят Π²Π°ΠΌ быстро ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ ΠΈ ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ свой ΠΊΠΎΠ΄. Π’ΠΎΡ‚ Π΄Π΅ΡΡΡ‚ΡŒ Π»ΡŽΠ±ΠΈΠΌΡ‹Ρ… инструмСнтов для создания ΠΊΠΎΠ΄Π° CSS, доступных бСсплатно Π½Π° этой страницС.

Для создания Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ с использованиСм CSS Animista являСтся ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΈΠ΅ΠΌΠ»Π΅ΠΌΡ‹Ρ… Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ². Он прСдоставляСт Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π² свою Ρ€Π°Π±ΠΎΡ‚Ρƒ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ ΠΈ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ Π΅Π΅ ΠΏΠΎ своСму ΡƒΡΠΌΠΎΡ‚Ρ€Π΅Π½ΠΈΡŽ. ΠŸΡ€ΠΈΡˆΠ»ΠΎ врСмя ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ CSS для Π΄ΡƒΡ…Π° ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π² ΠΊΠΎΠ΄Π΅ вашСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ Animista

Π”Π°Π»Π΅Π΅ ΠΈΠ΄ΡƒΡ‚ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρ‹; ПослС полос Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ бСсплатно ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½Ρ‹ΠΉ Ρ„ΠΎΠ½ для своСго Π²Π΅Π±-сайта с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS Gradient, сСрвиса, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π°Π·Ρ‹Π²Π°Π΅Ρ‚ сСбя «вСсСлым малСньким Π²Π΅Π±-сайтом». Π’ Π±Π»ΠΎΠ³Π΅ ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°Ρ…, ΠΎΡ‚ тСхничСских Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ² ΠΈ руководств Π΄ΠΎ Ρ€Π΅Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ², Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ Stripe ΠΈ Instagram.

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ CSS Gradient

Π‘Π΅Ρ‚ΠΊΠ° CSS β€” это ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ инструмСнт для Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² сСтки Π½Π° вашСм Π²Π΅Π±-сайтС. Для использования доступСн ΡˆΠΈΡ€ΠΎΠΊΠΈΠΉ спСктр Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ сСтки CSS. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ CSS Grid Generator, ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ инструмСнт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ создаСт для вас ΠΊΠΎΠ΄ сСтки CSS, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС ΠΎ сСткС CSS ΠΈ ΡƒΠΏΡ€ΠΎΡΡ‚ΠΈΡ‚ΡŒ Π΅Π΅ для сСбя. Π‘Ρ‚ΠΎΠ»Π±Ρ†Ρ‹, строки ΠΈ Π΅Π΄ΠΈΠ½ΠΈΡ†Ρ‹ измСрСния Π±ΡƒΠ΄ΡƒΡ‚ созданы автоматичСски. Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ ΠΊΠΎΠ΄ CSS ΠΈ HTML Π³ΠΎΡ‚ΠΎΠ² ΠΊ использованию Π² случаС нСобходимости.

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ CSS Grid Generator

Get Wave β€” фантастичСский инструмСнт, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠΉ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π²ΠΎΠ»Π½Ρ‹ SVG с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS для Π²Π°ΡˆΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ². ПослС Π²Ρ‹Π±ΠΎΡ€Π° Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… настроСк ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ создаСт ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠ΄ CSS для вашСго Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π²ΠΎΠ»Π½Ρ‹. ΠŸΡ€ΠΈ ΠΆΠ΅Π»Π°Π½ΠΈΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΡΠΎΠ·Π΄Π°Π½Π½ΡƒΡŽ Π²Π°ΠΌΠΈ SVG Wave.

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Waves

CSS-свойство box-shadow добавляСт Ρ‚Π΅Π½ΡŒ ΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌ, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ½ΠΎ влияСт. Π­Ρ‚ΠΎΡ‚ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ нСсколько Ρ‚Π΅Π½Π΅ΠΉ ΠΊ элСмСнту с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этого Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°. НСсколько ΠΎΡ‚Ρ‚Π΅Π½ΠΊΠΎΠ², ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½Π½Ρ‹Ρ… ΠΊ ΠΎΠ΄Π½ΠΎΠΌΡƒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρƒ, ΠΌΠΎΠ³ΡƒΡ‚ Π΄Π°Ρ‚ΡŒ ΠΎΡˆΠ΅Π»ΠΎΠΌΠ»ΡΡŽΡ‰ΠΈΠ΅ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ΠΎΡ‡Π½Ρ‹Π΅ Ρ‚Π΅Π½ΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этого прСвосходного Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€Π° ΠΊΠΎΡ€ΠΎΠ±Ρ‡Π°Ρ‚Ρ‹Ρ… Ρ‚Π΅Π½Π΅ΠΉ.

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ мноТСствСнных Ρ‚Π΅Π½Π΅ΠΉ

Благодаря своСму минималистичному Ρ…Π°Ρ€Π°ΠΊΡ‚Π΅Ρ€Ρƒ, Π΄ΠΈΠ·Π°ΠΉΠ½ Neumorphism становится всС Π±ΠΎΠ»Π΅Π΅ популярным Π² послСдниС Π³ΠΎΠ΄Ρ‹. Π˜Π½Ρ‚Π΅Ρ€Π΅ΡΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ аспСкты изобраТСния, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Ρ†Π²Π΅Ρ‚, Ρ€Π°Π·ΠΌΠ΅Ρ€, радиус, расстояниС ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Neumorphism Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½Ρ‹ΠΉ CSS-ΠΊΠΎΠ΄ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса вашСго Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Благодаря этому созданиС Π΄ΠΈΠ·Π°ΠΉΠ½Π° Neumorphism становится Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΡ‰Π΅. Если Π²Ρ‹ Π΄Π°Π΄ΠΈΡ‚Π΅ Π΅ΠΌΡƒ шанс, Π²Ρ‹ Π²Π»ΡŽΠ±ΠΈΡ‚Π΅ΡΡŒ Π² Π½Π΅Π³ΠΎ.

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ Π½Π΅ΠΎΠΌΠΎΡ€Ρ„ΠΈΠ·ΠΌ

Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ создания ΠΊΠΎΠ½Ρ‚ΡƒΡ€ΠΎΠ² CSS ΡƒΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ созданиС красивых Ρ„ΠΎΡ€ΠΌ ΠΈ автоматичСски создаСт ΠΊΠΎΠ΄ CSS. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ CSS-свойство clip-path, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ слоТныС Ρ„ΠΎΡ€ΠΌΡ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этого инструмСнта» (ΠΌΠ½ΠΎΠ³ΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠΈ, ΠΊΡ€ΡƒΠ³ΠΈ, эллипсы ΠΈ Ρ‚. Π΄.). Π­Ρ‚ΠΎΡ‚ инструмСнт прост Π² использовании ΠΎΡ‚ Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΎΠ² Π΄ΠΎ экспСртов.

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ CSS Clip Path Maker

Coolors позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΠ°Π»ΠΈΡ‚Ρ€Ρ‹ Π² ΠΌΠ³Π½ΠΎΠ²Π΅Π½ΠΈΠ΅ ΠΎΠΊΠ°. ΠŸΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ Π²Π΅Π±-страницы ΠΎΡ‡Π΅Π½ΡŒ просто. ΠœΠ΅Π½ΡΡ‚ΡŒ ΠΏΠ°Π»ΠΈΡ‚Ρ€Ρ‹ Ρ‚Π°ΠΊ ΠΆΠ΅ просто, ΠΊΠ°ΠΊ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Ρ‚ΡŒ страницу Π²Π½ΠΈΠ·. Coolors позволяСт Π²Π°ΠΌ ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ, ΡΠΎΡ…Ρ€Π°Π½ΡΡ‚ΡŒ, ΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ»ΠΈ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ ΠΏΠ°Π»ΠΈΡ‚Ρ€Ρƒ Π² Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€Π΅, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ Ρ‚Ρƒ, которая Π²Π°ΠΌ нравится. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ схСмы, Ссли Ρ…ΠΎΡ‚ΠΈΡ‚Π΅.

Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½ΠΎΠ²Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ Π² ΠΏΠ°Π»ΠΈΡ‚Ρ€Ρƒ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€Π°, Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ символ добавлСния Π² сСрСдинС Π΄Π²ΡƒΡ… ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… ΠΎΡ‚Ρ‚Π΅Π½ΠΊΠΎΠ². НавСдСниС курсора Π½Π° Ρ†Π²Π΅Ρ‚Π½Ρ‹Π΅ полосы Π΄Π°Π΅Ρ‚ Π²Π°ΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ, ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ, ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ, ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΈΠ»ΠΈ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΡˆΠ΅ΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚Π΅Ρ€ΠΈΡ‡Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚Π°.

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этой Ρ‚Π΅Ρ…Π½ΠΈΠΊΠΈ ΡΠΊΡΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠ°Π»ΠΈΡ‚Ρ€Ρ‹ ΠΎΡ‡Π΅Π½ΡŒ просто. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ URL-адрСс ΠΈ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π² Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°Ρ…, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ PDF, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΠ΄ CSS ΠΈ SVG. ΠšΡƒΠ»Π΅Ρ€Ρ‹ просты Π² использовании, Π½ΠΎ ΠΈΡ… освоСниС ΠΌΠΎΠΆΠ΅Ρ‚ Π·Π°Π½ΡΡ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ врСмя.

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ Coolors

Π­Ρ‚ΠΎΡ‚ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ понадобится Π²Π°ΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹Π΅ ΡƒΠ³Π»Ρ‹ (радиус Π³Ρ€Π°Π½ΠΈΡ†Ρ‹) Π½Π° вашСм Π²Π΅Π±-сайтС. CSS-Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ border-radius позволяСт ΠΏΡ€ΠΈΠ΄Π°Ρ‚ΡŒ элСмСнту ΠΎΠΊΡ€ΡƒΠ³Π»Ρ‹ΠΉ Π²ΠΈΠ΄. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства опрСдСляСт радиус окруТности. ВмСсто Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Ρ‚Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½Ρ‹Π΅ ΠΏΡ€Π°Π²Ρ‹Π΅ ΡƒΠ³Π»Ρ‹ элСмСнта, этот Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ создаСт Π΄ΡƒΠ³Ρƒ, ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‰ΡƒΡŽ радиус процСсса. Π’ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ стандартному радиусу Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ радиус ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡƒΠ³Π»Π°. Π­Ρ‚ΠΎΡ‚ инструмСнт ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΡ‡ΡƒΠ΄Π»ΠΈΠ²Ρ‹Π΅ Ρ€Π°ΠΌΠΊΠΈ CSS.

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ Fancy Border Radius

Плавная Ρ‚Π΅Π½ΡŒ β€” это фантастичСский инструмСнт для быстрой ΠΈ простой Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Ρ‚Π΅Π½Π΅ΠΉ Π½Π° основС CSS. Π’Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ нСсколько настроСк Ρ‚Π΅Π½Π΅ΠΉ, ΠΈ ΠΊΠΎΠ΄ ΡƒΠΆΠ΅ Π² ΠΏΡƒΡ‚ΠΈ.

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ Smooth Shadows

Π­Ρ‚ΠΈ изящныС Ρ€Π°ΠΌΠΊΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΡΠ²Π»ΡΡŽΡ‚ΡΡ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΠΎΠΌ фантастичСского инструмСнта BrowserFrame.

Π­Ρ‚ΠΈ бСсплатныС инструмСнты для создания ΠΊΠΎΠ΄Π° CSS β€” Π»ΡƒΡ‡ΡˆΠΈΠ΅ ΠΈΠ· Π»ΡƒΡ‡ΡˆΠΈΡ…. Π—Π° ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΎΠ΅ врСмя ΠΎΠ½ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΡƒΠ΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Π²Π΅Ρ‰ΠΈ Π±Π΅Π· написания для Π½ΠΈΡ… ΠΊΠΎΠ΄Π° CSS. ИспользованиС этих инструмСнтов ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²Π°ΠΌ ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ‚ΡŒ врСмя ΠΈ ΠΏΠΎΠ²Ρ‹ΡΠΈΡ‚ΡŒ ΡΡ„Ρ„Π΅ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ кодирования CSS. Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚Π΅ ΠΈ ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚Π΅ΡΡŒ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹ΠΌ Π²Ρ‹ΡˆΠ΅ списком со своим сообщСством.

Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ тСкстовых ΠΏΠΎΠ»Π΅ΠΉ CSS — Doodle Nerd

Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ тСкстовых ΠΏΠΎΠ»Π΅ΠΉ CSS позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ тСкстовыС поля CSS3 для вашСго Π²Π΅Π±-сайта ΠΈ экономит вашС врСмя. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ тСкстовоС ΠΏΠΎΠ»Π΅ ΠΈ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ»ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ сгСнСрированный ΠΊΠΎΠ΄ CSS.

1XTEXT ΠžΠΏΡ†ΠΈΠΈ

Подкладка (PX)

Π Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° (PX)

Text Align ()

Π»Π΅Π²Ρ‹ΠΉ Ρ†Π΅Π½Ρ‚Ρ€. SolidDashedDottedDoubleGrooveInsetOutsetRidgeHidden

3Color Options

Π€ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚

Π¦Π²Π΅Ρ‚ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹

Π¦Π²Π΅Ρ‚ ΡˆΡ€ΠΈΡ„Ρ‚Π°

4box Shadow Option (%)

ПолоТСниС Ρ‚Π΅Π½ΠΈ

Π‘Π½Π°Ρ€ΡƒΠΆΠΈΠ’Π½ΡƒΡ‚Ρ€ΠΈ

5ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Ρ‚Π΅Π½ΠΈ тСкста

Π£Π³ΠΎΠ» Ρ‚Π΅Π½ΠΈ (Π³Ρ€Π°Π΄)

РасстояниС Ρ‚Π΅Π½ΠΈ (пкс)

Π Π°Π·ΠΌΡ‹Ρ‚ΠΈΠ΅ Ρ‚Π΅Π½ΠΈ (пкс)

Π¦Π²Π΅Ρ‚ Ρ‚Π΅Π½ΠΈ

ΠΠ΅ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ Ρ‚Π΅Π½Π΅ΠΉ (%)

6ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΡˆΡ€ΠΈΡ„Ρ‚Π°

Π’ΠΎΠ»Ρ‰ΠΈΠ½Π° ΡˆΡ€ΠΈΡ„Ρ‚Π°

NormalBold

Π‘Ρ‚ΠΈΠ»ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚Π°

NormalItalic

БСмСйство ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Fantasy

3Mospace 90Serif

ArialSans Serif ΠŸΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ просмотр ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Π€Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠ΄Π° CSS ΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ

HTML-ΠΊΠΎΠ΄ ΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ

Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ тСкстовых ΠΏΠΎΠ»Π΅ΠΉ CSS

ΠœΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ CSS-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ, созданный с. .

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ 5281 0 0

ΠšΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡ ΠΌΠΎΡ‚Ρ‹Π³ с Π΄Π²ΠΈΠ³Π°Ρ‚Π΅Π»Π΅ΠΌ CSS3..

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ 4779 0 0

ΠŸΡ€ΠΎΡΡ‚Π°Ρ анимация с использованиСм FontAwe..

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ 4314 0 0

ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ всС Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρ‹ β€Ί

Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Ρ‹ Π΄ΠΈΠ·Π°ΠΉΠ½Π°

    Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ CSS3

  • Радиус Π³Ρ€Π°Π½ΠΈΡ†Ρ‹
  • ВСнь ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ
  • ВСнь тСкста
  • RGBA
  • НачСртаниС ΡˆΡ€ΠΈΡ„Ρ‚Π°
  • НСсколько столбцов
  • ИзмСнСниС Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ
  • Π Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ
  • ΠšΠΎΠ½Ρ‚ΡƒΡ€
  • ΠŸΠ΅Ρ€Π΅Ρ…ΠΎΠ΄
  • Врансформация
  • ЀлСксбокс
  • Π“Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚

    CSS-эффСкты

  • Π€ΠΈΠ»ΡŒΡ‚Ρ€Ρ‹ CSS
  • Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ΠΎΠ² CSS
  • ВСкстовыС эффСкты CSS
  • CSS-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

    Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Ρ‹ для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с изобраТСниями

  • Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² Π΄Π°Π½Π½Ρ‹Π΅ β€”
  • ЭлСктронная ΠΏΠΎΡ‡Ρ‚Π° для Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ β€”
  • Подпись ΠΊ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€Ρƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ —

    Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Ρ‹ Π²Π΅Π±-сайта

  • Адаптивный ΠΊΠ°Π»ΡŒΠΊΡƒΠ»ΡΡ‚ΠΎΡ€
  • ВСст Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±-сайта
  • Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ Π·Π°Π΄Π°Π½ΠΈΠΉ Cron
  • Ошибка Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€Π° страниц
  • Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ Π»ΡŽΠ±ΠΈΠΌΡ‹Ρ… ΠΈΠΊΠΎΠ½ΠΎΠΊ β€”
  • Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ Ρ„ΠΎΡ€ΠΌ β€”
  • Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ пСрСзаписи ΠΌΠΎΠ΄ΠΎΠ² β€”
  • Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ доступа HTA

    Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΉ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ

  • Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΉ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ
  • Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ Bootstrap 4

    Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ CSS

  • ΠŸΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ (Ρ…, Ρƒ)
  • ИзмСнСниС Ρ€Π°Π·ΠΌΠ΅Ρ€Π° тСкстовой области
  • ΠŸΠΎΠ²ΠΎΡ€ΠΎΡ‚ тСкста

    Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ CSS

  • Π Π΅Ρ‡Π΅Π²ΠΎΠΉ ΠΏΡƒΠ·Ρ‹Ρ€ΡŒ
  • Π’Ρ€Π΅ΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ CSS
  • Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… подсказок β€”
  • Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ Π»Π΅Π½Ρ‚Ρ‹ β€”
  • Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ Π»Π΅Π½Ρ‚ΠΎΡ‡Π½Ρ‹Ρ… ярлыков β€”

    HTML-элСмСнты управлСния

  • Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ тСкстовых ΠΏΠΎΠ»Π΅ΠΉ
  • Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎΡΡ списка
  • Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ Ρ„Π»Π°ΠΆΠΊΠΎΠ²
  • Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ Ρ€Π°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΎΠΊ
  • Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ Π²Ρ…ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° —
  • Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ ΠΊΠ½ΠΎΠΏΠΎΠΊ β€”
  • ΠŸΠΎΠ²ΠΎΡ€ΠΎΡ‚Π½Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΡŒ β€”

    Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ²

  • Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² β€”
  • Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ мСню CSS3 β€”

    ΠŸΡ€Π΅ΠΏΡ€ΠΎΡ†Π΅ΡΡΠΎΡ€Ρ‹ CSS

  • МСньшС компилятора
  • ΠšΠΎΠΌΠΏΠΈΠ»ΡΡ‚ΠΎΡ€ SCSS
  • ΠšΠΎΠΌΠΏΠΈΠ»ΡΡ‚ΠΎΡ€ SASS
  • ΠšΠΎΠΌΠΏΠΈΠ»ΡΡ‚ΠΎΡ€ стилуса
  • ΠšΠΎΠ½Π²Π΅Ρ€Ρ‚Π΅Ρ€ CSS Π² LESS
  • ΠŸΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ CSS Π² SCSS
  • ΠŸΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ CSS Π² стилус

    Π’Π΅Π±-инструмСнты

  • Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ шаблонов
  • ΠšΠΎΠ½ΡΡ‚Ρ€ΡƒΠΊΡ‚ΠΎΡ€ ΠΏΠ»Π΅Π΄ΠΎΠ²
  • Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ Ρ„ΠΈΠ»Π΅
  • Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ ΡˆΡ‚Ρ€ΠΈΡ…-ΠΊΠΎΠ΄Π°
  • Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ QR-ΠΊΠΎΠ΄Π°
  • ΠšΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ GPS

    SEO

  • Возраст Π΄ΠΎΠΌΠ΅Π½Π°
  • Поиск Π² Whois
  • БрСдство просмотра ΠΌΠ΅Ρ‚Π°Ρ‚Π΅Π³ΠΎΠ²
  • Π˜Π·Π²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒ звСньСв
  • БрСдство ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ Π½Π΅Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‰ΠΈΡ… ссылок
  • ΠžΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ тСкста ΠΊ ΠΊΠΎΠ΄Ρƒ
  • HTML-тСкстовоС содСрТимоС
  • Π Π΅ΠΉΡ‚ΠΈΠ½Π³ Alexa
  • ΠŸΠΎΠ·ΠΈΡ†ΠΈΡ Π² поискС Google
  • ΠŸΡ€ΠΎΠ²Π΅Ρ€ΠΊΠ° HTTP-Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°
  • ВСст скорости Π²Π΅Π±-сайта
  • IP-адрСс Π²Π΅Π±-сайта
  • БрСдство ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ связи
  • Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Ρ€ΠΎΠ±ΠΎΡ‚ΠΎΠ²
  • Π”Π΅Ρ‚Π°Π»ΠΈ ΠΌΠΎΠ΅Π³ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°

    Π¦Π²Π΅Ρ‚Π½Ρ‹Π΅ инструмСнты

  • ΠŸΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Ρ†Π²Π΅Ρ‚Π° CSS
  • RGBA-Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€
  • Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ ΠΏΠ°Π»ΠΈΡ‚Ρ€Ρ‹ β€”
  • Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹Ρ… схСм

    Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Ρ‹ CSS

  • ΠŸΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ PX Π² EM
  • ΠŸΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ Π΄Π»ΠΈΠ½Ρ‹ CSS
  • ΠŸΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ просмотр ΡˆΡ€ΠΈΡ„Ρ‚Π° CSS
  • Π’Π°Π»ΠΈΠ΄Π°Ρ‚ΠΎΡ€ CSS
  • Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ спрайтов CSS β€”
  • Π€ΠΎΡ€ΠΌΠ°Ρ‚ Код CSS
  • ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ ΠΊΠΎΠ΄Π° CSS β€”

    Π Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Ρ‹ CSS

  • Онлайн-Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ CSS β€”
  • Π Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Ρ… стилСй CSS β€”

ΠŸΠΎΠ΄ΠΏΠΈΡΡ‹Π²Π°ΠΉΡ‚Π΅ΡΡŒ Π½Π° нас

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅

http://rookienerd. com

Π‘ΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Π°Ρ акция

Π’Π°ΠΌ нравятся наши инструмСнты? ПодСлись!

35 Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ΠΎΠ² ΠΊΠΎΠ΄Π° CSS ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² для вашСго сайта Squarespace


Когда Π΄Π΅Π»ΠΎ Π΄ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ Π΄ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Π½Π΅ сСкрСт, Ρ‡Ρ‚ΠΎ я Ρ„Π°Π½Π°Ρ‚ ΠΎΠ΄Π½ΠΎΠΉ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹. (ΠšΠ²Π°Π΄Ρ€Π°Ρ‚Π½ΠΎΠ΅ пространство всСго. ВсС врСмя.)

И ΠΎΠ΄Π½Π° ΠΈΠ· ΠΏΡ€ΠΈΡ‡ΠΈΠ½ ΠΌΠΎΠ΅ΠΉ Π½Π΅ΡƒΠ²ΡΠ΄Π°ΡŽΡ‰Π΅ΠΉ любви ΠΊ этой ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅ Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½Π° позволяСт Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ Π½Π΅ΡΡ‚Π°Π½Π΄Π°Ρ€Ρ‚Π½ΡƒΡŽ, Π½Π΅ ΠΏΠΎΡ…ΠΎΠΆΡƒΡŽ Π½Π° шаблон, Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ Π²Π΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠ½ΡƒΡŽ, ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΡƒΡŽΡ‰ΡƒΡŽ ΠΊΠ»ΠΈΠ΅Π½Ρ‚ ΠΌΠ°ΡˆΠΈΠ½Ρƒ Π²Π΅Π±-сайт … Π±Π΅Π· ΠΊΠΎΠ³Π΄Π°-Π»ΠΈΠ±ΠΎ , Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ!

На самом Π΄Π΅Π»Π΅, я создал ΠΎΠ½Π»Π°ΠΉΠ½-курс , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Π²Π°ΠΌ, ΠΊΠ°ΠΊ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ!

Если Π²Ρ‹ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ ΠΎΡ‚ΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ ΠΎΡ‚ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Ρ„ΠΎΡ€ΠΌΠΎΡ‡Π΅ΠΊ для ΠΏΠ΅Ρ‡Π΅Π½ΡŒΡ ΠΈ ΡƒΠ·Π½Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚Ρ‹Π΅ сСкрСты создания Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰Π΅Π³ΠΎ Π²Π΅Π±-сайта, Ρ‚ΠΎ Square Secrets β€” это мСсто для вас!

( ΠΠ°Π΄Π΅Π΅Ρ‚Π΅ΡΡŒ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ эти Π΄ΡƒΡ€Π°Ρ†ΠΊΠΈΠ΅ Π½ΠΎΠ²Ρ‹Π΅ Π½Π°Π²Ρ‹ΠΊΠΈ Π² Squarespace Π² ΡƒΡΠΏΠ΅ΡˆΠ½Ρ‹ΠΉ, ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π·Π°Π±Ρ€ΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½-бизнСс? Мой курс Square Secrets Business вас Ρ‚ΠΎΠΆΠ΅ ΠΎΡ…Π²Π°Ρ‚ΠΈΠ». )

Π‘Ρ‚Π°Ρ‚ΡŒ ΡΠ²Π΅Ρ€Ρ…ΡƒΡΠΏΠ΅ΡˆΠ½Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠΌ Squarespace ΠΌΠΎΠΆΠ½ΠΎ Π½Π° 100 %. Π±Π΅Π· использования ΠΊΠΎΠ΄Π°, ΠΈ всС ΠΆΠ΅ CSS β€” это ΠΎΠ΄Π½Π° ΠΈΠ· Π²Π΅Ρ‰Π΅ΠΉ, ΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… мСня Ρ‡Π°Ρ‰Π΅ всСго ΡΠΏΡ€Π°ΡˆΠΈΠ²Π°ΡŽΡ‚ ΠΈΠ»ΠΈ Ρ‡Π°Ρ‰Π΅ всСго ΠΈΡ‰ΡƒΡ‚ Π² Π±Π»ΠΎΠ³Π΅!

Π― Ρ‚Π°ΠΊ понимаю, Π΄Π°ΠΉΡ‚Π΅ людям Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ хотят, Π²Π΅Ρ€Π½ΠΎ? БСгодня я дСлаю ΠΎΠ±Π·ΠΎΡ€ всСх Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… бСсплатных Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ΠΎΠ² ΠΊΠΎΠ΄Π° CSS ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² для использования Π½Π° вашСм сайтС Squarespace!

PS. ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ Π²ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ ΠΊΠ°ΠΆΠ΄ΡƒΡŽ строку CSS, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΉΡ‚ΠΈ, я Π½Π°ΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ Π²Π°ΠΌ сначала ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ с этим нСбольшим ΠΎΡ‚ΠΊΠ°Π·ΠΎΠΌ ΠΎΡ‚ отвСтствСнности ΠΎΡ‚ Π½Π°ΡˆΠΈΡ… Π΄Ρ€ΡƒΠ·Π΅ΠΉ ΠΈΠ· Squarespace.

Π£Π΄Π°Ρ‡Π½ΠΎΠ³ΠΎ кодирования!

1. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ тСкстового Π±Π»ΠΎΠΊΠ° Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ стиля Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 4, Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 5)

Π₯ΠΎΡ‚ΠΈΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊ тСкстовому Π±Π»ΠΎΠΊΡƒ Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΡΡ‚ΠΈΠ»ΡŒ, Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈΠ»ΠΈ Ρ†Π²Π΅Ρ‚ ΡˆΡ€ΠΈΡ„Ρ‚Π°, ΠΏΠΎΠΌΠΈΠΌΠΎ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΡƒΠΆΠ΅ Π½Π°Π·Π½Π°Ρ‡Π΅Π½Ρ‹ Π² настройках вашСго Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π° стилСй? Messua Π² Mesua Design & Media ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ Π΅Π΅ пост Как Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ h5 ΠΈ h5 Π½Π° ваш сайт Squarespace.


2. Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ тСкст Π² Squarespace

ΠœΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‡Π΅Π½ΡŒ просто Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ вашСго Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ тСкста, созданного сначала Π² Ρ‡Π΅ΠΌ-Ρ‚ΠΎ Π²Ρ€ΠΎΠ΄Π΅ Adobe Illustrator ΠΈΠ»ΠΈ Canva, Π½ΠΎ Π΅ΡΡ‚ΡŒ нСсколько ΠΏΡ€ΠΈΡ‡ΠΈΠ½, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ использования CSS, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ внСшний Π²ΠΈΠ΄!

БСатрис ΠΈΠ· Thirty Eight Visuals рассказываСт ΠΎΠ±ΠΎ всСх этих ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π°Ρ… (ΠΈ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΠΈΡ… Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ) здСсь.



3. Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚Π΅ Ρ†Π²Π΅Ρ‚ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

Π₯ΠΎΡ‚ΠΈΡ‚Π΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΠΆΠΈΠ²ΠΈΡ‚ΡŒ свой сайт с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π½Π΅ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΉ ΠΌΠ°Π³ΠΈΠΈ измСнСния Ρ†Π²Π΅Ρ‚Π° ΠΊΠ½ΠΎΠΏΠΎΠΊ? Наши Π΄Ρ€ΡƒΠ·ΡŒΡ ΠΈΠ· InsideTheSquare Ρ€Π°ΡΡΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚, ΠΊΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ Π²Π°ΡˆΠΈΡ… ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»ΡŒ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚ Π½Π° Π½ΠΈΡ… курсор Π² это Π²ΠΈΠ΄Π΅ΠΎ!


4. Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ тСкста Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

Нравится эффСкт измСнСния ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ? Π’ΠΎΡ‚ Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ изящный способ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ для Π²Π°ΡˆΠΈΡ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ! Π‘Π»Π΅Π΄ΡƒΠΉΡ‚Π΅ Π·Π° ΠšΠ°Ρ€Π»ΠΎΠΌ ДТонсоном, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΡ€ΠΎΠ²Π΅Π΄Π΅Ρ‚ вас Ρ‡Π΅Ρ€Π΅Π· шаги ΠΏΠΎ добавлСнию тСкста ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π² этом Π²ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊΠ΅!





5. ΠΠΠ‘Π’Π ΠΠ˜Π’ΠΠ™Π’Π• Π‘Π’ΠžΠ˜ БАННЕРЫ Π‘ ΠŸΠ•Π§Π•ΠΠ¬Π―ΠœΠ˜ Π•Π‘ Π’ SQUARESPACE

Π˜Ρ‚Π°ΠΊ, Π²Ρ‹ Π·Π½Π°Π΅Ρ‚Π΅, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ΅Π½ Π±Π°Π½Π½Π΅Ρ€ с Ρ„Π°ΠΉΠ»Π°ΠΌΠΈ cookie для Π•Π‘ (спасибо GDPR), Π½ΠΎ Π²Ρ‹ Π½Π΅ совсСм Π² восторгС ΠΎΡ‚ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² оформлСния Π±Π°Π½Π½Π΅Ρ€ΠΎΠ² с Ρ„Π°ΠΉΠ»Π°ΠΌΠΈ cookie Π² Squarespace. НС Π±Π΅ΡΠΏΠΎΠΊΠΎΠΈΡ‚ΡŒΡΡ! «БСдьмая станция» ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π½Π°ΠΌ большС, Ρ‡Π΅ΠΌ ΠΎΠ΄ΠΈΠ½ способ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ этого ΠΏΠ»ΠΎΡ…ΠΎΠ³ΠΎ парня Π² 9.0422 этот пост (Π²ΠΊΠ»ΡŽΡ‡Π°Ρ CSS для измСнСния Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ, Ρ„ΠΎΠ½Π° ΠΈ стиля ΠΊΠ½ΠΎΠΏΠΎΠΊ cookie-Π±Π°Π½Π½Π΅Ρ€Π°, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΏΡ€ΠΈΡ‡ΡƒΠ΄Π»ΠΈΠ²ΡƒΡŽ Ρ‚Π΅Π½ΡŒ!)


6. НастройтС ссылки Β«ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅Β» для своСго Π±Π»ΠΎΠ³Π°

Π₯ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ссылки Β«ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅Β» Π² вашСм Π±Π»ΠΎΠ³Π΅ Squarespace Π±Ρ‹Π»ΠΈ Ρ‡ΡƒΡ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ Ρ„ΠΈΡ€ΠΌΠ΅Π½Π½Ρ‹ΠΌΠΈ? Π£ нашСй Π΄Π΅Π²ΡƒΡˆΠΊΠΈ МСган Миннс Π΅ΡΡ‚ΡŒ ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Π°ΠΌ Π½ΡƒΠΆΠ΅Π½, Ρ‡Ρ‚ΠΎΠ±Ρ‹ это ΠΏΡ€ΠΎΠΈΠ·ΠΎΡˆΠ»ΠΎ! ΠžΠ·Π½Π°ΠΊΠΎΠΌΡŒΡ‚Π΅ΡΡŒ с Π΅Π΅ сообщСниСм . Как Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ссылку Β«ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅Β» Π² Π±Π»ΠΎΠ³Π΅ Squarespace. Π’Ρ‹Π΄Π΅Ρ€ΠΆΠΊΠΈ ΠΈΠ· сообщСния 9.0423, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС!


7. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡƒΠ³Π»ΠΎΠ²Ρ‹Ρ… сСкций

Π₯ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ сСкций Π±ΠΎΠ»Π΅Π΅ интСрСсным? Π’ S-E Web Design Π΅ΡΡ‚ΡŒ нСсколько настроСк CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Π°ΠΌ понравятся! ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ ΠΈΡ… Π²ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ здСсь!


8. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Ρ„ΠΈΡ€ΠΌΠ΅Π½Π½Ρ‹ΠΉ Ρ„ΠΎΠ½ + Ρ€Π°ΠΌΠΊΡƒ ΠΊ Ρ†ΠΈΡ‚ΠΈΡ€ΡƒΠ΅ΠΌΠΎΠΌΡƒ тСксту

Π£ Squarespace Π΅ΡΡ‚ΡŒ нСсколько Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ Ρ†ΠΈΡ‚Π°Ρ‚ Π½Π° ваш Π²Π΅Π±-сайт ΠΈΠ»ΠΈ Π² сообщСниС Π² Π±Π»ΠΎΠ³Π΅. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ тСкстовый Π±Π»ΠΎΠΊ, Π²Ρ‹Π±Ρ€Π°Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ Ρ†ΠΈΡ‚Π°Ρ‚Ρ‹ для вашСго тСкста, ΠΈΠ»ΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ фактичСский Π±Π»ΠΎΠΊ Ρ†ΠΈΡ‚Π°Ρ‚Ρ‹. Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π±Π»ΠΎΠΊΠ° Ρ†ΠΈΡ‚Π°Ρ‚ Squarespace Π² дСйствии…

>
Β«Π’Π΄ΠΎΡ…Π½ΠΎΠ²Π»ΡΡŽΡ‰Π°Ρ Ρ†ΠΈΡ‚Π°Ρ‚Π° AF, которая заставляСт вас Ρ…ΠΎΡ‚Π΅Ρ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ всю свою Тизнь».

β€” Π§Π΅Π»ΠΎΠ²Π΅ΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ Π²Ρ‹ Π²ΠΎΡΡ…ΠΈΡ‰Π°Π΅Ρ‚Π΅ΡΡŒ

Π₯отя Π΅ΡΡ‚ΡŒ ΠΊΠΎΠ΅-Ρ‡Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ для простоты, Π²Ρ‹, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΠΈΡ‰Π΅Ρ‚Π΅ способы Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ яркости своим Ρ†ΠΈΡ‚Π°Ρ‚Π°ΠΌ. MyBillieDesigns.com содСрТит Ρ‚ΠΎΠ»ΡŒΠΊΠΎ CSS-Ρ…Π°ΠΊ Squarespace, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Π°ΠΌ Π½ΡƒΠΆΠ΅Π½, Ρ‡Ρ‚ΠΎΠ±Ρ‹ это ΠΏΡ€ΠΎΠΈΠ·ΠΎΡˆΠ»ΠΎ.

(Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΉΡ‚ΠΈ этот пост здСсь .)



9. БКРЫВЬ Π—ΠΠ“ΠžΠ›ΠžΠ’ΠžΠš, ΠΠΠ’Π˜Π“ΠΠ¦Π˜Π― И ΠΠ˜Π–ΠΠ˜Π™ ΠžΠ’Π§Π•Π’ НА ΠšΠžΠΠšΠ Π•Π’ΠΠ«Π₯ БВРАНИЦАΠ₯ SQUARESPACE

Если Ρƒ вас Π΅ΡΡ‚ΡŒ страница с ΠΎΡ‡Π΅Π½ΡŒ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΉ Ρ†Π΅Π»ΡŒΡŽ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ посСтитСля ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° ваш список адрСсов элСктронной ΠΏΠΎΡ‡Ρ‚Ρ‹ ΠΈΠ»ΠΈ ΠΊΡƒΠΏΠΈΡ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π½Π° страницС ΠΏΡ€ΠΎΠ΄Π°ΠΆ, считаСтся Π»ΡƒΡ‡ΡˆΠ΅ΠΉ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ Π½Π° этой страницС (ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ сдСлали).

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это, Π²Ρ‹ Π·Π°Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ всС Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΎΡ‚Π²Π»Π΅ΠΊΠ°ΡŽΡ‰ΠΈΠ΅ Ρ„Π°ΠΊΡ‚ΠΎΡ€Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ ΠΌΠΎΠ³ΡƒΡ‚ увСсти ΠΈΡ… с этой страницы (Π΄Π°, Π΄Π°ΠΆΠ΅ Ссли это Π½Π° Π΄Ρ€ΡƒΠ³ΡƒΡŽ страницу Π½Π° вашСм собствСнном сайтС)!

Π― дСлюсь ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΌ CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Π°ΠΌ Π½ΡƒΠΆΠ΅Π½, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ», Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ ΠΈ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ» Π² этот пост.

И ΠΏΠΎΠΊΠ° Π²Ρ‹ Ρ‚Π°ΠΌ, Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ CSS Π»Π°ΠΉΡ„Ρ…Π°ΠΊ Π½ΠΎΠΌΠ΅Ρ€ 10, 11 ΠΈ 12…

10. БКРЫВЬ ΠŸΠžΠ”Π§Π•Π ΠšΠ˜Π’ΠΠΠ˜Π• Π‘Π‘Π«Π›ΠžΠš ΠΠ˜Π–Π• Π’ ΠΠ˜Π–ΠΠ•Πœ ΠšΠ’ΠΠ”Π ΠΠ’ΠΠžΠœ ΠŸΠ ΠžΠ‘Π’Π ΠΠΠ‘Π’Π’Π•

Π”Π°ΠΆΠ΅ Ссли шаблон I Π― ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ Π² Π½ΠΈΠΆΠ½Π΅ΠΌ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ»Π΅, Π² ΠΈΡ‚ΠΎΠ³Π΅ я просто создаю тСкстовыС ссылки для своСго Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ»Π°, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΌΠ½Π΅ большС нравится Π³ΠΈΠ±ΠΊΠΎΡΡ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½Π° с тСкстовыми ссылками, Ρ‡Π΅ΠΌ с Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠ΅ΠΉ Π² Π½ΠΈΠΆΠ½Π΅ΠΌ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ»Π΅.

Однако ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ ΠΈΠΌΠ΅ΡŽΡ‚ подчСркивания для ссылок, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ ΠΈΡ… довольно сТатыми ΠΈ бСспорядочными.

Если Π²Ρ‹ Ρ‚ΠΎΠΆΠ΅ Π½Π΅ ΠΏΠΎΠΊΠ»ΠΎΠ½Π½ΠΈΠΊ подчСркивания, Ρ‚ΠΎ Ρƒ мСня Π΅ΡΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Π°ΠΌ Π½ΡƒΠΆΠ΅Π½, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·Π±Π°Π²ΠΈΡ‚ΡŒΡΡ ΠΎΡ‚ Π½Π΅Π³ΠΎ Π² этом постС.

11. Π ΠΠ—Π”Π•Π›Π˜Π’Π• ΠΠ˜Π–ΠΠ˜Π™ Π€Π£Π’Π•Π  SQUARESPACE НА ДВА ЦВЕВНЫΠ₯ Π‘Π›ΠžΠšΠ

Π­Ρ‚ΠΎ ΠΌΠΎΠΉ Π»ΡŽΠ±ΠΈΠΌΡ‹ΠΉ Π±Π»ΠΎΠΊ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ я всСгда люблю Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Π°Ρ€ΠΊΠΈ Π² Ρ„ΡƒΡ‚Π΅Ρ€Π΅, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ страницС сайта. поэтому ΠΎΠ½ΠΈ, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, ΠΎΡ‡Π΅Π½ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΡƒΡŽΡ‚ΡΡ!

ΠžΠ±Ρ‹Ρ‡Π½ΠΎ Π½ΠΈΠΆΠ½ΠΈΠ΅ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ»Ρ‹ Squarespace ΠΈΠΌΠ΅ΡŽΡ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ Ρ†Π²Π΅Ρ‚, ΠΈ ΠΌΠ½Π΅ нравится, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΌΠΎΠΉ ΠΏΠΎΠ΄Π°Ρ€ΠΎΠΊ Π±Ρ‹Π» Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π·Π°ΠΌΠ΅Ρ‚Π½Ρ‹ΠΌ ΠΈ популярным! Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, созданиС Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ»Π° Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚Π° Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π² этом. (Π£Π·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ здСсь .)

12. Π˜Π—ΠœΠ•ΠΠ•ΠΠ˜Π• ЦВЕВА ЀОНА Π‘Π›ΠžΠšΠ Π“ΠΠ›Π•Π Π•Π˜ НА ΠŸΠ ΠžΠ—Π ΠΠ§ΠΠ«Π™ Π˜Π›Π˜ Π¦Π’Π•Π’

Вас Ρ€Π°Π·Π΄Ρ€Π°ΠΆΠ°Π΅Ρ‚ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° Π±Π»ΠΎΠΊΠ° Π³Π°Π»Π΅Ρ€Π΅ΠΈ? Π― Ρ‚ΠΎΠΆΠ΅. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΉΡ‚ΠΈ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ CCS, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ΠΉ для измСнСния этого здСсь .

13. Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Π½Ρ‹ΠΉ Ρ„ΠΎΠ½ ΠΊ Ρ€Π°Π·Π΄Π΅Π»Ρƒ страницы

Если Π²Ρ‹ ΠΈΡ‰Π΅Ρ‚Π΅ способ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Π½Ρ‹ΠΉ, ΡƒΠ³Π»ΠΎΠ²ΠΎΠΉ ΠΈΠ»ΠΈ ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠΉ Ρ„ΠΎΠ½ ΠΊ Ρ€Π°Π·Π΄Π΅Π»Π°ΠΌ страницы (с параллаксной ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ ΠΈΠ»ΠΈ Π±Π΅Π· Π½Π΅Π΅), Π½Π΅ ΠΈΡ‰ΠΈΡ‚Π΅ дальшС Ρ‡Π΅ΠΌ этот пост β€” Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΠΎΡ‚ Π½Π°ΡˆΠΈΡ… Π΄Ρ€ΡƒΠ·Π΅ΠΉ ΠΈΠ· Thirty Eight Visuals!


14. Π‘ΠžΠ—Π”ΠΠ™Π’Π• Π“Π ΠΠ”Π˜Π•ΠΠ’ΠΠ«Π• КНОПКИ

ВСрнСмся ΠΊ этим ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ! Если ΠΊΠ½ΠΎΠΏΠΊΠ° сплошного Ρ†Π²Π΅Ρ‚Π° просто Π½Π΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚, ΠΈ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ нСбольшой Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ Π² Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΊΠ½ΠΎΠΏΠΊΠΈ Squarespace, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ этот пост Π½Π° InsideTheSquare.co .


15. Π‘Π΄Π΅Π»Π°ΠΉΡ‚Π΅ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΡƒΡŽ линию

Squarespace упростил ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π·Π°Π΄Π°Ρ‡Ρƒ добавлСния Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ (ΠΊΠ°ΠΊ Π²Ρ‹ ΡƒΠΆΠ΅ догадались) Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°.

Но ΠΏΠΎΠΊΠ° Squarespace Π½Π΅ Π²Π²Π΅Π΄Π΅Ρ‚ Π±Π»ΠΎΠΊ с Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠ΅ΠΉ, Π½Π°ΠΌ придСтся ΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ Π½Π° этот ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ малСнький Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ CSS ΠΎΡ‚ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ Minimist.ca.


16. УстановитС Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ для ΠΊΠ½ΠΎΠΏΠΎΠΊ

Если тСкст, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΡ‹ΠΉ Π½Π° Π²Π°ΡˆΠΈΡ… ΠΊΠ½ΠΎΠΏΠΊΠ°Ρ…, Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ Π΄Π»ΠΈΠ½Ρ‹, Squarespace автоматичСски ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅Ρ‚ Π²Π°ΡˆΡƒ ΠΊΠ½ΠΎΠΏΠΊΡƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½Π° соотвСтствовала тСксту. Если Π²Ρ‹ ΠΈΡ‰Π΅Ρ‚Π΅ способ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΏΠΎΡΡ‚ΠΎΡΠ½Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π½Π° Jessicahainesdesign. com , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π΅Π΅ простоС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ CSS, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ это!


Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ Π·Π°Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ Π΅Π΅ Π΄Ρ€ΡƒΠ³ΡƒΡŽ ΠΎΡ‡Π΅Π½ΡŒ ΡƒΠ΄ΠΎΠ±Π½ΡƒΡŽ настройку CCS…

17. НастройтС Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈ Ρ†Π²Π΅Ρ‚ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π² Π±Π»ΠΎΠΊΠ°Ρ… сводки

Π‘Π»ΠΎΠΊΠΈ сводки β€” ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ способ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚ вашСго Π±Π»ΠΎΠ³Π° Squarespace (ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎΠ± этом Π² ΠΌΠΎΠ΅ΠΌ постС Как ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ страницы Π±Π»ΠΎΠ³Π° Squarespace ). Но настройки Squarespace ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для отобраТСния сводной ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎ Π±Π»ΠΎΠΊΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ Π²Π°ΠΌ Π½Π΅ ΠΏΠΎΠ½Ρ€Π°Π²ΠΈΡ‚ΡŒΡΡ. Π•Ρ‰Π΅ Ρ€Π°Π· Jessicahainesdesign.com ΠΏΡ€ΠΈΡ…ΠΎΠ΄ΠΈΡ‚ Π½Π° ΠΏΠΎΠΌΠΎΡ‰ΡŒ с этим постом.





18. ΠžΠ‘Π Π•Π—ΠΠ™Π’Π• Π˜Π—ΠžΠ‘Π ΠΠ–Π•ΠΠ˜Π― ПО ΠšΠ Π£Π“Π£

Устали ΠΏΠΎΠ΄Π³ΠΎΡ‚Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒ изобраТСния Π² Canva ΠΈΠ»ΠΈ Adobe Illustrator? Insidethesquare.co содСрТит Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ CSS, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ΠΉ для ΠΎΠ±Ρ€Π΅Π·ΠΊΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² ΠΊΡ€ΡƒΠ³ прямо Π² Squarespace!



19. Π£Π΄Π°Π»ΠΈΡ‚Π΅ дСфисы Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах

Π’Ρ‹ ΠΏΠΎΡ‚Ρ€Π°Ρ‚ΠΈΠ»ΠΈ ΠΌΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π½Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ своСго сайта ΠΈ ΠΎΡ‚Ρ‚Π°Ρ‡ΠΈΠ²Π°Π½ΠΈΠ΅ Π΅Π³ΠΎ ΠΊΠΎΠΏΠΈΠΈ, ΠΈ Π²Ρ‹ ΠΎΡ‡Π΅Π½ΡŒ Π΄ΠΎΠ²ΠΎΠ»ΡŒΠ½Ρ‹ Ρ‚Π΅ΠΌ, ΠΊΠ°ΠΊ всС выглядит… ΠΏΠΎΠΊΠ° Π²Ρ‹ Π½Π΅ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ΡΡŒ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ Ρ€Π΅ΠΆΠΈΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ являСтся.

Π’Π½Π΅Π·Π°ΠΏΠ½ΠΎ ваши красивыС слова Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π½Π°Π±ΠΈΡ‚Ρ‹ Π½Π°Π΄ΠΎΠ΅Π΄Π»ΠΈΠ²Ρ‹ΠΌΠΈ дСфисами. НС Π²ΠΎΠ»Π½ΡƒΠΉΡ‚Π΅ΡΡŒ, Jgdigital.co содСрТит ΠΊΠ°ΠΊ Ρ€Π°Π· Ρ‚ΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎΠ΅ CSS, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π· ΠΈ навсСгда ΠΏΠΎΠΏΡ€ΠΎΡ‰Π°Ρ‚ΡŒΡΡ с этими Π½Π΅ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΌΠΈ дСфисами. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΉΡ‚ΠΈ этот пост здСсь.

20. УстановитС сворачиваСмый Ρ€Π°Π·Π΄Π΅Π» часто Π·Π°Π΄Π°Π²Π°Π΅ΠΌΡ‹Ρ… вопросов Π² Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π΅

Π Π°Π·Π΄Π΅Π»Ρ‹ часто Π·Π°Π΄Π°Π²Π°Π΅ΠΌΡ‹Ρ… вопросов ΠΈΠΌΠ΅ΡŽΡ‚ Ρ‚Π΅Π½Π΄Π΅Π½Ρ†ΠΈΡŽ ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ многословными, ΠΈ Ρ€Π°Π΄ΠΈ эстСтики ΠΈ простоты Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ Π²Ρ‹, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΠΈΡ‰Π΅Ρ‚Π΅ способ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ этот Ρ€Π°Π·Π΄Π΅Π» вашСго сайта Π² чистотС! Π‘ΠΊΠ»Π°Π΄Π½Ρ‹Π΅ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π½Ρ‹Π΅ Π±Π»ΠΎΠΊΠΈ — ваш ΠΎΡ‚Π²Π΅Ρ‚! И Π² этом постС KaylieghNoele.com Π΅ΡΡ‚ΡŒ всС, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π·Π½Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠœΠ°Ρ€ΠΈ Кондо Ρ€Π°Π·Π΄Π΅Π» часто Π·Π°Π΄Π°Π²Π°Π΅ΠΌΡ‹Ρ… вопросов вашСго сайта!


21. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊ ΠΎΠ΄Π½ΠΎΠΌΡƒ слову Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ΅ слово Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅, Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π° ΠΊ этому слову β€” ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ способ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это. И Ρ…ΠΎΡ€ΠΎΡˆΠΈΠ΅ новости, Thirtyeightvisuals.com снова возвращаСтся с этим постом , Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ рассказываСтся, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ CSS для достиТСния Ρ†Π΅Π»ΠΈ!



22. CUSTOM CSS Для мобильного Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΡˆΡ€ΠΈΡ„Ρ‚Π°

Застрял Π²Ρ‹Π±ΠΎΡ€ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΌ ΠΈ Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹ΠΌ, ΠΊΠΎΠ³Π΄Π° Π΄Π΅Π»ΠΎ Π΄ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ Π΄ΠΎ стиля ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²? Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ. Laceypassmandesign.com расскаТСт Π²Π°ΠΌ ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Ρ… CSS-ΠΊΠΎΠ΄Π°Ρ… Π² своСм постС Как Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Squarespace для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств | Π§Π°ΡΡ‚ΡŒ вторая.


23. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π·Π½Π°Ρ‡ΠΊΠΈ ΠΊ ссылкам Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ

Π₯ΠΎΡ‚ΠΈΡ‚Π΅ ΠΎΠΆΠΈΠ²ΠΈΡ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ своСй Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ Squarespace? Thirtyeightvisuals.com ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ Π·Π½Π°Ρ‡ΠΊΠΈ вашСго Π±Ρ€Π΅Π½Π΄Π°! И ΠΎΠ½ΠΈ подСлились ΠΎΠ΄Π½ΠΈΠΌ Π±ΠΈΡ‚ΠΎΠΌ ΠΊΠΎΠ΄Π° CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Π°ΠΌ Π½ΡƒΠΆΠ΅Π½, Π² этом постС.


24. Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° Ρ„ΠΎΠ½Π° ΠΊ тСкстовому Π±Π»ΠΎΠΊΡƒ

Если Π²Ρ‹ ΠΏΡ€ΠΈΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚Π΅ΡΡŒ Ρ‚Π΅Π½Π΄Π΅Π½Ρ†ΠΈΠΈ Π΄ΠΎΠ»Π³ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ страниц Π½Π° своСм Π²Π΅Π±-сайтС, Π²Π°ΠΆΠ½ΠΎ Ρ€Π°Π·Π±ΠΈΡ‚ΡŒ страницу Π½Π° Ρ‡Π΅Ρ‚ΠΊΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅, Π»Π΅Π³ΠΊΠΎ усваиваСмыС Ρ€Π°Π·Π΄Π΅Π»Ρ‹ (особСнно ΠΏΡ€ΠΈ Π½Π°Π»ΠΈΡ‡ΠΈΠΈ ΠΌΠ½ΠΎΠ³ΠΎ тСкста!)

Π‘Π»ΠΎΠΊΠΈΡ€ΠΎΠ²ΠΊΠ° Ρ†Π²Π΅Ρ‚ΠΎΠΌ β€” ΠΎΠ΄ΠΈΠ½ ΠΈΠ· самых эффСктивных способов ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡ΠΈΡ‚ΡŒ Π½Π°Ρ‡Π°Π»ΠΎ Π½ΠΎΠ²ΠΎΠ³ΠΎ Ρ€Π°Π·Π΄Π΅Π»Π° ΠΈ Bigcatcreative. com ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ‚ всСми знаниями CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Π°ΠΌ Π½ΡƒΠΆΠ½Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ ΠΊ Ρ„ΠΎΠ½Ρƒ вашСго тСкстового Π±Π»ΠΎΠΊΠ° ΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ! (ΠŸΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅ , Ρ‡Ρ‚ΠΎ сообщСниС здСсь ).

25. УстановитС ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π±Π»ΠΎΠ³Π°

Как ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Juniperandroots.com , ΡˆΠΈΡ€ΠΈΠ½Π° страницы вашСго Π±Π»ΠΎΠ³Π° ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π±ΡƒΠ΄Π΅Ρ‚ автоматичСски Ρ€Π°Π²Π½Π° Ρ‚ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Π΅, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π²Ρ‹ установили для ΡˆΠΈΡ€ΠΈΠ½Ρ‹ страницы Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ стилСй вашСго сайта. Π’ зависимости ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, насколько ΡˆΠΈΡ€ΠΎΠΊ этот Π½Π°Π±ΠΎΡ€, читатСлям ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Ρ‚Ρ€ΡƒΠ΄Π½ΠΎ ΡΠ»Π΅Π΄ΠΈΡ‚ΡŒ Π·Π° вашими сообщСниями Π² Π±Π»ΠΎΠ³Π΅. Она ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ ΡΡƒΠ·ΠΈΡ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ вашСго Π±Π»ΠΎΠ³Π° ΠΈ Π² этом постС , ΠΎΠ½Π° рассказываСт, ΠΊΠ°ΠΊ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ CSS.

26. Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚Π΅ Ρ†Π²Π΅Ρ‚Π° Π·Π½Π°Ρ‡ΠΊΠΎΠ² ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСтСй

Π—Π½Π°Ρ‡ΠΊΠΈ ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСтСй довольно ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹, Π½ΠΎ это Π½Π΅ Π·Π½Π°Ρ‡ΠΈΡ‚, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΡ… Ρ‡ΡƒΡ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ Ρ„ΠΈΡ€ΠΌΠ΅Π½Π½Ρ‹ΠΌΠΈ. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡƒΠ·Π½Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ CSS для измСнСния Ρ†Π²Π΅Ρ‚Π° этих извСстных Π·Π½Π°Ρ‡ΠΊΠΎΠ², ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π½Π° этот пост ΠΎΡ‚ Alexanderdesignco. com .


27. Π‘ΠΊΡ€Ρ‹Ρ‚ΡŒ изобраТСния Pinterest

Если Π²Ρ‹ создаСтС ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ для Π±Π»ΠΎΠ³Π° ΠΈ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ вывСсти свою ΡΡ‚Ρ€Π°Ρ‚Π΅Π³ΠΈΡ‡Π΅ΡΠΊΡƒΡŽ ΠΈΠ³Ρ€Ρƒ Pinterest Π½Π° Π½ΠΎΠ²Ρ‹ΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ, ΠΈΠΌΠ΅Ρ‚ΡŒ нСсколько ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΊΡ€Π΅ΠΏΠ»ΡΡ‚ΡŒ, Π² сообщСниях Π±Π»ΠΎΠ³Π° ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‡Π΅Π½ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠ΅ΠΉ ΠΈΠ΄Π΅Π΅ΠΉ! Но Π²Ρ‹ Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ всС эти изобраТСния появлялись Π² вашСм постС. ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ ΠΊ Как ΡΠΊΡ€Ρ‹Ρ‚ΡŒ изобраТСния Pinterest Π² сообщСнии Π±Π»ΠΎΠ³Π° Squarespace , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ этот ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠ΄Π°!


28. Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ тСкста

Π˜Ρ‰Π΅Ρ‚Π΅ способ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ваш тСкст исчСзал ΠΏΡ€ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ страницы? ΠšΡ€ΠΈΡ ΠΈΠ· Schwartz-edmisten.com Ρ‚Π²ΠΎΠΉ ΠΏΠ°Ρ€Π΅Π½ΡŒ! ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ этот Π²ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ CSS для добавлСния Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π² тСкст Squarespace!

29. ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒΠ½Π°Ρ индСксная страница Высота Π±Π°Π½Π½Π΅Ρ€Π°

НуТны всС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ индСксной страницы, Π½ΠΎ ΠΏΡ€ΠΈ этом ΠΎΠ½Π° Π΄ΠΎΠ»ΠΆΠ½Π° Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ваши страницы? Π£ ΠšΡ€ΠΈΡΠ° Π΅ΡΡ‚ΡŒ Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Π²Π΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠ½Ρ‹ΠΉ бСсплатный CSS-Ρ…Π°ΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΆΠ΄Π΅Ρ‚ вас ΠΏΠΎΠ²Π΅Ρ€Ρ… здСсь .



30. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ собствСнный Ρ„ΠΎΠ½ для Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΏΠΎ сайту

Π­Ρ‚Π° супСр крутая идСя ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Squarespace ΠΏΡ€ΠΈΡˆΠ»Π° ΠΊ Π²Π°ΠΌ с mybilliedesigns.com . ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ этот пост , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΠΎΠ½Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ CSS для оформлСния Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΏΠΎ сайту.



31. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ эффСктов Ρ€ΠΎΠ»Π»ΠΎΠ²Π΅Ρ€Π° Π½Π° Π±Π»ΠΎΠΊΠ°Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Squarespace

Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Π·Π°Π±Π°Π²Π½Ρ‹ΠΉ способ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ Π½Π° ваш сайт Squarespace β€” этот пост ΠΎΡ‚ Pixelhaze.academy . Π­Ρ‚ΠΎΡ‚ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ CSS позволяСт Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ΅ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ появляСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚ΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»ΡŒ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚ курсор Π½Π° это ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.


32. ИзмСнСниС Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах

Как ΠΎΡ‚ΠΌΠ΅Ρ‡Π°Π΅Ρ‚ Rebeccagracedesigns.com , Π² наши Π΄Π½ΠΈ обСспСчСниС совмСстимости вашСго сайта с ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΌΠΈ устройствами Π½Π΅ ΠΏΠΎΠ΄Π»Π΅ΠΆΠΈΡ‚ ΠΎΠ±ΡΡƒΠΆΠ΄Π΅Π½ΠΈΡŽ. НС Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для Π²Π°ΡˆΠΈΡ… посСтитСлСй, Π½ΠΎ ΠΈ для Π‘ΠΎΠ³Π° SEO, ΠΏΡ€ΠΎΡ‡Π΅ΡΡ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎ ваш сайт, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, насколько высоко ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Ρ€Π°Π½ΠΆΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ вас Π² этом поискС Google!

Но просто ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ваш сайт Ρ€Π°Π±ΠΎΡ‚Π°Π» Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах, нСдостаточно, Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ваши ΡΡƒΠΌΠ°ΡΡˆΠ΅Π΄ΡˆΠΈΠ΅ дизайнСрскиС Π½Π°Π²Ρ‹ΠΊΠΈ Ρ‚ΠΎΠΆΠ΅ ΠΏΠ΅Ρ€Π΅Π½ΠΎΡΠΈΠ»ΠΈΡΡŒ! Π’ этом постС Π Π΅Π±Π΅ΠΊΠΊΠ° ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π½Π°ΠΌ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ CSS для измСнСния Ρ€Π°Π·ΠΌΠ΅Ρ€Π° Π²Π°ΡˆΠΈΡ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² Squarespace, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ выглядСли Π²Π΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠ½ΠΎ, нСзависимо ΠΎΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° экрана!


33. Π‘ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах

Иногда, нСзависимо ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π΄Π΅Π»Π°Π΅Ρ‚Π΅, ваши изобраТСния ΠΈΠ»ΠΈ Π³Ρ€Π°Ρ„ΠΈΠΊΠ° просто Π½Π΅ совсСм ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ выглядят Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах, Π½ΠΎ ΠΈΡ… ΠΏΠΎΠ»Π½ΠΎΠ΅ ΡƒΠ΄Π°Π»Π΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ваш Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΡ€Ρ‚ΠΈΡ‚ΡŒ Π΅Π³ΠΎ! Π’ этом постС ΠΎΡ‚ Ljmediahouse.com ΠΎΠ½ΠΈ Ρ€Π°ΡΡΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚, ΠΊΠ°ΠΊΠΎΠΉ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ CSS Π²Π°ΠΌ Π½ΡƒΠΆΠ΅Π½, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ ΡΠΎΡ…Ρ€Π°Π½ΡΡ‚ΡŒ свои изобраТСния Π½Π° Ρ€Π°Π±ΠΎΡ‡Π΅ΠΌ столС ΠΈ Π²ΠΎΠ»ΡˆΠ΅Π±Π½Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ Π·Π°ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ ΠΈΡ… ΠΈΡΡ‡Π΅Π·Π°Ρ‚ΡŒ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах!


34. ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π° Π² строкС Π½Π° мобильном устройствС

Π­Ρ‚ΠΎ для ΠΌΠΎΠΈΡ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ элСктронной ΠΊΠΎΠΌΠΌΠ΅Ρ€Ρ†ΠΈΠΈ Squarespace. ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ Π²ΠΈΠ΄ Π΄Π΅Π»Π°Π΅Ρ‚ ваши списки ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠ² слишком малСнькими? ΠŸΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅ этот пост ΠΎΡ‚ Decibelpromo.com для настройки CSS, которая Π²Π°ΠΌ Π½ΡƒΠΆΠ½Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ваши ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π»ΠΈΡΡŒ Π² ΠΎΠ΄Π½ΠΎΠΌ Ρ„Π°ΠΉΠ»Π΅!


35. Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΡƒΡŽ Ρ‚ΠΈΡ‚ΡƒΠ»ΡŒΠ½ΡƒΡŽ страницу

Если Π²Ρ‹ Π½Π΅ ΡΠ²Π»ΡΠ΅Ρ‚Π΅ΡΡŒ ΠΏΠΎΠΊΠ»ΠΎΠ½Π½ΠΈΠΊΠΎΠΌ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Ρ‚ΠΈΡ‚ΡƒΠ»ΡŒΠ½Ρ‹Ρ… страниц, ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅ΠΌΡ‹Ρ… Π² настоящСС врСмя Π² Squarespace, Π²Ρ‹ Π·Π°Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ этот CSS-Ρ…Π°ΠΊ ΠΎΡ‚ Heathertovey.com , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Π²Π°ΠΌ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΎΠ±Π»ΠΎΠΆΠΊΠΈ своими Ρ€ΡƒΠΊΠ°ΠΌΠΈ!




Π’Π°ΠΌ Ρ‚Π°ΠΊΠΆΠ΅ понравится . . .
  • Squarespace CSS: Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ Π·Π½Π°Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅Π΄ Π½Π°Ρ‡Π°Π»ΠΎΠΌ Ρ€Π°Π±ΠΎΡ‚Ρ‹ Β Β Β 

  • Squarespace CSS: ΠΊΠ°ΠΊ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Ρ‚Π°Ρ€Π³Π΅Ρ‚ΠΈΠ½Π³ Π½Π° ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ страницы, Ρ€Π°Π·Π΄Π΅Π»Ρ‹ ΠΈΠ»ΠΈ Π±Π»ΠΎΠΊΠΈ Π½Π° вашСм сайтС Β 

  • Squarespace CSS: 10 совСтов ΠΏΠΎ настройкС ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² ΠΈ тСкстовых Π±Π»ΠΎΠΊΠΎΠ² вашСго сайта Β 

  • Squarespace CSS: 10 способов Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ вашСго сайта

  • Squarespace CSS: 10 бСсплатных Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ΠΎΠ² ΠΊΠΎΠ΄Π° для настройки ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ Π·Π½Π°Ρ‡ΠΊΠΎΠ² вашСго сайта

  • Squarespace CSS: 10 руководств ΠΏΠΎ стилизации ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈ Ρ„ΠΎΡ€ΠΌ вашСго сайта Β Β 

  • Squarespace CSS: 10 Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ΠΎΠ² ΠΊΠΎΠ΄Π° ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² для оформлСния вашСго сайта Π² мобильной вСрсии

  • Squarespace CSS: 10 Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ΠΎΠ² ΠΊΠΎΠ΄Π° для настройки Ρ„ΠΎΠ½Π° ΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚Π° вашСго сайта

  • Squarespace CSS: 10 Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ΠΎΠ² ΠΊΠΎΠ΄Π° ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ для настройки Π±Π»ΠΎΠ³Π° вашСго сайта

Π¨ΠΏΠ°Ρ€Π³Π°Π»ΠΊΠ° ΠΏΠΎ CSS β€” интСрактивная, Π° Π½Π΅ PDF0418 Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ для Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠ³ΠΎ элСмСнта

ВсС ИзмСнСния ВсС свойства

Анимация БвязываСт Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ с элСмСнтом

Анимация DELAY Animation Animation 99999999. 903 9000 9000 9000 902-ΠΉ анимация Animation Animation Animation or in Animation 903.703 903 9000 902. 702. 702-ΠΉ Animation-Delay Halles Animath

animation-duration ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π² сСкундах ΠΈΠ»ΠΈ мс

animation-fill-mode ΡΡ‚ΠΈΠ»ΡŒ, ΠΊΠΎΠ³Π΄Π° анимация Π½Π΅ воспроизводится

animation-iteration-count количСство ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΎΠ² Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

animation-name имя Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ @keyframes

animation-play-state анимация Π·Π°ΠΏΡƒΡ‰Π΅Π½Π° ΠΈΠ»ΠΈ приостановлСна ​​

animation-timing-function ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ кривая Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

backface-visibility элСмСнт Π²ΠΈΠ΄Π΅Π½, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ Π½Π΅ смотрит Π½Π° экран

background всС свойства Ρ„ΠΎΠ½Π° Π² ΠΎΠ΄Π½ΠΎΠΌ объявлСнии

background-attachment Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ фиксировано ΠΈΠ»ΠΈ прокручиваСтся

background-blend-mode Ρ€Π΅ΠΆΠΈΠΌ налоТСния ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ слоя background image

background-origin Π³Π΄Π΅ располоТСно Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅

background-position Π½Π°Ρ‡Π°Π»ΡŒΠ½Π°Ρ позиция Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния

background-repeat способ повторСния Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния

background-size Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния

border устанавливаСт всС свойства Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ Π² ΠΎΠ΄Π½Ρƒ строку

border-bottom-color Ρ†Π²Π΅Ρ‚ Π½ΠΈΠΆΠ½Π΅ΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹

border-bottom-left-radius border-bottom-leftradius

border-bottom-right-radius РАЗДЕЛ НАВКО РАЗДЕЛ ΠŸΠ ΠΠ’Πž

Π‘Ρ‚ΠΈΠ»ΡŒ ΠΏΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π½ΠΎΠΉ ΡˆΡ‚ΡƒΠΊΠΈ Π‘ΠΎΡ€Π΄-Π½ΠΈΠΆΠ½ΠΈΠΉ ΡΡ‚ΠΈΠ»ΡŒ

Бортовая ΡˆΠΈΡ€ΠΈΠ½Π° Π‘ΠΎΡ€Π΄-ниТняя ΡˆΠΈΡ€ΠΈΠ½Π°

Борничная Коллапс Колпс Π³Ρ€Π°Π½ΠΈΡ†Ρ‹

Π“Ρ€Π°Π½ΠΈΡ†Π° Border . ГРЕДА . ГРЕДА. border-image устанавливаСт ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² качСствС Π³Ρ€Π°Π½ΠΈΡ†Ρ‹

border-image-outset ΠΎΠ±Π»Π°ΡΡ‚ΡŒ изобраТСния Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΡ‚ Π·Π° Ρ€Π°ΠΌΠΊΠΈ Ρ€Π°ΠΌΠΊΠΈ

border-image-repeat ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ€Π°ΠΌΠΊΠΈ повторяСтся, округляСтся ΠΈΠ»ΠΈ растягиваСтся

border-image-slice ΠΊΠ°ΠΊ Ρ€Π°Π·Ρ€Π΅Π·Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹

источник изобраТСния Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΏΡƒΡ‚ΡŒ ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹

ΡˆΠΈΡ€ΠΈΠ½Π° изобраТСния Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΡˆΠΈΡ€ΠΈΠ½Π° изобраТСния Π³Ρ€Π°Π½ΠΈΡ†Ρ‹

1 Π³Ρ€Π°Π½ΠΈΡ†Π° слСва 8 Π³Ρ€Π°Π½ΠΈΡ†Π° свойства Π² ΠΎΠ΄Π½Ρƒ строку

Ρ†Π²Π΅Ρ‚ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ слСва Ρ†Π²Π΅Ρ‚ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ слСва

ΡΡ‚ΠΈΠ»ΡŒ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ слСва ΡΡ‚ΠΈΠ»ΡŒ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ слСва

ΡˆΠΈΡ€ΠΈΠ½Π° Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ слСва ΡˆΠΈΡ€ΠΈΠ½Π° Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ слСва

радиус Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ радиус Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅Ρ… Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹Ρ… ΡƒΠ³Π»ΠΎΠ²

Π³Ρ€Π°Π½ΠΈΡ†Π° правая правая Π³Ρ€Π°Π½ΠΈΡ†Π° свойства Π² ΠΎΠ΄Π½Ρƒ строку

Π³Ρ€Π°Π½ΠΈΡ†Π° правая Ρ†Π²Π΅Ρ‚ Π³Ρ€Π°Π½ΠΈΡ†Π° правая Ρ†Π²Π΅Ρ‚

Π³Ρ€Π°Π½ΠΈΡ†Π° правая ΡΡ‚ΠΈΠ»ΡŒ Π³Ρ€Π°Π½ΠΈΡ†Π° правая ΡΡ‚ΠΈΠ»ΡŒ

Π³Ρ€Π°Π½ΠΈΡ†Π° right-width border right width

border-spacing border spacing

border-style border style

border-top свойства Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ Π² ΠΎΠ΄Π½Ρƒ строку

border-top-color border top color

border-top-left-radius border top left radius

border-top-right-radius border top right radius

border-top-style ΡΡ‚ΠΈΠ»ΡŒ Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹

ΡˆΠΈΡ€ΠΈΠ½Π° Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΡˆΠΈΡ€ΠΈΠ½Π° Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹

ΡˆΠΈΡ€ΠΈΠ½Π° Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΡˆΠΈΡ€ΠΈΠ½Π° Π³Ρ€Π°Π½ΠΈΡ†Ρ‹

Π½ΠΈΠ· Π½ΠΈΠΆΠ½Π΅Π΅ смСщСниС для ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΈ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹Ρ… элСмСнтов

1 элСмСнт box-80419

РасполоТСниС ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ Бвойства размСщСния ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ

Подпись.

количСство столбцов Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ содСрТимоС Π½Π° столбцы

Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ столбцов сбалансированноС Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ Π½Π΅Ρ‚

Π·Π°Π·ΠΎΡ€ ΠΌΠ΅ΠΆΠ΄Ρƒ столбцами Π·Π°Π·ΠΎΡ€ ΠΌΠ΅ΠΆΠ΄Ρƒ столбцами

ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ столбца Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»ΡŒ ΠΌΠ΅ΠΆΠ΄Ρƒ столбцами, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π³Ρ€Π°Π½ΠΈΡ†Π°

Ρ†Π²Π΅Ρ‚ ΠΏΡ€Π°Π²ΠΈΠ»Π° столбца Ρ†Π²Π΅Ρ‚ ΠΏΡ€Π°Π²ΠΈΠ»Π° столбца

ΡΡ‚ΠΈΠ»ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»Π° столбца ΡΡ‚ΠΈΠ»ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»Π° столбца

ΡˆΠΈΡ€ΠΈΠ½Π° ΠΏΡ€Π°Π²ΠΈΠ»Π° столбца 0 0 3 column-span column span

column-width ΡˆΠΈΡ€ΠΈΠ½Π° столбца

columns set column-width and column-count

content вставка содСрТимого :before ΠΈ :after elements

Counter-Increment Π Π°Π·Π΄Π΅Π»Ρ‹ Count

ΠšΠΎΠ½Ρ‚Ρ€Π°ΠΊΡ‚Π½Ρ‹ΠΉ Ρ€Π΅Π·ΠΈΡ‚ Бброс сброса

Cursor Π’ΠΈΠΏ курсора, ΠΊΠΎΠ³Π΄Π° элСмСнт ΠΏΠ°Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚

НаправлСниС НаправлСниС записи, арабский Ρ‚ΠΈΠΏ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ RTL

.

пустыС ячСйки ΡΠΊΡ€Ρ‹Ρ‚ΡŒ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΈ Ρ„ΠΎΠ½ Π½Π° пустых ячСйках Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹

Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ эффСкты изобраТСния: ΠΎΡ‚Ρ‚Π΅Π½ΠΊΠΈ сСрого, Ρ€Π°Π·ΠΌΡ‹Ρ‚ΠΈΠ΅, ΠΈΠ½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ Ρ‚. Π΄.

flex Π΄Π»ΠΈΠ½Π° элСмСнта ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΄Ρ€ΡƒΠ³ΠΈΡ… Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°

flex-basis Π½Π°Ρ‡Π°Π»ΡŒΠ½Π°Ρ Π΄Π»ΠΈΠ½Π° Π³ΠΈΠ±ΠΊΠΎΠ³ΠΎ элСмСнта

flex-direction Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ Π³ΠΈΠ±ΠΊΠΈΡ… элСмСнтов

flex-flow сокращСниС для flex-direction ΠΈ flex- wrap

flex-grow насколько элСмСнт Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΄Ρ€ΡƒΠ³ΠΈΡ… элСмСнтов

flex-shrink ΠΊΠ°ΠΊ ΡΠΆΠ°Ρ‚ΡŒ элСмСнт ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΄Ρ€ΡƒΠ³ΠΈΡ… элСмСнтов

flex-wrap ΠΎΠ±Π΅Ρ€Π½ΡƒΡ‚ΡŒ Π³ΠΈΠ±ΠΊΠΈΠ΅ элСмСнты

Float Π€Π»ΠΎΡ‚Π²Π΅Π½Π½Ρ‹Π΅ элСмСнты слСва ΠΈΠ»ΠΈ справа

FONT ВсС свойства ΡˆΡ€ΠΈΡ„Ρ‚Π° Π² ΠΎΠ΄Π½ΠΎΠΉ строкС

@Font-Face Declare Non-Web-Safe Fonts

Font-Famil font-size font size

font-size-adjust ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ ΡˆΡ€ΠΈΡ„Ρ‚Π°, Ссли ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ ΠΎΠ±ΡŠΡΠ²Π»Π΅Π½Π½Ρ‹ΠΉ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ нСдоступСн

font-stretch Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ суТСниС тСкста

font-style ΡΡ‚ΠΈΠ»ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚Π°: ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ, курсив , косая

Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ ΡˆΡ€ΠΈΡ„Ρ‚Π° Π½Π°Π±ΠΎΡ€ Π·Π°Π³Π»Π°Π²Π½Ρ‹Ρ… Π±ΡƒΠΊΠ²

Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½Π° ΡˆΡ€ΠΈΡ„Ρ‚Π° использованиС ΠΏΠΎΠ»ΡƒΠΆΠΈΡ€Π½Ρ‹Ρ… ΠΈΠ»ΠΈ Ρ‚ΠΎΠ½ΠΊΠΈΡ… символов

висячая пунктуация ΠΌΠΎΠΆΠ½ΠΎ Π»ΠΈ ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π·Π½Π°ΠΊ прСпинания Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Π°ΠΌΠΈ строки?

height height элСмСнта

justify-content ΠΏΡ€ΠΈ нСобходимости Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π΅Ρ‚ элСмСнты Π³ΠΈΠ±ΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ

@keyframes ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΊΠΎΠ΄ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ0419

letter-spacing ΠΏΡ€ΠΎΠ±Π΅Π» ΠΌΠ΅ΠΆΠ΄Ρƒ символами

line-height line height тСкста ΠΈΠ»ΠΈ встроСнных Π±Π»ΠΎΡ‡Π½Ρ‹Ρ… элСмСнтов

list-style всС свойства списка Π² ΠΎΠ΄Π½ΠΎΠΉ строкС

list-04-image ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ элСмСнта списка с ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ

list-style-position ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ элСмСнтов списка Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΈΠ»ΠΈ Π²Π½Π΅ ΠΏΠΎΡ‚ΠΎΠΊΠ° содСрТимого

list-style-type ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ‚ΠΈΠΏ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° элСмСнта списка

margin установка Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ, ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ, Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΈ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΏΠΎΠ»Π΅ΠΉ Π² ΠΎΠ΄Π½Ρƒ строку margin top

max-height максимальная высота элСмСнта

max-width максимальная ΡˆΠΈΡ€ΠΈΠ½Π° элСмСнта

@media см. мСдиазапросы

min-height минимальная высота 0419

min-width минимальная ΡˆΠΈΡ€ΠΈΠ½Π°

nav-down ΠΊΡƒΠ΄Π° ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ со стрСлкой Π²Π½ΠΈΠ·

nav-index устанавливаСт порядок ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ° со стрСлкой Π²Π»Π΅Π²ΠΎ Π½Π°ΠΆΠ°Ρ‚Π°

nav-right ΠΊΡƒΠ΄Π° ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ со стрСлкой Π²ΠΏΡ€Π°Π²ΠΎ

nav-up ΠΊΡƒΠ΄Π° ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ со стрСлкой Π²Π²Π΅Ρ€Ρ…

ΠΠ΅ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ Π£Ρ€ΠΎΠ²Π΅Π½ΡŒ прозрачности элСмСнта

ΠŸΠΎΡ€ΡΠ΄ΠΎΠΊ Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎΠ³ΠΎ Π·Π°ΠΊΠ°Π·Π° Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π΅

Π‘Π±Ρ€ΠΎΡΡŒΡ‚Π΅ Π”Ρ€ΠΎΡƒ. Π’Π½Π΅ΡˆΠ½ΡΡ Π³Ρ€Π°Π½ΠΈΡ†Π° Π²ΠΎΠΊΡ€ΡƒΠ³ элСмСнтов

Набросок . элСмСнт ΠΈ ΠΊΠΎΠ½Ρ‚ΡƒΡ€

ΡΡ‚ΠΈΠ»ΡŒ ΠΊΠΎΠ½Ρ‚ΡƒΡ€Π° ΡΡ‚ΠΈΠ»ΡŒ ΠΊΠΎΠ½Ρ‚ΡƒΡ€Π°

ΡˆΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΠ½Ρ‚ΡƒΡ€Π° ΡˆΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΠ½Ρ‚ΡƒΡ€Π°

ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ скрытиС, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ°, Ссли содСрТимоС Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΡ‚ Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Ρ‹ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°

Overflow-X Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅

Overflow-Y Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅

Padding Padding ΠΌΠ΅ΠΆΠ΄Ρƒ элСмСнтом ΠΈ содСрТаниСм

Padding-Bottd-Bottding-Bottd-Bottding-Bottding-Bottding PADDING PANTDING

PADDING-BOTTIND PADDING PADDING

PADDING-BOTTIND PADDING PADDING

PADDING-BOTTIN

padding-right padding right

padding-top padding top

page-break-after добавляСт Ρ€Π°Π·Ρ€Ρ‹Π² страницы послС элСмСнта

page-break-before добавляСт Ρ€Π°Π·Ρ€Ρ‹Π² страницы ΠΏΠ΅Ρ€Π΅Π΄ элСмСнтом

page-break-Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ€Π°Π·Ρ€Π΅ΡˆΠΈΡ‚ΡŒ Ρ€Π°Π·Ρ€Ρ‹Π² страницы Π²Π½ΡƒΡ‚Ρ€ΠΈ элСмСнта Π³Π΄Π΅ 3D-элСмСнт, основанный Π½Π° осях x ΠΈ y

позиция Ρ‚ΠΈΠΏ позиционирования: Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅, фиксированноС, ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅, статичСскоС

ΠΊΠ°Π²Ρ‹Ρ‡ΠΊΠΈ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΊΠ°Π²Ρ‹Ρ‡ΠΊΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±Π΅Ρ€Π½ΡƒΡ‚ΡŒ элСмСнт

ИзмСнСниС Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ОбъявлСниС обрСтляСмых элСмСнтов

ΠŸΡ€Π°Π²ΠΎ ΠŸΡ€ΡΠΌΠΎ смСшноС для ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΈ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹Ρ… элСмСнтов

Π Π°Π·ΠΌΠ΅Ρ€Ρ‹ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ Π”Π»ΠΈΠ½Π° символа

Table-Layout Table Layout Layout Algorithman 9019

Table-Layout ВАЛЕЙ ВАЛЕЙ ALGORITHM

TABLAYOUT ВАВА Π‘Π›ΠžΠ’Π text

text-align-last Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ послСднСй строки тСкста

text-decoration Π½Π°Π΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅, ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΠΏΠ΅Ρ€Π΅Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ тСкста

text-indent отступ ΠΏΠ΅Ρ€Π²ΠΎΠΉ строки тСкста

text-overflow способ ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²ΠΊΠΈ ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½Π½ΠΎΠ³ΠΎ содСрТимого (ΠΌΠ½ΠΎΠ³ΠΎΡ‚ΠΎΡ‡ΠΈΠ΅)

text-shadow text shadow

text text

top top offset для ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΈ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹Ρ… элСмСнтов

transform 2D 3D ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠ΅. Π‘ΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚.

transform-origin измСняСт ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½Π½Ρ‹Ρ… элСмСнтов

Π‘Ρ‚ΠΈΠ»ΡŒ прСобразования Π Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ элСмСнты Π² 3D

ΠŸΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ Бвойства ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° Π² ΠΎΠ΄Π½ΠΎΠΉ строкС

ΠŸΠ΅Ρ€Π΅Ρ…ΠΎΠ΄-Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠ° Π­Ρ„Ρ„Π΅ΠΊΡ‚ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° ΠΠ°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΉ эффСкт

ВрансфСрный пастбища ВрансфСр. ΠΊΠ°ΠΊΠΎΠ΅ свойство CSS влияСт Π½Π° ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄

функция Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° кривая скорости ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π°

unicode-bidi слСдуСт ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ тСкст для ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ большСго количСства языков

Π²Ρ‹Π±ΠΎΡ€ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π²Ρ‹Π±ΠΎΡ€ содСрТимого ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ

Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅

Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ: скрытыС элСмСнты ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ ΠΏΡ€ΠΎΠ±Π΅Π»

ΠΏΡ€ΠΎΠ±Π΅Π» 8 ΠΊΠ°ΠΊ 9009 ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‚ΡΡ Π»ΠΈ ΠΏΡ€ΠΎΠ±Π΅Π»Ρ‹

ΡˆΠΈΡ€ΠΈΠ½Π° ΡˆΠΈΡ€ΠΈΠ½Π° элСмСнта

word-break ΠΏΡ€Π°Π²ΠΈΠ»Π° Ρ€Π°Π·Ρ€Ρ‹Π²Π° тСкста, ΠΊΠΎΠ³Π΄Π° тСкст достигаСт ΠΊΠΎΠ½Ρ†Π° ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°

word-spacing Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΏΡ€ΠΎΠ±Π΅Π»Π° ΠΌΠ΅ΠΆΠ΄Ρƒ словами

word-wrap Ρ€Π°Π·Ρ€Ρ‹Π² Π΄Π»ΠΈΠ½Π½Ρ‹Ρ… слов ΠΈ пСрСнос Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ строку

z-index порядок элСмСнтов Π² стСкС

XSLT Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ классы CSS Π² сгСнСрированном HTML. Π­Ρ‚ΠΎ ΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²Π΅Π½Π½ΠΎΡΡ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚Π° страницы XSL Π·Π° ссылку Π½Π° CSS.

ΠžΠ±Ρ‰Π΅Π΅ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ для ΠΎΠ±Ρ‰ΠΈΡ… ΠΏΠΎΠ»Π΅ΠΉ (стилизованных с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ forms-field-styling.xsl): ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ классы:

  • «Ρ„ΠΎΡ€ΠΌΡ‹»: всСгда размСщаСтся, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ„Π»ΠΈΠΊΡ‚ΠΎΠ² ΠΈΠΌΠ΅Π½ с ΡƒΠΆΠ΅ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌΠΈ классы для ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹Ρ… сайтов.
  • <имя Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Π°>: ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ «ΠΏΠΎΠ»Π΅», «Π΄Π΅ΠΉΡΡ‚Π²ΠΈΠ΅», «Π²Ρ‹Π²ΠΎΠ΄», «Π»ΠΎΠ³ΠΈΡ‡Π΅ΡΠΊΠΎΠ΅ ΠΏΠΎΠ»Π΅», «ΠΌΠ½ΠΎΠ³ΠΎΠ·Π½Π°Ρ‡Π½ΠΎΠ΅ ΠΏΠΎΠ»Π΅», «Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ°», «ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΈΡ‚Π΅Π»ΡŒ», «ΠΊΠ°Ρ€Ρ‚Π° изобраТСния», «Π°Π³Ρ€Π΅Π³Π°Ρ‚Π½ΠΎΠ΅ ΠΏΠΎΠ»Π΅», «Ρ„ΠΎΡ€ΠΌΠ°», «Π‘ообщСния».
  • : состояниС Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Π°, ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ пустым, «Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌ», «ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Π½Ρ‹ΠΌ», «Π²Ρ‹Ρ…ΠΎΠ΄».
  • «Ρ‚рСбуСтся»: Ссли Π²ΠΈΠ΄ΠΆΠ΅Ρ‚ трСбуСтся.
  • «with-errors»: Ссли Π΅ΡΡ‚ΡŒ сообщСния fi:validation-messages, связанныС с Π²ΠΈΠ΄ΠΆΠ΅Ρ‚.
  • : Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ, ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ, fi:styling/@class, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹ΠΉ Π² ΠΏΠΎΠ»Π΅ для Ρ‚ΠΎΡ‡Π½ΠΎΠΉ настройки стиля Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Π°.

Π­Ρ‚ΠΎΡ‚ ΠΌΠ΅Ρ‚ΠΎΠ΄ позволяСт Π»Π΅Π³ΠΊΠΎ ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΎΡ‡Π΅Π½ΡŒ спСцифичСскиС ΠΏΡ€Π°Π²ΠΈΠ»Π° CSS, ΠΎΡ‡Π΅Π½ΡŒ ΠΎΠ±Ρ‰ΠΈΠ΅. НапримСр:

 input.required {
 Ρ†Π²Π΅Ρ‚ синий;
}
 

ВсС Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ Π²Ρ…ΠΎΠ΄Π½Ρ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Π²Ρ‹Π΄Π΅Π»Π΅Π½Ρ‹ синим Ρ†Π²Π΅Ρ‚ΠΎΠΌ тСкста, Π°

 input.upload.required {
  красный Ρ†Π²Π΅Ρ‚;
} 

заставит Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Ρ‹ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΈΠΌΠ΅Ρ‚ΡŒ красный Ρ†Π²Π΅Ρ‚ тСкста. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ HTML, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ эти классы, зависят ΠΎΡ‚ Ρ‚ΠΈΠΏ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Π° ΠΈ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ fi:styling (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ρ‚ΠΈΠΏ списка для Π²Ρ‹Π±ΠΎΡ€Π° lists, fi:styling/@type ΠΈ Ρ‚.Π΄..).Π•ΡΡ‚ΡŒ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ классы, Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½Π½Ρ‹Π΅ для ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ³ΠΎ оформлСния Π΄Ρ€ΡƒΠ³ΠΈΡ… элСмСнтов, эти :

  • «captcha» : примСняСтся ΠΊ элСмСнту img поля с ΠΊΠ°ΠΏΡ‡Π΅ΠΉ.
  • «required-mark»: примСняСтся ΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Ρƒ, содСрТащСму «*» рядом с Ρ‚Ρ€Π΅Π±ΡƒΠ΅ΠΌΡ‹ΠΌ поля.
  • «validation-message»: примСняСтся ΠΊ якорному элСмСнту, содСрТащСму «!» ΠΎΠΊΠΎΠ»ΠΎ поля с ошибками.
  • Β«Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ список» ΠΈ Β«Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ список»: ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΠΊ Ρ‚Π°Π±Π»ΠΈΡ†Π°ΠΌ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΌ для ΠΌΠ°ΠΊΠ΅Ρ‚Π°. Ρ‚Π°ΠΊΠΈΠ΅ списки.
  • «upload-change-button»: примСняСтся ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ΅, которая появляСтся рядом с Π²ΠΈΠ΄ΠΆΠ΅Ρ‚ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ, ΠΊΠΎΠ³Π΄Π° Ρ„Π°ΠΉΠ» Π±Ρ‹Π» Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½.

Для элСмСнта validation-errors (ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ список всСх ошибки, ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠ΅Π½Π½Ρ‹Π΅ Π² Ρ„ΠΎΡ€ΠΌΠ΅) Π΅ΡΡ‚ΡŒ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ классы:

  • «ошибки ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈΒ»: ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΠΊ div, содСрТащСму сводку ошибок Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ.
  • «validation-errors-header» ΠΈ «validation-errors-footer»: примСняСтся ΠΊ Π°Π±Π·Π°Ρ†Ρ‹, содСрТащиС Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ ΠΈ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ»Ρ‹ с описаниСм ошибок.
  • «validation-errors-content»: примСняСтся ΠΊ элСмСнту «li» ошибок. список.

Π”Ρ€ΡƒΠ³ΠΎΠΉ Π½Π°Π±ΠΎΡ€ классов ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для оформлСния страницы (forms-page-styling.xsl). ΠΎΠ±Ρ‰Π΅Π΅ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ для fi:group Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… классов:

  • Β«Ρ„ΠΎΡ€ΠΌΡ‹Β»: ΠΊΠ°ΠΊ всСгда размСщаСтся для обозначСния ΠΊΠΎΠΊΠΎΠ½Π° Ρ„ΠΎΡ€ΠΌ класса CSS.
  • «Π³Ρ€ΡƒΠΏΠΏΠ°»: ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ класс Π³Ρ€ΡƒΠΏΠΏΡ‹
  • ΠΈΠ»ΠΈ : fi:styling/@layout ΠΈΠ»ΠΈ fi:styling/@type ΠΈΠ· Π³Ρ€ΡƒΠΏΠΏΡ‹
  • : Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ, ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ, fi:styling/@class, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΡƒΠΊΠ°Π·Π°Π½ΠΎ Π² Π³Ρ€ΡƒΠΏΠΏΠ΅ для Ρ‚ΠΎΡ‡Π½ΠΎΠΉ настройки стиля.

Π§Ρ‚ΠΎ касаСтся Π²ΠΈΠ΄ΠΆΠ΅Ρ‚ΠΎΠ², эти классы ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΠΊ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌ элСмСнтам HTML Π² зависимости ΠΎΡ‚ Ρ‚ΠΈΠΏΠ° Π³Ρ€ΡƒΠΏΠΏΡ‹ ΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚Π°. Для Ρ‚Π΅Ρ… ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ классы для обозначСния ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹Π΅ ячСйки:

  • Β«ΠΌΠ΅Ρ‚ΠΊΠ°Β»: примСняСтся ΠΊ Β«tdΒ», содСрТащСй ΠΌΠ΅Ρ‚ΠΊΡƒ
  • Β«contentΒ»: примСняСтся ΠΊ Β«tdΒ», содСрТащСму Π²Π²ΠΎΠ΄ Ρ„ΠΎΡ€ΠΌΡ‹
  • .
  • «дСйствиС»: примСняСтся ΠΊ Β«tdΒ», содСрТащСму Π²ΠΈΠ΄ΠΆΠ΅Ρ‚ дСйствия, для Ρ‚Π΅Ρ…, ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠΎΠ·Π΄Π°ΡŽΡ‚ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ ячСйки для этих Π²ΠΈΠ΄ΠΆΠ΅Ρ‚ΠΎΠ².
  • «booleanfield»: примСняСтся ΠΊ «td», содСрТащСму Π²ΠΈΠ΄ΠΆΠ΅Ρ‚ booleanfield, для Ρ‚Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠΎΠ·Π΄Π°ΡŽΡ‚ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ ячСйки для этих Π²ΠΈΠ΄ΠΆΠ΅Ρ‚ΠΎΠ².
  • Β«Π΄Ρ€ΡƒΠ³ΠΎΠ΅Β»: примСняСтся ΠΊ Β«tdΒ», содСрТащСму Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π΄Ρ€ΡƒΠ³ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ fi:Π³Ρ€ΡƒΠΏΠΏΠΎΠ²Ρ‹Π΅ ΠΈΠ»ΠΈ Π½Π΅ ΠΊΠΎΠΊΠΎΠ½Π½Ρ‹Π΅ Ρ„ΠΎΡ€ΠΌΡ‹ элСмСнтов.

Рассмотрим этот Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ CSS:

 table.group.columns {
  Π³Ρ€Π°Π½ΠΈΡ†Π°: 1px сплошной синий;
}
 
 table. group.columns td {
  Ρ„ΠΎΠ½: ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ;
}
 
 table.group.columns td.label {
  Ρ„ΠΎΠ½: синий;
  Π±Π΅Π»Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚;
  ΡˆΠΈΡ€ΠΈΠ½Π°: 20%;
}
 

КаТдая Π³Ρ€ΡƒΠΏΠΏΠ° fi:group Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½Π° «ΡΡ‚ΠΎΠ»Π±Ρ†Π°ΠΌΠΈ» ΠΌΠ°ΠΊΠ΅Ρ‚Π° с синСй Ρ€Π°ΠΌΠΊΠΎΠΉ. Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ, Π·Π°Ρ‚Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ Ρ„ΠΎΠ½ для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ячСйки Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅, Π² Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ синий Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ Ρ„ΠΎΠ½, Π² Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ Ρ†Π²Π΅Ρ‚ тСкста ΠΈ ΡˆΠΈΡ€ΠΈΠ½Π° 20% Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ для ячССк содСрТащиС ΠΌΠ΅Ρ‚ΠΊΠΈ. ΠžΡΠΎΠ±Ρ‹ΠΉ случай ΠΌΠ°ΠΊΠ΅Ρ‚Π° обрабатываСтся нСпосрСдствСнно Π² Π±Π°Π·ΠΎΠ²ΠΎΠΌ xsl (forms-field-styling.xsl), Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… с ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠΌ «столбцы» Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π΅Π½ «Ρ„ΠΈ: Ρ„ΠΎΡ€ΠΌΠ°». Π’ этом случаС ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ Ρ‚Π΅ ΠΆΠ΅ классы (ΠΌΠ΅Ρ‚ΠΊΠ°, содСрТимоС ΠΈ Ρ‚. Π΄.). НСкоторыС ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ классы ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²ΠΊΠ»Π°Π΄ΠΊΠΈ. Π­Ρ‚ΠΎ:

  • «tabArea» : примСняСтся ΠΊ div, содСрТащСму Π²ΠΊΠ»Π°Π΄ΠΊΠΈ.
  • «tabContent»: примСняСтся ΠΊ div, содСрТащСму содСрТимоС Π²ΠΊΠ»Π°Π΄ΠΎΠΊ.
  • «Π²ΠΊΠ»Π°Π΄ΠΊΠ°»: примСняСтся ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Ρƒ, ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‰Π΅ΠΌΡƒ ΠΎΠ΄Π½Ρƒ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ
  • «Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ»: ΠΏΠΎΠΌΠ΅Ρ‡Π°Π΅Ρ‚ Ρ‚Π΅ΠΊΡƒΡ‰ΡƒΡŽ Π°ΠΊΡ‚ΠΈΠ²Π½ΡƒΡŽ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ.
  • «validation-message»: примСняСтся ΠΊ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Ρƒ, ΠΏΠΎΠΌΠ΅Ρ‰Π΅Π½Π½ΠΎΠΌΡƒ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΡƒ, ΠΊΠΎΠ³Π΄Π° Π΅ΡΡ‚ΡŒ сообщСния ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ Π² любом элСмСнтС управлСния Π½Π° этой Π²ΠΊΠ»Π°Π΄ΠΊΠ΅.

Кокон Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΠ΅Ρ‚ XSL Π΄ΠΎ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ этот ΠΏΠ°Ρ‚Ρ‡ использовал нСсколько классов CSS для Π²ΠΊΠ»Π°Π΄ΠΎΠΊ, ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΊΠΈ, сообщСния ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ ΠΈ Π΅Ρ‰Π΅ нСсколько элСмСнтов. Π­Ρ‚ΠΈ классы ΠΈΠΌΠ΅ΡŽΡ‚ Π±Ρ‹Π»Π° сохранСна для обСспСчСния ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠΉ совмСстимости, Π½ΠΎ большС Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ.

Π‘ΠΎΠ·Π΄Π°Π²Π°ΠΉΡ‚Π΅, Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅ ΠΈ присоСдиняйтС Ρ„Π°ΠΉΠ»Ρ‹ CSS для оформлСния вашСго сайта

CSS (каскадныС Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй) β€” это Π·Π°ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ Ρ„Π°ΠΉΠ»Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹Π±ΠΈΡ€Π°ΡŽΡ‚ элСмСнты вашСй страницы ΠΈ ΡƒΠΏΡ€Π°Π²Π»ΡΡŽΡ‚ ΠΈΡ… прСдставлСниСм. Π”ΡƒΠΌΠ°ΠΉΡ‚Π΅ ΠΎ HTML вашСго ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ шаблона ΠΊΠ°ΠΊ ΠΎ кости вашСго Π²Π΅Π±-сайта, Π° ΠΎ CSS β€” ΠΊΠ°ΠΊ ΠΎΠ± ΠΎΠ±ΠΎΠ»ΠΎΡ‡ΠΊΠ΅ вашСго сайта.

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ рассказываСтся ΠΎ создании, ΠΏΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΠΈ ΠΈ ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»Π΅Π½ΠΈΠΈ Ρ„Π°ΠΉΠ»Π° CSS Π² HubSpot. Π—Π΄Π΅ΡΡŒ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ·Π½Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ внСсти простыС измСнСния Π² Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΉ страницы. Если Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ шаблон Ρ‚Π΅ΠΌΡ‹, ΡƒΠ·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ настройки Ρ‚Π΅ΠΌΡ‹.

Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Π½ΠΎΠ²Ρ‹ΠΉ Ρ„Π°ΠΉΠ» CSS

  • Π’ своСй ΡƒΡ‡Π΅Ρ‚Π½ΠΎΠΉ записи HubSpot ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ ΠΊ ΠœΠ°Ρ€ΠΊΠ΅Ρ‚ΠΈΠ½Π³ > Π€Π°ΠΉΠ»Ρ‹ ΠΈ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ > Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Ρ‹ Π΄ΠΈΠ·Π°ΠΉΠ½Π° .
  • Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Π·Π½Π°Ρ‡ΠΎΠΊ ΠΏΠ°ΠΏΠΊΠΈ Π² Π»Π΅Π²ΠΎΠΌ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ ΡƒΠ³Π»Ρƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π·Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ Π±ΠΎΠΊΠΎΠ²ΠΎΠ΅ мСню. Π—Π°Ρ‚Π΅ΠΌ Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Π€Π°ΠΉΠ» > Новый Ρ„Π°ΠΉΠ» .
  • Π’ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅ Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Π’Π°Π±Π»ΠΈΡ†Π° стилСй CSS . Π—Π°Ρ‚Π΅ΠΌ Π²Π²Π΅Π΄ΠΈΡ‚Π΅ имя для Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй CSS ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ .

Π Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Ρ„Π°ΠΉΠ»Π° CSS

Π‘ΠΎΠ·Π΄Π°Π² ΠΈΠ»ΠΈ ΠΎΡ‚ΠΊΡ€Ρ‹Π² ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ Ρ„Π°ΠΉΠ» CSS, внСситС измСнСния Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ ΠΊΠΎΠ΄Π°. Помимо стандартного CSS, Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ ΠΊΠΎΠ΄Π° ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅ ΠΈ макросы HubL, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΏΡ€ΠΎΡΡ‚ΠΈΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ с CSS. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ ваш HubL, Π½Π°ΠΆΠΌΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΡŒ ΠŸΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Π²Ρ‹Π²ΠΎΠ΄ Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°. Π‘ΠΏΡ€Π°Π²Π° откроСтся панСль с ΠΎΡ‚Ρ€Π΅Π½Π΄Π΅Ρ€Π΅Π½Π½Ρ‹ΠΌ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ просмотром.


Бписок стандартных сСлСкторов CSS для шаблонов HubSpot см. Π² Boilerplate CSS.

ΠŸΠ΅Ρ€Π΅Π΄ ΠΏΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΠ΅ΠΉ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅ свой ΠΊΠΎΠ΄ Π½Π° Π½Π°Π»ΠΈΡ‡ΠΈΠ΅ ошибок HubL. Π•ΡΡ‚ΡŒ Ρ‚Ρ€ΠΈ мСста, Π³Π΄Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ ошибки ΠΈΠ»ΠΈ прСдупрСТдСния HubL Π² ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠΌ ΠΌΠΎΠ΄ΡƒΠ»Π΅ ΠΈΠ»ΠΈ Π·Π°ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΌ Ρ„Π°ΠΉΠ»Π΅:

  • Π’ консоли ошибок Π² Π½ΠΈΠΆΠ½Π΅ΠΉ части Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π° ΠΊΠΎΠ΄Π°.
  • Π’ полосС ошибок Π² Π»Π΅Π²ΠΎΠΉ части Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π° ΠΊΠΎΠ΄Π°.
  • На полосС ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π² ΠΏΡ€Π°Π²ΠΎΠΉ части Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°.

Ошибки, ΠΏΡ€Π΅ΠΏΡΡ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ ΠΏΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΠΈ, Π±ΡƒΠ΄ΡƒΡ‚ Π²Ρ‹Π΄Π΅Π»Π΅Π½Ρ‹ красным, Π° ΠΎΠ±Ρ‰ΠΈΠ΅ прСдупрСТдСния β€” ΠΆΠ΅Π»Ρ‚Ρ‹ΠΌ. Π’ Π½ΠΈΠΆΠ½Π΅ΠΉ части Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π° ΠΊΠΎΠ΄Π° Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠŸΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ свСдСния , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ свСдСния ΠΎΠ± ΠΎΡˆΠΈΠ±ΠΊΠ°Ρ… Π² консоли ошибок, ΠΈ Π‘ΠΊΡ€Ρ‹Ρ‚ΡŒ свСдСния , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ²Π΅Ρ€Π½ΡƒΡ‚ΡŒ консоль ошибок.

Π’ консоли ошибок Π±ΡƒΠ΄ΡƒΡ‚ ссылки Π½Π° Π²Π΅Π·Π΄Π΅, Π³Π΄Π΅ Π΅ΡΡ‚ΡŒ ошибки ΠΈΠ»ΠΈ прСдупрСТдСния HubL Π² вашСм ΠΊΠΎΠ΄Π΅ ΠΈΠ»ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠΌ ΠΌΠΎΠ΄ΡƒΠ»Π΅. НавСдитС ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ Π½Π° красныС ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹ ошибок Π² Π»Π΅Π²ΠΎΠΉ части Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π° ΠΊΠΎΠ΄Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΎΡˆΠΈΠ±ΠΊΡƒ ΠΈΠ»ΠΈ ΠΏΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ Π² ΠΊΠΎΠ΄Π΅. Π©Π΅Π»ΠΊΠ½ΡƒΠ² ΠΏΠΎ ошибкС, Π²Ρ‹ пСрСмСститС курсор Π½Π° всС ошибки ΠΈΠ»ΠΈ прСдупрСТдСния Π² этой строкС. НаТав Π½Π° Π°Π½Π½ΠΎΡ‚Π°Ρ†ΠΈΡŽ полосы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ, Π²Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅Ρ‚Π΅ ΠΊ этой части Ρ„Π°ΠΉΠ»Π°.

Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ‰Π΅Π»ΠΊΠ½ΡƒΡ‚ΡŒ Π½ΠΎΠΌΠ΅Ρ€ строки Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ ΠΊΠΎΠ΄Π° ΠΈ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ URL-адрСс Ρ„Π°ΠΉΠ»Π°. Π­Ρ‚ΠΎ позволяСт Π²Π°ΠΌ ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ ссылкой Π½Π° свой ΠΊΠΎΠ΄ с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ ΠΈ Π½Π°ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ΠΈΡ… ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚ΡƒΠ΄Π°, Π³Π΄Π΅ Π²Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚Π΅ Π² Ρ„Π°ΠΉΠ»Π΅.

ПослС рСдактирования Ρ„Π°ΠΉΠ»Π° Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠžΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Ρ‚ΡŒ измСнСния Π² ΠΏΡ€Π°Π²ΠΎΠΌ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ ΡƒΠ³Π»Ρƒ. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ эту Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ стилСй Π² Π΄Ρ€ΡƒΠ³ΠΎΠΌ Π·Π°ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΌ шаблонС, скопируйтС URL-адрСс Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, Π½Π°ΠΆΠ°Π² ДСйствия > Π‘ΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ общСдоступный URL-адрСс Π² мСню Π»Π΅Π²ΠΎΠΉ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ.

ΠŸΡ€ΠΈΠΊΡ€Π΅ΠΏΠΈΡ‚ΡŒ ΠΊ ΡˆΠ°Π±Π»ΠΎΠ½Ρƒ

Π’ HubSpot Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»ΡΡ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй ΠΊ своСму ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Ρƒ нСсколькими Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ способами. НиТС ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½ порядок, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»Π΅Π½Π½Ρ‹Π΅ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй связаны Π½Π° вашСм сайтС:

  1. public_common.css * β€” Ρ‚Π°Π±Π»ΠΈΡ†Π° стилСй, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠ°Ρ Π² основном ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ HubSpot, Π½ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΠΈ для Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ сайта.
  2. Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ HTML Π² настройках Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ Π’Π΅Π±-сайт > Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Ρ‹ — Ρ‚Π΅Π³ΠΈ ссылок Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Ρ‹ Π² Π³Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹ΠΉ сайта.
  3. Layout.css ** β€” Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ CSS-Ρ„Π°ΠΉΠ» ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»Π΅Π½Π½Ρ‹ΠΉ ΠΊΠΎ всСм ΠΌΠ°ΠΊΠ΅Ρ‚Π°ΠΌ шаблонов с Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒΡŽ пСрСтаскивания.
  4. ΠŸΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»Π΅Π½Π½Ρ‹Π΅ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй Π² настройках Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ Π’Π΅Π±-сайт > Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Ρ‹ — Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»Π΅Π½Ρ‹ ΠΊΠΎ всСму Π²Π°ΡˆΠ΅ΠΌΡƒ сайту.
  5. ΠŸΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»Π΅Π½Π½Ρ‹Π΅ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй Π² настройках Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ Π’Π΅Π±-сайт > Π‘Π»ΠΎΠ³ β€” Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй, ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»Π΅Π½Π½Ρ‹Π΅ ΠΊ Π²Π°ΡˆΠ΅ΠΌΡƒ Π±Π»ΠΎΠ³Ρƒ (ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ Π³Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹Π΅ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ сайта).
  6. БвязанныС Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй *** — Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй, присоСдинСнныС ΠΊ ΠΌΠ°ΠΊΠ΅Ρ‚Ρƒ шаблона.
  7. Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° Π² шаблонС β€” Ρ‚Π΅Π³ΠΈ ссылок, Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½Ρ‹Π΅ Π² ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π° шаблона.
  8. Π’Π°Π±Π»ΠΈΡ†Ρ‹ стилСй для ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹Ρ… страниц — Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй, ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»Π΅Π½Π½Ρ‹Π΅ ΠΊ настройкам страницы.
  9. Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ страницы HTML — Ρ‚Π΅Π³ΠΈ ссылок Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ΡΡ Π² ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ страницы Π² настройках страницы.

* ВрСбуСтся

** ВрСбуСтся для ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² с пСрСтаскиваниСм

*** Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌΡ‹ΠΉ ΠΌΠ΅Ρ‚ΠΎΠ΄ прикрСплСния Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй для шаблонов ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ²

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠΈΡ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй ΠΊ ΡˆΠ°Π±Π»ΠΎΠ½Ρƒ, ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ шаблон Π² ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ€Π΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π’ мСню ΠΏΡ€Π°Π²ΠΎΠΉ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΈ основного тСкста Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ» ΠΈΠ· Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎΡΡ мСню Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ рядом с БвязанныС Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй .

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΈΠ»ΠΈ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ ΡƒΠΆΠ΅ ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»Π΅Π½Π½ΡƒΡŽ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ стилСй, навСдя Π½Π° Π½Π΅Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ ΠΈ Ρ‰Π΅Π»ΠΊΠ½ΡƒΠ² Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ , Ρ‡Ρ‚ΠΎΠ±Ρ‹ внСсти Π² Π½Π΅Π΅ измСнСния, ΠΈΠ»ΠΈ X , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ Π΅Π΅.

ПослС добавлСния Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠžΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Ρ‚ΡŒ измСнСния Π² ΠΏΡ€Π°Π²ΠΎΠΌ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ ΡƒΠ³Π»Ρƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ваши измСнСния ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌ страницам с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ шаблона.

ΠŸΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»Π΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΡƒΠ΄Π°Π»Π΅Π½ΠΈΠ΅ Ρ‚Π°Π±Π»ΠΈΡ† стилСй Π½Π° ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ страницС (Ρ‚ΠΎΠ»ΡŒΠΊΠΎ

Marketing Hub Professional ΠΈ Enterprise )

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅: этот ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ нСдоступСн для шаблонов Ρ‚Π΅ΠΌ. Π£Π·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ настройки Ρ‚Π΅ΠΌΡ‹.

Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΈΠ»ΠΈ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ стилСй для ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΉ страницы ΠΈΠ· Ρ€Π°Π·Π΄Π΅Π»Π° настроСк Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π° страниц:

  • ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π½Π° страницы Π²Π΅Π±-сайта ΠΈΠ»ΠΈ Ρ†Π΅Π»Π΅Π²Ρ‹Π΅ страницы.
  • НавСдитС курсор Π½Π° свою страницу ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ .
  • Π’ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ страниц Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Настройки Π²Π²Π΅Ρ€Ρ…Ρƒ.
  • ΠŸΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠ· ΠΈ Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ .
  • Π’ Ρ€Π°Π·Π΄Π΅Π»Π΅ Π’Π°Π±Π»ΠΈΡ†Ρ‹ стилСй страницы Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню ΠŸΡ€ΠΈΠΊΡ€Π΅ΠΏΠΈΡ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ стилСй ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ лист, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠΈΡ‚ΡŒ. НаТмитС X рядом с Ρ‚Π°Π±Π»ΠΈΡ†Π΅ΠΉ стилСй, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ.

  • НаТмитС Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΈ ΠžΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Ρ‚ΡŒ Π² ΠΏΡ€Π°Π²ΠΎΠΌ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ ΡƒΠ³Π»Ρƒ.

Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π°ΡΠ»Π΅Π΄ΡƒΡŽΡ‚ΡΡ страницСй ΠΈΠ· шаблона ΠΈΠ»ΠΈ Π΄ΠΎΠΌΠ΅Π½Π°. ΠŸΡ€ΠΈ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠΈ эти Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ ΠΊ вашСй страницС:

  • На Ρ‚ΠΎΠΉ ΠΆΠ΅ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Настройки Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ страниц Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠžΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΎ Π² Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΌΡΡ мСню рядом с Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Π½Ρ‹ΠΌΠΈ Ρ‚Π°Π±Π»ΠΈΡ†Π°ΠΌΠΈ стилСй.
  • Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΈ ΠžΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Ρ‚ΡŒ Π² ΠΏΡ€Π°Π²ΠΎΠΌ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ ΡƒΠ³Π»Ρƒ.

ΠŸΡ€ΠΈΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΡƒΠ΄Π°Π»Π΅Π½ΠΈΠ΅ Ρ‚Π°Π±Π»ΠΈΡ† стилСй Π½Π° ΡƒΡ€ΠΎΠ²Π½Π΅ Π΄ΠΎΠΌΠ΅Π½Π° (Ρ‚ΠΎΠ»ΡŒΠΊΠΎ

Marketing Hub Professional ΠΈ Enterprise )

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅: ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ Ρ‚Π΅ΠΌ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ Π°Π½Π½ΠΎΡ‚Π°Ρ†ΠΈΡŽ enableDomainStylesheets: true , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй Π½Π° ΡƒΡ€ΠΎΠ²Π½Π΅ Π΄ΠΎΠΌΠ΅Π½Π°. Π£Π·Π½Π°ΠΉΡ‚Π΅ большС ΠΎΠ± аннотациях шаблонов.

Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΈΠ»ΠΈ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ стилСй ΠΈΠ· всСго ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π² Π΄ΠΎΠΌΠ΅Π½Π΅:

  • настройки Π·Π½Π°Ρ‡ΠΎΠΊ настроСк Π½Π° Π³Π»Π°Π²Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ.»}» data-sheets-userformat=»{«2″:8402947,»3″:[null,0],»4″:[null,2,16777215],»14″:[null,2,0],»15″:»Arial»,»16″:10, «26»:400}» data-sheets-formula=»=»»»>Π’ своСй ΡƒΡ‡Π΅Ρ‚Π½ΠΎΠΉ записи HubSpot Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Π·Π½Π°Ρ‡ΠΎΠΊ настроСк настроСк Π½Π° Π³Π»Π°Π²Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ.
Автор записи

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *