«CSS » Каскадные таблицы стилей. - презентация, доклад, проект скачать

Нажмите для полного просмотра!

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему «CSS » Каскадные таблицы стилей.. Доклад-сообщение содержит 28 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1

Описание слайда:

«CSS » Каскадные таблицы стилей.

Слайд 2

Описание слайда:

Таблица стилей Стилевое правило Селектор Определение

Слайд 3

Описание слайда:

Связывание стилевых таблиц с документом По способу встраивания в документ таблицы стилей разделяются на три типа: Внешние <LINK rel=stylesheet type=text/css href=style.css> Внутренние <STYLE>…. </STYLE> Inline-стиль (строчный) <DIV>.. </DIV> <SPAN>.. <SPAN>

Слайд 4

Описание слайда:

Определение стиля для тега <HTML><HEAD> <TITLE>сентябрь </TITLE> <STYLE type=text/css> H4 {text-align:center; color:#886600; font-family:Arial;} </STYLE></HEAD> <BODY> <H4> Школа делового успеха</H4> …….. </BODY> </HTML>

Слайд 5

Описание слайда:

Внешняя таблица стиля <HTML><HEAD> <TITLE>сентябрь </TITLE> <LINK rel=“stylesheep” type=text/css href=“style.css”> </HEAD>BODY> <H4> Школа делового успеха</H4> …….. </BODY> </HTML>

Слайд 6

Описание слайда:

классы H4, H3,H1 {text-align:center; color:#886600; font-family:Arial;} .just {text-align:justify; text-indent:3em;} .term { color:red; font-size: 110%; letter-spasing:0.1em;}

Слайд 7

Описание слайда:

<H4> Школа делового успеха</H4> <H4> Школа делового успеха</H4> Образовательный проект: <div class=just><SPAN class=term>виртуальные курсы </SPAN >по деловому общению, этике, психологии, конфликтологии, имиджу, стилю, визажу. </div> <H4>Клуб F1</H4> Для<SPAN class=term>любознательных </SPAN >и тех, кто нуждается в помощи. <div class=just>Консультации специалистов и т.д.</div>

Слайд 8

Описание слайда:

псевдоклассы A:link A:active A:visited A:hover

Слайд 9

Описание слайда:

пример A{text-decoration:none; font-weight:bold; text-align:center;} A:link{color:#008800;} A:active{color:#880000;} A:visited{color:#888800;} A:hover{color:#CCCCFF; Background-color:#888800;}

Слайд 10

Описание слайда:

Свойства обрамления и заполнения

Слайд 11

Описание слайда:

Свойства обрамления и заполнения border-color border-width border-style

Слайд 12

Описание слайда:

Пример Создается класс, обводящий блок двойной зеленой рамкой толщиной 3 пикселя. .bord { border-color:green; border-width:3; border-style: double; }

Слайд 13

Описание слайда:

<div class=bord> <H4> Школа делового успеха</H4> Образовательный проект: виртуальные курсы по деловому общению, этике, психологии, конфликтологии, имиджу, стилю, визажу. </div> Описание рамки эквивалентно: .bord { border: 3 green double; }

Слайд 14

Описание слайда:

.bord { border: 3 green double; border-left: 5 solid; padding: 10; padding-left: 30; }

Слайд 15

Описание слайда:

Подложка и margin .bord {border: 3 green double; border-left: 5 solid; padding: 10 20 30 40; } P{ margin-top: -1 em; }

Слайд 16

Описание слайда:

Фоновый цвет и изображение Свойства: background-color background-image background-position background-repeat

Слайд 17

Описание слайда:

Пример .bord {border: 3 green double; border-left: 5 solid; padding: 10; background: #FFFF88 url(images/trava.gif) repeat-x bottom; }

Слайд 18

Описание слайда:

позиционирование Свойство position: static relative absolute Смещение элемента задается свойствами: top,left, right.

Слайд 19

Описание слайда:

позиционирование <IMG src=images/baton.giv align=left style=“position:static; ”> <IMG src=images/baton.giv align=left style=“position:relative; top:30; left:150; ”>

Слайд 20

Описание слайда:

позиционирование <IMG src=images/baton.giv align=left style=“position:absolute; top:30; left:150; ”> Размеры блока указываются свойствами width и height

Слайд 21

Описание слайда:

Свойство overflow visible hidden scroll

Слайд 22

Описание слайда:

Пример

Слайд 23

Описание слайда:

Стили списков Свойства: list-style-type (disc, circle, square, none) (decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none) list-style-image

Слайд 24

Описание слайда:

Пример

Слайд 25

Описание слайда:

Если подлый компилятор сообщает об ошибке   —<BR> Значит видно: <OL> <LI>процессор надо срочно заменить. <LI>Заменить попробуй сразу дисковод, <LI>видеокарту. <LI>Замени мышиный коврик   $mdash; может быть, проблема в нем? </OL> <P align=right> (Почти по Остеру)

Слайд 26

Описание слайда:

Вложенные списки. Для решения этой проблемы можно создавать различные классы или воспользоваться контексным селектором. Вложенный тег – потомок. А тот, в который он вложен – предок.

Слайд 27

Описание слайда:

Пример

Слайд 28

Описание слайда:

Если подлый компилятор сообщает об ошибке   $mdash;<BR>Значит видно: <OL> <LI>процессор надо срочно заменить. <LI>Заменить попробуй сразу <OL> <LI>дисковод, <LI>видеокарту. </OL> <LI>Замени мышиный коврик   $mdash; может быть, проблема в нем? </OL> <P align=right> (Почти по Остеру)