Scribd Logo
Upload

Welcome to Scribd!

  • 35

    Uploaded by

    lora2654
    4 views12 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    4 views12 pages

    35

    Uploaded by

    lora2654

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 12

    ВБУДОВАНІ ТА ЗОВНІШНІ ТАБЛИЦІ СТИЛІВ.

    РОБОТА З ТЕКСТОМ. БЛОКОВА МОДЕЛЬ.


    ПОНЯТТЯ ПРО ТАБЛИЦІ КАСКАДНИХ СТИЛІВ

    Таблиці каскадних стилів — це набори параметрів, що змінюють


    властивості тегів HTML. Такі набори називають ще визначеннями тегів.

    Р {font-size: 40pt; color: green; font-family:


    "Comic Sans MS"}
    тег абзацу
    <Р>
    колір шрифту —
    зелений

    розмір шрифту 40 Гарнітура — Comic Sans MS


    пунктів

    У документі достатньо ввести теги <Р>...</Р> із текстом


    абзацу, щоб автоматично надати йому зазначеного
    оформлення.
    ПАРАМЕТРИ ФОРМАТУВАННЯ СТИЛІВ

    background — колір тла

    font-family — стиль шрифту (гарнітура)

    font-size — розмір шрифту

    font-weight — жирність шрифту

    color — колір шрифту

    text-decoration — оздоблення тексту

    text-align — вирівнювання тексту

    Наприклад:
    СПОСОБИ ЗВ'ЯЗКУ КАСКАДНИХ СТИЛІВ ІЗ HTML-
    ДОКУМЕНТОМ

    Підключення Задавання
    зовнішньої властивостей
    таблиці стилів в тегах
    стилів абзаців чи
    заголовків

    Розташуван
    ня опису
    стилів у
    розділі HEAD
    документа
    ПІДКЛЮЧЕННЯ ЗОВНІШНЬОЇ ТАБЛИЦІ СТИЛІВ

    Зовнішня таблиця стилів (External Style Sheet) — це текстовий


    файл із розширенням .css.
    Його підключають до HTML-документа за допомогою тегу
    <LINK>, який записують у розділі <HEAD>:

    <LINK REL="stylesheet" TYPE="text/css" HREF="mystyle.css">

    REL та TYPE вказують браузеру на Атрибут HREF задає


    те, що сторінка використовує адресу
    таблиці каскадних стилів файлу (mystyle.css)
    ВИКОРИСТАННЯ СТИЛІВ ВНУТРІШНЬОЇ ТАБЛИЦІ

    Внутрішню таблицю стилів (Embedded Style Sheet) розміщують


    безпосередньо в розділі HEAD, у блоці, який обмежений тегами
    <STYLE> та </STYLE>

    <HEAD>
    <STYLE>
    Тег1 { властивість11: значення11; властивість12: значення12; ...;властивість1n:
    значення1n }
    Тег2 { властивість21: значення21; властивість22: значення22; ...;властивість2m :
    значення2m}
    </STYLE>
    </HEAD>

    Внутрішня таблиця стилів — це послідовність визначень тегів, кожне з


    яких записується з нового рядка. Визначення тегу містить його ім'я без
    кутових дужок, за яким у фігурних дужках через крапку з комою
    перелічують властивості тегів та їхні значення, розділені двокрапками
    ЗАДАВАННЯ ВЛАСТИВОСТЕЙ СТИЛІВ В ТЕГАХ
    АБЗАЦІВ ЧИ ЗАГОЛОВКІВ

    У таблицях можна створювати нові стилі, надаючи їм імена з


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

    СLASS=ім'я_стилю

    де ім'я записують вже без крапки. Для одного тегу можна


    використовувати декілька стилів форматування

    Наприклад:
    ВБУДОВАНІ СТИЛІ

    Вбудовані стилі (Inline Styles) вставляють у теги заголовків


    <Н1>...<Н6>, абзацу <Р>, тіла <BODY>, а також у теги
    <DIV>, <IMG> тощо за допомогою атрибута STYLE, в якому
    перелічують властивості та їх значення

    <Р STYLE="font-size: 48pt; color: yellow">

    Використання атрибута STYLE для форматування заголовка


    другого рівня:

    <Н2 STYLE="font-size: 48pt; font-family:


    Arial">Текст...</Н2>
    РОБОТА З ТЕКСТОМ
    Атрибут із значенням Отриманний результат
    font-family:Tahoma, sans-serif визначає вид і сімейство шрифту CSS текст - форматування
    встановлює розмір шрифту в пікселях або
    font-size:15px CSS текст - форматування
    відсотках
    font-style:italic перетворює текст в похилий CSS текст - форматування
    font-variant:small-caps капітель - великі літери маленького розміру CSS ТЕКСТ - ФОРМАТУВАННЯ
    font-weight:bold визначає жирний текст CSS текст - форматування
    letter-spacing:2px додаткову відстань між символами в пікселях CSS текст - форматування

    word-spacing:7px створює додаткову відстань між словами в CSS текст - форматування


    пікселях
    color:#cc0033 визначає колір тексту CSS текст - форматування
    встановлює відступ рядка в пікселях або
    text-indent:40px CSS текст - форматування
    відсотках
    text-decoration:underline виводить підкреслений текст CSS текст - форматування
    text-decoration:line-through виводить перекреслений текст CSS текст - форматування
    text-transform:capitalize відображає кожне слово з великої літери CSS Текст - Форматування
    text-transform:lowercase перетворює всі букви в маленькі css текст - форматування
    text-transform:uppercase перетворює всі букви в заголовні CSS ТЕКСТ - ФОРМАТУВАННЯ

    vertical-align:super відображає текст у верхньому індексі CSS текст - форматування text

    vertical-align:sub відображає текст в нижньому індексі CSS текст - форматування text


    БЛОКОВА МОДЕЛЬ
    Блокова модель CSS описує прямокутний блок, що генерується
    для елемента в дереві документа і виводиться згідно візуальної
    моделі форматування.

    Структура елемента в блокової моделі

    margin-box

    padding-box
    блок складається з
    контенту (внутрішнього
    height content-box
    вмісту), внутрішніх
    (висота блоку) Вміст блоку
    Содержимое блока
    відступів, кордонів і
    (текст,
    (текст, теги)
    Margin-теги) зовнішніх відступів

    width
    padding (ширина блоку)
    (відступи) border
    (границя блоку)
    margin (відступи)
    БЛОКОВА МОДЕЛЬ

    You might also like