Codecourse

Giriş

HTML sayt yaratmağı öyrənmək prosesində yalnız birinci mərhələdir. Stil və ya CSS-in (Cascading Style Sheets, kaskadlı stil cədvəlləri) öyrənilməsi növbəti addımdır.

Stillər veb səhifənin elementlərinin görünüşünü və vəziyyətini idarə edən parametrlər yığımıdır. Aşağıdakı şəklə baxaq:

CSS dərsləri

Bu, stillərsiz yaradılmış adi veb səhifədir. Stillərin əlavə edilməsi ilə həmin adi veb səhifə tamamilə başqa görünüşə malik olur:

CSS dərsləri

Yuxarıdakı şəkillərdən göründüyü kimi dəyişiklik hiss olunur.

Veb səhifənin HTML kodu:

<!DOCTYPE HTML>
<html>
 <head>
  <title>Lorem</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <h1>Lorem</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean finibus mauris nonmi lobortis vulputate.
Nunc eu elementum elit, vitae pharetra felis. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Integer ornare consectetur ante a hendrerit.
Donec id feugiat arcu. Vivamus ullamcorper augue feugiat augue aliquam euismod. Phasellus
lacinia ullamcorper nulla et venenatis. Pellentesque iaculis elit ante, sit amet
finibus est aliquam vitae. Sed purus eros, consequat in tincidunt non, finibus eu ante.
Aliquam id est quis felis lacinia malesuada. Nulla sed aliquam enim. In semper justo ac
mauris porttitor consectetur. Aenean lectus nulla, volutpat non viverra nec, dignissim at neque.</p> </body> </html>

Veb səhifənin HTML kodunda <link rel="stylesheet" href="style.css"> sətri vasitəsilə "style.css" adlı kənar fayl qoşulur. Style.css faylının tərkibi aşağıdakı kimidir:

body {
  font-family: Arial, Verdana,  sans-serif; /* Şrif dəsti */
  font-size: 11pt; /* Əsas şriftin ölçüsü, punktla  */
  background-color: #f0f0f0; /* Veb səhifənin arxa fon rəngi */
  color: #333; /* Əsas mətnin rəngi */ 
}

h1 {
  color: #a52a2a; /* Başlığın rəngi */
  font-size: 24pt; /* Şriftin ölçüsü */
  font-family: Georgia, Times, serif; /* Şrift dəsti */
  font-weight: normal; /* Mətnin normal şəkli */
}

p {
  text-align: justify; /* Mətnin hər iki tərəfindən bərabər düzləndirmə */
  margin-left: 60px; /* Sol tərəfdən boşluq, piksellə */
  margin-right: 10px; /* Sağ tərəfdən boşluq, piksellə */
  border-left: 1px solid #999; /* Sol xəttin parametrləri */
  border-bottom: 1px solid #999; /* Aşağı xəttin parametrləri */
  padding-left: 10px; /* Sol xəttdən mətnə kimi məsafə */
  padding-bottom: 10px; /* Aşağı xəttdən mətnə kimi məsafə  */
}

Style.css faylında <body>, <h1> və <p> teqlərin tərtibatı üzrə bütün parametrlər qeyd edilib.

HTML kodu və tərtibatının ayrılması nəticəsində veb səhifənin görünüşünü idarə etmək asanlaşır və saytın üzərində işləmək sürəti yüksəlir.

Növbəti dərsi seçib keçid düyməsinə sıxın: