2.1 Xarici stil cədvəlləri
CSS (Cascading Style Sheets)-in HTML sənədinə qoşulması veb-səhifələrin dizaynını yaxşılaşdırmağa, onların görünüşünü və istifadəsini rahatlaşdırmağa imkan verir. HTML-ə CSS bağlamağın bir neçə üsulu var, hər birinin öz üstünlükləri var və müxtəlif vəziyyətlər üçün uyğundur.
CSS bağlama üsulları:
- Xarici stil cədvəlləri (External Stylesheets)
- Daxili stil cədvəlləri (Internal Stylesheets)
- Daxilən yazılmış stillər (Inline Styles)
Xarici stil cədvəlləri (External Stylesheets)
Xarici stil cədvəlləri ayrıca CSS faylları kimi təqdim olunur və bunlar HTML sənədinə <link> etiketi vasitəsilə qoşulur. Bu üsul stilləri sənədin strukturundan ayırmağa imkan verir ki, bu da stil idarəçiliyini və CSS fayllarının bir neçə səhifədə yenidən istifadəsini asanlaşdırır.
Üstünlüklər:
- Stil idarəçiliyinin rahatlığı
- Stillərin bir neçə səhifədə təkrar istifadəsi
- Keşləmə və performansın yaxşılaşdırılması
Sintaksis:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Xarici stil cədvəli nümunəsi</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
color: #666;
}
</style>
</head>
<body>
<h1>Başlıq</h1>
<p>Mətn</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Xarici stil cədvəli nümunəsi</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Başlıq</h1>
<p>Mətn</p>
</body>
</html>
CSS fayl nümunəsi(styles.css):
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
color: #666;
}
2.2 Daxili stil cədvəlləri (Internal Stylesheets)
Daxili stil cədvəlləri birbaşa HTML sənədinin içində, <head> hissəsində <style> teqi vasitəsilə yerləşdirilir. Bu üsul yalnız bir səhifəyə stil tətbiq etmək lazım olduqda və ya xarici fayl mövcud olmadıqda çox əlverişlidir.
Üstünlükləri:
- Bir səhifə üçün istifadənin sadəliyi
- Əlavə fayla ehtiyac yoxdur
Syntax:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Daxili stil cədvəli nümunəsi</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
color: #666;
}
</style>
</head>
<body>
<h1>Başlıq</h1>
<p>Mətn</p>
</body>
</html>
2.3 Daxili stil qaydaları (Inline Styles)
Daxili stil qaydaları HTML elementlərə style atributu vasitəsilə birbaşa tətbiq olunur. Bu üsul test üçün və ya tək bir elementin stilini tez dəyişmək lazım olanda faydalıdır.
Üstünlüklər:
- Stil qaydalarının tez və nöqtəvi şəkildə tətbiqi
- JavaScript vasitəsilə dinamik dəyişikliklər üçün uyğun
Əksikliklər:
- Çoxlu elementlər olduqda stil qaydalarını idarə etmək çətinləşir
- Stil qaydalarının təkrar istifadəsi çətinləşir
Syntax:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Daxili Stil Nümunəsi</title>
</head>
<body>
<h1 style="color: #333; font-family: Arial, sans-serif;">Başlıq</h1>
<p style="color: #666; background-color: #f4f4f4;">Mətn</p>
</body>
</html>
Hər bir üsulun bir səhifədə istifadə olunmasına nümunə:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Birləşdirilməsinin Bütün Üsulları</title>
<link rel="stylesheet" href="styles.css">
<style>
body {
background-color: #f4f4f4;
}
.internal {
color: #333;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1 class="internal">Başlıq</h1>
<p style="color: #666;">Bu mətn daxili stil qaydaları ilə stilizə olunub.</p>
</body>
</html>
2.4 Stil prioritetlərinin sıralaması
Stil müxtəlif yollarla qoşulduğu zaman, onların tətbiq edilməsi prioriteti aşağıdakı kimi müəyyən edilir:
- Inline Styles (Daxili stillər) ən yüksək prioritetə malikdir
- Internal Stylesheets (Daxili stil cədvəlləri) növbəti səviyyədə prioritetə malikdir
- External Stylesheets (Xarici stil cədvəlləri) ən aşağı prioritetə malikdir
Eyni element üçün eyni prioritetə malik bir neçə stil tətbiq edildiyi halda, prioritet selektorun spesifikliyinə və elan edilmə sırasına görə müəyyən olunur.
Stil prioritetinin nümunəsi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Stil prioritetinin nümunəsi</title>
<link rel="stylesheet" href="styles.css">
<style>
p {
color: blue; /* Daxili stil */
}
</style>
</head>
<body>
<p style="color: red;">Bu mətn stil prioritetinə görə qırmızı rəngdə olacaq.</p>
</body>
</html>
GO TO FULL VERSION