www.ilkaddimlar.

com Təlimçi: Rəşad Əliyev; 050 648 2737

HTML və CSS
Dərs 5
Kaskadlı Stillərin Cədvəli
(CSS)
İlk Addımlar tədris portalı rashad@aliev.info
Rəşad Əliyev 050 648 2737
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Kaskadlı Stillərin Cədvəli (CSS) :

 CSS-in əsas məqsəd və hədəfləri. Stillərin WEB-səhifəyə
əlavə edilmə üsulları
 Əsas anlayış və təyinetmələr. Stillərin dilinin qramatikası.
 Stil və klasların yaradılması. Kaskadlaşma və qruplaşma
prinsipləri
 Stillərin və klaslarının HTML sənədinin elementlərinə
tətbiq edilməsi
 CSS-in dekorasiya imkanları: Çərçivə və boşluqların
formatlaşması
 Elementin səhifədə pozisiyalanması və elementon
modelinin idarəolunması
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Təyin etmə üsulları

CSS — Cascading Style Sheets (Kaskadlı Stillərin
Cədvəli ) — HTML elementlərə müxtəlif vuzual
xassələr vermək üçün istifadə edilən bir vasitədir.

http://www.w3.org/TR/CSS21/cover.html
Rənglər palitrası

HTML sənəddə Stil cədvəllərinin təyin edilməsi

üsulları:
•Bağlanma(linking)- Xarici stil cədvəlləri
•Qoyulmuş(embeding) – Stil haqqında məlumat header-
də. STYLE elementi
•Qurulmuş(inline)- style atributu
•İmport (import) - IE
color:red; background:#cccccc
Deklarasiya xassə Qiyməti
declaration property value
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Stilin qurulması (inline)

style="color:red; background:#cccccc"

Teqin atributu Deklarasiya deklarasiya

style atributu hər hansı bir elementin

informasiyasını təyin edir
<p>Adi mətn
<p style="color:red; background:#cccccc">Bu
abzasa stil təyin edilib
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Stil haqqında başlıqda məlumat: STYLE elementi

– Qoyulma metodu (embeding)
<style type="text/css">
p {
color:red;
background:#cccccc
}
</style>
<p>Burda stil üçün qoyulma metodundan istifadə edilir.
<p>Digər abzas.
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Bağlanma metodu (linking) – Xarici stil

cədvəlləri
p {
color:red;
<link ...
background:#cccccc
href="style.css">
}
...

index.html style.css

<link ...
href="style.css">

second.html

http://www.w3.org/TR/CSS21/propidx.html
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Kaskadlaşma
<link rel="stylesheet" type="text/css" href="style.css">
<style>
div{color:green} p{color:red}
</style> div{color:red}
...
<p>Bağlanma stili tətbiq edilib
<div>Qoyulma stili tətbiq edilib</div>
<p style="color:blue">Qurulma stil tətbiq olunub
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Laboratoriya işi
 Stillərin istifadə edilməsi

1 2 HTML sənəd düzəldin

Hər sənəddə 3 müxtəlif teq(Məs: h1, div, p) yaradıb onların içində mətnlər
2 yazın

3 Bütün mətnlərə qırmızı rəng verin. Belə olsun ki gələcəkdə 1 yerdə kodu
dəyişməklə hamıda rənglər dəyişə bilsin.

4 2 HTML sənədi açıb hansısa bir teqinə xüsusi rəng tətbiq edin
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Varislik
<div style="color:green">Birinci qat
<div style="background:#cccccc">Birinci qatın içində ikinci qat
<div style="color:red">İkinci qatın içində üçüncü qat</div>
</div>
</div>
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Ölçüləri təyin edən rəqəmlər

•em - ems, elementdə istifadə edilən fontun hündürlüyü

•ex - x-height, həriflərin "х" eni

•px - pixels, piksellər

•in - inches, düymlər

•cm - centimeters, santimetrlər

•mm - millimeters, millimetrlər

•pt - points, punktlar(1pt = 1/72in = 0,35mm)

•pc - picas, piklər(1pc = 12pt)

•% - nisbi qiymətlər(məsələn +20%)

www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Rəng və URL ünvanları

•rəngin adı (red, green, white...)

•#00cc00 – 16 rəqəmli təsviri

•#0c0 – qısaldılmış 16 rəqəmli təsvir

•rgb(0,240,125) – RGB formatında

•rgb(0%,80%,25%) - RGB formasında, nisbi

url("faylın adı")
Nümunə: {background: url("file.gif")}

http://www.w3.org/TR/CSS21/colors.html#background-properties
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Element və klas tipli selektorlar

