Каскадные таблицы стилей и их применение
методическая разработка по информатике и икт
В методическом пособии представлен теоретический и практический материал по формальному языку описания внешнего оформления html-документа. Пособие предназначено для учащихся 7 - 11 классов, изучающих верстку сайтов.
Скачать:
Вложение | Размер |
---|---|
Методическое пособие Каскадные таблицы стилей и их применение | 187.21 КБ |
Предварительный просмотр:
Государственное бюджетное учреждение дополнительного образования
Дворец детского (юношеского) творчества Красногвардейского района
Санкт-Петербурга "На Ленской"
Методическое пособие
Каскадные таблицы стилей и их применение
Автор Петриченко В.А.
Педагог дополнительного образования
научно-технического отдела
Санкт-Петербург 2019
Содержание
Аннотация 2
1. Основные сведения 2
2. Способы создания стилей 4
3. Правила формирования стилей 6
4. Литература и интернет-ресурсы 10
Аннотация
В методическом пособии представлен теоретический и практический материал по формальному языку описания внешнего оформления html-документа.
Все примеры расположены в папке:
J:\2019-2020\Программа на 2019-2020\УМК\16. Набор от Академии в День учителя\Примеры\razmetka stranic\
Методичка находится в папке J:\2019-2020\Программа на 2019-2020\УМК\16. Набор от Академии в День учителя\Примеры\razmetka stranic\Методичка по CSS
Основные сведения
Каскадные таблицы стилей (Cascading Style Sheet – CSS) - формальный язык описания внешнего вида документа, стандарт стилей, объявленный консорциумом W3C (WWW Consorcium). Термин каскадные указывает на возможность слияния различных видов стилей и на наследование стилей внутренними тегами от внешних.
CSS – это язык, содержащий набор свойств, для определения внешнего вида документа. Cпецификация CSS определяет свойства и описательный язык (селекторы разного типа) для установления связи с HTML-элементами.
CSS – абстракция, в которой внешний вид Web-документа определяется отдельно от его содержания.
С помощью CSS можно назначить размер шрифта, выбрать шрифт и цвет.
Например, у нас есть html-страница, код которой представлен в таблице. Браузер воспроизведет этот код в соответствии с таблицей стилей встроенной в самом браузере по умолчанию. При этом отображение html-кода по умолчанию для разных браузеров может отличаться. Т.е. встроенная таблица в разных браузерах может отображать один и тот же код по-разному.
Текст 1 Текст 2 Текст 3 |
Для задания собственных стилей можно использовать 3 способа.
Способы создания стилей
2.1. Внутритекстовые стили
Стиль назначается непосредственно элементу с помощью атрибута style внутри открывающего тэга. Например, изменим стиль заголовка h1.
Primer 1.html Заголовок 1
Текст 1 Текст 2 Текст 3 |
Мы поменяли шрифт, размер шрифта, цвет и выравнивание. Но данный стиль будет применен только к конкретному элементу, в который встроен этот стиль.
2.2. Встраиваемые стили на html-страницу
Для применения стиля на все тэги данной html-станицы можно их встроить в управляющую часть html-кода страницы с помощью тэга
style="font-size:30px; font-family:Arial; color: #00F; text-align:center;">
Заголовок 1
Текст 1
Заголовок 2
Текст 2
Заголовок 3
Текст 3