Головна CSS CSS для початківців
CSS для початківців

Інтернет збільшується з кожним днем. За останні рік-два сумарний обсяг веб-сторінок збільшився більш ніж у два рази. Сьогодні вже нікого не здивуєш словосполученням <домашня сторінка> або англійським словом <homepage>. Якщо раніше, створення web-сторінок було долею обраних і на просторах інтернету панували лише визнані <кити> web-дизайну, то тепер навіть мій десятирічний син у вільний від навчання час майструє потихеньку власну сторінку, збираючись розмістити її на якому-небудь безкоштовному сервері (на зразок narod.ru або boom.ru), яких за останній рік теж розвелося в Рунеті безліч. Web-конструюванням сьогодні не займається, напевно, тільки не підключений до Мережі або ледачий. Безліч людей, поблукавши по просторах Інтернету, рано чи пізно замислюються про створення власної сторінки. Для них і написана ця стаття.

Мова тут піде про <правильному> HTML для новачків, а саме - про деякі додаткові можливості, офіційно затверджених інтернет-консорціумом (http://www.w3.org/). Зокрема, про деякі можливості, що надаються динамічним HTML (DHTML). А ще точніше - про те, як за допомогою CSS (cascade style sheets, або каскадних таблиць стилів) зробити сторінку, яка буде виглядати краще, ніж сторінки, створені за допомогою <класичного> HTML, при цьому займати менше місця і, відповідно, швидше грузиться .

Мало хто з людей, вперше зважилися на створення власного web-представництва, озброюється notepad'ом або іншим текстовим редактором на зразок HomeSite. Зазвичай новачок думає в такий спосіб: <Всі свої звичні документи я створюю за допомогою програм WYSIWYG (<що бачу, то і одержую>) - тексти я створюю в MS Word, презентації - в MS PowerPoint, так візьму-но я і для створення web - сторінки подібну програму - MS FrontPage ...> Прийнявши таке рішення, новоявлений web-скульптор двічі обкрадає себе.

Перший раз - у сенсі раціонального використання web-простору. Справа в тому, що всі візуальні редактори web-сторінок, до яких належить і згаданий MS FrontPage, вставляють в створювані сторінки <відсебеньки> - безліч зайвих непотрібних тегів. Винятком, мабуть, є Macromedia Dreamweaver (за що він здобув собі заслужену популярність як серед новачків, так і серед професіоналів). Але навіть він в цьому плані не ідеальний - любить засмічувати вихідний текст лапками (у більшості випадків абсолютно непотрібними), а також вставляти символи нерозривного пробілу в самих невідповідних для цього місцях. Справедливості заради варто відзначити, що всі візуальні редактори надають користувачеві можливість працювати з вихідним кодом створюваної сторінки, але настільки улюблений багатьма FrontPage знову переробить все по-своєму, варто вам тільки перейти знову в візуальний режим.

З цього випливає, що другий раз новачок обкрадає себе саме в частині гнучкості і повноти управління створюваним вмістом сторінки - візуальні редактори не надають такої свободи творчості, яку надасть вам робота безпосередньо з вихідним кодом створюваної сторінки.

Ну, а тепер перейдемо безпосередньо до справи - до створення красивих і невеликих web-сторінок за допомогою каскадних таблиць стилів (у подальшому тексті я буду вживати їх скорочена назва - CSS). Передбачається, що ви, дорогі читачі, прочитавши вступ, погодилися зі мною, відмовилися від візуальних редакторів, добули книгу з HTML, вивчили хоча б невелику кількість основних тегів і атрибутів і палко бажаєте довідатися, що ж таке CSS і з чим його їдять.

 

 
© 2008-2013 PHPist