ВСрстка css: табличная, кроссбраузСрная, адаптивная. ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡ‹

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

табличная, кроссбраузСрная, адаптивная. ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡ‹

ΠžΡ‚ Π°Π²Ρ‚ΠΎΡ€Π°: CSS вСрстка – это, ΠΏΠΎ сути, Π²Ρ‚ΠΎΡ€ΠΎΠΉ этап вСрстки сайта. И ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎ ΠΎΡ‡Π΅Π½ΡŒ Π²Π°ΠΆΠ½Ρ‹ΠΉ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π² ΠΈΡ‚ΠΎΠ³Π΅ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΎΠ½ Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΠ΅Ρ‚ внСшний Π²ΠΈΠ΄ сайта. БСгодня Ρ…ΠΎΡ‚Π΅Π»ΠΎΡΡŒ Π±Ρ‹ Π΅Ρ‰Π΅ Ρ€Π°Π· ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠ½ΡƒΡ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Π°ΠΆΠ½Ρ‹Π΅ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡ‹ Ρ€Π°Π±ΠΎΡ‚Ρ‹ с касакадными Ρ‚Π°Π±Π»ΠΈΡ†Π°ΠΌΠΈ стилСй.

ВСрстка с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ css – Ρ‡Ρ‚ΠΎ это ΠΈ Π·Π°Ρ‡Π΅ΠΌ ΠΎΠ½ΠΎ Π½ΡƒΠΆΠ½ΠΎ?

Ну сначала всС ΠΆΠ΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Ρ€Π°Π·ΡŠΡΡΠ½Π΅Π½ΠΈΠΉ для Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΎΠ². Css – это Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ язык, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ состоит ΠΈΠ· свойств ΠΈ ΠΈΡ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ. Π­Ρ‚ΠΈ самыС свойства ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ Π²Π»ΠΈΡΡ‚ΡŒ Π½Π° внСшний Π²ΠΈΠ΄ элСмСнтов. НапримСр, свойство color опрСдСляСт Ρ†Π²Π΅Ρ‚ тСкста, background – Ρ„ΠΎΠ½ элСмСнта, font – Π΅Π³ΠΎ ΡˆΡ€ΠΈΡ„Ρ‚ ΠΈ Ρ‚.Π΄ ΠΈ Ρ‚.ΠΏ.

Бвойств Π½Π° самом Π΄Π΅Π»Π΅ Π½Π΅ Ρ‚Π°ΠΊ ΡƒΠΆ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎ, поэтому CSS ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Π·Π²Π°Ρ‚ΡŒ достаточно простой Π²Π΅Π±-Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠ΅ΠΉ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΌΠΎΠΆΠ½ΠΎ Π±Π΅Π· Ρ‚Ρ€ΡƒΠ΄Π° ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ. Π”Ρ€ΡƒΠ³ΠΎΠ΅ Π΄Π΅Π»ΠΎ, Ρ‡Ρ‚ΠΎ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ ΠΈΠΌΠ΅ΡŽΡ‚ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΡŒ постоянно Π΄Π²ΠΈΠ³Π°Ρ‚ΡŒΡΡ Π²ΠΏΠ΅Ρ€Π΅Π΄, особСнно Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ Π² области сайтостроСния.

Π’Π°ΠΊ Π²ΠΎΡ‚, css ΠΏΡ€ΠΈΠ΄ΡƒΠΌΠ°Π½ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ внСшний Π²ΠΈΠ΄. И со своСй Π·Π°Π΄Π°Ρ‡Π΅ΠΉ ΠΎΠ½ справляСтся Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ. HTML позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ элСмСнты, Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ°, Π° css – ΠΎΡ„ΠΎΡ€ΠΌΠ»ΡΡ‚ΡŒ всС это Π΄Π΅Π»ΠΎ. Π­Ρ‚ΠΈ Π΄Π²Π° языка связаны Π½Π΅Ρ€Π°Π·Π»ΡƒΡ‡Π½ΠΎ, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ Ссли ΠΎΡ‚Π½ΡΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½ – Π΄Ρ€ΡƒΠ³ΠΎΠΉ просто станСт Π½Π΅ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½Ρ‹ΠΌ.

ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ всСгда Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊ Π² Π½Π°Ρ‡Π°Π»Π΅ Ρ€Π°Π±ΠΎΡ‚Ρ‹ создаСт структуру, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ элСмСнты, Π° ΠΏΠΎΡ‚ΠΎΠΌ всС это оформляСт.

ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈΠΉ курс ΠΏΠΎ вСрсткС Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ сайта с нуля!

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ курс ΠΈ ΡƒΠ·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ соврСмСнныС сайты Π½Π° HTML5 ΠΈ CSS3

Π£Π·Π½Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ Π²Π΅Ρ‰ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π² css

Вабличная вСрстка с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ css. На самом Π΄Π΅Π»Π΅ ΠΎΡ‚ Ρ‚Π°Π±Π»ΠΈΡ† ΠΊΠ°ΠΊ ΠΎΡ‚ способа Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΎΠΌ ΠΎΡ‚ΠΊΠ°Π·Π°Π»ΠΈΡΡŒ ΠΈΠ·-Π·Π° Π³Ρ€ΠΎΠΌΠΎΠ·Π΄ΠΊΠΎΠ³ΠΎ html-ΠΊΠΎΠ΄Π°, Π½ΠΎ Π½Π΅ Ρ‚Π°ΠΊ Π΄Π°Π²Π½ΠΎ Π² css появились возмоТности, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΠ»ΠΈ Π»ΡŽΠ±Ρ‹Π΅ элСмСнты ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π² Ρ‚Π°Π±Π»ΠΈΡ‡Π½Ρ‹Π΅. Π’ΠΎΡ‚ ΠΎΠ½ΠΈ: Display: table, display: table-row, display: table-cell.

БоотвСтствСнно, свойство display опрСдСляСт, ΠΊΠ°ΠΊ Ρ‚ΠΎΡ‚ ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠΉ элСмСнт Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π½Π° страницС. ΠŸΠ΅Ρ€Π²ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΡƒΠ΅Ρ‚ Π½ΡƒΠΆΠ½Ρ‹ΠΉ элСмСнт Π² Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ, Π²Ρ‚ΠΎΡ€ΠΎΠ΅ – Π² ряд Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, Π° Ρ‚Ρ€Π΅Ρ‚ΡŒΠ΅ – Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΡƒΡŽ ячСйку. Π’ΠΎΡ‚ Ρ‚Π°ΠΊ Π²ΠΎΡ‚ Π·Π° счСт Ρ‚Π°ΠΊΠΈΡ… Π½Π΅Ρ…ΠΈΡ‚Ρ€Ρ‹Ρ… манипуляций Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΌΠ°ΡΡ‚Π΅Ρ€ΠΈΡ‚ΡŒ ΠΈΡΠΊΡƒΡΡΡ‚Π²Π΅Π½Π½ΡƒΡŽ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ Π½Π° страницС Π±Π΅Π· Π΅Π΄ΠΈΠ½ΠΎΠ³ΠΎ Ρ‚Π΅Π³Π° table ΠΈΠ»ΠΈ td Π² ΠΊΠΎΠ΄Π΅.

ΠšΡ€ΠΎΡΡΠ±Ρ€Π°ΡƒΠ·Π΅Ρ€Π½Π°Ρ вСрстка. Как css ΠΌΠΎΠΆΠ΅Ρ‚ Π² этом ΠΏΠΎΠΌΠΎΡ‡ΡŒ

А ΠΏΠΎΠΌΠΎΡ‡ΡŒ ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡ‡Π΅Π½ΡŒ просто – ΡΠ±Ρ€ΠΎΡΡŒΡ‚Π΅ всС отступы ΠΈ ΠΏΡ€Π°Π²ΠΈΠ»Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, ΠΈ Π²Ρ‹ ΡƒΠΆΠ΅ Π΄ΠΎΠ±ΡŒΠ΅Ρ‚Π΅ΡΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ кроссбраузСрности. По ΠΊΡ€Π°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅Ρ€Π΅, Π²Π΅Π±-ΠΎΠ±ΠΎΠ·Ρ€Π΅Π²Π°Ρ‚Π΅Π»ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΏΠΎ вашим ΠΏΡ€Π°Π²ΠΈΠ»Π°ΠΌ, Π° Π½Π΅ Π²Ρ‹ ΠΏΠΎ ΠΈΡ…Π½ΠΈΠΌ. Π­Ρ‚ΠΎΡ‚ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ Π΅Ρ‰Π΅ Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ ΠΊΠ°ΠΊ css reset. Π’ΠΎ Π΅ΡΡ‚ΡŒ создаСтся Π½Π°Π±ΠΎΡ€ стилСй, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ сбрасываСт настройки ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.

Π’ сСти Π΅ΡΡ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² css reset, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Π»ΡŽΠ±ΠΈΡ‚ Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΠΎ-своСму. Π’ самом ΠΏΡ€ΠΈΠΌΠΈΡ‚ΠΈΠ²Π½ΠΎΠΌ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π΅ сброс стилСй ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ:

*{ padding: 0; margin: 0; } ul{ list-style: none; }

*{

padding: 0;

margin: 0;

}

ul{

list-style: none;

}

Π’ΠΎ Π΅ΡΡ‚ΡŒ ΠΌΡ‹ просто ΡƒΠ±Ρ€Π°Π»ΠΈ всС Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ ΠΈ внСшниС отступы ΠΈ всСх элСмСнтов, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΡƒΠ±Ρ€Π°Π»ΠΈ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ Ρƒ списков, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ сСгодня ΠΌΠ°Π»ΠΎ ΠΊΡ‚ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΈΡ…. ЦСль css reset – ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ΡŒ Π²Π°ΠΌ Π½Π°Ρ‡Π°Ρ‚ΡŒ описаниС стилСй с чистого листа.

Рис.1. ΠšΠ°ΠΆΠ΄ΠΎΠΌΡƒ ΠΈΠ· этих Ρ‚ΠΎΠ²Π°Ρ€ΠΈΡ‰Π΅ΠΉ Π½ΡƒΠΆΠ½ΠΎ ΡƒΠ³ΠΎΠ΄ΠΈΡ‚ΡŒ, ΠΈΠ½Π°Ρ‡Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡ‚Π΅Ρ€ΡΡ‚ΡŒ ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… посСтитСлСй сайта.

ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈΠΉ курс ΠΏΠΎ вСрсткС Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ сайта с нуля!

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ курс ΠΈ ΡƒΠ·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ соврСмСнныС сайты Π½Π° HTML5 ΠΈ CSS3

Π£Π·Π½Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

Адаптивная вСрстка Π² css

Адаптивная вСрстка это Π²ΠΎΠΎΠ±Ρ‰Π΅ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Π°Ρ Π²Π΅Ρ‚Π²ΡŒ Π² сайтостроСнии, Π½ΠΎ Π² этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ я всСго лишь объясню Π²Π°ΠΌ, Ρ‡Ρ‚ΠΎ это Ρ‚Π°ΠΊΠΎΠ΅ с ΠΏΡ€ΠΎΡΡ‚Π΅ΠΉΡˆΠΈΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ. Π’ΠΎΠΎΠ±Ρ‰Π΅ я Π΄ΡƒΠΌΠ°ΡŽ, Ρ‡Ρ‚ΠΎ Π½Π°Π·Π²Π°Π½Π° ΠΎΠ½Π° ΠΎΡ‡Π΅Π½ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ. ΠΠ΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ, Π·Π½Π°Ρ‡ΠΈΡ‚, ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ. А Π² сайтостроСнии Π² основном Π½ΡƒΠΆΠ½ΠΎ ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ ΠΏΠΎΠ΄ Ρ€Π°Π·Π½Ρ‹Π΅ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ экрана. Π‘Π°ΠΉΡ‚Ρƒ ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ, всмыслС, Π½Π΅ Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊΡƒ ΠΆΠ΅.

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

ΠΠ΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ рСализуСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π°ΠΊ Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΡ‹Ρ… ΠΌΠ΅Π΄ΠΈΠ°-запросов. ΠžΠ±Ρ‹Ρ‡Π½ΠΎ ΠΈΡ… ΠΏΠΈΡˆΡƒΡ‚ прямо Π² Π³Π»Π°Π²Π½ΠΎΠΌ Ρ„Π°ΠΉΠ»Π΅ стилСй. ΠŸΡ€ΠΎΡΡ‚Π΅ΠΉΡˆΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΌΠ΅Π΄ΠΈΠ°-запроса:

@media and only screen (max-width: 600px){ img{ float: none; } }

@media and only screen (max-width: 600px){

img{

float: none;

}

}

Π§Ρ‚ΠΎ происходит? Π­Ρ‚ΠΈΠΌ запросом ΠΌΡ‹ ΡƒΠΊΠ°Π·Π°Π»ΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ, Ρ‡Ρ‚ΠΎ Ссли ΡˆΠΈΡ€ΠΈΠ½Π° экрана Π±ΡƒΠ΄Π΅Ρ‚ мСньшС 600 пиксСлСй, Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ тСкста изобраТСниями. Π—Π°Ρ‡Π΅ΠΌ? Ну хотя Π±Ρ‹ ΠΏΠΎΡ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ тСкст Π² ΠΎΠ΄Π½ΠΎΠΉ строкС, ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ всСго 600 пиксСлСй, Π±ΡƒΠ΄ΡƒΡ‚ ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒΡΡ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠ»ΠΎΡ…ΠΎ.

Основа адаптивности закладываСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства max-width. НапримСр, max-width: 1320px ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ максимум Π±Π»ΠΎΠΊ Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚ΡΠ½ΡƒΡ‚ΡŒΡΡ Π½Π° 1320 пиксСлСй, Π½ΠΎ Ссли Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΎΠΊΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ мСньшС, Ρ‚ΠΎ ΠΎΠ½ Ρ‚ΠΎΠΆΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Ρ‚ΡŒΡΡ. Никакого Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ скролла!

Рис.2. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ записи ΠΌΠ΅Π΄ΠΈΠ°-запросов. Как Π²ΠΈΠ΄ΠΈΡ‚Π΅, для ΠΎΠ΄Π½ΠΎΠ³ΠΎ шаблона ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ ΠΏΡ€ΠΈΠ»ΠΈΡ‡Π½ΠΎΠ΅ количСство ΠΏΡ€Π°Π²ΠΈΠ» ΠΈ стилСй, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΡƒΡŽ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ.

Какой Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с css?

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

Π‘ΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚ с ΠΊΠΎΠ΄ΠΎΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡Ρ‚ΠΎ ΠΌΠΎΠ³Π»ΠΈ Π½Π°Π±Π»ΡŽΠ΄Π°Ρ‚ΡŒ, сдСлан ΠΈΠ· ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ Notepad++, Π³Π΄Π΅ ΠΈ Π±Ρ‹Π» ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ css-Ρ„Π°ΠΉΠ». МнС каТСтся, этот Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ просто ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с этим языком – ΠΎΡ‡Π΅Π½ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΏΠΎΠ΄ΡΠ²Π΅Ρ‡ΠΈΠ²Π°ΡŽΡ‚ΡΡ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ составныС части ΠΊΠΎΠ΄Π°, Π° Ссли Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Π΅Ρ‰Π΅ ΠΈ придСрТиваСтся ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… ΠΏΡ€Π°Π²ΠΈΠ» оформлСния, Ρ‚ΠΎ ΠΊΠΎΠ΄ читаСтся просто Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ.

Π£Π·Π½Π°ΠΉΡ‚Π΅ css Π»ΡƒΡ‡ΡˆΠ΅

ΠšΡ€ΠΎΡΡΠ±Ρ€Π°ΡƒΠ·Π΅Ρ€Π½ΠΎΡΡ‚ΡŒ, Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ, Ρ€Π°Π±ΠΎΡ‚Π° с Ρ‚Π°Π±Π»ΠΈΡ†Π°ΠΌΠΈ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅ – всС это ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‡Π΅Π½ΡŒ Π΄ΠΎΠ»Π³ΠΎ Ρ€Π°ΡΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ css прСдоставляСт Π½Π°ΠΌ всС Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΠ΅ для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠ³ΠΎ внСшнСго Π²ΠΈΠ΄Π° Ρƒ сайта.

ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ эту Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΡŽ ΠΏΡ€ΠΈ вСрсткС ΠΏΠΎΠ΄ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ устройства, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ·Π½Π°Ρ‚ΡŒ ΠΈΠ· этого видСокурса. Π’Π°ΠΊΠΆΠ΅ Π² нашСм ΠΏΡ€Π΅ΠΌΠΈΡƒΠΌ Ρ€Π°Π·Π΄Π΅Π»Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΉΡ‚ΠΈ ΠΎΠ±ΡƒΡ‡Π°ΡŽΡ‰ΠΈΠ΅ ΡƒΡ€ΠΎΠΊΠΈ ΠΏΠΎ основам этой Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚Ρ‹ΠΉ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π» ΠΏΠΎ CSS3, поэтому Π²Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π½ΠΈΡ‡Π΅Π³ΠΎ ΠΈΡΠΊΠ°Ρ‚ΡŒ, всС ΡƒΠΆΠ΅ Π΅ΡΡ‚ΡŒ, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π±Π΅Ρ€ΠΈ ΠΈ ΡƒΡ‡ΠΈΡΡŒ.

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

ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈΠΉ курс ΠΏΠΎ вСрсткС Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ сайта с нуля!

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ курс ΠΈ ΡƒΠ·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ соврСмСнныС сайты Π½Π° HTML5 ΠΈ CSS3

Π£Π·Π½Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

PSD to HTML

ВСрстка сайта Π½Π° HTML5 ΠΈ CSS3 с нуля

Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ

Блочная вСрстка сайта css, фиксированный ΠΈ Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½

ЦСль ΡƒΡ€ΠΎΠΊΠ°: Знакомство с Π±Π»ΠΎΡ‡Π½ΠΎΠΉ вСрсткой CSS. ΠŸΠΎΠ»ΡƒΡ‡Π΅Π½ΠΈΠ΅ Π½Π°Π²Ρ‹ΠΊΠΎΠ² использования Π±Π»ΠΎΡ‡Π½ΠΎΠΉ вСрстки сайта

Блочная вСрстка сайта

  • ΠŸΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ со слоями ΠΈΠ»ΠΈ, ΠΈΠ½Π°Ρ‡Π΅ говоря, Π±Π»ΠΎΠΊΠ°ΠΌΠΈ ΠΈ элСмСнтами div, основная Π½Π°Π³Ρ€ΡƒΠ·ΠΊΠ° лоТится Π½Π° CSS, Ρ‚.ΠΊ. Π±Π΅Π· свойств слои ΠΈΠ· сСбя практичСски Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚.
  • К соТалСнию Π΄ΠΎ сих ΠΏΠΎΡ€ сущСствуСт ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° с ΠΊΡ€ΠΎΡΡΠ±Ρ€Π°ΡƒΠ·Π΅Ρ€Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ с Π±Π»ΠΎΠΊΠ°ΠΌΠΈ. Π’.Π΅. ΠΎΠ΄Π½ΠΈ ΠΈ Ρ‚Π΅ ΠΆΠ΅ свойства Π΄Π°ΡŽΡ‚ Ρ€Π°Π·Π½Ρ‹ΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π² Ρ€Π°Π·Π½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…. Для Π±ΠΎΡ€ΡŒΠ±Ρ‹ с Ρ‚Π°ΠΊΠΈΠΌΠΈ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°ΠΌΠΈ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ Ρ‚Π°ΠΊ Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΡ‹Π΅ Ρ…Π°ΠΊΠΈ.
    Π₯Π°ΠΊ
    β€” это Π½Π°Π±ΠΎΡ€ ΠΏΡ€ΠΈΠ΅ΠΌΠΎΠ², ΠΊΠΎΠ³Π΄Π° ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΌ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌ подаСтся ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ понимаСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ этим Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ, Π° ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ игнорируСтся.

ΠžΡ‚Π»ΠΈΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ‡Π΅Ρ€Ρ‚Ρ‹ ΠΎΡ‚ Ρ‚Π°Π±Π»ΠΈΡ‡Π½ΠΎΠΉ вСрстки

Допустим, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ шаблон страницы с «шапкой», Β«ΠΏΠΎΠ΄Π²Π°Π»ΠΎΠΌΒ» ΠΈ двумя ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ.
ΠžΡ‚Π»ΠΈΡ‡ΠΈΡ:

  1. Высота слоСв div ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π° высотой ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°:
  2. Вабличная вСрсткаБлочная вСрстка
  3. Π’ случаС, ΠΊΠΎΠ³Π΄Π° содСрТимоС слоя ΠΏΡ€Π΅Π²Ρ‹ΡˆΠ°Π΅Ρ‚ Π΅Π³ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²Π»Π΅Π½Π½ΡƒΡŽ высоту, Ρ‚ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΏΠΎ-Ρ€Π°Π·Π½ΠΎΠΌΡƒ Π²Π΅Π΄ΡƒΡ‚ сСбя β€” ΠΎΠ΄Π½ΠΈ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°ΡŽΡ‚ высоту слоя ΠΏΠΎΠ΄ Π½ΠΎΠ²Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, Π° Π΄Ρ€ΡƒΠ³ΠΈΠ΅, оставляя высоту ΠΏΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΉ, Π½Π°ΠΊΠ»Π°Π΄Ρ‹Π²Π°ΡŽΡ‚ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΏΠΎΠ²Π΅Ρ€Ρ… слоя.

Ѐиксированный Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈΠ»ΠΈ
ТСсткая блочная вСрстка (Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ)

  • Ѐиксированный ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΏΠΎΠ΄Ρ€Π°Π·ΡƒΠΌΠ΅Π²Π°Π΅Ρ‚ использованиС слоСв Π·Π°Π΄Π°Π½Π½ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹, которая опрСдСляСтся Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ.
  • Π’Π°ΠΊ ΠΊΠ°ΠΊ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ популярным срСди ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ сСти являСтся Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€Π° 1024Γ—768, Ρ‚ΠΎ ΠΆΠ΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ Π½Π° Π½Π΅Π³ΠΎ. ΠžΠ±Ρ‰Π°Ρ ΡˆΠΈΡ€ΠΈΠ½Π° Π±Π»ΠΎΠΊΠΎΠ² Π² Ρ‚Π°ΠΊΠΎΠΌ случаС составляСт 900–1000 пиксСлСй (нСбольшая Ρ‡Π°ΡΡ‚ΡŒ пиксСлСй трСбуСтся Π½Π° полосы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ΠΈ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°).
  • Основной Π±Π»ΠΎΠΊ с ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ размСщаСтся ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ, Ρ‚ΠΎΠ³Π΄Π° «свободныС» поля ΠΏΠΎ краям Π½Π΅ΠΏΠ»ΠΎΡ…ΠΎ смотрятся Π΄Π°ΠΆΠ΅ ΠΏΡ€ΠΈ большом Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΈ ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€Π°.

