Yaradın css faylı html kimi asandır. Sadəcə hər hansı birinə gedin mətn redaktoru məsələn, Notepad və orada fayl yaradın css uzantısı. Gəlin ona verək standart ad - style.css.

Təbrik edirik! Faylınız hazırdır. Hələlik boşdur, lakin sonradan müvafiq məzmunla doldurula bilər. Aşağıda əsaslara baxacağıq - css-ə qoşulma yolları.

Xarici üslub vərəqləri

Bəlkə də xarici CSS- bu ən düzgün və optimal həll sayt üçün. Səhifədə qeyd etməyiniz kifayətdir link etiketi(digər faylları daxil etmək üçün yaradılmışdır) üslub cədvəlinə keçid və üslublar birləşdirilir!

Diqqət

Link teqi olan sətir style.css-nin bu fayl ilə eyni kataloqda (qovluqda) olduğunu nəzərdə tutur.

Link teqi olan sətir, style.css-in bizim faylımızla (məsələn, index.html) eyni kataloqda (qovluqda) olduğunu nəzərdə tutur. Əgər css faylının yeri dəyişibsə, o zaman href atributu müvafiq olaraq dəyişdirilməlidir. Məsələn, tez-tez CSS yaratmaq üçün istifadə olunur ayrı qovluq(rahat və məntiqlidir). Lakin sonra href atributu fərqli görünəcək:

Daxili üslub vərəqləri

Bəzən birbaşa daxil edilmiş başqa bir css konstruksiyasını görə bilərsiniz html etiketi

Mətn mavi rəngdə, ölçüsü 14 piksel

Üstünlüyü ondan ibarətdir ki, eyni faylda üslubları dərhal təyin edə bilərsiniz. Əhəmiyyətli bir çatışmazlıq, göstərilən xüsusiyyətlərin yalnız təyin ediləcəyidir xüsusi element, V bu halda paraqraf. Beləliklə, bütün faydalar uzaqdan əlaqə xassələri itirilir.

Daxili üslub vərəqləri

Daha asan bir yol var CSS əlavələri. Ayrı bir CSS faylı yaratmaq istəmirsinizsə, ancaq bir neçə xüsusiyyətdən istifadə etməlisinizsə, bu seçim uyğundur. Dərhal bir nümunə ilə başlayaq

Birinci səviyyəli başlıq

İkinci səviyyəli başlıq, mavi

Üçüncü səviyyəli başlıq

Nümunədən görə bilərsiniz ki, biz üslubları bağlanmadan əvvəl yazmışıq baş etiketi açılış və bağlama etiketlərinin içərisində üslub. Əslində etiketləyin üslub da yazmaq olar bədən, ancaq yazılarınızın strukturlaşdırılmış görünməsini və sizdən sonra bu kodu görən adamın başını tutmamasını istəyirsinizsə, üslubları bir yerə yazmaq daha yaxşıdır.

Daxili üslub cədvəlinin dezavantajı da göz qabağındadır - bu cür girişlər hər bir səhifə üçün ayrıca aparılmalıdır.

“Connecting CSS” seriyasındakı üçüncü məqaləyə həsr edilmişdir xarici üslub vərəqləri. Xarici cədvəllərdən istifadə ən çevik, güclü, rahat və Doğru yol HTML və .

Metodun mahiyyəti ondan ibarətdir ki, CSS ayrıca faylda (və ya fayllarda) yerləşdirilir. Və HTML ona hansı CSS fayllarının tətbiq edilməsi lazım olduğunu müəyyənləşdirir.

Xarici cədvəlin təqdimatı

Xarici üslub cədvəli css uzantısı olan adi mətn faylıdır. Ümumiyyətlə, bu genişləndirmə tələb olunmur, lakin bəzi köhnə brauzerlərdə problemlərin qarşısını almaq üçün tövsiyə olunur.

Stil cədvəli faylında yalnız qaydalar və CSS şərhləri. Xarici üslub cədvəlində HTML işarələməsinin olması, məsələn, bəzi hissələrin və ya bütün üslub cədvəlinin nəzərə alınmamasına səbəb ola bilər.

Xarici üslub vərəqləri üçün keçid etiketi

Etiket xarici CSS-i daxil etmək üçün istifadə olunur.