element div{color:red}
element + klas div.green{color:green}
klas .blue{color:blue}
<div>Adi div</div>
<div class="green">green klasi ilə div</div>
<p class="green">green klası ilə abzas</p>
<p class="blue">blue klası ilə abzas</p>
<div class="blue">blue klası ilə Div</div>
<h3 class="blue">blue klası ilə H3</h3>
Adi div
green klası ilə div
green klası ilə abzas
blue klası ilə abzas
blue klası ilə div
blue klası ilə H3
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Yenə selektorlardan
Qonşu selektorlar
b + i { color:red } – Qonşuluğunda b elementi varsa
b ~ i { color:red } – İstənilən sol qonşuluğunda b elementi varsa
Törəmə selektorlar
div > p { color:red } – Valideyni div olan p elementləri
(<div><p> - true; <div><strong><p>-false)
Atributun selektoru
p[align] { color:red } – Align atributu varsa
p[align="right"] { color:green } – Bərabərdir
p[align~="right"] { color:green } – Qeyd olunmuş söz tam varsa
font[face*="Arial"] { color:green } – Ümumiyyətlə o qiymət varsa
font[face^="Arial"] { color:green } – Sözlə başlayırsa
font[face$="Arial"] { color:green } Sözlə bitirsə
div[lang|="en"] { color:red }
Universal selector
*{color:black}
Komentlər
/* */

http://www.w3.org/TR/CSS21/selector.html [title=“qiymet”] { color:red;} <p title=“qiymet”>

www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Psevdoklas və psevdoelementlər
Psevdoklas
:link a:link{color:blue} Linkə aid
:visited a:visited{color:blue} Linkə aid
:active a:active{color:red}
:hover a:hover{color:green}
:focus input:focus{color:red}
:first-child p:first-child{color:blue} İlk elementləri

Psevdoelementlər
:first-line p:first-line{color:red}
:first-letter p:first-letter{color:green}
:after p:after{content:”new”} Yalnız bu
psevdoelementlərdə istifadə edilir.
:before p:before{content:”Att. ”}

http://www.w3.org/TR/CSS21/propidx.html
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Digər selektorlar
id #back{color:red}
element + id div#back{color:black}
kontekst div b{color:green}
selektorlar td td td{color:blue}

<div id="back">Div id = back</div>

<div><b>kontekst</b> selektorla olan Div</div>
<table>
<tr>
<td>
<table>
<tr>
<td>
<table>
<tr>
<td>
Qoyulmanın üçüncü mərhələsi
</td>
</tr></table></td></tr></table></td></tr>
</table>
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Selektorların qruplaşması
h1{ h1,h2,h3{
color:red; background:yellow
background:yellow }
} h1{
h2{ color:red;
color:blue; }
background:yellow h2{
} color:blue;
h3{ }
color:green; h3{
background:yellow color:green;
} }

http://www.w3.org/TR/CSS2/sample.html - CSS-in susmaya görə olan qiymətləri

www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Tekst elementlərinin tərtibatı

Ümumi ailə
Növbəti münasib şrift qarniturları mövcuddur: antikva ('serif'), qroteks('sans-serif'), kursiv('cursive'), qlleqorik
('fantasy') və monoqalın ('monospace') şriftlər

font-family: ailədən şiriftlər|şriftin tipi

font-family:Arial,Geneva,Helvetica,sans-serif;

font-size: kəmiyyət|%
qəti həcmi: xx-small, x-small, small, medium, large, x-large, xx-
large.
Nisbi həcm: larger, smaller

font-size:10px;

font-weight: normal|bold|bolder|lighter|100-900 arası rəqəm

400 = normal, 700 = bold

font-weight: bold;
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Tekst elementlərinin tərtibatı

font-style: normal|italic

font-style:italic;

font-variant: normal|small-caps

font-variant:small-caps;

font: font-style font-variant font-weigth font-size font-family

Ardıcıllıq vacibdir. Hamını buraxmaq olar, font-size və font-family-dən başqa.

font:bold 10px Arial !important;

www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Tekst elementlərinin tərtibatı

text-align: left|right|center|justify

text-align:right;

text-decoration: none|overline(|)underline(|)line-through

text-decoration:underline;

text-indent: kəmiyyət |%

text-indent:10px; //Paraqrafın birinci sətirində məsafə qoyur

text-transform: none|capitalize|uppercase|lowercase

text-transform:uppercase;
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Tekst elementlərinin tərtibatı

letter-spacing: normal| kəmiyyət

letter-spacing:10px;

word-spacing: normal| kəmiyyət

word-spacing:10px;
vertical-align: baseline|sub|super|top|text-top|middle|
bottom|text-bottom|%
vertical-align:top;
line-height: normal| kəmiyyət |%

line-height:5%; font:bold 10/12px Arial

//Xəttin hündürlüyünü təyin edir

white-space: normal|pre|nowrap

white-space:pre;
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Siyahıların tərtibatı
list-style-type: none|circle|disc|square|decimal|lower-alpha|upper-alpha|lower-
roman|upper-roman

list-style-type:square;

list-style-position: outside|inside
list-style-position:inside;
http://www.w3schools.com/cssref/pr_list-style-position.asp

list-style-image: none|url

list-style-image:url("ball.gif");

list-style: list-style-type list-style-position list-style-image

list-style:decimal inside;
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Fon və rəngin background-color:

xassələrirəng|transparent
color:rəng
background-color:#330033;
color:red;
background-attachment:fixed|scroll
background-attachment:fixed;

