Введение в HTML и CSS. Текст и списки. Позиционирование презентация

Выравнивание ... Этот параграф выравнен по правому краю. Все строки справа кончаются на границе раздела. А вот слева они начинаются с различным отступом от левого края. Этот параграф выравнен по правому

Слайд 1Учебный курс Введение в HTML и CSS Лекция 6 Текст и

списки. Позиционирование

кандидат технических наук Павел Брониславович Храмцов
paul@kiae.su


Слайд 2Выравнивание
...
Этот параграф выравнен по правому краю. Все строки справа

кончаются на границе раздела. А вот слева они начинаются с различным отступом от левого края.


Этот параграф выравнен по правому краю. Все строки справа кончаются на вертикальной границе раздела. Все строки слева теперь начинаются также с вертикальной границы раздела.



Слайд 3Преобразование шрифта
Все буквы заглавные.
Все буквы строчные.
Все слова начинаются

с заглавных букв.


Все буквы перечеркнуты.



Слайд 4Красная строка
Этот параграф мы начнем со строки с горизонтальным отступом

в двадцать типографских пунктов от левого края параграфа.



p:first-line {color:red}

p:first-letter {font-size:20pt;}

Слайд 5Межстрочное расстояние
Этот параграф мы набрали кеглем 12 pt. Line-height задано

в 6 pt.





Слайд 6Списки
Первый элемент списка Второй элемент списка Третий элемент списка


Первый элемент списка
Второй

элемент списка
Третий элемент списка

Слайд 7Вид меток списка

В виде пульки используем квадрат


В виде пульки

используем диск


  • В виде пульки используем круг


Слайд 8Метки для упорядоченного списка

строчные римские цифры


заглавные буквы

style="list-style-type:lower-alpha;color:darkred;">
  • строчные буквы



    • Элемент списка расположен за рисунком


  • Слайд 9.example {position:absolute;top:8px;left:6px;}
    Абсолютные координаты



    Слайд 10Относительные координаты

    Этот блок находится в точке отсчета относительных

    координат

    А этот блок смещен вправо на 50px



    Слайд 11Управление видимостью
    function change()
    {
    next=current+1; if(next>1) next=0;
    window.document.all.item("kuku",current).visibility="hidden";
    window.document.all.item("kuku",next).visibility= "visible";
    current=next;
    }


    Слайд 12*
    Порядок наложения блоков. z-index

    ...






    Обратная связь

    Если не удалось найти и скачать презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

    Email: Нажмите что бы посмотреть 

    Что такое ThePresentation.ru?

    Это сайт презентаций, докладов, проектов, шаблонов в формате PowerPoint. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами с другими пользователями.


    Для правообладателей

    Яндекс.Метрика