Link etiketi ilə tanış olun:

• xarici sənədlərlə, əksər hallarda üslub vərəqləri ilə əlaqə qurur;
• bölməsində yerləşməlidir;
• Bir sənəddə bir neçə link teq ola bilər.

CSS bağlantısı nümunələri

Tipik olaraq, üç atribut istifadə olunur:

• — münasibətlərin qurulmasına cavabdehdir və bu halda “üslub cədvəli” mənasını daşıyır;
• — Qoşulmuş obyektin MIME növü. Bizim üçün bu, üslub cədvəlidir - bu, növün “text/сss” olması deməkdir;
• - mütləq və ya nisbi yol CSS faylının özünə.

Ekran qurğusundan asılı olaraq fərdi CSS-ni də qoşmaq mümkündür. Bunun üçün media atributundan istifadə olunur. Onun mənaları haqqında ətraflı məlumatı burada tapa bilərsiniz.

Bağlantı nümunəsi əlavə masaçap cihazları üçün üslublar:

Misal CSS əlaqələri istifadə edərək (ie6.css yalnız səhifəyə IE6 kimi müəyyən edilmiş brauzer vasitəsilə baxıldıqda daxil ediləcək):

Xarici CSS-in üstünlükləri

Bütün qaydaların aydın şəkildə qruplaşdırıldığına əlavə olaraq ayrı fayl və onları tapmaq və lazım gəldikdə redaktə etmək asandır, xarici cədvəllər ilə müqayisədə bir sıra əhəmiyyətli üstünlüklərə malikdir. Misal üçün:

1. Eyni CSS faylı istədiyiniz qədər HTML səhifəsinə “xidmət” verə bilər. HTML miqdarı azalacaq, saytın bütün səhifələrində ümumi dəyişikliklər etmək çox asan olacaq.
2. Siz qaydaları məntiqi bloklara ayıra bilərsiniz (ümumi üslublar, saytın xüsusi bölmələri üçün üslublar), onları bir neçə fərqli CSS faylında yerləşdirə və fərdi səhifələr, yalnız sizə lazım olanları birləşdirin. Sadəcə unutmayın ki, bu iki tərəfli qılıncdır - bir tərəfdən alırıq daha kiçik ölçü bağlı CSS ( lazımsız fayllarüslublar yüklənmir), digər tərəfdən üslublu daha kiçik fayllar serverə daha çox zəng deməkdir, bu, əlbəttə ki, performansa çox yaxşı təsir göstərməyəcəkdir.
3. Siz xüsusi brauzerlər üçün üslubları seçə və istifadə edərək onları birləşdirə bilərsiniz şərti şərhlər. Bu, xüsusilə inadkar brauzerləri ram etmək üçün istifadə olunur. Düzdür, şərti şərhlərdən istifadə edərək, iç içə bir masa da birləşdirə bilərsiniz, lakin belə bir dizayn həqiqətən çətin görünəcəkdir.

Xülasə

Xarici üslub vərəqlərindən istifadə HTML və CSS-ni birləşdirməyin ən rahat və ağıllı yoludur. Ümid edirəm nəticə aydındır. Həqiqi layihələrdə xarici stil cədvəllərindən istifadə edin.

Kursumuzda biz CSS dərslərini əhatə edəcəyik - yəni. texnologiya dərsləri, veb səhifə tərtibatında ən vacib dərslərdən biridir.

Bu dərsdə biz veb səhifəmizi elə dizayn edəcəyik ki, o, daha rəngarəng olsun (Şəkil 1).

Şəkil 1

Səhifə dizaynına keçməzdən əvvəl vebdə rəngin necə qurulduğunu öyrənək.

1. Rənglərin tərifi. CSS Dərsləri

HTML sənədi üçün rəngləri təyin edərkən siz ya rənglərin adlarından, ya da onların adlarından istifadə edə bilərsiniz hexadecimal kodlar. Hexadecimal kodlaşdırma sistemi üç komponentə əsaslanır - qırmızı (Qırmızı), yaşıl (Yaşıl) və mavi (Mavi), buna görə də onun adı RGB, bu rənglərin adlarının ilk hərflərindən sonra. Komponentlərin hər biri uyğun gəlir hexadecimal ədəd 00 - FF (0 və 255 V onluq sistemi hesablama). Bu üç dəyər daha sonra bənövşəyi rəngə uyğun gələn # 800080 kimi bir dəyərə birləşdirilir.

