Файловый архив студентов. Файловый архив студентов.
1302 вуза, 5111 предмета.
/ Регистрация
FAQ Обратная связь Вопросы и предложения
Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Луганский национальный университет им. Тараса Шевченко
Предмет:
[НЕСОРТИРОВАННОЕ]
Файл:
Практикум зі створення WEB.doc
Скачиваний:
31
Добавлен:
10.11.2019
Размер:
2.35 Mб
Скачать
☆
►Содержание►

4. Властивості кольору і фону

Для роботи з кольором і фоном у специфікації CSS1 передбачено кілька властивостей. Ці властивості дозволяють легко задавати різні кольори шрифтів, а також створювати в документі області з різними кольорами фону і фоновими зображеннями. Нижче перелічені основні властивості кольору і фону.

  • color - установлює колір шрифту;

  • background-color - задає колір фону, на якому буде виведено елемент. За замовчуванням ця властивість має значення none. Часто властивість background-color використовується спільно із властивістю color, що визначає колір тексту. Замість назви властивості background-color в аркушах стилів можна вказувати його скорочення background, наприклад, style="background: red";

  • background-image - визначає вставку фонового зображення. Значенням цієї властивості є URL адреса малюнка. Наприклад, наступне CSS-правило

.pog {background-image: URL (myfig.jpg) ;};

задає для елементів класу pog фоновий малюнок, що зберігається у файлі myfig.jpg. Якщо зображення прозоре, то через нього будуть видні нижні об'єкти сторінки. Щоб цього не відбувалося, разом із розглянутою властивістю задається колір фону;

  • background-repeat - призначає повтор фонового малюнка. Ця властивість застосовується, якщо розмір малюнка менше видимої області елемента. За замовчуванням має значення repeat - малюнок повторюється. Для повторення малюнка тільки по горизонталі вибирається значення repeat-х, тільки по вертикалі - repeat-у, а для відключення повторення - значення no-repeat.

Завдання до лабораторної роботи

Завдання 1.

Розгляньте приклад документа з використанням атрибута style.

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv=" Content-Type" content="text/html; charset= windows-1251">

</head>

<body>

<div style="font: Georgia, 'Times New Roman', Times, serif; color: #FF00FF; font-size: 18pt; background-color: #FFCCFF">

<table border="4" align="center" frame="rhs" >

<tr style="color: #00FFFF; border-color: #0000FF; font-family: Arial; font-size: 24px; font-style: oblique; background-color: #FFCC66" >

<td colspan="2" align="center">Список </td>

</tr>

<tr bordercolor="#0000CC" height="40">

<td width="50"> прізвище </td>

<td width="265">ім'я</td>

</tr>

<tr style="color: #0033FF; background-color: #00FFFF; font-size: 16px; font-style: italic" align="center">

<td>Іванов</td>

<td>Іван</td>

</tr>

</table>

<cite>Петров</cite>

</div>

<div align="center" style=" background-color: #FFFFCC; border-color: #CCFFCC; border-style: double; font: Verdana; font-size: 20px ;">

My friends<br>

</div>

</body>

</html>

Завдання 2.

Наберіть HTML-документ за допомогою кожного з редакторів, виділіть селектори типу, селектори класу, селектори id. З'ясуйте в чому різниця між використанням селекторів. Визначте область дії селекторів, де й чому не спрацювали аркуші стилів.

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv=" Content-Type" content="text/html; charset= windows-1251">

<style type="text/css">

