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

2019-08-13

395

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

0.00 из 5.00 0 оценок

⇐ Предыдущая 123 Следующая ⇒

Внешнее описание

Внешнее объявление стилей используется в случаях, когда оформление задается для группы связанных HTML документов (например, для целого веб-сайта).

В этом случае все оформление выносится в один внешний файл, на который должны ссылаться все документы веб-сайта.

Внешнее объявление стилей очень удобно так как позволяет редактируя лишь один файл изменять оформление целого веб-сайта.

Для того, чтобы подключить внешний файл стилей необходимо в секции head каждой страницы веб-сайта указать ссылку на него с помощью элемента <link>:

Задание 11.Написать страницу, для которой описан внешний файл стилей такого содержания:

h1 {color:red;}

p {margin-right:38px;}

div {float:left;}

Просмотреть эту страницу в браузере. Сделать скриншот для отчета.

Внутреннее объявление стилей

Оно используются в случаях, когда стиль нужно задать только для одного отдельного HTML документа.

В этом случае оформление определяется в секции head с помощью тэга style:

<head>

h1 {color:red;}

p {margin-right:38px;}

div {float:left;}

</style>

</head>

Задание 12. Дополнить код страницы задания 11 внутренним описанием стиля согласно приведенному примеру. Просмотреть эту страницу в браузере. Сделать скриншот для отчета.

Строковое объявление стилей

Оно используется в случаях, когда необходимо оформить только один определенный элемент в HTML документе.

Для того, чтобы оформить элементы этим способом нужно воспользоваться атрибутом style соответствующего элемента.

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

Пример:

<p style="font-size:1.3em"> Абзац оформленный с помощью CSS.</p>

Задание 13. Дополнить код страницы задания 11-12 строковым описанием стиля согласно приведенному примеру. Просмотреть эту страницу в браузере. Сделать скриншот для отчета.

Задание 14 . Код страницы по заданиям 11-13 изменить так, чтобы для параграфа (тег <p>) во внешнем, внутреннем и строковом задании стиля описывался бы разный формат. Просмотреть в браузере эту страницу, сделать скриншот для отчета. Разобраться, как взаимодействуют приоритеты стилей, заданных разными способами.

Форматирование текста

Задание 15. Написать страницу, в которой использовать такие описания цветов трех разных абзацев:

p {color:green;}

p {color:rgb(0,255,0);}

p {color:#00ff00;}

Просмотреть в браузере эту страницу, сделать скриншот для отчета.

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

<html><head><style type='text/css'>p.ta1 {text-align:center;}p.ta2 {text-align:left;}p.ta3 {text-align:right;}p.ta4 {text-align:justify;}</style></head><h1>ВЫРАВНИВАНИЕ ТЕКСТА</h1><p class='ta1'>Текст данного элемента выравнен по центру.</p><p class='ta2'>Текст данного элемента выравнен по левому краю. </p><p class='ta3'>Текст данного элемента выравнен по правому краю. </p><div ><p class='ta4'>Текст данного элемента выравнен с помощью значения justified. Как Вы можете видеть, браузер автоматически растягивает строчки до одинаковой длинны путем изменения величины отступов между словами. Попробуйте убрать выравнивание или измените ширину окна браузера, чтобы лучше понять принцип действия. </p></div><div ><p class='ta4'>Текст данного элемента будет с помощью значения justified. Как Вы можете видеть, браузер автоматически растягивает строчки до одинаковой длинны путем изменения величины отступов между словами. Попробуйте убрать выравнивание или измените ширину окна браузера, чтобы лучше понять принцип действия. </p></div></html>

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

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

<html><head><style type='text/css'>p.td1 {text-decoration:underline;}p.td2 {text-decoration:line-through;}p.td3 {text-decoration:overline;}</style></head><h1> «ДЕКОРИРОВАНИЕ» ТЕКСТА</h1><p class='td1'>Текст данного элемента подчеркнут.</p><p class='td2'>Текст данного элемента перечеркнут.</p><p class='td3'>Текст данного элемента находится под линией.</p></html>

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

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

<html><head><style type='text/css'>p.ls1 {letter-spacing:10px;}p.ws1 {word-spacing:15px;}</style></head><h1> ОТСТУПЫ МЕЖДУ БУКВАМИ И СЛОВАМИ</h1><p class='ls1'> Величина отступа между буквами в данном элементе равна 10 пикс. </p><p class='ws1'> Величина отступа между словами в данном элементе равна 15 пикс. </p></html>

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

Задание 19. Создать страницу с правилами, по которым каждый из приведенных ниже абзацев получит описанный в нем формат.

1. В данном абзаце отступ между буквами равен 17 пикс., а отступ между словами 5 пикс. Данный абзац оранжевого цвета.

2. Текст данного элемента подчеркнут, отступ между буквами в нем равен 15 пикселей. Данный абзац серого цвета.

3. Текст данного элемента выровнен по центру, отступ между словами в нем равен 10 пикселей. Данный элемент имеет цвет #ff3366.

4. Текст данного элемента выравнен по правому краю, отступ между буквами в нем равен 6 пикселей. Текст написан маленькими буквами красного цвета.

5. Текст данного элемента выравнен по центру, подчеркнут, отступ между буквами в нем равен 7 пикселей. Текст написан большими буквами зеленого цвета.

Просмотреть в браузере эту страницу. Сделать скриншот для отчета.

Работа со шрифтами

Полезные примеры:

<p >Демонстрация шрифта Arial.</p>

<p >Демонстрация шрифта Arial Black.</p>

<p >Демонстрация шрифта Comic Sans MS.</p>

<p >Демонстрация шрифта Courier New.</p>

<p >Демонстрация шрифта Georgia.</p>

<p > Демонстрация шрифта Impact.</p>

<p >Демонстрация шрифта Times New Roman.</p>

<p >Демонстрация шрифта Trebuchet MS.</p>

<p >Демонстрация шрифта Verdana.</p>

/* Если на компьютере пользователя нет шрифта Verdana, то будет использован Times New Roman, если на компьютере нет Times New Roman, то будет использован Arial */

p {font-family:Verdana,"Times New Roman",Arial;}

/*Если на компьютере пользователя нет шрифта Verdana, то будет использован Arial, если на компьютере нет Arial, то будет использоваться один из шрифтов семейства Sans-Serif имеющихся на компьютере */

p {font-family:Verdana,Arial,sans-serif;}

p.fz1 {font-size:20px;}

p.fz2 {font-size:30px;}

p.fz3 {font-size:13px;}

p.fz1 {font-size:1.2em;}

p.fz2 {font-size:1.5em;}

p.fz3 {font-size:1.15em;}

p.italic {font-style:italic;}

p.fz1 {font-weight:bold;}

Задание 20. Создать страницу с правилами, по которым каждый из приведенных ниже абзацев получит описанный в нем формат.

1. Данный абзац написан шрифтом Arial Black и имеет размер 20 пикселей.

2. Данный абзац написан курсивным шрифтом Courier New и имеет размер 24 пикселя.

3. Данный абзац написан жирным шрифтом Verdana и имеет размер 10 пикселей.

4. Данный абзац написан шрифтом Georgia и имеет размер 2.5em.

5. Данный абзац написан курсивным шрифтом Comic Sans MS и имеет размер 1.3em.

Просмотреть в браузере эту страницу. Сделать скриншот для отчета.

2019-08-13

395

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

0.00 из 5.00 0 оценок

⇐ Предыдущая 123 Следующая ⇒

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

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