Cədvəldə bəzi rənglərin adları və onların kodları göstərilir. Daha çox tam masalar rənglərə və onların kodlarına qovluqda baxmaq olar rənglər qovluğunda yerləşir CD.

Rəng		Rəng
Qara		Gümüş
Maroon (tünd tünd qırmızı)		Qırmızı
Yaşıl		Əhəng (əhəng)
Zeytun		Sarı
Dəniz (tünd göy)		Mavi
Bənövşəyi		Fuchia (fuşya)
Mavi (tünd yaşıl)
Boz		Ağ

Cədvəl təhlükəsiz rənglər vebsayt dizaynının inkişafı üçün

Təhlükəsiz rəng palitrası müxtəlif monitorlarda ən dəqiq ekranı təmin edir.

Təhlükəsiz palitrası 216 rəngdən ibarətdir. Təhlükəsiz rənglər bir brauzerdən digərinə və ya bir platformadan digərinə, müxtəlif rəngli ekran imkanları və ayırdetmə qabiliyyəti ilə bir monitordan digərinə həmişə dəyişməz.

Üçündən hər hansı biri varsa hexadecimal dəyərlər 00, 33, 66, 99, SS və ya FF-dən fərqli, onda rəng təhlükəsiz deyil.

Təhlükəsiz rənglər cədvəlinə qovluqda baxmaq olar CD/ rənglər.

2. CSS Tərifi

Veb səhifəmiz hələ iki yolla edilə bilən dizayna malik deyil:

• birinci - vasitə ilə üslub vərəqləri CSS (daha mütərəqqi və düzgün üsul),
• ikincisi - vasitələrlə etiket atributları HTML .

Dərhal daha mütərəqqi bir üsulla başlayaq.

CSS - Cascading Style Sheets(iyerarxik üslub spesifikasiyası və ya kaskad üslub cədvəlləri) işarələmə dilini əvəz etmir, onlar HTML teqinə tətbiq olunan müstəqil texnologiyadır.

Məqsəd: avtomatik dəyişməyə imkan verir HTML üslubu saytın bütün səhifələrində element. Məsələn, biz on veb-səhifədə H1 başlığından istifadə edirik ki, bu da yaşıl olmalıdır. Stil vərəqlərindən istifadə edərkən yaşıl rəngi yalnız bir dəfə təyin etməliyik və o, eyni anda on səhifəyə tətbiq olunacaq.

Əks vəziyyət: istifadə edirik HTML atributları on veb səhifədəki bütün H1 başlıqlarını yaşıl rəngə qoyun, yəni. on dəfə təyin olundu. Sonra başlıq rəngini qırmızıya dəyişməyə qərar verdik, sonra yaşıl rəngi on dəfə qırmızıya düzəltməli olacağıq.

Stil cədvəlindən istifadə edərkən biz bunu yalnız bir dəfə etməliyik, üslub cədvəlinin özündə başlıq rəngini yaşıldan qırmızıya dəyişdirək və o, bütün on veb səhifədə avtomatik olaraq dəyişəcək.

Stil cədvəlinə strukturu HTML elementinin strukturundan fərqli olan CSS elementləri dəsti daxildir.

SintaksisCSS-element

seçici (xüsusiyyət 1: dəyər; xüsusiyyət 2: dəyər; ... xüsusiyyət N: dəyər)

Seçici adı əvvəlcə yazılır, məsələn, h1, bu o deməkdir ki, bütün stil xassələri etiketə tətbiq olunacaq

, sonra üslub xassəsinin yazıldığı qıvrımlı mötərizələr var və onun dəyəri iki nöqtədən sonra göstərilir. Dəyərləri olan üslub xassələri nöqtəli vergüllə ayrılır; sonunda bu simvol buraxıla bilər.

İstədiyiniz qədər üslub xüsusiyyətləri ola bilər, onların ardıcıllığı fərq etmir;

CSS hərflərə həssas deyil, sətir sonu, boşluq və ya tab simvolları, buna görə də qeydin forması tərtibatçının istəyindən asılıdır.

