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

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


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

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

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

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

Презентация на тему CSS 3. Применение CSS к HTML-документу

Содержание

Применение CSS к HTML-документуЕсть три способа применить правила CSS к HTML-документу. Метод 1: Инлайн/In-line (атрибут style)Можно применять CSS к HTML с помощью HTML-атрибута style. Красный цвет фона можно установить так: Example
CSS 3 Применение CSS к HTML-документуЕсть три способа применить правила CSS к HTML-документу. Метод Метод 2: Внутренний (тэг style)Второй способ вставки CSS-кодов - HTML-тэг . Например: Метод 3: Внешний (ссылка на таблицу стилей)Внешняя таблица стилей это просто текстовый Эту строку кода нужно вставлять в разделе header HTML, то есть между CSS Cascading Style Sheets (Каскадные Документы Стилей)Таблицы стилей состоят из набора правил(1). Каждое правило состоит CSS комментарииКомментарии полностью игнорируются браузером при разборе таблиц стилей.В CSS комментарии начинаются Селекторы CSSСелекторы тэговСелектор idСелектор class Селекторы тэговВы можете выбирать элементы на странице для оформления по названию тэга.p{color:green;}h2{color:red;} Селектор idДанный вид селекторов позволяет производить более точную выборку и используется, когда пример/* Оформим элемент с id= Селектор classДанный вид селекторов позволяет выбирать для оформления не единственный элемент, а /* Свойства будут применены ко всем элементам с class= Это поможет вам сэкономить уйму времени и сил. Если вы, например, хотите Цвет и фонЦвет переднего плана : свойство 'color'Свойство color описывает цвет переднего Свойство 'background-color'Свойство background-color описывает цвет фона элемента.В элементе размещается всё содержимое HTML-документа. Повторение/мультипликация фонового изображения [background-repeat]Свойство background-repeat управляет этим.В таблице указаны четыре значения background-repeat. Расположение фонового рисунка [background-position]По умолчанию фоновый рисунок позиционируется в левом верхнем углу background-imageУстанавливает фоновое изображение для элемента. Линейный градиентbackground-image: linear-gradient(top, #FF4444, #009999); Радиальный градиентРадиальный градиент создаётся с помощью свойства background или background-image с параметром radial-gradient. В простейшем случае для Начальную точку градиента можно задавать в любом месте элемента, для этого вначале указывается её позиция. background-imageОдин элемент может иметь несколько фоновых изображений одновременно.Для этого необходимо перечислить путь background-image:url(wislink.gif),url(mountimg3.jpg); background-position:bottom right, center; background-size:150px 40px,100% 100%; background-repeat:no-repeat,no-repeat; Сокращённая запись [background]С помощью background вы можете сжимать несколько свойств и записывать СсылкиЧто такое псевдокласс?Псевдокласс позволяет учитывать различные условия или события при определении свойств Псевдокласс: linkПсевдокласс :link используется для ссылок на страницы, которые пользователь ещё не Псевдокласс: visitedПсевдокласс :visited используется для ссылок на страницы, которые пользователь посетил. В Псевдокласс: activeПсевдокласс :active используется для активных ссылок.В примере активные ссылки имеют жёлтый фон.	a:active {	background-color: #FFFF00;	} Псевдокласс: hoverПсевдокласс :hover используется для ссылок, над которыми находится указатель мыши.Это можно Блоковая модель Все элементы в CSS являются прямоугольными блоками. Каждый такой блок имеет зону content, .ex2 {  border:5px brown solid;  margin-top:30px;  margin-left:250px;  margin-right:70px;  padding:15px; } примерыp{background-color: yellow;margin: 0;padding: 0;}p{background-color: yellow;margin: 0;padding: 20px;}padding раздвигает блок, увеличивает его ширину и высоту. margin: 20px;padding: 0;margin: -20px;padding: 0; Проценты у padding и marginзначение высчитывается из ширины родителя, а не от его высоты box-sizingСвойство box-sizing позволяет чтобы свойства width и height задавали размеры не контента, а размеры блока.Значенияcontent-box Свойства width и height задают ширину и границысвойство border-style позволяет установить стиль для границ HTML элемента.solid границы будут нарисованы сплошной линией;dashed границы будут .bor2 {  border-style:solid; border-color:green;  border-width:2px; }Рассмотренные ранее свойства могут также Сокращенная записьСтенографическая форма записи объединяет все свойства оформления границ в одном свойстве border.Порядок Создание элементов со сглаженными угламиС помощью border-radius можно делать углы элементов сглаженнымиborder-radius:15px;border-top-left-radius делает сглаженным Вставка изображений в качестве границыborder-image позволяет вставлять произвольные изображения в качестве границы элемента.border-image:путь(1) positionУстанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.position: Единицы измерения  Абсолютные единицыК абсолютным единицам измерения относятся сантиметры (cm), миллиметры Относительные единицыem (кегельная)x-height (ex)px (пикселы)em — это размер шрифта, который определяется высотой заглавной Проценты (%) % можно писать не у всех правил, а только у displayМногоцелевое свойство, которое определяет, как элемент должен быть показан в документе display: blockПо умолчанию присвоен p, div, form, ul, h1 и т.д.на строку, display: inlineПо умолчанию присвоен a, span, b, em и т.д.  элементы следуют display: inline-blockПо умолчанию присвоен img, input и т.д. По отношению к внешним примерыблок   блок 1  блок 2  блок 3 У колонок с заданной шириной стоит свойство width, а их положение слева или ширина всех колонок задана в процентах#col1 { background: #00FF00; width: 33%; }#col2 две колонки из трёх резиновые#col1 {background: #00FF00; left: 0; right: 200px; margin-right: Вычисляемое значениеdisplay: inline-block;margin: 0 auto;width: calc(25% - 10px); ШрифтыСемейство шрифта [font-family]Свойство font-family указывает приоритетный список шрифтов, используемых для отображения данного При указании шрифтов для вашего web-сайта вы, естественно, начинаете с предпочтительного шрифта, Стиль шрифта [font-style]Свойство font-style определяет normal, italic или oblique. В примере все Вариант шрифта [font-variant]Свойство font-variant используется для выбора между вариантами normal и small-caps. Вес шрифта [font-weight]Свойство font-weight описывает, насколько толстым, или Размер шрифта [font-size]Размер шрифта устанавливается свойством font-size.Используются различные единицы измерения (например, пикселы Есть одно отличие в указанных единицах измерения: 'px' и 'pt' дают абсолютное Сокращённая запись [font]Используя сокращенную запись font, можно указывать все свойства шрифта в ТекстФорматирование и установка стиля текста - ключевая проблема для любого web-дизайнераОтступы [text-indent]Свойство Выравнивание текста [text-align]CSS-свойство text-align соответствует атрибуту, используемому в старых версиях HTML. Текст Декоративный вариант [text-decoration]Свойство text-decoration позволяет добавлять различные Интервал между буквами [letter-spacing]Интервал между буквами текста можно специфицировать свойством letter-spacing. Значение Трансформация текста [text-transform]Свойство text-transform управляет регистром символов. Можно выбрать capitalize, uppercase или отобразим все заголовки верхним регистром.h1 {text-transform: uppercase;}li {text-transform: capitalize;}
Слайды презентации

Слайд 2 Применение CSS к HTML-документу
Есть три способа применить правила

Применение CSS к HTML-документуЕсть три способа применить правила CSS к HTML-документу.

CSS к HTML-документу.
Метод 1: Инлайн/In-line (атрибут style)
Можно применять

CSS к HTML с помощью HTML-атрибута style. Красный цвет фона можно установить так:



Example


This is a red page





Слайд 3 Метод 2: Внутренний (тэг style)
Второй способ вставки CSS-кодов

Метод 2: Внутренний (тэг style)Второй способ вставки CSS-кодов - HTML-тэг .

- HTML-тэг . Например:


Example

type="text/css">
body {background-color: #FF0000;}



This is a red page





Слайд 4 Метод 3: Внешний (ссылка на таблицу стилей)
Внешняя таблица

Метод 3: Внешний (ссылка на таблицу стилей)Внешняя таблица стилей это просто

стилей это просто текстовый файл с расширением .css. Вы

можете поместить таблицу стилей на ваш web-сервер или на жёсткий диск, как и другие файлы.

Например, скажем, ваша таблица стилей называется style.css и находится в папке style. Это можно проиллюстрировать так:

Весь фокус состоит в том, чтобы создать ссылку из HTML-документа на таблицу стилей (style.css).
Это можно сделать одной строчкой HTML-кода:



Слайд 5 Эту строку кода нужно вставлять в разделе header

Эту строку кода нужно вставлять в разделе header HTML, то есть

HTML, то есть между тэгами и .


My document



...

Эта ссылка указывает браузеру, что он должен использовать правила отображения HTML-файла из CSS-файла.
Самое важное здесь то, что несколько HTML-документов могут ссылаться на одну таблицу стилей. Иначе говоря, один CSS-файл можно использовать для управления отображением множества HTML-документов.


Слайд 6 CSS
Cascading Style Sheets
(Каскадные Документы Стилей)
Таблицы стилей состоят из

CSS Cascading Style Sheets (Каскадные Документы Стилей)Таблицы стилей состоят из набора правил(1). Каждое правило

набора правил(1). Каждое правило состоит из одного или несколькихселекторов(3) и блока определения(2),

выделяющегося фигурными скобками.
Блок определения может содержать одно или несколько свойств(4) отделенных точкой с запятой (;) (после последнего свойства точка с запятой необязательна). Каждое свойство должно иметь значение(5)отделенное двоеточием (:).

Слайд 7 CSS комментарии

Комментарии полностью игнорируются браузером при разборе таблиц

CSS комментарииКомментарии полностью игнорируются браузером при разборе таблиц стилей.В CSS комментарии

стилей.
В CSS комментарии начинаются с "/*", и заканчиваются "*/",

