Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • Форматирование при помощи CSS. Cписки

    Загружено:

    Tanya Ki
    6 просмотров36 страниц

    Оригинальное название

    Css

    Авторское право

    © © All Rights Reserved

    Доступные форматы

    PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ

    Авторское право:

    © All Rights Reserved
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    6 просмотров36 страниц

    Форматирование при помощи CSS. Cписки

    Загружено:

    Tanya Ki

    Авторское право:

    © All Rights Reserved
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 36

    Форматирование при

    помощи CSS. Cписки.


    Что такое css?

    CSS означает каскадные таблицы стилей.


    CSS описывает, как HTML-элементы должны отображаться на экране,
    бумаге или на других носителях.
    CSS экономит много работы. Он может контролировать
    расположение нескольких веб-страниц все сразу.
    Добавлять css-форматирование можно 4-мя способами:
    1. С помощью атрибута style
    2. Внутри тегов <style> в блоке <head>
    3. С помощью тега <link>
    4. С помощью директивы @import.
    Внутренние стили
    Внутренняя таблица CSS определена в разделе <head> HTML-
    страницы в элементе <style> :
    Внешние стили
    Свойства
    • Свойство CSS color определяет используемый цвет текста.

    • Свойство CSS font-family определяет используемый шрифт.

    • Свойство CSS font-size определяет размер текста, который будет


    использоваться.
    Color
    Для установки цвета различных элементов можно использовать
    несколько правил. Мы рассмотрим сегодня свойство color, которое
    отвечает за цвет текста, и backgroundcolor, которое управляет
    цветом фона элемента.

    Цвета HTML задаются с использованием предопределенных имен


    цветов, или RGB, Hex, HSL, RGBA, HSLA значений.
    В HTML, цвет может быть указан как RGB значение, используя эту
    формулу: RGB (красный, зеленый, синий)
    Каждый параметр (красный, зеленый и синий) определяет
    интенсивность цвета между 0 и 255.
    Например, RGB (255, 0, 0) отображается красным цветом, так как
    красный цвет устанавливается в его наивысшее значение (255), а
    остальные устанавливаются в 0.
    Для отображения черного цвета, все параметры цвета должны быть
    установлены в 0, как это: RGB (0, 0, 0).
    Для отображения белого цвета, все параметры цвета должны быть
    установлены в 255, как это: RGB (255, 255, 255).
    В HTML, цвет может быть указан с помощью шестнадцатеричного
    значения в форме: #RRGGBB
    Где RR (красный), GG (зеленый) и BB (синий) являются
    шестнадцатеричными значениями между 00 и FF (то же, что и
    десятичное 0-255).
    Например, #ff0000 отображается красным цветом, так как для
    параметра Red устанавливается наибольшее значение (FF), а другим —
    наименьшее значение (00).
    RGBA значение
    Значения цвета RGBA являются расширением значений цвета RGB с
    альфа-каналом, который задает непрозрачность для цвета.
    Значение цвета RGBA задается с помощью:
    RGBA (красный, зелёный, голубой, альфа)
    Параметр Alpha является числом между 0,0 (полностью прозрачным) и
    1,0 (не прозрачным вообще):
    В HTML цвет можно задать с помощью оттенка, насыщенности и
    легкости (HSL) в форме:
    HSL (оттенок, насыщенность, легкость)
    Оттенок-это степень на цветном колесе от 0 до 360. 0-красный, 120-
    зеленый, 240-синий.
    Насыщенность представляет собой процентное значение, 0% означает
    оттенок серого, а 100%-полный цвет.
    Легкость также процент, 0% черный, 50% не является ни светлым, ни
    темным, 100% белый
    Шрифты

    • serif — для шрифтов с засечками (по умолчанию обычно Times New


    Roman);
    • sans-serif — для шрифтов без засечек, или рубленых
    шрифтов(обычно Arial);
    • monospace — для моноширинных шрифтов, в которых символы
    имеют одинаковую ширину (обычно Consolas или Courier New);
    cursive — для курсивных шрифтов (как вариант —ComicSans MS);
    • fantasy — для фантазийных, или декоративных шрифтов
    Посмотреть, какие шрифты используются
    по умолчанию, можно в настройках
    браузера. Например, для Хрома, они
    выглядят так:
    Значения bolder и lighter изменяют жирность шрифта в большую или
    меньшую сторону относительно значения этого свойства у родителя.
    Единицы от 100 до 900 указываются с шагом в 100 и распределяются так: от
    100 до 300 — это, как правило, тонкий шрифт, 400-500 — обычное
    начертание, от 600 — полужирное начертание. Если рассматривать их
    подробнее, то начертание в единицах имеет следующие значения:
    • 100 — Thin (Hairline)
    • 200 — Extra Light (Ultra Light)
    • 300 — Light
    • 400 — Normal
    • 600 — Semi Bold (Demi Bold)
    • 700 — Bold
    • 800 — Extra Bold (Ultra Bold)
    • 900 — Black (Heavy)500 — Medium
    Размер шрифта font-size. Указывается он в различных единицах: cm,
    mm, pc, px, pt, em, rem, %, реже — в ex, vh или vw,а также в
    абсолютном и относительном размере. Еще размер шрифта может
    иметь значение inherit, т.е. унаследованный от родителя. Для указания
    абсолютного размера используются ключевые слова xxsmall,x-small,
    small, medium, large, x-large, xx-large.
    Для относительного размера шрифта используются значения larger и
    smaller. Размер шрифта родительского элемента берется за 100%.
    Нельзя использовать отрицательные значения.
    Граница
    Свойство css border определяет границу вокруг элемента HTML
    CSS заполнение
    Свойство CSS padding определяет отступ (пробел) между текстом и
    границей:
    CSS маржа

    Свойство CSS margin определяет поле (пробел) за пределами


    границы:
    Атрибут ID

    Чтобы определить конкретный стиль для одного специального


    элемента, нужно добавить атрибут id к элементу:
    Примечание: Идентификатор элемента должен быть уникальным в
    пределах страницы, поэтому селектор ID используется для выбора
    одного уникального элемента!
    Атрибут class
    Чтобы определить стиль для специального типа элементов, нужно
    добавить атрибут class к элементу.
    Затем нужно определить стиль для элементов с определенным
    классом.
    Внешние ссылки
    Внешние таблицы стилей можно ссылаться с полным URL-адресом
    или с помощью пути относительно текущей веб-страницы.

    Вам также может понравиться