Шрифты, списки

Содержание

Слайд 2

Подключение
шрифта Google

1) Перейти на fonts.google.com
2) Выбрать шрифт
3) Выбрать необходимые варианты начертаний
4)

Подключение шрифта Google 1) Перейти на fonts.google.com 2) Выбрать шрифт 3) Выбрать
Вставить код следующего вида в

Слайд 3

Подключение своего шрифта

@font-face {
font-family: Gentium;
src: url(http://example.com/fonts/Gentium.ttf) format("ttf");
}
p {
font-family:

Подключение своего шрифта @font-face { font-family: Gentium; src: url(http://example.com/fonts/Gentium.ttf) format("ttf"); } p
Gentium, serif;
}

Принцип:
@font-face {
font-family: bodytext;
font-weight: 400;
src: url(ideal-sans-serif.woff) format("woff"),
url(basic-sans-serif.ttf) format("ttf");
}

Слайд 4

Шрифтовое оформление

font-family: тип шрифта | семейство шрифтов (например, serif)
font-size: величина

Шрифтовое оформление font-family: тип шрифта | семейство шрифтов (например, serif) font-size: величина
(например, 20px или 1.4rem)
font-weight: жирность текста (bold, normal, или 100 – 900)
font-style: курсивность шрифта
Общее свойство, сокращенное:
font: style weight size family
– font: bold 12px Arial

Слайд 5

Текстовое оформление
letter-spacing: 20px; /*расстояние между буквами*/
line-height: 2em; /*высота строки*/
text-align: left; /*выравнивание

Текстовое оформление letter-spacing: 20px; /*расстояние между буквами*/ line-height: 2em; /*высота строки*/ text-align:
текста left, right, center, justify*/
text-decoration: none; /*оформление подчеркиванием overline, underline,linethrough*/
text-transform: capitalize; /*формат записи букв none, uppercase, lowercase*/
text-shadow: 5px 5px 3px #369; /*тень со смещением на 5px, размытием 3px и цветом*/
white-space: pre; /*управление переносами и пробелами; nowrap (текст в одну строку), normal*/
word-wrap: break-word; /*перенос строк c разделением длинных слов*/
hyphens: auto /*перенос слов согласно правилам языка*/
word-spacing: 20px; /*расстояние между словами*/

Слайд 6

Списки

Списки

Слайд 7

Темы
Маркированный список
Нумерованный список
Список определений
Смешанные списки
CSS свойства для списков

Темы Маркированный список Нумерованный список Список определений Смешанные списки CSS свойства для списков

Слайд 8

Виды списков

Ненумерованный список


    2. Нумерованный список

      3. Список определений


      • HTML5 и CSS3
      • JavaScript

Виды списков Ненумерованный список 2. Нумерованный список 3. Список определений HTML5 и
  • PHP



    1. Введение
    2. Декларация DOCTYPE

    3. Элементы HEAD,BODY


    Слайд 9

    Список определений


    Комплекс Стилобат

    … м.Бауманская

    Комплекс Таганский

    … м.Таганская, м.Пролетарская или м.Крестьянская застава



    Список определений Комплекс Стилобат … м.Бауманская Комплекс Таганский … м.Таганская, м.Пролетарская или м.Крестьянская застава …

    Слайд 10

    Вложенные списки


    • Хвойные

      1. Кедр

      2. Пихта

      3. ...



    • Лиственные

      • Берёза

      • ...




    Вложенные списки Хвойные Кедр Пихта ... Лиственные Берёза ...

    Слайд 11

    Изменение маркера
    (list-style)

    none|circle|disc|square|
    decimal| lower-alpha
    |upper-alpha| lower
    roman |upper-roman|
    armenian | georgian |
    katakana | lower-greek

    Изменение маркера (list-style) none|circle|disc|square| decimal| lower-alpha |upper-alpha| lower roman |upper-roman| armenian |
    Имя файла: Шрифты,-списки.pptx
    Количество просмотров: 58
    Количество скачиваний: 0