Download - Павел Горобцов: Основы CSS
![Page 1: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/1.jpg)
![Page 3: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/3.jpg)
Содержание• Что такое CSS
• Немного истории
• Синтаксис
1. Селекторы
2. Свойства
3. Значение
• Подключение
• Возможные ошибки
3
![Page 4: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/4.jpg)
Что такое CSSCSS (англ. Cascading Style Sheets — каскадные таблицы стилей) —
формальный язык описания внешнего вида документа, написанного с
использованием языка разметки.“4
![Page 5: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/5.jpg)
![Page 6: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/6.jpg)
CSSCSS - язык стилей, определяющий отображение HTML-документов.
CSS работает со шрифтами, цветом, полями, строками, высотой,
шириной, фоновыми изображениями, позиционированием элементов
и многими другими вещами.
6
![Page 7: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/7.jpg)
![Page 8: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/8.jpg)
![Page 9: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/9.jpg)
Где применяется?
![Page 10: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/10.jpg)
Используется в• HTML, XHTML
• XML документы
1. SVG
2. VML
10
![Page 11: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/11.jpg)
Немногоистории
![Page 12: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/12.jpg)
![Page 13: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/13.jpg)
Тема: «Архетип как мера»Научно-фантастический рассказ
Гештальт диссонирует институциональный текст даже в том случае, еслинепосредственное наблюдение этого явления затруднительно. Фингер-эффектиллюстрирует незначительный гранит одинаково по всем направлениям. Промерзаниестекает в опасный аллювий при любом их взаимном расположении. Как мы уже знаем,желтозём неустойчив. Если принять во внимание физическую неоднородность почвенногоиндивидуума, можно прийти к выводу о том, что кризис отражает поглотительный стресс,к тому же этот вопрос касается чего-то слишком общего.
Фрактал, как следует из полевых и лабораторных наблюдений, традиционен. Верховодкамонотонно стягивает почвенно-мелиоративный кризис, так как совершенно однозначноуказывает на существование и рост в период оформления палеогеновой поверхностивыравнивания. По характеру рельефа личность подпитывает незначительный ортштейн всилу которого смешивает субъективное и объективное, переносит свои внутренниепобуждения на реальные связи вещей. Филогенез косо фоссилизирует липарит, это жеположение обосновывал Ж.Польти в книге "Тридцать шесть драматических ситуаций".
13
![Page 14: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/14.jpg)
Тема: «Архетип как мера»Научно-фантастический рассказ
Гештальт диссонирует институциональный текст даже в том случае, еслинепосредственное наблюдение этого явления затруднительно. Фингер-эффектиллюстрирует незначительный гранит одинаково по всем направлениям.Промерзание стекает в опасный аллювий при любом их взаимном расположении.Как мы уже знаем, желтозём неустойчив. Если принять во внимание физическуюнеоднородность почвенного индивидуума, можно прийти к выводу о том, чтокризис отражает поглотительный стресс, к тому же этот вопрос касается чего-тослишком общего.
Фрактал, как следует из полевых и лабораторных наблюдений, традиционен.Верховодка монотонно стягивает почвенно-мелиоративный кризис, так каксовершенно однозначно указывает на существование и рост в период оформленияпалеогеновой поверхности выравнивания. По характеру рельефа личностьподпитывает незначительный ортштейн в силу которого смешивает субъективное иобъективное, переносит свои внутренние побуждения на реальные связи вещей.Филогенез косо фоссилизирует липарит, это же положение обосновывал Ж.Польтив книге "Тридцать шесть драматических ситуаций".
14
![Page 15: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/15.jpg)
<font face="Arial"><h1>Тема: «Архетип как мера»</h1><h2><font color="red"><i>Научно-фантастический рассказ</i></font></h2><p><strong>Гештальт</strong> диссонирует институциональный<blink>текст</blink> даже в том случае, еслизатруднительно. <strike>Фингер-эффект</strike>одинаково по всем направлениям. Промерзание стекает вих взаимном расположении. </p><p>Фрактал, как следует из полевых и лабораторных<ins>традиционен</ins>. Верховодка монотоннокризис, так как совершенно однозначно указывает насуществование и рост в период оформления палеогеновой.в книге <a href="#">"Тридцать шесть драматических ситуаций".</a> </p></font>
15
![Page 16: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/16.jpg)
К чему этопривело?
![Page 17: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/17.jpg)
<table border="0" width="100%">
<tr>
<td bgcolor="black" color="white"> Меню </td>
<td> Контент </td>
<td> Декорация </td>
</tr>
</table>
Меню Контент Декорация
01.
02.
03.
04.
05.
06.
07.
17
![Page 18: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/18.jpg)
Основные этапы развития CSSТермин «каскадные таблицы стилей» был предложен Хокон Виум Ли в
1994 году.
В середине 1990-х Консорциум Всемирной паутины стал проявлять
интерес к CSS.
18
![Page 19: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/19.jpg)
W3C и CSS1. CSS уровень 1 (1996, 1999) - параметры шрифтов, цвета, ...
2. CSS уровень 2 (12 мая 1998), CSS 2.1 (07 июня 2011) - блочная
вёрстка, селекторы, ...
3. CSS уровня 3 находится в стадии разработки - трансформации,
анимация, ...
4. CSS уровня 4 разрабатывается с 29 сентября 2011 года.
www.w3.org
19
![Page 20: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/20.jpg)
![Page 21: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/21.jpg)
Преимущества— Расширенные способы оформления элементов
— Единое стилевое оформление множества документов (разделение
кода от оформления)
— Разное оформление для разных устройств
— Ускорение загрузки сайта
21
![Page 22: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/22.jpg)
![Page 23: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/23.jpg)
Синтаксисселектор [, селекторы]
{
свойство: значение [!important]
}
01.
02.
03.
04.
23
![Page 24: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/24.jpg)
Синтаксисселектор [, селекторы]
{
свойство: значение [!important]
}
01.
02.
03.
04.
24
![Page 25: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/25.jpg)
Синтаксисселектор [, селекторы]
{
свойство : значение;
свойство : значение;
свойство : значение !important
}
01.
02.
03.
04.
05.
06.
25
![Page 26: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/26.jpg)
Синтаксисселектор [, селекторы]
{
свойство: значение [!important]
}
01.
02.
03.
04.
26
![Page 27: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/27.jpg)
А пример можно?
![Page 28: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/28.jpg)
Примеры<span>Красный</span>
span
{
color: red;
}
Пример: Красный
01.
02.
03.
04.
28
![Page 29: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/29.jpg)
Примеры<p> <span>не черный</span> </p>
p span
{
font-size: 21px;
color: white;
background: #000
}
Пример: Не черный
01.
02.
03.
04.
05.
06.
29
![Page 30: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/30.jpg)
#list div:first-child .myclass .div[name="wrap"]
{
display: -webkit-box;
display: box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
box-orient: horizontal;
-webkit-flex-flow: row nowrap;
flex-flow: row nowrap;
}
#list div:first-child .myclass .div[name="wrap"] > div
{
margin: auto;
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
30
![Page 31: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/31.jpg)
Селектор
![Page 32: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/32.jpg)
СелекторВ качестве селектора может выступать любой тег HTML, для которого
определяются правила форматирования, такие как: цвет, фон, размер
и т.д.
h1-h6, p, span, div, i, ul, li, dt
32
![Page 33: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/33.jpg)
Свойства изначения
![Page 34: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/34.jpg)
Группы свойств• Шрифты (font)
• Позиционирование (position, top, ...)
• Отображение (display, visibility, ...)
• Размеры (width, padding, ...)
• Таблицы и списки (list-style, border-collapse, ...)
• Текст (text-transform, text-indent, ...)
• Цвета и эффекты (color, box-shadow, ...)
34
![Page 35: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/35.jpg)
Шрифты
![Page 36: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/36.jpg)
Шрифты | fonth2
{
font: italic small-caps 700 24px / 1.2 Arial, sans-serif;
}
Результат: НАШ ТЕКСТ
Универсальное свойство, которое позволяет одновременно задать
несколько характеристик шрифта.
01.
02.
03.
04.
36
![Page 37: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/37.jpg)
Шрифты | font-familyh2
{
font-family: "Textbook New", Robot, sans-serif;
}
Устанавливает семейство шрифта, которое будет использоваться для
оформления текста содержимого.
01.
02.
03.
04.
37
![Page 38: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/38.jpg)
Шрифты | Семейства шрифтов• Serif — шрифты с засечками (антиквенные), типа Times New Roman;
• Sans-serif — рубленые шрифты (шрифты без засечек или гротески)
— Arial, MS Verdana;
• Cursive — курсивные (рукописные) шрифты Caflisch Script,
Corsiva;
• Fantasy — декоративные шрифты Critter, Cottonwood;
• Monospace — моноширинные шрифты, ширина каждого
символа в таком семействе одинакова (шрифт Courier
New).
38
![Page 39: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/39.jpg)
Serif и sans-serif
39
![Page 40: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/40.jpg)
Шрифты | font-size<h2>Опа ганга стайл</h2>
h2 {
font-size: 28px
}
Пример: Опа ганга стайл
01.
02.
03.
40
![Page 41: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/41.jpg)
h2
{
font-size: 100px
}
Сам размер шрифта определяется как высота от базовой линии до
верхней границы кегельной площадки.
01.
02.
03.
04.
41
![Page 42: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/42.jpg)
Относительныеи абсолютные
![Page 43: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/43.jpg)
Шрифты | Размер шрифтаЕдиницы Описание
em размер шрифта элемента
ex Высота символа x
% Процент
Относительные единицы измерения
43
![Page 44: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/44.jpg)
Шрифты | Размер шрифтаЕдиницы Описание
px Пиксел
in Дюйм (1 дюйм равен 2,54 см)
cm Сантиметр
pt Пункт (1 пункт равен 1/72 дюйма)
pc Пика (1 пика равна 12 пунктам)
Абсолютные единицы измерения
44
![Page 45: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/45.jpg)
ПримерЗначение У родителя 14px У родителя 26px
1em У меня 1em У меня 1em
1ex x У меня 1ex У меня 1ex
14px У меня 14px У меня 14px
100% У меня 100% У меня 100%
14pt У меня 14pt У меня 14pt
45
![Page 46: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/46.jpg)
Пример
<span style="font-size:2em">Чертовски</span>
<span style="font-size:1em">сложно</span>
<span style="font-size:1.5em">искать</span>
<span style="font-size:.8em">очки</span>
Чертовски сложно искать очки безочков...
46
![Page 47: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/47.jpg)
line-height
![Page 48: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/48.jpg)
Шрифты | line-height<p>line-height: 2em;</p>
p {
line-height: 2em;
}
Устанавливает интерлиньяж (межстрочный интервал) текста.
01.
02.
03.
48
![Page 49: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/49.jpg)
Отсчет ведется от базовой линии шрифта.
Это расстояние называется интерлиньяж.
49
![Page 50: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/50.jpg)
div {
font-size: 30px;
background-color: yellow;
}
div span {
font-size: 18px;
line-height: normal; /* (1em, 1.2em, 2em) */
background-color: cyan;
}
...
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
50
![Page 51: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/51.jpg)
normal 1em 1.2em 2em .5emЭто новая строка Это новая строка Это новая строка Этоновая строка Это новая строка Это новая строкаЭто новаястрока Это новая строка
51
![Page 52: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/52.jpg)
font-weight
![Page 53: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/53.jpg)
Шрифты | font-weightdiv {
font-weight: normal | bold | 700 (100-900) | ... normal ;
}
Пример: Я жирный текст
Устанавливает насыщенность шрифта.
01.
02.
03.
53
![Page 54: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/54.jpg)
font-variant
![Page 55: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/55.jpg)
Шрифты | font-variant<div>Я small-caps текст</div>
div {
font-variant: normal | small-caps;
}
Пример: Я SMALL-CAPS ТЕКСТ
Определяет, как нужно представлять строчные буквы.
01.
02.
03.
55
![Page 56: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/56.jpg)
font-style
![Page 57: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/57.jpg)
Шрифты | font-stylediv {
font-style: normal | italic | oblique;
}
Пример: Я курсивный текст, а Я наклонный текст
Определяет начертание шрифта.
01.
02.
03.
57
![Page 58: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/58.jpg)
Пользовательскиешрифты
![Page 59: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/59.jpg)
Пользовательские шрифты@font-face {
font-family: 'Textbook New';
font-style: normal;
font-weight: 400;
src: url('//curl.com/2T_f.woff') format('woff');
}
Доклад: Использование пользовательских шрифтов
01.
02.
03.
04.
05.
06.
59
![Page 60: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/60.jpg)
![Page 61: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/61.jpg)
Текст
![Page 62: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/62.jpg)
Текст?Как браузер работает с текстом:
Говорят, один буддийский монах, за сорок лет достигший полногодушевного равновесия, потерял его на десятой минуте игры в SuperMeat Boy.
62
![Page 63: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/63.jpg)
text-indent
![Page 64: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/64.jpg)
Текст | text-indent<p>« После детального ознакомления ...</p>
p {
text-indent: -1em | 0 ;
}
« После детального ознакомления с ТЗ, мне кажется, что наш проекточень сильно походит на велосипед на костылях...
Устанавливает величину отступа первой строки блока текста.
01.
02.
03.
64
![Page 65: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/65.jpg)
text-align
![Page 66: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/66.jpg)
Текст | text-align<p>xxx: Как поиск так ...</p>
p {
text-align: center | right | justify | left ;
}
xxx: Как поиск так гугл, а как пинговать так Яндекс.
Устанавливает выравнивание текста.
01.
02.
03.
66
![Page 67: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/67.jpg)
text-align: justify<div>1 2 3 4 5 6</div>
div {
text-align: justify;
}
1 2 3 4
5 6
01.
02.
03.
67
![Page 68: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/68.jpg)
div {
text-align: justify;
}
1 2 3 4
5 6
01.
02.
03.
68
![Page 69: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/69.jpg)
text-align: justify
1. Ширина неразрывных блоков
2. Ширина контейнера
3. Количество пробелов
69
![Page 70: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/70.jpg)
div {
text-align: justify;
}
1 2 3 4
5 6
01.
02.
03.
70
![Page 71: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/71.jpg)
text-transform
![Page 72: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/72.jpg)
![Page 73: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/73.jpg)
Текст | text-transformp {
text-transform: capitalize | lowercase | uppercase | none ;
}
Пример: У Всех Есть План На Случай Зомби Апокалипсиса, НоБольшинство Не Знает Чем Заняться Вечером.
Управляет преобразованием текста элемента в заглавные или
прописные символы.
01.
02.
03.
73
![Page 74: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/74.jpg)
text-decoration
![Page 75: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/75.jpg)
Текст | text-decorationp {
text-decoration: blink | line-through | overline | underline | none;
}
line-through; underline underline line-through overline
Добавляет оформление к тексту.
01.
02.
03.
75
![Page 76: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/76.jpg)
vertical-align
![Page 77: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/77.jpg)
Текст | vertical-alignspan {
vertical-align: bottom | middle | top | значение | проценты baseline;
}
Вертикальное выравнивание текста
baseline middletop
OPA!bottom
subsuper
01.
02.
03.
77
![Page 78: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/78.jpg)
![Page 79: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/79.jpg)
Colorp {
color: red
}
Пример: красный текст
Позволяет задать цвет тексту.
01.
02.
03.
79
![Page 80: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/80.jpg)
Только red?
![Page 81: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/81.jpg)
ЦветВозможны следующие значения:
• ключевое слово — red, blue, magenta, ...
• шестнадцатиричный код — #f00, #0000ff, #666, ...
• rgb/rgba — rgb(255,0,0), rgb(0%,0%,100%), rgba(0, 0, 0, .5), ...
• hsl/hsla (Hue, Saturation, Lightness) — hsl(0,100%,50%),
hsl(250,100%,50%), hsla(0, 0%, 0%, .5), ...
81
![Page 82: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/82.jpg)
#RRGGBBЗначение от 000000 / rgb(0, 0, 0) до ffffff / rgb(255, 255, 255)
Возможна сокращенная запись #RGB, второе значение будет
продублировано #6F0 = #66FF00.
82
![Page 83: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/83.jpg)
RGB / RGBAМожно определить цвет, используя значения красной, зеленой и синей
составляющей в десятичном исчислении.
RGBA = RGB + Alpha
rgb(255, 0, 0), или rgb(100%, 0%, 0%) = rgba(255, 0, 0, 1)
83
![Page 84: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/84.jpg)
HSL / HSLAHSL (от англ. Hue, Saturation, Lightness) - оттенок (тон), насыщенность
и яркость. Например: hsl(120%, 100%, 50%)
84
![Page 85: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/85.jpg)
Соотношение цветовИмя Цвет Код RGB HSL
white #ffffff или #fff rgb(255,255,255) hsl(0,0%,100%)
silver #c0c0c0 rgb(192,192,192) hsl(0,0%,75%)
gray #808080 rgb(128,128,128) hsl(0,0%,50%)
black #000000 или #000 rgb(0,0,0) hsl(0,0%,0%)
green #008800 или #080 rgb(0,100,0) hsl(120,100%,50%)
red #FF0000 или #F00 rgb(255,0,0) hsl(0,100%,50%)
85
![Page 86: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/86.jpg)
background
![Page 87: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/87.jpg)
backgroundp {
background: url('cat.png') repeat-x 100% rgba(255, 100, 50, .8)
}
• background-image
• background-repeat
• background-position
• background-color
Позволяет задать фон элементу.
01.
02.
03.
87
![Page 88: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/88.jpg)
background-imagediv {
background-image: url(путь к файлу) | none
}
Позволяет задать фоновое изображение.
01.
02.
03.
88
![Page 89: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/89.jpg)
background-positionp {
background-position: x [y] | left/right, top/bottom, %
}
Позволяет задать положение фона.
01.
02.
03.
89
![Page 90: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/90.jpg)
background-positionbackground-position: 75%
Если задано только одно значение, то второе устанавливается в center.
90
![Page 91: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/91.jpg)
Спрайты + background-positiondiv {
background: url(pictures/sprite.png);
background-position: 0 0;
}
01.
02.
03.
04.
91
![Page 92: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/92.jpg)
background• background-repeat: repeat | repeat-x | repeat-y | no-repeat
• background-attachment: fixed | scroll
repeat-x
92
![Page 93: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/93.jpg)
background-sizebackground-size: [значение | % | auto] {1,2} | cover | contain
cover - картинка целиком помещается внутрь блока.
contain - ширина или высота равняется ширине или высоте блока.
cover contain
93
![Page 94: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/94.jpg)
Примерbackground-size: 400px 200px;
background-size: 100px 200px;
background-size: 100px;
01.
02.
03.
94
![Page 95: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/95.jpg)
Градиенты
![Page 96: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/96.jpg)
linear-gradient:background: linear-gradient(to bottom, rgb(255,0,0) 10%, rgb(255,255,0))
Статья о linear-gradient
96
![Page 97: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/97.jpg)
radial-gradientbackground: radial-gradient(50% 50%, #fff 0%, #08f 60%, blue 95%)
Статья о radial-gradient
97
![Page 98: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/98.jpg)
Градиенты
Статья о radial-gradient
98
![Page 99: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/99.jpg)
![Page 100: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/100.jpg)
text-shadow
Без тени
Вот и тень моя
100
![Page 101: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/101.jpg)
box-shadowbox-shadow: x y [blur, spread] [inset]
Позволяет задать тень элементу
101
![Page 102: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/102.jpg)
box-shadowbox-shadow: 3px 3px 0 2px, 4px 4px 2px 10px green;
color: red
box-shadow: 5px 5px 5px 5px
box-shadow: -2px -2px 3px inset;
color: blue
background: yellow
box-shadow: -2px -2px 3px inset
01.
02.
01.
02.
03.
102
![Page 103: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/103.jpg)
Вендорныепрефиксы
![Page 104: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/104.jpg)
Вендорные префиксыВендорные префиксы — это специальные приставки к названию CSS
свойства, заточенные под конкретный браузер, которые позволяют
ему понимать экспериментальные CSS свойства и одновременно
игнорировать записи, предназначенные для других браузеров.
104
![Page 105: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/105.jpg)
Вендорные префиксыВендорный префикс Производитель Браузер Браузерный движок
-o-, -op-, -xv- Opera Software Opera Presto
-moz- проект Mozilla Firefox, SeaMonkey, Camino и др. Gecko
-ms- Microsoft Internet Explorer 8 Trident
-khtml- проект KDE Safari до версии 3, Konqueror и др. KHTML
-webkit- Apple Safari 3+, Google Chrome и др. WebKit
105
![Page 106: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/106.jpg)
Примерdiv {
background-image: -webkit-linear-gradient(top, #444, #999);
background-image: -moz-linear-gradient(top, #444, #999);
background-image: -o-linear-gradient(top, #444, #999);
background-image: linear-gradient(to bottom, #444, #999);
}
01.
02.
03.
04.
05.
06.
106
![Page 107: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/107.jpg)
Зачем это?
![Page 108: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/108.jpg)
Причины• Уникальные свойства браузера
• Свойство находится в разработке W3C
• Свойство частично реализует функции свойства из спецификации.
Что это дает?
108
![Page 109: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/109.jpg)
![Page 110: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/110.jpg)
Подключение1. <div style="color: red"> </div>
2. <style> h2 { color: red; } </style>
3. <style> @import url(styles/screen.css) </style>
4. <link rel="stylesheet" href="styles/screen.CSS">
110
![Page 111: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/111.jpg)
Возможныеошибки
![Page 112: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/112.jpg)
Ошибкиdiv {
background: hsl(359%, 100%, 50%);
color: white;
p {
color: red;
}
span {
font-style: italic;
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
112
![Page 113: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/113.jpg)
Результатdiv {
background: hsl(359%, 100%, 50%);
color: white;
p {
color: red;
}
span {
font-style: italic;
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
113
![Page 114: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/114.jpg)
Ошибкиdiv
background: hsl(359%, 100%, 50%);
color: white;
}
p {
color: red;
}
span {
font-style: italic;
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
114
![Page 115: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/115.jpg)
Результатdiv
background: hsl(359%, 100%, 50%);
color: white;
}
p {
color: red;
}
span {
font-style: italic;
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
115
![Page 116: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/116.jpg)
Ошибкиdiv {
background: hsl(359, 100%, 50%)
color: white;
font-size: 20px;
}
p {
color: red;
}
01.
02.
03.
04.
05.
06.
07.
08.
116
![Page 117: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/117.jpg)
Результатdiv {
background: hsl(359, 100%, 50%) color: white;
font-size: 20px;
}
p {
color: red;
}
01.
02.
03.
04.
05.
06.
07.
117
![Page 118: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/118.jpg)
Тема: «Архетип как мера»Научно-фантастический рассказ
Гештальт диссонирует институциональный текст даже в том случае, если непосредственное наблюдение этого явлениязатруднительно. Фингер-эффект иллюстрирует незначительный гранит одинаково по всем направлениям. Промерзаниестекает в опасный аллювий при любом их взаимном расположении. Как мы уже знаем, желтозём неустойчив. Еслипринять во внимание физическую неоднородность почвенного индивидуума, можно прийти к выводу о том, что кризисотражает поглотительный стресс, к тому же этот вопрос касается чего-то слишком общего.
Горизонт ожидания, по определению, важно дает песчаный реконструктивный подход при любом их взаимномрасположении. Прекрасное минимально. Искусство фоссилизирует непосредственный электрод, однозначносвидетельствуя о неустойчивости процесса в целом. Комплекс, с зачастую загипсованными породами, дает закон, и в тоже время устанавливается достаточно приподнятый над уровнем моря коренной цоколь.
Фрактал, как следует из полевых и лабораторных наблюдений, традиционен. Верховодка монотонно стягиваетпочвенно-мелиоративный кризис, так как совершенно однозначно указывает на существование и рост в периодоформления палеогеновой поверхности выравнивания. По характеру рельефа личность подпитывает незначительныйортштейн в силу которого смешивает субъективное и объективное, переносит свои внутренние побуждения нареальные связи вещей. Филогенез косо фоссилизирует липарит, это же положение обосновывал Ж.Польти в книге"Тридцать шесть драматических ситуаций".
118
![Page 119: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/119.jpg)
ТЕМА: «АРХЕТИП КАК МЕРА»Научно-фантастический рассказ
Гештальт диссонирует институциональный текст даже в том случае, еслинепосредственное наблюдение этого явления затруднительно. Фингер-эффектиллюстрирует незначительный гранит одинаково по всем направлениям. Промерзаниестекает в опасный аллювий при любом их взаимном расположении. Как мы уже знаем,желтозём неустойчив. Если принять во внимание физическую неоднородностьпочвенного индивидуума, можно прийти к выводу о том, что кризис отражаетпоглотительный стресс, к тому же этот вопрос касается чего-то слишком общего.
Горизонт ожидания, по определению, важно дает песчаный реконструктивный подходпри любом их взаимном расположении. Прекрасное минимально. Искусствофоссилизирует непосредственный электрод, однозначно свидетельствуя онеустойчивости процесса в целом. Комплекс, с зачастую загипсованными породами, даетзакон, и в то же время устанавливается достаточно приподнятый над уровнем морякоренной цоколь.
Фрактал, как следует из полевых и лабораторных наблюдений, традиционен.Верховодка монотонно стягивает почвенно-мелиоративный кризис, так как совершеннооднозначно указывает на существование и рост в период оформления палеогеновойповерхности выравнивания. По характеру рельефа личность подпитываетнезначительный ортштейн в силу которого смешивает субъективное и объективное,переносит свои внутренние побуждения на реальные связи вещей. Филогенез кософоссилизирует липарит, это же положение обосновывал Ж.Польти в книге "Тридцатьшесть драматических ситуаций".
119
![Page 120: Павел Горобцов: Основы CSS](https://reader033.vdocuments.mx/reader033/viewer/2022050807/546566fcaf7959871b8b6980/html5/thumbnails/120.jpg)
Ссылки• www.w3.org/Style/CSS
• www.w3schools.com/css
• www.htmlbook.ru
• www.caniuse.com
120