Урок 11

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


  • CSS Wikipedia
  • Додати стилі CSS
  • Додати стилі CSS для тексту
  • Додати стилі CSS для кольорів
  • HTML, 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;}
    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:
    • Заголовок:  тип шрифту Gungsuh; розмір шрифту 32pt; заливка: синій; колір шрифту: білий
    • Автор: тип шрифту ArialBlack; розмір шрифту 20pt; колір шрифту: CornflowerBlue
    • Вірш: тип шрифту Verdana; розмір шрифту 11pt;
    3. Текстовий варіант веб-сторінки

    Додатково:

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

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

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

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