Основы CSS. Оформление дизайна сайта по технологии веб-программирования CSS

Содержание

Слайд 2

Содержание Понятие о стилях CSS Причины применения CSS к HTML Создание

Содержание

Понятие о стилях CSS

Причины применения CSS к HTML

Создание стилей CSS

Разновидности стилей

CSS

Таблицы стилей

Комментарии CSS

Слайд 3

Понятие о стилях CSS Для создания представления Web-страниц предназначена технология каскадных

Понятие о стилях CSS

Для создания представления Web-страниц предназначена технология каскадных таблиц

стилей (Cascading Style Sheets, CSS).
CSS содержит набор правил (стилей), описывающих оформление web-страницы и отдельных её фрагментов. Эти правила определяют цвет текста и выравнивание абзаца, отступы между графическим изображением и обтекающим его текстом, наличие и параметры рамки таблицы, цвет фона web-страницы и многое другое.
Стандарт, описывающий первую версию этого языка (CSS 1), появился в 1996 году. В настоящее время широко поддерживается и применяется на практике стандарт CSS 2 и ведется разработка стандарта CSS 3, ограниченное подмножество которого уже поддерживают многие web-обозреватели.
Слайд 4

Причины применения CSS к HTML

Причины применения CSS к HTML

Слайд 5

