ПЕРЕЛІК ДИСЦИПЛІН:
  • Адміністративне право
  • Арбітражний процес
  • Архітектура
  • Астрологія
  • Астрономія
  • Банківська справа
  • Безпека життєдіяльності
  • Біографії
  • Біологія
  • Біологія і хімія
  • Ботаніка та сільське гос-во
  • Бухгалтерський облік і аудит
  • Валютні відносини
  • Ветеринарія
  • Військова кафедра
  • Географія
  • Геодезія
  • Геологія
  • Етика
  • Держава і право
  • Цивільне право і процес
  • Діловодство
  • Гроші та кредит
  • Природничі науки
  • Журналістика
  • Екологія
  • Видавнича справа та поліграфія
  • Інвестиції
  • Іноземна мова
  • Інформатика
  • Інформатика, програмування
  • Юрист по наследству
  • Історичні особистості
  • Історія
  • Історія техніки
  • Кибернетика
  • Комунікації і зв'язок
  • Комп'ютерні науки
  • Косметологія
  • Короткий зміст творів
  • Криміналістика
  • Кримінологія
  • Криптология
  • Кулінарія
  • Культура і мистецтво
  • Культурологія
  • Російська література
  • Література і російська мова
  • Логіка
  • Логістика
  • Маркетинг
  • Математика
  • Медицина, здоров'я
  • Медичні науки
  • Міжнародне публічне право
  • Міжнародне приватне право
  • Міжнародні відносини
  • Менеджмент
  • Металургія
  • Москвоведение
  • Мовознавство
  • Музика
  • Муніципальне право
  • Податки, оподаткування
  •  
    Бесплатные рефераты
     

     

     

     

     

     

         
     
    CSS: правильне використання - запорука успіху
         

     

    Інформатика, програмування

    CSS : правильне використання - запорука успіху

    Михайло Дубаков

    Починаємо свій шлях до майстерності. Він буде досить довгим і непростим, але ви впораєтеся, якщо у вас є мета. Принаймні, до цього моменту ви вже володієте певним багажем знань, достатнім для застосування на практиці. Однак використовувати CSS можна по-різному. Мета цього розділу - навчити вас застосовувати CSS правильно. Повірте, це не так просто, як здається на перший погляд. Адже можна просто особливо не задумуючись написати таблицю стилів з безліччю класів і непотрібних оголошень, яка буде коректно працювати. Але така таблиця стилів буде неоптимальною і незручною. Неоптимальною тому, що її можна значно скоротити і зменшити об'єм, що важливо. Незручною тому, що розбиратися в неврегульованих нагромадженні класів досить складно. Взагалі жорстких правил при написанні таблиці стилів ні, тому що написати стиль можна по-різному і це буде працювати, однак є безліч рекомендацій. Крім того, можна все ж виділити одну головну правило, яке завжди треба застосовувати при використанні CSS.

    Правило

    Перш ніж написати якийсь стиль або ввести новий клас, задумайтеся, чи не можна оптимізувати і порядок код іншим способом. Зробити так, щоб не вводити цей клас або ввести максимально широко. Логіка - незамінний помічник будь-якого професійного веб-майстра. Запам'ятайте це.

    Отже, переходимо безпосередньо до розгляду способів, завдяки яким ви істотно полегшите код і власне життя.

    Форматування таблиць стилів

    Головне вимога - у таблиці стилів повинен бути порядок. Візьмемо приклад з попередньої голови. Ось ця таблиця:

    P (color: # 000; font: x-small Verdana)

    BODY (background: # FFF)

    # mainmenu A (color: # 000; font: bold small Arial)

    H3 (color: # 000; font-family: Arial)

    . back (background: url (img/fragment_3.gif) no-repeat;)

    # submenu A (color: # FFF; font: bold xx-small Arial)

    . bluecol (background: # 1d3d4e)

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

    Врахуйте, що ця таблиця дуже маленька, а у великій невпорядкованою таблиці розібратися буде ще складніше. Якщо спробувати мислити логічно, то можна вивести декілька правил, які допоможуть організувати таблицю стилів.

    Як ви пам'ятаєте, існує кілька типів селектор: елементи, класи, ID. Так що якщо формувати блоки за типами селектор вже буде якийсь рівень організованості. Перше правило організації таблиць.

    Рада

    Розділіть селектори, тобто сформуйте перший блок з селектор по елементах, другий блок з селектор по класах, а третій блок з селектор по ID. Блоки один від одного можна відокремлювати додатковим перекладом рядки.

    В нашому випадку блок селектор по елементах буде складатися з H3, P і BODY, другий блок з селектор по класах буде складатися з. back і. bluecol, третій блок з селектор по ID складатиметься з # mainmenu і # submenu. А таблиця стилів буде виглядати так:

    BODY (background: # FFF)

    H3 (color: # 000; font-family: arial)

    P (color: # 000; font: x-small Verdana)

    . back (background: url (img/fragment_3.gif) no-repeat;)

    . bluecol (background: # 1d3d4e)

    # mainmenu A (color: # 000; font: bold small arial)

    # submenu a (color: # fff; font: bold xx-small arial)

    Крім того, у кожному блоці селектори треба розставити у алфавітному порядку. На першій погляд, це не дуже сильно впорядкує таблицю стилів, проте є досить вагома причина дотримувати таке правило. На перших порах вам буде абсолютно всі одно, в якому порядку розташовані селектори в трьох блоках, проте поступово ви звикнете розташовувати селектори саме в алфавітному порядку, внаслідок чого в своїх таблицях стилів будете орієнтуватися легко, і швидко знаходити необхідні правила. Ви будете підсвідомо відчувати, що селектор. Back знаходиться на початку блоку селектор по класах, тому що починається з літери b, а селектор. vis - в кінці, тому що починається з букви v.

    Окремо узяте правило теж можна записати по-різному. Часто замість того, щоб записувати правило в один рядок

    P (color: # 000; font-size: 12px; padding-left: 1em)

    використовують запис у кілька рядків:

    P (

    color: # 000;

    font-size: 12px;

    padding-left: 1em)

    Робиться це для полегшення перегляду таблиці стилів. На мій погляд, писати кожне оголошення з нового рядка краще тільки для невеликих таблиць, тому що велика таблиця стилів при такій формі запису розтягнеться на кілька екранів, і пошук потрібного оголошення тільки затрудняється.

    Для наочності запис стилів у кілька рядків використовується в даній книзі. Це поліпшує сприйняття, тому що довгих лістингів коду мало.

    Що стосується самих властивостей, то для них ви можете встановити свої власні правила. Давайте розглянемо два зовсім маленькі таблиці стилів.

    Перша:

    P.emphasize (

    font-size: 14px;

    text-indent: 1em;

    color: # 000;

    font-style: italic)

    TD (

    font-style: italic;

    color: # 000;

    font-size: 14px)

    Друга:

    P.emphasize (

    color: # 000;

    font-style: italic;

    font-size: 14px;

    text-indent: 1em)

    TD (

    color: # 000;

    font-style: italic;

    font-size: 14px)

    А тепер уважно порівняйте їх і дайте відповідь на питання, яка структурована краще і чому? Подумайте дві хвилини, не читайте далі.

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

    Для себе ви можете виробити який завгодно порядок розташування властивостей, однак при написанні таблиць стилів ви повинні суворо його дотримуватися. Наприклад, я завжди на першому місці ставлю колір, на другому - властивості шрифту, на третьому - властивості тексту, а потім поля, відступи і рамки. Повторюю, спочатку порядок може бути будь-яким, головне, щоб ви його суворо дотримувалися і поступово звикали до нього.

    Рада

    Сформулюйте раз і назавжди свої власні правила структури таблиці стилів і дотримуйтесь їх неухильно. Звичка - потужний інструмент збільшення продуктивності.

    Імена класів і ID

    При верстці вам частенько доведеться вводити нові класи і якось їх називати. Природним чином виникає бажання, щоб назви були короткими і логічними. Якщо клас для заголовків розділу назвати head1, то це буде досить логічно і коротко, а якщо bigblacktext - Нелогічно і довго. Звичайно, часто зустрічаються ситуації, коли не виходить придумати відповідну коротку назву, тоді доводиться чимось жертвувати: або завдовжки, або логічністю. Особисто я вважаю за краще жертвувати логічністю, тому що у своєму коді я розберуся завжди. Однак якщо над проектом працює кілька HTML-верстальників і кожний з них створює будь-яку частину сайту, то краще жертвувати довжиною, тому що в цьому випадку логічність набагато важливіше. Погодьтеся, далеко не кожен зрозуміє, що клас aa позначає, наприклад, відступ праворуч на 10 пікселів, тоді як клас rightpad10 про це свідчить досить однозначно. Взагалі вам весь час доведеться балансувати на межі між обсягом і логікою, важливо зберігати баланс в більшості випадків і чітко уявляти собі, коли його можна порушити. Порушити його можна у двох випадках.

    Якщо ви професіонал і працюєте над HTML-кодом сайту поодинці.

    Якщо вам до зарізу треба максимально зменшити об'єм коду і важливим стає кожен зайвий байт.

    Більше про правила форматування таблиць стилів нічого сказати не можна. Перейдемо до того, як створювати оптимізовані таблиці.

    Оптимізація таблиць стилів

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

    незначно прискорюється завантаження сторінок;

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

    Як бачите, не варто чекати від оптимізації якихось чудес, але й нехтувати їй не потрібно, тому що це характеризує вас як професіонала і показує ваше ставлення до справи. Власне кажучи, прагнення до оптимізації коду - одна з характерних рис професійних HTML-верстальників.

    Існує кілька правил, які можуть допомогти вам написати оптимізовану таблицю стилів.

    Стилі за замовчуванням

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

    , наведений нижче

    P (

    font-style: normal;

    letter-spacing: normal;

    text-decoration: none)

    взагалі не має сенсу, тому що всі ці значення для елементів

    встановлені за замовчуванням. Навіщо ж їх вказувати явно? Звичайно, можливі випадки, коли треба переписати встановлений раніше стиль. Наприклад, ви хочете, щоб всі елементи

    були підкресленими і пишіть стиль:

    H1 (

    text-decoration: underline;)

    Але раптом вам знадобилося, щоб деякі з заголовків першого рівня виводилися неподчеркнутимі. Для цього вам доведеться ввести якийсь додатковий клас. Наприклад, такий:

    H1.nounderline (

    text-decoration: none)

    Те Тобто ви перше правилом переписали значення за замовчуванням для елементів

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

    Правило

    Не вказуйте в таблиці стилів значень, які є для цього елемента значеннями за замовчуванням.

    Скорочені форми запису

    Другий спосіб скоротити обсяг таблиці стилів - використання скорочених форм запису деяких властивостей. У таблиці вони систематизовані.        

    Скорочена форма         

    Вхідні властивості             

    font: italic small-caps 12px/140% Tahoma,   sans-serif         

    font-style: italic   

    font-variant: small-caps   

    font-weight: normal   

    font-size: 12px   

    line-height: 140%   

    font-family: Tahoma, sans-serif             

    margin: 1em 2em 0 1em         

    margin-top: 1em   

    margin-right: 2em   

    margin-bottom: 0em   

    margin-left: 1em             

    padding: 10px 20px         

    padding-top: 10px   

    padding-right: 20px   

    padding-bottom: 10px   

    padding-left: 20px             

    border: 1px solid # 000   

    border-top: 1px solid # 000   

    border-right: 1px solid # 000   

    border-bottom: 1px solid # 000   

    border-left: 1px solid # 000         

    border-width: 1px   

    border-style: solid   

    border-color: # 000             

    background: url ( "backgr.gif") # FFF   repeat-x         

    background-color: # FFF   

    background-image: url ( "backgr.gif")   

    background-repeat: repeat-x   

    background-attachment: scroll   

    background-position: 0px 0px     

    Використання скорочених форм запису є справою досить корисним і потрібним, тому що обсяг таблиці стилів при цьому значно зменшується. Це видно вже з порівняння правого і лівого стовпців табл. 5.1, але щоб остаточно вас переконати, я наведу ще один нескладний приклад. Хай нам треба створити блок rule, який має чорну рамку товщиною один піксель і внутрішні відступи величиною 10 пікселів. Ширина блоку буде 300 пікселів, а текст в ньому буде виводитися напівжирним шрифтом Verdana розміром 12 пікселів. Якщо не користуватися скороченими формами запису взагалі, то код буде такий:

    # rule (

    font-family: Verdana, sans-serif;

    font-weight: bold;

    font-size: 12px;

    width: 300px;

    border-top: 1px solid # 000;

    border-right: 1px solid # 000;

    border-bottom: 1px solid # 000;

    border-left: 1px solid # 000;

    padding-top: 10px;

    padding-right: 10px;

    padding-bottom: 10px;

    padding-left: 10px)

    Скористаємося скороченими формами запису, і правило для блоку у нас вийде таке:

    # rule (

    font: bold 12 px Verdana, sans-serif;

    width: 300px;

    border: 1px solid # 000;

    padding: 10px)

    Перше правило займало 290 байт, а друга всього 96. Вага зменшився в три рази, тобто оптимізація досягла 300%! Звичайно, цей приклад показує що буде, якщо не використовувати скорочень взагалі, але тим не менше він абсолютно реальний і вам частенько доведеться створювати дуже схожі блоки, так що прийміть до уваги ці 300%.

    Угрупування

    Для оптимізації таблиць стилів треба з розумом застосовувати угруповання. Як ви вже знаєте, угруповання - це об'єднання селектор з однаковими оголошеннями. Однак з цього визначення не випливає досить неочевидне твердження, що групувати селектори можна тільки в тому випадку, якщо вони містять абсолютно однакові оголошення. Наприклад, у нас є така таблиця стилів:

    P (

    color: # 000;

    font: 14px Tahoma, Verdana, sans-serif)

    TD (

    color: # 000;

    font: 14px Tahoma, Verdana, sans-serif)

    P (

    text-indent: 2em)

    BODY (

    color: # 000;

    font: 14px Tahoma, Verdana, sans-serif)

    Її можна оптимізувати так:

    P, TD, BODY (

    color: # 000;

    font: 14px Tahoma, Verdana, sans-serif)

    P (

    text-indent: 2em)

    Вийшло дуже компактно, але зате логіка таблиці стилів сильно постраждала. Якщо вам знадобиться змінити будь-яке оголошення в елементі

    , то у великій таблиці ви його можете шукати дуже довго, тому що селектори на цей елемент будуть розташовуватися в різних місцях. Запам'ятайте правило.

    Правило

    Всі оголошення для одного і того ж елемента повинні перебувати в одному місці

    Це означає, що в нашому прикладі ми можемо об'єднати тільки селектори на елементи і

    , а селектори на елемент

    треба звести в один, як того вимагає правило:

    BODY, TD (

    color: # 000;

    font: 14px Tahoma, Verdana, sans-serif)

    P (

    color: # 000;

    font: 14px Tahoma, Verdana, sans-serif;

    text-indent: 2em)

    Крім того, якщо ви захочете, скажімо, додати до таблиці стилів фон сторінки, то доведеться розбити групу селектор BODY і TD, тому що стилі до них вже не будуть зовсім однакові. Вот нам, приміром, знадобилося додати фоновий колір на елемент . Тоді доведеться розбити групу, і таблиця стилів буде виглядати так:

    BODY (

    color: # 000;

    background-color: # CCC;

    font: 14px Tahoma, Verdana, sans-serif)

    TD (

    color: # 000;

    font: 14px Tahoma, Verdana, sans-serif)

    P (

    color: # 000;

    font: 14px Tahoma, Verdana, sans-serif;

    text-indent: 2em)

    Рядкові та прописні

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

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

    Оптимізація на практиці

    Вихідна таблиця у нас страшно неорганізована і заплутана:

    A: link (font-weight: bold; COLOR: black)

    A: visited (font-weight: bold; COLOR: # 555555)

    A: active (font-weight: bold; COLOR: # FF0000)

    A: hover (font-weight: bold; COLOR: # FF0000)

    # lnk A: link (color: # 666666)

    # lnk A: visited (color: # 666666)

    # lnk A: active (color: # ff9900)

    # lnk a: hover (color: # ff9900)

    BODY (MARGIN: 0px; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px) . imgnews (margin-right: 12px)

    CODE (color: # 00C; font-family: courier new)

    em (font-weight: bold; font-style: normal; color: black)

    . norm (color: # 555; FONT: 12px verdana, helvetica, Sans-serif)

    p (text-align: justify; color: # 555; FONT: 12px verdana, sans-serif)

    input (border: 1px solid black; margin: 1px 2px)

    TEXTAREA (border: 1px solid black; margin-top: 1px; margin-left: 2px; margin-bottom: 1px; margin-letf: 2px)

    . EXAMPLE (background-color: # eeeeee; padding: 20px; BORDER: 1px dotted black)

    Розібратися в ній непросто. Як бачите, тут порушені всі правила, що описані в цьому розділі. Почнемо всі виправляти і впорядковувати. Перш за все розіб'ємо таблицю стилів на три блоки по селектору: елементи, класи, ID, а в кожному блоці розташуємо селектори в алфавітному порядку. Цифри позначають порядковий номер рядка і до самої таблиці стилів не відносяться. Вийде так:

    1. A: link (font-weight: bold; COLOR: black)

    2. A: visited (font-weight: bold; COLOR: # 555555)

    3. A: active (font-weight: bold; COLOR: # FF0000)

    4. A: hover (font-weight: bold; COLOR: # FF0000)

    5. BODY (MARGIN: 0px; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px)

    6. CODE (color: # 00C; font-family: courier new)

    7. em (font-weight: bold; font-style: normal; color: black)

    8. input (border: 1px solid black; margin: 1px 2px)

    9. p (text-align: justify; color: # 555; FONT: 12px verdana, sans-serif)

    10. TEXTAREA (border: 1px solid black; margin-top: 1px; margin-right: 2px; margin-bottom: 1px; margin-letf: 2px)

    11. . EXAMPLE (background-color: # eeeeee; padding: 20px; BORDER: 1px dotted black)

    12. . imgnews (margin-right: 12px)

    13. . norm (color: # 555; FONT: 12px verdana, helvetica, Sans-serif)

    14. # lnk A: link (color: # 666666)

    15. # lnk A: visited (color: # 666666)

    16. # lnk A: active (color: # ff9900)

    17. # lnk a: hover (color: # ff9900)

    Ходімо далі. Для початку займемося правилами для посилань, які знаходяться в рядках 1-4. Заздалегідь домовимося, що в оголошеннях стилів спочатку буде йти колір і фон, потім шрифт, потім поля і відступи. Отже:

    перенесемо на початок оголошення кольору;

    властивість COLOR запишемо малими літерами;

    замість позначення чорного кольору словом black запишемо # 000;

    інші значення скоротимо так: # 555555 поміняємо на # 555, # FF0000 поміняємо на # F00.

    Вийде ось що:

    1. A: link (

    color: # 000;

    font-weight: bold)

    2. A: visited (

    color: # 555;

    font-weight: bold)

    3. A: active (

    color: # F00;

    font-weight: bold)

    4. A: hover (

    color: # F00;

    font-weight: bold)

    Зауважте, що останні два селектора мають абсолютно однакові оголошення, так що можна сміливо їх згрупувати:

    1. A: link (

    color: # 000;

    font-weight: bold)

    2. A: visite (

    color: # 555;

    font-weight: bold)

    3. A: active, A: hover (

    color: # F00;

    font-weight: bold)

    Займемося рядків 5-7:

    5. BODY (MARGIN: 0px; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px)

    6. CODE (color: # 00C; font-family: courier new)

    7. em (font-weight: bold; font-style: normal; color: black)

    Оголошення стилів на елемент містить чотири відступу, причому всі вони мають значення 0, так що можна сміливо замість всіх чотирьох відступів використовувати скорочену форму запису, крім того, треба переписати всі властивості малими літерами:

    5. BODY (

    margin: 0px;

    padding: 0px)

    В шостий рядку на перший погляд все правильно, однак у властивості font-family зазначений тільки один шрифт. Зазначимо, крім нього, ще й шрифтове сімейство, в даному випадку це monospace. Крім того, назви шрифтів з двох і більше слів рекомендується укладати в лапки:

    6. CODE (

    color: # 00C;

    font-family: "Сourier new", monospace)

    В сьомий рядку запишемо назва селектора em великими літерами, перемістив в початок властивість color і замінимо значення black на # 000.

    7. EM (

    color: # 000;

    font-weight: bold;

    font-style: normal)

    Тепер розглянемо рядки 8-10:

    8. input (border: 1px solid black; margin: 1px 2px)

    9. p (text-align: justify; color: # 555; FONT: 12px verdana, sans-serif)

    10. TEXTAREA (border: 1px solid black; margin-top: 1px; margin-right: 2px; margin-bottom: 1px; margin-letf: 2px)

    Восьма рядок практично правильна, треба тільки переписати селектор input великими літерами. У рядку 9 треба:

    селектор p замінити на P;

    перенести в кінець правила властивість text-align;

    переписати властивість FONT малими літерами.

    Вийде так:

    9. P (

    color: # 555;

    font: 12px Verdana, sans-serif;

    text-align: justify)

    В десятому рядку можна дещо скоротити. Зауважте, що верхнє і нижнє поля мають значення 1 піксель, а ліве і праве - 2 піксела. Це можна записати скорочено за допомогою оголошення margin: 1px 2px. Крім того, треба в оголошенні рамок поміняти значення кольору black на # 000. Тоді десятий рядок буде такий:

    10. TEXTAREA (

    border: 1px solid # 000;

    margin: 1px 2px)

    А зараз порівняйте виправлені рядка 8 і 10. Вони абсолютно однакові, тобто можна згрупувати селектори INPUT і TEXTAREA:

    8. INPUT, TEXTAREA (

    border: 1px solid # 000;

    margin: 1px 2px)

    З блоком селектор по елементах ми розібралися, так що перейдемо до класів:

    11. . EXAMPLE (background-color: # eeeeee; padding: 20px; BORDER: 1px dotted black)

    12. . imgnews (margin-right: 12px)

    13. . norm (color: # 555; FONT: 12px verdana, helvetica, Sans-serif)

    Тут треба в рядку 11 переписати назву класу EXAMPLE і властивість BORDER малими літерами, а також написати значення кольору в скороченій формі. Рядок 12 тепер повністю коректна. А в рядку 13 треба переписати властивість FONT малими літерами:

    11. . example (

    background-color: # EEE;

    border: 1px dotted # 000;

    padding: 20px)

    12. . imgnews (

    margin-right: 12px)

    13. . norm (

    color: # 555;

    font: 12px Verdana, Helvetica, sans-serif)

    Залишився блок контекстних селектор:

    14. # lnk A: link (color: # 666666)

    15. # lnk A: visited (color: # 666666)

    16. # lnk A: active (color: # ff9900)

    17. # lnk a: hover (color: # ff9900)

    Тут треба тільки записати кольору у скороченій формі і згрупувати селектори 14 і 15, а також 16 і 17:

    14. # lnk A: link, # lnk A: visited (

    color: # 666)

    15. # lnk A: active, # lnk A: hover (

    color: # F90)

    Вся оновлена таблиця стилів буде виглядати наступним чином:

    1. A: link (

    color: # 000;

    font-weight: bold)

    2. A: visited (

    color: # 555;

    font-weight: bold)

    3. A: active, A: hover (

    color: # F00;

    font-weight: bold)

    5. BODY (

    margin: 0px;

    padding: 0px)

    6. CODE (

    color: # 00C;

    font-family: "Courier new", monospace)

    7. EM (

    color: # 000;

    font-weight: bold;

    font-style: normal)

    8. INPUT, TEXTAREA (

    border: 1px solid # 000;

    margin: 1px 2px)

    9. P (

    color: # 555;

    font: 12px Verdana, sans-serif;

    text-align: justify)

    11. . example (

    background-color: # EEE;

    border: 1px dotted # 000;

    padding: 20px)

    12. . imgnews (

    margin-right: 12px)

    13. . norm (

    color: # 555;

    font: 12px Verdana, Helvetica, sans-serif)

    14. # lnk A: link, # lnk A: visited (

    color: # 666)

    15. # lnk A: active, # lnk A: hover (

    color: # F90)

    Як бачите, таблиця стилів стала значно більш структурованою і читається. Крім того, первісна таблиця важила 877 байт, а оптимізована таблиця важить 677 байт (якщо прибрати переклади рядків і зайві пробіли перед кожним оголошенням). Ми змогли зменшити вагу таблиці стилів на 23%, що само по собі не так уже й мало. До того ж вона стала більш логічною, так що тепер знайти потрібне оголошення або селектор не складе труднощів. Це і є мета цього розділу -- навчитися створювати легко прочитувані і компактні таблиці стилів, а також оптимізувати старі, вже створені раніше.

    Сподіваюся, ви візьмете на озброєння описані способи організації та оптимізації таблиць стилів, тому що в іншому випадку створені вами таблиці будуть виглядати непрофесійно. Прагнення до досконалості - гарна якість. Ця голова є однієї, нехай і маленької, але все ж таки сходинкою на шляху до нього.

    Список літератури

    Для підготовки даної роботи були використані матеріали з сайту http://www.webmascon.com/

         
     
         
    Реферат Банк
     
    Рефераты
     
    Бесплатные рефераты
     

     

     

     

     

     

     

     
     
     
      Все права защищены. Reff.net.ua - українські реферати ! DMCA.com Protection Status