Додати DIV до існуючої таблиці стилів CSS
Сучасні стандарти веб-дизайн відійшли від створення макетів використанням <TABLE> теги. Набагато більш гнучкою і корисною <DIV> тег шлях. Ось деякі основні передового досвіду можна використовувати відразу на Вашому сайті.
DIV і володарюй
Кращий спосіб думати про DIV так само вікні.
Це контейнер інформації, не більше того.
Саме чудове те, що вона знаходиться поле, яке може містити що завгодно, і може змінити те, що вміст у ньому виглядає.
Він використовується для "блочного" контенту (наприклад: великі шматки тексту, або групи фотографій або набори кнопок навігації), так що ви можете встановити правила про те, що контент представлений.
Існує також тег, молодший брат DIV, назвав SPAN, який використовується, щоб змінити зовнішній вигляд в лінію змісту.
Хоча це корисно, SPAN не має нічого на багатьох різних способів використання добре продуманої DIV.
Як DIV зі стилем (листи)
Якщо ви відкриєте таблицю стилів, цілком імовірно, що ви знайдете декілька класів, призначених для роботи з DIV-в на сторінці. Є декілька різних типів, але чотири з найбільш поширеними є заголовок, зміст, бічний панелі, і Нижній колонтитул. Імена цих DIVs дасть вам гарне уявлення про свої цілі. Нижче наведені деякі приклади того, як вони можуть бути використані в рамках існуючої структури CSS.
Може бути, ви хочете створити розділ заголовка. По-перше, створити клас HEADER, які можуть бути використані тільки з DIV-ів. Потім запустіть формуванні властивостей тексту, межі та фони, які ви сподіваєтеся використовувати:
DIV.header
{
Накреслення шрифту: сміливий;
FONT-SIZE: великі;
PADDING-BOTTOM: 5px;
TEXT-TRANSFORM: ні;
BORDER-LEFT: # 990033 3px твердої речовини;
Межі права: # 990033 3px твердої речовини;
COLOR: # CCFFFF;
PADDING-TOP: 5px;
BORDER-TOP: # 990033 3px тире;
BORDER-BOTTOM: # 990033 3px тире;
FONT-STYLE: стандартний;
FONT-FAMILY: Verdana, Arial;
Фонового кольору: # cc3300;
TEXT-ALIGN: справа;
FONT-VARIANT: капітель;
Текстове художнє оформлення: жоден
}
При цьому буде створено розділ сторінки з легким бузковим фон, темно-червоні кордону (пунктирними лініями зверху і знизу), і світло-сірі букви в малі прописні Сан - засечек шрифт. Як правило, цей код буде покласти на основному документі стилів ("yourDoc.css"), які будуть пов'язані з веб-сторінки, використовуючи наступний код в розділ ГОЛОВА HTML:
<link rel="stylesheet" type="text/css" href="yourDoc.css" />
Очевидно, що це приклад ім'я, і Ви повинні були б переконатися, що шлях до файлу CSS було правильним. Реальна потужність CSS, однак, полягає в тому, що якщо ви вирішили, створивши сотні сторінок з цим заголовком, що ви хотіли б мати червоні літери на сірому фоні в спеціальний шрифт , ви просто повинні змінити код в цей CSS-листа, і вона буде пронизувати весь сайт.
Після того як ви пограти з різними типами властивостей для різних елементів усередині DIV, ви можете повністю форму і повторно форму весь сайт просто з листів CSS себе. Кращий з всіх, не може бути в межах DIVs DIVs, вкладені наскільки вам подобається, і кожен "контейнер" може мати свої власні властивості, а також властивостей великих DIV. У DIV.body, наприклад, ви можете вирішити, що всі Текст має бути вирівняний по лівому краю. Тим не менш, ви також можете створити менші DIV.redText і DIV.whiteText, що просто змінити колір пізніше пунктів, зберігаючи їх все акуратно вирівняні по лівій.
Дивні і дивовижні FLOAT власності
Ще одна дуже важлива якість вкладеності DIVs в таблиці стилів, є ідея «плавати».
Це дозволяє точно становищі, коли на сторінці DIV з'являється.
FLOAT властивість допомагає визначити, де SPAN або DIV вміст буде у зв'язку з великим контейнером.
Якщо ви хочете мати дві колонки всередині основного корпусу, один "врізку" і один "зміст", ви б створили два класи: # # бічній панелі і змісту.
Ви могли б стиль тексту, фону і межі всіх, як ви робили з HEADER прикладі вище, але ви також додати в ще одну властивість: FLOAT: LEFT.
Додавання цієї властивості штовхає перших бічних панелі в лівій частині ємності більшого об'єму, то область вмісту поруч з ним, створюючи більш гнучку структуру, ніж таблиці з усіма перевагами чистою макет.
Якщо ви хочете мати ще одного DIV під плаваючі розділи (наприклад, підвал DIV), було б необхідно, щоб вкласти FLOAT: CLEAR власності в DIV внизу, так що "ящик" не буде наслідувати FLOAT: ліве власності. Протилежне "плаваючого" DIV є одним з позиції власності встановлюється в «абсолютних». У цьому випадку, ви можете визначити положення вікна саме на основі координат пікселів або відсоток значень вікні браузера .
Освоєння DIV
Це дуже простий огляд того, як DIV можна використовувати на Вашому сайті. Повну потужність DIV вимагає багато більше сторінок і понять. Ви можете дізнатися для себе на сайтах, таких як DevArticles , DesignPlace і Juixe . Ось ще приклади дивовижні можливості виставляються кожен день в саду CSS Zen , або ви можете спробувати свій власний код в пісочниці бюро CSS . Витратьте час, щоб зробити DIV корисною і гнучкою основою для ваших власних веб-дизайну, і ви не пошкодуєте про це.
Див також