Misal üçün:

h1 (şrift ailəsi:Arial; şrift ölçüsü:14pt)

və ya eyni şeyi belə yazmaq olar:

font-family:Arial;

şrift ölçüsü: 14 pt

Bu misalda:

• h1 - seçici, bu halda HTML elementi,
• font-family və font-size - üslub xüsusiyyətləri,
• Arial - font-ailə mülkiyyətinin dəyəri,
• 14pt şrift ölçüsü xüsusiyyətinin dəyəridir.

Stil cədvəllərini HTML sənədinə daxil etməyin yolları

1. Xarici üslub cədvəli (əlaqəli üslub).
2. Daxili üslub cədvəli (qlobal üslub).
3. Daxili üslublar.

3. Xarici CSS Stil Vərəqi (Əlaqəli Üslub)

Bütün saytın üslubunu müəyyən edir.

edir mətn faylı css uzantısı ilə.

IN bu misalda Stil cədvəli style.css mətn faylında yazılmışdır.

Təcrübə 1

1. Notepad++ proqramında boş sənəd açın və onu qovluqda saxlayın public_html adı altında üslub. css. Nəzərə alın ki, sahədə Fayl növü tapıldı Bütün növlər(Şəkil 2).

Şəkil 2

2. CSS fərqli bir texnologiya olduğundan .css faylında ümumiyyətlə HTML teqləri yazılmır. Faylda “Memarlıq layihələrinin kataloqu” başlığımızı formatlayaq əsas. html orta düzülmə ilə, mavi rəng, Verdana şrifti, şriftin hündürlüyü 20 pt. Bunu etmək üçün css faylında edəcəyik növbəti giriş(Şəkil 3):

Şəkil 3

CSS dərslərimizdə gəlin bu dərslikdə əvvəllər danışdığımız CSS element sintaksisinə uyğun olaraq burada nə yazıldığını anlayaq.

• h1 seçicidir, yəni. html elementiüslubun tətbiq olunduğu;
• mətnin düzülməsi:mərkəz; - üslub mətn hizalama xüsusiyyəti(mətni hizalayır) dəyər mərkəzi ilə (mərkəz);
• rəng:#0000FF; - stil xassə rəngi (mətn rəngi) mavi rəng dəyəri #0000FF (dəyər rəng cədvəlindən götürülmüşdür);
• font-family:Verdana; - Verdana dəyəri ilə şrift-ailə şrift şriftinin stil xüsusiyyəti;
• dəyərləri olan üslub xassələri nöqtəli vergüllə ayrılır;
• və s, hamısı sintaksisə uyğun olaraq.

Veb səhifəmizin stil cədvəlinə “görməsi” və html elementlərinə xassələri tətbiq etməsi üçün fayl arasında əlaqə yaratmaq lazımdır. əsas. html Və üslub. css. Bunun üçün main.html faylını və teqlər arasında açın < baş> Və baş> dizayn daxil edin , NecəŞəkil 4-də.

Şəkil 4

3. Nəticəyə brauzerdə baxın. Şəkil 5-ə uyğun olmalıdır.

Şəkil 5

Bu CSS dərsində stil xassələrinin adlarını və onların dəyərlərini haradan əldə edəcəyimizə baxacağıq? Bunun üçün xüsusi istinad kitabları və spesifikasiyalar da var (qovluq CSS Referansı). Başlamaq üçün bu kiçik istinad kitabını istinad kimi istifadə edin. Sprav_CSS.doc.

4. “Gələcək eviniz üçün layihələr” h2 başlığı üçün üslubu düzgün düzülmə ilə təyin edin, tünd qırmızı rəng, Verdana şrifti, şriftin hündürlüyü 16 pt. Bunu faylda etmək üçün üslub. css h2 (Şəkil 6).

Şəkil 6

5. Nəticəni brauzerdə yoxlayın, Şəkil 7-yə uyğun olmalıdır.

Şəkil 7

6. Paraqraflar əsaslandırılacaq, tünd göy, Arial şrift, şriftin hündürlüyü 12 pt. Bunu faylda etmək üçün üslub. css selektor üçün aşağıdakı girişi edək səh(Şəkil 8).

