Урок 11

Каскадні таблиці стилів. Стильове оформлення тексту


  • CSS Wikipedia
  • Мова таблиць CSS
  • Стили текста



    • ВЛАСТИВОСТІ ШРИФТУ
    font-family
    Використовується для вказівки шрифту або шрифтового сімейства, яким буде відображатися елемент.
    P {font-family: Times New Roman, sans-serif;}
    font-weight
    Визначає ступінь жирності шрифту за допомогою трьох параметрів: lighter, bold, bolder
    B {font-weight: bolder;}
    font-size
    Встановлює розмір шрифту. Параметр може вказуватися як у відносній (відсотки), так і абсолютну величину (пункти, пікселі, сантиметри)
    H1 {font-size: 200%;}
    H2 {font-size: 150px;}
    H3 {font-size: 400pt;}

    КОЛІР ЕЛЕМЕНТУ ТА КОЛЬОРИ ФОНУ
    color
    Визначає колір елемента
    I {color: yellow;}
    background-color
    Встановлює колір фону для елементу - саме для елемента, а не для сторінки. Зверніть увагу, що браузери відображають цю властивість по-різному

    <HTML>
    <HEAD>
    <TITLE> Приклад використання CSS </ TITLE>

    <STYLE type = "text / css">
    H1 {font-size: 300%; }
    </ STYLE>
    </ HEAD>

    <BODY bgcolor = white>
    <center> <BR>
    <H1 style = "background-color: teal; color: white; "> Cascading </ H1>
    <H1 style =" background-color: navy; color: yellow; "> Style </ H1>
    <H1 style =" background-color: gold; color: brown; "> Sheets </ H1>
    </ BODY>
    </ HTML>

    У цьому прикладі в розділі <STYLE> всіх елементів <Н1> на цій сторінці було встановлено розмір 300% від норми. Потім кожному з елементів <H1> були привласнені власні значення кольору фону і кольору символів.

    ВЛАСТИВОСТІ АБЗАЦУ
    text-decoration
    Встановлює ефекти оформлення абзацу, такі, як підкреслення або закреслений текст

    H4 {text-decoration: underline;}
    A {text-decoration: none;}
    .wrong {text-decoration: line-through;}
    text-align
    Визначає вирівнювання елементу
    P {text-align: justify}
    H1 {text-align: center}
    text-indent
    Встановлює відступ першого рядка тексту. Найчастіше використовується для створення параграфів та відступів перших рядків.
    P {text-indent: 50pt;}
    line-height
    Керує інтервалами між рядками тексту в межах абзацу
    P {line-height: 50%}

    ОДИНИЦІ ВИМІРЮВАННЯ
    px
    Піксели
    cm
    Сантиметри
    mm
    Міліметри
    pt
    Пункти
    (друкар.)%
    Відсотки


    Створимо стиль для заголовка статті:

    H2
    {font-family:Verdana, Arial Cyr, Arial;
    font-weight: bold;
    font-size: 14pt;
    color: black;
    margin-left: 20%;
    margin-top: 1cm;
    text-align: left;
    }

    Практичне завдання
    «Каскадні стилі CSS для тексту»

     Увага! Під час роботи з комп’ютером дотримуйтеся правил безпеки.

    1. Скопіюйте текст вірша чи завантажте:
    Зима
    Володимир Сосюра  
    Сном блакитним заснули поля,
    і долини, і гори, й діброви.
    Одягла білу шубу земля,
    білу шубу зимову.


    Одлетіли давно журавлі
    У південні країни з журбою,
    і заснуло зерно у землі,
    щоб проснутись весною,

    коли очі закриють поля,
    затремтять і тополі, і клени,
    й скине білую шубу земля
    і одягне зелену.
     
    2. Відформатуйте текст із зазначеними стилями CSS:
    • Заголовок:  тип шрифту Arial; розмір шрифту 32pt; заливка: синій; колір шрифту: білий
    • Автор: тип шрифту Century Gothic ; розмір шрифту 20pt; колір шрифту: CornflowerBlue
    • Вірш: тип шрифту Verdana; розмір шрифту 11pt;

    Для допитливих:
    щоб описати "зовнішню" таблицю стилів треба "прив'язати" створені стилі до сторінок. В тестовому редакторі створити окремий файл із описом стилів, зберегти його з типом styles.css.
    В html-файли, сторінки ресурсу, який оформюється, в розділ <HEAD> помістити рядок з посиланням на файл стилів із зазначенням про використання CSS:

    <LINK REL = STYLESHEET TYPE = "text / css" HREF="styles.css">
    Оскільки файл зі стилями styles.css, за такого опису, розміщується в тому ж каталозі сервера, що і інші сторінки, поточному. Параметр HREF =" URL" таким чином буде ім'ям нашого файлу стилів styles.css.

    Немає коментарів:

    Дописати коментар

    Підписатися на: Дописи (Atom)