Беларусь, Речица
СДЕЛАЙТЕ СВОИ УРОКИ ЕЩЁ ЭФФЕКТИВНЕЕ, А ЖИЗНЬ СВОБОДНЕЕ
Благодаря готовым учебным материалам для работы в классе и дистанционно
Скидки до 50 % на комплекты
только до
Готовые ключевые этапы урока всегда будут у вас под рукой
Организационный момент
Проверка знаний
Объяснение материала
Закрепление изученного
Итоги урока
Была в сети 12.03.2026 23:09
Смелова Владислава Николаевна
учитель информатики
56 лет
16 974
2 323 
Местоположение
Специализация
Понятие о каскадных таблицах стилей
Категория:
Информатика
16.01.2022 17:04
Просмотр содержимого документа
«Понятие о каскадных таблицах стилей»
11 класс
Понятие
о
каскадных таблицах
стилей
Урок №12
Определение:
- CSS ( Cascading Style Sheets ) — это код НТМL, который вы используете для стилизации вашей веб-страницы.
- С помощью НТМL описывается структура веб-страницы.
- C помощью CSS описывается внешний вид веб-страницы.
Способы подключения CSS к документу
Подключение
CSS к документу
Встроенная таблица стилей описывается в самом веб-документе.
Внешняя таблица стилей представляет собой отдельный текстовый файл с расширением .css
Встроенная таблица стилей
- Встроенная таблица стилей описывается в самом веб-документе.
- Она располагается между тегами и , которые, в свою очередь, размещаются в этом документе между тегами и .
- Тег должен иметь обязательный атрибут type=“text/css” .
НАПРИМЕР :
p {color : red;}
КРАСНЫЙ ЦВЕТ ТЕКСТА
ВО ВСЕХ АБЗАЦАХ
…………… Собственное имя файла стиля может меняться " width="640"
Внешнная таблица стилей
НАПРИМЕР :
- Внешняя таблица стилей представляет собой отдельный текстовый файл с расширением .сss.
- Файл создается в редакторе кода, так же как и html-страница.
- Внешняя таблица стилей подключается к веб-документу с помощью тега , располагающегося в этом документе между тегами и .
- Тег должен иметь два атрибута: rel="stylesheet" , который указывает тип ссылки, и href , имеющий значением адрес файла стилей.
href=" style.css "
……………
Собственное имя файла стиля может меняться
Синтаксис описания правил стиля
- Каждое правило CSS из таблицы стилей имеет две основные части — селектор и блок объявлений.
- В левой части правила указывается селектор, который определяет, на какие элементы документа распространяется правило.
- В правой части правила располагается блок объявлений. Он помещается в фигурные скобки и, в свою очередь, состоит из одного или более объявлений, разделенных знаком «;».
- Каждое объявление представляет собой сочетание свойства CSS и значения, разделенных знаком «:».
- Селекторы могут группироваться в одной строке через запятую. В таком случае свойство применяется к каждому из них.
НАПРИМЕР :
Селектор {
свойство : значение ;
свойство : значение ;
................. }
ИЛИ
селектор , селектор {
свойство : значение ;
свойство : значение ;
................. }
ПРИМЕР:
НАПРИМЕР :
Селектор {
свойство : значение ;
свойство : значение ;
................. }
ИЛИ
селектор , селектор {
свойство : значение ;
свойство : значение ;
................. }
Селектор – параграфа и заголовка 3-го уровня
НАПРИМЕР :
Р, Н3 {
font-size: 14рх;
color: #ff0000; }
Свойство : размер текста,
Значение : в 14 пикселей,
Свойство : Цвет текста,
Значение : красный цвет
Свойства и значения селекторов:
Для работы с текстоом
font-style
normal
Обычное начертание текста.
italic
Курсивное начертание.
oblique
font-size
Наклонное начертание.
text-align
10 em
Определяет начертание шрифта
11 ex
left
center
Единицы измерения текста
12 pt
13 px
right
Определяет размер шрифта элемента
25%
По левому краю
justify
color
Определяет горизонтальное выравнивание текста в пределах элемента
По центру
Сайт CSS селекторов
По правому краю
http://htmlbook.ru/css/
По ширине
Цвет текста в пределах элемента
Примеры использования стилей
Стиль
Расшифровка
body { background-color : blue;
color : white;
Синий цвет фона,
Body { background-image : url("image.gif") }
font-size : 16px ; }
белый цвет шрифта,
Фоновое изображение страницы из файла image.gif
Р { font-family : Arial;
Img { border-style : dashed;
Абзац со шрифтом Arial
размер шрифта — 16 пикселей
color : gray;
P { border: 2px solid green; }
Изображение с рамкой из черточек, толщина рамки — 2 пикселя,
border-width : 2px;
font-weight : bold;
серого цвета,
цвет рамки — #СССССС,
td { border-color : green red yellow pink }
Рамка вокруг абзаца — сплошная линия зеленого цвета толщиной 2 пикселя
font-style : italic;
border-color : #CCCCCC;
полужирным курсивом,
Разноцветная рамка ячейки таблицы; вверху зеленая, справа красная, внизу желтая, слева розовая
font-size : 10px;
высота изображения — 200 пикселей
height : 200px; }
text-align : justify;
размером 10 пикселей,
text-indent : 20px; }
выравнивание текста в пределах абзаца по ширине, отступ первой строки текста равен 20 пикселей
Пример с применением встроенных стилей
Пример с применением внешних стилей
Вебинар для учителей
Свидетельство об участии БЕСПЛАТНО!