background-image: none|url
background-image:url("fon.gif");
background-repeat: repeat|repeat-x|repeat-y|no-repeat
background-repeat:repeat-x ;

background-position: top|bottom|center|left|right|kəmiyyət|%
background-position:top right;

background: transparent background-color background-image background-repeat

background-attachment background-position

background:#ffffff no-repeat url(fon.gif);

www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

CSS3: Qradient
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(#336666, #66cccc);
/* Safari 4+, Chrome 1+ */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#66cccc), to(#336666));
/* Safari 5.1+, Chrome 10+ */
background-image: -webkit-linear-gradient(#336666, #66cccc);
/* Opera 11.10+ */
background-image: -o-linear-gradient(#336666, #66cccc);
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Laboratoriya işi
 Stillərin istifadəsi

1 lab-5-1.html faylı brauzerdə belə göstərməlidir:

- Əsas rənglər: ağ fonda qara mətn;

- Abzaslar sağ tərəf üzrə mərkəzləşsin;

2 - Başlıqlar sağ tərəf üzrə mərkəzləşir və qırmızı qroteks(sans-

serif) fontu ilə verilsin;

- Yanakı seçilmiş mövzular yaşıl rəngdə yazılsın;

www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Boşluq və çərçivələr
top

border

padding
left Elementin right
içindəkilər

margin

bottom
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Bayırdan boşluqlar
margin-top: auto|kəmiyyət|%
margin-right: auto|kəmiyyət|%
margin-bottom: auto|kəmiyyət|%
margin-left: auto|kəmiyyət|%

margin: margin-top margin-right margin-bottom margin-left

margin:10px 20px 20px 30px;

margin:15px;
margin-left: 10px; margin-right: 5px;
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Daxildən boşluqlar
padding-top: kəmiyyət|%
padding-right: kəmiyyət|%
padding-bottom: kəmiyyət|%
padding-left: kəmiyyət|%

padding: padding-top padding-right padding-bottom padding-left

padding:10px 20px 20px 30px;

padding:15px;
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Çərçivələr
border-width: kəmiyyət|%|(thin|medium|thick)
border-color: rəng
border-style: none|dotted|dashed|solid|double|groove|ridge|inset|
outset

border-top-(width|color|style)
border-right-(width|color|style)
border-bottom-(width|color|style)
border-left-(width|color|style)

border: border-width border-style border-color

border: 1px solid black;

border-left: 3px solid black;
border-right: 1px dotted #ccc;
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Laboratoriya işi
 Stillərin istifadə edilməsi
lab-5-2.html faylını istifadə edərək stillərin qeyd edilmiş xassələrini
1 yoxlayın:

font
size
color
2 background
border
margin
padding
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Blokun parametrləri
width: kəmiyyət|%

width: 100px;

height: kəmiyyət|%

height: 100px;

float: none|left|right

float: left;

clear: none|left|right|both

clear: both;
http://www.w3.org/QA/2002/04/valid-dtd-list.html
float – oynayan bloklar
III-de; clear:left; - sagh terefde olan oynayan bloklari nezere alsin.
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Layların parametrləri
position: static|absolute|relative|fixed
position: absolute;
Burda lay
top: auto|kəmiyyət|% olmalıdır
top: 100px;

left: auto|kəmiyyət|% Lay-ın

left: 100px; faktiki
Yerləşməsi
z-index: auto|kəmiyyət|inherit
z-index:3; relative

<div style="position:absolute; top:100px; left:50px">

Bu lay absolyut pozisiyalanıb.
<div style="position:relative; top:10px; left:10px">
Bu sloy relative(nisbətən) pozisiyalanıb.
</div>
</div>
Setir elementleri uchun width, height ishlemir:
absolute olanda element blok olur.
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Kursorun xassələri
cursor: auto
 crosshair
 default
 pointer
 move
 text
 wait
 e-resize, ne-resize, nw-resize,
n-resize, se-resize, sw-resize,
s-resize, w-resize
 url("şəkil")
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Laboratoriya işi
 Stillərin istifadəsi

lab-5-3.html faylını istifadə etməklə, aşağıda qeyd edilmiş 3

1 ölçülü başlığı düzəldin
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Layoutlar
 <header> <footer>
 <nav> - Naviqasiya
 <article> - Ümuimi artikl barədə məlumat
 <section> - Müxtəlif seksiyalar varsa
 <aside> - Sectionları birləşdirmək
 <hgroup> - h1, h2 və s
 <figure> <figcaption> - img, kod nümunəsi və s.
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Nəticə
 Stillərin köməkliyi ilə biz HTML sənədin tərtibatını ayırmaq
imkanı əldə edirik
 HTML sənəddə cədvəl stilləri Bağlanma(linking),
Qoyulma(embeding) və Qurulmuş(inline) metodlarla təyin
edilir
 Təyin eidlmiş stil selektora teq, class və identifikator kimi
bənd olunur
 Stilləri qruplara bölmək olar: Mətn elementlərininin tərtibatı,
rənglər və fon, boşluq və çərçivələr, blokların parametrləri,
laylar və s üçün.