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

Содержание

• 
  Слайд 1

  CSSЯзык описания представлений

• 
  Слайд 2

  Что такое CSS?

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

  определяет внешний вид текста – шрифты, размеры, цвет;

  определяет расположение элементов друг относительно друга;

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

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

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

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

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

• 
  Слайд 3

  Базовая структура элементов стиля

  Элементы стиля описываются в виде

  атрибут: значение;

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

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

  Курс лекций.Курс лекций.

  h2 { color: blue; text-align: center; }

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

  Допустимые словесные названия цветов:

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

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

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

• 
  Слайд 8

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

  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 { 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: yellow; font-weight: bold;}

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

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

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

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

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

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

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

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

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

  classes.html

• 
  Слайд 11

  Псевдо-классы

  :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.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: blue; }

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

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

• 
  Слайд 14

  Каскадирование стилей

  Чем определяется стиль конкретного элемента?

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

  Стилем, указанным в заголовке HTML-документа с помощью элемента:<style> body { background-color: yellow; }

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

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

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

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

• 
  Слайд 15

  Дополнительные возможности

  selector1 selector2 { styles }

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

  selector1 > selector2 { styles }

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

• 
  Слайд 16

  Дополнительные возможности - пример

  li strong { text-decoration: underline; }

  Почему люди пользуются поиском Google?

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

  Размещение фрагментов с помощью CSS

  Блочные элементы имеют:

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

  прослойку (padding);

  границу (border);

  поля (margin).

  По умолчанию блоки располагаются

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

  соседних блоков равно по высоте

  максимальному из двух полей элементов).

  В1

  В2

• 
  Слайд 18

  Пример размещения блоков

  p { font-family: sans-serif; 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 – ширина – 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 – ширина – 10px; 5%; 0.5in;

  Можно задавать ширину полей и заполнения отдельно по сторонам

  { margin-left: ...;

  padding-bottom: ...;

  padding-top: ...; }

  Пример:

  Заголовок
• 
  Слайд 21

  Размещение блоков на странице

  { width: 70%; margin-left: auto; margin-right: auto; }

  Заданный таким образом, как показано выше, стиль позволяет разместить блок по

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

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

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

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

  alignment.html

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

• 
  Слайд 22

  Дополнительно о размерах блоков

  { min-width: 100px; max-height: 5cm; }

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

  минимальные размеры:

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

  он автоматически увеличивается;

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

  содержимое автоматически обрезается;

• 
  Слайд 23

  Позиционирование блоков

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

• 
  Слайд 24

  Позиционирование блоков(продолжение)

  Задание «плавающего» блока:

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

  Фото слева: Вид на этот замечательный цветок сбоку, размер – 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
  

  .

• 
  Слайд 27

  Порядок видимости блоков

  Порядок расположения блоков в случае, когда они перекрывают друг друга,

  определяется атрибутом стиля z-index. Чем больше значение этого атрибута,

  тем выше находится соответствующий объект в «стопке» перекрывающих друг

  друга объектов.

  advertising.html

  #advertising {

  width: 350px; top: 100px; left: 50px; padding: 20px;

  position: fixed; z-index: 100;

  background-color: red; opacity: 0.5;

  font-family: arial; font-size: 24pt; }

  Это совершенно нормальный заголовок

  The CSS positioning properties...

  FirePublish is the first multi-platform...

  Anchor Pseudo-classes: A link...

  Эту песню не задушишь, не убьешь!