Şəkil 8

7. Həmçinin bütün veb səhifənin fonunu açıq göy rəngə çevirəcəyik. Seçici üçün bunu etmək üçün bədən rekord əlavə edin (Şəkil 9)

Şəkil 9

8. Nəticəyə brauzerdə baxın. Şəkil 10-a uyğun olmalıdır.

Şəkil 10

məncə dan bu dərs CSS, xarici stil cədvəlindən istifadə prinsipi aydındır. Asanlıqla və rəngarəng dizayn etmək üçün veb-səhifələr, istinad kitabında üslub xüsusiyyətlərini və onların mənalarını öyrənmək və onları praktikada sınamaq lazımdır. Bir arayış kitabına müraciət etmədən bu cür xassələri və mənaları nə qədər çox xatırlasanız, peşəkarlığınız bir o qədər yüksəkdir.

Tədqiqat tapşırıqları

1. Kataloqdan istifadə etməklə Sprav_CSS.doc, başlığı üslub edin < h3> main.html faylında. Seçmək üçün stil xüsusiyyətləri.
2. "Ev Layihələri" siyahısı üçün üslublardan istifadə edərək ərəb rəqəmlərini Roma rəqəmlərinə dəyişin. Digər parametrlər isteğe bağlıdır.
3. "Ev sahəsi" siyahısı üçün marker kimi bir şəkil istifadə edin spisok_1.gif qovluqdan html_css_2. Digər parametrlər isteğe bağlıdır.
4. Şəkli üslublar vasitəsilə veb səhifənin fonu kimi tətbiq edin fon9.jpg qovluqdan html_css_2.
5. Abzas şriftlərini qalın etmək üçün üslublardan istifadə edin.

Nümunə bir nəticə Şəkil 11-də göstərilmişdir.

Şəkil 11

4. Stil spesifikasiyalarında siniflər

CSS təlimatımızda biz bir element üçün birdən çox üslub müəyyən etmək lazım olduqda istifadə olunan üslub spesifikasiyalarında siniflərə baxacağıq. Bir sinif təyin edərkən istədiyiniz etiketə nöqtə ilə ayrılmış ixtiyari unikal sinif adı əlavə edilir.

Məsələn, mətndə bir neçə başlıq var h1 və onların müxtəlif rənglərdə olması lazımdır. Sonra üslubları aşağıdakı kimi ayırmalısınız:

h1.golub(rəng:mavi)

h1.krasn(rəng:qırmızı)

h1.yaşıl(rəng:yaşıl)

Nöqtədən sonra adı gedir unikal olmalıdır və yalnız rəqəmlərdən ibarət olmayan sinif.

İndi etiketdən istifadə edərkən < h1> atribut sənəddə müəyyən edilməlidir sinif hansı üslubun tətbiq olunacağını müəyyən etmək üçün:

< h1 sinif=" golub"> Bu mavi başlıqdır h1>

< h1 sinif=" krasn"> Bu qırmızı başlıqdır h1>

< h1 sinif=" yaşıl"> Bu yaşıl başlıqdır h1>

Təcrübə 2

1. Faylı açın şablon. html. Yeni adla yadda saxlayın kvadrat. html qovluğunda public_html.

2. Teqlər arasında yazın yeni başlıq "Ev sahələri".

3. Məzmuna fayldan mətni kopyalayın Ev sahələri.txt qovluqdan html_ ccs_2 .

4. Eyni faylda üslubları yazacağıq üslub. css, əvvəlki dərsdə yaratdığımız. Buna görə də faylda kvadrat. html teqlər arasına daxil etməklə bu üslub cədvəlinə keçid edin Və(Şəkil 12)

Şəkil 12

5. Başlıqları etiketlə formatlayın

və hər başlığa öz sinfini təyin edin (Şəkil 13).

Şəkil 13

Sizin faylınız kvadrat. html indi belə görünməlidir (Şəkil 14).

Şəkil 14

6. Stil cədvəlində üslub. css aşağıdakı girişi yaradın (Şəkil 15)

Şəkil 15

7. Brauzerinizdə veb səhifəni yoxlayın. Nəticə Şəkil 16-dadır.

Şəkil 16

