Что такое findslide.org?

FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.


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

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

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

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

Презентация на тему Язык описания представлений СSS

Содержание

Что такое CSS? это язык описания внешнего представления для содержимого, описанного в HTML-страницах; определяет внешний вид текста – шрифты, размеры, цвет; определяет расположение элементов друг относительно друга; описание внешнего представления может быть физически отделено от
CSS Язык описания представленийПо материалам курса University of Washington http://www.cs.washington.edu/education/courses/cse190m/07sp/index.shtml Что такое CSS? это язык описания внешнего представления для содержимого, описанного Базовая структура элементов стиляЭлементы стиля описываются в видеатрибут: значение;и погружаются либо в Пример:  В ИТМО вы получите самое полное, лучшее, качественное образование в Привязывание страницы стилей к документу Некоторые атрибуты и варианты значенийfont-family: Атрибуты цветаcolor: red; color: rgb(25, 30, 120); color: #c0c0c0;  background-color: yellow; Глобальное определение стиля в документе Взаимодействие стилейbody { font-family: sans-serif; background-color: yellow; }p { color: red; background-color: Использование классовp { font-family: sans-serif; } p.special { background-color: yellow; font-weight: bold; Псевдо-классы:link  { color: #FF0000 }   /* Еще не посещенная Использование тегов div и spandiv.style1 { font-family: sans-serif; } div.style2 { font-family: Приписывание стилей конкретному элементу#myElement { font-family: sans-serif; color: blue; }  Это Каскадирование стилейЧем определяется стиль конкретного элемента?Стилем, указанным в отдельной CSS-странице,  привязанной Дополнительные возможностиselector1 selector2 { styles }Стиль применяется к элементам, определенным селектором selector2, Дополнительные возможности - примерli strong { text-decoration: underline; }Почему люди пользуются поиском Размещение фрагментов с помощью CSSБлочные элементы имеют: внутреннее содержание заданной Пример размещения блоков p { font-family: sans-serif;     font-size: Характеристики границы (border){ border: width style color; }width – ширина – 10px; Поля и заполнение{ margin: width; padding: width; }width – ширина – 10px; Размещение блоков на странице{ width: 70%; margin-left: auto; margin-right: auto; }Заданный таким Дополнительно о размерах блоков{ min-width: 100px; max-height: 5cm; }Вместо указания точной ширины/высоты Позиционирование блоковСодержимое блоков «обтекает» плавающий блок таким образом, что не происходит наложения Позиционирование блоков (продолжение)Задание «плавающего» блока:  На фотографии справа цветок совсем не Позиционирование блоков (продолжение)Второй способ выведения блока из общего алгоритма размещения блоков – Позиционирование блоков (продолжение)Пример.positioning.html Это самый обычный параграф. Таких параграфов ... Порядок видимости блоковПорядок расположения блоков в случае, когда они перекрывают друг друга,определяется
Слайды презентации

Слайд 2 Что такое CSS?
это язык описания внешнего представления

Что такое CSS? это язык описания внешнего представления для содержимого, описанного

для содержимого, описанного в HTML-страницах;
определяет внешний вид текста

– шрифты, размеры, цвет;
определяет расположение элементов друг относительно друга;
описание внешнего представления может быть физически отделено от описания содержания.

В прежнем стандарте HTML допускалось использование описания внешнего представления с помощью атрибутов и отдельных элементов.

Добро пожаловать в университет ИТМО. Вы
получите самое полное, лучшее, ЛУЧШЕЕ образование в России с МИНИМАЛЬНЫМ начальным багажом знаний!


Добро пожаловать в университет ИТМО. Вы получите самое полное, лучшее, ЛУЧШЕЕ образование в России с МИНИМАЛЬНЫМ начальным багажом знаний!

Однако, подобный способ описания представления НЕ ПОДДЕРЖИВАЕТСЯ в «строгом» XHTML!


Слайд 3 Базовая структура элементов стиля
Элементы стиля описываются в виде
атрибут:

Базовая структура элементов стиляЭлементы стиля описываются в видеатрибут: значение;и погружаются либо

значение;
и погружаются либо в атрибут style непосредственно в элементе