например:


Слайд 8 Селекторы CSS



Селекторы тэгов
Селектор id
Селектор class

Селекторы CSSСелекторы тэговСелектор idСелектор class

Слайд 9 Селекторы тэгов
Вы можете выбирать элементы на странице для

Селекторы тэговВы можете выбирать элементы на странице для оформления по названию тэга.p{color:green;}h2{color:red;}

оформления по названию тэга.
p
{
color:green;
}
h2
{
color:red;
}



Слайд 10 Селектор id
Данный вид селекторов позволяет производить более точную

Селектор idДанный вид селекторов позволяет производить более точную выборку и используется,

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

элемент на странице, с предварительно заданным идентификатором.
Идентификатор для элемента задается с помощью атрибута id
(

текст

).
Для того, чтобы затем оформить данный элемент необходимо обратиться к идентификатору в таблицах стилей добавив перед ним символ "#" (#идентификатор {color:red}).


Слайд 11 пример
/* Оформим элемент с id="test1" */
#test1
{
color:green;
font-family:verdana;
font-size:1.2em;
}

пример/* Оформим элемент с id=

Слайд 12 Селектор class
Данный вид селекторов позволяет выбирать для оформления

Селектор classДанный вид селекторов позволяет выбирать для оформления не единственный элемент,

не единственный элемент, а группу элементов.
С помощью атрибута class

можно задать, что элемент относится к группе (

текст

).
Для того, чтобы затем оформить эту группу необходимо в таблицах стилей обратится к имени группы добавив перед ней символ "." (.имя_группы {color:red}).


Слайд 13
/* Свойства будут применены ко всем элементам с

/* Свойства будут применены ко всем элементам с class=

class="test1" */
.test1
{
color:green;
font-family:verdana;
font-size:1.2em;
}


Слайд 14 Это поможет вам сэкономить уйму времени и сил.

Это поможет вам сэкономить уйму времени и сил. Если вы, например,

Если вы, например, хотите изменить цвет фона web-сайта из

100 страниц, таблица стилей избавит вас от необходимости вручную изменять все сто HTML-документов. Используя CSS, эти изменения можно сделать за несколько секунд, просто изменив один код в центральной таблице стилей.

Слайд 15 Цвет и фон
Цвет переднего плана : свойство 'color'
Свойство

Цвет и фонЦвет переднего плана : свойство 'color'Свойство color описывает цвет

color описывает цвет переднего плана элемента.
Например, можно сделать текст

абзаца тёмно-красными. Все абзацы обозначаются HTML-элементом <р>.

p{
margin:0 0 10px 0;
font-size: 20px;
background-size:70% 70%;
color:#ff0000;
}

Цвета можно указывать как шестнадцатеричные значения, как в примере (#ff0000), либо вы можете использовать названия цветов ("red") или rgb-значения (rgb(255,0,0)).


Слайд 16 Свойство 'background-color'
Свойство background-color описывает цвет фона элемента.

В элементе

Свойство 'background-color'Свойство background-color описывает цвет фона элемента.В элементе размещается всё содержимое

размещается всё содержимое HTML-документа. Таким образом, для изменения

цвета фона всей страницы свойство background-color нужно применить к элементу .

Можно также применять это свойство к другим элементам, в том числе - к заголовкам и тексту.

body {
background-color: #FFCC66;

opacity:0.5;
width:100%;
height:100%;
background-image: url(“1234.gif");
}


Слайд 17 Повторение/мультипликация фонового изображения [background-repeat]
Свойство background-repeat управляет этим.
В таблице

Повторение/мультипликация фонового изображения [background-repeat]Свойство background-repeat управляет этим.В таблице указаны четыре значения background-repeat.

указаны четыре значения background-repeat.


Слайд 18 Расположение фонового рисунка [background-position]
По умолчанию фоновый рисунок позиционируется

Расположение фонового рисунка [background-position]По умолчанию фоновый рисунок позиционируется в левом верхнем

в левом верхнем углу экрана. Свойство background-position позволяет изменять

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

Есть много способов установить значение background-position. Тем не менее, все они представляют собой набор координат. Например, значение '100px 200px' располагает фоновый рисунок на 100px слева и на 200px сверху в окне браузера.

Координаты можно указывать в процентах ширины экрана, в фиксированных единицах (пикселы, сантиметры, и т. п.), либо вы можете использовать слова top, bottom, center, left и right. Модель иллюстрирует сказанное:

Слайд 19 background-image
Устанавливает фоновое изображение для элемента. 
Линейный градиент




background-image: linear-gradient(top, #FF4444,

background-imageУстанавливает фоновое изображение для элемента. Линейный градиентbackground-image: linear-gradient(top, #FF4444, #009999);

#009999);


Слайд 21 Радиальный градиент
Радиальный градиент создаётся с помощью свойства background или background-image с параметром radial-gradient.

Радиальный градиентРадиальный градиент создаётся с помощью свойства background или background-image с параметром radial-gradient. В простейшем случае

В простейшем случае для задания радиального градиента понадобится всего

два параметра: начальный и конечный цвет.

height: 100px;
width: 100px;
border-radius: 50px;
Background-image: radial-gradient(#55ddff, #0081b5);

Слайд 22
Начальную точку градиента можно задавать в любом месте

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

элемента, для этого вначале указывается её позиция.


Слайд 23 background-image
Один элемент может иметь несколько фоновых изображений одновременно.
Для

background-imageОдин элемент может иметь несколько фоновых изображений одновременно.Для этого необходимо перечислить

этого необходимо перечислить путь к ним через запятую в

свойстве background-image.
Картинки будут накладываться друг на друга в перечисленной очередности (т.е. первая заданная картинка будет отображаться поверх последующих).
Для того, чтобы применить к фоновым картинкам свойства оформления необходимо перечислить необходимые значения в нужном порядке через запятую (к примеру в свойстве "background-position:bottom right, center;" bottom right будет применено к первой, а center ко второй фоновой картинке).


Слайд 24
background-image:url(wislink.gif),url(mountimg3.jpg); background-position:bottom right, center; background-size:150px 40px,100% 100%; background-repeat:no-repeat,no-repeat;

background-image:url(wislink.gif),url(mountimg3.jpg); background-position:bottom right, center; background-size:150px 40px,100% 100%; background-repeat:no-repeat,no-repeat;

Слайд 25 Сокращённая запись [background]
С помощью background вы можете сжимать

Сокращённая запись [background]С помощью background вы можете сжимать несколько свойств и

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

что облегчает чтение таблиц.

Например, посмотрите на эти строки:

background-color: #FFCC66;
background-image: url(“1234.gif");
background-repeat: no-repeat;
background-position: right bottom;

Используя background, того же результата можно достичь одной строкой кода:

background: #FFCC66 url(“1234.gif") no-repeat right bottom;


Слайд 27 Псевдокласс: link

Псевдокласс :link используется для ссылок на страницы,

Псевдокласс: linkПсевдокласс :link используется для ссылок на страницы, которые пользователь ещё

которые пользователь ещё не посещал.
В примере кода непосещённые ссылки

- синие.

a:link {
color: #6699CC;
}


Слайд 28 Псевдокласс: visited

Псевдокласс :visited используется для ссылок на страницы,

Псевдокласс: visitedПсевдокласс :visited используется для ссылок на страницы, которые пользователь посетил.

которые пользователь посетил. В примере кода посещённые ссылки -

фиолетовые.

a:visited {
color: #660099;
}

Слайд 29 Псевдокласс: active

Псевдокласс :active используется для активных ссылок.

В примере

Псевдокласс: activeПсевдокласс :active используется для активных ссылок.В примере активные ссылки имеют жёлтый фон.	a:active {	background-color: #FFFF00;	}

активные ссылки имеют жёлтый фон.

a:active {
background-color: #FFFF00;
}


Слайд 30 Псевдокласс: hover

Псевдокласс :hover используется для ссылок, над которыми

Псевдокласс: hoverПсевдокласс :hover используется для ссылок, над которыми находится указатель мыши.Это

находится указатель мыши.

Это можно использовать для создания интересных эффектов.

Например, если мы хотим, чтобы ссылки становились оранжевыми и курсивными при прохождении указателя над ними, то наш CSS должен выглядеть так:
a:hover {
color: orange;
font-style: italic;
}

Слайд 31 Блоковая модель

Блоковая модель

Слайд 32
Все элементы в CSS являются прямоугольными блоками. Каждый

Все элементы в CSS являются прямоугольными блоками. Каждый такой блок имеет

такой блок имеет зону content, в которой располагается содержимое элемента

(т.е. текст, изображения и т.д.). Вокруг зоны content могут располагаться необязательные зоны: padding, border и margin.

Свойства width и height устанавливают ширину и высоту только блока content, а не элемента целиком.
Итоговый размер элемента помимо размеров content будет включать в себя еще и размеры padding, border и margin


Слайд 33
.ex2 {
border:5px brown solid;
margin-top:30px;

.ex2 { border:5px brown solid; margin-top:30px; margin-left:250px; margin-right:70px; padding:15px; }


margin-left:250px;
margin-right:70px;
padding:15px;
}


Слайд 34 примеры
p{
background-color: yellow;
margin: 0;
padding: 0;
}
p{
background-color: yellow;
margin: 0;
padding: 20px;
}
padding раздвигает

примерыp{background-color: yellow;margin: 0;padding: 0;}p{background-color: yellow;margin: 0;padding: 20px;}padding раздвигает блок, увеличивает его ширину и высоту.

блок, увеличивает его ширину и высоту.


Слайд 35
margin: 20px;
padding: 0;
margin: -20px;
padding: 0;

margin: 20px;padding: 0;margin: -20px;padding: 0;

Слайд 36 Проценты у padding и margin
значение высчитывается из ширины

Проценты у padding и marginзначение высчитывается из ширины родителя, а не от его высоты

родителя, а не от его высоты


Слайд 37 box-sizing
Свойство box-sizing позволяет чтобы свойства width и height задавали размеры не контента, а размеры

box-sizingСвойство box-sizing позволяет чтобы свойства width и height задавали размеры не контента, а размеры блока.Значенияcontent-box Свойства width и height задают ширину

блока.
Значения
content-box Свойства width и height задают ширину и высоту контента и не включают

в себя значения отступов, полей и границ.
border-box Свойства width и height включают в себя значения полей и границ, но не отступов (margin).
padding-box Свойства width и height включают в себя значения полей, но не отступов (margin) и границ (border).
inherit Наследует значение родителя.

Слайд 38 границы
свойство border-style позволяет установить стиль для границ HTML элемента.

solid границы будут

границысвойство border-style позволяет установить стиль для границ HTML элемента.solid границы будут нарисованы сплошной линией;dashed границы

нарисованы сплошной линией;
dashed границы будут нарисованы пунктирной линией;
dotted границы будут нарисованы

точками;
double границы будут нарисованы двойной сплошной линией.


Слайд 39
.bor2 {
border-style:solid;
border-color:green;
border-width:2px;
}

Рассмотренные

.bor2 { border-style:solid; border-color:green; border-width:2px; }Рассмотренные ранее свойства могут также применяться

ранее свойства могут также применяться к отдельным сторонам границы
border-left-style:solid;


border-right-style:solid;


Слайд 40 Сокращенная запись
Стенографическая форма записи объединяет все свойства оформления

Сокращенная записьСтенографическая форма записи объединяет все свойства оформления границ в одном

границ в одном свойстве border.

Порядок следования свойств:
border-width
border-style
border-color
можно пропускать неиспользуемые свойства.

border:2px

solid green;

Слайд 41 Создание элементов со сглаженными углами
С помощью border-radius можно делать

Создание элементов со сглаженными угламиС помощью border-radius можно делать углы элементов сглаженнымиborder-radius:15px;border-top-left-radius делает

углы элементов сглаженными
border-radius:15px;
border-top-left-radius делает сглаженным только верхний левый угол элемента;
border-top-right-radius делает

сглаженным только верхний правый угол элемента;
border-bottom-left-radius делает сглаженным только нижний левый угол элемента;
border-bottom-right-radius делает сглаженным только нижний правый угол элемента.


Слайд 42 Вставка изображений в качестве границы
border-image позволяет вставлять произвольные изображения

Вставка изображений в качестве границыborder-image позволяет вставлять произвольные изображения в качестве границы

в качестве границы элемента.

border-image:путь(1) отступ(2) ширина(3) повторение(4);

border-image:url("images.jpg") 30 30

round;

Слайд 44 position
Устанавливает способ позиционирования элемента относительно окна браузера или

positionУстанавливает способ позиционирования элемента относительно окна браузера или других объектов на

других объектов на веб-странице.

position: absolute | fixed | relative

| static | inherit

Слайд 46 Единицы измерения Абсолютные единицы
К абсолютным единицам измерения относятся

Единицы измерения Абсолютные единицыК абсолютным единицам измерения относятся сантиметры (cm), миллиметры

сантиметры (cm), миллиметры (mm) и дюймы (in).

дюймы (in)
сантиметры (cm)
миллиметры

(mm)
пункты (pt)
пики (pc)
1in = 96px
В спецификации css 1pt = 1/72in, а 1pc = 12pt. В свойстве font-size задание отрицательного значения в единицах длины, например -25cm, недопустимо.

Слайд 47 Относительные единицы
em (кегельная)
x-height (ex)
px (пикселы)

em — это размер шрифта,

Относительные единицыem (кегельная)x-height (ex)px (пикселы)em — это размер шрифта, который определяется высотой

который определяется высотой заглавной буквы и размеры выносных элементов

сверху и снизу( вверху могут появиться диакритические знаки, например: ё или й ).
ех – высота строчной буквы. ex в разных браузерах может быть разным
Пиксель — это мельчайшая точка, которую можно установить на экране компьютера.

Слайд 48 Проценты (%)
% можно писать не у всех

Проценты (%) % можно писать не у всех правил, а только

правил, а только у некоторых и нужно понимать от

чего они считаются.

Слайд 49 display
Многоцелевое свойство, которое определяет, как элемент должен быть

displayМногоцелевое свойство, которое определяет, как элемент должен быть показан в документе

показан в документе


Слайд 51 display: block
По умолчанию присвоен p, div, form, ul,

display: blockПо умолчанию присвоен p, div, form, ul, h1 и т.д.на

h1 и т.д.
на строку, на которой расположился блок, уже

нельзя добавить другой элемент, даже когда остаётся пустое пространство. Искл., при применении свойств position, float, transform. 
если не задано значение width, элемент растягивается на весь родительский контейнер
если задано значение width, ширина складывается из margin, border, padding, width (подробнее). Поэтому красная рамка выходит за пределы родительского блока при width: 100%.



Слайд 52 display: inline
По умолчанию присвоен a, span, b, em

display: inlineПо умолчанию присвоен a, span, b, em и т.д.  элементы

и т.д. 
элементы следуют друг за другом.
width и height игнорируются.

Его ширина - это ширина содержимого плюс margin, border и padding.
margin-top и margin-bottom игнорируются.
совместно с padding-top и padding-bottom следует корректировать line-height, иначе строки будут "наезжать" друг на друга.



Слайд 53 display: inline-block
По умолчанию присвоен img, input и т.д.

display: inline-blockПо умолчанию присвоен img, input и т.д. По отношению к

По отношению к внешним элементам ведёт себя как inline,

а внутренним block.
элементы следуют друг за другом.
имеет width и height, margin-top и margin-bottom.
если не задано значение width, растягивается по ширине самого длинного элемента внутри. 

Слайд 54 примеры
блок

блок 1

примерыблок  блок 1 блок 2 блок 3

блок 2
блок 3


Слайд 55 У колонок с заданной шириной стоит свойство width, а

У колонок с заданной шириной стоит свойство width, а их положение слева

их положение слева или справа задаётся соответственно свойством left или right. Резиновая

ширина оставшейся колонки строится после одновременного добавления left и right, значения которых совпадают с шириной фиксированных колонок.

.layout { position: relative; width: 80%; height: 20%;}
div { position: absolute; height: 40px;}
#col1 { background: #00FF00; left: 0; right: 300px; }
#col2 { background: #0000FF; width: 200px; right: 100px; }
#col3 { background: #FF0000; width:100px; right: 0; }


Слайд 56 ширина всех колонок задана в процентах
#col1 { background:

ширина всех колонок задана в процентах#col1 { background: #00FF00; width: 33%;

#00FF00; width: 33%; }
#col2 { background: #0000FF; left: 33%;

width: 34%; }
#col3 { background: #FF0000; right: 0; width: 33%; }

Слайд 57 две колонки из трёх резиновые
#col1 {background: #00FF00; left:

две колонки из трёх резиновые#col1 {background: #00FF00; left: 0; right: 200px;

0; right: 200px; margin-right: 50%; }
#col2 { background: #0000FF;

width: 50%; right: 200px; }
#col3 { background: #FF0000; width: 200px; right: 0; }

Слайд 58 Вычисляемое значение
display: inline-block;
margin: 0 auto;
width: calc(25% - 10px);

Вычисляемое значениеdisplay: inline-block;margin: 0 auto;width: calc(25% - 10px);

Слайд 59 Шрифты
Семейство шрифта [font-family]
Свойство font-family указывает приоритетный список шрифтов,

ШрифтыСемейство шрифта [font-family]Свойство font-family указывает приоритетный список шрифтов, используемых для отображения

используемых для отображения данного элемента или web-страницы. Если первый

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

Для категоризации шрифтов используются два типа имён: имя семейства/family-name и общее/родовое семейство/generic family.

Family-name
Пример family-name (часто называемое просто "шрифт") это, например, "Arial", "Times New Roman" или "Tahoma".

Generic family

Его можно проще описать как группу family-names, имеющих характерные общие черты. Пример - sans-serif, набор шрифтов без "засечек/feet".

Слайд 61 При указании шрифтов для вашего web-сайта вы, естественно,

При указании шрифтов для вашего web-сайта вы, естественно, начинаете с предпочтительного

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

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

Список шрифтов может выглядеть так:

h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}

Обратите внимание, что имя шрифта "Times New Roman" содержит пробелы, поэтому указано в двойных кавычках.


Слайд 62 Стиль шрифта [font-style]
Свойство font-style определяет normal, italic или

Стиль шрифта [font-style]Свойство font-style определяет normal, italic или oblique. В примере

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

italic.

h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif; font-style: italic;}


Слайд 63 Вариант шрифта [font-variant]
Свойство font-variant используется для выбора между

Вариант шрифта [font-variant]Свойство font-variant используется для выбора между вариантами normal и

вариантами normal и small-caps. Шрифт small-caps использует малые заглавные

буквы (upper case) вместо букв нижнего регистра.

Если font-variant имеет значение small-caps, а шрифт small-caps недоступен, браузер, скорее всего, отобразит текст буквами верхнего регистра.

h1 {font-variant: small-caps;}
h2 {font-variant: normal;}


Слайд 64 Вес шрифта [font-weight]
Свойство font-weight описывает, насколько толстым, или

Вес шрифта [font-weight]Свойство font-weight описывает, насколько толстым, или

"тяжёлым", должен отображаться шрифт. Шрифт может быть normal или

bold. Некоторые браузеры поддерживают даже числовые значения 100-900 (в сотнях) для описания веса шрифта.

p {font-family: arial, verdana, sans-serif;}
td {font-family: arial, verdana, sans-serif; font-weight: bold;}


Слайд 65 Размер шрифта [font-size]
Размер шрифта устанавливается свойством font-size.

Используются различные

Размер шрифта [font-size]Размер шрифта устанавливается свойством font-size.Используются различные единицы измерения (например,

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

шрифта.
Вот примеры:
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}


Слайд 66 Есть одно отличие в указанных единицах измерения: 'px'

Есть одно отличие в указанных единицах измерения: 'px' и 'pt' дают

и 'pt' дают абсолютное значение размера шрифта, а '%'

и 'em' - относительные. Многие пользователи не могут читать мелкий текст, по разным причинам. Чтобы сделать ваш web-сайт доступным для всех, вы должны использовать относительные значения, такие как '%' или 'em'.

Вот иллюстрация того, как настроить размер шрифта в Mozilla Firefox и Internet Explorer. Попробуйте сами - прекрасное свойство, как вы полагаете?

Слайд 67 Сокращённая запись [font]
Используя сокращенную запись font, можно указывать

Сокращённая запись [font]Используя сокращенную запись font, можно указывать все свойства шрифта

все свойства шрифта в одном стилевом правиле.
Например, вот четыре

строки описания свойств шрифта для

:
p {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
Используя сокращённую запись, код можно упростить:

p {
font: italic bold 30px arial, sans-serif;
}

Порядок свойств font таков:

font-style | font-variant | font-weight | font-size | font-family


Слайд 68 Текст
Форматирование и установка стиля текста - ключевая проблема

ТекстФорматирование и установка стиля текста - ключевая проблема для любого web-дизайнераОтступы

для любого web-дизайнера

Отступы [text-indent]

Свойство text-indent позволяет выделить параграф с

помощью установки отступа для его первой строки. В примере 30px применяется ко всем параграфам

:
p {
text-indent: 30px;
}


Слайд 69 Выравнивание текста [text-align]

CSS-свойство text-align соответствует атрибуту, используемому в

Выравнивание текста [text-align]CSS-свойство text-align соответствует атрибуту, используемому в старых версиях HTML.

старых версиях HTML. Текст может быть выровнен left, right,

centredили justify.

В примере текст заголовочных ячеек таблицы выравнивается вправо, а в ячейках данных - по центру. Кроме того, нормальные параграфы - justify:

th {
text-align: right;
}

td {
text-align: center;
}

p {
text-align: justify;
}

Слайд 71 Декоративный вариант [text-decoration]

Свойство text-decoration позволяет добавлять различные "декоративные

Декоративный вариант [text-decoration]Свойство text-decoration позволяет добавлять различные

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

над текстом и т. д. В примере

подчёркнуты,

- имеют черту над текстом, а

- перечёркнуты.


h1 {
text-decoration: underline;
}

h2 {
text-decoration: overline;
}

h3 {
text-decoration: line-through;
}


Слайд 72 Интервал между буквами [letter-spacing]

Интервал между буквами текста можно

Интервал между буквами [letter-spacing]Интервал между буквами текста можно специфицировать свойством letter-spacing.

специфицировать свойством letter-spacing. Значение - нужная величина. Например, если

вам необходимо 3px между буквами в параграфах

и 6px - в заголовках

, то используется такой код:

h1 {
letter-spacing: 6px;
}

p {
letter-spacing: 3px;
}


Слайд 73 Трансформация текста [text-transform]

Свойство text-transform управляет регистром символов. Можно

Трансформация текста [text-transform]Свойство text-transform управляет регистром символов. Можно выбрать capitalize, uppercase

выбрать capitalize, uppercase или lowercase, в зависимости от того,

как выглядит текст в оригинальном HTML-коде.

Например, слово "headline" можно показать "HEADLINE" или "Headline". Имеются четыре возможных значения text-transform:
Capitalize
Капитализирует каждое слово. Например: "john doe" станет "John Doe".
Uppercase
Конвертирует все символы в верхний регистр. Например: "john doe" станет "JOHN DOE".
Lowercase
Конвертирует все символы в нижний регистр. Например: "JOHN DOE" станет "john doe".
None
Трансформации нет - текст отображается так же, как в HTML-коде.
Для примера мы используем список имён. Все имена выделены с помощью
  • (list-item).

    • Имя файла: css-3-primenenie-css-k-html-dokumentu.pptx
    • Количество просмотров: 150
    • Количество скачиваний: 0