09.01.10 19:18 | Yazan Elviz İsmayılov | 
| 
| 
Əziz compuser istifadəçiləri mən artıq nəzərə aldım lo CSS haqqında geniş dərslər yazım. Çünki ən azından veb proqramlaşdırma zamanı saytın dizaynını daha da gözəl təsviri üçün CSS-i bilmək çox vacibdir. Bu bir növ CSS-ə giriş və eyni anda CSS-i daha geniş öyrənməyə kömək edəcəkdir. İlk dərsimizdə CSS2 vasitəsi ilə sadə menyu hazırlamağı nəzərdən keçirəcəyil.
1) İlk sadəlik üçün CSS faylını ayırmaq tələb olunur. Bunun üçün yeni fayl açırıq notepad proqramında və onu style.css adı ilə kompyuterdə yadda saxlayırıq.
2. aşağıdakı bütün kodu həmin fayla kopyalayın kodu isə aşağıda daha dəqiq nəzərdən keçirəcəyik.
.navigation {
font-family: Tahoma;
}
.navigation a:link,
.navigation a:visited,
.navigation a:hover,
.navigation a:active {
text-decoration:none;
color: #ffe98f;
background-color: #f3f3f3;
border:1px solid #333;
background-image: url(nav.gif);
padding:3px 6px;
font-size:11px;
font-weight:bold;
}
.navigation a:hover {
background-color: #003060;
background-image: url('/fon.gif');
color:#fff;
border-color:#003366;
}
.navigation span {
text-decoration:none;
background:#fff;
padding:3px 6px;
border:1px solid #333;
color:#a6a6a6;
font-size:11px;
}
Dizayn fonunu yaratmaq üçün bizə iki fon xarakteri daşıyan şəkil tələb olunacaqdır: nav.gif və fon.gif. Vacibdir ki fonları həmin qovluğa yerləşdirmək.
3) İndi stilin işləməsinə baxmaq istəyirsiz onda həmin qovluqda htmı faylı yaradırsız və həmin fayla aşağıdakı kodları kopyalamaq tələb olunur.
<html>
<head>
<link href="/style.css" rel="stylesheet" type=text/css>
</head>
<body>
<div class="navigation"><br />
<a href="/">← arxaya</a> <a href="/">1</a> <a href="/">2</a> <a href="/">3</a> <a href="/">qabağı →</a>
</div>
</body>
</html>
4) Faylı yadda saxlayıb və nəticəsinə.
İndi isə kodun təhlilinə baxaq:
font-family: Tahoma; - Səhifədə istifadə olunan çriftlər ailəsini seçirik.
text-decoration:none; - Burada hiperlinkin altından çakilən xəttdən imtina edirik
color: #ffe98f; - Hiperlink üçün rəng çaları seçirik
background-color: #f3f3f3; - Bloka rəng seçirik (Təbi ki əgər şəkil tapılmasa)
border:1px solid #333; - Sərhəd üçün qalınlıq və rəng
background-image: url('/nav.gif'); - Fon üçün şəkili
padding:3px 6px; - Sərhəd veririk
font-size:11px; - Şriftin hündürlryrnü
font-weight:bold; - Şriftə əlavə olaraq qalınlıq veririk.
Dərsi bu linkdən endirə bilərsiz. Əziz oxucular mən çox istərdim ki sizdə öz hazırladığınız menyuları forumda yerləşdirəsiz.
axırıncı dəyişikliklər (09.01.10 19:35)