Здрастуйте, шановні читачі блогу . Наше сьогоднішнє завдання полягає в тому, щоб сформувати так званий макет сайту не з допомогою Html таблиць (вчорашній день верстки), а з допомогою елементів Div. Тобто нам потрібно буде на дивах побудувати верхню частину (шапку), нижню частину (футер) і три колонки для прикладу.
До речі кажучи, таке завдання ми з вами вже вирішували, коли я писав про блокової верстки на Div.
Здавалося б, що повторюватися не варто, але я і не збираюся цього робити. Сьогодні буде описано принципово інший спосіб верстки сайту, а також паралельно розглянемо призначення директив @import і @media (з собачкою попереду) в уже вивченому нами (на базовому рівні, звичайно ж) мовою стильової розмітки CSS.
Верстка сайту на блоках — а воно вам треба?
Більше того, ми з вами на поточний момент вже встигли розібрати і Html по кісточках, спираючись при цьому на першоджерело в особі консорціуму W3C. Однак, думаю, що не всі прониклися моїми умовляннями і відразу ж кинулися вивчати Довідник CSS для початківців, а також Підручник Html.
І я вас навіть частково розумію. Адже саме по собі знання цих речей не принесе вам ні слави, ні багатства, а тільки забирає купу часу, який можна було б витратити на набагато більш приємне заняття. Так само, як вміння користуватися столовими приладами не гарантує наявність вам смачної їжі на вашому столі. Однак, в потрібний момент це може стати в нагоді і зіграти не останню роль.
Я сам років десять-дванадцять тому вирішив у що б то не стало вивчити Html, але застопорився на самому початку, по-моєму, на теге Title і досить швидко охолонув до цієї затії, віддавши перевагу знущанням над отупілим мозком захоплюючу гру в черговий шутер.
Так, так, коли ігри були моїм хобі, а зараз цим хобі став і в мене з’явилася можливість реалізувати на практиці частина з описаних мною колись способів заробітку грошей. Причому за аналогією з іграми кількість зароблених мною грошових знаків сприймається раніше як якісь віртуальні окуляри, що показують, наскільки успішно я просуваюся вперед.
Мабуть це вже невикорінно, хоча моя дружина за останні кілька років доволі кардинально змінила своє ставлення до мого чергового захоплення (шкода, що саме вона буде перевіряти цю статтю на наявність граматичних помилок, а то б я описав все, відбувалися зміни детальніше), бо цей блог всупереч усім її початковим очікуванням і сумнівам дає реальний дохід у вигляді шурхотить купюр (читайте про те, як законно матеріалізовувати цифирьки на екрані в цифирьки на розрахунковому рахунку індивідуального підприємця.
Загалом, це ліричний відступ зроблено не випадково, бо я хочу сказати, що Html і CSS є малими цеглинками у побудові вашого інтернет бізнесу, але володіння і розуміння принципів верстки сайтів дасть певну кількість очок вперед перед тими, хто знехтував цими знаннями.
Загальний успіх веб проекту залежить найчастіше саме від таких дрібниць, розгляд з якими легко (а часто і дуже навіть приємно) можна засунути в дальній кут. Я от тільки одного не можу згадати — що мені дозволило переступити той невидимий бар’єр, зітканий з ліні і млявості мислення. Можливо, що просто так лягли карти. Тому побажаю вам теж подолати цей бар’єр, але не можу сказати, як саме це зробити.
Гаразд, продовжимо з тими хто не переключився. Як побудувати макет сайту з допомогою елементів Div і стильових правил? Давайте подивимося. Природно, що імітувати роботу цього макета ми буде на локальному комп’ютері, просто зваливши всі потрібні нам файли в одну з його папок. Жодних хостингів і локальних серверів Денвер. Для розуміння принципів це буде зайвим.
Отже, приступаємо до верстки. Для початку створюємо і обзываем папку для зберігання файлів нашого майбутнього веб проекту, а потім створюємо всередині неї текстовий файлик з розширенням .html і назвою index. Також створюємо всередині цієї папки ще одну, яку обзываем CSS (в ній будуть жити наші зовнішні файли стилів).
Можна буде додати ще папку, куди будемо кидати картинки використовувані при верстці сайту, які будуть його частиною (фонові зображення). Попередньо раджу оптимізувати або, іншими словами, стиснути всі ці зображення по максимуму.
Ну, а тепер скопіюйте наведену трохи нижче «рибу» в свій index.html. Для роботи з кодом досить зручно використовувати універсальний редактор Notepad ++ з підсвічуванням, хоча, при оволодінні навиком роботи, більш функціональним рішенням може виявитися Дримвьювер:
Головна
Спочатку як завжди повинна йти директива doctype, призначення якої докладно описано за посиланням статті. Всередині тега meta ми вказуємо кодування тексту utf-8 для його правильної інтерпретації браузером, при відкритті в ньому нашого проекту. Кожен документ в мережі Інтернет повинен мати заповнений тег Title (заголовок сторінки), тому ми і його додали в «рибу».
Далі слід службова гіперпосилання link, з допомогою якого ми підключаємо зовнішній файл CSS стилів до цього Html документа (нюанси описані за наведеною посиланням).
Ну, а між тегами Body повинен розміщуватися, власне, контент, який буде вставлятися в файл безпосередньо (у разі статичного сайту, наприклад, як на Яндекс Народі), або ж опосередковано з бази даних (у разі динамічного сайту, на основі якої-небудь безкоштовної CMS (движка)).
Зрозуміло, що сайт є таким за визначенням приналежність всіх складових його документів до одного доменному імені, однак для відвідувачів головним аргументом буде служити схоже оформлення його веб сторінок, і саме це нам потрібно буде врахувати при верстці.
Отже, у нас повинен бути зовнішній файл зі стилями, який буде застосовуватися абсолютно до всіх сторінок. Але крім цього можуть існувати ще й додаткові CSS файли, що дозволяють, наприклад, різних розділах веб проекту виглядати трохи інакше.
У статті про пріоритети в CSS говорилося, що при інших рівних умовах буде виконуватися те правило, яке стоїть нижче в коді. Тому було б логічно підключати для сторінок розділів додатковий файлик зі стилями, який буде йти нижче в коді, наприклад, так:
…
Головна
…
У цьому випадку стильові правила з файлу розділу повинні будуть перебивати стилі основного файлика. Однак так не роблять, бо після закінчення верстки макету сайту (і, наприклад, підключення його до движка) Html код стає недоторканним і все, що ви будете мати право змінювати, це тільки код оформлення. Тому для реалізації описаної вище задачі існує більш зручний і обкатаний алгоритм.
Використовуємо директиву @import при верстці
Суть його полягає в використанні директиви @import, з допомогою якої з одного файлу CSS правилами можна буде підключити інший файл стильового оформлення. У цьому випадку наша верстка буде відповідати загальноприйнятим правилам. Отже, припустимо, що ми на початку osnovnoy.css прописуємо підключення загального файлика стильового оформлення:
@import url(obdhiy.css);
Синтаксис директиви @import саме такою і в ній використовується функціонал URL, всередині якого прописаний відносний шлях (читайте про відносні й абсолютні посилання в статті про URL) до файлу стилів, який нам потрібно викликати до життя (довантажити). У нашому випадку всі стильові файлики будуть лежати в одній папці, тому @import достатньо вказати лише назву.
Тепер при інтерпретації цього коду браузером користувача, на місце директиви @import встануть ті CSS правила, які в файлику obdhiy були вами прописані. Далі браузер вже буде розглядати правила з самого цього файлика osnovnoy, які при виникненні конфлікту будуть мати більший пріоритет в силу свого більш низького розташування в коді. Ось такі от маленькі хитрощі верстки сайту на простому прикладі.
Давайте почнемо верстати поетапно, ставлячи Html елементи в index.html і описуючи їх у загальному файлику obdhiy.css. У ньому поки залишимо лише одну директиву @import для виклику загального стильового файлу. Для початку поставимо один зовнішній контейнер, в якому будуть жити всі інші елементи нашого макета. Змінюючи або вирівнюючи такий контейнер ми буде здійснювати дії над усім макетом, а внутрішні елементи будуть під нього підлаштовуватися.
Головна
Відкриваємо і закриваємо теги Div, а також прописуємо в початковому тегу ID (унікальний ідентифікатор, а буває ще й CLASS) з найбільш улюбленим вам значенням (я вибрав «kont»). Використання саме ID обумовлено тим, що іншого такого контейнера у нас просто бути не може.
Значення цього ID буде служити селектором (читайте про них у наведеною у попередньому абзаці статті), який підкаже браузеру, що прописані для нього властивості слід застосовувати саме до цього зовнішнього контейнера. Перейдемо тепер до прописыванию даних правил для цього зовнішнього контейнера в obdhiy.css:
html {
background:#E5EFF4;
color:#555;
font:12px Verdana, Arial;
}
#kont {
width:960px;
height:400px;
background:#fff;
}
Спочатку прописані декілька стильових правил для тега Html можна було б і для Body), які задають деякі властивості для всього сайту. Background і color задають, відповідно, колір фону і тексту для всіх сторінок (читайте про способи задання кольору в Html і CSS код), правило font визначає шрифт і розмір шрифту, який буде використовуватися за замовчуванням, якщо для якихось елементів не буде описано font окремо.
Властивості Height і Width дозволяють задати ширину і висоту для нашого зовнішнього контейнера, в якому потім і буде жити макет. Висоту, звичайно ж, спеціально ставити не потрібно, бо вона в блочному елементі буде визначатися кількістю контенту, але поки що такого у нас не спостерігається, ми для наочності задамо висоту, ну і заодно білий фон для цього контейнера через background.
Давайте подивимося, що вийшло в підсумку (відкрийте для цього index.html в будь-якому браузері):
Тепер давайте вирівняємо наш макет по середині. Для цього досить задати margin зі значенням Auto. Для нашого макета контейнером буде в кінцевому підсумку область перегляду, і при значенні Auto як по вертикалі, так і по горизонталі, розумний браузер в першому випадку скине зовнішні відступи в нуль (по вертикалі), а ось по горизонталі він зробить відступи ліворуч і праворуч рівними, що нам якраз і потрібно.
#kont {
width:960px;
height:400px;
margin:auto;
background:#fff;
}
Повторюватися про 8 пікселів у тега Body не буду, бо ви самі зможете це прочитати, наприклад, в статті про правило Position. Якщо захочете цей відступ прибрати, то пропишіть у вашому стильовому файлі для селектора body margin:0.
Створюємо блоки для нашого майбутнього макета
Тепер давайте продовжимо верстку нашого сайту і додамо всередину елемента Div з id=kont (нашого зовнішнього контейнера для розміщення в ньому самого макета) ще три пари тегів Div вже з іншим ID і іншим функціональним призначенням — верхня, середня і нижня частина макета:
…
Вступні теги з «риби» я опустив, щоб не повторюватися, але ви їх, природно, залиште. Елементи з ID header і footer будуть у нашій верстці відповідати за «шапку» і «підвал» сайту. З серединкою ж буде трохи складніше, бо для її формування ми відразу ж використовуємо два блоки: з ID vnesh та вкладений в нього vnutr.
Залишилося тепер тільки описати в стильовому файлі obdhiy.css все це неподобство, інакше чотири елементи блокової верстки так і будуть йти на веб сторінці один під одним.
Т. к. наші блоки поки не будуть містити контенту, то ми їм тимчасово задамо висоту з допомогою Height (при цьому для блоку з ID kont висоту вже можемо прибрати за непотрібністю, але додамо для нього внутрішній відступ padding в десяток пікселів), а також кольоровий фон (для наочності) за допомогою все того ж правила Background.
#kont {
width:960px;
padding:10px;
margin:auto;
background:#fff;
}
#header {
height:100px;
background:#C0C000;
}
#footer {
height:100px;
background:#FFC0FF;
}
#vnesh{
margin:10px 0;
background:url(../images/right.png) repeat-y 100%;
}
#vnutr{
height:300px;
background:url(../images/left.png) repeat-y;
}
Середню частину нашого макета ми відсунули на десяток пікселів зверху і знизу (читайте про Margin (top, bottom, left, right) за наведеною трохи вище посиланню), а праворуч і ліворуч додаткового відступу не задавали (margin:10px 0;). В результаті отримаємо наступний макет:
Краса, та й тільки. Наступним етапом верстки стане створення колонок межах середньої області. Наше завдання полягає в тому, щоб отримати три колонки однакової висоти. Коли у фаворі була таблична верстка, то зробити це було не просто, а дуже просто, тому що клітинки таблиці td чи th) по висоті були один з одним пов’язані.
При верстці сайту на основі Div, ніякої по умовчанню зв’язку між блоками немає. Також очевидно, що без створення плаваючих елементів на основі CSS правила Float нам не обійтися. Але крім цього ми застосуємо ще ряд хитрощів, наприклад, використання в колонках фонових картинок (невеликих по висоті кольорових смужок потрібної ширини, які з допомогою стилів ми будемо повторювати по вертикалі).
У браузері internet explorer є обмеження на використання однієї фонової картинки для одного Html-елемента, тому нам і знадобилося для створення правої і лівої колонки створювати два вкладених блоку — vnutr і vnesh. Але давайте подивимося на прикладі, інакше пояснити буде важко.
Отже, в нашому способі верстки сайту, для створення правої і лівої колонки доведеться згадати, як працює збірне правило Background (див. посилання вище). Згадали? Тоді беремо заздалегідь підготовлені зображення кольорових смужок розміром, наприклад, 200 на 20 пікселів. Зазвичай такого типу графіку прийнято зберігати в форматі растрової графіки Png для отримання найкращого співвідношення розмір-якість.
Я, для прикладу, зробив смужки з градієнтною заливкою, щоб вони не асоціювалися з заливкою фону блокового елемента звичайним кольором (через background-color) і назвав їх left.png і right.png:
Як я вже говорив трохи вище, в тій папці, де у вас лежить index.html необхідно створити підпапку (наприклад, images) і закинути в неї наші смужки для лівої і правої колонок. Все, ґрунт для продовження верстки ми підготували і пора приступати до стильового оформлення наших майбутніх колонок трехколоночного макета.
Додаткові стильові правила потрібно буде прописати для селекторів vnutr і vnesh, прибравши заливку фону кольором з селектора vnutr, яку додали трохи раніше для більшої наочності:
#vnesh{
margin:10px 0;
background:url(../images/right.png) repeat-y 100%;
}
#vnutr{
height:150px;
background:url(../images/left.png) repeat-y;
}
Для блоку з ID vnesh ми призначили фоновим зображенням right.png, при цьому дозволивши йому копіювати себе по вертикалі (читайте про Background-repeat) і притиснувши його впритул до правого краю блоку (позиціонування по вертикалі нам не важливо, т. к. по цій осі здійснюється розмноження картинки — читайте про Background-position за наведеною трохи вище лінком).
Також зауважу, що шлях до фонового зображення в функціоналі URL задається з допомогою відносних посилань, суть яких ви зможете осягнути, перейшовши за наведеним вище посиланням. Ще дозволю собі навести схему позиціонування фонових зображень у відсотках з тієї самої статті про бекграунд для підвищення наочності:
Для блоку з ID vnutr ми призначили фоновим зображенням left.png, при цьому дозволивши йому копіювати себе по вертикалі і спозиционировав його у вкрай ліве положення, яке використовується за замовчуванням (позиціонування по вертикалі нам не важливо, т. к. по цій осі здійснюється розмноження картинки).
Якщо вам нічого з цього не зрозуміло, то доведеться грунтовно вивчити наведену статтю про бекграунд, а ми йдемо далі до чергового финту вухами в нашій розумною верстці.
Продовжуємо верстку і додаємо колонки в макет
Хоча і здається, що ми отримали те, що хотіли, проте це не так. Фонові картинки не є колонками для майбутнього контенту, на жаль і ах, але колонки нам ще належить створити. Для цього знову відкриваємо редагування index.html і додаємо три блоки Div всередину вже має блоку з ID vnutr. Не мудруючи лукаво, привласнимо їм цілком говорять ID — left, right і венеції:
…
… ліва колонка…
…права колонка…
…область контенту…
Так, я ще один блок додав ID rasporka, призначення якого стане зрозуміло по ходу справи. Щоб не ставити спеціально висоту для порожніх колонок, я додав у них якийсь маревний текст, який і дозволить нам наочно побачити колонки з контентом на веб сторінці, але тільки після того, як ми оформимо їх належним чином у нашому стильовому файлі obdhiy.css.
Я не буду повторювати код цього файлика, який ми вже створили раніше, а лише опишу правила, додані для знову створених блоків:
#left {
float:left;
width:200px;
}
#right {
float:right;
width:200px;
}
#center {
margin:0 210px;
}
}
Відразу обмовлюся, що настав час прибрати завдання висоти через Hight в селекторі vnutr, бо цю справу ми ставили для наочності. Ліву колонку ми змушуємо з допомогою CSS правила float плавати вліво, а правий — праворуч. Ширину колонок ми вибираємо рівною ширині фонових картинок right.png і left.png (в нашому випадку вона однакова і дорівнює 200px), про яких ми говорили трохи вище.
Ну, а для того, щоб контент центральної колонки не заїжджав на праву і ліву, задаємо для неї зовнішній відступ зліва та справа на величину рівну ширині цих крайніх колонок.
Однак, ви з власного досвіду знаєте, що коли текст впритул буде притискатися до краю, це не є добре. Вихід досить простий — задати відступ праворуч і ліворуч для центральної колонки на десяток пікселів побільше, тобто 210 замість 200:
Ну ось, фінал нашої верстки трехколоночного макета сайту вже близький до завершення, однак ще доведеться вирішити ряд проблем. Наприклад, при збільшенні кількості контенту в центральній колонці, буде пропорційно збільшуватися і висота всіх трьох колонок. Інша справа, що при збільшенні вмісту в правій або лівій колонці, відбудеться неприємну річ:
Ліва і права колонки представляють із себе плаваючі елементи, які за визначенням не взаємодіють з блочними тегами (DIV як раз є блочним, бо для нього за умовчанням прописано Display block).
Отже, переповнення лівої або правої колонки не викличе пропорційне збільшення блоків з ID vnutr і vnesh (плаваючі елементи на висоту своїх батьків або, іншими словами, контейнерів не впливають), а значить контент вилізе за їх межі, наїде на футер і взагалі вийде за межі макету. Біда.
Але у нас є четвертий блоковий елемент з ID podporka, який не містить жодного контенту (а значить і не буде видно на веб сторінці) і якій призначений саме для усунення цього казусу. У коді obdhiy.css ми пропишемо для цього селектора просте правило clear:both. Внаслідок цього блок з ID podporka придбає корисне нам властивість — він буде враховувати будь-який плаваючий перед ним елемент (мається на увазі, розташований вище в коді).
Т. о. при збільшенні вмісту в правій або лівій колонці відбудеться пропорційне зміщення вниз елемент з ID podporka, а оскільки цей тег вже не є плаваючим, то блоки з ID vnutr і vnesh будуть його враховувати і пропорційно збільшувати свій розмір по вертикалі:
Тепер начебто все працює правильно. Однак, наша верстка сайту ще не закінчена. Припустимо, що ми зробили в index.html таким чином макет головної сторінки, а ось для якого-небудь іншого розділу вигляд макету повинен буде відрізнятися (наприклад, там має бути не три, а тільки дві колонки). Як виходити з цієї ситуації?
Зрозуміло, що для цієї мети доведеться використовувати відмінний від index.html файл. Для цього вміст index.html можна скопіювати в новий файлик, наприклад, razdel.html, т. к. правити вже існуючий код буде простіше, ніж писати його заново.
Ну і файлик з каскадними таблицями стилів нам доведеться новий використовувати, наприклад, razdel.css. Ось саме в них ми і будемо вносити зміни, а заодно подивимося детальніше, як саме використовувати директиву @import в таких випадках.
Давайте почнемо з razdel.html:
Розділ
…
Ми змінили заголовок сторінки Title і поміняли назву підключається файлика стилів на razdel.css. При цьому, природно, необхідно буде в папці CSS цей самий файл стильової розмітки створити. Насмілюся вам нагадати, що для index.html ми підключали стильову розмітку через osnovnoy.css, в якому була прописана одна єдина директива @import для завантаження правил з файлика obdhiy.css:
@import url(obdhiy.css);
Ми не будемо оригінальними в нашій розумною версті і на самому початку нового (ще порожнього) стильового файлу пропишемо абсолютно таку ж директиву. Тим самим ми отримаємо знову-таки трехколоночный макет, однак, дописавши трохи пізніше всього кілька правил, ми запросто перетворимо його в двухколоночный. Навіть не так. Ми створимо ще один файлик в папці CSS з назвою dvekolonki.css і наступним змістом:
#right {
display:none;
}
#center {
margin-right:0;
}
#vnesh {
background-image: none;
}
Що ми зробили? Ми заборонили показувати праву колонку на веб сторінки за допомогою display:none. Так само ми прибрали зовнішній відступ праворуч для центральної колонки, бо в ньому вже немає необхідності. Ну і на завершення ми заборонили показувати фонову картинку все в тій же правій колонці. Загалом, ми цю праву колонку в нашому макеті розділу повністю буде.
Ну ось, тепер для завершення верстки двухколоночного макета залишилося тільки цей самий dvekolonki.css підключити в файлику razdel.css, остаточне вміст якого буде виглядати так:
@import url(obdhiy.css);
@import url(dvekolonki.css);
Всі правила, які стоять у коді нижче (dvekolonki.css), будуть мати більш високий пріоритет, а значить саме їх дійство ми і буде спостерігати на веб сторінці. В результаті при відкритті razdel.html ви вже зможете спостерігати двухколоночный варіант макету:
Власне, додаткової нашим завданням було розглянути варіанти використання директиви @import в сучасній верстці сайтів, з чим, я вважаю, ми впоралися.
Тепер ще залишилося продемонструвати роботу директиви @media, про яку я згадав на початку статті. До верстки вона має вельми опосередковане відношення, але все ж не сказати про неї було б, напевно, недалекоглядно.
Верстка макету для друку за допомогою директиви @media
Директива @media може стати в нагоді не вам, а вашим читачам, які захочуть роздрукувати вебсторінку без всяких там графічних вишукувань і зайвої інформації. Користувачам при цьому потрібен буде лише контент, який розташований в центральній колонці. Шапка, футер, ліві та праві колонки йому не потрібні — тільки текст статті.
При попередньому перегляді друку в будь-якому з сучасних браузерів можна, звичайно ж, відключити друк фону, тобто колірного оформлення, але оглядач не завжди зможе самостійно відокремити зерна (контент) від полови (навігації), тому нам доведеться йому в цьому допомогти, щоб не сподіватися на «авось».
Крім того, при друку пропаде те основне, що робить Інтернет таким популярним — можливість переходу за гіперпосиланнями на інші сторінки. На папері всі ваші гіперпосилання стануть абсолютно не інформативними, якщо про це не подбати заздалегідь. Давайте додамо в наш трехколоночный макет гіперпосилання та подивимося, як це все буде виглядати при спробі надрукувати веб-сторінку.
Таким чином користувач, распечатавший таку вебсторінку, ніколи не дізнається, а який блог все ж є найкращим. Отже, давайте займемося нюансами верстки для друку, і в цьому нам допоможе вже згадана директива @media.
Є дві можливості вказати за допомогою media те, для якого саме пристрої потрібно застосовувати ці стилі. Можна вказати атрибут media в тезі Link, з допомогою якого підключаються зовнішні стильові файлики. Але в цьому випадку браузер буде робити зайвий запит до сервера, що не є добре. Проте, такий спосіб має право на життя і виглядати це неподобство буде приблизно так:
У атрибута media можна використовувати й інші значення:
У наведеному трохи вище прикладі ми, з допомогою атрибута Media, підключили до веб документом окремий файл стилів для показу і окремий для виводу на друк.css). Нам якраз подібне і потрібно реалізувати в цьому уроці верстки, але краще зробити це трохи іншим способом, з використанням саме директиви @media прописаної у файлі стилів.
Якщо ви звернули увагу, то при такому способі верстки, який вибрали ми (з використанням @import), у нас є загальний файлик стилів, який підключається завжди через цю саму директиву — obdhiy.css. Ось саме в ньому ми і почнемо чаклувати.
@media має свій власний синтаксис:
@media screen tv{
набір селекторів і правил, які будуть виконуватись тільки в разі виведення веб сторінки на зазначені трохи вище через кому пристрої
}
У нашому файлику obdhiy.css не будемо укладати всі вже наявні правила всередину директиви @media screen, достатньо в самому його кінці просто дописати необхідні CSS правила для виведення документа на друк за допомогою @media print:
@media print{
*{
color:#000 !important;
background:transparent !important;
}
html {
font:10pt serif;
}
#footer, #header, #left, #right {
display:none;
}
#center {
margin:0;
}
a[href]:after{
content:» (» attr(href) «)»;
}
}
Якщо ви пам’ятаєте, то селектор * означає застосування всіх цих стильових правил для абсолютно всіх елементів Html коду. Правда такий селектор має мінімальне з можливих пріоритетів, тому задаючи колір для всіх елементів чорним, а фон прозорим, з допомогою правил і background color, ми змушені не доводити справу до підрахунку пріоритетів за допомогою установки !important.
Для селектора Html ми прописали завдання умолчательного шрифту в абсолютних одиницях pt (пунктах), бо принтера так зрозуміліше. Ну і шрифт поставили будь-із зарубками (serif). C допомогою display:none ми заборонили відображення обваження (шапки, футера і колонок), а з допомогою margin:0 дозволили контенту з середньої колонки займати весь доступний простір по ширині.
Останній селектор a[href]:after заковырист і, щоб краще зрозуміти, про що саме він говорить, раджу пробігтися по наступним публікацій про селектори атрибутів ([href]) і селектори псевдоелемент (after). Але потрібен він нам досить простої мети — побачити на папері, куди саме ведуть гіперпосилання.
Псевдоэлемент after дозволяє здійснювати генерацію контенту під час побудови документа браузером. After дозволить нам додати URL-адресу гіперпосилання відразу після того місця, де ця сама посилання проставлена. Робиться це за допомогою спеціального CSS правила content, який працює тільки для двох псевдоелемент: after та before.
Всередині правила content ми прописуємо в лапках пробіл і відкриває круглу дужку, а потім через пробіл додаємо зміст атрибута href гіперпосилання за допомогою спеціального функціоналу attr. Закінчуємо все це неподобство закриває круглою дужкою, взятої в лапки і відокремленою пропуском.
Т. о. ми зібрали додатковий контент на веб сторінці з трьох шматочків — відкриваюча і закриваюча дужки плюс значення атрибута Href. Ну ось, нарешті, ми можемо подивитися на результати нашої верстки сайту для друку:
Як бачите, нічого зайвого крім контенту середньої колонки, плюс ще відображаються URL всіх наявних на сторінці гіперпосилання. Що і потрібно було довести. Треба це вам чи ні — судити не мені. Проте, якщо підходити до справи по-серйозному, то навіть про зручність друку сайту на принтері користувача замислюватися варто, особливо якщо сайт створений комерційний і лояльність користувачів дуже важлива.
Удачі вам! До зустрічей на сторінках блогу
