Способы связывать стили с элементами страниц

2019-08-13

334

Обсуждений (0)

0.00 из 5.00 0 оценок

12 3 Следующая ⇒

Основы CSS. Каскадные списки стилей

Изучение форматирования веб-страниц с помощью каскадных таблиц стилей CSS.

Лабораторная работа по Веб технологиям

При разработке веб-сайтов часто возникает необходимость вносить изменения в дизайн и вид одновременно многих веб-страниц. Концепция CSS придумана для того, чтобы отделить контент веб страниц от правил, задающих ее внешний вид. Эти правила (CSS-стили) прописываются, как правило, один раз, но браузер распространяет их действие сразу на многие места многих веб-страниц.

Описание

Тег <style> применяется для определения стилей элементов веб-страницы. Тег <style>необходимо использовать внутри контейнера <head>. Можно задавать более чем один тег <style>.

Синтаксис

Атрибуты

media –Определяет устройство вывода, для работы с которым предназначена таблица стилей.

type – Сообщает браузеру, какой синтаксис использовать, чтобы правильно интерпретировать стили.

Закрывающий тег – Обязателен.

Ниже приводятся задания по практическому изучению CSS. ЭТО ВАЖНО! - Все используемые в этих заданиях страницы не забывайте сохранять. Их нужно будет потом включать в отчет по этой работе. Не забывайте в первой строке кода указать <!DOCTYPE html>.

Способы связывать стили с элементами страниц

Задание 1. Просмотреть в браузере страницу с кодом:

<!DOCTYPE html><html><head><style type='text/css'>P {color:green;}h2 {color:red;}</style></head><body><h1>СТИЛЬ ДЕЙСТВУЕТ НА ЗАДАННЫЕ ТЕГИ</h1><p>Я первый абзац</p><p>Я второй абзац</p><h2>Это заголовок h2</h2></body></html>

Задание 2. Просмотреть в браузере страницу с кодом:

<html><head><style type='text/css'>/* Оформим элемент с id='test1' */#test1 {color:green;font-family:verdana;font-size:1.2em;}</style></head><body><p id='test1'>Этот одиночный абзац будет оформлен с помощью CSS. </p><p> А этот абзац изменения не затронут. </p></body></html>

Сделать скриншот для отчета.

Задание 3. Просмотреть в браузере страницу с кодом:

<html><head><style type='text/css'>/* Свойства будут применены ко всем элементам с class='test1' */.test1 {color:green;font-family:verdana;font-size:1.2em;}</style></head><body><p class='test1'>Этот абзац будет оформлен с помощью CSS. </p><p>А этот абзац изменения не затронут. </p><p class='test1'>И этот абзац тоже будет оформлен с помощью CSS. </p></body></html>

Сделать скриншот для отчета.

Задание 4. Просмотреть в браузере страницу с кодом:

<html><head><style type='text/css'>/* Оформит все элементы, у которых задан атрибут src */[src]{border-color:green;border-style:solid;border-width:3px;}</style></head><body><img src='mountimg.jpg' alt='Ергаки' /><br /><br /><img src='mountimg1.jpg' alt='Кузнецкий Алатау' /></body><p> У данного элемента не будет зеленой рамки потому, что у него нет атрибута src. </p></html>

Сделать скриншот для отчета.

Задание 5. Просмотреть в браузере страницу с кодом:

<html>

<head>

/* Оформит все элементы, у которых атрибут href равен http://www.google.ru */

[href='http://www.google.ru']

{color:green;}

</style>

</head>

<body>

<a href='http://www.google.ru'>google.ru </a>

<br />

<a href='http://www.rutracker.org'>Ссылка на торрент </a>

</body>

</html>

Сделать скриншот для отчета.

Задание 6. Просмотреть в браузере страницу с кодом:

<html><head><style type='text/css'>/* Свойства оформления будут применены только к тем элементам с class='test1', которые являются заголовками */h2.test1 {color:green;font-family:verdana;}</style></head><body><h2 class='test1'>Данный заголовок был оформлен с помощью CSS</h2><p class='test1'>Данный абзац не был оформлен</p><h2>Данный заголовок также не был оформлен</h2></body></html>

Сделать скриншот для отчета.

Задание 7 . Просмотреть в браузере страницу с кодом:

<html><head><style type='text/css'>/* Свойства будут применены только к тем элементам p, которые находятся внутри элементов div */div p{color:green;font-family:verdana;font-size:1.2em;}</style></head><body><p>Данный абзац не будет оформлен</p><div><p>Данный абзац будет оформлен так как он вложен в элемент div</p></div><p><i>Данный абзац тоже не будет оформлен</i></p></body></html>

Сделать скриншот для отчета.

Задание 8. Просмотреть в браузере страницу с кодом:

<html><head><style type='text/css'>/* Свойства будут применены только к тем элементам p, которые идут сразу после элементов div */div+p{color:green;font-family:verdana;font-size:1.2em;}</style></head><body><p>Я первый абзац.</p><div><p>Я второй абзац.</p></div><p>Ко мне будет применено оформление так как я иду сразу после элемента div.</p></body></html>

Сделать скриншот для отчета.

Задание 9 . Просмотреть в браузере страницу с кодом:

<html><head><style type='text/css'>h1,h2,p{font-family:verdana;color:green;}</style></head><body><p>Тут поясняется, что такое ГРУППИРОВКА СЕЛЕКТОРОВ</p><h1>Заголовок оформленный с помощью CSS.</h1><h2>Еще один заголовок оформленный с помощью CSS.</h2></body></html>

Сделать скриншот для отчета.

Задание 10. Написать страницу со стилями, которые отформатируют приведенные абзацы так, как они «просят»:

<h3>Покрасьте меня в розовый цвет (color:pink).</h3><p>Данный элемент должен остаться неоформленным.</p><p id='greycol'>Покрасьте меня в серый цвет (color:grey).</p><div>Данный элемент должен остаться неоформленным.</div><div><p>Покрасьте меня в красный цвет (color:red).</p></div><h4>Данный элемент должен остаться неоформленным.</h4><p>Покрасьте меня в зеленый цвет (color:green).</p><p class='yellowcol'>Покрасьте меня в желтый цвет (color: yellow).</p>

Сделать скриншот для отчета.

2019-08-13

334

Обсуждений (0)

0.00 из 5.00 0 оценок

12 3 Следующая ⇒

Обсуждение в статье: Способы связывать стили с элементами страниц

Обсуждений еще не было, будьте первым... ↓↓↓