CSS'yi ekleme. CSS nedir, kendi CSS stilleri ne işe yarar?

Web sitesinin güzel ve şık görünmesi için CSS dosyasıyla çalışmamız gerektiğini zaten biliyoruz. Stillerimizin uygulanabilmesi için birleştirmemiz gerekiyor HTML dosyası ve bir CSS dosyası.

Bu işlemi gerçekleştirmek için çeşitli seçenekler vardır: iç içe stil sayfalarını, harici stil sayfalarını ve satır içi stili kullanma.

Bugün ikinci yöntem hakkında konuşacağız.

Bir HTML etiketine stil enjekte etme

Öz Bu methodşey gerekli kayıt onu etiketin içine yerleştirdik. Ayrı bir özellik - stil. Bu özellik kabul edilebilir herhangi bir etikete, ancak yalnızca sitenin gövdesi içinde, yani vücut içinde. Bu özelliğin değeri, belirli bir öğeye uygulanması gereken stillerin operatörleridir.

Örneğin, iki farklı metin paragrafı için farklı yazı tipi boyutları ayarlayalım:

< p style= "font-size:25px;" >Bu metin parçasını 25 piksellik harf yüksekliğine ayarlayın. < p style= "yazı tipi boyutu:15 piksel; renk:#2400ff;"> Ve bu metinde 15 piksel yüksekliğinde harfler olacak ve aynı anda birden fazla stilin kullanımını göstermek için onu maviye boyayacağız.

Kusurlar

Örnek, böyle bir stilin sayfa kodunu nasıl tıkadığını mükemmel bir şekilde göstermektedir.

Bu stilizasyon tekniğini kullanmanın birkaç dezavantajını da not edebilirsiniz. Bunlardan ilki, stilin belge boyunca yayılmasıdır ve bu, düzenlemenin geleceğinde süreci önemli ölçüde karmaşıklaştıracaktır.

Büyük miktarda metni biçimlendirmek de zor olacaktır. Sanırım hiç kimse, özellikle de bu tür 40 paragraf varsa, her paragraf için bir yazı tipi boyutu belirleme olasılığından memnun değil.

Yerleşik stilleri kullanırken bile, web tasarımcısının elini büyük ölçüde bağlayan sözde sınıfları kullanmak imkansız hale gelir.

Ayrıca stil özelliğinin kullanımında ortaya çıkması muhtemel olan karışıklığa da dikkat çekmekte fayda var. Stil girerken farklı tırnak kullanımından dolayı bu karışıklık ortaya çıkacaktır.

Açıklık sağlamak için aşağıdaki örneğe bakalım:

< div style= "yazı tipi ailesi: "Roboto Yoğunlaştırılmış", sans-serif"> Giriş doğrudur. < div style= "yazı tipi ailesi: "Roboto Yoğunlaştırılmış", sans-serif"> Bu da doğru. < div style= "font-family: " Roboto Condensed ", sans-serif" >Bu doğru bir giriş değil. < div style= "font-family: " Roboto Condensed ", sans-serif" >Ve bu da doğru değil

Yukarıda verilen hesaplamalara bakıldığında, mantıksal sonuç, yerleşik stillerin kullanımının bir dizi önemli komplikasyon ve rahatsızlıkla ilişkili olduğu yönündedir.

Satır İçi Stil Ne Zaman Kullanılır?

Tüm eksikliklere rağmen yerleşik stil boşuna icat edilmedi. Web yöneticileri, programatik stil ataması durumunda sıklıkla onlara başvurur. Örnek olarak şu koda bakalım

< div id= "productRate" > < div style= "width: 40%" >

Bu blok için gerekli genişliğin kaydedilmesi basit bir işlem olacaktır.

Bir kullanıcının arka plan resmini (örneğin) yönetici rolüyle değiştirmek gerekirse benzer bir durum ortaya çıkabilir. Bu durumda img etiketi uygun olmayabilir. Bu nedenle stil özelliğine değinmeye değer:

< div style= "background:url(fon.jpg)" >

Ayrıca programcılar açılır pencereler oluştururken sıklıkla yerleşik stillere başvururlar. Genellikle bu süreç şu şekilde ilerler: Tasarımı üzerinde çalışılan bloğa display:block atanır ve geri kalan pencereler display:none kullanılarak gizlenir, böylece programcının çalışmasına görsel olarak müdahale etmezler. İşte bir örnek:

< div class = "element" style= "display:block" >olarak tasarlanmış bir açılır pencere şu an

Sonuç olarak

Yerleşik stilleri kullanmak bir takım zorluklar ve rahatsızlıklarla ilişkilidir, ancak belirli öğeleri tasarlama sürecinde web yöneticileri çalışmalarını optimize etmek için sıklıkla bu yönteme başvururlar.

Bu bölümde CSS'nin bir HTML belgesine nasıl uygulanacağından, yani bir öğenin stil açıklamasını doğrudan öğenin kendisine, yani bir HTML etiketine nasıl bağlayacağımızdan bahsedeceğiz.

Uygulamak bu görevüç şekilde mümkündür:

• Doğrudan öğenin kendisine bir stil açıklaması yazın. Bu yöntem yalnızca böyle bir öğe varsa iyidir. HTML belgesi Ayrı bir stil açıklamasına ihtiyaç duyan e.
• HTML belgesinin tüm özdeş öğeleri için bir stil açıklaması yazın. Bu yöntem, sayfanın stilinin sitenin genel tasarımından (birbirine bağlı sayfalar grubu) temel olarak farklı olması durumunda haklı çıkar.
• HTML öğelerinin stil açıklamasını ayrı bir CSS dosyasına çıkarın. Bu, sitenin tamamının tasarımını, bir CSS dosyasına referansın belirtildiği sitenin her sayfasını yönetmenize olanak tanır. Bu yöntem basamaklı stil sayfasının en etkili kullanımıdır.

Her seçeneğe daha yakından bakalım ve aynı zamanda CSS yazma sözdiziminin kurallarını da öğrenelim.

Stil özelliği.

Hemen hemen her HTML etiketinin bir özelliği vardır stil Bu, bu etikete belirli bir stil açıklamasının uygulandığını gösterir.

Bu şekilde yazılmıştır:

stil = "">

Özellik tırnaklarının arasına yazılacak her şey stil ve bu öğe için bir stil açıklaması olacak, bu durumda öğe

Mesela:

stil = "renk: #ff0000; yazı tipi boyutu: 12 piksel"> bu kişisel tarza sahip bir paragraf

Bu durumda bu paragrafın kırmızı renkte görüntülenmesini ve yazı boyutunun 12 piksel olması gerektiğini belirttik. Sonraki bölümlerde tırnak içinde ne yazıldığından detaylı olarak bahsedeceğim ama şimdi CSS'nin herhangi bir HTML etiketine nasıl uygulanacağından bahsediyoruz.

Aynı prensibi kullanarak hemen hemen her HTML öğesi için ayrı bir stil belirleyebilirsiniz.

stil = "arka plan rengi: #c5ffa0">

stil = "renk: #0000ff; yazı tipi boyutu: 18 piksel">filler hakkında her şey

Bir fil satın al

stil = "renk: #ff0000; yazı tipi boyutu: 14 piksel">

stil = "renk: #0000ff; yazı tipi boyutu: 16 piksel">Bir fil kirala

stil = "renk: #ff0000; yazı tipi boyutu: 14 piksel">

Ancak bir kez daha, CSS'yi tanıtmanın bu yöntemi yalnızca az sayıda HTML öğesi için belirli bir stil ayarlamanız gerekiyorsa iyidir.

Etiket (aynı ismin niteliğiyle karıştırılmamalıdır) ihtiyacımız olan unsurların anlatıldığı yer.

Örneğe bir bakın, aşağıda yorumlar olacak.

Filler hakkında her şey

Bu sitede fillerle ilgili her türlü bilgiyi bulacaksınız.

Bir fil satın al

Bizimle en iyi filleri rekabetçi fiyatlarla satın alabilirsiniz!!

Fil kiralama

Sadece burada herhangi bir fil kiralayabilirsiniz!

Örnekten de görülebileceği gibi, ilk durumdakiyle tamamen aynı sonucu elde ettik, ancak şimdi her öğeye ayrı ayrı bir stil atamıyoruz, ancak bunu belgenin "başlığına" yerleştiriyoruz, böylece tüm başlıkların

,

- paragraflar mavi olacak

