ИнтернетПохожие презентации:
Введение в CSS
1.
CSS описывает как HTML элементы должныотображаться на экране. Он экономит много
работы и может управлять макетом нескольких
веб страниц одновременно.
познакомиться
Creative presentation template
Creative presentation template
Введение в
CSS
2.
CSS используется для определения стилейдля ваших веб страниц, включая дизайн,
макет и вариации отображения для
различных устройств и размеров экрана.
motion.
Lorem Ipsum is simply dummy text
Creative presentation template
Creative presentation template
Зачем использовать
CSS
3.
CSS решает много проблемHTML никогда не предназначался для того, чтобы содержать теги
для форматирования веб страницы! HTML был создан для описания
содержания веб страниц, например:
<h1>Это заголовок</h1>
<p>Это параграф.</p>
Creative presentation template
motion.
Lorem Ipsum is simply dummy text
Creative presentation template
Зачем использовать
CSS
4.
Creative presentation templateСпецификации
CSS
Когда в спецификацию HTML 3.2 были добавлены теги оформления и
их атрибуты, это стало настоящим кошмаром для веб разработчиков.
Разработка больших сайтов, где шрифты и цветовая информация
добавлялись на каждую отдельную страницу, процесс стал долгим и
дорогостоящим.
Чтобы решить эту проблему, консорциум World Wide Web Consortium
(W3C) создал CSS.
Lorem Ipsum is simply dummy text
Creative presentation template
5.
p{Набор правил CSS состоит из селектора и
блока объявлений:
color: red;
text-align: center;
селектор
h1
объявление
объявление
}
{ color: red; font-size: 20px; }
свойство значение
свойство
значение
Селектор указывает на HTML элемент, который вы хотите стилизовать. Блок объявлений содержит одно или несколько объявлений,
разделенных точкой с запятой. Каждое объявление содержит имя свойства CSS и значение, разделенные двоеточием. Несколько
объявлений CSS разделяются точкой с запятой, а блоки объявлений окружаются фигурными скобками.
Creative presentation template
Creative presentation template
CSS
синтаксис
6.
p{color: red;
text-align: center;
p - это селектор в CSS
}
(он указывает на HTML элемент, который вы хотите стилизовать: <p>)
color является свойством, а red является значение свойства
text-align является свойством, а center является значение свойства
CSS
Creative presentation template
Creative presentation template
Объяснение
примера
7.
Creative presentation templateПростые
селекторы
Lorem Ipsum is simply dummy text
Creative presentation template
8.
Существует три способа установки каскадной таблицы стилей CSS:Внешний
CSS
Встроенный
CSS
Внутренний
CSS
Creative presentation template
Creative presentation template
Подключение CSS
9.
С помощью внешней таблицы стилей выможете изменить внешний вид всего веб
сайта, изменив только один файл!
Каждая HTML страница должна содержать ссылку на внешний файл
таблицы стилей внутри элемента <link> в разделе <head>
<link rel="stylesheet" href="style.css">
motion.
Lorem Ipsum is simply dummy text
Creative presentation template
Creative presentation template
Внешний
CSS
10.
Внешняя таблица стилей может бытьнаписана в любом текстовом редакторе и
должна быть сохранена с расширением .css.
Внешний файл .css не должен содержать никаких HTML тегов.
style.css
<link rel="stylesheet" href="style.css">
Creative presentation template
Creative presentation template
Внешний
CSS
index.html
11.
Внутренняя таблица стилей можетиспользоваться, если одна HTML страница
имеет уникальный стиль.
Внутренний стиль определяется внутри элемента <style>,
внутри секции <head>.
<style>…</style>
Creative presentation template
Creative presentation template
Внутренний
CSS
12.
Встроенный стиль может быть использовандля применения уникального стиля для
одного элемента.
Чтобы использовать встроенные стили, добавьте атрибут
"style" к соответствующему элементу, атрибут стиля может
содержать любое свойство CSS.
<h1 style=“color: red;">Это заголовок</h1>
Creative presentation template
Creative presentation template
Встроенный
CSS
13.
“CSS является мощным инструментом в веб-вёрстке.Сегодня ни один сайт не обходится без таблиц стилей.
Учите, запоминайте, практикуйте!“
Creative presentation template
Creative presentation template
the step is done
web.