Рабочие листы
к вашим урокам
Скачать
1 слайд
Cascading Style Sheets — каскадные таблицы стилей
Понятие CSS
Правила построения
Способы подключения к документу
Поддержка CSS браузерами
Расширения CSS
2 слайд
Понятие CSS
CSS (Cascading Style Sheets) – Каскадные таблицы стилей - это свод стилевых описаний, тех или иных HTML тегов, который может быть применён к отдельному тегу - элементу, или одновременно ко всем идентичным элементам на всех страницах сайта.
3 слайд
Правила построения
CSS из таблицы стилей имеет две основные части — селектор и блок объявлений. Селектор, расположенный в левой части правила, определяет, на какие части документа распространяется правило. Блок объявлений располагается в правой части правила. Он помещается в фигурные скобки, и состоит из одного или более объявлений, разделённых знаком «;». Селекторы могут группироваться в одной строке через запятую.
4 слайд
Виды селекторов
5 слайд
Способы подключения к документу
<html>
<head>
<link rel="stylesheet" href="style.css"> </head>
<body>
</body>
</html>
когда таблица стилей находится в отдельном файле, она может быть подключена к веб-документу посредством тега <link>, располагающегося в этом документе между тегами <head> и </head>.
6 слайд
<html>
<head>
<style media="all"> @import url(style.css);
</style>
</head>
</html>
когда таблица стилей находится в отдельном файле, она может быть подключена к веб-документу посредством директивы @import, располагающейся в этом документе между тегами <style> и </style>.
7 слайд
<html>
<head>
<style> body { color: red; } </style>
</head>
<body>
</body>
</html>
когда таблица стилей описана в самом документе, она может располагаться в нём между тегами <style> и </style> .
8 слайд
Поддержка CSS браузерами
Наиболее полно поддерживающими стандарт CSS являются браузеры, работающие на движках Gecko (Mozilla Firefox и др.), WebKit (Safari, Arora, Google Chrome) иPresto (Opera).
Бывший когда-то самым распространённым браузером Internet Explorer 6 поддерживает CSS далеко не полностью.
9 слайд
Расширения CSS
Часто при вёрстке страниц нужно использовать одно и то же значение много раз: один и тот же цвет, один и тот же шрифт. И если это значение нужно будет изменить, то придётся менять во многих местах. В стандартном CSS нет возможностей наследования стилей, вычисляемых значений и прочих зависимостей.
Для решения этих вопросов и ускорения разработки существует несколько расширений языка CSS. Расширений в том смысле, что код CSS является кодом для расширения, но не наоборот. Чтобы из кода «расширенного CSS» получился обычный CSS-файл, воспринимаемый браузером, необходимо выполнить компиляцию. Компиляция (трансляция программы) может быть нескольких типов:
во время запуска страницы на стороне клиента (средствами JavaScript)
во время запуска страницы на стороне сервера
во время вёрстки сайта средствами специального компилятора
Примеры расширений CSS:
Sass
LESS
Stylus
Рабочие листы
к вашим урокам
Скачать
Презентация содержит информацию о том, как используются SSI-директивы при конструировании сайта. Разбирается подключение внешних файлов, содержащих футер, верхнее и левое меню, а также файл со стилями CSS.
Также в презентации поверхностно рассматриваются основы CSS.
Презентация может применяться при углубленном изучении темы "Интернет-технологии", выполнении проектов восьмиклассников в виде сайтов, на тематических кружках.
Предполагается, что ученики самостоятельно разбирают материал в ходе работы над собственным сайтом с небольшими пояснениями учителя.
6 665 126 материалов в базе
Настоящий материал опубликован пользователем Симонова Наталия Геннадиевна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Ваша скидка на курсы
40%
Курс повышения квалификации
72 ч. — 180 ч.
Курс профессиональной переподготовки
600 ч.
Курс профессиональной переподготовки
500/1000 ч.
Мини-курс
3 ч.
Мини-курс
8 ч.
Мини-курс
3 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.