TheSlide.ru

css.pptx

Содержание

1. css.pptx
2. Таблица стилейСтилевое правилоСелектор Определение
3. СВЯЗЫВАНИЕ СТИЛЕВЫХ ТАБЛИЦ С ДОКУМЕНТОМПо способу встраивания
4. ОПРЕДЕЛЕНИЕ СТИЛЯ ДЛЯ ТЕГАсентябрь H4 {text-align:center;
5. ВНЕШНЯЯ ТАБЛИЦА СТИЛЯ сентябрь BODY> Школа делового успеха……..
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. Школа делового успехаОбразовательный проект:виртуальные курсы по
8. ПСЕВДОКЛАССЫA:linkA:activeA:visitedA: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. СВОЙСТВА ОБРАМЛЕНИЯ И ЗАПОЛНЕНИЯЭлементполярамкаподложкаmarginborderpadding
11. СВОЙСТВА ОБРАМЛЕНИЯ И ЗАПОЛНЕНИЯborder-colorborder-widthborder-style
12. ПРИМЕР Создается класс, обводящий блок двойной зеленой рамкой толщиной 3 пикселя..bord { border-color:green;border-width:3;border-style: double;}
13. Школа делового успехаОбразовательный проект:виртуальные курсы по
14. .bord { border: 3 green double;
15. ПОДЛОЖКА И MARGIN.bord {border: 3 green double;
16. ФОНОВЫЙ ЦВЕТ И ИЗОБРАЖЕНИЕСвойства:background-colorbackground-imagebackground-positionbackground-repeat
17. ПРИМЕР .bord {border: 3 green double;
18. ПОЗИЦИОНИРОВАНИЕ Свойство position:staticrelativeabsoluteСмещение элемента задается свойствами: top,left, right.
19. ПОЗИЦИОНИРОВАНИЕ
20. ПОЗИЦИОНИРОВАНИЕ Размеры блока указываются свойствами width и height
21. СВОЙСТВО OVERFLOW visiblehiddenscroll
22. ПРИМЕР Клуб F1Для любознательных тех, кто нуждается в помощи.Консультации специалистов и т.д.
23. СТИЛИ СПИСКОВ Свойства:list-style-type (disc, circle, square, none) (decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none)list-style-image
24. ПРИМЕР < style>LI{list-style-image:url(images/lst.gif);}
25. Если подлый компилятор сообщает об ошибке
26. Вложенные списки. Для решения этой проблемы можно
27. ПРИМЕР < style>LI{list-style-image:url(images/lst.gif);}LI LI{list-style-image:url(images/lst2.gif);}
28. Если подлый компилятор сообщает об ошибке
29. Скачать презентанцию

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

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

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

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

Слайд 2

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

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

Слайд 3СВЯЗЫВАНИЕ СТИЛЕВЫХ ТАБЛИЦ С ДОКУМЕНТОМ
По способу встраивания в документ таблицы

стилей разделяются на три типа:
Внешние
Внутренние ….
Inline-стиль (строчный) ..

..

СВЯЗЫВАНИЕ СТИЛЕВЫХ ТАБЛИЦ С ДОКУМЕНТОМПо способу встраивания в документ таблицы стилей разделяются на три типа:Внешние Внутренние ….

Слайд 4ОПРЕДЕЛЕНИЕ СТИЛЯ ДЛЯ ТЕГА

сентябрь

H4 {text-align:center;

color:#886600; font-family:Arial;}

Школа делового успеха
……..

ОПРЕДЕЛЕНИЕ СТИЛЯ ДЛЯ ТЕГАсентябрь H4 {text-align:center; color:#886600; font-family:Arial;} Школа

Слайд 5ВНЕШНЯЯ ТАБЛИЦА СТИЛЯ

сентябрь

BODY>
Школа

делового успеха
……..

ВНЕШНЯЯ ТАБЛИЦА СТИЛЯ сентябрь BODY> Школа делового успеха……..

Слайд 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;}

КЛАССЫ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 Школа делового успеха
Образовательный проект:
виртуальные курсы
по деловому

общению, этике, психологии, конфликтологии, имиджу, стилю, визажу.
Клуб F1
Длялюбознательных

и тех, кто нуждается в помощи.

Консультации специалистов и т.д.

Школа делового успехаОбразовательный проект:виртуальные курсы по деловому общению, этике, психологии, конфликтологии, имиджу, стилю, визажу. Клуб F1Длялюбознательных

Слайд 8ПСЕВДОКЛАССЫ
A:link
A:active
A:visited
A:hover

ПСЕВДОКЛАССЫA:linkA:activeA:visitedA: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;}

ПРИМЕР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СВОЙСТВА ОБРАМЛЕНИЯ И ЗАПОЛНЕНИЯ

Элемент

поля
рамка
подложка
margin
border
padding

СВОЙСТВА ОБРАМЛЕНИЯ И ЗАПОЛНЕНИЯЭлементполярамкаподложкаmarginborderpadding

Слайд 11СВОЙСТВА ОБРАМЛЕНИЯ И ЗАПОЛНЕНИЯ
border-color
border-width
border-style

СВОЙСТВА ОБРАМЛЕНИЯ И ЗАПОЛНЕНИЯborder-colorborder-widthborder-style

Слайд 12ПРИМЕР
Создается класс, обводящий блок двойной зеленой рамкой толщиной 3

пикселя.
.bord {
border-color:green;
border-width:3;
border-style: double;
}

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

Слайд 13

Школа делового успеха
Образовательный проект:
виртуальные курсы по деловому общению,

этике, психологии, конфликтологии, имиджу, стилю, визажу.

Описание рамки эквивалентно:
.bord {

border: 3 green double; }

Школа делового успехаОбразовательный проект:виртуальные курсы по деловому общению, этике, психологии, конфликтологии, имиджу, стилю, визажу. Описание рамки

Слайд 14
.bord { border: 3 green double;

border-left: 5 solid;

padding: 10;
padding-left: 30;
}

.bord { border: 3 green double; border-left: 5 solid;

Слайд 15ПОДЛОЖКА И MARGIN
.bord {border: 3 green double;

border-left: 5 solid;

padding: 10 20 30 40; }

P{ margin-top: -1 em; }

ПОДЛОЖКА И MARGIN.bord {border: 3 green double; border-left: 5 solid;

Слайд 16ФОНОВЫЙ ЦВЕТ И ИЗОБРАЖЕНИЕ
Свойства:
background-color
background-image
background-position
background-repeat

ФОНОВЫЙ ЦВЕТ И ИЗОБРАЖЕНИЕСвойства:background-colorbackground-imagebackground-positionbackground-repeat

Слайд 17ПРИМЕР
.bord {border: 3 green double;

border-left: 5 solid;

padding: 10;
background: #FFFF88 url(images/trava.gif) repeat-x
bottom;
}

ПРИМЕР .bord {border: 3 green double; border-left: 5 solid;

Слайд 18ПОЗИЦИОНИРОВАНИЕ
Свойство position:
static
relative
absolute
Смещение элемента задается свойствами: top,left, right.

ПОЗИЦИОНИРОВАНИЕ Свойство position:staticrelativeabsoluteСмещение элемента задается свойствами: top,left, right.

Слайд 19ПОЗИЦИОНИРОВАНИЕ

left:150; ”>

ПОЗИЦИОНИРОВАНИЕ

Слайд 20ПОЗИЦИОНИРОВАНИЕ

Размеры блока указываются

свойствами width и height

ПОЗИЦИОНИРОВАНИЕ Размеры блока указываются свойствами width и height

Слайд 21СВОЙСТВО OVERFLOW

visible
hidden
scroll

СВОЙСТВО OVERFLOW visiblehiddenscroll

Слайд 22ПРИМЕР

Клуб F1

Для любознательных тех, кто

нуждается в помощи.
Консультации специалистов и т.д.

ПРИМЕР Клуб F1Для любознательных тех, кто нуждается в помощи.Консультации специалистов и т.д.

Слайд 23СТИЛИ СПИСКОВ
Свойства:
list-style-type (disc, circle, square, none) (decimal, lower-roman, upper-roman, lower-alpha,

upper-alpha, none)
list-style-image

СТИЛИ СПИСКОВ Свойства:list-style-type (disc, circle, square, none) (decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none)list-style-image

Слайд 24ПРИМЕР

< style>
LI{list-style-image:url(images/lst.gif);}

ПРИМЕР < style>LI{list-style-image:url(images/lst.gif);}

Слайд 25
Если подлый компилятор сообщает об ошибке —

Значит видно:

процессор надо

срочно заменить.
Заменить попробуй сразу дисковод,
видеокарту.
Замени мышиный коврик $mdash;

может быть, проблема в нем?

(Почти по Остеру)

Если подлый компилятор сообщает об ошибке —Значит видно:процессор надо срочно заменить.Заменить попробуй сразу дисковод, видеокарту.Замени мышиный

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

воспользоваться контексным селектором.
Вложенный тег – потомок.
А тот, в который он

вложен – предок.

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

Слайд 27ПРИМЕР

< style>
LI{
list-style-image:url(images/lst.gif);}
LI LI{
list-style-image:url(images/lst2.gif);}

ПРИМЕР < style>LI{list-style-image:url(images/lst.gif);}LI LI{list-style-image:url(images/lst2.gif);}

Слайд 28
Если подлый компилятор сообщает об ошибке $mdash;
Значит видно:

процессор надо

срочно заменить.
Заменить попробуй сразу

дисковод,

видеокарту.

Замени мышиный коврик $mdash; может быть, проблема в нем?

(Почти по Остеру)

Если подлый компилятор сообщает об ошибке $mdash;Значит видно:процессор надо срочно заменить.Заменить попробуй сразу

Скачать презентацию

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

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

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

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

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

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