Создание стилей CSS Обычный формат определения стиля CSS: { : ;

Создание стилей CSS

Обычный формат определения стиля CSS:
<селектор >
{
< атрибут стиля

1>: <значение 1>;
< атрибут стиля 2>: <значение 2>;
…
< атрибут стиля n>: <значение n>;
}
Слайд 6

Основные правила создания стиля: Селектор используется для привязки стиля к элементу

Основные правила создания стиля:

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

на которую он должен распространять своё действие. Фактически селектор однозначно идентифицирует данный стиль.
За селектором, через пробел, указывают список атрибутов стиля и их значений, заключенных в фигурные скобки.
Атрибут стиля представляет один из параметров элемента web-страницы: цвет шрифта, величину отступа, толщину рамки и др.
Значение атрибута стиля указывают после него через символ :. В некоторых случаях значение атрибута стиля заключают в кавычки.
Пары <атрибут стиля>: <значение> отделяют друг от друга символом ;
Между последней парой < атрибут стиля>: <значение> и закрывающейся фигурной скобкой символ ; не ставят, иначе некоторые web-обозреватели могут неправильно обработать определение стиля.
Определения различных стилей разделяют пробелами или переводами строк.
Внутри селекторов и имен стилей не должны присутствовать пробелы и переводы строки. Пробелы и переводы строк, поставленные в других местах определе-
ния стиля web-обозреватель их игнорирует.
Слайд 7

Разновидности стилей CSS Стилевой класс Именованные стили Комбинированные стили Встроенные стили

Разновидности стилей CSS

Стилевой класс

Именованные
стили

Комбинированные стили

Встроенные
стили

Слайд 8

Стили переопределения тега P { color: #FF0000 } P – селектор,

Стили переопределения тега

P { color: #FF0000 }
P – селектор, представляет

собой имя тега Р
Color – атрибут стиля, задает цвет текста
#FF0000 – значение атрибута стиля color, код красного цвета.
Данный стиль автоматически применится ко всем абзацам web-страницы (тегам Р).
Пример1:
EM { color: #00FF00;
Font-weight: bold; }
любой текст, помещенный в тег будет зеленым полужирным шрифтом. Атрибут стиля Font-weight – степень жирности шрифта, а bold – полужирный.
Пример2:
BODY { background-color:#000000;
Color: #FFFFFF; }
задает для всей странице белый цвет текста #FFFFFF и
цвет фона – черный #000000.
Слайд 9

Стилевой класс Он может быть привязан к любому тегу. В качестве

Стилевой класс

Он может быть привязан к любому тегу. В качестве селектора

здесь указывается имя стилевого класса, которое его однозначно идентифицирует. Имя стилевого класса должно состоять из букв латинского алфавита, цифр и дефисов, причем начинаться с буквы. В определении стилевого класса его имя обязательно предваряется символом точки – это признак того, что определяется именно стилевой класс.
Стилевой класс требует явной привязки к тегу. Для этого служит атрибут CLASS поддерживаемый практически всеми тегами. В качестве значения этого атрибута указывают имя нужного стилевого класса без символа точки:

Внимание!

- здесь привязан только что созданный стилевой класс redtext к абзацу Внимание!, абзац будет отображен красным цветом.
Листинг:
.attention { color: #FF0000;
Font-style: italic }
…

Стилевой класс требует явной привязки
атрибутом тега CLASS!


Слайд 10

Создан стилевой класс attention, который задает красный цвет и курсивное начертание

Создан стилевой класс attention, который задает красный цвет и курсивное начертание

шрифта. Затем его привязали к тегу . В результате содержимое тега будет полужирным курсивным шрифтом красного цвета. Тег дает полужирность, а стилевой класс attention – курсив и красный цвет.
В качестве значения атрибута CLASS можно указать сразу несколько имен стилевых классов, разделив их пробелами. Их действия складываются.
.attention { color: #FF0000;
Font-style: italic }
.bigtext { font-size: large }
…

Стилевой класс требует явной привязки атрибутом тега CLASS!


Слайд 11

Именованные стили Селектором этого стиля также является имя, которое его однозначно

Именованные стили

Селектором этого стиля также является имя, которое его однозначно идентифицирует,

и привязывается он к тегу тоже явно.
Отличия:
В определении именованного стиля перед его именем ставится #.
Привязку именованного стиля к тегу реализуется через атрибут ID, поддерживаемый всеми тегами.
Значение атрибута тега ID должно быть уникально в пределах web-страницы.
#bigtext { font-size: large }
…

Это большой текст

- абзац набран крупным шрифтом.
Слайд 12

Комбинированные стили Можно создавать стили несколькими селекторами. Такие стили служат для

Комбинированные стили

Можно создавать стили несколькими селекторами. Такие стили служат для привязки

к тегам, удовлетворяющим сразу нескольким условиям. Комбинированный стиль должен быть привязан к тегу, вложенному в другой тег, или к тегу, для которого указан определенный стилевой класс.
Правила для создания селекторов в комбинированном стиле:
Селекторами могут быть имена тегов, имена стилевых классов и имена именованных стилей.
Селекторы перечисляются слева на право и обозначают уровень вложенности соответствующих тегов, который увеличивается при движении слева на право: теги, указанные правее, должны быть вложены в теги, что стоят левее.
Если имя тега скомбинировано с именем стилевого класса или именованного стиля, значит, для данного тега должно быть указано это имя стилевого класса или именованного стиля.
Селекторы разделяются пробелами.
Стили привязывают к тегу, обозначенному самым правым селектором.
Слайд 13

Пример 1 комбинированного стиля: P EM { color: #0000FF } –

Пример 1 комбинированного стиля:
P EM { color: #0000FF } – в

качестве селекторов использованы имена тегов, сначала тег Р, а затем ЕМ, значит тег ЕМ должен быть вложен в тег Р.
Стиль будет привязан к тегу ЕМ.

этот текст станет синим


этот не станет


этот - тоже


Слова «Этот текст» - синим цветом.
Пример 2:
P.mini { color: #0000FF;
Font-size: smaller }
имя тега Р скомбинировано с именем стилевого класса mini, значит, данный стиль будет применен к любому тегу Р, для которого указано имя стилевого класса mini.
Слайд 14

Встроенные стили Они не имеют селектора, т.к. ставятся напрямую в нужный

Встроенные стили

Они не имеют селектора, т.к. ставятся напрямую в нужный тег.
В

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

маленький курсив


Слайд 15

Основные правила создания стиля: Селектор используется для привязки стиля к элементу

Основные правила создания стиля:

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

на которую он должен распространять своё действие. Фактически селектор однозначно идентифицирует данный стиль.
За селектором, через пробел, указывают список атрибутов стиля и их значений, заключенных в фигурные скобки.
Атрибут стиля представляет один из параметров элемента web-страницы: цвет шрифта, величину отступа, толщину рамки и др.
Значение атрибута стиля указывают после него через символ :. В некоторых случаях значение атрибута стиля заключают в кавычки.
Пары <атрибут стиля>: <значение> отделяют друг от друга символом ;
Между последней парой < атрибут стиля>: <значение> и закрывающейся фигурной скобкой символ ; не ставят, иначе некоторые web-обозреватели могут неправильно обработать определение стиля.
Определения различных стилей разделяют проделами или переводами строк.
Внутри селекторов и имен стилей не должны присутствовать пробелы и переводы строки. Пробелы и переводы строк, поставленные в других местах определения стиля web-обозреватель их игнорирует. Поэтому мы можем формировать CSS-код для удобства его чтения, как проделывали это с кодом HTML.
Слайд 16

Таблицы стилей Внутренние стилевые классы, стили переопределения тега, именованные, комбинированные стили. Внешние встроенные стили Таблицы стилей

Таблицы стилей

Внутренние
стилевые классы,
стили переопределения тега,
именованные,
комбинированные стили.

Внешние
встроенные стили

Таблицы
стилей

Слайд 17

Внешние таблицы стилей хранятся отдельно от web-страниц, в файлах с расширением

Внешние таблицы стилей хранятся отдельно от web-страниц, в файлах с расширением

CSS. Они содержат CSS-код определений стилей.
Пример внешней таблицы:
.redtext { color: #FF0000 }
#bigtext { font-size: large }
EM { color: #00FF00;
Font-weight: bold }
Р EM { color: #0000 FF }
Здесь определены четыре стиля. Если внешняя таблица стилей храниться отдельно, то её нужно привязать к web-странице. Для этого предназначен одинарный метатег , который помещается в секцию заголовка соответствующей web-страницы:
” TYPE=”text/css”>
Слайд 18

Пример привязки внешней таблицы стилей, хранящейся в файле main.css, к текущей

Пример привязки внешней таблицы стилей, хранящейся в файле main.css, к текущей

web-странице.

…

…

Преимущество внешних таблиц стилей в том, что их можно привязать сразу к нескольким web-страницам. Недостаток – потерять файл.
Слайд 19

Внутренняя таблица стилей записывается прямо в HTML-код web-страницы. Её заключают в

Внутренняя таблица стилей записывается прямо в HTML-код web-страницы. Её заключают в

парный тег

Преимущество – она является неотъемлемой частью web-страницы, т.е. не теряется. Недостатки: стили, определенные во внутренней таблице стилей, применяются
только к той web-странице, в которой эта таблица стилей находится.
Слайд 20

В одной и той же web-странице могут присутствовать сразу несколько таблиц

В одной и той же web-странице могут присутствовать сразу несколько таблиц

стилей нескольких внешних и внутренняя.

” TYPE=”text/css”>
” TYPE=”text/css”>


Действие всех этих таблиц стилей складывается.
Слайд 21

Комментарии CSS Язык CSS позволяет формировать комментарии двух видов: комментарий, состоящий

Комментарии CSS
Язык CSS позволяет формировать комментарии двух видов:
комментарий, состоящий из

одной строки, с помощью / в начале строки
/ Это комментарий
P { color: #0000FF }
комментарий, состоящий из произвольного числа строк, создаются с помощью символов

Слайд 22

Параметры CSS

Параметры CSS

Слайд 23

Параметры шрифта Атрибут стиля Font-family: (задает имя шрифта) Font-family: | inherit

Параметры шрифта

Атрибут стиля Font-family: (задает имя шрифта)
Font-family: <список имен шрифтов, разделенных

запятыми> | inherit
Пример:
P { font-family: Arial }
H1 { font-family: “Times New Roman” }


P { font-family: Verdana, Arial } ищет первый, если не находит, то второй и т.д.
H2 { font-family: Verdana, Arial, sans-serif } задает семейство шрифтов: serif (шрифты с засечками), sans-serif (шрифты без засечек), cursive (шрифты, имитирующие рукописный текст), fantasy (декоративные шрифты), monospase (моноширинные шрифты).
Inherit – указывает, что текст данного элемента должен быть тем
же, что и текст родительского.

Слайд 24

Атрибут стиля Font-size: (определяет размер шрифта) Font-size: | xx-small | x-small

Атрибут стиля Font-size: (определяет размер шрифта)
Font-size: <размер> | xx-small | x-small

| small | medium | large | x-large |xx-large | larger | smaller | inherit
Задает размер от самого маленького до самого большого.
Larger и smaller задает следующий размер установленного шрифта.
Inherit – тот же размер, что и родительский.
Слайд 25

Единицы измерения размера: P { font-size: 10pt } STRONG { font-size:

Единицы измерения размера:

P { font-size: 10pt }
STRONG { font-size: 1cm }
EM

{ font-size: 150% }
Слайд 26

Атрибут стиля Color (задает цвет текста) Color: | inherit Пример: P

Атрибут стиля Color (задает цвет текста)
Color: <цвет>| inherit
Пример:
P { font-size: #CCCCCC

}
H1 { font-size: red }
Атрибут стиля Opacity (указывает степень полупрозрачности: значение от 0 до 1)
Opacity: <числовое значение>| inherit
0 – полная прозрачность, 1 – полная непрозрачность.
Пример:
P { font- Opacity: 0.5 }
Атрибут стиля Font-weight: (устанавливает «жирность» шрифта)
Font-weight: normal|bold|bolder|lighter|100|200|300|400|500|600|…|900| inherit
400 – нормальность (normal), 700 – полужирный (bold).
Слайд 27

Атрибут стиля Font-style: (задает начертание шрифта) Font-style: normal|italic|oblique| inherit Normal –

Атрибут стиля Font-style: (задает начертание шрифта)
Font-style: normal|italic|oblique| inherit
Normal – обычный шрифт
Italic

- курсив
Oblique – особое декоративное начертание, похожее на курсив
Атрибут стиля Text-decoration (задает «украшение»)
Text-decoration: none|underline|overline|line-through|blink| inherit
None – убирает все «украшения» заданные родителем
Underline – подчеркивает текст
Overline – «надчеркивает», проводит линию над текстом
line-through – зачеркивает текст
blink – мерцающий шрифт
Слайд 28

Атрибут стиля Line-height (задает высоту строки текста) Line-height: normal| | inherit

Атрибут стиля Line-height (задает высоту строки текста)
Line-height: normal|<расстояние> | inherit
Пример:
P {

Line-height: 2 } увеличивает высоту строки вдвое по сравнению с обычной
Атрибут стиля Letter-spacing (расстояние между символами текста)
letter-spacing: normal|<расстояние>
расстояние добавлено к изначальному, установленным web-обозревателем
Атрибут стиля Font: (задает одновременно несколько параметров шрифта)
Font: [<начертание>] [<вид строчных букв>] [<” жирность“>] [<размер> [|<высота строки текста> ]] <имя шрифта>
имя шрифта – обязательно, остальное – нет
P { font: 10pt “Times new roman” } - шрифт Times new roman 10пт
H6 {font: italic 12pt Verdana } – заголовок 6 уровня шрифт
Verdana 12пт курсив
Слайд 29

Параметры, управляющие разрывом строк Атрибут стиля White-space (задает правила вывода текста)

Параметры, управляющие разрывом строк

Атрибут стиля White-space (задает правила вывода текста)
White-space: normal|pre|nowrap|pre-wrap|pre-line|

inherit
Атрибут стиля Word-wrap (указывает места разрыва)
Word-wrap: normal|break-word| inherit
Normal – разрыв текста на строки только по пробелам
break-word – разрыв текста на строки внутри слов
Пример:
P { Word-wrap: break-word } выполняется разрыв текста
на строки внутри слов в абзацах
Слайд 30

Параметры тени у текста Атрибут стиля Text-shadow (создает тень у текста)

Параметры тени у текста

Атрибут стиля Text-shadow (создает тень у текста)
Text-shadow: none

| <цвет> <горизонтальное смещение> <вертикальное смещение> [<радиус размытия>]
None – убирает тень у текста
горизонтальное смещение – если значение >0, то тень расположена правее текста, если <0, то левее, если =0, то тень под текстом
вертикальное смещение - если значение >0, то тень расположена ниже текста, если <0, то выше, если =0, то тень под текстом
радиус размытия – если не указан, приравнивается к 0, не будет размытия.
Пример:
Н1 { Text-shadow: black 1mn 1mn 1px } для заголовка 1 уровня тень расположена правее и ниже теста на 1 мм и имеет радиус размытия
1 пиксель
Слайд 31

Параметры фона Фон у отдельных элементов, отличный от фона страницы надо

Параметры фона

Фон у отдельных элементов, отличный от фона страницы надо задавать

в крайних случаях.
Атрибут стиля Background-color (задает цвет фона)
Background-color: transparent | <цвет> | inherit
Цвет – задается в виде кода или имени
Transparent – убирает фон совсем, тогда элемент Web-станицы получит «прозрачный» фон.
Пример:
BODY { color: white; Background-color: black } – для всей страницы черный фон и белый текст
Слайд 32

Атрибут стиля Background-image (задает в качестве фона графическое изображение) Background-image: none

Атрибут стиля Background-image (задает в качестве фона графическое изображение)
Background-image: none |

url <интернет-адрес файла изображения>
None – убирает фон
Графический фон выводится поверх обычного фона, заданного с помощью атрибута стиля Background-color. И, если фоновое изображение содержит «прозрачные» фрагменты (такую возможность поддерживают форматы GIF и PNG), этот фон будет «просвечивать» сквозь них.
Пример:
TABLE.yellow { Background-color: yellow; Background-image: url (“/yellow_Background.png”) }
для таблицы задается обычный и графический фон.
Если фоновое изображение меньше страницы, то фоновое изображение «замостит» страницу.
Слайд 33

Атрибут стиля Background -repeat (задает параметры повторения фонового изображения) Background –repeat:

Атрибут стиля Background -repeat (задает параметры повторения фонового изображения)
Background –repeat: no-

repeat | repeat | repeat-x | repeat-y | inherit
no- repeat – фон. изобр. не будет повторяться
repeat - фон. изобр. будет повторяться
repeat-x - фон. изобр. будет повторяться по горизонтали
repeat-y - фон. изобр. будет повторяться по вертикали
Атрибут стиля Background -position (задает параметры повторения фон. изобр.)
Background – position: <гориз. позиция> [<верт. позиция>] | inherit
Горизонтальная позиция задается в формате:
<Числовое значение> | left |centre | right
Вертикальная позиция задается в формате:
<Числовое значение> | top | centre | bottom
Слайд 34

Пример: TABLE.brg { Background- position: 1cm top } – фон. изобр.

Пример:
TABLE.brg { Background- position: 1cm top } – фон. изобр. на

расстоянии 1 см от левого края и прижато к нижнему краю.
TABLE.brg { Background- position: right } – фон. изобр. прижато к правому краю в центре.
Слайд 35

Атрибут стиля Background -attachment (фиксация фон. изобр., запрет прокрутки граф.фона) Background

Атрибут стиля Background -attachment (фиксация фон. изобр., запрет прокрутки граф.фона)
Background –

attachment: scroll | fixed;
scroll - прокручивает фон вместе с содержимым web-страницы:
fixed – фиксирует фон на месте
Слайд 36

Контейнеры. Встроенные контейнеры Контейнер – элемент web-страницы, предназначенный только для выделения

Контейнеры. Встроенные контейнеры

Контейнер – элемент web-страницы, предназначенный только для выделения какого-либо

её фрагмента. Таким фрагментом может быть часть блочного элемента (абзаца, заголовка, цитата, текста фиксированного форматирования и др.), блочный элемент или сразу несколько блочных элементов. Web-обозреватель никак не выделяет контейнер на web-странице.
Встроенный контейнер создается с помощью парного тега . Фрагмент блочного элемента, который нужно превратить в содержимое встроенного контейнера, помещают в этот тег:

Представлениесоздается с помощью стилей CSS.

- поместили во встроенный контейнер фрагмент абзаца.
.bolded { font-weight: bold }
…

Представление создается с
помощью стилей CSS.

- слово «Представление» будет
полужирным шрифтом.
Слайд 37

Параметры абзацев, списков и изображений Параметры вывода текста Атрибуты стиля, управляющие

Параметры абзацев, списков и изображений Параметры вывода текста

Атрибуты стиля, управляющие выводом текста

в структурирующих текст блочных элементах (они применимы только к блочным элементам).
Атрибут стиля Text-align (задает горизонтальное выравнивание)
TEXT-ALIGN: left | right | centre | justify | inherit
Left – выравнивание по левому краю
Right – выравнивание по правому краю
Centre – выравнивание по центру
Justify – выравнивание по ширине
P { text-align: justify }
H1 { text-align: centre }
Атрибут стиля Text-indent (задает отступ для красной строки)
TEXT-INDENT: <отступ “красной строки”>
P { text-indent: 5mm }
Слайд 38

Параметры списков Атрибут стиля list-style-type (задает вид маркеров или нумерацию у

Параметры списков

Атрибут стиля list-style-type (задает вид маркеров или нумерацию у пунктов

списка)
LIST-STYLE-TYPE: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha| lower-latin| upper-alpha | upper-latin | armenian| georgian | none | inherit
Disc – маркер в виде черного кружка (обычный)
Circle – маркер в виде светлого кружка
Square – маркер в виде квадратика
Decimal – нумерация арабскими цифрами
decimal-leading-zero – нумерация арабскими цифрами от 01 до 99 с начальным нулем
lower-roman – нумерация маленькими римскими цифрами
upper-roman - нумерация большими римскими цифрами
lower-greek - нумерация маленькими греческими буквами
lower-alpha и lower-latin - нумерация маленькими латинскими
буквами
Слайд 39

upper-alpha и upper-latin - нумерация большими латинскими буквами Armenian – нумерация

upper-alpha и upper-latin - нумерация большими латинскими буквами
Armenian – нумерация традиционными

армянскими цифрами
georgian– нумерация традиционными грузинскими цифрами
none – маркер и нумерация отсутствуют
Пример
UL { list-style-type: square }- задает маркированный список в виде квадратика
Пример
.squared { list-style-type: square }
…

  • первый пункт

  • второй пункт (с другим маркером)

  • третий пункт


Слайд 40

Атрибут стиля list-style-IMAGE (задает графическое изображение в виде маркеров) LIST-STYLE-IMAGE: none

Атрибут стиля list-style-IMAGE (задает графическое изображение в виде маркеров)
LIST-STYLE-IMAGE: none |

<интернет-адрес файла изображения> | inherit
None – убирает графический маркер и возвращает простой, неграфический
Пример
UL { list-style-image: url (/markers/dot.gif) }
Слайд 41

Параметры отображения Атрибут стиля visibility (указывает, будет ли элемент отображаться на

Параметры отображения

Атрибут стиля visibility (указывает, будет ли элемент отображаться на web-странице)
VISIBILITY:

visible | hidden | collapse | inherit
Visible – элемент отображается на web-странице
Hidden - элемент не отображается на web-странице
Collapse – применим только к строкам, секциям, столбцам и группам столбцов таблицы
Атрибут стиля display (задает вид элемента web-страницы: будет он блочным, встроенным или вообще пунктом списка)
DISPLAY: none | inline | block | inline-block | list-item | run-in | table | inline-table | table-caption | table-column |table-column-group | table-header-group | table-row-group | table-footer-group | table-row | table-cell | inherit
None – элемент не будет отображаться на web-странице
Inline – встроенный элемент
Block – блочный элемент
Слайд 42

inline-block – блочный элемент, который будет «обтекаться» содержимым соседних блочных элементов

inline-block – блочный элемент, который будет «обтекаться» содержимым соседних блочных элементов
list-item

– пункт списка
run-in – встраивающийся элемент. Если за таким элементом следует блочный элемент, он становится частью данного блочного элемента (фактически – встроенным в него элементом), в противном случае он сам становиться блочным элементом
table- таблица
inline-table – таблица, отформатированная как встроенный элемент (можно поместить таблицу в абзац)
table-caption – заголовок таблицы
table-column – столбец таблицы
table-column-group – группа столбцов таблицы
table-header-group – секция заголовка таблицы
table-row-group – секция тела таблицы
table-footer-group – секция завершения таблицы
Слайд 43

table-row – строка таблицы table-cell – ячейка таблицы Пример комбинированного стиля

table-row – строка таблицы
table-cell – ячейка таблицы
Пример комбинированного стиля
IMG.block { display:

block } -позволяет определенным графическим изображениям отображаться как блочные элементы
LI { display: inline } после применения стиля, пункты списков станут встроенными элементами и будут выводиться в одну строку
.hidden { display: none } – делает элемент невидимым
Слайд 44

Отступы, рамки и выделение Стандарт CSS предлагает средства для создания отступов

Отступы, рамки и выделение

Стандарт CSS предлагает средства для создания отступов двух

видов.
внутренний отступ – между воображаемой границей элемента web-страницы и его содержимым.
внешний отступ – между воображаемой границей данного элемента web-страницы и воображаемыми границами соседних элементов web-страницы.
Рассмотрим ячейку таблицы, ячейка наполнена текстом. И имеет воображаемую границу, и окружена другими ячейками:
внутренний отступ – это отступ между границей ячейки и содержащимся в ней текстом;
внешний отступ – это отступ между границами отдельных ячеек таблицы.
Слайд 45

Атрибуты стиля padding: padding-left – величина внутренних отступов слева Padding-top –

Атрибуты стиля padding:
padding-left <отступ> – величина внутренних отступов слева
Padding-top <отступ> –

величина внутренних отступов сверху
Padding-right <отступ> – величина внутренних отступов справа
Padding-bottom <отступ> - величина внутренних отступов снизу
Пример внутреннего отступа, равным 2 пикселям со всех сторон
TD, TH { padding-left: 2px
padding-top: 2px
padding-right: 2px
padding-bottom: 2px }
Пример внутреннего отступа, равным 2 см слева и справа
.indented { padding-left: 2cm
padding-right: 2cm
Слайд 46

Атрибуты стиля padding: Padding: [ [ [ ]]]– величина внутренних отступов:

Атрибуты стиля padding:
Padding: <отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>

]]]– величина внутренних отступов:
если указано одно значение, оно задает величину отступа со всех сторон;
если указаны два значения, первое установит величину отступа сверху и снизу, а второе – слева и справа;
если указаны три значения, первое установит величину отступа сверху, второе – слева и справа, а третье - снизу;
если указаны четыре значения, первое задаст величину отступа сверху, второе – справа, третье – снизу, а четвертое – слева.
Пример внутреннего отступа, равным 2 см слева и справа
TD, TH { padding: 2px
.indented { padding: 0cm 2cm 0cm 2cm }
Слайд 47

Атрибуты стиля margin (задает величины внешних отступов): margin-left | margin-top |

Атрибуты стиля margin (задает величины внешних отступов):
margin-left | margin-top | margin-right

| margin-bottom: <>| auto | inherit
слева, сверху, справа и снизу
Пример у всех заголовков первого уровня отступ сверху 5 мм
Н1 { margin-top: 5mm }
Пример отрицательный отступ позволяет убрать отступы, созданные по умолчанию
UL { margin-left: -20px }
Атрибуты стиля margin (задает величины внешних отступов):
Margin: <отступ 1> [<отступ 2> [<отступ 3> [<отступ 4> ]]]– величина внешних отступов:
Пример у всех заголовков первого уровня отступ сверху и снизу 5 мм,
слева и справа – нет отступа
Н1 { margin: 5mm 0mm}
Слайд 48

Атрибуты стиля border-spacing (задает величины отступов между ячейками таблицы): border-spacing: [

Атрибуты стиля border-spacing (задает величины отступов между ячейками таблицы):
border-spacing: <отступ 1>

[<отступ 2>]
если указано одно значение, оно задает величину отступа со всех сторон ячейки таблицы;
если указаны два значения, первое задает величину отступа слева и справа, а второе – сверху и снизу.
Атрибут стиля применяется только к таблицам (тегу )
TABLE {border -spacing: 1px } – отступы между ячейками таблицы равны одному пикселю.
Слайд 49

Параметры рамки Толщина рамки:

Параметры рамки

Толщина рамки:

Слайд 50

Атрибуты стиля border (задает толщину сторон рамки): Border-left-width| border-top-width| border-right-width| border-bottom-width|:

Атрибуты стиля border (задает толщину сторон рамки):
Border-left-width| border-top-width| border-right-width| border-bottom-width|: thin|

medium | thick | <толщина> | inherit
Thin - тонкая
Medium - средняя
Thick толстая
Пример толщина рамки у ячеек таблицы равна одному пикселю
TD, TH { border-left-width: thin;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin }
Пример у всех заголовков первого уровня рамку из нижней стороны
толщиной 5 пикселей
H1 { border-bottom-width: 5px }
Слайд 51

Атрибуты стиля border-width (задает толщину сторон всех сторон рамки): Border-width: [

Атрибуты стиля border-width (задает толщину сторон всех сторон рамки):
Border-width: <толщина1> [<толщина2>

[<толщина3> [<толщина4>]]]
если указано одно значение, оно задает толщину всех сторон рамки;
если указаны два значения, первое установит толщину рамки сверху и снизу, а второе – толщину левой и правой сторон рамки;
если указаны три значения, первое установит толщину верхней, второе – левой и правой, а третье – нижней сторон рамки;
если указаны четыре значения, первое задаст толщину верхней, второе – правой, третье – нижней, а четвертое – левой сторон рамки.
Пример толщина рамки у ячеек таблицы равна одному пикселю
TD, TH { Border-width: thin }
Слайд 52

Атрибуты стиля border (задает цвет сторон рамки): Border-left-color| Border-top-color| Border-right-color| Border-bottom-color:

Атрибуты стиля border (задает цвет сторон рамки):
Border-left-color| Border-top-color| Border-right-color| Border-bottom-color: transparent

<цвет> | inherit
Transparent – задает «прозрачный» цвет, сквозь который будет «просвечивать» фон родительского элемента.
Пример у всех заголовков первого уровня красную рамку из нижней стороны толщиной 5 пикселей
H1 { border-bottom-width: 5px
border-bottom-color: red }
Атрибуты стиля border-color (задает цвет всех сторон рамки):
Border-color: <цвет1> [<цвет2> [<цвет3> [<цвет4>]]]
Пример толщина рамки у ячеек таблицы равна одному пикселю
TD, TH { Border-width: thin
Border-color: black }
Слайд 53

Атрибуты стиля border-..-style (задает стиль линий сторон рамки): Border-left- style |

Атрибуты стиля border-..-style (задает стиль линий сторон рамки):
Border-left- style | Border-top-

style | Border-right- style | Border-bottom- style: none | hidden | dotted| dashed | solid | double | groove | ridge | inset | outset | inherit
Слайд 54

Пример у всех заголовков первого уровня красную рамку двойной линией из

Пример у всех заголовков первого уровня красную рамку двойной линией из

нижней стороны толщиной 5 пикселей

H1 { border-bottom-width: 5px
border-bottom-color: red
border-bottom-style: double }

Слайд 55

Атрибуты стиля border-style (задает стиль всех сторон рамки): Border- style: [

Атрибуты стиля border-style (задает стиль всех сторон рамки):
Border- style: <стиль 1>

[<стиль 2> [<стиль 3> [<стиль 4>]]]
Пример
TD, TH { Border-width: thin
Border-color: black
Border-style: dotted }
Атрибуты стиля border (задает стиль сторон рамки)
Border-left | Border-top | Border-right | Border-bottom: <толщина> <стиль> <цвет> | inherit
Пример
H1 { border-bottom: 5px double red }
Глобальный Атрибуты стиля border (задает параметры для всех сторон рамки)
Border: <толщина> <стиль> <цвет> | inherit
Пример TD, TH { Border: thin dotted black }
Слайд 56

Параметры таблиц Параметры выравнивания Атрибуты стиля text-align (выравнивает содержимое ячеек таблицы

Параметры таблиц Параметры выравнивания

Атрибуты стиля text-align (выравнивает содержимое ячеек таблицы по горизонтали)
TD,

TH { text-align: centre } – по центру
CAPTION { text-align: left } – заголовок таблицы по левому краю
Атрибуты стиля vertical-align (выравнивает содержимое ячеек таблицы по вертикали)
vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <промежуток между базовыми линиями> | inherit

sub – выравнивает базовую линию фрагмента текста по базовой линии нижнего индекса родительского элемента
super – выравнивает базовую линию фрагмента текста по базовой линии верхнего индекса родительского элемента
top– выравнивает содержимое ячейки по её верхнему краю
text-top – выравнивает верхний край фрагмента текста по верхнему краю текста родительского элемента
middle - выравнивает содержимое ячейки по центру
bottom - выравнивает содержимое ячейки по её нижнему краю
text-bottom – выравнивает нижний край фрагмента текста по
нижнему краю текста родительского элемента

Слайд 57

Параметры отступов и рамок Для задания внутренних отступов между содержимым ячейки

Параметры отступов и рамок

Для задания внутренних отступов между содержимым ячейки и

её границей - атрибутами стиля Padding-left, Padding-top, Padding-right, Padding-bottom и Padding.
Для задания внешних отступов между границами соседних ячеек – атрибутом стиля – Border-spacing
Пример для таблицы задается сплошная черная рамка и отступ между ячейками, равный 1 пикселю, а для ячеек этой таблицы – тонкую точечную черную рамку и отступ между границей ячейки и её содержимым, равным двум пикселям
Table { align: centre;
Border: medium solid black;
Border-spacing: 1px }
TD, TH { Border: thin dotted black
Padding: 2px }
Слайд 58

Атрибут стиля border-collapse (указывает, как будут рисоваться рамки ячеек в таблице)

Атрибут стиля border-collapse (указывает, как будут рисоваться рамки ячеек в таблице)


border-collapse: collapse | separate | inherit
collapse – каждая ячейка таблицы заключается в отдельную рамку (обычное поведение - пример выше)
separate – рисуются рамки, разделяющие ячейки таблицы (пример ниже)
Слайд 59

Параметры размеров Атрибут стиля WIDTH и HEIGHT (задает ширину и высоту

Параметры размеров

Атрибут стиля WIDTH и HEIGHT (задает ширину и высоту таблицы

и ячеек)
Пример для таблицы:
TABLE { width: 100%; height: 300px }
Пример для задания ширины столбца:


< TD > Первый столбец

< TD > Третий столбец

…
Второй столбец шириной в 40 пикселей

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

…


…

…
Строка высотой в 30 пикселей

Слайд 60

Атрибут стиля CAPTION-SIDE (указывает местоположение заголовка таблицы относительно самой таблицы) CAPTION-SIDE:

Атрибут стиля CAPTION-SIDE (указывает местоположение заголовка таблицы относительно самой таблицы)
CAPTION-SIDE: top

| bottom | inherit
Top – заголовок распологается над таблицей
Bottom - заголовок распологается под таблицей
Пример для таблицы:
TABLE { caption-side: bottom }
Атрибут стиля EMPTY-CELLS (указывает, как выводить пустые ячейки)
EMPTY-CELLS: show | hide | inherit
Show – пустые ячейки будут выводиться на экран. Если для них был задан другой фон, на экран будет выведен фон, а если заданы рамки, то будут выведены рамки.
Hide – пустые ячейки не будут выводиться на экран.
Пример для таблицы:
TABLE { empty-cells: hide }
Слайд 61

Скруглённые уголки Задача. Кроссбраузерно установить скруглённые уголки у фотографий, размер которых

Скруглённые уголки

Задача. Кроссбраузерно установить скруглённые уголки у фотографий, размер которых известен

и задан.
Решение
Если на сайте применяется группа фотографий одинаковой ширины и высоты, то для них достаточно просто можно установить скругленные уголки. Принцип состоит в том, что поверх каждой фотографии накладывается рисунок, который прячет под собой часть фотографии, образуя тем самым желаемые уголки.
Вначале следует подготовить изображение с уголками. В графическом редакторе создаем прозрачную основу и заливаем уголки цветом, совпадающим с цветом фона веб-страницы. На рисунке показано изображение размером 120х120 пикселей, назовем его round.png.
Шахматное поле обозначает прозрачность, а уголки
отмечены темным цветом.
Слайд 62

Далее создаем слой, в который добавляем два изображения - фотографию и

Далее создаем слой, в который добавляем два изображения - фотографию и

картинку с уголками.
Для управления положением уголков тегу следует добавить уникальный класс или поместить его внутрь контейнера
. Позиционирование основного блока должно быть задано относительным (position: relative), а внутреннего с уголками — абсолютным (position: absolute).
Слайд 63

Скругленные уголки .roundcorner { position: relative; /* Относительное позиционирование */ float:



Скругленные уголки


Фотография 1




Фотография 2





Слайд 64

Скругленные уголки .roundcorner { position: relative; /* Относительное позиционирование */ float:



Скругленные уголки



Фотография 1


Фотография 2




Слайд 65

Результат данного примера показан на рисунке. Для белого фона веб-страницы был

Результат данного примера показан на рисунке. Для белого фона веб-страницы был

подготовлен рисунок с белыми уголками.

Поскольку

относится к блочным элементам, то изображение внутри него всегда будет начинаться с новой строки. Для расположения нескольких изображений в один ряд в примере применяется стилевое свойство float со значением left. Здесь надо учесть, что стоит добавить после фотографий текст, как он тоже будет занимать место справа от изображений, а не начинаться с новой строки. Поэтому для отмены дейст-
вия float следует добавить
после последнего
блока с фотографией.
Слайд 66

Второй способ имитации скругленных уголков связан с наложением фонового рисунка поверх

Второй способ имитации скругленных уголков связан с наложением фонового рисунка поверх

фотографии. Для этого несколько модифицируем пример 1, оставив пустой
вместо картинки с уголками (пример 2). В стилях слоя следует указать путь к фоновому рисунку через свойство background, а также задать абсолютное позиционирование (position: absolute). Это сделано, чтобы задать точное положение уголков относительно родителя (слоя с именем roundcorner), с этой целью добавляются свойства left и top с нулевыми значениями. Также необходимо задать ширину и высоту блока как 100%.
Слайд 67

Использование фонового рисунка Скругленные уголки .roundcorner { position: relative; /* Относительное

Использование фонового рисунка



Скругленные уголки




Фотография 1


Фотография 2


Слайд 68

Использование фонового рисунка Скругленные уголки .roundcorner { position: relative; /* Относительное

Использование фонового рисунка



Скругленные уголки




Фотография 1


Фотография 2



- Предыдущая
Приложения производной (лекция 8)
Следующая -
Далматинец. Найди все мячики

Похожие презентации

СУБД IBM System R. SEQUEL Structured English QUEry Language — «структурированный английский язык запросов»
Файловый менеджер. Поиск в файловой системе. Принципы построения файловых систем
Информация, виды информации и способы ее представления. 9 класс
Создание и использование списков
Объектное хранилище S3
Работа с файлами и папками в Windows
Презентация "Кодирование информации с помощью знаковых систем" - скачать презентации по Информатике
Информационные технологии в экономике предприятия
Информационная безопасность: Процедурный уровень информационной безопасности
Аналогия. 3 класс
Двоичное кодирование чисел в компьютере п. 4.1.4, стр. 114, задание 4.11
Линейные алгоритмы
Презентация "Создание формы для базы данных" - скачать презентации по Информатике
Design Concepts. Chapter 8
База данных Medline Complete
Інтернет-технології в діяльності вищих навчальних закладів
Тестирование ПО. Тестовая комбинаторика
История создания и развития ЭВМ. (Лекция 4)
Практика. SQL. Задания
Установка и настройка RabbitMQ
Электронные таблицы Excel
Управление вводом-выводом
Знаешь ли ты названия носителей информации?
Концепции гипертекста
CTF Jeopardy INTRO
Проектирование системы Этапы проектирования
Splay tree (Косое или Расширяющееся дерево)
Общие сведения о языке программирования Pascal. Алфавит и словарь языка. Типы данных
Вы можете прислать нам Вашу презентацию и мы опубликуем ее на сайте.
Обратная связь
Для правообладателей
Email: Нажмите что бы посмотреть