Введение в CSS

Август 7, 2022

Главная
Информатика
Введение в CSS

Содержание

2. motion. Lorem Ipsum is simply dummy text Зачем использовать CSS CSS используется для определения стилей для
3. motion. Lorem Ipsum is simply dummy text Зачем использовать CSS Это заголовок Это параграф. HTML никогда
4. Lorem Ipsum is simply dummy text Спецификации CSS Когда в спецификацию HTML 3.2 были добавлены теги
5. CSS синтаксис Селектор указывает на HTML элемент, который вы хотите стилизовать. Блок объявлений содержит одно или
6. CSS p - это селектор в CSS (он указывает на HTML элемент, который вы хотите стилизовать:
7. Lorem Ipsum is simply dummy text Простые селекторы
8. Подключение CSS Существует три способа установки каскадной таблицы стилей CSS:
9. motion. Lorem Ipsum is simply dummy text Внешний CSS Каждая HTML страница должна содержать ссылку на
10. Внешний CSS Внешний файл .css не должен содержать никаких HTML тегов. Внешняя таблица стилей может быть
11. Внутренний CSS Внутренний стиль определяется внутри элемента , внутри секции . Внутренняя таблица стилей может использоваться,
12. Встроенный CSS Чтобы использовать встроенные стили, добавьте атрибут "style" к соответствующему элементу, атрибут стиля может содержать
14. Скачать презентацию

Слайд 2

motion.
Lorem Ipsum is simply dummy text
Зачем использовать CSS
CSS используется для определения

стилей для ваших веб страниц, включая дизайн, макет и вариации отображения для различных устройств и размеров экрана.

Слайд 3

motion.
Lorem Ipsum is simply dummy text
Зачем использовать CSS
Это заголовок

Это параграф.

HTML никогда

не предназначался для того, чтобы содержать теги для форматирования веб страницы! HTML был создан для описания содержания веб страниц, например:

CSS решает много проблем

Слайд 4

Lorem Ipsum is simply dummy text
Спецификации
CSS
Когда в спецификацию HTML 3.2 были

добавлены теги оформления и их атрибуты, это стало настоящим кошмаром для веб разработчиков. Разработка больших сайтов, где шрифты и цветовая информация добавлялись на каждую отдельную страницу, процесс стал долгим и дорогостоящим.
Чтобы решить эту проблему, консорциум World Wide Web Consortium (W3C) создал CSS.

Слайд 5

CSS
синтаксис
Селектор указывает на HTML элемент, который вы хотите стилизовать. Блок объявлений

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

Набор правил CSS состоит из селектора и блока объявлений:

Слайд 6

CSS
p - это селектор в CSS
(он указывает на HTML элемент,

который вы хотите стилизовать:

)
color является свойством, а red является значение свойства
text-align является свойством, а center является значение свойства

Объяснение примера

p {
color: red;
text-align: center;
}

Слайд 7

Lorem Ipsum is simply dummy text
Простые
селекторы

Слайд 8

Подключение CSS
Существует три способа установки каскадной таблицы стилей CSS:

Слайд 9

motion.
Lorem Ipsum is simply dummy text
Внешний
CSS
Каждая HTML страница должна содержать ссылку

на внешний файл таблицы стилей внутри элемента в разделе

С помощью внешней таблицы стилей вы можете изменить внешний вид всего веб сайта, изменив только один файл!

Слайд 10

Внешний
CSS
Внешний файл .css не должен содержать никаких HTML тегов.
Внешняя таблица стилей

может быть написана в любом текстовом редакторе и должна быть сохранена с расширением .css.

index.html

style.css

Слайд 11

Внутренний
CSS
Внутренний стиль определяется внутри элемента

Слайд 12

Встроенный
CSS
Чтобы использовать встроенные стили, добавьте атрибут "style" к соответствующему элементу,

атрибут стиля может содержать любое свойство CSS.

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

Введение в CSS

Содержание

motion.Lorem Ipsum is simply dummy text Зачем использовать CSSCSS используется для определения

motion.Lorem Ipsum is simply dummy text Зачем использовать CSSЭто заголовокЭто параграф.HTML никогда

Это заголовок

Lorem Ipsum is simply dummy text СпецификацииCSSКогда в спецификацию HTML 3.2 были

CSSсинтаксисСелектор указывает на HTML элемент, который вы хотите стилизовать. Блок объявлений

CSSp - это селектор в CSS (он указывает на HTML элемент,

Lorem Ipsum is simply dummy text Простыеселекторы

Подключение CSSСуществует три способа установки каскадной таблицы стилей CSS:

motion.Lorem Ipsum is simply dummy text ВнешнийCSSКаждая HTML страница должна содержать ссылку

ВнешнийCSSВнешний файл .css не должен содержать никаких HTML тегов.Внешняя таблица стилей

Встроенный CSSЧтобы использовать встроенные стили, добавьте атрибут "style" к соответствующему элементу,