h2 {font-size: 16pt; color: #0033FF; font-family: Geneva, Arial}

h2.curs {font-size: 18pt; font-style: italic; font-family: "Courier New", Courier, mono; color: #006699}

h2.normal {font-size: 16pt; font-style: normal; color: #FF0000}

#bgmagenta {background-color: #CC66FF; color: #FFFF00}

#fishka {background-color: #CC99FF; color: #3300FF; font-family: serif; font-size: 20pt; font-style: oblique}

#bgyellow {background-color: #FFFF00; color: #0000FF; font-family: Verdana, Arial}

div {font-family: «serif"; font-size: 15pt; background-color: #99FFFF; color: #000000; font-style: oblique}

</style>

</head>

<body bgcolor="#FFCC99">

<h2>Приємно на пари з ранку приходити</h2>

<h2 class="curs"> Приємно бачити добрі очі екзаменатора</h2>

<h2 id="bgmagenta"> Приємно зайти в деканат після сесії</h2>

<p id="bgmagenta"> Приємно не мати "хвостів", <br> бути успішним і <br id="fishka"> упевненим у завтрашньому дні</p>

<h2 class="curs"> Приємно вчасно захищати лабораторні роботи...</h2><br><br>

<div align="center"> Життя світле й безхмарне, коли тобі 20 років і попереду <p class="normal"> море надій, </p> <hr id="bgyellow" size="8">

усе тіло наповнене енергією й готове до <p id="bgmagenta"> здійснень, щастя, любові </p></div>

<h3 class="curs"> Життя повне приємних моментів</h1>

<h3 id="fishka" align="center"> Тільки варто небагато попрацювати</h3>

<hr id="bgmagenta" align="center" width="200" size="5">

<hr id="bgyellow" align="center" width="150" size="5">

<h2 id="bgyellow" align="center"> Мрії прогульника</h2>

<h2 class="normal"> Том 2. Повне зібрання студентських снів</h2>

</body>

</html>

Завдання 3.

Наберіть код, поданий нижче. Перевірте його. Змініть стилі, що використовують форматування шрифту й тексту.

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv=" Content-Type" content="text/html; charset= windows-1251">

<style type="text/css">

.font1 {font: oblique 300 small-caps x-large/150% "Courier New", Courier, mono; color: #0033FF; background: #FFCCCC ;}

#font_small {font-family: cursive; font-size: 120%; font-stretch: expanded; font-style: italic; font-weight: 600; color: #00FF00; background-color: #000066; text-align: center}

pre {font-family: fantasy; font-size: x-small; font-stretch: extra-condensed; font-style: inherit; font-weight: bolder; color: #FFFF66; background- color: #333333 ;}

.fon_text {font: sans-serif 800 150% normal; color: #000099; background- color: #CC9966; letter-spacing: 16pt; word-spacing: 16px; text-indent: 1.25cm; text-align: left; line-height: 2 ;}

#sub {font-family: serif; font-size: 14pt; letter- spacing: 5pt; vertical-align: sub ;}

#sup {font-family: serif; font-size: 14pt; letter-spacing: 5pt; vertical-align: super ;}

</style>

</head>

<body>

<div class="font1">

Деякі рекомендації із суспільного поводження в різних країнах

</div>

<p id="font_small">

Германія

</p>

<pre>

Треба називати титул кожного, з ким розмовляєте. Якщо титул невідомий, то можна звертатися так: "Herr Doctor !".

</pre>

<div class="fon_text">

Слово доктор не зарезервоване, як у нас, тільки для медиків, а вживається кожного разу при вказівці спеціальності або професії.

</div>

У ресторані <span id="sub"> привітають </span> усіх, хто знаходиться біля вас, навіть <span id="sup">незнайомих</span>, <br>

<div class="font1">вираженням "Mahlzeit», що означає приблизно "Приємного апетиту"

</div>

</body>

</html>

Завдання 4.

Створіть із запропонованого тексту HTML - документ, у якому будуть використані заголовні стилі з усіма типами селекторів і вбудовані стилі. Оформіть запропонований текст за допомогою аркушів стилів. При створенні документа використовуйте форматування блоків, тексту, шрифтів, списків, кольору й фону.

Февраль 1999

Илла

Они жили на планете Марс, в доме с хрустальными куполами, на берегу высохшего моря, и по утрам можно было видеть, как миссис К ест золотые плоды, растущие из хрустальных стен, или наводит чистоту, рассыпая пригоршнями магнитную пыль, которую горячий ветер уносил вместе с сором. Под вечер, когда древнее море было неподвижно и знойно, и винные деревья во дворе стояли в оцепенении, и старинный марсианский городок вдали весь уходил в себя, и никто не выходил на улицу, мистера К можно было видеть в своей комнате, где он читал металлическую книгу, перебирая пальцами выпуклые иероглифы, точно струны арфы. И книга пела под его рукой…

Мистер и миссис К были еще совсем не старые. У них была чистая, смуглая кожа настоящих марсиан, глаза желтые, как золотые монеты, тихие, мелодичные голоса. Прежде они любили писать картины химическим пламенем, любили плавать в каналах, …до рассвета разговаривать под голубыми светящимися портретами в комнате для бесед.

Теперь они уже не были счастливы.

Рэй Брэдбери

Марсианские хроники

Контрольні питання:

  1. Для чого служать аркуші стилів?

  2. У чому полягає різниця між зовнішніми та внутрішніми аркушами стилів?

  3. Назвіть види селекторів і призначення кожного з них.

  4. Які правила записів внутрішніх стилів?

  5. Яка область застосування аркушів стилів?

  6. Якими можуть бути значення властивостей?

  7. Назвіть основні властивості тексту?

  8. Яка властивість відповідає за міжсимвольну відстань?

  9. Яка властивість відповідає за міжрядкову відстань?

  10. Назвіть основні властивості шрифтів?

  11. У яких одиницях задаються значення властивостей?

  12. Назвіть основні властивості кольору?

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]
Помощь Обратная связь Вопросы и предложения Пользовательское соглашение Политика конфиденциальности