- kırmızı. Bir sayfada böyle yüz paragraf ve yaklaşık on beş başlık olsaydı ve her bir öğe için yinelenen tüm stil açıklamalarını "kaldırarak" belgenin kendisi daha hafif olsaydı, işimizin ne kadar kolay olacağını bir düşünün.

Şimdi vaat edilen yorumlar:

Etiket belirli HTML öğelerinin stilleri aşağıdaki sözdizimine göre doğrudan bildirilir:

Bir stil bildirim bloğunda bir öğenin çeşitli özellikleri belirtilmişse, bunlar noktalı virgülle ayrılır.

Ayrı bir harici dosyada CSS.

Ne kadar kısa sürerse, bence CSS'nin asıl avantajına, yani sitenin tasarımıyla ilgili tüm bilgileri ayrı bir harici dosyaya koyma yeteneğine geliyoruz.

Bu nedenle, not defterini (veya başka bir düzenleyiciyi) açın ve içine aşağıdaki metni yazın:

Gövde (arka plan rengi: #c5ffa0)
a (renk:#000060; yazı tipi ağırlığı: kalın;)
a:hover (renk:#ff0000; yazı tipi ağırlığı: kalın; metin dekorasyonu:yok)
h1 (renk: #0000ff; yazı tipi boyutu:18 piksel)
h2 (renk: #ff00ff; yazı tipi boyutu:16 piksel)
p (renk: #600000; yazı tipi boyutu:14 piksel)

Bu tuhaf şey hakkında yazdıklarımızı bu ders kitabının ilerleyen bölümlerinde sizlere detaylı olarak anlatmaya çalışacağım.

Tüm! Stil açıklama dosyası oluşturuldu! Artık geriye kalan tek şey, sitemizin gerekli sayfalarını bu dosyadan bilgi almaya zorlamak.

Bu, etiketi kullanılarak yapılır (bağlantı). Etiket çok amaçlıdır ve bir HTML belgesini, düzgün çalışmasını sağlayan ek harici dosyalar ile "bağlamaya" yarar. Etiket yalnızca kullanıcılara yönelik değil, tarayıcı programlarına (tarayıcılara) yönelik bir tür bağlantıdır. Çünkü münhasıran taşır resmi bilgi HTML belgesinin başlığında etiketler arasında bulunur ve tarayıcılar tarafından ekranda görüntülenmez.

Etiket niteliklere sahiptir:

href- Dosyanın yolu.
göreceli- Geçerli belge ile başvurulan dosya arasındaki ilişkiyi tanımlar.

• kısayol simgesi - Dahil edilen dosyanın bir .
• stil sayfası- Dahil edilen dosyanın bir stil sayfası içerdiğini belirtir.
• application/rss+xml - Haber akışını açıklayan XML biçiminde bir dosya.

tip- Ekli dosyanın MIME veri türü.

olarak bağlandığımızdan beri harici dosya basamaklı stil sayfası, ardından hizmet bağlantımız aşağıdaki formu alır:

Olası yanlış anlamaları kesinlikle ortadan kaldırmak için tekrar ediyorum. Bağlanmak göreceli bir değer ata stil sayfası Basamaklı stil sayfasını harici bir dosya olarak bağladığımız için css dosyasının yolunu belirtiyoruz (bu örnekte dosyanın adı mystyle.css ve yazıldığı HTML belgesinin yanında bulunur bu bağlantı) şunu da belirtiyoruz bu dosya metindir ve bir stil açıklaması içerir type = "metin/css"

Şimdi bu satırı sitemizin sayfa başlıklarına ekliyoruz ve sonucun tadını çıkarıyoruz..

mystyle.css dosyası
gövde (arka plan rengi: #c5ffa0)
a (renk:#000060; yazı tipi ağırlığı: kalın;)
a:hover (renk:#ff0000; yazı tipi ağırlığı: kalın; metin dekorasyonu:yok)
h1 (renk: #0000ff; yazı tipi boyutu:18 piksel)
h2 (renk: #ff00ff; yazı tipi boyutu:16 piksel)
p (renk: #600000; yazı tipi boyutu:14 piksel)
Index.html dosyası

Menü:

Filler hakkında her şey

Bu sitede fillerle ilgili her türlü bilgiyi bulacaksınız.

Menü:

Bir fil satın al

Bizimle en iyi filleri rekabetçi fiyatlarla satın alabilirsiniz!!

Menü:

Fil kiralama

Sadece burada herhangi bir fil kiralayabilirsiniz!

Yukarıdaki "filler hakkındaki site" örneğinde şu anda her biri tek bir sayfayla ilişkilendirilmiş üç sayfa bulunmaktadır. harici css dosya - mystyle.css. Böylece onu önemli ölçüde “boşalttık” ve tüm sitenin tasarımını “mobil uyumlu” hale getirdik. Bu sitenin tam teşekküllü yüz sayfası olsaydı kaç kilobayt kazanacağımızı hayal edin!? Ayrıca tasarımında herhangi bir şeyi değiştirmemiz gerekse ne kadar zaman kazanırdık!?

Bu bölümde CSS'yi bir HTML belgesine yerleştirmenin üç yoluna baktık. Hangisini kullanmak daha iyidir?

• Özelliği kullan stil Herhangi bir öğe için, eğer bu öğe diğer öğelerden farklı bir stile sahipse, tüm sitedeki tek öğedir.
• Etiketi kullan
  
  

  Bu bir başlık

  
  

  Bu bir paragraf.

  
  

  Harici CSS

  Birçok HTML sayfasının stilini tanımlamak için harici bir stil sayfası kullanılır.

  Harici bir stil sayfasıyla, tek bir dosya değişikliğiyle tüm web sitenizin görünümünü değiştirebilirsiniz!

  Harici bir stil sayfası kullanmak için bölüme bir bağlantı ekleyin HTML sayfaları:

  Örnek

  
  
  
  
  
  

  Bu bir başlık

  
  

  Bu bir paragraf.

  
  

  Harici bir stil sayfası herhangi bir biçimde yazılabilir. Metin düzeltici. Dosya HTML kodu içermemeli ve uzantısıyla kaydedilmelidir. CSS.

  "styles.css" şöyle görünür:

  vücut (
  arka plan rengi: toz mavisi;
  }
  sa1 (
  renk: mavi;
  }
  P(
  kırmızı renk;
  }

  CSS yazı tipleri

  CSS color özelliği kullanılacak metin rengini belirtir.

  CSS font-family özelliği kullanılacak yazı tipini belirtir.

  CSS font-size özelliği, kullanılacak metnin boyutunu belirler.

  Örnek

  
  
  
  
  
  

  Bu bir başlık

  
  

  Bu bir paragraf.

  
  

  Kenarlık CSS'si

  CSS border özelliği, bir HTML öğesinin etrafındaki kenarlığı tanımlar:

  Örnek

  P(
  }
  

  CSS dolgusu

  CSS dolgu özelliği, metin ile kenarlık arasındaki dolguyu (boşluk) tanımlar:

  Örnek

  P(
  kenarlık: 1 piksel katı toz mavi;
  dolgu: 30 piksel;
  }

  Yazardan: Merhaba webformyself portalının sevgili okuyucuları. Web sitesi geliştirmede, bir web kaynağının tasarımı büyük önem taşımaktadır. Bugün konuşacağımız CSS dilinin (basamaklı stil sayfaları) sorumlu olduğu şey budur. Daha doğrusu bağlantısı ve kullanımı hakkında. Web sayfalarını tasarlarken kullanılan siteye yönelik bazı css stillerine bakalım.

  CSS'yi bağlama

  Bugün hiçbir yerde tamamen html'nin yetenekleri kullanılarak oluşturulmuş bir web sayfası bulamazsınız. Aslında, bu tür sitelerin görünümü tek kelimeyle korkunç olacaktır, bu nedenle gerekli unsurların işaretlenmesi hazır olduğunda hemen tasarlanmaları gerekir ve bu, css kullanmak V ayrı dosya.

  Genel olarak bir html dosyasına stilleri dahil etme olanaklarının da olduğu söylenmelidir. Örneğin, stil niteliği veya aynı etiket kullanılarak tanımlanabilirler. Buna satır içi stiller denir. Bu yaklaşım bugün hoş karşılanmıyor ve modern kalkınma standartlarını ihlal ediyor.

  Nasıl doğru yapılacağını mı soruyorsunuz? Bunu yapmak için oluşturmanız gerekir yeni dosya css uzantılı ve ardından html'ye bağlayın. Bu, harici dosyaları bağlamaktan sorumlu olan bağlantı etiketi kullanılarak çok basit bir şekilde yapılır. Bu şu şekilde yapılır:

  < link rel = "stylesheet" type = "text/css" href = "style.css" >

  Etiket zaten anladığınız gibi tektir. Size özelliklerinden biraz daha bahsedeceğim:

  rel = “stylesheet” – genel olarak rel niteliği, dosyanın sayfadaki rolünü belirlemek için yazılır. Bizim durumumuzda rol, belirtilen stil sayfasıdır.

  type = “text/css” – tarayıcının bunları doğru şekilde yorumlayabilmesi için genellikle dahil edilen tüm dosyalara belirtilen MIME türü olarak adlandırılır. Modern web tarayıcılarında bu özellik ihmal edilebilir.

  href = “style.css” harici dosyamızın adresini belirten standart bir özelliktir. Bu durumda dosyanın isim stiline, css uzantısına sahip olması ve html belgesiyle aynı klasörde bulunması esas alınarak yazılır.

  Gördüğünüz gibi css dosyalarını bağlarken yalnızca href niteliği değişecektir; diğer her şeyin değiştirilmesine gerek yoktur. Bir sayfaya istediğiniz kadar stil sayfası bağlayabilirsiniz, ancak 2-4'ten fazlası ideal kabul edilmez, çünkü sunucuya çok fazla istek gönderilmesi de pek iyi değildir.

  Site için hazır CSS stillerini nereden edinebilirim?

  Tamam, bağlantıyla ilgili olarak, umarım her şey az çok açıktır. Ancak boş bir dosya oluşturuyorsunuz ve ekleme efektinin görünür olması için kuralları ya kendiniz yazmanız ya da bir yerden almanız gerekiyor.

  

  Örneğin internette çok sayıda ücretsiz HTML şablonu var. Bunlardan herhangi birini indirirseniz, içerisinde mutlaka web sitesi tasarımı için gerekli kuralların yer aldığı hazır bir stil sayfası bulunacaktır. Ancak yalnızca kendi html belgesi için doğru şekilde çalışacaktır. Gerçek şu ki, bu iki dil, sözde seçiciler kullanılarak birbirine bağlanıyor.

  Seçici, CSS dilinin kendine özgü bir özelliğidir. Bunlara ne için ihtiyaç var? Peki, şu kodu hayal edin:

  Başlık metni

  Paragraftaki metin

  Peki örneğin CSS'de bir paragrafı ve başlığı nasıl tasarlayabiliriz? Seçicilerin yalnızca ihtiyaç duyulan öğelere erişecek şekilde oluşturulmasının nedeni budur. Örneğin:

  p( yazı tipi boyutu: 12 piksel; ) .title( yazı tipi boyutu: 36 piksel; )

  yazı tipi boyutu: 12 piksel; Başlık ( yazı tipi boyutu: 36 piksel;

  Tüm paragrafların yazı tipi boyutunu 12 piksele ayarladık ve başlık sınıfına sahip öğeler (bizim durumumuzda h1), 36 piksellik çok daha büyük bir yazı tipi boyutu aldı. Paragraflar söz konusu olduğunda, sayfada kaç tane olursa olsun stillerin hepsine uygulanacağını unutmayın.

  İkinci seçici, başlık sınıfıyla birlikte yalnızca bir öğeye hitap ediyordu. Elbette tamamen aynı sınıfa sahip başka öğeler de oluşturabiliriz, bu yasak değildir ve onlar da aynı kuralı alacaklardır, ancak sadece şunu yazarsak: HTML etiketi h1 (başlık sınıfı olmadan), o zaman bunun için hiçbir kural eklenmez.

  Bu kullanışlı yol, CSS'nin ihtiyacınız olan öğeleri seçmesine ve ihtiyaç duyulmayanları yalnız bırakmasına olanak tanır. Bunun ne alakası var hazır stiller internette bulabileceğiniz? Buradaki her şey belirli sınıflara ve tanımlayıcılara bağlıdır, dolayısıyla bu tabloları herhangi bir dosyaya kolayca bağlayamazsınız; gerekli öğeler html'de uygun sınıflara sahip değilse çalışmazlar.

  Örneğin stil sayfasında aşağıdaki kodu görüyoruz:

  Nav( genişlik: 300 piksel; arka plan: deniz; ... ) .nav a( ekran: blok; renk: #ccc; ... )

  Gezinti ( genişlik: 300 piksel;

  Yalnızca bundan yola çıkarak, html sayfamızın bir yerinde nav sınıfına sahip bir öğenin olması ve bunun bağlantılar içermesi gerektiği sonucuna varabiliriz. Eğer bu doğruysa o zaman onlara tasarım uygulanacak ve görünümleri buna göre değişecektir. Böyle bir öğe tespit edilmezse kod göz ardı edilecektir.

  Yine internette tonlarca bulabilirsiniz. hazır şablonlar, burada bu sınıf ilişkisini görebilirsiniz, böylece html'de bir şeyi değiştirirseniz, ilgili işlemlerin stil sayfasında gerçekleştirilmesi gerekir.

  Web siteniz için CSS stillerini kendiniz nasıl oluşturabilirsiniz?

  Css korkutucu ya da aşırı zor bir şey değil. Bu, insanların web sayfalarını tasarlamak için oluşturduğu ortak bir teknolojidir ve kendine has kuralları vardır. Bunları anlamanız yeterli, siz de bu dili kullanarak web kaynaklarının görünümünü oluşturabileceksiniz.

  

  Hızlı ustalaşmanın en önemli koşulu, kendi kendinize öğreneceğiniz yeni bilgilerle birlikte sürekli pratik yapmaktır. Bizimki size benzer bir uygulama sağlayabilir.

  Ayrıca premium bölümümüzde CSS'nin temellerini öğrenebilir ve uzmanlaşabilirsiniz. Tamamen bu dilin temel özelliklerine ayrılmış derslerden biri var. .

  En önemlisi çalışmaya kararlı olmak ve bunun çok zor olduğu yönündeki önyargıları bir kenara bırakmaktır. Web sitemizdeki ücretsiz materyaller, makaleler ve video eğitimleri de size yardımcı olabilir. Dilerseniz bunları CSS ile çalışırken ihtiyaç duyulan temel bilgileri edinmek için de kullanabilirsiniz.

  Bununla sana veda ediyorum. Web sitesi oluşturma alanındaki bilginizi geliştirmek için webformyself blogumuzu okuyun.

  > Bir web sitesi oluşturmak için temel css stilleri Kural olarak, kapsayıcılar ve içerikleri için görüntüleme stilleri, istediğiniz herhangi bir şekilde adlandırılabilse de genellikle stile.css olarak adlandırılan bir stil sayfasına yazılır. Önemli olan, etiketteki sayfada stil sayfasına giden doğru yoldu

  Bir sayfadaki kapsayıcının stilini ayarlamak için ona bir sınıf verebilirsiniz. Örneğin, bir konteyner

  chapka_saita adında bir stil atayabilirsiniz, ardından sayfadaki konteynere bir sınıf atanır

  içerik

  . Stil sayfası chapka_saita'nın stillerini belirtir. stile.css tablosundaki ad noktayla başlar.

  Chapka_saita (içinde kıvırcık parantez stilleri belirtin)

  Ayrıca bir sınıfa atanmamışsa konteynerin stilini doğrudan belirtebilirsiniz. Örneğin, bir konteynerin stili

  içerik

  konteynerin adıyla başlar

  Başlık (stilleri süslü parantez içinde belirtiriz)

  Ayrıca bir tanımlayıcı kullanarak kapsayıcılar için stiller belirleyebilirsiniz, ardından şu şekilde görünür:

  içerik

  stil sayfasında tanımlayıcı bir karma simgesiyle başlar

  #blok1 (stilleri süslü parantez içinde belirtiriz)

  Kaplarda, bağlantılarda, resimlerde başlıkların stillerini belirtmeniz gerekiyorsa, şöyle görünür.

  Chapka_saita (küme parantezleri içindeki ana kapsayıcı stili)
  .chapka_saita h1, h2 (etiketlerdeki başlıklar için stil

  Ve

  bu konteyner için)
  .chapka_saita a (bu kapsayıcıdaki bağlantıların stili)
  .chapka_saita a:hover ( fareyle üzerine gelindiğinde bağlantılar için stiller )
  .chapka_saita img (bu kapsayıcıdaki görseller için stiller)
  Stillerin kendileri bu süslü parantezlerle yazılır ve noktalı virgülle ayrılır;

  Yazı tipi ailesi: Arial; genellikle bir etikette kullanılan kapsayıcı yazı tipini belirtir , sayfanın tüm içeriğinin bulunduğu

  Satır yüksekliği: 1,2; yazı tipinin satır yüksekliğini ayarlar

  Girintiler

  dolgu: 10 piksel; içeriğin iç girintisini kabın kenarlığından ayarlar; bu durumda girinti 10 pikseldir; değeri yüzde olarak veya em cinsinden belirtebilirsiniz
  kenar boşluğu: 5 piksel; kabın dış kenar boşluklarını ayarlar,
  kenar boşluğu: 10 piksel 5 piksel 0 piksel 15 piksel; Girintiler her bir taraf için ayrı ayrı belirlenebilir
  kenar boşluğu alt: 10 piksel; Yalnızca bir tarafta girinti belirleyebilirsiniz; bu durumda alttan girinti 10 pikseldir. Aynı şey iç dolguya da uygulanabilir.

  Aşağıda etiket için bir stil örneği verilmiştir

  Gövde (sol kenar boşluğu: otomatik; sağ kenar boşluğu: otomatik; genişlik: 930 piksel; yazı tipi boyutu: 12 piksel; yazı tipi ailesi: Arial; satır yüksekliği: 1,2; arka plan resmi: url(resimler/fon.jpg); )

  Metin stilleri

  yazı tipi boyutu: 12 piksel; yazı tipi boyutunu belirtir; piksel, yüzde veya ems cinsinden belirtilebilir
  renk: #0000ff; yazı tipi rengini belirtir, bu durumda #0000ff mavi, bir sözcük belirtebilirsiniz, örneğin renk: yeşil; yani rengi yeşildir.
  metin dekorasyonu: yok; alt çizgiyi kaldıracak bağlantılar için kullanılan alt çizgiyi kaldırır
  metin dönüşümü:büyük harf; metnin tüm harflerinin büyük harfle yazılmasını sağlar; büyük harf yerine başka anlamlar yazabilir ve bunun tersine, üst veya alt alt çizgi veya üst çizgi yapabilirsiniz.
  yazı tipi ağırlığı:kalın; yazı tipini kalın yapar; kalın yerine başka değerler de kullanılabilir
  metin hizalama:sol; metin hizalamasını (bu durumda sola) kabın sol tarafına ayarlar; conter, height değerini ayarlayabilirsiniz.
  metin gölgesi: 1px 2px 1px 0px #000000; renk: #f9f5ed; metin için gölge

  Konteyner Stilleri

  arka plan rengi: #DCDCDC; kaba bir arka plan rengi atar; bu durumda #DCDCDC gri
  arka plan resmi: url(resimler/fon.jpg); arka plan resmini ayarlar

  Kenarlık: 1 piksel düz #E8E8E8; bir kenarlık atayacaktır, düz ifadesi düz kenarlık anlamına gelir, #E8E8E8 kenarlığın rengidir. Her bir taraf için ayrı bir kenarlık belirtebilirsiniz; örneğin border-top: 2px katı #E8E8E8;
  kenarlık yarıçapı: 10 piksel; kabın köşelerini yuvarlayarak, her köşe kenarlık yarıçapında farklı bir yuvarlama ayarlayabilirsiniz: 2px 6px 10px 0px;
  kutu gölgesi: #2C2C29 10 piksel 10 piksel 10 piksel; konteynerler için gölge

  Genişlik:926 piksel; kabın genişliğini gösterir
  yükseklik: 240 piksel; konteyner yüksekliği

  kayan nokta:sol; kabı sol tarafa bastırır, varsayılan olarak kaplar sıralıdır ve birkaç bloğu hizalamak istiyorsanız, float:left; özelliğini ayarlamaları gerekir. ve genişlik yüksekliği: px; böylece ana kabın genişliğine uyacaklar.
  Sağa çık; aynı şey, ancak kaplar sağ tarafa doğru bastırılıyor.
  Ortada bir kap yapmak istiyorsanız genişliği ve kenar boşluklarını belirtin avto , örneğin: marj-left: auto; sağ kenar boşluğu: otomatik; genişlik: 150 piksel;