HTML,
либо собираются в заголовке документа (или на отдельной CSS-странице).

Курс лекций.



Курс лекций.



h2.red-class { color: red; text-align: center; }


Практические занятия.



Слайд 4 Пример: В ИТМО вы получите самое полное, лучшее,

Пример: В ИТМО вы получите самое полное, лучшее, качественное образование в

качественное образование в России с минимальным начальным багажом знаний!

В ИТМО вы получите самое полное, лучшее, качественное

образование в России с
минимальным начальным багажом знаний!


В ИТМО вы получите самое полное, лучшее, качественное
образование в России с
минимальным начальным багажом знаний!



Слайд 5 Привязывание страницы стилей к документу

Привязывание страницы стилей к документу

example.html



содержание страницы HTML-документа

Ссылка может быть как на «локальную» страницу стилей, созданную специально для этого документа, так и на «глобальную», хранящуюся в сети Интернет.

example1.html


p { color: white; background-color: black; } mystyles.css
h1 { font-size: large; font-weight: bold; }
h2 { font-weight: 500; color: blue; }


Слайд 6 Некоторые атрибуты и варианты значений
font-family: "lucida console", "courier

Некоторые атрибуты и варианты значенийfont-family:

new", sans-serif; font-size: small; font-size: larger; font-size: 10px; font-size: 80%; font-weight: bold; font-weight:

400; font-style: italic; font: sans-serif bold x-large;

Атрибуты шрифта (font) и текста (text).

text-align: center; text-align: right; text-transform: uppercase; text-indent: 2cm; text-decoration: underline; text-decoration: blink;


Слайд 7 Атрибуты цвета
color: red; color: rgb(25, 30, 120); color: #c0c0c0; background-color: yellow;

Атрибуты цветаcolor: red; color: rgb(25, 30, 120); color: #c0c0c0; background-color: yellow;


Допустимые словесные названия цветов:
aqua – голубой, black –

черный, blue – синий, fuchsia – розовый, gray – серый, green – зеленый, lime – светло-зеленый, maroon - коричневый,

navy – темно-синий, olive – оливковый (желто-зеленый), purple – фиолетовый, red – красный, silver – серебряный (светло-серый), teal – «морской волны», white – белый, yellow – желтый.

Вот как выглядят эти цвета: colors.html


Слайд 8 Глобальное определение стиля в документе