8. Yəqin ki, siz bunu bizdə müşahidə etmisiniz yeni giriş Başlıq üslubları təkrarlanan dizaynlara malikdir font-family:Verdana; mətni düzün: sola; şrift ölçüsü: 14pt. Belə konstruksiyalar tətbiq olunduğu seçiciləri qruplaşdırmaqla bir dəfə yazıla bilər. Bunu etmək üçün vergüllə ayrılmış seçiciləri, sonra isə daxil etməlisiniz buruq mötərizələr qeydiyyatdan keçin ümumi xassələri. Sonra başlıqlar üçün üslub cədvəlimiz belə görünəcək (Şəkil 17):

Şəkil 17

Təcrübə 3

Fayldakı hər başlığın altında kvadrat. html mətn var. Müxtəlif siniflərdən istifadə edərək paraqrafları formatlayın. Fərqli rənglər, düzülmə və şrift şriftlərindən istifadə edin. Sinif adları unikal olmalıdır. Fərqli seçicilər üçün eyni adlardan istifadə etmək məsləhət görülmür. Biri mümkün variantlarŞəkil 18-də:

Şəkil 18

5. Xüsusi element üçün ID stili

CSS dərslərinə id üslubları haqqında öyrənmə daxildir.

İstənilən elementə identifikator təyin edilə bilər id, və sonra istifadə edərək bu elementə bəzi üslub təyin edin id.

Misal üçün:

Stil cədvəli faylındakı giriş aşağıdakı kimi olacaq

# test { rəng:#00 ffff}

İndi bu üslubu html sənədindəki istənilən elementə uyğunlaşdıra bilərsiniz:

...

...

Bu nümunədə test sözü üslubun adıdır. Adı hər hansı bir şey ola bilər Latın hərfləri, lakin unikal olmalıdır, yəni. stil cədvəlindəki heç bir element artıq bu ada malik olmamalıdır.

Təcrübə 4

Gəlin saytımızın gələcək menyusu üçün şablon hazırlayaq.

1. Faylı açın şablon. html və onu yeni adla yadda saxlayın menyu. html qovluğunda public_html.

2. Fayl səhifəsinin məzmununa menyu. html fayldan mətn daxil edin menyu. mətn qovluqdan html_ css_2 .

3. HTML teqlərindən istifadə edərək faylı aşağıdakı kimi formatlaşdırın:

• "Layihə kateqoriyaları", "Memarlıq layihələrinin kataloqu" və "Ev sahələri" başlıqları üçün etiketdən istifadə edin

  ;

• "Layihə Kateqoriyaları" siyahısı üçün nömrələnmiş siyahıdan istifadə edin
  ;
  1. “Memarlıq layihələrinin kataloqu” və “Ev sahəsi” siyahıları üçün istifadə edin markerli siyahı

     4. Veb səhifənin yuxarı hissəsində loqo daxil edin (fayl logo_myhouse.gif). Nəticə Şəkil 19-a uyğun olmalıdır.

     

     Şəkil 19

     5. Bu menyu üçün adı altında ayrıca stil cədvəli hazırlayacağıq üslub_ menyu. css. Faylı əlaqələndirin menyu. html və stil cədvəli üslub_ menyu. css giriş daxil etməklə etiketlər arasında Və faylda menyu. html.

     6. Boş sənəd yaradın və adı altında saxlayın üslub_ menyu.css qovluğunuzda.

     7. Başlıq və nömrələnmiş siyahıdan ibarət “Layihə Kateqoriyaları” qrupu və başlığın özü və markerlə işarələnmiş siyahıdan ibarət “Memarlıq Layihələri Kataloqu” qrupu üçün biz id üslubunun adından istifadə edəcəyik. mavi. Bunlar. kod belə görünəcək (Şəkil 20):

     

     Şəkil 20

     8. Faylda üslub_ menyu. css Bu elementlərin üslubu Tahoma şriftində tünd mavi olacaq (Şəkil 21):

     Şəkil 21

     9. Başlıq və markerli siyahıdan ibarət “Ev Sahələri” qrupu üçün biz id stilinin adından istifadə edəcəyik. qəhvəyi. Bunlar. kod belə görünəcək (Şəkil 22):

     

     Şəkil 22

     10. Faylda üslub_ menyu. css gəlin bu elementləri tərtib edək Qəhvəyi, Times şriftində (Şəkil 23):

     Şəkil 23

     11. Və menu.html faylına başqa fon rəngi əlavə edin (Şəkil 24)

     Şəkil 24

     12. Nəticədə aşağıdakı veb səhifəni alırıq (Şəkil 25)

     

     Şəkil 25

     Bu CSS təlimatını tamamlamaq nəticəsində sizdə aşağıdakı fayllar yaradılmalıdır:

     • üslub. css
       
     • üslub_ menyu. css
     • kvadrat. html
       
     • menyu. html
       

     Veb səhifəyə öz imkanları və məqsədi ilə fərqlənən üslublar əlavə etməyin bir neçə yolu var. Gəlin daha sonra onlara daha ətraflı baxaq.

     Xarici üslub cədvəli

     Üslublar css uzantısı olan ayrı bir faylda yerləşir, element HTML sənədini CSS faylı ilə əlaqələndirmək üçün istifadə olunur . İçəridə yerləşir , nümunə 1-də göstərildiyi kimi.

     Misal 1. Xarici üslubların birləşdirilməsi

     Başlıq

     
     
     

     rel atributunun dəyəri həmişə üslub cədvəli olacaq və dəyişməz olaraq qalır. href dəyəri CSS faylına gedən yoldur; yol nisbi və ya mütləq müəyyən edilə bilər. Qeyd edək ki, bu yolla başqa bir saytda yerləşən stil cədvəlini birləşdirə bilərsiniz. Yuxarıdakı nümunədə kiril şrifti Lobster-i veb saytından bağlayırıq Google Şriftləri.

     style.css faylının məzmunu Nümunə 2-də göstərilmişdir.

     Misal 2: style.css faylının məzmunu

     H1 (şrift ailəsi: "Lobster", kursiv; rəng: yaşıl; )

     Bu nümunədən göründüyü kimi, üslub faylı adi mətn faylıdır və yalnız CSS sintaksisini ehtiva edir. Öz növbəsində, HTML sənədi bu şəkildə fayla yalnız bir göstərici ehtiva edir, kod və sayt dizaynının ayrılması prinsipi tam şəkildə həyata keçirilir. Buna görə də, xarici üslub cədvəlindən istifadə sayta üslub əlavə etməyin ən çox yönlü və rahat üsuludur. Bu, müstəqil redaktə etməyə imkan verir HTML faylları və CSS.

     Daxili üslub cədvəli

     Üslublar HTML sənədinin özündə, elementin içərisində yazılır.

     Başlıq

     
     
     

     Bu nümunədə element üslubu təyin edilmişdir

     , daha sonra verilmiş veb-səhifədə istifadə oluna bilər (Şəkil 1). Nəzərə alın ki, biz təhlükəsiz birləşdirə bilərik ilə

     Başlıq 1

     Başlıq 2

     
     
     

     Bu misalda, birinci başlıq qırmızı rəngə və stil atributundan istifadə edərək ölçüsü 36 pikselə, ikinci başlıq isə qırmızıya təyin edilmişdir. yaşıl rəng element vasitəsilə

     Başlıq 1

     Başlıq 2

     
     
     

     Bu nümunə Kiril şrift Lobster-i birləşdirmək üçün Google Şriftlər veb saytından stil faylının idxalını göstərir.

     Cədvəl CSS üslubları, tərifin özünü götürsək, bu təsvir dilidir görünüş sənəd. Yəni HTML səhifənin strukturuna, CSS stil cədvəlləri isə bütün dizayna cavabdehdir. Mən burada stil cədvəlindən sərbəst istifadə etməyə imkan verəcək məlumatları tərtib etmişəm. Bunu bilməyin nə qədər zəruri olduğunu yazmayacağam, çünki bu artıq aydındır - onsuz saytı daha çox və ya daha az bir yerə gətirə bilməyəcəksiniz. normal görünüş. Əgər kimsə CSS üslublarını yenicə öyrənməyə başlayırsa, bu materiallar CSS öyrənməyə başlamaq üçün kifayət edəcəkdir.

     1. Əsas şeylər

     Ən əsaslarla başlayacağam. Mən bu saytı açanda CSS stil cədvəllərini öyrənməklə bağlı kiçik dərsliklər yazdım. Dərslər həm yeni başlayanlar, həm də biliklərini təzələmək üçün nəyisə bilənlər üçün çox uyğundur. Orada hər şey şəkillər və real nümunələrlə təqdim olunur.

     Kiçik bir sapma: veb sayt qurmaq mövzusunu öyrənməyə başlayanda demək olar ki, hər şeyi öyrəndim HTML teqləri və onlar məni çox ruhlandırmadılar. Amma CSS stil cədvəlini öyrənməyə və hər bir xassəni tətbiq etməyə çalışdıqdan sonra onu çox bəyəndim (bəyənməsəydim onu ​​yaratmazdım). Gördüm ki, sadəcə olaraq heyrətamiz şeylər edə bilərsiniz CSS istifadə edərək. Bu, öyrənmək üçün aylar çəkən proqramlaşdırma dili deyil. Stil cədvəli bir (maksimum iki) həftə ərzində mənimsənilə bilər.

     Əlbəttə ki, siz tamamilə bütün xüsusiyyətləri və onların mənalarını öyrənməyəcəksiniz və bu lazım deyil! Layihələrinizdə tətbiq etməyə və istifadə etməyə başlamağınız üçün sadəcə əsasları bilməlisiniz. bir mühüm nüans yenicə öyrəndiyiniz əmlakı DƏRHAL tətbiq etməlisiniz əsl nümunə. Qoy öz veb saytınız olsun və ya sadə HTML vebsayt - fərqi yoxdur. Əsas odur ki, bunu özünüz yazmağa və nəticəsini görməyə çalışın.

     Saytımda CSS-dən istifadə edən çoxlu nümunələr var. Onlar birlikdə 100-dən çox dərsdən ibarətdir! Ən azı əsasları bildiyiniz zaman, dərslərdən bütün nümunələri təhlükəsiz şəkildə dəyişə və tətbiq edə bilərsiniz.

     Əsaslar haqqında dərslərim kaskad üslubları CSS

     2. CSS və CSS3 fırıldaqçı vərəqləri

     Yaxşı, siz əsasları öyrəndiniz və bir neçə gündən sonra "uğur" ilə hər şeyi unutdunuz və yəqin ki, bunun sizin işiniz olmadığını və hər şeyin mürəkkəb olduğunu düşünürsünüz. Sizi bir az ruhlandırmaq istəyirəm - mən özüm hamını tanımıram CSS xüsusiyyətləri. Bəs onları internetdə izləməyimə nə mane olur?

     Düzdür, hələlik siz Yandex və ya Google-a gedəcəksiniz, sonra sizə lazım olan sorğunu yazacaqsınız. Və əgər axtarış hələ də sizə lazım olanı vermirsə. Bu şəkildə çox vaxt sərf edə bilərsiniz və hələ də həqiqətən axtardığınızı tapa bilməzsiniz.

     Xoşbəxtlikdən, yaxşı insanlar Onlar mənə bir dəfədən çox kömək edən çox faydalı fırıldaqçı vərəqlər tərtib etdilər. Hər şeyin harada olduğunu anlamaq kifayətdir və sonra lazımi xüsusiyyətləri tapmaq çətin deyil.

     CSS və CSS3 fırıldaqçı vərəqləri

     Bunlar veb-sayt dizaynını tərtib edərkən və inkişaf etdirərkən sadəcə əvəzolunmaz materiallardır. Diqqətinizi yayındırmaq və mülklərin təsviri üçün İnternetdə axtarış aparmaq üçün vaxt dəfələrlə azalır.

     Düzdür, başa düşdüyünüz kimi, nə qədər çox veb saytlar qursanız və ya dizayn etsəniz, bu alət ipucuna bir o qədər az baxmalı olacaqsınız, çünki bütün lazımi xüsusiyyətlər həmişə yaddaşda qalır. Ancaq yenə də bu fırıldaqçı vərəqlər dəstinin əlində olması artıq olmaz.

     Məktəbdəki kimidir: fırıldaqçı vərəqdən istifadə etməsəniz belə, ruhunuz hələ də onunla daha sakitdir 😆 .