Стили в HTML Лекция по курсу «Компьютерный дизайн» - презентация

1 Стили в HTML Лекция по курсу «Компьютерный дизайн»

2 Стиль – правило, сообщающее браузеру, как интерпретировать отдельные теги HTML. С каждым тегом связан ряд свойств, значения которых определяют его вид при выводе браузером.

3 Таблица (лист) стилей (CSS) Таблица (лист) стилей CSS (cascading style sheets) – набор правил отображения, применяемых в документе, к которому присоединяется соответствующая таблица стилей.

4 Синтаксис CSS Все CSS-правила состоят из селектора и блока объявлений (заключённого в фигурные скобки). Внутри блока объявлений (внутри фигурных скобок, проще говоря) может находиться одно или несколько объявлений, разделённых точкой с запятой. Объявление – это строка, составленная из css- свойства и его значения.

5 Внедрение описания стилей в html- документ применить внешние стили (в виде отдельного текстового.css-файла) с помощью элемента link встроить стили непосредственно в HTML-документ (в виде блока css-текста) с помощью элемента style... применить inline-стиль, то есть назначить стиль конкретному HTML-элементу непосредственно в документе, с помощью HTML-атрибута style текст

6 Селектор типа 01 /* фрагмент сброса стилей. */ 02 table { 03 border-collapse: collapse; 04 border-spacing: 0; 05 font-size: 100%; 06 } 07 a { 08 color: #287fc3; 09 text-decoration: underline; 10 } 11 textarea { 12 font: 100% Arial, Helvetica, sans-serif; 13 padding: 0; 14 } Выполняемая задача выбор всех элементов определенного типа. Обозначение имя соответствующего тега. Пример использования:

7 Селектор класса Выполняемая задача выбор всех элементов по имени класса. Обозначение название класса с предшествующей ему точкой. Пример использования: 1 2 HTML и CSS приемы 3 Обучение 4 HTML справочник 5 1 /* зададим зеленый цвет текста в любых тегах с классом active */ 2. active { 3 color: #0f0; 4 }

8 Селектор класса 1 2 Этот текст будет зеленым 3 А этот нет 4 А этот зеленым ; 5 6 Зеленый абзац 7 Не зеленый 1 p.active { 2 color: #0f0; 3 } Класс можно присвоить сразу нескольким элементам. Комбинируя селектор класса и селектор типа, можно объединить их свойства.

9 Селектор идентификатора Выполняемая задача выбор элемента по уникальному идентификатору (значению атрибута id). Обозначение название идентификатора с предшествующим ему значком #. Пример использования: 1 2 HTML и CSS приемы 3 Обучение 4 HTML справочник 5 1/* зададим зеленый цвет текста в любом теге с id="active" */ 2#active { 3 color: #0f0; 4} 1li#active { 2 color: #0f0; 3}

10 margin Свойство margin сокращенная запись, чтобы одновременно задать свойства margin-top,margin- right, margin-bottom, margin-left (внешние отступы: сверху, справа, снизу, слева): p { margin: 10px 20px 15px 5px; } h1 { margin-top: 10px; }

11 padding Свойство padding сокращенная запись указания свойств padding-top, padding-right, padding- bottom, padding-left, задает одновременно внутренние отступы сверху, справа, снизу, слева: p { padding: 10px 20px 15px 5px; } h1 { padding-top: 10px; }

12 border Свойство border - сокращённое свойство, управляет внешним видом рамки (бордюра) вокруг элемента, позволяя определить в одной строке сразу несколько атрибутов: цвет, стиль и ширину. По сути, border предлагает быстрый вариант указания свойств border- width, border-style и border-color.

13 border-width Свойство border-width управляет толщиной рамки (границы, бордюра) вокруг элемента, оказывая влияние на все четыре её стороны. Thin - Тонкая рамка (обычно 2 пиксела). Medium - Рамка средней ширины (обычно 4 пиксела). Thick - Толстая рамка (обычно 6 пикселов). ширина Точное указание ширины рамки одним из принятых в CSS способов задания размеров. Единственный нюанс - ширина не может иметь отрицательное значение. code { border-width: 4px; } p { border-width: thin; }

14 border-style Solid Обычная сплошная рамка. None Рамка отсутствует, её ширина равна нулю. Dotted Рамка в виде последовательности точек (мелкий пунктир). Dashed Пунктирная рамка. Double Двойная линия. Groove"Вдавленная" рамка, с эффектом объёма. Ridge"Выпуклая" рамка, с эффектом объёма. Inset Вариант "вдавленной" рамки, с эффектом объёма. Outset Вариант "выпуклой" рамки, с эффектом объёма. h1 { border-style: none; }

15 border-color Свойство border-color устанавливает цвет рамки (бордюра, границы) вокруг элемента, оказывая влияние на все четыре её стороны. p { border-color: yellow #F45581 black; } a { border-color: transparent; }

16 border-collapse Свойство border-collapse устанавливает способ отображения рамки (бордюра, границы) вокруг ячейки таблицы. Оно определяет, должна ли ячейка иметь общую рамку с соседними ячейками, или свою собственную. collapse Использовать общую рамку для ячеек таблицы. separate Каждая ячейка таблицы имеет собственную рамку.

17 border-spacing Свойство border-spacing устанавливает расстояние между ячейками таблицы. Свойство применимо только в том случае, когда каждая ячейка имеет собственную рамку (бордюр, границу). table { border-spacing: 0px; } table { border-spacing: 6px; }

18 border-spacing Свойство border-spacing устанавливает расстояние между ячейками таблицы. Свойство применимо только в том случае, когда каждая ячейка имеет собственную рамку (бордюр, границу). table { border-spacing: 0px; } table { border-spacing: 6px; }

19 border-left Свойство border-left управляет внешним видом левой стороны рамки вокруг элемента. По сути, border-left предлагает сокращенный вариант записи для свойств border-left-width, border-left-style и border-left-color - цвет, стиль и ширину можно определить в одной строке. h1 { background-color:#eeeeee; border:solid 1px black; border-left: dotted 3px blue; }

20 border-right, border-top, border-bottom Свойство border-right управляет внешним видом правой стороны рамки вокруг элемента. По сути, border-right предлагает сокращенный вариант записи для свойств border-right-width, border-right-style и border-right-color.border-right-widthborder-right-styleborder-right-color Свойство border-top управляет внешним видом верхней стороны рамки вокруг элемента. По сути, border-top предлагает сокращенный вариант записи для свойств border-top-width,border-top-style и border-top-color.border-top-widthborder-top-styleborder-top-color Свойство border-bottom управляет внешним видом нижней стороны рамки вокруг элемента. По сути, border-bottom предлагает сокращенный вариант записи для свойств border-bottom-width, border-bottom-style и border-bottom-color.border-bottom-widthborder-bottom-styleborder-bottom-color

21 background Свойство background позволяет задать стиль фона, определив в одной строке сразу несколько атрибутов: цвет фона, фоновую картинку, её положение.цвет По сути, background - сокращённое свойство, краткий вариант записи для свойств background-color, background-image, background- repeat, background-attachment и background-position.background-colorbackground-imagebackground- repeatbackground-attachmentbackground-position body {background: white url('/images/sun.gif') repeat fixed top center} Эквивалентно: body { background-color: white; background-image: url('/images/sun.gif'); background-repeat: repeat; background-attachment: fixed; background-position: top center; }

22 background-color Свойство background-color устанавливает цвет фона элемента. Цвет применяется ко всему фону содержимого элемента, и распространяется на его внутренние отступы (paddings). Внешние поля (margins) остаются прозрачными. цвет Можно напрямую указать цвет фона одним из стандартніх способов transparent Устанавливает прозрачный фон

23 background-image, background-repeat Свойство background-image устанавливает фоновое изображение для элемента. Свойство background-repeat управляет способом "размножения" - циклического повторения фонового изображения. body { background: white url('/images/supersonic.gif'); background-repeat: repeat-x; }

24 background-attachment Управляет способом прикрепления фонового изображения к окну браузера. body { background: white url('images/giraffe.gif'); background-repeat: no-repeat; background-position: right bottom; background-attachment: fixed; }

25 font Свойство font - универсальное сокращённое свойство, позволяет буквально "в одной строке" одновременно задать несколько свойств шрифта: font-style font-variant font-weight font-size (обязательное) line-height font-family (обязательное) Значения line-height можно указать только в паре с font-size, разделив их символом /.line-heightfont-size p {font: 14pt/16pt, courier} /* шрифт courier размером 14pt, межстрочный интервал 16pt */

26 font-style Свойство font-style управляет наклоном шрифта. p {font-style: italic} h2 {font-style: normal} td {font-style: oblique}

27 font-variant Управляет внешним видом строчных букв. Свойство позволяет отобразить строчные буквы как прописные уменьшенного размера. В издательском деле это называется "капителью". h2 { font-variant: small-caps; font-style: italic; }

28 font-weight Свойство font-weight позволяет задать толщину (насыщенность) шрифта. body {font-weight: bold;} p {font-weight: normal;}

29 font-size

30 line-height Свойство line-height используется для того, чтобы изменить размер межстрочного интервала. p { line-height: 20px; }

31 font-family Свойство font-family позволяет выбрать шрифт для отображения текста. p {font-family: Courier, "Courier New", monospace;}

32 position Свойство position определяет порядок, в соответствии с которым элемент отображается на веб-странице. По умолчанию элементы отображаются последовательно один за другим в том порядке, в котором они определены в документе. Блочные элементы, такие как p, div, table, blockquote и др. отображаются в виде прямоугольника, который занимает 100% ширины родительского элемента. Поэтому последовательные блочные элементы отображаются один под другим. Свойство position вместе с top, right, bottom и left свойствами может отображать элемент с нарушением обычного порядка.

33 position

34 top Используется совместно со свойством position. В зависимости от конкретного значения position свойство top может сдвигать элемент вниз относительно верхнего края: своей исходной позиции (position:relative) позиции родительского элемента (position:absolute) окна браузера (position:fixed) body {font-weight: bold} p { position: fixed; top: 300px; }

35 right, bottom, left

36 clear Свойство clear запрещает/разрешает элементу обтекать "floated" объекты.

37 display

38 float Свойство float задает с какой стороны элемент обтекаем (делает элемент «плавающим»), при этом элемент выравнивается по указанной стороне, остальные обтекают с остальных сторон.

39 height Свойство height определяет высоту прямоугольной области элемента. div { height: 400px; }

40 width Свойство width определяет ширину прямоугольной области вокруг элемента. div { width: 400px; }

41 Преимущества применения CSS Позволяют разделить смысловое содержание и оформление документа; При размещении описания стилей в отдельном файле его можно использовать с несколькими документами, что позволяет: А) изменять оформления нескольких документов редактируя один файл; Б) получить единый стиль оформления для многих документов (например, страниц одного сайта).