Глобальное определение стиля в документе     body {

type="text/css"> body { color: blue; font-family: sans-serif;

width: 400px; text-align: justify; } strong { color: red; font-weight: 600; } em { background-color: silver; }

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




Слайд 9 Взаимодействие стилей
body { font-family: sans-serif; background-color: yellow; }
p

Взаимодействие стилейbody { font-family: sans-serif; background-color: yellow; }p { color: red;

{ color: red; background-color: aqua; }
a { text-decoration: overline

underline; }
h2 { font-weight: bold; text-align: center; }

Это заголовок

А это абзац со ссылкой внутри


body

h2

p

a

Это заголовок


А это абзац со ссылкой внутри


Слайд 10 Использование классов
p { font-family: sans-serif; } p.special { background-color:

Использование классовp { font-family: sans-serif; } p.special { background-color: yellow; font-weight:

yellow; font-weight: bold; }
.standout { color: red; font-family: cursive;

}

Это заголовок класса standout

Это просто абзац

Это абзац класса special


Это абзац классов special и standout


Это заголовок класса standout

Это абзац класса special

Это просто абзац

Это абзац классов special и standout

classes.html


Слайд 11 Псевдо-классы
:link { color: #FF0000 }

Псевдо-классы:link { color: #FF0000 }  /* Еще не посещенная гиперссылка

/* Еще не посещенная гиперссылка */
:visited { color: #00FF00

} /* Уже посещенная гиперссылка */
:hover { color: #FF00FF } /* Курсор мыши над ссылкой */
:active { color: #0000FF } /* Выделенная гиперссылка */

Проверяем, как работают разные псевдо-классы

Ссылка на страницу

classes.html
.


pseudo-classes.html


Слайд 12 Использование тегов div и span
div.style1 { font-family: sans-serif;

Использование тегов div и spandiv.style1 { font-family: sans-serif; } div.style2 {

} div.style2 { font-family: Times; color: blue; } .bold { font-weight:

bold; }

Это заголовок класса style1

Это абзац класса style1

Это заголовок класса style2

Это абзац класса style2


Это заголовок класса style1

Это абзац класса style1

div.html

Это заголовок класса style2

Это абзац класса style2


Слайд 13 Приписывание стилей конкретному элементу
#myElement { font-family: sans-serif; color:

Приписывание стилей конкретному элементу#myElement { font-family: sans-serif; color: blue; } Это мой заголовок Это мой заголовок

blue; }
Это мой заголовок
Это мой заголовок


Слайд 14 Каскадирование стилей
Чем определяется стиль конкретного элемента?
Стилем, указанным в

Каскадирование стилейЧем определяется стиль конкретного элемента?Стилем, указанным в отдельной CSS-странице, привязанной

отдельной CSS-странице, привязанной к HTML-документу элементом в заголовке:

rel="stylesheet" type="text/css" href=“styles,css"/>

Стилем, указанным в заголовке HTML-документа с помощью элемента

Стилем, указанным в самом элементе с помощью атрибута style:

Отступ в полдюйма от края


Чем «ближе» определение стиля к элементу, тем приоритетнее он будет в случае конфликта параметров стиля.

Стилем, определенным браузером «по умолчанию»


Слайд 15 Дополнительные возможности
selector1 selector2 { styles }
Стиль применяется к

Дополнительные возможностиselector1 selector2 { styles }Стиль применяется к элементам, определенным селектором

элементам, определенным селектором selector2, только если этот элемент находится внутри

элемента, определенного селектором selector1.

selector1 > selector2 { styles }

Стиль применяется к элементам, определенным селектором selector2, только если этот элемент находится непосредственно внутри элемента, определенного селектором selector1.


Слайд 16 Дополнительные возможности - пример
li strong { text-decoration: underline;

Дополнительные возможности - примерli strong { text-decoration: underline; }Почему люди пользуются

}
Почему люди пользуются поиском Google?
Он очень быстрый
Он дает нужные

результаты

Почему люди пользуются поиском Google?
Он очень быстрый
Он дает нужные результаты


Слайд 17 Размещение фрагментов с помощью CSS
Блочные элементы имеют:
внутреннее

Размещение фрагментов с помощью CSSБлочные элементы имеют: внутреннее содержание заданной

содержание заданной ширины и высоты (width, height);

прослойку (padding);
границу (border);
поля (margin).

По умолчанию блоки располагаются
вертикально, при этом поля соседних блоков перекрываются (общее поле двух
соседних блоков равно по высоте
максимальному из двух полей элементов).

В1

В2


Слайд 18 Пример размещения блоков

p { font-family: sans-serif;

Пример размещения блоков p { font-family: sans-serif;   font-size: 16pt;

font-size: 16pt;
border:

2px solid red; }
p.class1 { width: 400px; background-color: yellow;
padding: 0.5cm; margin: 0.5cm; }
p.class2 { width: 500px; background-color:
green; padding: 0.3cm; margin: 1cm; }


Первый параграф


Второй параграф


Третий параграф


Четвертый параграф


Пятый параграф



blocks.html


Слайд 19 Характеристики границы (border)
{ border: width style color; }
width

Характеристики границы (border){ border: width style color; }width – ширина –

– ширина – 10px; 25%; 0.5in; thin; thick; medium;
style

– стиль – none; solid; dotted; dashed; double;
color – цвет – red; rgb(240,240,240); #C02510;

Можно задавать отдельные характеристики границы
{ border-width: ...;
border-style: ...;
border-color: ...; }

Можно задавать характеристики границы по сторонам блока
{ border-top: ...;
border-bottom: ...;
border-left: ...;
border-right: ...; }

или и то и другое вместе
{ border-bottom-width: ...;
border-left-style: ...;
border-top-color: ...; }


Слайд 20 Поля и заполнение
{ margin: width; padding: width; }
width

Поля и заполнение{ margin: width; padding: width; }width – ширина –

– ширина – 10px; 5%; 0.5in;
Можно задавать ширину полей

и заполнения отдельно по сторонам
{ margin-left: ...;
padding-bottom: ...;
padding-top: ...; }

Пример:

Заголовок



Слайд 21 Размещение блоков на странице
{ width: 70%; margin-left: auto;

Размещение блоков на странице{ width: 70%; margin-left: auto; margin-right: auto; }Заданный

margin-right: auto; }
Заданный таким образом, как показано выше, стиль

позволяет разместить блок по
центру страницы (соответственно слева или справа, если задано только одно поле).

Размещение текста (или других строчных элементов) внутри блока задается иначе:

{ text-align: left; } (или center или right)

Заголовок


Еще один заголовок


alignment.html

Замечание: IE6 может не распознавать правильно указания margin: auto;


Слайд 22 Дополнительно о размерах блоков
{ min-width: 100px; max-height: 5cm;

Дополнительно о размерах блоков{ min-width: 100px; max-height: 5cm; }Вместо указания точной

}
Вместо указания точной ширины/высоты блока можно задавать максимальные или
минимальные

размеры:

В случае, если содержимое блока превышает минимальный размер –
он автоматически увеличивается;

В случае, если содержимое блока превышает максимальный размер –
содержимое автоматически обрезается;


Слайд 23 Позиционирование блоков














Содержимое блоков «обтекает» плавающий блок таким

Позиционирование блоковСодержимое блоков «обтекает» плавающий блок таким образом, что не происходит

образом, что не происходит наложения содержимого. Чтобы дополнительно визуально отделить

плавающий блок, можно использовать задание в этом блоке полей (margin).

Блоки можно позиционировать, убирая их из «автоматического» размещения по
вертикали и указывая свой вариант размещения. Это можно сделать двумя
способами, один из которых – указание блока как «плавающего».


Слайд 24 Позиционирование блоков (продолжение)
Задание «плавающего» блока:

Позиционирование блоков (продолжение)Задание «плавающего» блока: На фотографии справа цветок совсем не

alt=“Selenicereus"/>
На фотографии справа цветок совсем не ослепительно белый,


а кремовый. Но это не естественный его цвет, просто освещение
ночью искусственное, вот и дает оно желтый оттенок
на фотографии.


Тоже селеницереус

Фото слева: Вид на этот замечательный цветок сбоку, размер –
28 см (29 июня 2003 года, 2 часа ночи). Его аромат, как я
обнаружил, исходит из желтой зоны между коричневыми
чашелистиками и белыми лепестками.



selenicereus.html

img.to-right { float: right; width: 200px; }
img.to-left { float: left; width: 200px; }

Чтобы указать, что следующий блок не должен содержать «обтекающий» текст, можно явно указать это с помощью атрибута clear с возможными значениями right, left, both, например:

p.wide-paragraph { clear: both; }


Слайд 25 Позиционирование блоков (продолжение)
Второй способ выведения блока из общего

Позиционирование блоков (продолжение)Второй способ выведения блока из общего алгоритма размещения блоков

алгоритма размещения блоков – явное
позиционирование на странице относительно

начала страницы или других блоков.

#relative { position: relative; right: 10%; width: 200px; }

#fixed { position: fixed; top: 300px; left: 5em; width: 15cm; }

#absolute { position: absolute; top: 200px; width: 200px; }

Задание позиции relative означает, что блок смещается относительно своего «естественного» положения.




Задание позиции fixed означает, что блок располагается на фиксированном месте страницы.




Задание позиции absolute означает, что положение блока указано относительно охватывающего его блока.





Слайд 26 Позиционирование блоков (продолжение)
Пример.
positioning.html

Это самый обычный параграф. Таких

Позиционирование блоков (продолжение)Пример.positioning.html Это самый обычный параграф. Таких параграфов ...

параграфов ...


80%">
Это тоже самый обычный параграф, но ...





В этом параграфе указана абсолютная позиция ...





Наконец, для этого параграфа указано его фиксированное ...




  • Имя файла: yazyk-opisaniya-predstavleniy-sss.pptx
  • Количество просмотров: 120
  • Количество скачиваний: 0