Варна - 2006

Съдържание:

HTML - Въведение
HEAD
BODY - фон, текст, цветове на връзките
FONT - работа с текстове
Форматиране на параграфи
Цветове
Хипервръзки
IMG - Изображения
Таблици
Списъци
Формуляри
Линии
Фреймове
Музикален фон

 

Упражнение за CSS:

а) Създайте с Notepad или Dreamweaver документ с име cssexam.htm и следния код:

<html>
<head>

</head>

<body>
<h1>This is header 1</h1>
<hr>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
<hr>
<h2>This is header 2, followed by a table</h2>
<table border="1" width="100%">
<tr>
<th align="left">First Name</th>
<th align="left">Name</th>
<th align="left">Telephone</th>
<th align="left">Fax</th>
</tr>
<tr>
<td width="25%">Hege</td>
<td width="25%">Svendson</td>
<td width="25%">555-777-0001</td>
<td width="25%">555-777-0000</td>
</tr>
<tr>
<td width="25%">Kai Jim</td>
<td width="25%">Svendson</td>
<td width="25%">555-777-0002</td>
<td width="25%">&nbsp;</td>
</tr>
</table>
<br>
<hr>
<h3>This is header 3, followed by two lists</h3>
<ol>
<li><a href="http://www.w3schools.com">Home Page</a></li>
<li><a href="lastpage.htm">Last Page</a></li>
</ol>
<ul>
<li>Tea</li>
<li>Mild</li>
<li>Coffee</li>
<li>Milk</li>
</ul>

</body>

б) Създайте с Notepad или Dreamweaver документ с име style1.css и следния код:

h1,h2,h3 { font-family: verdana, arial, 'sans serif'; }
p,table,li { font-family: verdana, arial, 'sans serif'; margin-left: 10pt; }
ul { list-style: disc; }
ol { list-style: decimal; }
p,li,th,td { font-size: 75%; }
body { background-color: #ffffff; }
h1,h2,h3,hr { color:black; }
a:link {color:black}
a:visited {color:black}
a:active {color:mediumblue}
a:hover {color:mediumblue}

Запазете файла в същата папка, в която е cssexam.htm.

в) Добавете в заглавната част (между таговете <head> и </head>) на файла cssexam.htm таг за вмъкване на стил от външен файл, т. е.

<link rel="stylesheet" type="text/css" href="style1.css">

г) По аналогичен начин създайте още 3 css-файла style2.css, style3.css и style4.css със следните кодове и проверете какво ще се получи като замените style1 от горното упражнение с тях.:

style2.css

p,table,li,h1,h2,h3 { font-family: verdana, arial, 'sans serif'; }
p, h1, h2, h3, table, li, hr { margin-left: 10pt; }
p,li,th,td { font-size: 75%; }
body { #ffffff; }
h1,h2,h3,hr { color: firebrick; }
a:link {COLOR: firebrick;}
a:visited {COLOR: firebrick;}
a:active {COLOR: navy;}
a:hover {COLOR: navy;}
a.content:link {COLOR: seashell;}
a.content:visited {COLOR: seashell;}
a.content:active {COLOR: seashell;}
a.content:hover {COLOR: papayawhip;}

style3.css

h1,h2,h3 { font-family: arial, 'sans serif'; }
p,table,li,address { font-family: arial, 'sans serif'; margin-left: 15pt; }
p,li,th,td { font-size: 80%; }
th {background-color:#FAEBD7}
body { background-color: #ffffff; }
h1,h2,h3,hr { color:saddlebrown; }
a:link {color:darkred}
a:visited {color:darkred}
a:active {color:red}
a:hover {color:red}

style4.css

h1,h2,h3 { font-family: "comic sans ms", arial, 'sans serif'; }
p,table,li,address { font-family: "comic sans ms", arial, 'sans serif'; margin-left: 10pt; }
p,li,th,td { font-size: 75%; }
h1,h2,h3,hr { color:saddlebrown; }
a:link { color:saddlebrown }
a:visited { color:saddlebrown }
a:active { color:red }
a:hover { color:red }
body { background-color: #EFE7D6; }
JDJ © 2006 Всички права запазени.