Форматирование при помощи CSS

Июль 31, 2022

Главная
Информатика
Форматирование при помощи CSS

Содержание

2. ПЛАН Способы подключения CSS Атрибуты class и id в html. Селекторы в css. Понятие блочных и
3. CSS – каскадные таблицы стилей. (Cascading Style Sheets) каскадные таблицы стилей, описывают правила форматирования отдельного элемента
4. Пример : Встраиваемые стили.
5. Пример : Внутри тега стили. Обратите внимание на этот текст. Пример : @import. @import url(mobile.css); p
6. Атрибуты class и id Text Text Селекторы в css Универсальный селектор : * {margin: 0;}
7. ПРИМЕР
8. Примеры Код HTML: Инструкция Код CSS: .headline { text-transform: uppercase; color: lightblue;} h1 {font-family: Lobster, cursive;}
9. Горизонтальное выравнивание
10. Отступ Высота строк
11. ПРИМЕР:
12. Вертикальное выравнивание vertical-align: img {vertical-align: baseline;} img {vertical-align: sub;} img {vertical-align: super;} img {vertical-align: top;} img
14. Немного практики
15. Расстояние между словами word-spacing Расстояние между буквами letter-spacing: Обработка пробелов white-space:normal; | nowrap;| pre;| pre-wrap;( делает
16. Декорирование текста text-decoration: none;| underline;| overline;| line-through; Выделение первой буквы :first-letter и первой строки :first-line
17. Форматирование шрифта с помощью CSS-свойств Семейство шрифтов Стиль шрифта font-style: normal; italic; oblique;
18. Насыщенность шрифта font-weight Варианты значений: normal(400); Bold (700); Bolder(больше , чем у предка); Lighter (меньше); Размер
19. ПРАКТИКА Изменяя стиль у каждого абзаца (цвет и размер шрифта) создайте такую страницу. этот абзац 14
21. Скачать презентацию

Слайд 2

ПЛАН
Способы подключения CSS
Атрибуты class и id в html. Селекторы в css.
Понятие

блочных и строчных элементов. Примеры блочных и строчных тегов
CSS Свойство для текста
CSS Свойство для шрифтов
Решение проблемы отступов между inline-block элементами

Слайд 3

CSS – каскадные таблицы стилей.
(Cascading Style Sheets) каскадные таблицы стилей,

описывают правила форматирования отдельного элемента веб-страницы.

Способы добавления CSS

1.Встраиваемые таблицы стилей в .
2. Внутри текстовые таблицы стилей.
3. Правило @import
4. Тег

. Правила записи CSS свойств.

Слайд 4

Пример : Встраиваемые стили.

Слайд 5

Пример : Внутри тега стили.

color: #70d7700;">
Обратите внимание на этот текст.

Пример : @import.

Пример :Тег

Слайд 6

Атрибуты class и id
Text

Text

Селекторы в css
Универсальный селектор

:
* {margin: 0;}

Слайд 7

ПРИМЕР

Слайд 8

Примеры
Код HTML:
Инструкция
Код CSS: .headline { text-transform: uppercase; color: lightblue;}
h1 {font-family: Lobster,

cursive;}

#sidebar { text-transform: uppercase; color: blue;}

Слайд 9

Горизонтальное выравнивание

Слайд 10

Отступ
Высота строк

Слайд 11

ПРИМЕР:

Слайд 12

Вертикальное выравнивание vertical-align:
img {vertical-align: baseline;}
img {vertical-align: sub;}
img {vertical-align: super;}
img {vertical-align: top;}
img {vertical-align:

text-top;}
img {vertical-align: middle;}
img {vertical-align: bottom;}
img {vertical-align: text-bottom;}
img {vertical-align: 5px;}

Слайд 13

Слайд 14

Немного практики

Слайд 15

Расстояние между словами
word-spacing
Расстояние между буквами
letter-spacing:
Обработка пробелов
white-space:normal; | nowrap;| pre;|
pre-wrap;( делает

переносы там , где нужно)
pre-line;(удаляет лишние пробелы, кроме
)

Преобразование текста

text-transform: none;| capitalize; | uppercase;
lowercase;

Направление написания текста direction: ltr;| rtl;

Слайд 16

Декорирование текста text-decoration:
none;| underline;| overline;| line-through;
Выделение первой буквы
:first-letter
и

первой строки
:first-line

Слайд 17

Форматирование шрифта с помощью CSS-свойств
Семейство шрифтов
Стиль шрифта font-style: normal;
italic;
oblique;

Слайд 18

Насыщенность шрифта font-weight
Варианты значений:
normal(400);
Bold (700);
Bolder(больше , чем у предка);
Lighter (меньше);
Размер

шрифта font-size:14 px | pt | cm| mm in| em| %;

p {font: italic bold 14px/1.5 Times, 'New Century Schoolbook', serif;}

Слайд 19

ПРАКТИКА
Изменяя стиль у каждого абзаца (цвет и
размер шрифта) создайте такую

страницу.

этот абзац 14 пунктов, зеленый
серый, 14 пикселей
Это просто размер номер 5, без стиля
серебряный, 150% от текущего 5
Это просто размер номер 2, без стиля
серебряный, 150% от текущего 2
красный, 1 дюйм
синий, 1.5 сантиметра

2. Задайте внутри элемента HEAD стиль для тега Н2 – синий цвет, и тега Р – красный цвет. Далее создайте такую страницу.

Это заголовок второго уровня
это написано в абзаце
это написано вне абзаца
это написано в абзаце, где дополнительно применен стиль - размер шрифта 10 пунктов
а это заголовок второго уровня, где дополнительно применен стиль - размер шрифта 13 пунктов

Форматирование при помощи CSS

Содержание

ПЛАНСпособы подключения CSSАтрибуты class и id в html. Селекторы в css.Понятие

CSS – каскадные таблицы стилей. (Cascading Style Sheets) каскадные таблицы стилей,

Пример : Встраиваемые стили.

Пример : Внутри тега стили.

Атрибуты class и id Text TextСелекторы в cssУниверсальный селектор

ПРИМЕР

ПримерыКод HTML: Инструкция Код CSS: .headline { text-transform: uppercase; color: lightblue;} h1 {font-family: Lobster,

Инструкция

Горизонтальное выравнивание

Отступ Высота строк

ПРИМЕР:

Вертикальное выравнивание vertical-align: img {vertical-align: baseline;}img {vertical-align: sub;}img {vertical-align: super;}img {vertical-align: top;}img {vertical-align:

Немного практики

Расстояние между словамиword-spacingРасстояние между буквамиletter-spacing:Обработка пробеловwhite-space:normal; | nowrap;| pre;| pre-wrap;( делает

Декорирование текста text-decoration:none;| underline;| overline;| line-through; Выделение первой буквы :first-letter и

Форматирование шрифта с помощью CSS-свойств Семейство шрифтов Стиль шрифта font-style: normal;italic;oblique;

Насыщенность шрифта font-weightВарианты значений:normal(400); Bold (700);Bolder(больше , чем у предка);Lighter (меньше);Размер

ПРАКТИКАИзменяя стиль у каждого абзаца (цвет и размер шрифта) создайте такую

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