http://htmlbook.at.ua/ Sat, 20 Aug 2011 10:34:33 GMT uCoz Web-Service овле овле https://htmlbook.at.ua/news/ololo/2011-08-20-34 Підручник HTML anton https://htmlbook.at.ua/news/ololo/2011-08-20-34 Sat, 20 Aug 2011 10:34:33 GMT W3C це <a href="http://www.w3.org/" target="_blank">World Wide Web Consortium</a>, незалежна організація з розробки стандартів кодів Internet (наприклад, HTML, CSS, XML та ін.) Microsoft, The Mozilla Foundation та багато інших є членами W3C і працюють за угодою про перспективи розвитку цих стандартів. <br><br> Якщо ви вже небагато працюєте в сфері web-дизайну, то, ймовірно, знаєте, що сторінки можуть виглядати по-різному в різних браузерах. Це може заподіювати чималі незручності і віднімати масу часу при створенні сторінок, які будуть проглядатися в Mozilla, Internet Explorer, Opera і у всіх інших існуючих браузерах. <br><br> Ідея стандартизації в тому, щоб укласти угоду про розвиток web-технологій. Це означає, що, діючи в рамках стандартів, web-розробник може бути впевнений, що він працює в стилі, який буде універсальним для різних платформ. <b>Тому ми рекомендуємо, щоб ви стежили за роботою W3C і перевіряли ваш CSS на відповідність стандарту.</b> <h2>CSS validator / валідатор</h2> ... W3C це <a href="http://www.w3.org/" target="_blank">World Wide Web Consortium</a>, незалежна організація з розробки стандартів кодів Internet (наприклад, HTML, CSS, XML та ін.) Microsoft, The Mozilla Foundation та багато інших є членами W3C і працюють за угодою про перспективи розвитку цих стандартів. <br><br> Якщо ви вже небагато працюєте в сфері web-дизайну, то, ймовірно, знаєте, що сторінки можуть виглядати по-різному в різних браузерах. Це може заподіювати чималі незручності і віднімати масу часу при створенні сторінок, які будуть проглядатися в Mozilla, Internet Explorer, Opera і у всіх інших існуючих браузерах. <br><br> Ідея стандартизації в тому, щоб укласти угоду про розвиток web-технологій. Це означає, що, діючи в рамках стандартів, web-розробник може бути впевнений, що він працює в стилі, який буде універсальним для різних платформ. <b>Тому ми рекомендуємо, щоб ви стежили за роботою W3C і перевіряли ваш CSS на відповідність стандарту.</b> <h2>CSS validator / валідатор</h2> Для полегшення перевірки на відповідність <a href="http://www.w3.org/TR/REC-CSS2/" target="_blank">CSS-стандарту</a>, W3C створив так званий <a href="http://jigsaw.w3.org/css-validator/" target="_blank">validator</a>, який читає ваші таблиці стилів / stylesheet і повертає список попереджень про порушення і помилок, якщо ваш CSS їх містить. <br><br> Щоб полегшити перевірку ваших таблиць стилів, можна робити це прямо з даною web-сторінки. Просто замініть вказаний URL на URL вашої таблиці стилів та натисніть кнопку для проведення перевірки. Потім W3C-сайт проінформує вас, чи знайдено помилки. <form action="http://jigsaw.w3.org/css-validator/validator" method="get"> <p> <input type="text" name="uri" value="http://htmlbook.at.ua/_st/my.css" style="width:90%" size="20"></p> <p><input type="submit" value="Натисніть, щоб перевірити таблицю стилів"></p> </form> Якщо validator не знайде помилок; буде показано зображення, яке ви можете розмістити на вашому сайті для ілюстрації того, що ви перевіряєте код: <br><br> <img src="https://htmlbook.at.ua/img/css_lesson/W3C_css.gif" border="0"> <br><br> Цей validator можна також знайти по цьому посиланню: <a href="http://jigsaw.w3.org/css-validator/" target="_blank">http://jigsaw.w3.org/css-validator/</a> https://htmlbook.at.ua/news/urok_16_web_standarti_ta_perevirka_kodu/2011-02-11-33 Підручник CSS html https://htmlbook.at.ua/news/urok_16_web_standarti_ta_perevirka_kodu/2011-02-11-33 Fri, 11 Feb 2011 18:53:30 GMT CSS оперує в трьох вимірах - висота, ширина і глибина. Ми працювали в двох вимірах протягом усіх попередніх уроків. У цьому уроці ми навчимося створювати шари / layers. Коротко кажучи - упорядкувати елементи так, щоб вони перекривалися. <br><br> Для цього ви можете присвоїть кожному елементу номер ( <i>z-index</i> ). Елемент з більшим номером перекриває елемент з меншим номером. <br><br> Скажімо, ми граємо в покер і в нас - royal flush. Наша "рука" має бути представлена так, щоб кожна карта мала z-index: <br><br> <img src="https://htmlbook.at.ua/img/css_lesson/figure020.gif" border="0"> <br><br> При цьому номери йдуть підряд (1-5), але того ж результату можна добитися і при використанні 5 різних номерів. Важлива хронологічна послідовність номерів (порядок). <br><br> Ось код прикладу з картами: <br><br> <table width="100%" border="0" cellspacing="0" cellpadding="10" bgcolor="C9D0DB"> <tbody><tr> <td style="border: 1px dashed #677E9A;" height="55" valign="middle"> #ten_of_diamonds {<br> position: absolute... CSS оперує в трьох вимірах - висота, ширина і глибина. Ми працювали в двох вимірах протягом усіх попередніх уроків. У цьому уроці ми навчимося створювати шари / layers. Коротко кажучи - упорядкувати елементи так, щоб вони перекривалися. <br><br> Для цього ви можете присвоїть кожному елементу номер ( <i>z-index</i> ). Елемент з більшим номером перекриває елемент з меншим номером. <br><br> Скажімо, ми граємо в покер і в нас - royal flush. Наша "рука" має бути представлена так, щоб кожна карта мала z-index: <br><br> <img src="https://htmlbook.at.ua/img/css_lesson/figure020.gif" border="0"> <br><br> При цьому номери йдуть підряд (1-5), але того ж результату можна добитися і при використанні 5 різних номерів. Важлива хронологічна послідовність номерів (порядок). <br><br> Ось код прикладу з картами: <br><br> <table width="100%" border="0" cellspacing="0" cellpadding="10" bgcolor="C9D0DB"> <tbody><tr> <td style="border: 1px dashed #677E9A;" height="55" valign="middle"> #ten_of_diamonds {<br> position: absolute;<br> left: 100px;<br> top: 100px;<br><span style="color: rgb(255, 0, 0);"> z-index: 1;</span><br> }<br> <br> #jack_of_diamonds {<br> position: absolute;<br> left: 115px;<br> top: 115px;<br><span style="color: rgb(255, 0, 0);"> z-index: 2;</span><br> }<br> <br> #queen_of_diamonds {<br> position: absolute;<br> left: 130px;<br> top: 130px;<br><span style="color: rgb(255, 0, 0);"> z-index: 3;</span><br> }<br> <br> #king_of_diamonds {<br> position: absolute;<br> left: 145px;<br> top: 145px;<br><span style="color: rgb(255, 0, 0);"> z-index: 4;</span><br> }<br> <br> #ace_of_diamonds {<br> position: absolute;<br> left: 160px;<br> top: 160px;<br><span style="color: rgb(255, 0, 0);"> z-index: 5;</span><br> } </td> </tr> </tbody></table> <br> <a href="http://htmlbook.at.ua/img/css_lesson/lesson15_example.htm" target="_blank"><b>Показати приклад</b></a> <br><br> Це відносно простий метод, але в ньому закладені великі можливості. Ви можете розміщувати текст на зображення, зображення над текстом і т. д. <h2>Резюме</h2> Шари можна використовувати в різних ситуаціях. Наприклад, спробуйте використовувати z-index для ефектів з заголовками замість створення цих заголовків як графічних елементів. З одного боку, текст завантажується швидше, а з іншого - потенційно поліпшується робота пошукових машин. https://htmlbook.at.ua/news/urok_15_nasharuvannja_za_dopomogoju_z_index_shari/2011-02-11-32 Підручник CSS html https://htmlbook.at.ua/news/urok_15_nasharuvannja_za_dopomogoju_z_index_shari/2011-02-11-32 Fri, 11 Feb 2011 18:07:35 GMT За допомогою CSS-позиціювання ви можете розмістити елемент точно в потрібному місці сторінки. Разом з поплавками (див. Урок 13 ) позиціонування дає вам великі можливості для створення точного і навороченого дизайну. <br><br> У цьому уроці ми обговоримо наступне: <ul> <li><a href="#s1">Принципи CSS-позиціювання</a></li> <li><a href="#s2">Абсолютне позиціонування</a></li> <li><a href="#s3">Відносне позиціонування</a></li> </ul> <h2 id="s1">Принципи CSS-позиціювання</h2> Уявімо вікно браузера як систему координат: <br><br> <img src="https://htmlbook.at.ua/img/css_lesson/figure017.gif" border="0"> <br><br> Принципи CSS-позиціювання - в тому, що ви можете розташувати бокс в системі координат де завгодно. <br><br> Скажімо, ми хочемо позиціонувати заголовок. При використанні боксової моделі (див. Урок 9 ) заголовок виглядає так: <br><br> <img src="https://htmlbook.at.ua/img/css_lesson/figure018.gif" border="0"> <br><br> Якщо ми хочемо розташувати його на 100px від верхньої межі документа і на 200px зліва, ми повинні ввести наступний к... За допомогою CSS-позиціювання ви можете розмістити елемент точно в потрібному місці сторінки. Разом з поплавками (див. Урок 13 ) позиціонування дає вам великі можливості для створення точного і навороченого дизайну. <br><br> У цьому уроці ми обговоримо наступне: <ul> <li><a href="#s1">Принципи CSS-позиціювання</a></li> <li><a href="#s2">Абсолютне позиціонування</a></li> <li><a href="#s3">Відносне позиціонування</a></li> </ul> <h2 id="s1">Принципи CSS-позиціювання</h2> Уявімо вікно браузера як систему координат: <br><br> <img src="https://htmlbook.at.ua/img/css_lesson/figure017.gif" border="0"> <br><br> Принципи CSS-позиціювання - в тому, що ви можете розташувати бокс в системі координат де завгодно. <br><br> Скажімо, ми хочемо позиціонувати заголовок. При використанні боксової моделі (див. Урок 9 ) заголовок виглядає так: <br><br> <img src="https://htmlbook.at.ua/img/css_lesson/figure018.gif" border="0"> <br><br> Якщо ми хочемо розташувати його на 100px від верхньої межі документа і на 200px зліва, ми повинні ввести наступний код CSS: <br><br> <table width="100%" border="0" cellspacing="0" cellpadding="10" bgcolor="C9D0DB"> <tbody><tr> <td style="border: 1px dashed #677E9A;" height="55" valign="middle"> h1 {<br> position:absolute;<br><span style="color: rgb(255, 0, 0);"> top: 100px;<br> left: 200px;</span><br> } </td> </tr> </tbody></table> <br> Ось результат: <br><br> <img src="http://ru.html.net/tutorials/css/figure019.gif" border="0"> <br><br> Як бачите, Позиціонування за допомогою CSS - дуже точна техніка при розміщенні елементів. Це набагато простіше, ніж використовувати таблиці, прозорі зображення або ще що-небудь подібне. <h2 id="s2">Абсолютне позиціонування</h2> Елемент, позиційований абсолютно, не отримує ніякого простору до документі. Це означає, що після позиціонування він не залишає після себе порожній простір. <br><br> Для абсолютної позиціонування елемента властивість <em>position</em> повинно мати значення <strong>absolute</strong>. Ви можете використовувати значення <b>left</b>, <b>right</b>, <b>top</b> і <b>bottom</b> для розміщення боксу. <br><br> Як приклад абсолютного позиціонування ми розмістимо 4 бокси в кутах документа: <br><br> <table width="100%" border="0" cellspacing="0" cellpadding="10" bgcolor="C9D0DB"> <tbody><tr> <td style="border: 1px dashed #677E9A;" height="55" valign="middle"> #box1 {<br><span style="color: rgb(255, 0, 0);"> position:absolute;</span><br> top: 50px;<br> left: 50px;<br> }<br> <br> #box2 {<br><span style="color: rgb(255, 0, 0);"> position:absolute;</span><br> top: 50px;<br> right: 50px;<br> }<br> <br> #box3 {<br><span style="color: rgb(255, 0, 0);"> position:absolute;</span><br> bottom: 50px;<br> right: 50px;<br> }<br> <br> #box4 {<br><span style="color: rgb(255, 0, 0);"> position:absolute;</span><br> bottom: 50px;<br> left: 50px;<br> } </td> </tr> </tbody></table> <br> <a href="https://htmlbook.at.ua/img/css_lesson/lesson14_example1.htm" target="_blank"><b>Показати приклад</b></a> <h2 id="s3">Відносне позиціонування</h2> Щоб позиціонувати елемент відносно, встановіть у властивості <i>position</i> значення <b>relative</b>. Різниця між відносним абсолютним позиціонуванням полягає в тому, як обраховується позиціонування. <br><br> Позиція елемента, що розміщується відносно, <b>обраховується щодо його оригінальної позиції в документі</b>. Це означає, що ви зміщуєте елемент вправо, вліво, вгору або вниз. Таким чином, елемент все ще займає в документі простір після позиціонування. <br><br> Як приклад відносного позиціонування спробуємо розмістити три малюнки щодо їх оригінального розташування на сторінці. Зверніть увагу, що малюнки залишили після усунення порожній простір на своїх оригінальних позиціях у документі: <br><br> <table width="100%" border="0" cellspacing="0" cellpadding="10" bgcolor="C9D0DB"> <tbody><tr> <td style="border: 1px dashed #677E9A;" height="55" valign="middle"> #dog1 {<br> position:relative;<br> left: 350px;<br> bottom: 150px;<br> }<br> #dog2 {<br> position:relative;<br> left: 150px;<br> bottom: 500px;<br> }<br> <br> #dog3 {<br> position:relative;<br> left: 50px;<br> bottom: 700px;<br> } </td> </tr> </tbody></table> <br> <a href="https://htmlbook.at.ua/img/css_lesson/lesson14_example2.htm" target="_blank"><b>Показати приклад</b></a> <h2>Резюме</h2> В останніх двох уроках ви навчилися створювати поплавці й позиціонувати елементи. Ці два методи дають вам певні переваги при конструюванні сторінок без необхідності використовувати старі методи на кшталт таблиць і прозорих зображень в HTML. Замість них використовуйте CSS. Це точніше, має певні переваги і набагато простіше в роботі. https://htmlbook.at.ua/news/urok_14_pozicionuvannja_elementiv/2011-02-11-31 Підручник CSS html https://htmlbook.at.ua/news/urok_14_pozicionuvannja_elementiv/2011-02-11-31 Fri, 11 Feb 2011 18:07:23 GMT Елемент може "спливати" вправо або вліво за допомогою властивості <em>float</em>. Тобто бокс з його змістом може спливати вправо або вліво у вікні документа (або містить боксу) (див. у Уроці 9 опис боксової моделі). Принципи показані на малюнку: <br><br> <img src="https://htmlbook.at.ua/img/css_lesson/figure015.png" border="0"> <br><br> Якщо ми, наприклад, хочемо, щоб текст оточував малюнок, то результат повинен бути таким: <br><br> <img src="https://htmlbook.at.ua/img/css_lesson/figure016.gif" border="0"> <h2>Як це зробити?</h2> HTML-код для цього прикладу: <br><br> <table width="100%" border="0" cellspacing="0" cellpadding="10" bgcolor="C9D0DB"> <tbody><tr> <td style="border: 1px dashed #677E9A;" height="55" valign="middle"> <div id="picture"&gt;<br> <img src="bill.jpg" alt="Bill Gates"&gt;<br> </div&gt;<br> <br> <p&gt;causas naturales et antecedentes, <br> idciro etiam nostrarum voluntatum...</p&gt; </td> </tr> </tbody></table> <br> Щоб малюнок спливав вліво, а текст оточував його, ви повинні визначи... Елемент може "спливати" вправо або вліво за допомогою властивості <em>float</em>. Тобто бокс з його змістом може спливати вправо або вліво у вікні документа (або містить боксу) (див. у Уроці 9 опис боксової моделі). Принципи показані на малюнку: <br><br> <img src="https://htmlbook.at.ua/img/css_lesson/figure015.png" border="0"> <br><br> Якщо ми, наприклад, хочемо, щоб текст оточував малюнок, то результат повинен бути таким: <br><br> <img src="https://htmlbook.at.ua/img/css_lesson/figure016.gif" border="0"> <h2>Як це зробити?</h2> HTML-код для цього прикладу: <br><br> <table width="100%" border="0" cellspacing="0" cellpadding="10" bgcolor="C9D0DB"> <tbody><tr> <td style="border: 1px dashed #677E9A;" height="55" valign="middle"> <div id="picture"&gt;<br> <img src="bill.jpg" alt="Bill Gates"&gt;<br> </div&gt;<br> <br> <p&gt;causas naturales et antecedentes, <br> idciro etiam nostrarum voluntatum...</p&gt; </td> </tr> </tbody></table> <br> Щоб малюнок спливав вліво, а текст оточував його, ви повинні визначити ширину боксу, навколишнього малюнок, і встановити у властивості <em>float</em> значення left: <br><br> <table width="100%" border="0" cellspacing="0" cellpadding="10" bgcolor="C9D0DB"> <tbody><tr> <td style="border: 1px dashed #677E9A;" height="55" valign="middle"> #picture {<br><span style="color: rgb(255, 0, 0);"> float:left;<br> width: 100px;</span><br> } </td> </tr> </tbody></table> <br> <a href="https://htmlbook.at.ua/img/css_lesson/lesson13_example1.htm" target="_blank"><b>Показати приклад</b></a> <h2>Ще приклад: колонки</h2> Поплавки / Floats можна використовувати для виведення колонок у документі. Для цього ви повинні просто визначити необхідні колонки в HTML-коді тегами <div&gt; таким чином: <br><br> <table width="100%" border="0" cellspacing="0" cellpadding="10" bgcolor="C9D0DB"> <tbody><tr> <td style="border: 1px dashed #677E9A;" height="55" valign="middle"> <div id="column1"&gt;<br> <p&gt;Haec disserens qua de re agatur<br> et in quo causa consistat non videt...</p&gt;<br> </div&gt;<br> <br> <div id="column2"&gt;<br> <p&gt;causas naturales et antecedentes, <br> idciro etiam nostrarum voluntatum...</p&gt;<br> </div&gt;<br> <br> <div id="column3"&gt;<br> <p&gt;nam nihil esset in nostra <br> potestate si res ita se haberet...</p&gt;<br> </div&gt; </td> </tr> </tbody></table> <br> Тепер необхідну ширину колонок встановимо, наприклад, 33%, а потім встановимо спливання кожної вліво у властивості <em>float</em>: <br><br> <table width="100%" border="0" cellspacing="0" cellpadding="10" bgcolor="C9D0DB"> <tbody><tr> <td style="border: 1px dashed #677E9A;" height="55" valign="middle"> #column1 {<br><span style="color: rgb(255, 0, 0);"> float:left;<br> width: 33%;</span><br> }<br> <br> #column2 {<br><span style="color: rgb(255, 0, 0);"> float:left;<br> width: 33%;</span><br> }<br> <br> #column3 {<br><span style="color: rgb(255, 0, 0);"> float:left;<br> width: 33%;</span><br> } </td> </tr> </tbody></table> <br> <a href="https://htmlbook.at.ua/img/css_lesson/lesson13_example2.htm" target="_blank"><b>Показати приклад</b></a> <br><br> <em>float</em> може мати значення <b>left</b>, <b>right</b> або <b>none</b>. <h2>Властивість clear</h2> Властивість <em>clear</em> керує поведінкою послідовністю спливаючих елементів документа. <br><br> За замовчуванням послідовні елементи зміщуються вгору, заповнюючи доступне простір, який звільняється, якщо бокс спливає в сторону. Подивіться на попередній приклад, де текст автоматично зміщується вгору вздовж зображення Біла Гейтса. <br><br> Властивість clear може мати значення <b>left</b>, <b>right</b>, <b>both</b> або <b>none</b>. Принцип такий, що якщо <em>clear</em>, наприклад, має для боксу значення both, то верхній край рамки цього боксу завжди буде знаходитися під нижнім краєм поля можливих спливаючих зверху боксів. <br><br> <table width="100%" border="0" cellspacing="0" cellpadding="10" bgcolor="C9D0DB"> <tbody><tr> <td style="border: 1px dashed #677E9A;" height="55" valign="middle"> <div id="picture"&gt;<br> <img src="bill.jpg" alt="Bill Gates"&gt;<br> </div&gt;<br> <br> <h1&gt;Bill Gates</h1&gt;<br> <br> <p <span style="color: rgb(255, 0, 0);">class="floatstop"</span>&gt;causas naturales et antecedentes, <br> idciro etiam nostrarum voluntatum...</p&gt; </td> </tr> </tbody></table> <br> Щоб не дати тексту спливати вгору перед малюнком, ми можемо додати такий код CSS: <br><br> <table width="100%" border="0" cellspacing="0" cellpadding="10" bgcolor="C9D0DB"> <tbody><tr> <td style="border: 1px dashed #677E9A;" height="55" valign="middle"> #picture {<br> float:left;<br> width: 100px;<br> }<br> <br> .floatstop {<br><span style="color: rgb(255, 0, 0);"> clear:both;</span><br> } </td> </tr> </tbody></table> <br> <a href="https://htmlbook.at.ua/img/css_lesson/lesson13_example3.htm" target="_blank"><b>Показати приклад</b></a> <h2>Резюме</h2> Поплавки можна використовувати в різних ситуаціях, часто - одночасно з позиціонуванням. У наступному уроці ми розберемо, як позиціонувати бокс, відносно або абсолютно. https://htmlbook.at.ua/news/urok_13_splivajuchi_elementi_poplavci/2011-02-11-30 Підручник CSS html https://htmlbook.at.ua/news/urok_13_splivajuchi_elementi_poplavci/2011-02-11-30 Fri, 11 Feb 2011 18:07:10 GMT До цих пір ми особливо не піклувалися про розміри елементів, з якими працювали. У цьому уроці ми подивимося, як легко можна визначати висоту і ширину елемента. <ul> <li><a href="#s1"><strong>width</strong></a></li> <li><a href="#s2"><strong>height</strong></a></li> </ul> <h2 id="s1">Установка ширини [width]</h2> Властивістю <em>width</em> ви можете визначати ширину елемента. <br><br> У прикладі показаний бокс для введення тексту: <br><br> <table width="100%" border="0" cellspacing="0" cellpadding="10" bgcolor="C9D0DB"> <tbody><tr> <td style="border: 1px dashed #677E9A;" height="55" valign="middle"> div.box {<br> width: 200px;<br> border: 1px solid black;<br> background: orange;<br> } </td> </tr> </tbody></table> <br> <a href="https://htmlbook.at.ua/img/css_lesson/lesson12_example1.htm" target="_blank"><b>Показати приклад</b></a> <h2 id="s2">Встановлення висоти [height]</h2> Зверніть увагу, як, у попередньому прикладі, висота боксу встановлюється вмістом цього боксу. Висоту елемента можна визначити... До цих пір ми особливо не піклувалися про розміри елементів, з якими працювали. У цьому уроці ми подивимося, як легко можна визначати висоту і ширину елемента. <ul> <li><a href="#s1"><strong>width</strong></a></li> <li><a href="#s2"><strong>height</strong></a></li> </ul> <h2 id="s1">Установка ширини [width]</h2> Властивістю <em>width</em> ви можете визначати ширину елемента. <br><br> У прикладі показаний бокс для введення тексту: <br><br> <table width="100%" border="0" cellspacing="0" cellpadding="10" bgcolor="C9D0DB"> <tbody><tr> <td style="border: 1px dashed #677E9A;" height="55" valign="middle"> div.box {<br> width: 200px;<br> border: 1px solid black;<br> background: orange;<br> } </td> </tr> </tbody></table> <br> <a href="https://htmlbook.at.ua/img/css_lesson/lesson12_example1.htm" target="_blank"><b>Показати приклад</b></a> <h2 id="s2">Встановлення висоти [height]</h2> Зверніть увагу, як, у попередньому прикладі, висота боксу встановлюється вмістом цього боксу. Висоту елемента можна визначити властивістю <em>height</em>. Як приклад спробуємо створити бокс висотою 500px: <br><br> <table width="100%" border="0" cellspacing="0" cellpadding="10" bgcolor="C9D0DB"> <tbody><tr> <td style="border: 1px dashed #677E9A;" height="55" valign="middle"> div.box {<br> height: 500px;<br> width: 200px;<br> border: 1px solid black;<br> background: orange;<br> } </td> </tr> </tbody></table> <br> <a href="https://htmlbook.at.ua/img/css_lesson/lesson12_example2.htm" target="_blank"><b>Показати приклад</b></a> <h2>Резюме</h2> <a href="https://htmlbook.at.ua/news/urok_9_boksova_model/2011-02-11-26">Уроки 9</a>, <a href="https://htmlbook.at.ua/news/urok_10_boksova_model_polja_zapovnennja/2011-02-11-27">10</a>, <a href="https://htmlbook.at.ua/news/urok_11_boksova_model_ramki/2011-02-11-28">11</a> і <a href="https://htmlbook.at.ua/news/urok_12_boksova_model_visota_i_shirina/2011-02-11-29">12</a> дали введення в боксових модель CSS. Як ви, мабуть, помітили, боксова модель надає багато нових можливостей. Раніше ви вже могли використовувати таблиці в HTML для дизайну сторінок, але за допомогою CSS і боксової моделі ви зможете створювати елегантний дизайн більш точно та відповідно до рекомендацій W3C. https://htmlbook.at.ua/news/urok_12_boksova_model_visota_i_shirina/2011-02-11-29 Підручник CSS html https://htmlbook.at.ua/news/urok_12_boksova_model_visota_i_shirina/2011-02-11-29 Fri, 11 Feb 2011 18:06:55 GMT Рамки мають різноманітне застосування, наприклад, як декоративний елемент або для відділення двох об'єктів. CSS надає безліч варіантів використання рамок. <ul> <li><a href="#s1">border-width</a></li> <li><a href="#s2">border-color</a></li> <li><a href="#s3">border-style</a></li> <li><a href="#s4">Приклади визначення рамок</a></li> <li><a href="#s5">border</a></li> </ul> <h2 id="s1">Товщина рамки [border-width]</h2> Товщина рамки визначається властивістю <em>border-width</em>, яке може мати значення <u>thin</u>, <u>medium</u> і <u>thick</u>, або числове значення в пікселях. На малюнку показана ця система: <br><br> <img src="https://htmlbook.at.ua/img/css_lesson/figure012.gif" border="0"> <h2 id="s2">Колір рамки [border-color]</h2> <img src="https://htmlbook.at.ua/img/css_lesson/figure013.gif" border="0"> <br><br> Властивість <i>border-color</i> визначає колір рамки. Значення - нормальні значення кольору, наприклад: "#123456", "rgb (123,123,123)" або "yellow". <h2 id="s3">Типи рамок [border-style]</h2> Існують різні типи рамок... Рамки мають різноманітне застосування, наприклад, як декоративний елемент або для відділення двох об'єктів. CSS надає безліч варіантів використання рамок. <ul> <li><a href="#s1">border-width</a></li> <li><a href="#s2">border-color</a></li> <li><a href="#s3">border-style</a></li> <li><a href="#s4">Приклади визначення рамок</a></li> <li><a href="#s5">border</a></li> </ul> <h2 id="s1">Товщина рамки [border-width]</h2> Товщина рамки визначається властивістю <em>border-width</em>, яке може мати значення <u>thin</u>, <u>medium</u> і <u>thick</u>, або числове значення в пікселях. На малюнку показана ця система: <br><br> <img src="https://htmlbook.at.ua/img/css_lesson/figure012.gif" border="0"> <h2 id="s2">Колір рамки [border-color]</h2> <img src="https://htmlbook.at.ua/img/css_lesson/figure013.gif" border="0"> <br><br> Властивість <i>border-color</i> визначає колір рамки. Значення - нормальні значення кольору, наприклад: "#123456", "rgb (123,123,123)" або "yellow". <h2 id="s3">Типи рамок [border-style]</h2> Існують різні типи рамок. Нижче показані вісім типів рамки та їх інтерпретація в Internet Explorer 5.5. Всі приклади показані кольором "gold" і товщиною "thick", але можуть, природно, виводитися іншим кольором і товщиною. <br><br> Значення <u>none</u> або <u>hidden</u> можуть використовуватися, якщо ви не хочете відображати рамку. <br><br> <img src="https://htmlbook.at.ua/img/css_lesson/figure014.gif" border="0"> <h2 id="s4">Приклади визначення рамок</h2> Три розглянутих вище властивості можна об'єднати в кожному елементі і, відповідно, встановлювати різні рамки. Для ілюстрації поглянемо на документ, де визначені різні рамки для <h1&gt;, <h2&gt;, <ul&gt; і <p&gt;. Результат, можливо, не настільки вражаючим, але він демонструє деякі можливості: <br><br> <table width="100%" border="0" cellspacing="0" cellpadding="10" bgcolor="C9D0DB"> <tbody><tr> <td style="border: 1px dashed #677E9A;" height="55" valign="middle"> h1 {<br> border-width: thick;<br> border-style: dotted;<br> border-color: gold;<br> }<br> <br> h2 {<br> border-width: 20px;<br> border-style: outset;<br> border-color: red;<br> }<br> <br> p {<br> border-width: 1px;<br> border-style: dashed;<br> border-color: blue;<br> }<br> <br> ul {<br> border-width: thin;<br> border-style: solid;<br> border-color: orange;<br> } </td> </tr> </tbody></table> <br> <a href="https://htmlbook.at.ua/img/css_lesson/lesson11_example1.htm" target="_blank"><b>Показати приклад</b></a> <br><br> Можна також встановити спеціальні властивості для верхнього, нижнього, правого і лівого краю рамки. Ось як це робиться: <br><br> <table width="100%" border="0" cellspacing="0" cellpadding="10" bgcolor="C9D0DB"> <tbody><tr> <td style="border: 1px dashed #677E9A;" height="55" valign="middle"> h1 {<br> border-top-width: thick;<br> border-top-style: solid;<br> border-top-color: red;<br> <br> border-bottom-width: thick;<br> border-bottom-style: solid;<br> border-bottom-color: blue;<br> <br> border-right-width: thick;<br> border-right-style: solid;<br> border-right-color: green;<br> <br> border-left-width: thick;<br> border-left-style: solid;<br> border-left-color: orange;<br> } </td> </tr> </tbody></table> <br> <a href="https://htmlbook.at.ua/img/css_lesson/lesson11_example2.htm" target="_blank"><b>Показати приклад</b></a> <h2 id="s5">Скорочений запис [border]</h2> Як і для багатьох інших властивостей, ви можете об'єднати декілька властивостей в одне, використовуючи слово <i>border</i>. Приклад: <br><br> <table width="100%" border="0" cellspacing="0" cellpadding="10" bgcolor="C9D0DB"> <tbody><tr> <td style="border: 1px dashed #677E9A;" height="55" valign="middle"> p {<br> border-width: 1px;<br> border-style: solid;<br> border-color: blue;<br> } </td> </tr> </tbody></table> <br> можна об'єднати в: <br><br> <table width="100%" border="0" cellspacing="0" cellpadding="10" bgcolor="C9D0DB"> <tbody><tr> <td style="border: 1px dashed #677E9A;" height="55" valign="middle"> p {<br> border: 1px solid blue;<br> } </td> </tr> </tbody></table> <h2>Резюме</h2> У цьому уроці ви познайомилися з безмежними можливостями CSS при використанні рамок. <br><br> У наступному уроці ми розглянемо, як визначати розміри в боксової моделі - <u>height</u> і <u>width</u>. https://htmlbook.at.ua/news/urok_11_boksova_model_ramki/2011-02-11-28 Підручник CSS html https://htmlbook.at.ua/news/urok_11_boksova_model_ramki/2011-02-11-28 Fri, 11 Feb 2011 18:06:35 GMT У попередньому уроці ми розглянули боксову модель. У цьому уроці пояснимо, як можна змінювати подання елементів властивостями <u>margin</u> і <u>padding</u>. <ul> <li><a href="#s1">Встановимо поля елемента</a></li> <li><a href="#s2">Встановимо заповнення елемента</a></li> </ul> <h2 id="s1">Встановимо поля елемента</h2> У елемента є чотири сторони: <i>right</i>, <i>left</i>, <i>top</i> і <i>bottom</i>. Поля <u>margin</u> це відстань від кожної сторони до сусідніх елементів (або країв документа). Див також діаграму в Уроці 9. <br><br> В якості першого прикладу ми розберемося, як визначити поля самогó документа, тобто елемента <body&gt;. На ілюстрації показано, які поля нам потрібні. <br><br> <img src="https://htmlbook.at.ua/img/css_lesson/figure011.gif" border="0"> <br><br> CSS-код для цього прикладу виглядає так: <br><br> <table width="100%" border="0" cellspacing="0" cellpadding="10" bgcolor="C9D0DB"> <tbody><tr> <td style="border: 1px dashed #677E9A;" height="55" valign="middle"> body {<br> margin-t... У попередньому уроці ми розглянули боксову модель. У цьому уроці пояснимо, як можна змінювати подання елементів властивостями <u>margin</u> і <u>padding</u>. <ul> <li><a href="#s1">Встановимо поля елемента</a></li> <li><a href="#s2">Встановимо заповнення елемента</a></li> </ul> <h2 id="s1">Встановимо поля елемента</h2> У елемента є чотири сторони: <i>right</i>, <i>left</i>, <i>top</i> і <i>bottom</i>. Поля <u>margin</u> це відстань від кожної сторони до сусідніх елементів (або країв документа). Див також діаграму в Уроці 9. <br><br> В якості першого прикладу ми розберемося, як визначити поля самогó документа, тобто елемента <body&gt;. На ілюстрації показано, які поля нам потрібні. <br><br> <img src="https://htmlbook.at.ua/img/css_lesson/figure011.gif" border="0"> <br><br> CSS-код для цього прикладу виглядає так: <br><br> <table width="100%" border="0" cellspacing="0" cellpadding="10" bgcolor="C9D0DB"> <tbody><tr> <td style="border: 1px dashed #677E9A;" height="55" valign="middle"> body {<br> margin-top: 100px;<br> margin-right: 40px;<br> margin-bottom: 10px;<br> margin-left: 70px;<br> } </td> </tr> </tbody></table> <br> Або ви можете написати більш елегантно: <br><br> <table width="100%" border="0" cellspacing="0" cellpadding="10" bgcolor="C9D0DB"> <tbody><tr> <td style="border: 1px dashed #677E9A;" height="55" valign="middle"> body {<br> margin: 100px 40px 10px 70px;<br> } </td> </tr> </tbody></table> <br> <a href="https://htmlbook.at.ua/img/css_lesson/lesson10_example1.htm" target="_blank"><b>Показати приклад</b></a> <br><br> Ви можете встановити поля приблизно таким же чином майже для будь-якого елементу. Наприклад, ми можемо визначити поля для всіх параграфів <p&gt;: <br><br> <table width="100%" border="0" cellspacing="0" cellpadding="10" bgcolor="C9D0DB"> <tbody><tr> <td style="border: 1px dashed #677E9A;" height="55" valign="middle"> body {<br> margin: 100px 40px 10px 70px;<br> }<br> <br><span style="color: rgb(255, 0, 0);"> p {<br> margin: 5px 50px 5px 50px;<br> } </span></td> </tr> </tbody></table> <br> <a href="https://htmlbook.at.ua/img/css_lesson/lesson10_example2.htm" target="_blank"><b>Показати приклад</b></a> <h2 id="s2">Встановимо заповнення елемента</h2> Заповнення не впливає на відстань елемента до інших елементів, а лише визначає внутрішню відстань між рамкою і вмістом елемента. <br><br> Використання заповнення / padding можна показати на простому прикладі, де всі заголовки мають кольоровий фон: <br><br> <table width="100%" border="0" cellspacing="0" cellpadding="10" bgcolor="C9D0DB"> <tbody><tr> <td style="border: 1px dashed #677E9A;" height="55" valign="middle"> h1 {<br><span style="color: rgb(255, 0, 0);"> background: yellow;</span><br> }<br> <br> h2 {<br><span style="color: rgb(255, 0, 0);"> background: orange;</span><br> } </td> </tr> </tbody></table> <br> <a href="https://htmlbook.at.ua/img/css_lesson/lesson10_example3.htm" target="_blank"><b>Показати приклад</b></a> <br><br> Визначаючи заповнення для заголовків, ви встановлюєте величину поля навколо тексту кожного заголовка: <br><br> <table width="100%" border="0" cellspacing="0" cellpadding="10" bgcolor="C9D0DB"> <tbody><tr> <td style="border: 1px dashed #677E9A;" height="55" valign="middle"> h1 {<br> background: yellow;<br><span style="color: rgb(255, 0, 0);"> padding: 20px 20px 20px 80px;</span><br> }<br> <br> h2 {<br> background: orange;<br><span style="color: rgb(255, 0, 0);"> padding-left:120px;</span><br> } </td> </tr> </tbody></table> <br> <a href="https://htmlbook.at.ua/img/css_lesson/lesson10_example4.htm" target="_blank"><b>Показати приклад</b></a> <h2>Резюме</h2> Вам залишився один крок до створення боксової моделі в CSS. У наступному уроці ми розглянемо, як встановлювати рамки різного кольору і як окреслювати елементи. https://htmlbook.at.ua/news/urok_10_boksova_model_polja_zapovnennja/2011-02-11-27 Підручник CSS html https://htmlbook.at.ua/news/urok_10_boksova_model_polja_zapovnennja/2011-02-11-27 Fri, 11 Feb 2011 18:06:19 GMT Боксова модель в CSS описує бокси, що генеруються для HTML-елементів. Боксова модель також має детальні опції для визначення полів, рамок, заповнення і вмісту кожного елемента. На діаграмі далі показано, як побудована боксова модель: <h2>Боксова модель в CSS</h2> <img src="https://htmlbook.at.ua/img/css_lesson/figure008.ru.gif" border="0"> <br><br> Ця ілюстрація може здатися занадто науковою, тому спробуємо використовувати цю модель на конкретному прикладі із заголовком і текстом. HTML нашого прикладу такий (із Загальної Декларації Прав Людини): <br><br> <table width="100%" border="0" cellspacing="0" cellpadding="10" bgcolor="C9D0DB"> <tbody><tr> <td style="border: 1px dashed #677E9A;" height="55" valign="middle"> <h1&gt;Article 1:</h1&gt;<br> <br> <p&gt;All human beings are born free<br> и equal in dignity и rights.<br> They are endowed with reason и conscience<br> и should act towards one another in a<br> spirit of brotherhood</p&gt; </td> </tr> </tbody></table> <br> Додавши колір ... Боксова модель в CSS описує бокси, що генеруються для HTML-елементів. Боксова модель також має детальні опції для визначення полів, рамок, заповнення і вмісту кожного елемента. На діаграмі далі показано, як побудована боксова модель: <h2>Боксова модель в CSS</h2> <img src="https://htmlbook.at.ua/img/css_lesson/figure008.ru.gif" border="0"> <br><br> Ця ілюстрація може здатися занадто науковою, тому спробуємо використовувати цю модель на конкретному прикладі із заголовком і текстом. HTML нашого прикладу такий (із Загальної Декларації Прав Людини): <br><br> <table width="100%" border="0" cellspacing="0" cellpadding="10" bgcolor="C9D0DB"> <tbody><tr> <td style="border: 1px dashed #677E9A;" height="55" valign="middle"> <h1&gt;Article 1:</h1&gt;<br> <br> <p&gt;All human beings are born free<br> и equal in dignity и rights.<br> They are endowed with reason и conscience<br> и should act towards one another in a<br> spirit of brotherhood</p&gt; </td> </tr> </tbody></table> <br> Додавши колір і інформацію шрифту цей приклад можна представити так: <br><br> <img src="https://htmlbook.at.ua/img/css_lesson/figure009.gif" border="0"> <br><br> У цьому прикладі - два елементи: <h1&gt; і <p&gt;. Боксова модель цих елементів виглядає так: <br><br> <img src="https://htmlbook.at.ua/img/css_lesson/figure010.gif" border="0"> <br> Хоча це може здатися трохи складним, проте, видно, що кожен HTML-елемент оточений боксом. Боксом, який можна набудувати за допомогою CSS. <h2>Резюме</h2> У цьому уроці ви дізналися про боксової моделі. У наступних трьох уроках ми докладніше зупинимося на тому, як створювати елементи та управляти ними в боксової моделі. https://htmlbook.at.ua/news/urok_9_boksova_model/2011-02-11-26 Підручник CSS html https://htmlbook.at.ua/news/urok_9_boksova_model/2011-02-11-26 Fri, 11 Feb 2011 18:06:05 GMT Елементи <span&gt; і <div&gt; використовуються для структурування документа, часто спільно з атрибутами <u>class</u> і <u>id</u>. <br><br> У цьому уроці ми детально розглянемо, як використовувати <span&gt; і <div&gt;, оскільки ці елементи HTML мають найважливіше значення в CSS. <ul> <li>Групування за допомогою <span&gt;</li> <li>Групування за допомогою <div&gt;</li> </ul> <h2>Групування за допомогою <span&gt;</h2> Елемент <span&gt; можна назвати нейтральним елементом, який нічого не додає до вмісту документа. Але, в поєднанні з CSS, <span&gt; може використовуватися для візуальних ефектів в окремих блоках тексту. <br><br> Приклад - цитата з Бенджаміна Франкліна: <br><br> <table width="100%" border="0" cellspacing="0" cellpadding="10" bgcolor="C9D0DB"> <tbody><tr> <td style="border: 1px dashed #677E9A;" height="55" valign="middle"> <p&gt;Хто рано лягає і рано встає, той буде здоровим, багатим і розумним</p&gt; </td> </tr> </tbody></table> <br> Скажімо... Елементи <span&gt; і <div&gt; використовуються для структурування документа, часто спільно з атрибутами <u>class</u> і <u>id</u>. <br><br> У цьому уроці ми детально розглянемо, як використовувати <span&gt; і <div&gt;, оскільки ці елементи HTML мають найважливіше значення в CSS. <ul> <li>Групування за допомогою <span&gt;</li> <li>Групування за допомогою <div&gt;</li> </ul> <h2>Групування за допомогою <span&gt;</h2> Елемент <span&gt; можна назвати нейтральним елементом, який нічого не додає до вмісту документа. Але, в поєднанні з CSS, <span&gt; може використовуватися для візуальних ефектів в окремих блоках тексту. <br><br> Приклад - цитата з Бенджаміна Франкліна: <br><br> <table width="100%" border="0" cellspacing="0" cellpadding="10" bgcolor="C9D0DB"> <tbody><tr> <td style="border: 1px dashed #677E9A;" height="55" valign="middle"> <p&gt;Хто рано лягає і рано встає, той буде здоровим, багатим і розумним</p&gt; </td> </tr> </tbody></table> <br> Скажімо, ми хочемо, щоб Mr.&nbsp;Франклін&nbsp;побачив всі переваги неспання виділені червоним кольором. Для цього ми можемо відзначити ці переваги з допомогою <span&gt;. Кожному блоку <u>span</u> буде присвоєно <u>class</u>, який потім можна визначити в нашій таблиці стилів: <br><br> <table width="100%" border="0" cellspacing="0" cellpadding="10" bgcolor="C9D0DB"> <tbody><tr> <td style="border: 1px dashed #677E9A;" height="55" valign="middle"> <p&gt;Хто рано лягає і рано встає, той буде <span style="color: rgb(255, 0, 0);"><span class="benefit"&gt;здоровим</span&gt;</span>, <span style="color: rgb(255, 0, 0);"><span class="benefit"&gt;багатим</span&gt;</span> і <span style="color: rgb(255, 0, 0);"><span class="benefit"&gt;розумним</span&gt;</span>.</p&gt; </td> </tr> </tbody></table> <br> У CSS: <br><br> <table width="100%" border="0" cellspacing="0" cellpadding="10" bgcolor="C9D0DB"> <tbody><tr> <td style="border: 1px dashed #677E9A;" height="55" valign="middle"><span style="color: rgb(255, 0, 0);"> span.benefit</span> {<br> color:red;<br> } </td> </tr> </tbody></table> <br> <a href="https://htmlbook.at.ua/img/css_lesson/lesson8_example1.htm" target="_blank"><b>Показати приклад</b></a> <br><br> Зрозуміло, ви можете також використовувати id для визначення стилю <span&gt;-елементів. Не забувайте тільки, що ви повинні встановити унікальний <u>id</u> кожному з трьох <span style=""&gt;-елементів, як ми говорили в минулому уроці. <h2>Групування за допомогою <div&gt;</h2> У той час як <span&gt; використовується в елементах рівня блоку, як у попередньому прикладі, <div&gt; застосовується для групування одного або більше блок-елементів. <br><br> Крім цього відмінності, групування за допомогою <div&gt; працює більш-менш аналогічно. Подивимося на приклад - два списки президентів США, згрупованих за їх політичної приналежності: <br><br> <table width="100%" border="0" cellspacing="0" cellpadding="10" bgcolor="C9D0DB"> <tbody><tr> <td style="border: 1px dashed #677E9A;" height="55" valign="middle"><span style="color: rgb(255, 0, 0);"> <div id="democrats"&gt;</span><br> <ul&gt;<br> <li&gt;Франклін Д. Рузвелт</li&gt;<br> <li&gt;Гаррі Трумен</li&gt;<br> <li&gt;Джон Ф. Кеннеді</li&gt;<br> <li&gt;Ліндон Б. Джонсон</li&gt;<br> <li&gt;Джиммі Картер</li&gt;<br> <li&gt;Білл Клінтон</li&gt;<br> </ul&gt;<br> </div&gt;<br> <br><span style="color: rgb(255, 0, 0);"> <div id="republicans"&gt;</span><br> <ul&gt;<br> <li&gt;Дуайт Д. Ейзенхауер</li&gt;<br> <li&gt;Річард Ніксон</li&gt;<br> <li&gt;Джералд Форд</li&gt;<br> <li&gt;Роналд Рейган</li&gt;<br> <li&gt;Джордж Буш</li&gt;<br> <li&gt;Джордж У. Буш</li&gt;<br> </ul&gt;<br> </div&gt; </td> </tr> </tbody></table> <br> У нашій таблиці стилів ми можемо використовувати таке ж групування, як і раніше: <br><br> <table width="100%" border="0" cellspacing="0" cellpadding="10" bgcolor="C9D0DB"> <tbody><tr> <td style="border: 1px dashed #677E9A;" height="55" valign="middle"><span style="color: rgb(255, 0, 0);"> #democrats</span> {<br> background:blue;<br> }<br> <br><span style="color: rgb(255, 0, 0);"> #republicans</span> {<br> background:red;<br> } </td> </tr> </tbody></table> <br> <a href="https://htmlbook.at.ua/img/css_lesson/lesson8_example2.htm" target="_blank"><b>Показати приклад</b></a> <br><br> У цих прикладах ми використовували <div&gt; і <span style=""&gt; для визначення дуже простих речей - кольори тексту і фону. Але обидва елементи несуть у собі потенціал для набагато більш складних операцій, таких як .... Проте це - не для нашого уроку. Пізніше ми розглянемо це питання в даному підручнику. <h2>Резюме</h2> У Уроках 7 і 8, ви дізналися про селектори <u>id</u> і <u>class</u> і про елементи span та div. <br><br> Тепер ви повинні вміти, більш-менш, групувати і ідентифікувати всі частини документа, що вже є великим кроком в освоєнні CSS. В Уроці 9 ми дамо визначення Боксовій моделі. https://htmlbook.at.ua/news/urok_8_grupuvannja_elementiv_span_ta_div/2011-02-11-25 Підручник CSS html https://htmlbook.at.ua/news/urok_8_grupuvannja_elementiv_span_ta_div/2011-02-11-25 Fri, 11 Feb 2011 18:05:51 GMT