Рис.1. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ фиксированного Π΄ΠΈΠ·Π°ΠΉΠ½Π°

  • ΠžΠ±Ρ‰Π°Ρ ΡˆΠΈΡ€ΠΈΠ½Π° ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠΌ, Ρ‡Ρ‚ΠΎ называСтся Β«Π½Π° Π³Π»Π°Π·Β», ΠΈΠ»ΠΈ послС сбора ΠΊΠ°ΠΊΠΈΡ…-Π»ΠΈΠ±ΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… свСдСний.
  • ΠŸΡ€ΠΈΠΌΠ΅Ρ€:

    ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ фиксированный Π΄ΠΈΠ·Π°ΠΉΠ½ сайта Π½Π° основС прСдставлСнного Π²Ρ‹ΡˆΠ΅ изобраТСния

    Π’Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅:

    • Β«Π Π°Π·Π±ΠΈΠ²Π°Π΅ΠΌΒ» всС основныС элСмСнты страницы Π½Π° Π±Π»ΠΎΠΊΠΈ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:
      • Π±Π»ΠΎΠΊ 1 β€” слой ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ (id="shapka"),
      • Π±Π»ΠΎΠΊ 2 ΠΈ 3 Π·Π°ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ΡΡ Π² Π΅Π΄ΠΈΠ½Ρ‹ΠΉ Π±Π»ΠΎΠΊ (id="container"),
      • Π±Π»ΠΎΠΊ 2 β€” слой с мСню (id="menu"),
      • Π±Π»ΠΎΠΊ 3 β€” слой с ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ (id="content"),
      • Π±Π»ΠΎΠΊ 4 β€” слой с id="bottom".

    Π‘Ρ…Π΅ΠΌΠ°Ρ‚ΠΈΡ‡Π½ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°Π·ΠΈΠΌ располоТСниС Π±Π»ΠΎΠΊΠΎΠ²:

    <body>
    <div>1</div>
    <div>
    	<div>2</div>
    	<div>3</div>
    </div>
    <div>4</div>
    </body>

    <body> <div>1</div> <div> <div>2</div> <div>3</div> </div> <div>4</div> </body>

    1. Π—Π°Π΄Π°Π΅ΠΌ свойства «шапки» (Π±Π»ΠΎΠΊ 1)

    1. Π»ΠΈΠ±ΠΎ Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ Π·Π°Π΄Π°Π² Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойству height Π² пиксСлях, ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π°Ρ… ΠΈΠ»ΠΈ Π΄Ρ€. Π΅Π΄ΠΈΠ½ΠΈΡ†Π°Ρ…;
    2. Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, для Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ слоя «шапки»:

    3. Π»ΠΈΠ±ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ высоту ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ отступа
    4. Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

        padding-top: 15px; 
        padding-bottom: 15px;

      padding-top: 15px; padding-bottom: 15px;

    Π’Π΅ΡΡŒ ΠΊΠΎΠ΄ для шапки:

    #shapka{
      text-align: left; /* Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅Π³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ */
      width: 750px; /* Π¨ΠΈΡ€ΠΈΠ½Π° Π±Π»ΠΎΠΊΠ° ΠΈ общая ΡˆΠΈΡ€ΠΈΠ½Π°*/
      background: #900000; /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° */
      height: 50px; /* Высота Π±Π»ΠΎΠΊΠ° */
      margin-right: auto; /* Авто-отступ справа */
      margin-left: auto; /* Авто-отступ слСва */
      padding: 10px; /* Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ поля Π²ΠΎΠΊΡ€ΡƒΠ³ содСрТимого */
     }

    #shapka{ text-align: left; /* Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅Π³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ */ width: 750px; /* Π¨ΠΈΡ€ΠΈΠ½Π° Π±Π»ΠΎΠΊΠ° ΠΈ общая ΡˆΠΈΡ€ΠΈΠ½Π°*/ background: #900000; /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° */ height: 50px; /* Высота Π±Π»ΠΎΠΊΠ° */ margin-right: auto; /* Авто-отступ справа */ margin-left: auto; /* Авто-отступ слСва */ padding: 10px; /* Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ поля Π²ΠΎΠΊΡ€ΡƒΠ³ содСрТимого */ }

    2. Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ свойства ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°

    3. Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ свойства для Π±Π»ΠΎΠΊΠ° 2 β€” мСню

    4. Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ свойства для Π±Π»ΠΎΠΊΠ° 3 β€” ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚

    • Π—Π°Π΄Π°Π΅ΠΌ ΡˆΠΈΡ€ΠΈΠ½Ρƒ слоя ΠΈΠ· расчСта 770px β€” 200px = 570px, Но! Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΌΡ‹ установили Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ отступы Π² ΠΎΠ±ΠΎΠΈΡ… Π±Π»ΠΎΠΊΠ°Ρ… 2 ΠΈ 3, Ρ‚ΠΎ ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π²Ρ‹Ρ‡Π΅ΡΡ‚ΡŒ Π΅Ρ‰Π΅ 40 пиксСлСй: 20 β€” Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ отступы Π±Π»ΠΎΠΊΠ° с мСню ΠΈ 20 β€” Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ отступы Π±Π»ΠΎΠΊΠ° с ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ. ΠŸΠΎΠ»ΡƒΡ‡ΠΈΠΌ ΡˆΠΈΡ€ΠΈΠ½Ρƒ слоя 770px β€” 200px β€” 40px = 530px
    • Π—Π°Π΄Π°Π΅ΠΌ ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ float: left, ΠΈΡΠΊΠ»ΡŽΡ‡Π°Ρ Π±Π°Π³ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° Internet Explorer: Ссли Π½Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ свойство, Ρ‚ΠΎ ΠΌΠ΅ΠΆΠ΄Ρƒ слоями Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π·ΠΎΡ€. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Ссли Π½Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ это свойство, Ρ‚ΠΎ Π±Π»ΠΎΠΊ окаТСтся Π·Π° Π±Π»ΠΎΠΊΠΎΠΌ мСню, ΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ лишь Π΅Π³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ (тСкст) Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ±Ρ‚Π΅ΠΊΠ°Ρ‚ΡŒ Π±Π»ΠΎΠΊ мСню справа.
    • Π—Π°Π΄Π°Π΅ΠΌ Ρ†Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° (background) ΠΈ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ поля (padding)
    • #content { /* ΠŸΡ€Π°Π²Π°Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°*/ 
          width: 550px; /* Π¨ΠΈΡ€ΠΈΠ½Π° слоя */ 
          float: left; /* ΠžΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ с сосСдним слоСм */ 
          padding: 10px; /* Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ поля Π²ΠΎΠΊΡ€ΡƒΠ³ содСрТимого */ 
          background: #e0e0e0; /* Π¦Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° */  
         }

      #content { /* ΠŸΡ€Π°Π²Π°Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°*/ width: 550px; /* Π¨ΠΈΡ€ΠΈΠ½Π° слоя */ float: left; /* ΠžΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ с сосСдним слоСм */ padding: 10px; /* Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ поля Π²ΠΎΠΊΡ€ΡƒΠ³ содСрТимого */ background: #e0e0e0; /* Π¦Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° */ }

    5. Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ свойства для Π±Π»ΠΎΠΊΠ° 4 β€” Β«ΠΏΠΎΠ΄Π²Π°Π»Β»

    • Π¨ΠΈΡ€ΠΈΠ½Ρƒ слоя устанавливаСм Π² 750 пиксСлСй
    • Для этого Π±Π»ΠΎΠΊΠ° Π½Π°Π΄ΠΎ ΡƒΠ±Ρ€Π°Ρ‚ΡŒ ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅, Ρ‚.Π΅. ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ свойство clear
    • УстанавливаСм Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ поля padding
    • Π—Π°Π΄Π°Π΅ΠΌ Ρ†Π²Π΅Ρ‚ для Ρ„ΠΎΠ½Π° (background) ΠΈ тСкста (color)
    • Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΡƒΠ΅ΠΌ Π±Π»ΠΎΠΊ (margin-right ΠΈ margin-left)
    • #bottom{
      	width:750px; /* Π¨ΠΈΡ€ΠΈΠ½Π° слоя */
      	clear:left; /* Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅ΠΌ Π±Π»ΠΎΡ‡Π½ΠΎΡΡ‚ΡŒ ΠΈ располагаСм слой слСва */
      	padding: 10px; /* Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ поля Π²ΠΎΠΊΡ€ΡƒΠ³ содСрТимого */
              background:#444; /* Ρ„ΠΎΠ½ */
      	color:#fff; /* Ρ†Π²Π΅Ρ‚ тСкста */
              margin-right: auto; /* Авто-отступ справа */
              margin-left: auto; /* Авто-отступ слСва */
      }

      #bottom{ width:750px; /* Π¨ΠΈΡ€ΠΈΠ½Π° слоя */ clear:left; /* Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅ΠΌ Π±Π»ΠΎΡ‡Π½ΠΎΡΡ‚ΡŒ ΠΈ располагаСм слой слСва */ padding: 10px; /* Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ поля Π²ΠΎΠΊΡ€ΡƒΠ³ содСрТимого */ background:#444; /* Ρ„ΠΎΠ½ */ color:#fff; /* Ρ†Π²Π΅Ρ‚ тСкста */ margin-right: auto; /* Авто-отступ справа */ margin-left: auto; /* Авто-отступ слСва */ }

    Π˜Ρ‚ΠΎΠ³ΠΎΠ²Ρ‹ΠΉ ΠΊΠΎΠ΄: всё вмСстС

    /* для блока 1 - шапка */
    #shapka{
      text-align: left; /* Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅Π³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ */
      width: 750px; /* Π¨ΠΈΡ€ΠΈΠ½Π° Π±Π»ΠΎΠΊΠ° ΠΈ общая ΡˆΠΈΡ€ΠΈΠ½Π°*/
      background: #900000; /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° */
      height: 50px; /* Высота Π±Π»ΠΎΠΊΠ° */
      margin-right: auto; /* Авто-отступ справа */
      margin-left: auto; /* Авто-отступ слСва */
      padding: 10px; /* Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ поля Π²ΠΎΠΊΡ€ΡƒΠ³ содСрТимого */
    }
    /* для ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° */
    #container {
      width: 770px; /* Π¨ΠΈΡ€ΠΈΠ½Π° слоя ΠΈΠ»ΠΈ ΡˆΠΈΡ€ΠΈΠ½Π° ΠΌΠ°ΠΊΠ΅Ρ‚Π°+20px */
      margin-right: auto; /* Авто-отступ справа */
      margin-left: auto; /* Авто-отступ слСва */
     }
    /* для блока 2 - мСню */
    #menu {
      width: 200px; /* Π¨ΠΈΡ€ΠΈΠ½Π° слоя */ 
      float: left; /* ΠžΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ с сосСдним слоСм */ 
      color: white; /* Π¦Π²Π΅Ρ‚ тСкста */
      background: #008080; /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° */
      padding: 10px; /* Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ поля Π²ΠΎΠΊΡ€ΡƒΠ³ содСрТимого */
     }
    /* для Π±Π»ΠΎΠΊΠ° 3 - ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ */
    #content { /* ΠŸΡ€Π°Π²Π°Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°*/ 
        width: 530px; /* Π¨ΠΈΡ€ΠΈΠ½Π° слоя */ 
        float: left; /* ΠžΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ с сосСдним слоСм */ 
        padding: 10px; /* Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ поля Π²ΠΎΠΊΡ€ΡƒΠ³ содСрТимого */ 
        background: #e0e0e0; /* Π¦Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° */  
       } 
    /* для блока 4 - подвал */
    #bottom{
    	width:750px; /* Π¨ΠΈΡ€ΠΈΠ½Π° слоя */ 
    	clear:left; /* Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅ΠΌ Π±Π»ΠΎΡ‡Π½ΠΎΡΡ‚ΡŒ ΠΈ располагаСм слой слСва */
    	padding: 10px; /* Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ поля Π²ΠΎΠΊΡ€ΡƒΠ³ содСрТимого */
    	background:#444;
    	color:#fff;
    	margin-right: auto; /* Авто-отступ справа */
        margin-left: auto; /* Авто-отступ слСва */
    }

    /* для Π±Π»ΠΎΠΊΠ° 1 — шапка */ #shapka{ text-align: left; /* Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅Π³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ */ width: 750px; /* Π¨ΠΈΡ€ΠΈΠ½Π° Π±Π»ΠΎΠΊΠ° ΠΈ общая ΡˆΠΈΡ€ΠΈΠ½Π°*/ background: #900000; /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° */ height: 50px; /* Высота Π±Π»ΠΎΠΊΠ° */ margin-right: auto; /* Авто-отступ справа */ margin-left: auto; /* Авто-отступ слСва */ padding: 10px; /* Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ поля Π²ΠΎΠΊΡ€ΡƒΠ³ содСрТимого */ } /* для ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° */ #container { width: 770px; /* Π¨ΠΈΡ€ΠΈΠ½Π° слоя ΠΈΠ»ΠΈ ΡˆΠΈΡ€ΠΈΠ½Π° ΠΌΠ°ΠΊΠ΅Ρ‚Π°+20px */ margin-right: auto; /* Авто-отступ справа */ margin-left: auto; /* Авто-отступ слСва */ } /* для Π±Π»ΠΎΠΊΠ° 2 — мСню */ #menu { width: 200px; /* Π¨ΠΈΡ€ΠΈΠ½Π° слоя */ float: left; /* ΠžΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ с сосСдним слоСм */ color: white; /* Π¦Π²Π΅Ρ‚ тСкста */ background: #008080; /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° */ padding: 10px; /* Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ поля Π²ΠΎΠΊΡ€ΡƒΠ³ содСрТимого */ } /* для Π±Π»ΠΎΠΊΠ° 3 — ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ */ #content { /* ΠŸΡ€Π°Π²Π°Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°*/ width: 530px; /* Π¨ΠΈΡ€ΠΈΠ½Π° слоя */ float: left; /* ΠžΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ с сосСдним слоСм */ padding: 10px; /* Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ поля Π²ΠΎΠΊΡ€ΡƒΠ³ содСрТимого */ background: #e0e0e0; /* Π¦Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° */ } /* для Π±Π»ΠΎΠΊΠ° 4 — ΠΏΠΎΠ΄Π²Π°Π» */ #bottom{ width:750px; /* Π¨ΠΈΡ€ΠΈΠ½Π° слоя */ clear:left; /* Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅ΠΌ Π±Π»ΠΎΡ‡Π½ΠΎΡΡ‚ΡŒ ΠΈ располагаСм слой слСва */ padding: 10px; /* Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ поля Π²ΠΎΠΊΡ€ΡƒΠ³ содСрТимого */ background:#444; color:#fff; margin-right: auto; /* Авто-отступ справа */ margin-left: auto; /* Авто-отступ слСва */ }

    </style>
    </head> 
    <body>
    <div>1</div>
    <div>
    	<div>2</div>
    	<div>3</div>
    </div>
    <div>4</div>
    </body>

    </style> </head> <body> <div>1</div> <div> <div>2</div> <div>3</div> </div> <div>4</div> </body>

    Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

    Рис.2. ЖСсткая блочная вСрстка ΠΈΠ· Π΄Π²ΡƒΡ… ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ

    Ѐиксированный Π΄ΠΈΠ·Π°ΠΉΠ½ для Ρ‚Ρ€Π΅Ρ… ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ

    ΠŸΡ€ΠΈ фиксированном Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ для ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΠΈΠ· Ρ‚Ρ€Π΅Ρ… ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ Π΄Π²Π° основных ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π° построСния ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΠΎΠΉ сСтки:

    1. ИспользованиС свойства float для располоТСния ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ рядом.
    2. ИспользованиС Π½Π°Π±ΠΎΡ€Π° Ρ‚Π΅Ρ… CSS свойств, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Ρ‹ для позиционирования слоСв.

    Рассмотрим ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ случай.

    ИспользованиС свойства float для ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π² Ρ‚Ρ€ΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ

    На рис. 3 β€” Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ использования свойства float для Ρ‚Ρ€Π΅Ρ…ΠΊΠΎΠ»ΠΎΠ½Π½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π°. На самом Π΄Π΅Π»Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ 6 слоСв β€” ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ для Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΈ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ для самих ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ.

    Рис. 3. Ѐиксированный Π΄ΠΈΠ·Π°ΠΉΠ½ Π² Ρ‚Ρ€ΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ

    ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π²Π΅Π±-страницу с ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠΌ ΠΈΠ· Ρ‚Ρ€Π΅Ρ… ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½Π½ΡƒΡŽ Π½Π° рис. 3. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠ΅ΠΌΡ‹ фиксированного Π±Π»ΠΎΡ‡Π½ΠΎΠ³ΠΎ макСтирования

    Π’Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅:

    1. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ структуры html-ΠΊΠΎΠ΄Π°

    • ΠžΠΏΡ€Π΅Π΄Π΅Π»ΠΈΠΌ для Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² Ρ‚Ρ€ΠΈ слоя (#header...) ΠΈ для ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ Ρ‚Ρ€ΠΈ слоя (#col...).
    • Π’Π°ΠΊ ΠΊΠ°ΠΊ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΠΈ ΠΈΡ… Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ располоТСны Π½Π° Π΄Π²ΡƒΡ… Ρ€Π°Π·Π½Ρ‹Ρ… строках, Ρ‚ΠΎ объСдСним ΠΈΡ… Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹ (class="container").
    • ΠŸΠΎΠ»ΡƒΡ‡ΠΈΠΌ схСматичноС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ располоТСния Π±Π»ΠΎΠΊΠΎΠ²:

    ΠŸΠΎΠ»ΡƒΡ‡ΠΈΠΌ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ html-структуру:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    
    <body>
    <div>
        <div>Π•Π²Π³Π΅Π½ΠΈΠΉ Π•Π²Ρ‚ΡƒΡˆΠ΅Π½ΠΊΠΎ</div>
        <div>Π’Π°Π»Π΅Ρ€ΠΈΠΉ Π‘Ρ€ΡŽΡΠΎΠ²</div>
        <div>Π­Π΄ΡƒΠ°Ρ€Π΄ Асадов</div>
      </div>
      <div>
        <div>
    		МнС снится старый Π΄Ρ€ΡƒΠ³,<br/>ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ стал Π²Ρ€Π°Π³ΠΎΠΌ,<br/>
    		Π½ΠΎ снится Π½Π΅ Π²Ρ€Π°Π³ΠΎΠΌ,<br/>Π° Ρ‚Π΅ΠΌ ΠΆΠ΅ самым Π΄Ρ€ΡƒΠ³ΠΎΠΌ.<br/>
    		Π‘ΠΎ мною Π½Π΅Ρ‚ Π΅Π³ΠΎ,<br/>Π½ΠΎ ΠΎΠ½ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΊΡ€ΡƒΠ³ΠΎΠΌ,<br/>
    		ΠΈ Π³ΠΎΠ»ΠΎΠ²Π° ΠΈΠ΄Π΅Ρ‚<br/>ΠΎΡ‚ сновидСний ΠΊΡ€ΡƒΠ³ΠΎΠΌ.
    	</div>
        <div>
    	Π’Π΅Π»ΠΈΠΊΠΎΠ΅ Π²Π±Π»ΠΈΠ·ΠΈ Π½Π΅ΡƒΠ»ΠΎΠ²ΠΈΠΌΠΎ,<br/>Π›ΠΈΡˆΡŒ ΠΈΠ·Π΄Π°Π»ΠΈ торТСствСнно ΠΎΠ½ΠΎ,<br/>
    	ΠœΡ‹ всС ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΠΌ ΠΏΡ€Π΅Π΄ Π²Π΅Π»ΠΈΠΊΠΈΠΌ ΠΌΠΈΠΌΠΎ<br/>И Π²ΠΈΠ΄ΠΈΠΌ лишь случайноС Π·Π²Π΅Π½ΠΎ.
    	</div>
        <div>
    	Π’ Π»ΡŽΠ±Ρ‹Ρ… Π΄Π΅Π»Π°Ρ… ΠΏΡ€ΠΈ максимумС слоТностСй<br/>ΠŸΠΎΠ΄Ρ…ΠΎΠ΄ ΠΊ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ΅ всС-Ρ‚Π°ΠΊΠΈ ΠΎΠ΄ΠΈΠ½:<br/>
    	Π–Π΅Π»Π°Π½ΡŒΠ΅ - это мноТСство возмоТностСй,<br/>А нСТСланьС - мноТСство ΠΏΡ€ΠΈΡ‡ΠΈΠ½.
    	</div>
      </div>
    </body>

    <body> <div> <div>Π•Π²Π³Π΅Π½ΠΈΠΉ Π•Π²Ρ‚ΡƒΡˆΠ΅Π½ΠΊΠΎ</div> <div>Π’Π°Π»Π΅Ρ€ΠΈΠΉ Π‘Ρ€ΡŽΡΠΎΠ²</div> <div>Π­Π΄ΡƒΠ°Ρ€Π΄ Асадов</div> </div> <div> <div> МнС снится старый Π΄Ρ€ΡƒΠ³,<br/>ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ стал Π²Ρ€Π°Π³ΠΎΠΌ,<br/> Π½ΠΎ снится Π½Π΅ Π²Ρ€Π°Π³ΠΎΠΌ,<br/>Π° Ρ‚Π΅ΠΌ ΠΆΠ΅ самым Π΄Ρ€ΡƒΠ³ΠΎΠΌ.<br/> Π‘ΠΎ мною Π½Π΅Ρ‚ Π΅Π³ΠΎ,<br/>Π½ΠΎ ΠΎΠ½ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΊΡ€ΡƒΠ³ΠΎΠΌ,<br/> ΠΈ Π³ΠΎΠ»ΠΎΠ²Π° ΠΈΠ΄Π΅Ρ‚<br/>ΠΎΡ‚ сновидСний ΠΊΡ€ΡƒΠ³ΠΎΠΌ. </div> <div> Π’Π΅Π»ΠΈΠΊΠΎΠ΅ Π²Π±Π»ΠΈΠ·ΠΈ Π½Π΅ΡƒΠ»ΠΎΠ²ΠΈΠΌΠΎ,<br/>Π›ΠΈΡˆΡŒ ΠΈΠ·Π΄Π°Π»ΠΈ торТСствСнно ΠΎΠ½ΠΎ,<br/> ΠœΡ‹ всС ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΠΌ ΠΏΡ€Π΅Π΄ Π²Π΅Π»ΠΈΠΊΠΈΠΌ ΠΌΠΈΠΌΠΎ<br/>И Π²ΠΈΠ΄ΠΈΠΌ лишь случайноС Π·Π²Π΅Π½ΠΎ. </div> <div> Π’ Π»ΡŽΠ±Ρ‹Ρ… Π΄Π΅Π»Π°Ρ… ΠΏΡ€ΠΈ максимумС слоТностСй<br/>ΠŸΠΎΠ΄Ρ…ΠΎΠ΄ ΠΊ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ΅ всС-Ρ‚Π°ΠΊΠΈ ΠΎΠ΄ΠΈΠ½:<br/> Π–Π΅Π»Π°Π½ΡŒΠ΅ — это мноТСство возмоТностСй,<br/>А нСТСланьС — мноТСство ΠΏΡ€ΠΈΡ‡ΠΈΠ½. </div> </div> </body>

    2. Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ стилСй для Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² (сСлСктор header...) ΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ (сСлСктор col...)

    • Π¨ΠΈΡ€ΠΈΠ½Ρƒ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² сдСлаСм Ρƒ всСх ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ 3, Π° срСдняя ΡˆΠΈΡ€ΠΈΠ½Π° страницы Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ 700-900 пиксСлСй, Ρ‚ΠΎ установим ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ Π² 250 пиксСлСй.
    •  #header1, #header2, #header3, #col1, #col2, #col3 {
          width: 250px; /* Π¨ΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ */
      }

      #header1, #header2, #header3, #col1, #col2, #col3 { width: 250px; /* Π¨ΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ */ }

    • Π”ΠΎΠ±Π°Π²ΠΈΠΌ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ поля (отступы ΠΎΡ‚ содСрТимого тСкста) β€” padding ΠΈ внСшниС отступы, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ Π·Π°Π·ΠΎΡ€ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ свойства Π·Π°Π΄Π°ΡŽΡ‚ΡΡ сразу для всС ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ, Π° сам вСсь ΠΌΠ°ΠΊΠ΅Ρ‚ Π½Π΅ цСнтрируСтся, Π° выравниваСтся ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ, Ρ‚ΠΎ установим отступ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с ΠΎΠ΄Π½ΠΎΠΉ стороны β€” Π»Π΅Π²ΠΎΠΉ β€” Ρƒ всСх ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ (margin-left).
    •  #header1, #header2, #header3, #col1, #col2, #col3 {
          width: 250px; /* Π¨ΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ */
          padding: 5px; /* Поля Π²ΠΎΠΊΡ€ΡƒΠ³ тСкста */
          margin-left: 5px; /* ΠžΡ‚ΡΡ‚ΡƒΠΏ слСва */
         }

      #header1, #header2, #header3, #col1, #col2, #col3 { width: 250px; /* Π¨ΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ */ padding: 5px; /* Поля Π²ΠΎΠΊΡ€ΡƒΠ³ тСкста */ margin-left: 5px; /* ΠžΡ‚ΡΡ‚ΡƒΠΏ слСва */ }

    • Π”ΠΎΠ±Π°Π²ΠΈΠΌ Ρ‚Π°ΠΊΠΆΠ΅ внСшний отступ свСрху, обСспСчив Π·Π°Π·ΠΎΡ€ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ ΠΌΠ΅ΠΆΠ΄Ρƒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΌΠΈ ΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ, Π° Ρ‚Π°ΠΊΠΆΠ΅ отступ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΠΎΡ‚ Π²Π΅Ρ€Ρ…Π° страницы (margin-top).
    •  #header1, #header2, #header3, #col1, #col2, #col3 {
          ...
          margin-top: 2px; /* ΠžΡ‚ΡΡ‚ΡƒΠΏ свСрху */
         }

      #header1, #header2, #header3, #col1, #col2, #col3 { … margin-top: 2px; /* ΠžΡ‚ΡΡ‚ΡƒΠΏ свСрху */ }

    • Для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π±Π»ΠΎΡ‡Π½Ρ‹Π΅ Ρ‚Π΅Π³ΠΈ div, Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΠ»ΠΈΡΡŒ рядом Π΄Ρ€ΡƒΠ³ с Π΄Ρ€ΡƒΠ³ΠΎΠΌ, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ ΠΈΠΌ ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ β€” float.
    •  #header1, #header2, #header3, #col1, #col2, #col3 {
          ...
          float: left; /* Бостыковка ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ */
         }

      #header1, #header2, #header3, #col1, #col2, #col3 { … float: left; /* Бостыковка ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ */ }

    • ДобавляСм Π³Ρ€Π°Π½ΠΈΡ†Ρƒ для Π±Π»ΠΎΠΊΠΎΠ² (border) ΠΈ ΠΈ Π·Π°Π΄Π°Π΅ΠΌ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΡˆΡ€ΠΈΡ„Ρ‚Π° (font-family, font-weight, font-size, color).
    •  #header1, #header2, #header3, #col1, #col2, #col3 {
          ...
          border: 1px solid black; /* Π Π°ΠΌΠΊΠ° Π²ΠΎΠΊΡ€ΡƒΠ³ слоя */
          font-family: Verdana, Arial, sans-serif; /* НС сСрифный ΠΈΠ»ΠΈ Ρ€ΡƒΠ±Π»Π΅Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ */
          font-weight: bold; /* Π–ΠΈΡ€Π½ΠΎΠ΅ Π½Π°Ρ‡Π΅Ρ€Ρ‚Π°Π½ΠΈΠ΅ тСкста Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° */
          font-size: 80%; /* Π Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° */
          color: white; /* Π¦Π²Π΅Ρ‚ тСкста Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° */
         }

      #header1, #header2, #header3, #col1, #col2, #col3 { … border: 1px solid black; /* Π Π°ΠΌΠΊΠ° Π²ΠΎΠΊΡ€ΡƒΠ³ слоя */ font-family: Verdana, Arial, sans-serif; /* НС сСрифный ΠΈΠ»ΠΈ Ρ€ΡƒΠ±Π»Π΅Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ */ font-weight: bold; /* Π–ΠΈΡ€Π½ΠΎΠ΅ Π½Π°Ρ‡Π΅Ρ€Ρ‚Π°Π½ΠΈΠ΅ тСкста Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° */ font-size: 80%; /* Π Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° */ color: white; /* Π¦Π²Π΅Ρ‚ тСкста Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° */ }

      ΠŸΠΎΠ»ΡƒΡ‡ΠΈΠΌ ΠΊΠΎΠ΄:

       #header1, #header2, #header3, #col1, #col2, #col3 {
          width: 250px; /* Π¨ΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ */
          padding: 5px; /* Поля Π²ΠΎΠΊΡ€ΡƒΠ³ тСкста */
          margin-left: 5px; /* ΠžΡ‚ΡΡ‚ΡƒΠΏ слСва */
          margin-top: 2px; /* ΠžΡ‚ΡΡ‚ΡƒΠΏ свСрху */
          float: left; /* Бостыковка ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ */
          border: 1px solid black; /* Π Π°ΠΌΠΊΠ° Π²ΠΎΠΊΡ€ΡƒΠ³ слоя */
          font-family: Verdana, Arial, sans-serif; /* НС сСрифный ΠΈΠ»ΠΈ Ρ€ΡƒΠ±Π»Π΅Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ */
          font-weight: bold; /* Π–ΠΈΡ€Π½ΠΎΠ΅ Π½Π°Ρ‡Π΅Ρ€Ρ‚Π°Π½ΠΈΠ΅ тСкста Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° */
          font-size: 80%; /* Π Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° */
          color: white; /* Π¦Π²Π΅Ρ‚ тСкста Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° */
      }

      #header1, #header2, #header3, #col1, #col2, #col3 { width: 250px; /* Π¨ΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ */ padding: 5px; /* Поля Π²ΠΎΠΊΡ€ΡƒΠ³ тСкста */ margin-left: 5px; /* ΠžΡ‚ΡΡ‚ΡƒΠΏ слСва */ margin-top: 2px; /* ΠžΡ‚ΡΡ‚ΡƒΠΏ свСрху */ float: left; /* Бостыковка ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ */ border: 1px solid black; /* Π Π°ΠΌΠΊΠ° Π²ΠΎΠΊΡ€ΡƒΠ³ слоя */ font-family: Verdana, Arial, sans-serif; /* НС сСрифный ΠΈΠ»ΠΈ Ρ€ΡƒΠ±Π»Π΅Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ */ font-weight: bold; /* Π–ΠΈΡ€Π½ΠΎΠ΅ Π½Π°Ρ‡Π΅Ρ€Ρ‚Π°Π½ΠΈΠ΅ тСкста Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° */ font-size: 80%; /* Π Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° */ color: white; /* Π¦Π²Π΅Ρ‚ тСкста Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° */ }

    • Установим Π·Π°Π΄Π½ΠΈΠΉ Ρ„ΠΎΠ½ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ сСлСктора.
    •    #header1 { background: #B38541; }
         #header2 { background: #008159; }
         #header3 { background: #006077; }
         #col1 { background: #EBE0C5; }
         #col2 { background: #BBE1C4; }
         #col3 { background: #ADD0D9; }

      #header1 { background: #B38541; } #header2 { background: #008159; } #header3 { background: #006077; } #col1 { background: #EBE0C5; } #col2 { background: #BBE1C4; } #col3 { background: #ADD0D9; }

    Π‘ΠΌΠΎΡ‚Ρ€ΠΈΠΌ ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΡ‡Π½Ρ‹ΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

    Рис. 4. ΠŸΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΡ‡Π½Ρ‹ΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚

    3. Π—Π°Π΄Π°Π½ΠΈΠ΅ стиля для ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠ²

     #col1, #col2, #col3 { 
        font-family: "Times New Roman", Times, serif; /* Π¨Ρ€ΠΈΡ„Ρ‚ сСрифный ΠΈΠ»ΠΈ с засСчками */
        font-size: 100%; /* Π Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° */
        font-weight: normal; /* ΠΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠ΅ Π½Π°Ρ‡Π΅Ρ€Ρ‚Π°Π½ΠΈΠ΅ */
        color: black; /* Π¦Π²Π΅Ρ‚ тСкста */
       }

    #col1, #col2, #col3 { font-family: «Times New Roman», Times, serif; /* Π¨Ρ€ΠΈΡ„Ρ‚ сСрифный ΠΈΠ»ΠΈ с засСчками */ font-size: 100%; /* Π Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° */ font-weight: normal; /* ΠΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠ΅ Π½Π°Ρ‡Π΅Ρ€Ρ‚Π°Π½ΠΈΠ΅ */ color: black; /* Π¦Π²Π΅Ρ‚ тСкста */ }

    Π˜Ρ‚ΠΎΠ³ΠΎΠ²Ρ‹ΠΉ ΠΊΠΎΠ΄: всё вмСстС

    /* для ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΈ ΠΈΡ… Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² */
     #header1, #header2, #header3, #col1, #col2, #col3 { 
         width: 250px; /* Π¨ΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ */
        padding: 5px; /* Поля Π²ΠΎΠΊΡ€ΡƒΠ³ тСкста */
        margin-left: 5px; /* ΠžΡ‚ΡΡ‚ΡƒΠΏ слСва */
        margin-top: 2px; /* ΠžΡ‚ΡΡ‚ΡƒΠΏ свСрху */
        float: left; /* Бостыковка ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ */
        border: 1px solid black; /* Π Π°ΠΌΠΊΠ° Π²ΠΎΠΊΡ€ΡƒΠ³ слоя */
        font-family: Verdana, Arial, sans-serif; /* Π ΡƒΠ±Π»Π΅Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ */
        font-weight: bold; /* Π–ΠΈΡ€Π½ΠΎΠ΅ Π½Π°Ρ‡Π΅Ρ€Ρ‚Π°Π½ΠΈΠ΅ тСкста Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° */
        font-size: 80%; /* Π Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° */
        color: white; /* Π¦Π²Π΅Ρ‚ тСкста Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° */
       }
       /* для колонок */
       #col1, #col2, #col3 { 
        font-family: "Times New Roman", Times, serif; /* Π¨Ρ€ΠΈΡ„Ρ‚ с засСчками */
        font-size: 100%; /* Π Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° */
        font-weight: normal; /* ΠΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠ΅ Π½Π°Ρ‡Π΅Ρ€Ρ‚Π°Π½ΠΈΠ΅ */
        color: black; /* Π¦Π²Π΅Ρ‚ тСкста */
       } 
    Β 
       /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ слоя */
       #header1 { background: #B38541; }
       #header2 { background: #008159; }
       #header3 { background: #006077; }
       #col1 { background: #EBE0C5; }
       #col2 { background: #BBE1C4; }
       #col3 { background: #ADD0D9; }
    Β 
       .container { 
         clear: both;  /* ΠžΡ‚ΠΌΠ΅Π½ΡΠ΅Ρ‚ дСйствиС float */ 
       }

    /* для ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΈ ΠΈΡ… Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² */ #header1, #header2, #header3, #col1, #col2, #col3 { width: 250px; /* Π¨ΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ */ padding: 5px; /* Поля Π²ΠΎΠΊΡ€ΡƒΠ³ тСкста */ margin-left: 5px; /* ΠžΡ‚ΡΡ‚ΡƒΠΏ слСва */ margin-top: 2px; /* ΠžΡ‚ΡΡ‚ΡƒΠΏ свСрху */ float: left; /* Бостыковка ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ */ border: 1px solid black; /* Π Π°ΠΌΠΊΠ° Π²ΠΎΠΊΡ€ΡƒΠ³ слоя */ font-family: Verdana, Arial, sans-serif; /* Π ΡƒΠ±Π»Π΅Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ */ font-weight: bold; /* Π–ΠΈΡ€Π½ΠΎΠ΅ Π½Π°Ρ‡Π΅Ρ€Ρ‚Π°Π½ΠΈΠ΅ тСкста Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° */ font-size: 80%; /* Π Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° */ color: white; /* Π¦Π²Π΅Ρ‚ тСкста Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° */ } /* для ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ */ #col1, #col2, #col3 { font-family: «Times New Roman», Times, serif; /* Π¨Ρ€ΠΈΡ„Ρ‚ с засСчками */ font-size: 100%; /* Π Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° */ font-weight: normal; /* ΠΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠ΅ Π½Π°Ρ‡Π΅Ρ€Ρ‚Π°Π½ΠΈΠ΅ */ color: black; /* Π¦Π²Π΅Ρ‚ тСкста */ } /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ слоя */ #header1 { background: #B38541; } #header2 { background: #008159; } #header3 { background: #006077; } #col1 { background: #EBE0C5; } #col2 { background: #BBE1C4; } #col3 { background: #ADD0D9; } .container { clear: both; /* ΠžΡ‚ΠΌΠ΅Π½ΡΠ΅Ρ‚ дСйствиС float */ }

    </style>
    </head> 
    <body>
    <div>
        <div>Π•Π²Π³Π΅Π½ΠΈΠΉ Π•Π²Ρ‚ΡƒΡˆΠ΅Π½ΠΊΠΎ</div>
        <div>Π’Π°Π»Π΅Ρ€ΠΈΠΉ Π‘Ρ€ΡŽΡΠΎΠ²</div>
        <div>Π­Π΄ΡƒΠ°Ρ€Π΄ Асадов</div>
      </div>
      <div>
        <div>
    		МнС снится старый Π΄Ρ€ΡƒΠ³,<br/>
    		ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ стал Π²Ρ€Π°Π³ΠΎΠΌ,<br/>
    		Π½ΠΎ снится Π½Π΅ Π²Ρ€Π°Π³ΠΎΠΌ,<br/>
    		Π° Ρ‚Π΅ΠΌ ΠΆΠ΅ самым Π΄Ρ€ΡƒΠ³ΠΎΠΌ.<br/>
    		Π‘ΠΎ мною Π½Π΅Ρ‚ Π΅Π³ΠΎ,<br/>
    		Π½ΠΎ ΠΎΠ½ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΊΡ€ΡƒΠ³ΠΎΠΌ,<br/>
    		ΠΈ Π³ΠΎΠ»ΠΎΠ²Π° ΠΈΠ΄Π΅Ρ‚<br/>
    		ΠΎΡ‚ сновидСний ΠΊΡ€ΡƒΠ³ΠΎΠΌ.
    	</div>
        <div>
    	Π’Π΅Π»ΠΈΠΊΠΎΠ΅ Π²Π±Π»ΠΈΠ·ΠΈ Π½Π΅ΡƒΠ»ΠΎΠ²ΠΈΠΌΠΎ,<br/>
    	Π›ΠΈΡˆΡŒ ΠΈΠ·Π΄Π°Π»ΠΈ торТСствСнно ΠΎΠ½ΠΎ,<br/>
    	ΠœΡ‹ всС ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΠΌ ΠΏΡ€Π΅Π΄ Π²Π΅Π»ΠΈΠΊΠΈΠΌ ΠΌΠΈΠΌΠΎ<br/>
    	И Π²ΠΈΠ΄ΠΈΠΌ лишь случайноС Π·Π²Π΅Π½ΠΎ.
    	</div>
        <div>
    	Π’ Π»ΡŽΠ±Ρ‹Ρ… Π΄Π΅Π»Π°Ρ… ΠΏΡ€ΠΈ максимумС слоТностСй<br/>
    	ΠŸΠΎΠ΄Ρ…ΠΎΠ΄ ΠΊ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ΅ всС-Ρ‚Π°ΠΊΠΈ ΠΎΠ΄ΠΈΠ½:<br/>
    	Π–Π΅Π»Π°Π½ΡŒΠ΅ - это мноТСство возмоТностСй,<br/>
    	А нСТСланьС - мноТСство ΠΏΡ€ΠΈΡ‡ΠΈΠ½.
    	</div>
      </div>
    </body>

    </style> </head> <body> <div> <div>Π•Π²Π³Π΅Π½ΠΈΠΉ Π•Π²Ρ‚ΡƒΡˆΠ΅Π½ΠΊΠΎ</div> <div>Π’Π°Π»Π΅Ρ€ΠΈΠΉ Π‘Ρ€ΡŽΡΠΎΠ²</div> <div>Π­Π΄ΡƒΠ°Ρ€Π΄ Асадов</div> </div> <div> <div> МнС снится старый Π΄Ρ€ΡƒΠ³,<br/> ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ стал Π²Ρ€Π°Π³ΠΎΠΌ,<br/> Π½ΠΎ снится Π½Π΅ Π²Ρ€Π°Π³ΠΎΠΌ,<br/> Π° Ρ‚Π΅ΠΌ ΠΆΠ΅ самым Π΄Ρ€ΡƒΠ³ΠΎΠΌ.<br/> Π‘ΠΎ мною Π½Π΅Ρ‚ Π΅Π³ΠΎ,<br/> Π½ΠΎ ΠΎΠ½ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΊΡ€ΡƒΠ³ΠΎΠΌ,<br/> ΠΈ Π³ΠΎΠ»ΠΎΠ²Π° ΠΈΠ΄Π΅Ρ‚<br/> ΠΎΡ‚ сновидСний ΠΊΡ€ΡƒΠ³ΠΎΠΌ. </div> <div> Π’Π΅Π»ΠΈΠΊΠΎΠ΅ Π²Π±Π»ΠΈΠ·ΠΈ Π½Π΅ΡƒΠ»ΠΎΠ²ΠΈΠΌΠΎ,<br/> Π›ΠΈΡˆΡŒ ΠΈΠ·Π΄Π°Π»ΠΈ торТСствСнно ΠΎΠ½ΠΎ,<br/> ΠœΡ‹ всС ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΠΌ ΠΏΡ€Π΅Π΄ Π²Π΅Π»ΠΈΠΊΠΈΠΌ ΠΌΠΈΠΌΠΎ<br/> И Π²ΠΈΠ΄ΠΈΠΌ лишь случайноС Π·Π²Π΅Π½ΠΎ. </div> <div> Π’ Π»ΡŽΠ±Ρ‹Ρ… Π΄Π΅Π»Π°Ρ… ΠΏΡ€ΠΈ максимумС слоТностСй<br/> ΠŸΠΎΠ΄Ρ…ΠΎΠ΄ ΠΊ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ΅ всС-Ρ‚Π°ΠΊΠΈ ΠΎΠ΄ΠΈΠ½:<br/> Π–Π΅Π»Π°Π½ΡŒΠ΅ — это мноТСство возмоТностСй,<br/> А нСТСланьС — мноТСство ΠΏΡ€ΠΈΡ‡ΠΈΠ½. </div> </div> </body>

    Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

    Рис. 5. Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚

    ИспользованиС позиционирования слоСв для ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π² Ρ‚Ρ€ΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ

    Π’ΠΎΠ·ΡŒΠΌΠ΅ΠΌ Π² качСствС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° ΠΌΠ°ΠΊΠ΅Ρ‚, состоящий ΠΈΠ· Ρ‚Ρ€Π΅Ρ… ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ Ρ€Π°Π·Π³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹Ρ… Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠ΅ΠΉ (рис. 6).

    Рис. 6. ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ слоСв для ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π² Ρ‚Ρ€ΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ с Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»Π΅ΠΌ

    ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π²Π΅Π±-страницу с ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠΌ ΠΈΠ· Ρ‚Ρ€Π΅Ρ… ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ с Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠ΅ΠΉ, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½Π½ΡƒΡŽ Π½Π° рис. 6. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠ΅ΠΌΡ‹ фиксированного макСтирования с ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ слоСв

    Π’Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅:

    1. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ структуры html-ΠΊΠΎΠ΄Π°

    • Для Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π° достаточно ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ‚Ρ€ΠΈ слоя div для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ.

    ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ структура Π±ΡƒΠ΄Π΅Ρ‚ простой:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    
    <body>
    <div>Иван Π‘ΡƒΠ½ΠΈΠ½</br></br>
    	На ΠΎΠΊΠ½Π΅, сСрСбряном ΠΎΡ‚ инСя,</br>
    	Π—Π° Π½ΠΎΡ‡ΡŒ Ρ…Ρ€ΠΈΠ·Π°Π½Ρ‚Π΅ΠΌΡ‹ расцвСли.</br> 
    	Π’ Π²Π΅Ρ€Ρ…Π½ΠΈΡ… стёклах - Π½Π΅Π±ΠΎ ярко-синСС</br> 
    	И застрСха Π² снСговой ΠΏΡ‹Π»ΠΈ. 
    </div>
    <div>
    	Всходит солнцС, Π±ΠΎΠ΄Ρ€ΠΎΠ΅ ΠΎΡ‚ Ρ…ΠΎΠ»ΠΎΠ΄Π°, </br>
    	Золотится отблСском ΠΎΠΊΠ½ΠΎ. </br>
    	Π£Ρ‚Ρ€ΠΎ Ρ‚ΠΈΡ…ΠΎ, радостно ΠΈ ΠΌΠΎΠ»ΠΎΠ΄ΠΎ. </br>
    	Π‘Π΅Π»Ρ‹ΠΌ снСгом всё Π·Π°ΠΏΡƒΡˆΠ΅Π½ΠΎ. 
    </div>
    <div>
    	И всё ΡƒΡ‚Ρ€ΠΎ яркиС ΠΈ чистыС</br> 
    	Π‘ΡƒΠ΄Ρƒ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ краски Π² Π²Ρ‹ΡˆΠΈΠ½Π΅, </br>
    	И Π΄ΠΎ полдня Π±ΡƒΠ΄ΡƒΡ‚ сСрСбристыС </br>
    	Π₯Ρ€ΠΈΠ·Π°Π½Ρ‚Π΅ΠΌΡ‹ Π½Π° ΠΌΠΎΡ‘ΠΌ ΠΎΠΊΠ½Π΅.</br></br> 
    Β 
    	1903
    </div>
    </body>

    <body> <div>Иван Π‘ΡƒΠ½ΠΈΠ½</br></br> На ΠΎΠΊΠ½Π΅, сСрСбряном ΠΎΡ‚ инСя,</br> Π—Π° Π½ΠΎΡ‡ΡŒ Ρ…Ρ€ΠΈΠ·Π°Π½Ρ‚Π΅ΠΌΡ‹ расцвСли.</br> Π’ Π²Π΅Ρ€Ρ…Π½ΠΈΡ… стёклах — Π½Π΅Π±ΠΎ ярко-синСС</br> И застрСха Π² снСговой ΠΏΡ‹Π»ΠΈ. </div> <div> Всходит солнцС, Π±ΠΎΠ΄Ρ€ΠΎΠ΅ ΠΎΡ‚ Ρ…ΠΎΠ»ΠΎΠ΄Π°, </br> Золотится отблСском ΠΎΠΊΠ½ΠΎ. </br> Π£Ρ‚Ρ€ΠΎ Ρ‚ΠΈΡ…ΠΎ, радостно ΠΈ ΠΌΠΎΠ»ΠΎΠ΄ΠΎ. </br> Π‘Π΅Π»Ρ‹ΠΌ снСгом всё Π·Π°ΠΏΡƒΡˆΠ΅Π½ΠΎ. </div> <div> И всё ΡƒΡ‚Ρ€ΠΎ яркиС ΠΈ чистыС</br> Π‘ΡƒΠ΄Ρƒ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ краски Π² Π²Ρ‹ΡˆΠΈΠ½Π΅, </br> И Π΄ΠΎ полдня Π±ΡƒΠ΄ΡƒΡ‚ сСрСбристыС </br> Π₯Ρ€ΠΈΠ·Π°Π½Ρ‚Π΅ΠΌΡ‹ Π½Π° ΠΌΠΎΡ‘ΠΌ ΠΎΠΊΠ½Π΅.</br></br> 1903 </div> </body>

    2. Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ стилСй для ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ

    • Установим ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ (width) ΠΈ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ поля ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ (padding).
    • #col1, #col2, #col3 {
           width: 250px; /* Π¨ΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ */
           padding: 0 6px; /* Поля ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ */
          }

      #col1, #col2, #col3 { width: 250px; /* Π¨ΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ */ padding: 0 6px; /* Поля ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ */ }

    • Для удалСния блочности слоСв, Ρ‚.Π΅. для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ ΠΈΡ… рядом ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ свойство css float.
    • #col1, #col2, #col3 {
           width: 250px; /* Π¨ΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ */
           padding: 0 6px; /* Поля ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ */
           float: left; /* ΠžΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ слоСв */
          }

      #col1, #col2, #col3 { width: 250px; /* Π¨ΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ */ padding: 0 6px; /* Поля ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ */ float: left; /* ΠžΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ слоСв */ }

    • Π’Π°ΠΊ ΠΊΠ°ΠΊ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ Π³Ρ€Π°Π½ΠΈΡ†Π° Π΄ΠΎΠ»ΠΆΠ½Π° ΠΏΡ€ΠΈΡΡƒΡ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΡ… сторон слоСв, Ρ‚ΠΎ Ρ€Π°ΠΌΠΊΡƒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρƒ Π΄Π²ΡƒΡ… слоСв с ΠΎΠ΄Π½ΠΎΠΉ стороны (border).
    #col1, #col2 {
         border-right: 1px solid #000; /* ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Π»ΠΈΠ½ΠΈΠΈ справа ΠΎΡ‚ тСкста */ 
        }

    #col1, #col2 { border-right: 1px solid #000; /* ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Π»ΠΈΠ½ΠΈΠΈ справа ΠΎΡ‚ тСкста */ }

    Π˜Ρ‚ΠΎΠ³ΠΎΠ²Ρ‹ΠΉ ΠΊΠΎΠ΄: всё вмСстС

    #col1, #col2, #col3 {
         width: 250px; /* Π¨ΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ */
         padding: 0 6px; /* Поля ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ */
         float: left; /* ΠžΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ слоСв */
        } 
    #col1, #col2 {
         border-right: 1px solid #000; /* ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Π»ΠΈΠ½ΠΈΠΈ справа ΠΎΡ‚ тСкста */ 
        }

    #col1, #col2, #col3 { width: 250px; /* Π¨ΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ */ padding: 0 6px; /* Поля ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ */ float: left; /* ΠžΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ слоСв */ } #col1, #col2 { border-right: 1px solid #000; /* ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Π»ΠΈΠ½ΠΈΠΈ справа ΠΎΡ‚ тСкста */ }

    </style>
    </head> 
    <body>
    <div>Иван Π‘ΡƒΠ½ΠΈΠ½</br></br>
    	На ΠΎΠΊΠ½Π΅, сСрСбряном ΠΎΡ‚ инСя,</br>
    	Π—Π° Π½ΠΎΡ‡ΡŒ Ρ…Ρ€ΠΈΠ·Π°Π½Ρ‚Π΅ΠΌΡ‹ расцвСли.</br> 
    	Π’ Π²Π΅Ρ€Ρ…Π½ΠΈΡ… стёклах - Π½Π΅Π±ΠΎ ярко-синСС</br> 
    	И застрСха Π² снСговой ΠΏΡ‹Π»ΠΈ. 
    </div>
    <div>
    	Всходит солнцС, Π±ΠΎΠ΄Ρ€ΠΎΠ΅ ΠΎΡ‚ Ρ…ΠΎΠ»ΠΎΠ΄Π°, </br>
    	Золотится отблСском ΠΎΠΊΠ½ΠΎ. </br>
    	Π£Ρ‚Ρ€ΠΎ Ρ‚ΠΈΡ…ΠΎ, радостно ΠΈ ΠΌΠΎΠ»ΠΎΠ΄ΠΎ. </br>
    	Π‘Π΅Π»Ρ‹ΠΌ снСгом всё Π·Π°ΠΏΡƒΡˆΠ΅Π½ΠΎ. 
    </div>
    <div>
    	И всё ΡƒΡ‚Ρ€ΠΎ яркиС ΠΈ чистыС</br> 
    	Π‘ΡƒΠ΄Ρƒ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ краски Π² Π²Ρ‹ΡˆΠΈΠ½Π΅, </br>
    	И Π΄ΠΎ полдня Π±ΡƒΠ΄ΡƒΡ‚ сСрСбристыС </br>
    	Π₯Ρ€ΠΈΠ·Π°Π½Ρ‚Π΅ΠΌΡ‹ Π½Π° ΠΌΠΎΡ‘ΠΌ ΠΎΠΊΠ½Π΅.</br></br> 
    Β 
    	1903
    </div>
    </body>

    </style> </head> <body> <div>Иван Π‘ΡƒΠ½ΠΈΠ½</br></br> На ΠΎΠΊΠ½Π΅, сСрСбряном ΠΎΡ‚ инСя,</br> Π—Π° Π½ΠΎΡ‡ΡŒ Ρ…Ρ€ΠΈΠ·Π°Π½Ρ‚Π΅ΠΌΡ‹ расцвСли.</br> Π’ Π²Π΅Ρ€Ρ…Π½ΠΈΡ… стёклах — Π½Π΅Π±ΠΎ ярко-синСС</br> И застрСха Π² снСговой ΠΏΡ‹Π»ΠΈ. </div> <div> Всходит солнцС, Π±ΠΎΠ΄Ρ€ΠΎΠ΅ ΠΎΡ‚ Ρ…ΠΎΠ»ΠΎΠ΄Π°, </br> Золотится отблСском ΠΎΠΊΠ½ΠΎ. </br> Π£Ρ‚Ρ€ΠΎ Ρ‚ΠΈΡ…ΠΎ, радостно ΠΈ ΠΌΠΎΠ»ΠΎΠ΄ΠΎ. </br> Π‘Π΅Π»Ρ‹ΠΌ снСгом всё Π·Π°ΠΏΡƒΡˆΠ΅Π½ΠΎ. </div> <div> И всё ΡƒΡ‚Ρ€ΠΎ яркиС ΠΈ чистыС</br> Π‘ΡƒΠ΄Ρƒ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ краски Π² Π²Ρ‹ΡˆΠΈΠ½Π΅, </br> И Π΄ΠΎ полдня Π±ΡƒΠ΄ΡƒΡ‚ сСрСбристыС </br> Π₯Ρ€ΠΈΠ·Π°Π½Ρ‚Π΅ΠΌΡ‹ Π½Π° ΠΌΠΎΡ‘ΠΌ ΠΎΠΊΠ½Π΅.</br></br> 1903 </div> </body>

    Π”ΠΈΠ·Π°ΠΉΠ½ Π² Ρ‚Ρ€ΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π³ΠΎΡ‚ΠΎΠ²!

    Блочная вСрстка — css-свойства, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½ΡƒΠΆΠ½Ρ‹ для оформлСния Π±Π»ΠΎΠΊΠΎΠ²

    ΠžΡ‚ Π°Π²Ρ‚ΠΎΡ€Π°: ΠΏΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ вас Π½Π° страницах Π±Π»ΠΎΠ³Π° webformyself. Блочная вСрстка – самый популярный сСгодня способ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ шаблон сайта. И Ρ‚Π°ΠΊΠΎΠ²Ρ‹ΠΌ ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡΡ‚Π°Π²Π°Ρ‚ΡŒΡΡ Π²ΠΈΠ΄ΠΈΠΌΠΎ Π΅Ρ‰Π΅ Π΄ΠΎΠ»Π³ΠΎΠ΅ врСмя. Π’ связи с этим Π΄Π°Π²Π°ΠΉΡ‚Π΅ Ρ€Π°Π·Π±ΠΈΡ€Π°Ρ‚ΡŒΡΡ, ΠΊΠ°ΠΊ осущСствляСтся блочная вСрстка css-свойствами.

    Π“Π΄Π΅ ΡΠΎΠ·Π΄Π°ΡŽΡ‚ΡΡ Π±Π»ΠΎΠΊΠΈ

    Для Π½Π°Ρ‡Π°Π»Π° Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠ½ΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ css Π½Π΅ создаСт Π±Π»ΠΎΠΊΠΈ – ΠΎΠ½ оформляСт ΠΈΡ…. Π‘Π°ΠΌΠΈ ΠΏΠΎ сСбС ΠΎΠ½ΠΈ Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΡŽΡ‚ΡΡ Π² HTML – языкС Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ гипСртСкста. По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π±Π»ΠΎΠΊ ΠΏΠΎ высотС Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒ мСсто, Ρ€Π°Π²Π½ΠΎΠ΅ высотС Π΅Π³ΠΎ содСрТимого. По ΡˆΠΈΡ€ΠΈΠ½Π΅ ΠΆΠ΅ ΠΎΠ½ Π·Π°ΠΉΠΌΠ΅Ρ‚ всС доступноС пространство, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π΅ΡΡ‚ΡŒ Π² Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»Π΅.

    Для ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°: Ссли ΡˆΠΈΡ€ΠΈΠ½Π° Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° составляСт 300 пиксСлСй ΠΈ Π² Π½Π΅ΠΌ создан Π±Π»ΠΎΠΊ, Ρ‚ΠΎ ΠΎΠ½ Ρ‚ΠΎΠΆΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒ Ρ‚Π°ΠΊΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ (Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ссли Ρƒ родитСля Π½Π΅ Π·Π°Π΄Π°Π½Ρ‹ отступы). ВсС ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ элСмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒΡΡ Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π΅, Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΡΡ‚ΠΎΡΡ‚ΡŒ Π½Π° ΠΎΠ΄Π½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ с ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ Π±Π»ΠΎΠΊΠΎΠΌ ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ пСрСнСсСны дальшС.

    ΠžΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ пустой Π±Π»ΠΎΡ‡Π½Ρ‹ΠΉ элСмСнт записываСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠ°Ρ€Π½ΠΎΠ³ΠΎ Ρ‚Π΅Π³Π° β€” div. Π‘Π°ΠΌ ΠΏΠΎ сСбС ΠΎΠ½ Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ Π΄Π΅Π»Π°Π΅Ρ‚. НапримСр, Π΄Π°Π²Π°ΠΉΡ‚Π΅ вспомним, Ρ‡Ρ‚ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Ρ‚Π΅Π³ΠΈ ΠΈΠΌΠ΅ΡŽΡ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ смысл: Π°Π±Π·Π°Ρ† являСтся Ρ‡Π°ΡΡ‚ΡŒΡŽ ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Ρ‚ΠΎ тСкста, ΠΏΠΎΠ΄Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ Π½ΡƒΠΆΠ½Ρ‹ для ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΈ восприятия ΠΈ Ρ‚.Π΄. А Π²ΠΎΡ‚ Ρ‚Π΅Π³ div выступаСт просто ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠΌ.

    ΠŸΡ€ΠΈΠ²Ρ‹Ρ‡Π½Π°Ρ блочная модСль

    Π’ своСм ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΌ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠΈ нСсколько созданных Π±Π»ΠΎΠΊΠΎΠ² Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΠ΄Ρ‚ΠΈ свСрху Π²Π½ΠΈΠ· Π΄Ρ€ΡƒΠ³ Π·Π° Π΄Ρ€ΡƒΠ³ΠΎΠΌ. Π—Π΄Π΅ΡΡŒ сразу ΠΆΠ΅ Π½Π°Π±Π»ΡŽΠ΄Π°Π΅Ρ‚ΡΡ ΡΠ΅Ρ€ΡŒΠ΅Π·Π½Π°Ρ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°, Π½Π΅ Ρ‚Π°ΠΊ Π»ΠΈ? А ΠΊΠ°ΠΊ ΠΆΠ΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±ΠΎΠΊΠΎΠ²ΡƒΡŽ ΠΊΠΎΠ»ΠΎΠ½ΠΊΡƒ, ΠΊΠ°ΠΊ, Π² ΠΊΠΎΠ½Ρ†Π΅ ΠΊΠΎΠ½Ρ†ΠΎΠ², Π΄Π΅Π»Π°ΡŽΡ‚ сайты, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π² ΠΎΠ΄Π½ΠΎΠΉ строкС ΠΈΠ΄Π΅Ρ‚ 3-5 анонсов новостСй, Π΄Π° Π΅Ρ‰Π΅ ΠΈ с ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌΠΈ? Π’ΠΎΡ‚ Ρ‚ΡƒΡ‚ Π½Π°ΠΌ ΠΈ ΠΏΡ€ΠΈΡ…ΠΎΠ΄ΠΈΡ‚ Π½Π° ΠΏΠΎΠΌΠΎΡ‰ΡŒ css, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Ρ€Π°ΡΡΡ‚Π°Π²ΠΈΡ‚ΡŒ элСмСнты Π½Π° страницС ΠΌΠΎΠΆΠ½ΠΎ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ Π»ΡŽΠ±Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ.

    ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈΠΉ курс ΠΏΠΎ вСрсткС Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ сайта с нуля!

    Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ курс ΠΈ ΡƒΠ·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ соврСмСнныС сайты Π½Π° HTML5 ΠΈ CSS3

    Π£Π·Π½Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

    Блочная вСрстка сайта с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ css: основныС свойства

    Как ΠΌΡ‹ ΡƒΠ±Π΅Π΄ΠΈΠ»ΠΈΡΡŒ Π²Ρ‹ΡˆΠ΅, ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π±Π»ΠΎΠΊΠΈ ΠΎΡ‡Π΅Π½ΡŒ упрямыС. НС ΠΏΠΎΠ΄ΠΏΡƒΡΠΊΠ°ΡŽΡ‚ ΠΊ сСбС Π΄Ρ€ΡƒΠ³ΠΈΡ…, Π΄Π° Π΅Ρ‰Π΅ ΠΈ Π·Π°Π½ΠΈΠΌΠ°ΡŽΡ‚ всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ. ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΆΠ΅, это Π½ΡƒΠΆΠ½ΠΎ ΠΈΠ½ΠΎΠ³Π΄Π° ΠΈΡΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ структура ΠΌΠ½ΠΎΠ³ΠΈΡ… сайтов Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ этого.

    Π”Π°Π²Π°ΠΉΡ‚Π΅ сначала разбСрСмся с Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌΠΈ. Π’ css Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ элСмСнтам ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойств width ΠΈ height. Π—Π°Ρ‡Π°ΡΡ‚ΡƒΡŽ значСния Π·Π°Π΄Π°ΡŽΡ‚ Π² пиксСлях, хотя ΠΈΠ½ΠΎΠ³Π΄Π° Π² ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π°Ρ… ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Π΅Π΄ΠΈΠ½ΠΈΡ†Π°Ρ….

    Π’ΠΎΡ‚ Π΄Π°Π²Π°ΠΉΡ‚Π΅ прСдставим, Ρ‡Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ большой Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ ΠΈ Π² Π½Π΅ΠΌ Π΅ΡΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ Π±Π»ΠΎΡ‡Π½Ρ‹ΠΉ элСмСнт. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ для Π½Π΅Π³ΠΎ свойства Ρ‡Π΅Ρ€Π΅Π· Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ стилСй, Π½ΡƒΠΆΠ½ΠΎ ΠΊΠ°ΠΊ-Ρ‚ΠΎ ΠΊ Π½Π΅ΠΌΡƒ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒΡΡ. Если ΠΌΡ‹ запишСм Ρ‚Π°ΠΊ:

    Π’ΠΎ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ всС Π±Π»ΠΎΠΊΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ Ρ‚Π°ΠΊΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ, Ρ‡Ρ‚ΠΎ Π½Π°ΠΌ явно Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ. Π—Π½Π°Ρ‡ΠΈΡ‚, Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊ Π±Π»ΠΎΠΊΡƒ стилСвой класс ΠΈΠ»ΠΈ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€. Они Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ΡΡ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² class ΠΈ id, Π° Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ выступаСт ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½ΠΎΠ΅ имя, Π½ΠΎ Π½Π°Ρ‡ΠΈΠ½Π°Ρ‚ΡŒΡΡ ΠΎΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ с английской Π±ΡƒΠΊΠ²Ρ‹. Π Π°Π·Ρ€Π΅ΡˆΠ°Π΅Ρ‚ΡΡ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΆΠ΅ Ρ†ΠΈΡ„Ρ€Ρ‹, дСфис ΠΈ Π·Π½Π°ΠΊ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ подчСркивания. ΠžΠ±Ρ‹Ρ‡Π½ΠΎ самыС Π²Π°ΠΆΠ½Ρ‹Π΅ элСмСнты Π½Π° страницС ΠΏΠΎΠ»ΡƒΡ‡Π°ΡŽΡ‚ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ (шапка, ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, ΠΏΠΎΠ΄Π²Π°Π»), Π° ΠΌΠ΅Π½Π΅Π΅ Π²Π°ΠΆΠ½Ρ‹Π΅ (ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ мСню, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ ΠΈ Ρ‚.Π΄.) стилСвыС классы.

    Π― Π±Ρ‹ Π΄Π°ΠΆΠ΅ сказал, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»ΠΎ Π½Π΅ Π² ваТности, Π° Π² Ρ‚ΠΎΠΌ, ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π»ΠΈ это элСмСнт. ΠŸΠΎΠ½ΡΡ‚Π½ΠΎ, Ρ‡Ρ‚ΠΎ Π΄Π²ΡƒΡ… шапок Π½Π° сайтС Π² ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ΅ Π±Ρ‹Ρ‚ΡŒ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ (я имСю Π²Π²ΠΈΠ΄Ρƒ Π³Π»Π°Π²Π½ΡƒΡŽ ΡˆΠ°ΠΏΠΊΡƒ Π²Π²Π΅Ρ€Ρ…Ρƒ сайта), Π° Π²ΠΎΡ‚ ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ сколько ΡƒΠ³ΠΎΠ΄Π½ΠΎ.

    Π‘Π°ΠΌΠΎΠ΅ Π³Π»Π°Π²Π½ΠΎΠ΅, это Π·Π°ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ – ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ задаСтся ΠΎΠ΄Π½ΠΎΠΌΡƒ элСмСнту, ΠΎΠ΄ΠΈΠ½ Ρ€Π°Π· ΠΈ большС Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π·Π°ΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒΡΡ Π½ΠΈ для ΠΊΠ°ΠΊΠΎΠ³ΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ элСмСнта. Π­Ρ‚ΠΎ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Π°Ρ ΠΌΠ΅Ρ‚ΠΊΠ°. Π‘Ρ‚ΠΈΠ»Π΅Π²ΠΎΠΉ класс ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ Ρ…ΠΎΡ‚ΡŒ сотнС элСмСнтов, Π° ΠΎΠ΄Π½ΠΎΠΌΡƒ Π±Π»ΠΎΠΊΡƒ ΠΌΠΎΠΆΠ½ΠΎ Ρ‡Π΅Ρ€Π΅Π· ΠΏΡ€ΠΎΠ±Π΅Π» Π·Π°Π΄Π°Ρ‚ΡŒ сколько ΡƒΠ³ΠΎΠ΄Π½ΠΎ классов. Π’ΠΎΡ‚ Ρ‚Π°ΠΊ:

    <div class = «width height border»>Π‘Π»ΠΎΠΊ с трСмя классами</div>;

    <div class = «width height border»>Π‘Π»ΠΎΠΊ с трСмя классами</div>;

    И ΠΊΠ°ΠΊ Π²Ρ‹ Π΄ΡƒΠΌΠ°Π΅Ρ‚Π΅, Ρ‡Ρ‚ΠΎ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ с Π½ΠΈΠΌ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ‚, ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ запишСм Ρ‚Π°ΠΊΠΈΠ΅ свойства?

    .width{ width: 250px; } .height{ height: 250px; } .border{ border: 10px solid green; }

    .width{

    width: 250px;

    }

    .height{

    height: 250px;

    }

    .border{

    border: 10px solid green;

    }

    К Π±Π»ΠΎΠΊΡƒ примСнятся всС эти ΠΏΡ€Π°Π²ΠΈΠ»Π° ΠΈ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΊΠ°ΠΊΠΎΠΌΡƒ Π±Ρ‹ элСмСнту Π²Ρ‹ Π½Π΅ Π·Π°Π΄Π°Π»ΠΈ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, класс border, ΠΎΠ½ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ Ρ‚ΠΎΠ»ΡΡ‚ΡƒΡŽ Π·Π΅Π»Π΅Π½ΡƒΡŽ Ρ€Π°ΠΌΠΊΡƒ Π² 10 пиксСлСй.

    ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈΠΉ курс ΠΏΠΎ вСрсткС Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ сайта с нуля!

    Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ курс ΠΈ ΡƒΠ·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ соврСмСнныС сайты Π½Π° HTML5 ΠΈ CSS3

    Π£Π·Π½Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

    НСсколько блоков на одной линии

    Π”Π°Π»Π΅Π΅ я ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΎ расскаТу ΠΎ Π΄Π²ΡƒΡ… Π²Π°ΠΆΠ½Ρ‹Ρ… свойствах, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ позволят Π±Π»ΠΎΠΊΠ°ΠΌ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ Π² ΠΎΠ΄Π½Ρƒ линию. Π‘Ρ€Π°Π·Ρƒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€: Π΅ΡΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ 1000 пиксСлСй. Π’Π°ΡˆΠ° Π·Π°Π΄Π°Ρ‡Π° – Π²ΠΏΠΈΡ…Π½ΡƒΡ‚ΡŒ Π² Π½Π΅Π³ΠΎ 3 Π±Π»ΠΎΠΊΠ° ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ ΠΏΠΎ 300 пиксСлСй, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Π»ΠΈΡΡŒ Π½Π° ΠΎΠ΄Π½ΠΎΠΉ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ. Как это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ? Π•ΡΡ‚ΡŒ Π΄Π²Π° способа.

    Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ Π±Π»ΠΎΠΊΡƒ Π½ΡƒΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ класс. Π’ΠΎΠΎΠ±Ρ‰Π΅ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ Π±Π»ΠΎΡ‡Π½Ρ‹ΠΌ элСмСнтам ΠΎΠ±Ρ‰ΠΈΠ΅ классы:

    <div class = «block1 inline»></div> <div class = «block2 inline»></div> <div class = «block3 inline»></div>

    <div class = «block1 inline»></div>

    <div class = «block2 inline»></div>

    <div class = «block3 inline»></div>

    Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ ΠΏΠΎ-своСму, Π½ΠΎ всС ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹Π΅ указания, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ всС содСрТат класс inline. А Π² Π½Π΅ΠΌ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π·Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ Ρ‚Π°ΠΊ:

    .inline{ display: inline-block; }

    .inline{

    display: inline-block;

    }

    Π›ΠΈΠ±ΠΎ Ρ‚Π°ΠΊ:

    ΠŸΠ΅Ρ€Π²ΠΎΠ΅ свойство ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Ρ‹Π²Π°Π΅Ρ‚ элСмСнты Π² строчно-Π±Π»ΠΎΡ‡Π½Ρ‹Π΅. Они Π½Π΅ Ρ‚Π΅Ρ€ΡΡŽΡ‚ своих свойств, Π½ΠΎ ΠΌΠΎΠ³ΡƒΡ‚ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ Π² линию, Ссли ΠΈΠΌ Ρ…Π²Π°Ρ‚Π°Π΅Ρ‚ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Π² Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»Π΅.

    Π’Ρ‚ΠΎΡ€ΠΎΠ΅ свойство ΠΏΡ€ΠΈΠΆΠΈΠΌΠ°Π΅Ρ‚ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт ΠΊ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°. Но ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π²Ρ‚ΠΎΡ€ΠΎΠΉ ΠΈ Ρ‚Ρ€Π΅Ρ‚ΠΈΠΉ элСмСнты Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΡ€ΠΈΠΆΠ°Ρ‚ΡŒΡΡ ΠΊ самому ΠΊΡ€Π°ΡŽ, ΠΎΠ½ΠΈ встанут Π·Π° ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ ΠΈ Ρ‚ΠΎΠΆΠ΅ ΠΎΠ±Ρ€Π°Π·ΡƒΡŽΡ‚ линию.

    ΠžΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹

    Как дСлаСтся Π² css блочная вСрстка Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²ΠΎΠ³ΠΎ сайта? Π’Π°ΠΊΠΎΠΉ шаблон ΠΈΠΌΠ΅Π΅Ρ‚ большоС прСимущСство ΠΏΠ΅Ρ€Π΅Π΄ фиксированным, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ Π² зависимости ΠΎΡ‚ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΎΠΊΠ½Π°. ДСлаСтся ΠΎΠ½ Π² основном ΠΏΠΎ Ρ‚Π°ΠΊΠΎΠΌΡƒ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡƒ: ΠΎΠ±Ρ‰ΠΈΠΉ элСмСнт ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ, Π° ΡƒΠΆΠ΅ Π² Π½Π΅ΠΌ ΠΏΠΎΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ структурныС части, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΏΠΈΡˆΠ΅Ρ‚ΡΡ Π² ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π°Ρ….

    <div id = «wrapper»> <div id = «content»></div> <div id = «sidebar»></div> </div> #wrapper{ max-width: 1000px; } #content{ width: 66%; } #sidebar{ width: 26%; }

    <div id = «wrapper»>

    <div id = «content»></div>

    <div id = «sidebar»></div>

    </div>

    Β 

    #wrapper{

    max-width: 1000px;

    }

    #content{

    width: 66%;

    }

    #sidebar{

    width: 26%;

    }

    Π’ΠΎΡ‚ Ρ‚Π°ΠΊ Π²ΠΎΡ‚ это всС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ рСализовываСтся. ΠžΡΡ‚Π°Π²ΡˆΠΈΠ΅ΡΡ 8% ΡˆΠΈΡ€ΠΈΠ½Ρ‹ оставим Π½Π° отступы, допустим. Наш шаблон ΡƒΠΆΠ΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΡƒΡŽ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ – ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΆΠΈΠΌΠ°Ρ‚ΡŒΡΡ ΠΏΡ€ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΎΠΊΠ½Π° Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅.

    ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, Π΄ΠΎ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ вСрстки здСсь Π΄Π°Π»Π΅ΠΊΠΎ, Π½ΠΎ Ρ‚Π°ΠΊΠΈΠ΅ ΠΏΡ€Π°Π²ΠΈΠ»Π° Π·Π°ΠΊΠ»Π°Π΄Ρ‹Π²Π°ΡŽΡ‚ основаниС для Π½Π΅Π΅. Π”Π°Π»Π΅Π΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΠ΅Π΄ΠΈΠ°-запросов Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Ρ‚Π΅ΠΌ, Π½Π° ΠΊΠ°ΠΊΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Π΅ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ шаблон Π² ΠΎΠ΄Π½ΠΎΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΉ, Π³Π΄Π΅ ΠΈ ΠΊΠΎΠ³Π΄Π° ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ Ρ‚.Π΄. ΠΈ Ρ‚.ΠΏ.

    На этом Π½Π° сСгодня я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ Π·Π°ΠΊΠΎΠ½Ρ‡ΠΈΡ‚ΡŒ. Π‘ΠΎΠ»ΡŒΡˆΠ΅ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎ Π±Π»ΠΎΡ‡Π½ΠΎΠΉ вСрсткС Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΈΠ· Π½Π°ΡˆΠΈΡ… ΠΏΡ€Π΅ΠΌΠΈΡƒΠΌ-ΡƒΡ€ΠΎΠΊΠΎΠ², Π² частности ΠΈΠ· ΡƒΡ‡Π΅Π±Π½ΠΈΠΊΠ° ΠΏΠΎ css для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ…, Π³Π΄Π΅ ΠΎΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‚ΡΡ основныС свойства, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½ΡƒΠΆΠ½ΠΎ Π·Π½Π°Ρ‚ΡŒ ΠΏΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ с Π±Π»ΠΎΡ‡Π½Ρ‹ΠΌΠΈ элСмСнтами.

    ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈΠΉ курс ΠΏΠΎ вСрсткС Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ сайта с нуля!

    Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ курс ΠΈ ΡƒΠ·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ соврСмСнныС сайты Π½Π° HTML5 ΠΈ CSS3

    Π£Π·Π½Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

    PSD to HTML

    ВСрстка сайта Π½Π° HTML5 ΠΈ CSS3 с нуля

    Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ

    ΠžΡΠ½ΠΎΠ²Ρ‹ CSS ΠΈ HTML. Блочная вСрстка β€” Web-Lesson

    Β 

    Π­Ρ‚ΠΎΡ‚ ΡƒΡ€ΠΎΠΊ рСкомСндуСтся Ρ‚Π΅ΠΌ, ΠΊΡ‚ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚ ΠΎΡΠ²Π°ΠΈΠ²Π°Ρ‚ΡŒ прСмудрости создания сайтов. Π’ Π½Π΅ΠΌ Π΄Π°Π½Ρ‹ основныС понятия ΠΎ HTML ΠΈ CSS. Пошагово выполняя инструкции Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΡƒΡ€ΠΎΠΊΠ°, Π²Ρ‹ ΡƒΠΆΠ΅ Ρ‡Π΅Ρ€Π΅Π· нСсколько ΠΌΠΈΠ½ΡƒΡ‚ свСрстаСтС шаблон для своСго сайта.

    Π¨Π°Π±Π»ΠΎΠ½ вСбсайта ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Π΄Π΅Π»Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π±Π»ΠΎΡ‡Π½ΠΎΠΉ вСрстки, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ Ρ‚Π΅Π³ – Β«DIVΒ».

    Π¨Π°Π³ 1 – Π Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° Π²Π΅Π± страницы с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π΅Π³ΠΎΠ² HTML

    ΠŸΡ€Π΅ΠΆΠ΄Π΅ всСго Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ Π½Π°ΡˆΡƒ Π²Π΅Π± страницу ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ HTML Ρ‚Π΅Π³ΠΈ. Волько послС этого ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΊ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΡŽ сайта с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ каскадных Ρ‚Π°Π±Π»ΠΈΡ† стиля CSS.

    HTML β€” это язык Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ гипСртСкста. Π‘ Π΅Π³ΠΎ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ создаСтся структура Π²Π΅Π± страницы. Для этих Ρ†Π΅Π»Π΅ΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Ρ‚Π΅Π³ΠΈ HTML. Они Π·Π°ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ΡΡ Π² скобки Β«<Β» ΠΈ Β«>Β».

    Π’Π΅Π³ΠΈ, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ ΡΠ»Π΅Π΄ΡƒΡŽΡ‚ Π² ΠΏΠ°Ρ€Π΅ β€” ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ ΠΈ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ. ПослСдний отличаСтся Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ ΠΈΠΌΠ΅Π΅Ρ‚ послС ΠΏΠ΅Ρ€Π²ΠΎΠΉ скобки Π·Π½Π°ΠΊ Β«/Β». (НапримСр: <div></div>). Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π΅Π³ΠΎΠ² Π²Ρ‹ опрСдСляСтС, Ρ‡Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ Π½Π° вашСй Π²Π΅Π± страницС.

    ΠšΠ°ΡΠΊΠ°Π΄Π½Ρ‹Π΅ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй CSS ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΠΏΠΎΠ·ΠΆΠ΅. Они Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ содСрТимоС Ρ‚Π΅Π³ΠΎΠ² Π² ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… мСстах страницы, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€ΠΈΠ΄Π°Ρ‚ΡŒ этому содСрТимому ΠΆΠ΅Π»Π°Π΅ΠΌΡ‹ΠΉ Π²ΠΈΠ΄.

    ΠŸΡ€ΠΎΡΡ‚Π΅ΠΉΡˆΠΈΠ΅ Ρ‚Π΅Π³ΠΈ Π²Π΅Π± страницы это:

    Β 

    <html>

    <head>

    Β 

    <title></title>

    Β 

    </head>

    Β 

    <body>

    Β 

    </body>
    </html>

    Β 

    Β 

    ВпослСдствии, ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ‚Π΅Π³Π°ΠΌΠΈ <body> Π²Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ‚Π΅Π³ΠΈ для Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ элСмСнтов Π²Π΅Π± страницы.Β  Π’Π°ΠΆΠ½Ρ‹ΠΌ Ρ‚Π΅Π³ΠΎΠΌ для структурирования страницы являСтся Ρ‚Π΅Π³ <div>. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π΅Π³ΠΎ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄Π΅Π»ΠΈΡ‚ΡŒ свою страницу Π½Π° Π±Π»ΠΎΠΊΠΈ.

    Π’Π½ΡƒΡ‚Ρ€ΠΈ Π΄Π°Π½Π½ΠΎΠ³ΠΎ Ρ‚Π΅Π³Π° Π²Ρ‹ смоТСтС Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ HTML Ρ‚Π΅Π³ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Π°ΠΌ ΠΏΠΎΡ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ΡΡ для создания содСрТимого вашСго сайта (ссылки, тСкст, изобраТСния ΠΈ Ρ‚Π΄.). ВсС эти элСмСнты впослСдствии ΠΎΠ±Ρ€Π΅Ρ‚ΡƒΡ‚ свой ΡΡ‚ΠΈΠ»ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ каскадных Ρ‚Π°Π±Π»ΠΈΡ† стиля CSS.

    Π’Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ графичСский Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ (Photoshop Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€) нарисуСм Π±Π»ΠΎΠΊΠΈ нашСй Π²Π΅Π± страницы:

    Код HTML этой страницы Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅. Π­Ρ‚ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ использования Ρ‚Π΅Π³Π° div:

    Β 

    <html>

    <head>

    Β 

    <title></title>

    Β 

    </head>

    Β 

    <body>

    Β 

    <div id=Β»containerΒ»>

    <div id=Β»headerΒ»>

    Β 

    </div>

    Β 

    <div id=Β»navigationΒ»>

    Β 

    </div>

    Β 

    <div id=Β»menuΒ»>

    Β 

    </div>

    Β 

    <div id=Β»contentΒ»>

    Β 

    </div>

    Β 

    <div id=Β»footerΒ»>

    Β 

    </div>

    </div>

    Β 

    </body>

    </html>

    Β 

    Как Π²ΠΈΠ΄ΠΈΡ‚Π΅, ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ Ρ‚Π΅Π³Ρƒ div ΠΌΡ‹ Π΄Π°Π»ΠΈ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ сСлСктор ID. Π’ΠΎ Π΅ΡΡ‚ΡŒ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΌΡƒ Π±Π»ΠΎΠΊΡƒ нашСй страницы ΠΌΡ‹ Π΄Π°Π»ΠΈ своС Π½Π°Π·Π²Π°Π½ΠΈΠ΅. Π­Ρ‚ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ·ΠΆΠ΅, задавая ΡΡ‚ΠΈΠ»ΡŒ Π±Π»ΠΎΠΊΠ°ΠΌ Π² Ρ„Π°ΠΉΠ»Π΅ CSS, ΠΌΡ‹ ΠΌΠΎΠ³Π»ΠΈ ΠΎΡ‚Π»ΠΈΡ‡Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ Π±Π»ΠΎΠΊ ΠΎΡ‚ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ.

    БущСствуСт Π΄Π²Π° Π²ΠΈΠ΄Π° сСлСкторов. ID β€” ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Ρ… Π±Π»ΠΎΠΊΠΎΠ², Ρ‚Π°ΠΊΠΈΡ…, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ большС Π½ΠΈΠ³Π΄Π΅ Π½Π° страницС Π½Π΅ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‚ΡΡ. Π’ Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ сСлСктор CLASS β€” примСнятся для обозначСния ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‰ΠΈΡ…ΡΡ Π±Π»ΠΎΠΊΠΎΠ².

    Π’Π°ΠΊΠΆΠ΅, ΠΌΡ‹ Π·Π°ΠΊΠ»ΡŽΡ‡ΠΈΠ»ΠΈ всС Π±Π»ΠΎΠΊΠΈ Π²Π½ΡƒΡ‚Ρ€ΡŒ Π±Π»ΠΎΠΊΠ° Β«containerΒ«. Π­Ρ‚ΠΎ сдСлано для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ впослСдствии ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π½Π°ΡˆΡƒ страницу Ρ†Π΅Π»ΠΈΠΊΠΎΠΌ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ.

    Π¨Π°Π³ 2 β€” ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»Π΅Π½ΠΈΠ΅ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй CSS

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

    Если Π²Ρ‹ ΡƒΠΆΠ΅ ΠΎΡ‚ΠΊΡ€Ρ‹Π»ΠΈ свою Π²Π΅Π± страницу Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, Ρ‚ΠΎ Π½ΠΈΡ‡Π΅Π³ΠΎ Ρ‚Π°ΠΌ Π½Π΅ ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΠ»ΠΈ. Π­Ρ‚ΠΎ ΠΏΠΎΡ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π½Π΅ Π½Π°ΠΏΠΎΠ»Π½ΠΈΠ»ΠΈ свои Π±Π»ΠΎΠΊΠΈ Π½ΠΈ ΠΊΠ°ΠΊΠΈΠΌ-Π»ΠΈΠ±ΠΎ содСрТимым, Π½ΠΈ ΠΏΡ€ΠΈΠ΄Π°Π»ΠΈ ΠΈΠΌ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ Ρ„ΠΎΡ€ΠΌΡ‹ ΠΈ Ρ†Π²Π΅Ρ‚Π°. ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚ для Π±Π»ΠΎΠΊΠΎΠ² Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΌΠ΅ΠΆΠ΄Ρƒ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌΠΈ Ρ‚Π΅Π³Π°ΠΌΠΈ. А Π²ΠΎΡ‚ Ρ„ΠΎΡ€ΠΌΡƒ, располоТСниС Ρ†Π²Π΅Ρ‚ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ внСшниС проявлСния Π±Π»ΠΎΠΊΠΎΠ² ΠΌΡ‹ Π·Π°Π΄Π°Π΄ΠΈΠΌ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ„Π°ΠΉΠ»Π° CSS.

    Но для Π½Π°Ρ‡Π°Π»Π° Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π΅Π³ΠΎ. НазовСм Π΅Π³ΠΎ style.css ΠΈ размСстим Π² Ρ‚ΠΎΠΉ ΠΆΠ΅ ΠΏΠ°ΠΏΠΊΠ΅, Ρ‡Ρ‚ΠΎ ΠΈ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ html. ПослС этого Π² html Ρ„Π°ΠΉΠ»Π΅, ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ‚Π΅Π³Π°ΠΌΠΈ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ строчку:

    Β 

    <link rel=Β»stylesheetΒ» type=Β»text/cssΒ» href=Β»style.cssΒ» />

    Β 

    Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΌΡ‹ связываСм эти Π΄Π²Π° Ρ„Π°ΠΉΠ»Π° вмСстС. Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΡ€ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ Π²Π΅Π± страницы Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ Ρ„Π°ΠΉΠ» стилСй.

    Π¨Π°Π³ 3 β€” Π·Π°Π΄Π°Π΅ΠΌ ΡΡ‚ΠΈΠ»ΡŒ

    Бинтаксис CSS состоит ΠΈΠ· сСлСктора, свойства ΠΈ значСния. Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€ β€” это Ρ‚Π΅Π³, для ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ внСшний Π²ΠΈΠ΄ придавая Π΅ΠΌΡƒ Ρ€Π°Π·Π½ΠΎΠΎΠ±Ρ€Π°Π·Π½Ρ‹Π΅ свойства. Бвойство задаСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π² свою ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ значСния.

    Для записи сСлСкторов, ΠΊΡ€ΠΎΠΌΠ΅ Ρ‚Π΅Π³Π° body, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π·Π½Π°ΠΊΠΈ Β«#Β» Π»ΠΈΠ±ΠΎ Β«.Β«. ΠΎΠ½ΠΈ ΡΠ»Π΅Π΄ΡƒΡŽΡ‚ ΠΏΠ΅Ρ€Π΅Π΄ ΠΈΠΌΠ΅Π½Π΅ΠΌ сСлСктора. ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ примСняСтся, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π½Π° сСлСктор ID, Π²Ρ‚ΠΎΡ€ΠΎΠΉ, соотвСтствСнно Π½Π° сСлктор CLASS. Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ любоС количСство свойств. ΠšΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π·Π°ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ΡΡ Π² Ρ„ΠΈΠ³ΡƒΡ€Π½Ρ‹Π΅ скобки Β«{}Β«.

    Β 

    #selector {

    Β 

    Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  property:value;

    Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  property:value;

    Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  property:value;

    Β 

    Β Β Β Β Β Β Β Β Β Β Β  }

    Β 

    Π»ΠΈΠ±ΠΎ

    Β 

    .selector {

    Β 

    Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  property:value;

    Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  property:value;

    Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  property:value;

    Β 

    Β Β Β Β Β Β Β Β Β Β Β  }

    Β 

    Β 

    Π£ нас ΠΈΠΌΠ΅ΡŽΡ‚ΡΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ сСлСкторы:

    body
    container
    header
    navigation
    menu
    content
    footer

    Β 

    Бвойства ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ значСния CSS:

    Β 

    Π€ΠΎΠ½ (background) ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π·Π°Π΄Π°Π½ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈΠ»ΠΈ Ρ†Π²Π΅Ρ‚ΠΎΠΌ, Π»ΠΈΠ±ΠΎ ΠΈ Ρ‚Π΅ΠΌ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΠ»ΠΎΡΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΏΡƒΡ‚ΡŒ ΠΊ Π½Π΅ΠΌΡƒ. Если Ρ„ΠΎΠ½ Π·Π°Π΄Π°Π½ Ρ†Π²Π΅Ρ‚ΠΎΠΌ, Ρ‚ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΡˆΠ΅ΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚Π΅Ρ€ΠΈΡ‡Π½Π°Ρ систСма (#ffffff для Π±Π΅Π»ΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚Π° ΠΈ Ρ‚Π΄.).

    Бвойство color ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для опрСдСлСния Ρ†Π²Π΅Ρ‚Π° тСкста.


    font-family

    β€” это свойство опрСдСляСт сСмСйство ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ тСкст. Как ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ задаСтся сразу Ρ‚Ρ€ΠΈ Ρ‚ΠΈΠΏΠ° ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ². ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ, Ссли Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π½Π΅ смог ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ, Π΅ΠΌΡƒ Π΅ΡΡ‚ΡŒ ΠΈΠ· Ρ‡Π΅Π³ΠΎ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ (Trebuchet MS, Arial, Times New Roman).

    font-size β€” Ρ€Π°Π·ΠΌΠ΅Ρ€ тСкста, задаСтся Π² Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… систСмах измСрСния, здСсь ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ пиксСли.

    Β 

    margin β€” опрСдСляСт мСстополоТСниС Π±Π»ΠΎΠΊΠ°. Π—Π° Ρ‚ΠΎΡ‡ΠΊΡƒ отсчСта ΠΏΡ€ΠΈ этом ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹ΡΡ‚ΡƒΠΏΠ°Ρ‚ΡŒ ΠΊΠ°ΠΊ ΠΎΠΊΠ½ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, Ρ‚Π°ΠΊ ΠΈ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ Π΄Ρ€ΡƒΠ³ΠΈΡ… элСмСнтов Π²Π΅Π± страницы. Π’Π°ΠΊ ΠΊΠ°ΠΊ ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ свою страницы посрСдинС ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, Ρ‚ΠΎ запишСм Ρ‚Π°ΠΊΠΈΠ΅ значСния для Π΄Π°Π½Π½ΠΎΠ³ΠΎ свойства: 0px auto 0px auto. Π—Π°ΠΏΠΈΡΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΏΡ€ΠΎΡ‰Π΅ 0px auto. ΠžΡ‚ΡΡ‡Π΅Ρ‚ Π² случаС задания Π΄Π°Π½Π½Ρ‹Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ ΠΈΠ΄Π΅Ρ‚ ΠΏΠΎ часовой стрСлкС: Π²Π΅Ρ€Ρ… β€” ΠΏΡ€Π°Π²ΠΎ- Π½ΠΈΠ· β€” Π»Π΅Π²ΠΎ. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π²Π΅Ρ€Ρ… β€” Π½ΠΈΠ·, ΠΏΡ€Π°Π²ΠΎ β€” Π»Π΅Π²ΠΎ Ρƒ нас ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡŽΡ‚, Ρ‚ΠΎ Π΄ΡƒΠ±Π»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… Π½Π΅Ρ‚ потрСбности.

    Β 

    width β€” ΡˆΠΈΡ€ΠΈΠ½Π° Π±Π»ΠΎΠΊΠ°.

    Β 

    height β€” высота.

    Β 

    float β€” свойство, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ позволяСт Π½Π°ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ элСмСнты сСлСктора, Π³Π»Π°Π²Π½Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΏΠΎ Π»Π΅Π²ΡƒΡŽ ΠΈΠ»ΠΈ ΠΏΠΎ ΠΏΡ€Π°Π²ΡƒΡŽ сторону.

    Β 

    Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΊΠΎΠ΄ Π² наш Ρ„Π°ΠΉΠ» стилСй style.css (вСдь Π²Ρ‹ Π΅Π³ΠΎ ΡƒΠΆΠ΅ создали, Π΄Π°?):

    body {
    background: #f3f2f3;
    color: #000000;
    font-family: Trebuchet MS, Arial, Times New Roman;
    font-size: 12px;
    }

    #container {
    background: #FFFFFF;
    margin: 30px auto;
    width: 900px;
    height: 1000px;
    }

    #header {
    background: #838283;
    height: 200px;
    width: 900px;
    }

    #navigation {
    background: #a2a2a2;
    width: 900px;
    height: 20px;
    }

    #menu {
    background: #333333;
    float: left;
    width: 200px;
    height: 600px;
    }

    Β 

    #content {
    background: #d2d0d2;
    float: right;
    width: 700px;
    height: 600px;
    }

    #footer {
    background: #838283;
    height: 180px;
    width: 900px;
    }

    Β 

    ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅

    На ΠΌΠΎΠΌΠ΅Π½Ρ‚ написания ΡΡ‚Π°Ρ‚ΡŒΠΈ Π½Π΅ всС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π»ΠΈ ΡΠΎΠ·Π΄Π°Π½Π½ΡƒΡŽ Π²Π΅Π± страницу. Для устранСния этого нСдостатка ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π±Π»ΠΎΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ слСдуСт Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ сразу Π·Π° Π±Π»ΠΎΠΊΠΎΠΌ content.

    Π’ΠΎΡ‚ Π΅Π³ΠΎ ΠΊΠΎΠ΄ HTML:

    Β 

    <div id=Β»clearΒ»>

    </div>

    Β 

    И CSS:

    Β 

    #clear {
    clear:both;
    }

    Β 

    А ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ‚Π΅Π³Π°ΠΌΠΈ head Π·Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ, ΠΊΠ°ΠΊΡƒΡŽ ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²ΠΊΡƒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ, Ссли Π²Ρ‹ Π²Π΄Ρ€ΡƒΠ³ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ русский тСкст Π² свои Π±Π»ΠΎΠΊΠΈ:

    Β 

    <meta http-equiv=Β»Content-TypeΒ» content=Β»text/html; charset=utf-8β€³ />

    Β 

    Π€ΠΈΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠ΄ HTML:

    Β 

    <html>

    <head>

    <meta http-equiv=Β»Content-TypeΒ» content=Β»text/html; charset=utf-8β€³ />

    Β Β Β Β Β Β Β Β Β Β Β  <title>ΠžΡΠ½ΠΎΠ²Ρ‹ HTML ΠΈ CSS</title>

    <link rel=Β»stylesheetΒ» type=Β»text/cssΒ» href=Β»style.cssΒ» />

    </head>

    Β 

    <body>

    Β 

    Β Β Β Β Β Β Β Β Β Β Β  <div id=Β»containerΒ»>

    Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  <div id=Β»headerΒ»>Π¨Π°ΠΏΠΊΠ° сайта

    Β 

    Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  </div>

    Β 

    Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  <div id=Β»navigationΒ»>Π‘Π»ΠΎΠΊ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ

    Β 

    Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  </div>

    Β 

                            <div id=»menu»>МСню

    Β 

    Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  </div>

    Β 

    Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  <div id=Β»contentΒ»>ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚

    Β 

    Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  </div>

    Β 

    Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  <div id=Β»clearΒ»>

    Β 

    Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  </div>

    Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β 

    Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  <div id=Β»footerΒ»>Подвал сайта

    Β 

    Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  </div>

    Β Β Β Β Β Β Β Β Β Β Β  </div>

    Β 

    </body>

    </html>

    Β 

    Β 

    CSS:

    Β 

    body {

    Β Β Β Β Β Β Β Β Β Β Β  background: #f3f2f3;

    Β Β Β Β Β Β Β Β Β Β Β  color: #000000;

    Β Β Β Β Β Β Β Β Β Β Β  font-family: Trebuchet MS, Arial, Times New Roman;

    Β Β Β Β Β Β Β Β Β Β Β  font-size: 12px;

    }

    Β 

    #container {

    Β Β Β Β Β Β Β Β Β Β Β  background: #FFFFFF;

    Β Β Β Β Β Β Β Β Β Β Β  margin: 30px auto;

    Β Β Β Β Β Β Β Β Β Β Β  width: 900px;

    Β Β Β Β Β Β Β Β Β Β Β  height: 1000px;

    }

    Β 

    #header {

    Β Β Β Β Β Β Β Β Β Β Β  background: #838283;

    Β Β Β Β Β Β Β Β Β Β Β  height: 200px;

    Β Β Β Β Β Β Β Β Β Β Β  width: 900px;

    }

    Β 

    #navigation {

    Β Β Β Β Β Β Β Β Β Β Β  background: #a2a2a2;

    Β Β Β Β Β Β Β Β Β Β Β  width: 900px;

    Β Β Β Β Β Β Β Β Β Β Β  height: 20px;

    }

    Β 

    #menu {

    Β Β Β Β Β Β Β Β Β Β Β  background: #333333;

    Β Β Β Β Β Β Β Β Β Β Β  float: left;

    Β Β Β Β Β Β Β Β Β Β Β  width: 200px;

    Β Β Β Β Β Β Β Β Β Β Β  height: 600px;

    }

    Β 

    #content {

    Β Β Β Β Β Β Β Β Β Β Β  background: #d2d0d2;

    Β Β Β Β Β Β Β Β Β Β Β  float: right;

    Β 

    Β Β Β Β Β Β Β Β Β Β Β  width: 700px;

    Β Β Β Β Β Β Β Β Β Β Β  height: 600px;

    }

    Β 

    #clear {

    Β Β Β Β Β Β Β Β Β Β Β  clear:both;

    }

    Β 

    #footer {

    Β Β Β Β Β Β Β Β Β Β Β  background: #838283;

    Β Β Β Β Β Β Β Β Β Β Β  height: 180px;

    Β Β Β Β Β Β Β Β Β Β Β  width: 900px;

    }

    Β 

    НадССмся, Π΄Π°Π½Π½Ρ‹ΠΉ ΡƒΡ€ΠΎΠΊ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΠ» Π²Π°ΠΌ ΠΏΠΎΠ½ΡΡ‚ΡŒ основы Ρ€Π°Π±ΠΎΡ‚Ρ‹ с HTML ΠΈ CSS.

    Π’ΠΎΡ‚ ΠΊΠ°ΠΊ это выглядит Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅:

    Β 

    Блочная вёрстка | htmlbook.ru

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

    ΠŸΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ слои Π²Π²Π΅Π»Π° компания Netscape, Π²ΠΊΠ»ΡŽΡ‡ΠΈΠ² Π² свой Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ Ρ‚Π΅Π³Π° <layer>. Π­Ρ‚ΠΎΡ‚ Ρ‚Π΅Π³ позволял ΠΏΡ€ΡΡ‚Π°Ρ‚ΡŒ/ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π΅ содСрТимоС, ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, Π½Π°ΠΊΠ»Π°Π΄Ρ‹Π²Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ слой ΠΏΠΎΠ²Π΅Ρ€Ρ… Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΈ Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ Π΄Π°Π½Π½Ρ‹Π΅ Π² содСрТимоС слоя ΠΈΠ· Ρ„Π°ΠΉΠ»Π°. ВсС эти ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Π»Π΅Π³ΠΊΠΎ мСнялись с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ JavaScript ΠΈ это Ρ€Π°ΡΡˆΠΈΡ€ΡΠ»ΠΎ возмоТности ΠΏΠΎ созданию Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ динамичСского ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π½Π° страницС. НСсмотря Π½Π° ΡΡ‚ΠΎΠ»ΡŒ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»ΡΡŽΡ‰ΠΈΠΉ Π½Π°Π±ΠΎΡ€ возмоТностСй, Ρ‚Π΅Π³ <layer> Π½Π΅ Π±Ρ‹Π» Π²ΠΊΠ»ΡŽΡ‡Ρ‘Π½ Π² ΡΠΏΠ΅Ρ†ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΡŽ HTML ΠΈ остался лишь Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ΠΌ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° Netscape.

    Однако Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ Π² ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Ρ… возмоТностях ΡƒΠΆΠ΅ Π½Π°Π·Ρ€Π΅Π»Π°, ΠΈ Π² ΠΊΠΎΠ½Ρ†Π΅ 1996 Π³ΠΎΠ΄Π° синтаксис для Ρ€Π°Π±ΠΎΡ‚Ρ‹ со слоями Π±Ρ‹Π» Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ ΠΈ ΠΎΠ΄ΠΎΠ±Ρ€Π΅Π½ Π² Ρ€Π°Π±ΠΎΡ‡Π΅ΠΌ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅ консорциума Β«CSS Positioning (CSS-P)Β». Основная Π½Π°Π³Ρ€ΡƒΠ·ΠΊΠ° лоТилась Π½Π° стили, с ΠΈΡ… ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Π²ΠΈΠ΄ΠΎΠΌ любого элСмСнта, Π² Ρ‚ΠΎΠΌ числС ΠΌΠ΅Π½ΡΡ‚ΡŒ значСния динамичСски Ρ‡Π΅Ρ€Π΅Π· JavaScript. К соТалСнию, ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π½Ρ‹Π΅ ΠΌΠΎΠ΄Π΅Π»ΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² для доступа ΠΊ элСмСнтам Ρ€Π°Π·Π»ΠΈΡ‡Π°Π»ΠΈΡΡŒ, поэтому ΠΏΡ€ΠΈΡ…ΠΎΠ΄ΠΈΠ»ΠΎΡΡŒ ΠΏΠΈΡΠ°Ρ‚ΡŒ достаточно слоТный ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±Ρ‹ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Π» эти особСнности.

    Π’ настоящСС врСмя Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ популярных Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² стали ΠΏΡ€ΠΈΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒΡΡ спСцификаций HTML ΠΈ CSS, Ρ‡Ρ‚ΠΎ сильно ΠΎΠ±Π»Π΅Π³Ρ‡ΠΈΠ»ΠΎ Тизнь создатСлям сайтов, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ это снизило врСмя Π½Π° ΠΎΡ‚Π»Π°Π΄ΠΊΡƒ сайта Π² Ρ€Π°Π·Π½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, различия Π² ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π°Ρ… Ρƒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ ΠΈ ΠΏΡ€ΠΈ ΠΈΡ… Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΠΎΠ²Π΅Π½ΠΈΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΏΡ€ΠΈΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… Ρ„ΠΎΡ€ΠΌ Ρ€Π°Π±ΠΎΡ‚Ρ‹.

    • Если Π½Π°Π±Π»ΡŽΠ΄Π°ΡŽΡ‚ΡΡ нСбольшиС различия Π² ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ сайта Π² Ρ€Π°Π·Π½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…, Ρ‚ΠΎ Π½Π° эти отличия Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‚ Π³Π»Π°Π·Π°. ΠŸΠΎΠΏΡ€ΠΎΡΡ‚Ρƒ говоря, Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ ΠΈΡΠΏΡ€Π°Π²Π»ΡΡŽΡ‚. ΠŸΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»ΠΈ Π² любом случаС Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ попиксСльно ΡΡ€Π°Π²Π½ΠΈΠ²Π°Ρ‚ΡŒ сайт Π² Ρ€Π°Π·Π½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…. Π—Π΄Π΅ΡΡŒ слСдуСт ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΊΡƒ, Ρ‡Ρ‚ΠΎ сайт Π² любом случаС Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ ΠΈ Π±Π΅Π· ошибок.
    • Если Ρƒ сайта ΠΈΠΌΠ΅ΡŽΡ‚ΡΡ сущСствСнныС различия ΠΏΡ€ΠΈ Π΅Π³ΠΎ ΠΏΠΎΠΊΠ°Π·Π΅ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠΌ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, Ρ‚ΠΎ для ΠΈΡ… устранСния ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ Ρ…Π°ΠΊΠΈ.

    Π₯Π°ΠΊ β€” это Π½Π°Π±ΠΎΡ€ ΠΏΡ€ΠΈΠ΅ΠΌΠΎΠ², ΠΊΠΎΠ³Π΄Π° ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½ΠΎΠΌΡƒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ Β«ΠΏΠΎΠ΄ΡΠΎΠ²Ρ‹Π²Π°ΡŽΡ‚Β» ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ понимаСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ этим Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ, Π° ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ игнорируСтся.

    НСсмотря Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Ρ…Π°ΠΊΠΈ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… слСдуСт ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΠΎ ΠΈΠ»ΠΈ Π²ΠΎΠΎΠ±Ρ‰Π΅ ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π±Π΅Π· Π½ΠΈΡ…. Π”Π΅Π»ΠΎ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Ρ…Π°ΠΊΠΈ ΡΠ½ΠΈΠΆΠ°ΡŽΡ‚ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΊΠΎΠ΄Π° ΠΈ для ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² ΠΎΠ΄Π½ΠΎΠ³ΠΎ элСмСнта приходится Π²Π½ΠΎΡΠΈΡ‚ΡŒ измСнСния ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ Π² Ρ€Π°Π·Π½Ρ‹Ρ… мСстах.

    Π•ΡΡ‚ΡŒ ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠΉ, пСрспСктивный ΠΏΡƒΡ‚ΡŒΒ β€” ΠΏΡ€ΠΈΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒΡΡ спСцификации CSS. НСсмотря Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ Π½Π΅ Π² ΠΏΠΎΠ»Π½ΠΎΠΉ ΠΌΠ΅Ρ€Π΅ сами Π΅Ρ‘ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚, ΠΎΠ½ΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π΅ΡΡΠΈΡ€ΡƒΡŽΡ‚ ΠΈΠΌΠ΅Π½Π½ΠΎ Π² Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ ΠΏΠΎΠ»Π½ΠΎΠΉ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… спСцификаций (HTML, CSS, DOM). Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, получаСтся, Ρ‡Ρ‚ΠΎ Π±ΡƒΠ΄ΡƒΡ‰ΠΈΠ΅ вСрсии Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² Π±ΡƒΠ΄ΡƒΡ‚ ΡƒΠ½ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹ ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈ Ρ‚ΠΎΡ‚ ΠΆΠ΅ сайт станут ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ.

    Π‘Π½ΠΎΠ²Π° вСрнСмся ΠΊ слоям. ΠŸΠΎΠ½ΡΡ‚Π½ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ нСпосрСдствСнно связаны со стилями. Π Π°Π· Ρ‚Π°ΠΊ, Ρ‚ΠΎ Π½Π΅ получаСтся Π»ΠΈ, Ρ‡Ρ‚ΠΎ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт HTML-ΠΊΠΎΠ΄Π°, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ΡΡ стили, являСтся слоСм? Π’ ΠΊΠ°ΠΊΠΎΠΌ-Ρ‚ΠΎ смыслС Ρ‚Π°ΠΊ ΠΈ Π΅ΡΡ‚ΡŒ. Однако это внСсло Π±Ρ‹ ΠΈΠ·Ρ€ΡΠ΄Π½ΡƒΡŽ ΠΏΡƒΡ‚Π°Π½ΠΈΡ†Ρƒ, Ссли вмСсто Β«Ρ‚Π°Π±Π»ΠΈΡ†Π°Β» ΠΈΠ»ΠΈ Β«Π°Π±Π·Π°Ρ†Β» ΠΌΡ‹ Π±Ρ‹ Π³ΠΎΠ²ΠΎΡ€ΠΈΠ»ΠΈ «слой». ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ договоримся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚ΡŒ этот Ρ‚Π΅Ρ€ΠΌΠΈΠ½ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊ Ρ‚Π΅Π³Π°ΠΌ <div>.

    Π’ HTML4 ΠΈ XHTML слой β€” это элСмСнт Π²Π΅Π±-страницы, созданный с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π΅Π³Π° <div>, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ примСняСтся стилСвоС ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅.

    Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π²Ρ‹Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ «блочная вёрстка» ΠΈΠ»ΠΈ вёрстка с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ слоёв Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² конструктивном использовании Ρ‚Π΅Π³ΠΎΠ² <div> ΠΈ стилСй. ΠŸΡ€ΠΈ этом ΠΏΡ€ΠΈΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠΎΠ².

    Π Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ содСрТимого ΠΈ оформлСния

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

    АктивноС ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ‚Π΅Π³Π° <div>

    ΠŸΡ€ΠΈ Π±Π»ΠΎΡ‡Π½ΠΎΠΉ вёрсткС сущСствСнноС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ удСляСтся ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠΌΡƒ Ρ‚Π΅Π³Ρƒ <div>, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ выполняСт мноТСство Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ. ЀактичСски это основа, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Β«Π½Π°Π²Π΅ΡˆΠΈΠ²Π°ΡŽΡ‚ΡΡΒ» стили, прСвращая Π΅Ρ‘ Ρ‚ΠΎ Π² ΠΈΠ³Ρ€ΡƒΡˆΠΊΡƒ, Ρ‚ΠΎ Π² Π·Π²Π΅Ρ€ΡƒΡˆΠΊΡƒ. Π‘ΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ Π½Π΅ Π·Π½Π°Ρ‡ΠΈΡ‚, Ρ‡Ρ‚ΠΎ примСняСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ этот Ρ‚Π΅Π³, Π½ΡƒΠΆΠ½ΠΎ вСдь ΠΈ рисунки Π²ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ ΠΈ ΠΎΡ„ΠΎΡ€ΠΌΠ»ΡΡ‚ΡŒ тСкст. Но ΠΏΡ€ΠΈ вёрсткС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ слоёв Ρ‚Π΅Π³ <div> являСтся ΠΊΠΈΡ€ΠΏΠΈΡ‡ΠΈΠΊΠΎΠΌ вёрстки, Π΅Ρ‘ Π±Π°Π·ΠΎΠ²Ρ‹ΠΌ Ρ„ΡƒΠ½Π΄Π°ΠΌΠ΅Π½Ρ‚ΠΎΠΌ.

    Благодаря этому Ρ‚Π΅Π³Ρƒ HTML-ΠΊΠΎΠ΄ распадаСтся Π½Π° ряд Ρ‡Ρ‘Ρ‚ΠΊΠΈΡ… наглядных Π±Π»ΠΎΠΊΠΎΠ², ΠΊΠΎΠ΄ ΠΏΡ€ΠΈ этом получаСтся Π±ΠΎΠ»Π΅Π΅ ΠΊΠΎΠΌΠΏΠ°ΠΊΡ‚Π½Ρ‹ΠΌ, Ρ‡Π΅ΠΌ ΠΏΡ€ΠΈ Ρ‚Π°Π±Π»ΠΈΡ‡Π½ΠΎΠΉ вёрсткС, ΠΊ Ρ‚ΠΎΠΌΡƒ ΠΆΠ΅ поисковыС систСмы Π΅Π³ΠΎ Π»ΡƒΡ‡ΡˆΠ΅ ΠΈΠ½Π΄Π΅ΠΊΡΠΈΡ€ΡƒΡŽΡ‚.

    Π’Π°Π±Π»ΠΈΡ†Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для прСдставлСния Ρ‚Π°Π±Π»ΠΈΡ‡Π½Ρ‹Ρ… Π΄Π°Π½Π½Ρ‹Ρ…

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

    ΠŸΠΎΠ΄Π²Π΅Π΄Ρƒ ΠΈΡ‚ΠΎΠ³ΠΈ. Π’ HTML4 ΠΈ XHTML слой это Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ элСмСнт вёрстки Π²Π΅Π±-страниц, ΠΏΡ€ΠΈ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ стили ΠΈ ΠΏΡ€ΠΈΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ спСцификаций HTML ΠΈ CSS. ΠŸΡ€ΠΈ Ρ‚Π°ΠΊΠΎΠΌ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π΅ ваТная Ρ€ΠΎΠ»ΡŒ удСляСтся Ρ‚Π΅Π³Ρƒ <div>, с ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ Ρƒ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π° людСй ΠΈ Π°ΡΡΠΎΡ†ΠΈΠΈΡ€ΡƒΡŽΡ‚ΡΡ слои. Π’ ΠΊΠ°ΠΊΠΎΠΌ-Ρ‚ΠΎ смыслС это являСтся Π²Π΅Ρ€Π½Ρ‹ΠΌ, поэтому договоримся Π² дальнСйшСм ΡƒΠΏΠΎΡ‚Ρ€Π΅Π±Π»ΡΡ‚ΡŒ Ρ‚Π΅Ρ€ΠΌΠΈΠ½ «слой» ΠΊ Ρ‚Π΅Π³Ρƒ <div> для ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ ΡƒΠΊΠ°Π·Π°Π½ стилСвой ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ ΠΈΠ»ΠΈ класс. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π²Ρ‹Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ «слой с ΠΈΠΌΠ΅Π½Π΅ΠΌ contentΒ» ΠΏΠΎΠ΄Ρ€Π°Π·ΡƒΠΌΠ΅Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Ρ‚Π΅Π³ <div> ΠΈΠ»ΠΈ <div >.

    Π’ HTML5 Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΎ нСсколько Π½ΠΎΠ²Ρ‹Ρ… Ρ‚Π΅Π³ΠΎΠ² Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ для обозначСния Ρ€Π°Π·Π½Ρ‹Ρ… Ρ‚ΠΈΠΏΠΎΠ²Ρ‹Ρ… Π±Π»ΠΎΠΊΠΎΠ² страницы. К ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, <header> ΠΈ <footer> ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для создания «шапки» ΠΈ Β«ΠΏΠΎΠ΄Π²Π°Π»Π°Β», <nav> для Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, <aside> для Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ. Π’ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ Π² ΡΠΏΠ΅Ρ†ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΡŽ HTML ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Ρ… элСмСнтов ΠΏΡ€ΠΈΠ·Π²Π°Π½ΠΎ ΡΠ½ΠΈΠ·ΠΈΡ‚ΡŒ Π΄ΠΎΠΌΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Ρ‚Π΅Π³Π° <div> ΠΈ ΠΏΡ€ΠΈΠ΄Π°Ρ‚ΡŒ большС смысла Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ΅. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ Π² вёрсткС Π½Π° HTML5 Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎ примСняСтся Ρ‚Π΅Ρ€ΠΌΠΈΠ½ «элСмСнт», ΠΏΠΎΠ΄ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ подразумСваСтся ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ Ρ‚Π΅Π³ ΠΈ элСмСнт ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΎΠ½ создаёт.

    Π˜Π·Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ Π²Ρ‹ΡˆΠ΅ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡ‹ Π±Π»ΠΎΡ‡Π½ΠΎΠΉ вёрстки ΠΏΡ€ΠΈ этом ΡΠΎΡ…Ρ€Π°Π½ΡΡŽΡ‚ΡΡ Π·Π° ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ Ρ‚ΠΎΠ³ΠΎ ΠΌΠΎΠΌΠ΅Π½Ρ‚Π°, Ρ‡Ρ‚ΠΎ <div> Π² Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… случаях замСняСтся Π±ΠΎΠ»Π΅Π΅ осмыслСнными Ρ‚Π΅Π³Π°ΠΌΠΈ.

    Блочная вСрстка ΠΈΠ»ΠΈ основы Π°Π½Π°Ρ‚ΠΎΠΌΠΈΠΈ скСлСта сайтов

    Π‘Π°ΠΉΡ‚Ρ‹ Ρ‚ΠΎΠΆΠ΅ ΠΈΠΌΠ΅ΡŽΡ‚ свой скСлСт. Но ΠΎ Π΅Π³ΠΎ особСнностях ΡΠΏΡ€Π°ΡˆΠΈΠ²Π°Ρ‚ΡŒ Π²Ρ€Π°Ρ‡Π΅ΠΉ бСсполСзно. Π”Π° ΠΈ Π²Π΅Ρ‚Π΅Ρ€ΠΈΠ½Π°Ρ€Ρ‹ Ρ‚ΠΎΠΆΠ΅ Π½Π΅ Π² курсС строСния сайта. Об этом Π²Π΅Π΄ΠΎΠΌΠΎ лишь Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠ°ΠΌ. ИмСнно ΠΎΡ‚ Π½ΠΈΡ… зависит строСниС скСлСта Π±ΡƒΠ΄ΡƒΡ‰Π΅Π³ΠΎ рСсурса. А Π³Π»Π°Π²Π½Ρ‹ΠΌ способом создания костСй Π΅Π³ΠΎ скСлСта являСтся блочная вСрстка.

    Π•ΡΡ‚ΡŒ Π² вСрсткС сайта Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ таинствСнноС. Но это Π΄ΠΎ Ρ‚Π΅Ρ… ΠΏΠΎΡ€, ΠΏΠΎΠΊΠ° Π½Π΅ познакомишься с этим рСмСслом ΠΏΠΎΠ±Π»ΠΈΠΆΠ΅. НачинаСм нашС посвящСниС:

    Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ этапом Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ сайта послС создания Π΅Π³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π° являСтся вСрстка. Π—Π°Π΄Π°Ρ‡Π° Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠ° пСрСнСсти с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ html ΠΊΠΎΠ΄Π° ΠΈ Ρ‚Π°Π±Π»ΠΈΡ† css скСлСт Π±ΡƒΠ΄ΡƒΡ‰Π΅Π³ΠΎ сайта Π² Π²ΠΈΡ€Ρ‚ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΌΠΈΡ€. ΠŸΡ€ΠΎΡ‰Π΅ говоря, пСрСнСсти Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΈ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ рСсурса Π² Ρ„ΠΎΡ€ΠΌΡƒ, ΠΏΠΎΠ½ΡΡ‚Π½ΡƒΡŽ для Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°.

    Π’ процСссС вСрстки ΠΊΠΎΠ΄ΠΎΠΌ html происходит Ρ€Π°Π·Π±ΠΈΠ²ΠΊΠ° «скСлСта» сайта Π½Π° части. А с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ css (каскадных Ρ‚Π°Π±Π»ΠΈΡ† стилСй) Π·Π°Π΄Π°ΡŽΡ‚ΡΡ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ Π΅Π³ΠΎ «костСй», Ρ†Π²Π΅Ρ‚ ΠΈ располоТСниС.

    Π Π°Π·Π»ΠΈΡ‡Π°ΡŽΡ‚ нСсколько Π²ΠΈΠ΄ΠΎΠ² вСрстки:

    I. Вабличная – Ρ€Π°Π½Π΅Π΅ Π±Ρ‹Π»Π° основным способом вСрстки. Π’ Ρ‚Π°Π±Π»ΠΈΡ‡Π½ΠΎΠΉ вСрсткС для задания структуры сайта ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Ρ‚Π΅Π³ <table> ΠΈ Π΅Π³ΠΎ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠ΅ Ρ‚Π΅Π³ΠΈ. ВСрстка с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π°Π±Π»ΠΈΡ† позволяСт Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ всС элСмСнты Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΄Ρ€ΡƒΠ³ Π΄Ρ€ΡƒΠ³Π°. Но Π² Ρ‚ΠΎΠΆΠ΅ врСмя Ρ‚Π°ΠΊΠΎΠΉ ΠΊΠΎΠ΄ получаСтся слишком ΠΎΠ±ΡŠΠ΅ΠΌΠ½Ρ‹ΠΌ:

    Π’Π°ΠΊΠΆΠ΅ ΠΊ основным нСдостаткам Ρ‚Π°Π±Π»ΠΈΡ‡Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° относится Π΅Π³ΠΎ долгая Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° ΠΈ плохая индСксация содСрТимого поисковыми систСмами.

    Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ страницы, свСрстанной Π½Π° основС Ρ‚Π°Π±Π»ΠΈΡ†, Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΎ Π΄ΠΎ Ρ‚Π΅Ρ… ΠΏΠΎΡ€, ΠΏΠΎΠΊΠ° Π½Π΅ загрузятся всС Π΄Π°Π½Π½Ρ‹Π΅. Блочная вСрстка позволяСт ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½Π½Ρ‹ΠΉ элСмСнт ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ.

    ΠŸΠ»ΠΎΡ…Π°Ρ индСксация Ρ‚Π°Π±Π»ΠΈΡ‡Π½Ρ‹Ρ… страниц ΠΎΠ±ΡŠΡΡΠ½ΡΠ΅Ρ‚ΡΡ большими ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΊΠ°ΠΌΠΈ ΠΌΠ΅ΠΆΠ΄Ρƒ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ тСкста, располоТСнного Π² Ρ€Π°Π·Π½Ρ‹Ρ… ячСйках Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹.


    Π’Π΅ΠΏΠ΅Ρ€ΡŒ табличная вСрста Ρ€Π΅Π΄ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² качСствС основного ΠΌΠ΅Ρ‚ΠΎΠ΄Π° создания сайтов. БСйчас Π΅Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ лишь для структурирования Ρ‚Π°Π±Π»ΠΈΡ‡Π½Ρ‹Ρ… Π΄Π°Π½Π½Ρ‹Ρ… ΠΈ располоТСния графичСских ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.

    II. Блочная – Π² Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ являСтся основным способом вСрстки. Π’ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ Ρ‚Π°Π±Π»ΠΈΡ‡Π½ΠΎΠΉ блочная вСрстка ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ‚ рядом прСимущСств:

    • ΠžΡ‚Π΄Π΅Π»Π΅Π½ΠΈΠ΅ стиля элСмСнтов ΠΎΡ‚ ΠΊΠΎΠ΄Π° html;
    • Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ налоТСния ΠΎΠ΄Π½ΠΎΠ³ΠΎ слоя Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ – такая Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΎΠΌ ΠΎΠ±Π»Π΅Π³Ρ‡Π°Π΅Ρ‚ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ элСмСнтов.
    • Π›ΡƒΡ‡ΡˆΠ°Ρ индСксация поисковиками;
    • Высокая ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ страницы, состоящСй ΠΎΡ‚ Π²Π·Π°ΠΈΠΌΠ½ΠΎ нСзависимых элСмСнтов;
    • Π›Π΅Π³ΠΊΠΎΡΡ‚ΡŒ создания Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Ρ… эффСктов (Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΡ… мСню, списков, Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… подсказок).

    ΠžΡΠ½ΠΎΠ²Π½Ρ‹ΠΌ нСдостатком Π±Π»ΠΎΡ‡Π½ΠΎΠΉ вСрстки являСтся нСкая Β«Π΄Π²ΡƒΡΠΌΡ‹ΡΠ»Π΅Π½Π½ΠΎΡΡ‚ΡŒΒ» понимания Π΅Π΅ ΠΊΠΎΠ΄Π° Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ часто html страницы приходится Β«Π΄ΠΎΠ²ΠΎΠ΄ΠΈΡ‚ΡŒΒ» ΠΏΡƒΡ‚Π΅ΠΌ использования ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… Ρ…Π°ΠΊΠΎΠ².

    Π‘ появлСниСм Π±Π»ΠΎΡ‡Π½ΠΎΠΉ вСрстки Ρ€ΠΎΠ΄ΠΈΠ»ΠΎΡΡŒ Ρ‚Π°ΠΊΠΎΠ΅ понятиС, ΠΊΠ°ΠΊ Β«ΠΊΡ€ΠΎΡΡΠ±Ρ€Π°ΡƒΠ·Π΅Ρ€Π½ΠΎΡΡ‚ΡŒΒ». Из-Π·Π° различия отобраТСния ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈ Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ элСмСнта Π² Ρ€Π°Π·Π½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠ°ΠΌ приходится Π²ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ Π² основной html Ρ†Π΅Π»Ρ‹Π΅ куски ΠΊΠΎΠ΄Π° (Ρ…Π°ΠΊΠΈ).

    ДСйствиС Ρ…Π°ΠΊΠ° являСтся узкоспСциализированным ΠΈ Ρ€Π΅ΡˆΠ°Π΅Ρ‚ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ Π½Π΅ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎΠ³ΠΎ отобраТСния лишь Π² ΠΎΠ΄Π½ΠΎΠΌ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅.


    ΠžΡΠ½ΠΎΠ²Π½Ρ‹ΠΌ элСмСнтом, примСняСмым Π² Π±Π»ΠΎΡ‡Π½ΠΎΠΉ вСрсткС, являСтся Ρ‚Π΅Π³ <div>. Участок ΠΊΠΎΠ΄Π°, ΠΎΡ‚Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ этим Ρ‚Π΅Π³ΠΎΠΌ, называСтся слоСм. ВсС стилСвыС Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ вынСсСны Π·Π° Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΊΠΎΠ΄Π° html Π² каскадныС Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй. Доступ ΠΊ Π½ΠΈΠΌ осущСствляСтся Ρ‡Π΅Ρ€Π΅Π· ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹ ΠΈΠ»ΠΈ классы css:

    ΠŸΠ΅Ρ€Π΅Π΄ Π½Π°Ρ‡Π°Π»ΠΎΠΌ вСрстки Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΉ psd ΠΌΠ°ΠΊΠ΅Ρ‚ сайта Π² графичСском Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ Ρ€Π°Π·Ρ€Π΅Π·Π°ΡŽΡ‚ Π½Π° Π±Π»ΠΎΠΊΠΈ (слои). Π’ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΏΠ°ΠΏΠΊΡƒ ΠΏΠΎΠΌΠ΅Ρ‰Π°ΡŽΡ‚ Π²Ρ‹Ρ€Π΅Π·Π°Π½Π½Ρ‹Π΅ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»ΡΡ‚ΡŒΡΡ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ слою:

    Для ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° возьмСм Π²ΠΎΡ‚ Ρ‚Π°ΠΊΠΎΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ сайта, созданный Π² Photoshop. Π‘Π½Π°Ρ‡Π°Π»Π° Π² тСкстовом Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ div Π·Π°Π΄Π°Π΅ΠΌ структуру Π±ΡƒΠ΄ΡƒΡ‰Π΅Π³ΠΎ рСсурса ΠΈ присваиваСм ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ слою свой сСлСктор id. ΠŸΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ΡΡ такая структура:

    Π—Π°Ρ‚Π΅ΠΌ ΠΊ Π³ΠΎΡ‚ΠΎΠ²ΠΎΠΉ структурС сайта Π½Π° html строкой <link rel=Β»stylesheetΒ» type=Β»text/cssΒ» href=Β»style.cssΒ» /> прикрСпляСм Ρ„Π°ΠΉΠ» css. ПослС Ρ‡Π΅Π³ΠΎ добавляСм Π² Π½Π΅Π³ΠΎ стилСвоС описаниС ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ слоя, ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΄Ρ€ΡƒΠ³ΠΈΡ… элСмСнтов ΠΈ Π΅Π³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹.

    Π‘ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ со всСми свойствами css ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ· тСхничСской Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ ΠΊ языку.


    ΠŸΠΎΠ»Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° index.html:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <title>ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π±Π»ΠΎΡ‡Π½ΠΎΠΉ вСрстки</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
     
    <body>
     
    <div>
    	<div>
    	<h3>Π¨Π°ΠΏΠΊΠ°</h3>
    	</div>
    		 
    	<div>
    	<h3>Π‘Π»ΠΎΠΊ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ</h3>
    	</div>
    		 
    	<div>
    	<h3>МСню</h3>
    	</div>
    		 
    	<div>
    	<h3>ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚</h3>
    	</div>
    		 
    	<div>
    		 
    	</div>
    							   
    	<div>
    	<h3>Подвал сайта</h3>
    	</div>
    </div>
    		 
    </body>
    </html>

    Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ Ρ„Π°ΠΉΠ»Π° style.css:

    body {
                background: #f3f2f3;
                color: #000000;
                font-family: Trebuchet MS, Arial, Times New Roman;
                font-size: 12px;
    }
     
    #container {
                background:#99CC99;
                margin: 30px auto;
                width: 900px;
                height: 600px;
    }
     
    #header {
                background: #66CCCC;
                height: 100px;
                width: 900px;
    }
     
    #navigation {
                background: #FF9999;
                width: 900px;
                height: 20px;
    }
     
    #menu {
                background: #99CC99;
                float: left;
                width: 200px;
                height: 400px;
    }
     
    #content {
                background: #d2d0d2;
                float: right;
     
                width: 700px;
                height: 400px;
    }
     
    #clear {
                clear:both;
    }
     
    #footer {
                background: #0066FF;
                height: 80px;
                width: 900px;
    }

    Π’ΠΎΡ‚ Ρ‚Π°ΠΊ наш ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π±Π»ΠΎΡ‡Π½ΠΎΠΉ вСрстки сайта выглядит Π² ΠΎΠΊΠ½Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°:

    ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, этот ΠΏΡ€ΠΈΠΌΠ΅Ρ€ являСтся лишь наглядным пособиСм для дСмонстрации Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ происходит блочная вСрстка. Настоящая вСрстка происходит с использованиС Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠΎΠ², ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹Ρ… Π² css. А Ρ‚Π°ΠΊΠΆΠ΅ с Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ Π² html ΠΈ css ΠΊΠΎΠ΄Π° Ρ…Π°ΠΊΠΎΠ² для ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ отобраТСния Π²ΠΎ всСх Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ….

    Для рСдактирования ΠΊΠΎΠ΄Π° страниц сайта ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Ρ‹ html. МногиС ΠΈΠ· Π½ΠΈΡ… способны автоматичСски Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Ρ… элСмСнтов, создаваСмых Π² Π½ΠΈΡ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ Β«Π΄ΠΈΠ·Π°ΠΉΠ½Β». Но Ρ‚Π°ΠΊΠΎΠΉ ΠΊΠΎΠ΄ Π½Π΅ являСтся Π²Π°Π»ΠΈΠ΄Π½Ρ‹ΠΌ, ΠΈ Ρ‡Π°Ρ‰Π΅ всСго нуТдаСтся Π² Β«Ρ€ΡƒΡ‡Π½ΠΎΠΉΒ» Π΄ΠΎΠ²ΠΎΠ΄ΠΊΠ΅:

    Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ рассмотрСнных здСсь основ Π±Π»ΠΎΡ‡Π½ΠΎΠΉ вСрстки ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ ΡΠ²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ свой сайт ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ. Π’ΠΎΠ³Π΄Π° Π±ΡƒΠ΄ΡƒΡ‰ΠΈΠΉ рСсурс Π±ΡƒΠ΄Π΅Ρ‚ Π±ΠΎΠ»Π΅Π΅ Ρ€ΠΎΠ΄Π½Ρ‹ΠΌ ΠΈ Π·Π½Π°ΠΊΠΎΠΌΡ‹ΠΌ. Π’Π΅Π΄ΡŒ Π² Π΅Π³ΠΎ скСлСтС всС косточки Π²Ρ‹ Β«ΠΏΠ΅Ρ€Π΅ΠΌΠΎΠ΅Ρ‚Π΅Β» собствСнными Ρ€ΡƒΠΊΠ°ΠΌΠΈ.

    Π’Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ быстро ΠΈ красиво: 15 популярных CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ²

    Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ красивых стилСй ΡƒΠ±ΠΈΠ²Π°Π΅Ρ‚ ΡƒΠΉΠΌΡƒ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ. CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡŽΡ‚ Ρ‚Ρƒ ΠΆΠ΅ Π·Π°Π΄Π°Ρ‡Ρƒ Π½Π° Π»Π΅Ρ‚Ρƒ. Π’Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π°ΡŽΡ‚ ΠΏΡ€ΠΎΠ΄ΡƒΠΌΠ°Π½Π½Ρ‹Π΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ самых насущных ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ – Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ, интСрфСйсы, Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ.

    ΠšΠ»Π°ΡΡΠΈΡ‡Π΅ΡΠΊΠΈΠΉ CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ – Π½Π°Π±ΠΎΡ€ Π±Π°Π·ΠΎΠ²Ρ‹Ρ… стилСй для вёрстки Π²Π΅Π±-страницы:

    • сСтка;
    • ΠΈΠΊΠΎΠ½ΠΊΠΈ;
    • Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹;
    • элСмСнты Ρ„ΠΎΡ€ΠΌ ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ;
    • Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠ°;
    • интСрфСйсныС ΠΏΠ°Ρ‚Ρ‚Π΅Ρ€Π½Ρ‹, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ ΠΈ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π°;
    • Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ классы оформлСния элСмСнтов: отступы, Ρ†Π²Π΅Ρ‚Π° ΠΈ Ρ‚. Π΄.

    МоТно Π½Π°Ρ‡Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ Π½Π°Π΄ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠΌ, Π½Π΅ тратя врСмя Π½Π° ΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ шаблонного ΠΊΠΎΠ΄Π° ΠΈΠ»ΠΈ написаниС с чистого листа. CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ – Ρ„ΡƒΠ½Π΄Π°ΠΌΠ΅Π½Ρ‚ систСмы стилСй.

    Π—Π°Ρ‡Π΅ΠΌ Π½ΡƒΠΆΠ΅Π½ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ?

    Π§Π΅ΠΌ слоТнСС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Ρ‚Π΅ΠΌ большС оснований Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΌ инструмСнтом. Π€Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌ Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… случаях:

    • НуТно быстро ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ сайт. ΠšΠ°ΡΡ‚ΠΎΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΏΡ€ΠΎΡ‰Π΅, Ρ‡Π΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ с нуля.
    • Если Π²Ρ‹ ΠΏΠ»ΠΎΡ…ΠΎ Π·Π½Π°Π΅Ρ‚Π΅ CSS. Π‘Π΅Ρ€ΠΈΡ‚Π΅ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ классы ΠΈ Π½Π°ΡΠ»Π°ΠΆΠ΄Π°ΠΉΡ‚Π΅ΡΡŒ стандартным, Π½ΠΎ элСгантным ΠΈ ΠΏΡ€ΠΎΠ΄ΡƒΠΌΠ°Π½Π½Ρ‹ΠΌ интСрфСйсом.
    • Π₯ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€ΠΎΡ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½-Π³ΠΈΠΏΠΎΡ‚Π΅Π·Ρƒ. Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ ΠΈ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ идСю Π² Π΄Π΅Π»Π΅.

    Π’Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ

    Bootstrap

    ΠŸΠΎΠΏΡƒΠ»ΡΡ€Π½Π΅ΠΉΡˆΠ°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ². Π’ 2018 Π³ΠΎΠ΄Ρƒ Π²Ρ‹ΡˆΠ΅Π» Bootstrap 4. Π’ Π½Ρ‘ΠΌ Π΅Ρ‰Ρ‘ большС ΡƒΠ΄ΠΎΠ±Π½Ρ‹Ρ… ΡƒΡ‚ΠΈΠ»ΠΈΡ‚ ΠΈ ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠ². ЧСтвСртая вСрсия написана Π½Π° SASS, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ всС прСимущСства прСпроцСссоров.

    Bootstrap – самый популярный CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ

    Π“Π»Π°Π²Π½Ρ‹Π΅ Ρ„ΠΈΡ‡ΠΈ Bootstrap:

    • ΠŸΡ€ΠΎΡ€Π°Π±ΠΎΡ‚Π°Π½Π½Π°Ρ адаптивная сСтка, основанная Π½Π° Flex-ΠΌΠΎΠ΄Π΅Π»ΠΈ, ΠΏΡ€ΠΎΡˆΠ»Π° испытаниС Π²Ρ€Π΅ΠΌΠ΅Π½Π΅ΠΌ Π½Π° всСх Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Ρ… Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡΡ…. Π Π΅ΡˆΠ°Π΅Ρ‚ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ Π·Π°Π΄Π°Ρ‡ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°.
    • На Bootstrap созданы тысячи шаблонов, Ρ‚Π΅ΠΌ ΠΈ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ². МоТно ΡΠΎΠ±Ρ€Π°Ρ‚ΡŒ сайт, Π½Π΅ написав Π½ΠΈ строчки CSS-ΠΊΠΎΠ΄Π°.
    • ΠŸΡ€ΠΎΡΡ‚ΠΎΡ‚Π° обучСния. ΠžΡ‡Π΅Π²ΠΈΠ΄Π½Ρ‹Π΅ ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠΈ, подробная докумСнтация с ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°ΠΌΠΈ. Масса пособий для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² с Ρ€Π°Π·Π½ΠΎΠΉ ΡΡ‚Π΅ΠΏΠ΅Π½ΡŒΡŽ погруТСния Π² Ρ‚Π΅ΠΌΡƒ.
    • Π“ΠΎΡ‚ΠΎΠ²Ρ‹ΠΉ JavaScript для Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π° ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ². АккордСоны ΠΈ карусСли ΡƒΠΆΠ΅ написаны Π·Π° вас.
    • ΠŸΡ€Π΅ΠΏΡ€ΠΎΡ†Π΅ΡΡΠΎΡ€Ρ‹ SASS ΠΈ LESS.

    Foundation

    Foundation – вСроятно, Π²Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΠΎ распространСнности CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ. Π£Ρ‚ΠΎΠ½Ρ‡Π΅Π½Π½Ρ‹ΠΉ ΠΈ Π³ΠΈΠ±ΠΊΠΈΠΉ инструмСнт ΠΏΠΎΠ΄ΠΎΠΉΠ΄Ρ‘Ρ‚ для ΠΎΡ‡Π΅Π½ΡŒ Π±ΠΎΠ»ΡŒΡˆΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ². Им ΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Facebook, eBay, Mozilla, Adobe, HP, Cisco ΠΈ Disney.

    Π€Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ Ρ‚Π°ΠΊΠΆΠ΅ построСн Π½Π° прСпроцСссорС SASS ΠΈ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΡ‚Π»ΠΈΡ‡Π½ΡƒΡŽ JavaScript-ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΡƒΡŽ. ΠšΡ€ΠΈΠ²Π°Ρ обучСния ΠΏΠΎ ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с Bootstrap Π±ΠΎΠ»Π΅Π΅ крутая, Π½ΠΎ Π΅ΡΡ‚ΡŒ ΠΈ прСимущСства.

    Foundation – идСальноС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ для ΠΊΡ€ΡƒΠΏΠ½Ρ‹Ρ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ²

    Π“Π»Π°Π²Π½Ρ‹Π΅ Ρ„ΠΈΡ‡ΠΈ Foundation:

    • Адаптивная систСма сСток. Π’ создании ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π½Π΅ уступаСт Bootstrap.
    • ΠœΠΎΡ‰Π½Ρ‹ΠΉ email-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ. Responsive-Π΄ΠΈΠ·Π°ΠΉΠ½ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² Π²Π΅Π±-прилоТСниях, Π½ΠΎ ΠΈ Π² ΠΏΠΈΡΡŒΠΌΠ°Ρ…. Никаких Π³Ρ€ΠΎΠΌΠΎΠ·Π΄ΠΊΠΈΡ… Ρ‚Π°Π±Π»ΠΈΡ‡Π΅ΠΊ – ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Foundation for emails.
    • ВСхничСская ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ°. Компания-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ ΠΎΠ±ΡƒΡ‡Π°ΡŽΡ‰ΠΈΠ΅ ΠΎΠ½Π»Π°ΠΉΠ½-Ρ‚Ρ€Π΅Π½ΠΈΠ½Π³ΠΈ ΠΈ ΠΊΠΎΠ½ΡΡƒΠ»ΡŒΡ‚Π°Ρ†ΠΈΠΈ ΠΏΠΎ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Ρƒ. Π£Π²Ρ‹, Π½Π΅ бСсплатно πŸ™
    • ΠŸΡ€ΠΎΡΡ‚Π°Ρ кастомизация. Foundation Π³ΠΈΠ±ΠΎΠΊ. Π’Ρ‹ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΡƒΠ΅Ρ‚Π΅ интСрфСйс ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.
    • JavaScript-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹.
    • Π›Π΅Π³ΠΊΠΎΠ΅ созданиС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ.
    • Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ.
    • Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Ρ‹ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°.
    • ΠŸΡ€Π΅ΠΏΡ€ΠΎΡ†Π΅ΡΡΠΎΡ€ SASS.

    Pure

    Π­Ρ‚ΠΎΡ‚ лСгковСсный (3.8 Кб) CSS-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ создан Yahoo Π² 2014 Π³ΠΎΠ΄Ρƒ. Π—Π° Π»Π΅Π³ΠΊΠΎΡΡ‚ΡŒ приходится ΠΏΠ»Π°Ρ‚ΠΈΡ‚ΡŒ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒΡŽ. Pure Π½Π΅ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Π±ΠΎΠ³Π°Ρ‚ΡƒΡŽ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² – ΠΎΠ½ сконцСнтрирован Π½Π° Π»Π΅ΠΉΠ°ΡƒΡ‚Π°Ρ… ΠΈ мСню. И ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ, Π½ΠΈ ΠΊΠ°ΠΏΠ»ΠΈ JavaScript.

    Pure.css – Π»Π΅Π³ΠΊΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ для ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹Ρ… ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ²

    Π“Π»Π°Π²Π½Ρ‹Π΅ Ρ„ΠΈΡ‡ΠΈ Pure.css:

    • ΠšΡ€ΠΎΡˆΠ΅Ρ‡Π½Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€.
    • Чистый CSS – для встраивания Π½ΡƒΠΆΠ΅Π½ лишь ΠΎΠ΄ΠΈΠ½ Ρ„Π°ΠΉΠ».
    • МСню Π½Π° любой вкус – Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅, Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅, Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠ΅.
    • Удобная Ρ€Π°Π±ΠΎΡ‚Π° с элСмСнтами Ρ„ΠΎΡ€ΠΌ.

    Bulma

    Π‘Π΅Ρ€ΡŒΠ΅Π·Π½Ρ‹ΠΉ ΠΈΠ³Ρ€ΠΎΠΊ Π½Π° CSS Ρ€Ρ‹Π½ΠΊΠ΅ – Bulma. Гармоничная смСсь качСств: малСнький, ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ, ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ ΠΈ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятный Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ. Написан Π½Π° SASS, сСтка Π½Π° флСксах, mobile-first ΠΏΠΎΠ΄Ρ…ΠΎΠ΄, чистый CSS – JavaScript Π½Π΅ прилагаСтся.

    Bulma – Π³Π°Ρ€ΠΌΠΎΠ½ΠΈΡ‡Π½Ρ‹ΠΉ CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ

    Π“Π»Π°Π²Π½Ρ‹Π΅ Ρ„ΠΈΡ‡ΠΈ Bulma:

    • Π›ΠΎΠ³ΠΈΡ‡Π½Ρ‹Π΅ ΠΈ Π·Π°ΠΏΠΎΠΌΠΈΠ½Π°ΡŽΡ‰ΠΈΠ΅ΡΡ ΠΈΠΌΠ΅Π½Π° классов.
    • Чистый CSS – вСсь Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ Π² ΠΎΠ΄Π½ΠΎΠΌ Ρ„Π°ΠΉΠ»Π΅.
    • Π‘ΠΎΠ»ΡŒΡˆΠΎΠ΅ ΠΈ Π΄Ρ€ΡƒΠΆΠ΅Π»ΡŽΠ±Π½ΠΎΠ΅ сообщСство, Π»Π΅Π³ΠΊΠΎ Π½Π°ΠΉΡ‚ΠΈ ΠΎΡ‚Π²Π΅Ρ‚Ρ‹ Π½Π° всС вопросы.
    • ΠŸΡ€ΠΎΡΡ‚ΠΎ ΠΈΠ·ΡƒΡ‡Π°Ρ‚ΡŒ. Π˜Π΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉ Π²Ρ‹Π±ΠΎΡ€ для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ… Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠΎΠ².
    • ΠŸΡ€Π΅ΠΏΡ€ΠΎΡ†Π΅ΡΡΠΎΡ€ SASS.

    Semantic UI

    Π€Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ, ΠΊΠ°ΠΊ слСдуСт ΠΈΠ· названия, Ρ‚Ρ€Π΅ΠΏΠ΅Ρ‚Π½ΠΎ относится ΠΊ сСмантикС интСрфСйсов. Π’ Semantic UI 3000 настраиваСмых ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Ρ… ΠΈ 50 ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² для создания сайтов.

    Semantic UI – Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ для создания интСрфСйсов, понятных ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ

    Π“Π»Π°Π²Π½Ρ‹Π΅ Ρ„ΠΈΡ‡ΠΈ Semantic UI:

    • Π˜Π½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΡ с React, Angular, Meteor, Ember ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄-инструмСнтами. Semantic UI Π»Π΅Π³ΠΊΠΎ ввСсти Π² ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚, Π½Π΅ пСрСписывая Π΅Π³ΠΎ Π·Π°Π½ΠΎΠ²ΠΎ.
    • «ЧСловСкопонятный» HTML, ΡƒΠΏΠΎΡ€ Π½Π° сСмантику Π²Π΅Π±Π°, Π»Π΅Π³ΠΊΠΎ Ρ‡ΠΈΡ‚Π°Π΅ΠΌΡ‹Π΅ ΠΈΠΌΠ΅Π½Π° классов.
    • ΠšΡ€Π°ΡΠΈΠ²Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Β«ΠΈΠ· ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈΒ». Π”Π°ΠΆΠ΅ нСкастомизированный Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ выглядит прСвосходно.
    • Π¨ΠΈΡ€ΠΎΠΊΠΈΠΉ простор для настройки.
    • Π˜Π½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятный JavaScript.

    UI Kit

    Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Π΄ΠΎΠ±Ρ€ΠΎΡ‚Π½Ρ‹ΠΉ CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ с классичСским Π½Π°Π±ΠΎΡ€ΠΎΠΌ полСзностСй ΠΈ удобств. НСбольшой Ρ€Π°Π·ΠΌΠ΅Ρ€, встроСнныС интСрфСйсныС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° прСпроцСссоров, отзывчивая сСтка ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ кастомизации – всё это UI Kit.

    UI Kit – чистый ΠΊΠΎΠ΄ ΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΠ·ΠΌ

    Π“Π»Π°Π²Π½Ρ‹Π΅ Ρ„ΠΈΡ‡ΠΈ UI Kit:

    • Минимализм. Π€Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ поощряСт созданиС чистого ΠΊΠΎΠ΄Π° ΠΈ ясных интСрфСйсов.
    • ΠžΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ Π½Π°Π±ΠΎΡ€ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΈΠ· ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ с шаблонами использования, ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌΠΈ ΠΌΠ΅Ρ‚ΠΎΠ΄Π°ΠΌΠΈ ΠΈ возмоТностями кастомизации.
    • ΠŸΡ€Π΅ΠΏΡ€ΠΎΡ†Π΅ΡΡΠΎΡ€Ρ‹ LESS ΠΈ SASS.

    Materialize CSS

    Π”Π΅Ρ‚ΠΈΡ‰Π΅ Google появилось Π½Π° свСт Π² 2014 ΠΈ Π΄ΠΎ сих ΠΏΠΎΡ€ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ Π»ΠΈΠ΄ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠ΅ мСста Π² Π³ΠΎΠ½ΠΊΠ΅ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ². Materialize CSS ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Π½Π°Π±ΠΎΡ€ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… ΠΊ использованию ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Π² стилС Material Design.

    Materialize CSS – соврСмСнный Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ, основанный Π½Π° Material Design

    Π“Π»Π°Π²Π½Ρ‹Π΅ Ρ„ΠΈΡ‡ΠΈ Materialize CSS:

    • Material Design. Π­Ρ‚ΠΎ ΠΏΠΎ ΠΏΡ€Π°Π²Ρƒ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· самых популярных языков Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π² ΠΌΠΈΡ€Π΅.
    • Π€Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ сСтку Bootstrap. МоТно Π½Π΅ Ρ€Π°Π·Π±ΠΈΡ€Π°Ρ‚ΡŒΡΡ Π² Π½ΠΎΠ²Ρ‹Ρ… концСпциях.
    • ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… мСню.
    • ΠŸΡ€Π΅ΠΏΡ€ΠΎΡ†Π΅ΡΡΠΎΡ€ SASS.

    Milligram

    Один ΠΈΠ· самых ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Π½Ρ‹Ρ… CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ². Π’ сТатом Π²ΠΈΠ΄Π΅ Milligram вСсит всСго 2Кб. Но ΠΌΠ°Π», Π΄Π° ΡƒΠ΄Π°Π» – Π² вашСм распоряТСнии ΠΏΠΎΠ»Π½Ρ‹ΠΉ Π½Π°Π±ΠΎΡ€ инструмСнтов Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠ°.

    Milligram – ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Π½Ρ‹ΠΉ CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ.

    Π“Π»Π°Π²Π½Ρ‹Π΅ Ρ„ΠΈΡ‡ΠΈ Milligram:

    • МалСнький Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ„Π°ΠΉΠ»Π°.
    • ΠšΠ»Π°ΡΡΠ½Ρ‹Π΅ Ρ‚Π΅ΠΌΡ‹.

    Skeleton

    ВсСго 400 строк ΠΊΠΎΠ΄Π° – Π° Π½Π° Π²Ρ‹Ρ…ΠΎΠ΄Π΅ ΠΌΡ‹ ΠΈΠΌΠ΅Π΅ΠΌ ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½Ρ‹ΠΉ CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ. Skeleton – это Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π»Π΅ΠΉΠ°ΡƒΡ‚Ρ‹, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ Π±Ρ‹ ΠΏΠΎΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ. Π—Π΄Π΅ΡΡŒ вСсь стандартный Π½Π°Π±ΠΎΡ€: Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠ°, Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, Ρ„ΠΎΡ€ΠΌΡ‹, ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ Ρ‚. Π΄. МоТно Π±Ρ€Π°Ρ‚ΡŒ ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½Ρ‹ΠΉ Π²Π΅Π±-сайт.

    Skeleton – ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉ CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ для Π½Π΅Π±ΠΎΠ»ΡŒΡˆΠΈΡ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ

    Π“Π»Π°Π²Π½Ρ‹Π΅ Ρ„ΠΈΡ‡ΠΈ Skeleton:

    • Волько самая нСобходимая Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ.
    • ΠŸΡ€ΠΎΡΡ‚ΠΎ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ.

    Tailwind CSS

    НизкоуровнСвый CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ, ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ всС возмоТности кастомизации. Tailwind CSS ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для нСстандартных Π΄ΠΈΠ·Π°ΠΉΠ½-Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ. Если Π²Ρ‹ ΠΈΠΌΠ΅Π΅Ρ‚Π΅ прСдставлСниС ΠΎ ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠΈ Π°Ρ‚ΠΎΠΌΠ°Ρ€Π½ΠΎΠ³ΠΎ CSS, это ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ. Π€Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ написан Π½Π° PostCSS ΠΈ конфигурируСтся Π½Π° JS.

    Tailwind CSS – Π½ΠΈΠ·ΠΊΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹ΠΉ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ с мноТСством ΡƒΡ‚ΠΈΠ»ΠΈΡ‚Π°Ρ€Π½Ρ‹Ρ… классов

    Π“Π»Π°Π²Π½Ρ‹Π΅ Ρ„ΠΈΡ‡ΠΈ Tailwind CSS:

    • ΠœΠ½ΠΎΠΆΠ΅ΡΡ‚Π²ΠΎ ΡƒΡ‚ΠΈΠ»ΠΈΡ‚Π°Ρ€Π½Ρ‹Ρ… классов. ΠŸΡ€ΠΎΡΡ‚Π°Ρ кастомизация элСмСнтов.
    • Набор Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΎΠΏΡ†ΠΈΠΉ.

    Spectre

    Spectre – классичСский ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π½Ρ‹ΠΉ CSS-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ с элСгантным Π΄Π΅Ρ„ΠΎΠ»Ρ‚Π½Ρ‹ΠΌ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ΠΌ.

    Spectre – элСгантный CSS-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ

    Π“Π»Π°Π²Π½Ρ‹Π΅ Ρ„ΠΈΡ‡ΠΈ Spectre:

    • Чистый CSS, Π±Π΅Π· JavaScript-ΠΊΠΎΠ΄Π°.
    • ΠŸΡ€Π΅ΠΏΡ€ΠΎΡ†Π΅ΡΡΠΎΡ€ SASS.

    Base

    Base – ΠΊΠΎΠΌΠΏΠ°ΠΊΡ‚Π½Ρ‹ΠΉ ΠΈ Π»Π΅Π³ΠΊΠΈΠΉ, Π½ΠΎ довольно ΠΌΠΎΡ‰Π½Ρ‹ΠΉ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΡ‚Π°Ρ‚ΡŒ Π½Π°Π΄Π΅ΠΆΠ½Ρ‹ΠΌ Ρ„ΡƒΠ½Π΄Π°ΠΌΠ΅Π½Ρ‚ΠΎΠΌ для Π²Π°ΡˆΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ².

    Base – Π½Π°Π΄Π΅ΠΆΠ½Ρ‹ΠΉ CSS-Ρ„ΡƒΠ½Π΄Π°ΠΌΠ΅Π½Ρ‚ для вашСго сайта

    Π“Π»Π°Π²Π½Ρ‹Π΅ Ρ„ΠΈΡ‡ΠΈ Base:

    • Основан Π½Π° послСднСй вСрсии Normalize.css.
    • Π Π°Π·Π±ΠΈΡ‚ Π½Π° нСзависимыС Π΄Ρ€ΡƒΠ³ ΠΎΡ‚ Π΄Ρ€ΡƒΠ³Π° ΠΌΠΎΠ΄ΡƒΠ»ΠΈ.

    Picnic CSS

    НСбольшая Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° статичСских ΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ². Picnic Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя сСтку, Ρ„ΠΎΡ€ΠΌΡ‹, Ρ‚Π°Π±Ρ‹, Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки, ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ элСмСнты ΠΈ Ρ‚. ΠΏ.

    Picnic – Π»Π΅Π³ΠΊΠΈΠΉ CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ с симпатичным Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ

    Π“Π»Π°Π²Π½Ρ‹Π΅ Ρ„ΠΈΡ‡ΠΈ Picnic CSS:

    1. Π‘ΠΈΠΌΠΏΠ°Ρ‚ΠΈΡ‡Π½Ρ‹ΠΉ Π΄Π΅Ρ„ΠΎΠ»Ρ‚Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½.
    2. НастраиваСмыС ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅.
    3. ΠŸΡ€Π΅ΠΏΡ€ΠΎΡ†Π΅ΡΡΠΎΡ€ Sass.

    Mustard UI

    Π˜Ρ‰Π΅Ρ‚Π΅ CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ для Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΎΠ²? Π’Ρ‹ Π΅Π³ΠΎ нашли. ΠžΠΏΠ΅Π½ΡΠΎΡ€ΡΠ½Ρ‹ΠΉ Π»Π΅Π³ΠΊΠΈΠΉ Mustard создан ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ… Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ².

    Mustard UI – CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ… Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠΎΠ²

    Π“Π»Π°Π²Π½Ρ‹Π΅ Ρ„ΠΈΡ‡ΠΈ Mustard UI:

    1. ΠžΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΌΠΎΠ΄ΡƒΠ»ΠΈ. МоТно Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½ΡƒΠΆΠ½Ρ‹.
    2. ΠžΡ‚Π»ΠΈΡ‡Π½Π°Ρ докумСнтация.
    3. МалСнький Ρ€Π°Π·ΠΌΠ΅Ρ€.

    Dead Simple Grid

    ΠžΠ΄Π½ΠΎΠ·Π½Π°Ρ‡Π½Ρ‹ΠΉ Ρ‡Π΅ΠΌΠΏΠΈΠΎΠ½ Π² Π½ΠΎΠΌΠΈΠ½Π°Ρ†ΠΈΠΈ Π‘Π°ΠΌΡ‹ΠΉ ΠΊΡ€ΠΎΡ…ΠΎΡ‚Π½Ρ‹ΠΉ CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ. Dead Simple Grid – это, ΠΏΠΎ Π±ΠΎΠ»ΡŒΡˆΠΎΠΌΡƒ счСту, ΠΈ Π½Π΅ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ вовсС. ВСсит всСго 250 Π±Π°ΠΉΡ‚(!) ΠΈ состоит лишь ΠΈΠ· Π΄Π²ΡƒΡ… классов. ВсС, Ρ‡Ρ‚ΠΎ ΡƒΠΌΠ΅Π΅Ρ‚ Dead Simple Grid, – ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ сСтки, Π½ΠΎ ΠΈΠ½ΠΎΠ³Π΄Π° Ρ‚ΠΎΠ»ΡŒΠΊΠΎ это Π²Π°ΠΌ ΠΈ трСбуСтся.

    Dead Simple Grid – убийствСнно простой инструмСнт для построСния сСток

    Π“Π»Π°Π²Π½Ρ‹Π΅ Ρ„ΠΈΡ‡ΠΈ Dead Simple Grid:

    • ЭлСмСнтарная структура. Вряд Π»ΠΈ Π²Π°ΠΌ Π²ΠΎΠΎΠ±Ρ‰Π΅ потрСбуСтся докумСнтация.
    • АдаптивныС ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΠΈ фиксированныС отступы.
    • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° бСсконСчной влоТСнности.

    Бонус

    Π’ качСствС Π½Π°Π³Ρ€Π°Π΄Ρ‹ Π·Π° ΠΏΡ€ΠΎΡ‡Ρ‚Π΅Π½ΠΈΠ΅ Π΅Ρ‰Π΅ 3 интСрСсных CSS Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π²Π°ΠΌ ΠΏΡ€ΠΈΠ³ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ:

    • Animate.css. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ CSS Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ с ΠΎΠ³Ρ€ΠΎΠΌΠ½Ρ‹ΠΌ Π½Π°Π±ΠΎΡ€ΠΎΠΌ эффСктов.
    • NES.css. Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½Π½Ρ‹Ρ… Π² 8-Π±ΠΈΡ‚Π½ΠΎΠΌ стилС.
    • Simple Grid. ΠšΠ»Π°ΡΡΠΈΡ‡Π΅ΡΠΊΠ°Ρ 12-колоночная сСтка для быстрого построСния ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ².

    Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π²Ρ‹Π±ΠΎΡ€?

    CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽΡ‚ ΠΌΠ½ΠΎΠ³ΠΎ Π³ΠΎΡ‚ΠΎΠ²ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°, ΡƒΠΆΠ΅ ΠΏΡ€ΠΎΠ²Π΅Ρ€Π΅Π½Π½ΠΎΠ³ΠΎ Π² Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… ΠΈ Π½Π° Ρ€Π°Π·Π½Ρ‹Ρ… Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡΡ…, Ρ‡Π΅ΠΌ Π·Π΄ΠΎΡ€ΠΎΠ²ΠΎ экономят врСмя. ΠŸΡ€ΠΈ Π²Ρ‹Π±ΠΎΡ€Π΅ Π½ΡƒΠΆΠ½ΠΎ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒΡΡ Π½Π΅ вопросом Β«ΠΊΠ°ΠΊΠΎΠΉ ΠΈΠ· этих инструмСнтов Π»ΡƒΡ‡ΡˆΠ΅?Β», Π° Β«ΠΊΠ°ΠΊΠΎΠΉ ΠΈΠ· Π½ΠΈΡ… Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для ΠΌΠΎΠ΅Π³ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°?Β».

    ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ Π·Π½Π°Ρ‡Π°Ρ‰ΠΈΠ΅ Ρ„Π°ΠΊΡ‚ΠΎΡ€Ρ‹:

    • Π Π°Π·ΠΌΠ΅Ρ€ Ρ„Π°ΠΉΠ»ΠΎΠ² Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ° ΠΈΠ»ΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ.
    • НСобходимый Π½Π°Π±ΠΎΡ€ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ².
    • НаличиС ΠΈΠ»ΠΈ отсутствиС JavaScript-сопровоТдСния.
    • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° прСпроцСссоров.
    • ΠšΠΎΠ½Ρ†Π΅ΠΏΡ‚ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄.

    Π Π°Π·ΠΎΠ±Ρ€Π°Π²ΡˆΠΈΡΡŒ Π² своих потрСбностях, Π²Ρ‹ Π±Π΅Π· Ρ‚Ρ€ΡƒΠ΄Π° ΠΏΠΎΠ΄Π±Π΅Ρ€Ρ‘Ρ‚Π΅ CSS Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ. Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π΄Π°ΠΆΠ΅ ΠΈΠ· нашСго списка.

    Π‘ ΠΊΠ°ΠΊΠΈΠΌΠΈ CSS-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ°ΠΌΠΈ Π²Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚Π΅? ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚Π΅ΡΡŒ впСчатлСниями!

    W3.CSS ΠœΠ°ΠΊΠ΅Ρ‚

    ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΠΌΠ°ΠΊΠ΅Ρ‚ W3.CSS.

    ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΠΌΠ°ΠΊΠ΅Ρ‚ W3.CSS.

    ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΠΌΠ°ΠΊΠ΅Ρ‚ W3.CSS.

    ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΠΌΠ°ΠΊΠ΅Ρ‚ W3.CSS.


    ΠšΠ»Π°ΡΡΡ‹ ΠΌΠ°ΠΊΠ΅Ρ‚Π° W3.CSS

    W3.CSS вСрсии 2.90 / 2.91 прСдставил ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ классы для «ΡΡ‚ΠΎΠ»Π±Ρ‡Π°Ρ‚ΠΎΠΉ» ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ:

    Класс ОписаниС
    w3-ячСйка-строка ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ для ячССк (столбцов).
    W3-ячСйка ΠœΠ°ΠΊΠ΅Ρ‚ ячСйки (столбСц).
    W3-Cell-Top Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π΅Ρ‚ содСрТимоС ΠΏΠΎ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌΡƒ ΠΊΡ€Π°ΡŽ ячСйки (столбца).
    w3-ячСйка-срСдний Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π΅Ρ‚ содСрТимоС ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ посСрСдинС ячСйки (столбца).
    w3-ячСйка-Π΄Π½ΠΎ Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π΅Ρ‚ содСрТимоС ΠΏΠΎ Π½ΠΈΠΆΠ½Π΅ΠΉ части ячСйки (столбца).
    w3-ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ ДобавляСт Π² ячСйку (столбСц) ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ рСагирования сначала Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ устройства.
    ДисплСи элСмСнты ΠΊΠ°ΠΊ Π±Π»ΠΎΡ‡Π½Ρ‹Π΅ элСмСнты Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах.

    ΠšΠ»Π°ΡΡΡ‹ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ Π·Π°ΠΌΠ΅Π½ΡΡŽΡ‚ ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠΈΠ΅ классы ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ.

    Новый классификатор раскладки Π±ΠΎΠ»Π΅Π΅ унивСрсалСн ΠΈ прост Π² использовании.

    Π£ΡΡ‚Π°Ρ€Π΅Π²ΡˆΠΈΠ΅ классы ΠΌΠ°ΠΊΠ΅Ρ‚Π° пСрСчислСны Π²Π½ΠΈΠ·Ρƒ этой страницы.


    Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ Π±Π»ΠΎΠΊΠ° HTML

    ΠŸΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ Π±Π»ΠΎΡ‡Π½Ρ‹Π΅ элСмСнты HTML (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€,

    ) ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ ΠΊΠ°ΠΊ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ Π±Π»ΠΎΠΊΠΈ:

    ΠŸΡ€ΠΈΠΌΠ΅Ρ€


    ΠŸΡ€ΠΈΠ²Π΅Ρ‚, W3.ΠœΠ°ΠΊΠ΅Ρ‚ CSS.


    ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΠΌΠ°ΠΊΠ΅Ρ‚ W3.CSS.


    ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам »



    ΠœΠ°ΠΊΠ΅Ρ‚ ячССк

    Класс w3-cell пСрСопрСдСляСт элСмСнты Π±Π»ΠΎΠΊΠ° для Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ отобраТСния (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ячССк Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹):

    ΠŸΡ€ΠΈΠΌΠ΅Ρ€


    ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΠΌΠ°ΠΊΠ΅Ρ‚ W3.CSS.


    ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΠΌΠ°ΠΊΠ΅Ρ‚ W3.CSS.


    ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам »


    ΠœΠ°ΠΊΠ΅Ρ‚ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°

    w3-cell-row — это ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ для ячССк (столбцов).

    Π¨ΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° w3-cell-row опрСдСляСт ΠΎΠ±Ρ‰ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ всСх содСрТащиСся ΠΊΠ»Π΅Ρ‚ΠΊΠΈ.

    Π¨ΠΈΡ€ΠΈΠ½Π° ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ 100%:

    ΠŸΡ€ΠΈΠΌΠ΅Ρ€


    ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΠΌΠ°ΠΊΠ΅Ρ‚ W3.CSS.



    ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΠΌΠ°ΠΊΠ΅Ρ‚ W3.CSS.


    ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам »

    Если Π²Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚Π΅ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° ячСйки, это ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ ΠΎΠ±Ρ‰ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Π° Π²ΠΌΠ΅Ρ‰Π°Π΅ΠΌΡ‹Ρ… ячССк:

    ΠŸΡ€ΠΈΠΌΠ΅Ρ€


    ЗдравствуйтС, W3.ΠœΠ°ΠΊΠ΅Ρ‚ CSS.



    ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΠΌΠ°ΠΊΠ΅Ρ‚ W3.CSS.


    ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам »


    Π―Ρ‡Π΅ΠΉΠΊΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚Π°

    ΡΠ°ΠΌΠΎΡ€Π΅Π³ΡƒΠ»ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠ΅ΡΡ

    Класс w3-cell ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΡ‡Π΅Π½ΡŒ ΠΊΡ€Π°ΡΠΈΠ²ΡƒΡŽ Π²ΡΡ‚Ρ€ΠΎΠ΅Π½Π½ΡƒΡŽ установочный стандарт. РасполоТСнныС рядом элСмСнты автоматичСски ΠΏΠΎΠ΄ΡΡ‚Ρ€Π°ΠΈΠ²Π°ΡŽΡ‚ΡΡ ΠΏΠΎΠ΄ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ:

    ЗдравствуйтС, W3.ΠœΠ°ΠΊΠ΅Ρ‚ CSS. ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΠΌΠ°ΠΊΠ΅Ρ‚ W3.CSS.

    ΠŸΡ€ΠΈΠΌΠ΅Ρ€


    ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΠΌΠ°ΠΊΠ΅Ρ‚ W3.CSS.


    ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΠΌΠ°ΠΊΠ΅Ρ‚ W3.CSS. ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΠΌΠ°ΠΊΠ΅Ρ‚ W3.CSS.


    ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам »


    Π Π΅Π³ΡƒΠ»ΠΈΡ€ΠΎΠ²ΠΊΠ° ячССк ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΠΏΠΎ высотС

    Π±ΠΎΠΊ ΠΎ Π±ΠΎΠΊ w3-cell элСмСнты Π±ΡƒΠ΄ΡƒΡ‚ Ρ‚Π°ΠΊΠΆΠ΅ автоматичСски настраиваСтся Π½Π° ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡƒΡŽ высоту:

    ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΠΌΠ°ΠΊΠ΅Ρ‚ W3.CSS.

    ЗдравствуйтС, W3.ΠœΠ°ΠΊΠ΅Ρ‚ CSS.

    ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΠΌΠ°ΠΊΠ΅Ρ‚ W3.CSS.

    ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΠΌΠ°ΠΊΠ΅Ρ‚ W3.CSS.

    ΠŸΡ€ΠΈΠΌΠ΅Ρ€


    ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΠΌΠ°ΠΊΠ΅Ρ‚ W3.CSS.


    ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΠΌΠ°ΠΊΠ΅Ρ‚ W3.CSS.


    ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΠΌΠ°ΠΊΠ΅Ρ‚ W3.CSS.


    ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΠΌΠ°ΠΊΠ΅Ρ‚ W3.CSS.


    ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΠΌΠ°ΠΊΠ΅Ρ‚ W3.CSS.


    ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам »


    Адаптивный ΠΌΠ°ΠΊΠ΅Ρ‚

    Класс w3-mobile добавляСт ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π² ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ ΠΊ Π»ΡŽΠ±ΠΎΠΌΡƒ HTML-элСмСнт.

    ΠŸΡ€ΠΈ использовании вмСстС с w3-cell ΠΎΠ½ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ столбцы ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎ Π½Π° ΠΌΠ°Π»Π΅Π½ΡŒΠΊΠΈΡ… экранах / ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π°Ρ… ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎ Π½Π° срСдних / Π±ΠΎΠ»ΡŒΡˆΠΈΡ… экранах.

    На срСдних ΠΈ Π±ΠΎΠ»ΡŒΡˆΠΈΡ… экранах:

    На ΠΌΠ°Π»Π΅Π½ΡŒΠΊΠΈΡ… экранах:

    ΠŸΡ€ΠΈΠΌΠ΅Ρ€


    ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΠΌΠ°ΠΊΠ΅Ρ‚ W3.CSS.




    ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΠΌΠ°ΠΊΠ΅Ρ‚ W3.CSS.




    ЗдравствуйтС W3.ΠœΠ°ΠΊΠ΅Ρ‚ CSS.


    ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам »


    ΠŸΡ€ΠΎΡΡ‚ΠΎΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅

    Класс w3-cell ΡƒΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста.

    БущСствуСт 3 Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… класса выравнивания:

    • w3-cell-top (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ)
    • w3-cell-срСдний
    • w3-ячСйка-Π΄Π½ΠΎ

    ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΠΌΠ°ΠΊΠ΅Ρ‚ W3.CSS.

    ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΠΌΠ°ΠΊΠ΅Ρ‚ W3.CSS.

    ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΠΌΠ°ΠΊΠ΅Ρ‚ W3.CSS.

    ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΠΌΠ°ΠΊΠ΅Ρ‚ W3.CSS.

    ΠŸΡ€ΠΈΠΌΠ΅Ρ€


    ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΠΌΠ°ΠΊΠ΅Ρ‚ W3.CSS.
    ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΠΌΠ°ΠΊΠ΅Ρ‚ W3.CSS.
    ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΠΌΠ°ΠΊΠ΅Ρ‚ W3.CSS.
    ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΠΌΠ°ΠΊΠ΅Ρ‚ W3.CSS.


    ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΠΌΠ°ΠΊΠ΅Ρ‚ W3.CSS.



    ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΠΌΠ°ΠΊΠ΅Ρ‚ W3.CSS.


    ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам »

    Класс w3-cell-row растягиваСт элСмСнты ΠΏΠΎ ΡˆΠΈΡ€ΠΈΠ½Π΅ страницы:

    ЗдравствуйтС, W3.ΠœΠ°ΠΊΠ΅Ρ‚ CSS.

    ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΠΌΠ°ΠΊΠ΅Ρ‚ W3.CSS.

    ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΠΌΠ°ΠΊΠ΅Ρ‚ W3.CSS.

    ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΠΌΠ°ΠΊΠ΅Ρ‚ W3.CSS.

    ΠŸΡ€ΠΈΠΌΠ΅Ρ€


    ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΠΌΠ°ΠΊΠ΅Ρ‚ W3.CSS.


    ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΠΌΠ°ΠΊΠ΅Ρ‚ W3.CSS.


    ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΠΌΠ°ΠΊΠ΅Ρ‚ W3.CSS.


    ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΠΌΠ°ΠΊΠ΅Ρ‚ W3.CSS.



    ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΠΌΠ°ΠΊΠ΅Ρ‚ W3.CSS.



    ЗдравствуйтС, W3.ΠœΠ°ΠΊΠ΅Ρ‚ CSS.


    ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам »


    Π£ΡΡ‚Π°Ρ€Π΅Π²ΡˆΠΈΠ΅ классы ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ Ρ‚Π°Π±Π»ΠΈΡ† W3.CSS

    w3-ΠΌΠ°ΠΊΠ΅Ρ‚-ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ вмСсто этого w3-cell-row.
    w3-layout-ряд
    w3-ΠΌΠ°ΠΊΠ΅Ρ‚-ячСйка Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π²Π·Π°ΠΌΠ΅Π½ w3-cell.
    w3-layout-top Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ вмСсто этого w3-cell-top.
    w3-ΠΌΠ°ΠΊΠ΅Ρ‚-срСдний ВмСсто этого ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ w3-cell-middle.
    w3-layout-Π΄Π½ΠΎ Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ вмСсто этого w3-cell-bottom.
    w3-layout-col Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ вмСсто этого w3-mobile.

    Π£ΡΡ‚Π°Ρ€Π΅Π²ΡˆΠΈΠ΅ классы Π±ΡƒΠ΄ΡƒΡ‚ ΡƒΠ΄Π°Π»Π΅Π½Ρ‹ ΠΈΠ· W3.CSS Π² вСрсии 4.0.


    ,

    CSS свойство table-layout


    ΠŸΡ€ΠΈΠΌΠ΅Ρ€

    Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌΡ‹ раскладки Ρ‚Π°Π±Π»ΠΈΡ†:

    table.a {
    table-layout: auto;
    ΡˆΠΈΡ€ΠΈΠ½Π°: 180 пиксСлСй;
    }

    table.b {
    table-layout: фиксированный;
    ΡˆΠΈΡ€ΠΈΠ½Π°: 180 пиксСлСй;
    }

    ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам »

    ΠžΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΈ использованиС

    Бвойство table-layout опрСдСляСт Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для размСщСния ячССк, строк ΠΈ столбцов Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹.

    Π‘ΠΎΠ²Π΅Ρ‚: ОсновноС прСимущСство table-layout: фиксированноС; это Ρ‡Ρ‚ΠΎ Ρ‚Π°Π±Π»ΠΈΡ†Π° отрисовываСтся Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ быстрСС. На Π±ΠΎΠ»ΡŒΡˆΠΈΡ… Ρ‚Π°Π±Π»ΠΈΡ†Π°Ρ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π½Π΅ увидят Π½ΠΈΠΊΠ°ΠΊΠΎΠΉ части table, ΠΏΠΎΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π½Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ всю Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ. Π˜Ρ‚Π°ΠΊ, Ссли Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ table-layout: исправлСно, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ Π²Π΅Ρ€Ρ…Π½ΡŽΡŽ Ρ‡Π°ΡΡ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, ΠΏΠΎΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ загруТаСтся ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ ΠΎΡΡ‚Π°Π»ΡŒΠ½ΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹. БоздаСтся Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ страница Π·Π°Π³Ρ€ΡƒΠΆΠ°Π΅Ρ‚ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ быстрСС!

    Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: Π°Π²Ρ‚ΠΎ
    УнаслСдовано: Π½Π΅Ρ‚
    Анимация: Π½Π΅Ρ‚.ΠŸΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ ΠΎ animatable
    ВСрсия: CSS2
    Бинтаксис JavaScript: ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ .style.tableLayout = «fixed» ΠŸΠΎΠΏΡ‹Ρ‚Π°ΠΉΡΡ

    ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°

    Числа Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅ ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ ΠΏΠ΅Ρ€Π²ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‰ΡƒΡŽ свойство.

    ΠžΠ±ΡŠΠ΅ΠΊΡ‚
    стол-ΠΌΠ°ΠΊΠ΅Ρ‚ 14.0 5,0 1,0 1,0 7,0


    Бинтаксис CSS

    ΠΌΠ°ΠΊΠ΅Ρ‚ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹: Π°Π²Ρ‚ΠΎ | фиксированный | Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΉ | наслСдованиС;

    ЗначСния собствСнности

    Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ОписаниС Π˜Π³Ρ€Π°ΠΉ
    Π°Π²Ρ‚ΠΎ Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌ автоматичСской ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ Ρ‚Π°Π±Π»ΠΈΡ†.Π¨ΠΈΡ€ΠΈΠ½Π° столбца задаСтся самым ΡˆΠΈΡ€ΠΎΠΊΠΈΠΌ Π½Π΅Π±ΡŒΡŽΡ‰ΠΈΠΌΡΡ содСрТимым Π² ячСйках. ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚ Π˜Π³Ρ€Π°ΠΉ Β»
    фиксированный Π—Π°Π΄Π°Π΅Ρ‚ Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌ фиксированного ΠΌΠ°ΠΊΠ΅Ρ‚Π° Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹. УстанавливаСтся ΡˆΠΈΡ€ΠΈΠ½Π° Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΈ столбца. Π½Π° ΡˆΠΈΡ€ΠΈΠ½Ρƒ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΈ столбца ΠΈΠ»ΠΈ Π½Π° ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΏΠ΅Ρ€Π²ΠΎΠΉ строки ячССк. Π―Ρ‡Π΅ΠΉΠΊΠΈ Π² Π΄Ρ€ΡƒΠ³ΠΈΡ… строках Π½Π΅ Π²Π»ΠΈΡΡŽΡ‚ Π½Π° ΡˆΠΈΡ€ΠΈΠ½Ρƒ столбцов. Если Π½Π΅Ρ‚ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Π² ΠΏΠ΅Ρ€Π²ΠΎΠΉ строкС ΡˆΠΈΡ€ΠΈΠ½Π° столбцов дСлится ΠΏΠΎΡ€ΠΎΠ²Π½Ρƒ ΠΏΠΎ Ρ‚Π°Π±Π»ΠΈΡ†Π΅, нСзависимо ΠΎΡ‚ содСрТимого ячССк Π˜Π³Ρ€Π°ΠΉ Β»
    Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΉ УстанавливаСт для этого свойства Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.Π§ΠΈΡ‚Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹Π΅ Π˜Π³Ρ€Π°ΠΉ Β»
    наслСдство НаслСдуСт это свойство ΠΎΡ‚ своСго Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта. Π§ΠΈΡ‚Π°Ρ‚ΡŒ ΠΏΡ€ΠΎ наслСдство

    БвязанныС страницы

    Π£Ρ‡Π΅Π±Π½ΠΈΠΊ

    CSS: Ρ‚Π°Π±Π»ΠΈΡ†Π° CSS

    Бсылка Π½Π° HTML DOM: свойство tableLayout


    ,

    CSS-сСтка


    Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ

    МСню

    Основной

    ΠŸΡ€Π°Π²Ρ‹ΠΉ

    НиТний ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ»

    ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам »


    Π‘Ρ…Π΅ΠΌΠ° сСтки

    ΠœΠΎΠ΄ΡƒΠ»ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚Π° сСтки CSS ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ систСму ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π½Π° основС сСтки с строками ΠΈ столбцы, Ρ‡Ρ‚ΠΎ ΡƒΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ созданиС Π²Π΅Π±-страниц Π±Π΅Π· использования ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠΎΠ² ΠΈ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅.


    ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°

    Бвойства сСтки ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ Π²ΠΎ всСх соврСмСнных Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ….


    Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ сСтки

    ΠœΠ°ΠΊΠ΅Ρ‚ сСтки состоит ΠΈΠ· Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта с ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ»ΠΈ нСсколькими Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠΌΠΈ элСмСнтами.

    ΠŸΡ€ΠΈΠΌΠ΅Ρ€


    1

    2

    3

    4

    5

    6

    7

    8

    9

    ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам »


    ΠŸΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ свойство

    Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ HTML становится ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠΌ сСтки, ΠΊΠΎΠ³Π΄Π° Π΅Π³ΠΎ свойство display установлСн Π½Π° сСтка ΠΈΠ»ΠΈ встроСнная сСтка .

    ВсС прямыС Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠ΅ элСмСнты ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° сСтки автоматичСски становятся элСмСнтами сСтки .


    ΠšΠΎΠ»ΠΎΠ½Π½Ρ‹ сСтки

    Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ Π»ΠΈΠ½ΠΈΠΈ элСмСнтов сСтки Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ столбцами .


    рядов сСтки

    Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅ Π»ΠΈΠ½ΠΈΠΈ элСмСнтов сСтки Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ строками .


    Π—Π°Π·ΠΎΡ€Ρ‹ сСтки

    ΠŸΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΊΠΈ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΌ столбцом / строкой Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ ΠΏΡ€ΠΎΠ±Π΅Π»Π°ΠΌΠΈ .

    Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π·Π°Π·ΠΎΡ€Π°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… свойств:

    сСтка-столбСц-Π·Π°Π·ΠΎΡ€
    сСтка-ряд-Π·Π°Π·ΠΎΡ€
    сСтка-Π·Π°Π·ΠΎΡ€

    ΠŸΡ€ΠΈΠΌΠ΅Ρ€

    Бвойство grid-column-gap устанавливаСт ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΠΊ ΠΌΠ΅ΠΆΠ΄Ρƒ столбцами:

    ,Ρ€Π΅ΡˆΠ΅Ρ‚Ρ‡Π°Ρ‚Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ {
    дисплСй: сСтка;
    сСтка-столбСц-ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΠΊ: 50 пиксСлСй;
    }

    ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам »

    ΠŸΡ€ΠΈΠΌΠ΅Ρ€

    Бвойство grid-row-gap устанавливаСт ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΠΊ ΠΌΠ΅ΠΆΠ΄Ρƒ строками:

    .grid-ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ {
    дисплСй: сСтка;
    сСтка-строка-ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΠΊ: 50 пиксСлСй;
    }

    ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам »

    ΠŸΡ€ΠΈΠΌΠ΅Ρ€

    Бвойство grid-gap являСтся сокращСнным свойством для grid-row-gap ΠΈ сСтка-столбСц-Π·Π°Π·ΠΎΡ€ ΠžΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹:

    ,Ρ€Π΅ΡˆΠ΅Ρ‚Ρ‡Π°Ρ‚Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ {
    дисплСй: сСтка;
    grid-gap: 50px 100px;
    }

    ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам »

    ΠŸΡ€ΠΈΠΌΠ΅Ρ€

    Бвойство grid-gap Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для установки ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»Π° ΠΌΠ΅ΠΆΠ΄Ρƒ строками ΠΈ Ρ€Π°Π·Ρ€Ρ‹Π² столбца Π² ΠΎΠ΄Π½ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅:

    .grid-ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ {
    дисплСй: сСтка;
    сСтка-Π·Π°Π·ΠΎΡ€: 50 пиксСлСй;
    }

    ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам »


    Π›ΠΈΠ½ΠΈΠΈ сСтки

    Π‘Ρ‚Ρ€ΠΎΠΊΠΈ ΠΌΠ΅ΠΆΠ΄Ρƒ столбцами Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ строками столбцов .

    Π‘Ρ‚Ρ€ΠΎΠΊΠΈ ΠΌΠ΅ΠΆΠ΄Ρƒ строками Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ строками .

    Π‘ΠΌ. НомСра строк ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠ΅Ρ‰Π΅Π½ΠΈΠΈ элСмСнта сСтки Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ сСтки:

    ΠŸΡ€ΠΈΠΌΠ΅Ρ€

    ΠŸΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚Π΅ элСмСнт сСтки Π² строку столбца 1 ΠΈ Π΄Π°ΠΉΡ‚Π΅ Π΅ΠΌΡƒ Π·Π°ΠΊΠ°Π½Ρ‡ΠΈΠ²Π°Ρ‚ΡŒΡΡ Π½Π° строкС столбца 3:

    .item1 {
    Π½Π°Ρ‡Π°Π»ΠΎ столбца сСтки: 1;
    сСтка-столбСц-ΠΊΠΎΠ½Π΅Ρ†: 3;
    }

    ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам »

    ΠŸΡ€ΠΈΠΌΠ΅Ρ€

    ΠŸΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚Π΅ элСмСнт сСтки Π² строку 1 ΠΈ Π΄Π°ΠΉΡ‚Π΅ Π΅ΠΌΡƒ Π·Π°ΠΊΠ°Π½Ρ‡ΠΈΠ²Π°Ρ‚ΡŒΡΡ Π½Π° строкС 3:

    ,ΠΏΠΎΠ·.1 {
    Π½Π°Ρ‡Π°Π»ΠΎ строки сСтки: 1;
    сСтка-ΠΊΠΎΠ½Π΅Ρ† ряда: 3;
    }

    ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам »


    ,

    table-layout — Π’Π΅Π±-Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ²

    Бвойство table-layout CSS устанавливаСт Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ для ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ

    ячССк, строк ΠΈ столбцов.

    Π˜ΡΡ…ΠΎΠ΄Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ этого ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° хранится Π² Ρ€Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠΈ GitHub. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ внСсти свой Π²ΠΊΠ»Π°Π΄ Π² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ², ΠΊΠ»ΠΎΠ½ΠΈΡ€ΡƒΠΉΡ‚Π΅ https://github.com/mdn/interactive-examples ΠΈ ΠΎΡ‚ΠΏΡ€Π°Π²ΡŒΡ‚Π΅ Π½Π°ΠΌ запрос Π½Π° пСрСнос.

    Бинтаксис

     / * ЗначСния ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… слов * /
    сСрвировка стола: Π°Π²Ρ‚ΠΎ;
    table-layout: фиксированный;
    
    / * Π“Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹Π΅ значСния * /
    ΠΌΠ°ΠΊΠ΅Ρ‚ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹: Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ;
    table-layout: Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΉ;
    table-layout: Π½Π΅ Π·Π°Π΄Π°Π½ΠΎ;
     

    ЗначСния

    Π°Π²Ρ‚ΠΎ
    По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌ автоматичСской ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ Ρ‚Π°Π±Π»ΠΈΡ†.Π¨ΠΈΡ€ΠΈΠ½Π° Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΈ Π΅Π΅ ячССк рСгулируСтся Π² соотвСтствии с содСрТимым.
    фиксированная
    Π¨ΠΈΡ€ΠΈΠ½Π° Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΈ столбца задаСтся ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ элСмСнтов Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΈ столбца ΠΈΠ»ΠΈ ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ ΠΏΠ΅Ρ€Π²ΠΎΠΉ строки ячССк. Π―Ρ‡Π΅ΠΉΠΊΠΈ Π² ΠΏΠΎΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… строках Π½Π΅ Π²Π»ΠΈΡΡŽΡ‚ Π½Π° ΡˆΠΈΡ€ΠΈΠ½Ρƒ столбцов.
    ΠŸΡ€ΠΈ использовании ΠΌΠ΅Ρ‚ΠΎΠ΄Π° «фиксированного» ΠΌΠ°ΠΊΠ΅Ρ‚Π° вся Ρ‚Π°Π±Π»ΠΈΡ†Π° ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½Π° послС Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΈ Π°Π½Π°Π»ΠΈΠ·Π° ΠΏΠ΅Ρ€Π²ΠΎΠΉ строки Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΡƒΡΠΊΠΎΡ€ΠΈΡ‚ΡŒ отрисовку ΠΏΠΎ ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с «автоматичСским» ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ, Π½ΠΎ ΠΏΠΎΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅ содСрТимоС ячСйки ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π΅ ΡƒΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒΡΡ Π² прСдоставлСнной ΡˆΠΈΡ€ΠΈΠ½Π΅ столбца.Π―Ρ‡Π΅ΠΉΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ свойство overflow , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ, Π½ΡƒΠΆΠ½ΠΎ Π»ΠΈ Π²Ρ‹Ρ€Π΅Π·Π°Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½Π½ΠΎΠ΅ содСрТимоС, Π½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ссли Ρ‚Π°Π±Π»ΠΈΡ†Π° ΠΈΠΌΠ΅Π΅Ρ‚ ΠΈΠ·Π²Π΅ΡΡ‚Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ; Π² ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС ΠΎΠ½ΠΈ Π½Π΅ ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½ΡΡŽΡ‚ ячСйки.

    Π€ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠ΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅

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

     Π°Π²Ρ‚ΠΎ | фиксированный 

    ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹

    Π’Π°Π±Π»ΠΈΡ†Ρ‹ фиксированной ΡˆΠΈΡ€ΠΈΠ½Ρ‹ с ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌ тСкста

    Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ фиксированный ΠΌΠ°ΠΊΠ΅Ρ‚ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π² сочСтании со свойством width для ограничСния ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹. Бвойство text-overflow ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для примСнСния многоточия ΠΊ словам, Π΄Π»ΠΈΠ½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… слишком Π²Π΅Π»ΠΈΠΊΠ°.Если Π±Ρ‹ ΠΌΠ°ΠΊΠ΅Ρ‚ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π±Ρ‹Π» Π°Π²Ρ‚ΠΎ , Ρ‚Π°Π±Π»ΠΈΡ†Π° ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ»Π°ΡΡŒ Π±Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ своС содСрТимоС, нСсмотря Π½Π° ΡƒΠΊΠ°Π·Π°Π½Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ .

    HTML
     <Ρ‚Π°Π±Π»ΠΈΡ†Π°>
      
    Ed Π”Π΅Ρ€Π΅Π²ΠΎ
    ΠΠ»ΡŒΠ±Π΅Ρ€Ρ‚ Π¨Π²Π΅ΠΉΡ†Π΅Ρ€
    Π”ΠΆΠ΅ΠΉΠ½ Fonda
    Уильям ШСкспир
    CSS
     стол {
      table-layout: фиксированный;
      ΡˆΠΈΡ€ΠΈΠ½Π°: 120 пиксСлСй;
      Π³Ρ€Π°Π½ΠΈΡ†Π°: сплошной красный 1px;
    }
    
    td {
    Π³Ρ€Π°Π½ΠΈΡ†Π°: 1 пиксСль сплошного синСго Ρ†Π²Π΅Ρ‚Π°;
      ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: скрыто;
    Π±Π΅Π»ΠΎΠ΅ пространство: nowrap;
    ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ тСкста: ΠΌΠ½ΠΎΠ³ΠΎΡ‚ΠΎΡ‡ΠΈΠ΅;
    } 
    Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚

    ВСхничСскиС характСристики

    Π‘ΠΎΠ²ΠΌΠ΅ΡΡ‚ΠΈΠΌΠΎΡΡ‚ΡŒ с Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ

    ΠžΠ±Π½ΠΎΠ²ΠΈΡ‚Π΅ Π΄Π°Π½Π½Ρ‹Π΅ совмСстимости Π½Π° GitHub
    Desktop Mobile
    Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome для Android Firefox для Android Opera для Android Safari на iOS Samsung Internet
    table-layout Chrome Полная ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° 14 ΠšΡ€ΠΎΠΌΠΊΠ° Полная ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° 12 Firefox Полная ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° 1 IE Полная ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° 5 ΠžΠΏΠ΅Ρ€Π° Полная ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° 7 Safari Полная ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° 1 WebView Android Полная ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° 1.5 Chrome Android Полная ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° 18 Firefox Android Полная ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° 4 ΠžΠΏΠ΅Ρ€Π° Android Полная ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° 10.1 Safari iOS Полная ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° 3 Samsung Internet Android Полная ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° 1.0

    Π›Π΅Π³Π΅Π½Π΄Π°

    Полная ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ°
    Полная ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ°

    Π‘ΠΌ. Π’Π°ΠΊΠΆΠ΅

    ,
    ΠžΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

    Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

    Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *