Məzmun Marketinq

Kaskad üslub cədvəlləri (CSS) nədir?

Kaskad üslub cədvəllərinin necə işlədiyini tam izah etmək üçün aşağıda oxuyun. Biz proqramlarımızı səhifənin yuxarı hissəsində göstəririk ki, onları tapmaq və istifadə etmək asan olsun. Bu məqaləni e-poçt və ya lent vasitəsilə oxuyursunuzsa, üzərinə klikləyin CSS-inizi sıxın.

Əgər siz həqiqətən saytlar hazırlamırsınızsa, kaskad stil cədvəllərini tam başa düşməyə bilərsiniz (CSS). CSS, yazılmış bir sənədin görünüşünü və formatını təsvir etmək üçün istifadə olunan üslub cədvəli dilidir HTML or XML. CSS şrift, rəng, boşluq və düzən kimi müxtəlif elementlər üçün üslubları müəyyən etmək üçün istifadə edilə bilər. CSS sizə HTML sənədinizin təqdimatını onun məzmunundan ayırmağa imkan verir ki, bu da vebsaytınızın vizual üslubunu saxlamağı və yeniləməyi asanlaşdırır.

CSS dil strukturu

The selektor üslub etmək istədiyiniz HTML elementidir və əmlakdəyər həmin elementə tətbiq etmək istədiyiniz üslubları müəyyənləşdirin:

selector {
  property: value;
}

Məsələn, aşağıdakı CSS hamısını edəcək <h1> səhifədəki elementlər qırmızı rəngə və 32px şrift ölçüsünə malikdir:

CSS

h1 {
  color: red;
  font-size: 32px;
}

Buraxılış

Başlıq

Siz həmçinin elementdə unikal ID üçün CSS təyin edə bilərsiniz:

CSS

/* styles for an element with ID "intro" */
#intro {
  font-weight: bold;
  text-align: center;
}

Buraxılış

Giriş

Və ya bir neçə element arasında bir sinif tətbiq edin:

CSS

/* styles for elements with class "highlight" */
.highlight {
  background-color: yellow;
}

Buraxılış

Mən istəyirəm qeyd span etiketində bir söz.

HTML sənədinizə CSS-ni üç yolla daxil edə bilərsiniz:

  1. Inline CSS istifadə edərək style HTML elementində atribut
  2. Daxili CSS, a <style> -dəki element <head> HTML sənədinizin
  3. Xarici CSS, istifadə edərək HTML sənədinizlə əlaqələndirilmiş ayrı .css faylı <link> -dəki element <head> HTML sənədinizin

Cavab verən CSS

CSS inanılmaz dərəcədə çevikdir və elementlərin ekran rezolyusiyasına əsaslanaraq tənzimləmək üçün istifadə oluna bilər, beləliklə siz eyni HTML-ə sahib ola bilərsiniz, lakin onu yarada bilərsiniz. cavab cihazın qətnaməsinə görə:

/* media query for responsive design */
@media (max-width: 768px) {
  p {
    font-size: 14px;
  }
  #intro {
    font-size: 20px;
  }
}

CSS sıxılması

Yuxarıdakı nümunədə görə bilərsiniz ki, şərh, media sorğusu və CSS görünüşünü təşkil etmək üçün boşluqlar və sətir lentlərindən istifadə edən çoxlu üslublar var. Fayl ölçülərini və daha sonra üslubunuzu tələb etmək və göstərmək üçün lazım olan vaxtı azaltmaq üçün saytınızdakı CSS-ni kiçildmək və ya sıxmaq əla təcrübədir. Bu kiçik bir məbləğ deyil... yuxarıdakı nümunələrdən bəzilərində 50%-dən çox qənaət görə bilərsiniz.

Bir çox server konfiqurasiyaları CSS-ni tez bir zamanda avtomatik sıxışdıracaq və kiçildilmiş faylı keşləyəcək alətlər təklif edir ki, bunu əl ilə etməyə ehtiyac qalmasın.

SCSS nədir?

Sassy CSS (SCSS) CSS dilinə əlavə funksionallıq və sintaksis əlavə edən CSS preprosessorudur. Standart CSS-də mövcud olmayan dəyişənlərin, miksinlərin, funksiyaların və digər funksiyaların istifadəsinə icazə verməklə CSS imkanlarını genişləndirir.

SCSS üstünlükləri

  • Təkmilləşdirilmiş davamlılıq: Dəyişənlərin istifadəsi ilə siz dəyərləri bir yerdə saxlaya və üslub cədvəlinizdə təkrar istifadə edə bilərsiniz, beləliklə üslublarınızı saxlamaq və yeniləmək asanlaşır.
  • Daha yaxşı təşkilatlanma: Qarışıqlarla siz üslub dəstlərini qruplaşdıra və təkrar istifadə edə bilərsiniz, beləliklə üslub cədvəlinizi daha mütəşəkkil və oxunması asanlaşdırır.
  • Artırılmış funksionallıq: SCSS standart CSS-də mövcud olmayan funksiyalar, idarəetmə strukturları (məsələn, if/else) və arifmetik əməliyyatlar kimi bir çox funksiyaları ehtiva edir. Bu, daha dinamik və ifadəli üsluba imkan verir.
  • Daha yaxşı performans: SCSS faylları CSS-də tərtib edilir və bu, brauzer tərəfindən təhlil edilməli olan kodun miqdarını azaltmaqla performansı yaxşılaşdıra bilər.

SCSS çatışmazlıqları

  • Öyrənmə əyrisi: SCSS standart CSS-dən fərqli sintaksisə malikdir və siz ondan səmərəli istifadə etməzdən əvvəl bu yeni sintaksisi öyrənməlisiniz.
  • Əlavə mürəkkəblik: SCSS üslub cədvəlinizi daha mütəşəkkil və saxlanmağı asanlaşdıra bilsə də, xüsusən də yeni funksiyalar və sintaksislə tanış deyilsinizsə, kod bazanıza əlavə mürəkkəblik də daxil edə bilər.
  • Alətlər: SCSS-dən istifadə etmək üçün sizə SCSS kodunuzu CSS-ə tərcümə etmək üçün tərtibçi lazımdır. Bu, bəzi tərtibatçılar üçün giriş üçün maneə ola biləcək əlavə quraşdırma və alətlər tələb edir.

Aşağıdakı bu nümunədə SCSS kodu dəyərləri saxlamaq üçün dəyişənlərdən istifadə edir ($primary-color$font-size) üslub cədvəlində təkrar istifadə oluna bilər. Bu SCSS kodundan yaradılan CSS kodu ekvivalentdir, lakin dəyişənləri daxil etmir. Bunun əvəzinə dəyişənlərin qiymətləri birbaşa CSS-də istifadə olunur.

$primary-color: blue;
$font-size: 16px;

body {
  font-size: $font-size;
  color: $primary-color;

  h1 {
    font-size: 2em;
    color: $primary-color;
  }
}

Bu nümunədə nümayiş etdirilən SCSS-nin başqa bir xüsusiyyəti iç-içə üslublardır. SCSS kodunda, h1 üslublar içərisində yuvalanır body standart CSS-də mümkün olmayan üslublar. SCSS kodu tərtib edildikdə, daxili üslublar CSS kodunda ayrıca üslublara genişləndirilir.

Ümumilikdə, SCSS standart CSS ilə müqayisədə bir çox üstünlüklər təmin edir, lakin güzəştləri nəzərə almaq və ehtiyaclarınıza və məhdudiyyətlərinizə əsasən layihəniz üçün düzgün alət seçmək vacibdir.

Douglas Karr

Douglas Karr CMO-dur OpenINSIGHTS və təsisçisi Martech Zone. Duqlas onlarla uğurlu MarTech startapına kömək edib, Martech-in satınalmalarında və investisiyalarında 5 milyard dollardan çox dəyərində lazımi araşdırmaya kömək edib və şirkətlərə satış və marketinq strategiyalarının həyata keçirilməsində və avtomatlaşdırılmasında kömək etməyə davam edir. Duqlas beynəlxalq səviyyədə tanınan rəqəmsal transformasiya və MarTech eksperti və məruzəçisidir. Douglas həm də Dummie's guide və biznes liderliyi kitabının nəşr edilmiş müəllifidir.

əlaqəli məqalələr

Başa dön düyməsini basın
yaxın

Adblock Aşkarlandı

Martech Zone bu məzmunu heç bir ödəniş etmədən sizə təqdim edə bilir, çünki biz reklam gəlirləri, filial bağlantıları və sponsorluqlar vasitəsilə saytımızdan pul qazanırıq. Saytımıza baxarkən reklam blokerinizi silsəniz çox şad olarıq.