'

Учебный курс Введение в HTML и CSS Лекция 6 Текст и списки. Позиционирование

Понравилась презентация – покажи это...





Слайд 0

Учебный курс Введение в HTML и CSS Лекция 6 Текст и списки. Позиционирование кандидат технических наук Павел Брониславович Храмцов paul@kiae.su


Слайд 1

2 Выравнивание <p align=justify>...</p> <p style="text-align:right;color:darkred;">Этот параграф выравнен по правому краю. Все строки справа кончаются на границе раздела. А вот слева они начинаются с различным отступом от левого края.</p> <p style="text-align:right; color:darkred;">Этот параграф выравнен по правому краю. Все строки справа кончаются на вертикальной границе раздела. Все строки слева теперь начинаются также с вертикальной границы раздела.</p>


Слайд 2

3 Преобразование шрифта <p style="text-transform:uppercase;">Все буквы заглавные.</p> <p style="text-transform:lowercase;">Все буквы строчные.</p> <p style="text-transform:capitalize;">Все слова начинаются с заглавных букв.</p> <p style="text-decoration:line-through;">Все буквы перечеркнуты.</p>


Слайд 3

4 Красная строка <p style="text-indent:20pt;">Этот параграф мы начнем со строки с горизонтальным отступом в двадцать типографских пунктов от левого края параграфа. </p> p:first-line {color:red} p:first-letter {font-size:20pt;}


Слайд 4

5 Межстрочное расстояние <p style="line-height:6pt; font-size:12pt;color:darkred;">Этот параграф мы набрали кеглем 12 pt. Line-height задано в 6 pt.</p>


Слайд 5

6 Списки <ul style="display:none;"> <li>Первый элемент списка <li>Второй элемент списка <li>Третий элемент списка </ul> Первый элемент списка Второй элемент списка Третий элемент списка


Слайд 6

7 Вид меток списка <ul style="list-style-type:square;"> <li>В виде пульки используем квадрат </ul> <ul style="list-style-type:disk;"> <li>В виде пульки используем диск </ul> <ul style="list-style-type:circle;"> <li>В виде пульки используем круг </ul>


Слайд 7

8 Метки для упорядоченного списка <ol style="list-style-type:lower-roman;color:darkred;"> <li>строчные римские цифры </ol> <ol style="list-style-type:upper-alpha;color:darkred;"> <li>заглавные буквы </ol> <ol style="list-style-type:lower-alpha;color:darkred;"> <li>строчные буквы </ol> <ul style="list-style-image:url(../images/image.gif);"> <li>Элемент списка расположен за рисунком </ul>


Слайд 8

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


Слайд 9

10 Относительные координаты <div style="border-width:1px; borderstyle:solid;width:100%; height:100px;"> <div style="position:relative;top:0px; left:0px;border-width:1px;">Этот блок находится в точке отсчета относительных координат</div> <div style="position:relative;top:0px; left:50px;border-width:1px;">А этот блок смещен вправо на 50px</div> </div>


Слайд 10

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; }


Слайд 11

25.12.2015 12 Порядок наложения блоков. z-index <div style="position:absolute;top:0;left:0;width:300; height:50;clip:rect(0,100,20,0);"> ... </div>


×

HTML:





Ссылка: