Merhaba, blog sitesinin sevgili okuyucuları. Bugünün makalesinde CSS stil sayfası eklemenin yöntemleri veya yolları hakkında konuşacağız. sana nasıl yapabileceğini anlatacağım CSS'yi html sitesine bağlama dört yol. Bu dört bağlantı yöntemi gelecekte işinize yarayacaktır, çünkü bir sitede bu bağlantı yöntemlerinin tamamını kullanmanız gereken zamanlar olabilir. CSS stil sayfalarının ne olduğunu bilmeyenler için .

Başlayalım...

İlgili stil sayfaları.

CSS bağlantı yöntemi - No. 1

1 numaralı yöntem en çok uygun yol site için stilleri tanımlama. Sitenin tüm stilleri tek bir yerde saklanır ayrı dosya ve herhangi bir web sayfası için kullanılır. Bağlantı veya bağlantı için CSS tabloları Html sayfası, sayfa başlığında LINK etiketini kullanır.

Başlık

Bu yöntemin avantajları:

1. Web sitesinin tüm web sayfaları için tek bir CSS stil dosyası kullanın;

2. Web sayfalarını düzenlemeden stil sayfası aracılığıyla sitenin görünümünü değiştirebilirsiniz;

3. Bir style.css dosyasındaki stili değiştirdiğinizde stil, CSS dosyasında bağlantı bulunan tüm sayfalara otomatik olarak uygulanır. Çok rahat;

4. Web sitesi ilk kez yüklendiğinde CSS stil dosyası önbelleğe alınır. yerel bilgisayar Kullanıcı, web sayfalarından ayrı olarak bu nedenle site çok daha hızlı yüklenir.

Küresel stil sayfaları.

CSS bağlantı yöntemi - No. 2

Yöntem No. 2, Yöntem No. 1 kadar etkili ve kullanışlı değildir, ancak CSS'yi bağlamanın bu yönteminin gerekli olduğu zamanlar vardır.
Bu stil belgenin kendisine bağlanır ve yazılır ve web sayfasının başlığına etiketlerin arasına yerleştirilir. . Stil etiketini bağla

Başlık

Bu örnekte başlık stilini değiştirmeyi gösterdim

. Artık bu web sayfasında etiketi belirtmeniz yeterli

ve stiller otomatik olarak buna eklenecektir.

İç stiller.

CSS bağlantı yöntemi - No. 3

Nadir durumlarda 3 numaralı yöntem kullanılır. Satır içi stil, bir web sayfasındaki tek bir etiketi değiştirmek için kullanılır. Bir stili bağlamak için parametreyi kullanın stil.

Bir CSS tablosunu bağlama örneği:

Başlık

Stilleri birleştirmenin birleşik yöntemi.

CSS bağlantı yöntemi - No. 4

Bu yöntem, yukarıda kullandığımız birkaç stili aynı anda kullanır (yöntem No. 1 - No. 3).

Bir CSS tablosunu bağlama örneği:

Başlık

Başlık

Sonuç olarak, örneği takip ederek, 50 piksel boyutunda kırmızı ilk başlığı ve sonraki başlığı alacağız - yeşil ve 90 piksel boyutunda.

Açıklanan tüm yöntemleri tekrar ediyorum CSS kullanma bağımsız olarak kullanılabilir veya birbirleriyle birleştirilebilir. Bu, 4 numaralı yöntemde görülebilir.

Hepinize iyi günler.

Böylece, önceki makalelerden birinde tanıştık.

Ama birine pek bakmadık önemli soru. Yani - CSS stillerini HTML koduna bağlama Web sitemizin sayfaları.

Bu soru aslında çok önemli. Nihayet css stillerini yanlış bağlarsak sitemizin sayfalarına eklerseniz bu stilleri kullanamayacağız. Tarayıcı bunları görmezden gelecektir ve belirli stilleri kullanmanın verdiği sonucu görmeyeceğiz.

CSS stillerini sayfa koduna bağlayabilirsiniz Farklı yollar ve bugün hepsini dikkate almaya çalışacağız.

Hadi başlayalım.

Bağlantının doğası gereği basamaklı tablolar Bir HTML belgesi için CSS stilleri ayırt edilir harici ve dahili stil sayfaları.

1. Dahili CSS stil sayfaları.

Dahili stil sayfaları web sayfamızın hemen içinde yer almaktadır. Evet, evet... Her sayfanın HTML kodunun tam içinde.

Bu elbette biraz sakıncalı ama yine de böyle bir ihtimal var ve şunu söylemeden geçemeyeceğim.

Dolayısıyla CSS stillerini sayfa koduna bağlamanın ilk yolu etiketini kullanmaktır., HTML belgesinin tüm içeriğine uygulanır. Bunlardan istediğiniz kadar çok olabilir, hatta sitenin tamamı için tüm stiller olabilir. Ama bu biraz yanlış. Biraz sonra harici stil sayfalarına baktığımda bundan bahsedeceğim.

Bazen yapmak zorundasın CSS stillerini HTML kodunun içine yazın.

Örneğin, bir şey yayınladığınızda reklam afişi web sitenizde - bu banner'ın kodunu sayfa koduna eklersiniz.

Bu banner'ın doğru bir şekilde görüntülenmesi için (kendisine ayrılan sınırların dışına çıkmaması, belki bir çerçeveye ihtiyacı olması vb.), bazen ona birkaç CSS talimatı eklemeniz gerekir.

Ancak genel stil sayfasında değişiklik yapmanın bir anlamı yok. Banner geçici bir olgudur. Bugün bir, yarın başka. Bu nedenle, bu banner'ın kodunun içine doğrudan stil yazmak daha kolaydır.

Yani CSS stillerini yalnızca belirli bir sayfa öğesine bağlamamız gerekiyor. Bu çok basit bir şekilde yapılır - stil özelliği kullanılarak.

Bu şekilde yazılan stiller yalnızca etiketine yerleştirildikleri öğeyi etkiler. İÇİNDE bu durumda, yalnızca bu paragraf için (etiket

). Ve başkası yok!

2. Harici stil sayfaları.

Harici CSS stil sayfalarının adı, bunların HTML belgesinin gövdesinde değil, ayrı bir yerde yazıldığı anlamına gelir. özel dosya. Bu dosyalar uzantısına sahiptir .css

Söz verdiğim gibi, size neden harici stil sayfaları kullanmanın daha iyi olduğunu anlatacağım.

Gerçek şu ki bu, sitenizdeki sayfaların biraz daha hızlı yüklenmesini sağlar. Belki saniyenin çok küçük bir kısmı için ama daha hızlı. Bu sitenizdeki yükü azaltır ve ziyaretçileriniz için daha kullanışlıdır; sayfaların yüklenmesi için daha az beklemeleri gerekir.

Bu neden oluyor.

Sitenizin CSS stilleri ayrı bir dosyadaysa kullanıcının tarayıcısının her yüklemede bu stilleri yüklemesine gerek yoktur. yeni sayfa. Bunları bir kez indirdi, önbelleğe (ziyaretçinin bilgisayarındaki hafıza alanı) yerleştirdi ve indirirken sonraki Sayfa stilleri oradan alır.

CSS stil sayfası dosyalarını bir web sayfasına eklemenin iki yolu vardır.

En yaygın olan ilk yöntem etiketi kullanmaktır. niteliklerle: rel = "stylesheet" type = "text/css" href = "style file.css" sayfa başlığı kodunun içinde (etiket) ).

Örneğin:

1 2 3 4

<kafa > ..... <link rel = "stil sayfası" type = "metin/css" href = "stil.css" > </kafa>

Örnek veriler ektedir CSS sayfası style.css dosyasına yazılan stiller. Belgenin tamamı boyunca geçerlidirler.

Başka bir yol daha var harici stil sayfalarını HTML'ye ekleme belge. Bu @import direktifini kullanıyor. Bir CSS dosyasının içeriğini geçerli stil sayfasına aktarmanıza olanak tanır.

Bunu hem bazı stil sayfalarını diğerlerine eklemek için, hem de bir stil sayfası dosyasını bir HTML belgesine eklemek için kullanabilirsiniz. Bunu yapmak için etiketinin içine yazmanız gerekir. (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 yapabilirsiniz uygun fiyatlar en iyi filleri satın al!!

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! Şimdi geriye kalan tek şey birazcık zorlamak gerekli sayfalar Bu dosyadan bilgi almak için web sitemizi ziyaret edin.

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ü yalnızca hizmet bilgilerini taşır; 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 - Dosya girişi XML biçimi haber akışını açıklamak için.

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 bu bağlantının yazıldığı HTML belgesinin yanında yer alır) şunu da belirtiriz: 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.
Bir fil satın al.
Bir fil kirala.

---

Filler hakkında her şey

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

file.html dosyası

Menü:

Filler hakkında her şey.
Bir fil satın al.
Bir fil kirala.

---

Bir fil satın al

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

Fil1.html dosyası

Menü:

Filler hakkında her şey.
Bir fil satın al.
Bir fil kirala.

---

Fil kiralama

Sadece burada herhangi bir fil kiralayabilirsiniz!

Yukarıdaki örnekte "filler hakkındaki site" şu an, her biri tek bir sayfayla ilişkilendirilen üç sayfa vardı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

  Öyle olabilir:

  Etiketler arasında web sayfası için gerekli CSS kuralları belirtilmiştir.
  Bu yöntemin dezavantajı ise bu stillerin yalnızca bu stillerin bulunduğu tek sayfa için geçerli olmasıdır.

  Başlık H2

  
  
  

  Sonuç:

  

  Yukarıdaki örnekte H2 Başlığının boyutunu ve rengini bir CSS stil sayfası kullanarak değiştirdim.

  ○ Yöntem No. 3 – “İç stiller”

  Nadir durumlarda, örneğin bir web sayfasındaki tek bir etiketi değiştirmek için 3. yöntemi kullanırım. Bir stili herhangi bir etikete bağlamak için stil parametresini belirtmeniz gerekir.

  Style = "burada CSS kuralları olacak"

  Başlık H2

  
  
  

  Sonuç:

  

  Yukarıdaki örnekte H2 Başlığının boyutunu ve rengini CSS stillerini kullanarak değiştirdim.

  ○ Kombine stil bağlantı yöntemi

  Bu yöntemlerin üçü birleştirilebilir.

  Başlık

  Başlık

  
  
  

  Hepsi bugün için! Bir sonraki derslerde sizi görmeyi sabırsızlıkla bekliyorum.
  Blog güncellemelerine abone olun!

  Önceki yazı
  Sonraki giriş

  Merhaba blog sitesinin sevgili okuyucuları. HTML'ye ayrılan bir blok yazıdan sonra, işaretleme araçları belge tasarlamak için yeterli olmadığından sizi CSS ile tanıştırmaya karar verdim. Ve genel olarak HTML öğrenmek, web sitelerinin nasıl oluşturulacağını öğrenme sürecinin yalnızca ilk aşamasıdır. sonraki adımlar CSS öğreniyor. Öyleyse öğrenelim CSS nedir ve neden gereklidir?.

  sayfalara bakarsanız saf HTML, o zaman göze çarpmayan görünürler. Monoton metinler, çerçevesiz tablolar, kasvetli siyah beyaz renkler... Elbette web sitenizin sayfalarını daha parlak hale getirebilirsiniz. HTML'yi kullanmak ancak bu yaklaşım yalnızca karmaşa yaratır kaynak ve herhangi bir esneklik sağlamaz. Bu nedenle modern düzen arka dış tasarım site sayfaları cevapları CSS stil dili veya sadece bir stil sayfası.

  Basamaklı Stil Şablonu(bu, CSS - Basamaklı Stil Sayfaları kısaltmasıdır), web sayfasının tasarımını ve bireysel öğelerini tanımlayan bir dizi parametredir (stillerdir). Bu ayarlar sayfa arka planını, metin rengini, paragraf hizalamasını, tablo kenarlığı seçeneklerini ve daha fazlasını kontrol eder.

  Böylece, kullanarak HTML dili Web sayfalarının yapısını siz oluşturursunuz, örneğin siz belirlersiniz. Ve CSS kurallarının yardımıyla, HTML belgesinin bu öğelerinin tarayıcıda nasıl görüntüleneceğini belirlersiniz. Yani, yazı tipini ve rengini, metin hizalamasını, öğelerin arka plan rengini, çeşitli girintileri vb. siz ayarlarsınız. Ayrıca, bir CSS kuralı da etkileyebilir. görsel sunum bir web sayfasının birkaç öğesini aynı anda

  Bu nedenle, hem sıfırdan bir web sitesi oluştururken hem de mevcut bir projede değişiklik yaparken büyük olasılıkla basamaklı stil sayfalarının yetenekleri hakkında minimum bilgiye ihtiyacınız olacaktır. Öncelikle web sitesi tasarımı üzerinde çalışırken bu bilgiye ihtiyaç duyulacaktır.

  Stil ekleme veya CSS'nin bir HTML belgesine nasıl bağlanacağı

  Basamaklı Stil Sayfalarının sözdizimi veya özellikleri hakkında konuşmadan önce, bunları Basamaklı Stil Sayfalarına nasıl bağlayacağımızı öğrenmemiz gerekiyor. HTML belgesi. Css'i html'ye bağlamanın üç yolu vardır.

  1. İlk yöntem, stilleri ayrı bir dosyaya veya .css uzantılı birkaç dosyaya yerleştirmektir. Bu durumda CSS stillerini bağlamak için şunu kullanın: bağlantı, harici stiller dosyasının yolunu içerir. Bu meta etiket, ilgili web sayfasının başlık bölümüne, kafa etiketleri. İşte bunu yazmanın formatı:

  Stil dosyasının yolu href niteliğinin değeri olarak kaydedilir. rel özelliği tarayıcıya bağlantı etiketinin hangi dosyaya atıfta bulunduğunu söyler. "Stil sayfası" değeri bu dosyanın harici bir stil sayfası olduğunu gösterir. İÇİNDE tür özelliği türü belirtildi MIME dosyası. Harici bir stil sayfası için MIME türü "text/css"dir.

  CSS stillerini bağlamak için kullanılan çizgi şöyle görünecek: HTML Kodu e:

  
  
  
  ...
  .css"/>
  ...
  

  Bu yöntemin avantajı şudur harici stil sayfası Aynı anda birden fazla web sayfasına bağlantı verilebilir.

  2. İkinci yol ise sözde yazmaktır. küresel stiller, doğrudan web sayfasının html koduna yazılır. İki kişilik odaya kilitlendiler stil etiketi ve genellikle head etiketlerinin arasındaki head bölümüne yerleştirilir:

  
  ...
  
  ...
  

  Bu yöntemin dezavantajı global stillerin CSS kurallarının yalnızca yazıldığı web sayfasına uygulanmasıdır.

  3. Üçüncü yöntem, sözde yerleşik veya iç stiller. Bunu yapmak için, sadece gerekli HTML etiketi yerleştirilmesi gerekiyor Stil özelliği parametre olarak bir dizi CSS özelliği içerir:

  Paragraf ile gri arka plan ve kırmızı metin

  Üstelik style özelliğinde belirtilen özellikler yalnızca bir html öğesine uygulanır. Tipik olarak, bu stilleri bağlama yöntemi, site tasarımında hata ayıklama ve ardından ortaya çıkan sonuçları aktarma aşamasında kullanılır. CSS özellikleri harici stillere sahip bir dosyaya.

  CSS stilleri oluşturma. Basamaklı stil sayfası sözdizimi - kurallar, özellikler, seçiciler.

  Seçici (
  Mülk değeri;
  Mülk değeri;
  ...
  Mülk değeri
  }

  Onlar. bir stil kuralı, bir stil seçici ve küme parantezleri içindeki değerleri ("(" ve ")") ile birlikte stil özelliklerinin bir listesini içerir:

  • seçici etkisini genişletmesi gereken bir web sayfasının öğelerine bağlanmak için kullanılır;
  • “Özellik: Değer” çiftleri noktalı virgülle (";") ayrılır ve istenildiği kadar çok sayıda olabilir;
  • son “Özellik: Değer” çifti ile kapanış arasında küme parantezi Noktalı virgül simgesi atlanabilir;
  • stil özelliği eleman parametrelerinden birini temsil eder HTML sayfaları: metin rengi, yazı tipi, girinti miktarı;
  • CSS kurallarını yazarken boşluklar ve satır sonları kritik değildir; tarayıcı bunları yok sayar; böylece kodu istediğiniz gibi biçimlendirebilirsiniz;
  • Kod ayrıca büyük/küçük harfe duyarlı değildir.

  Daha açık hale getirmek için birkaç örneğe bakalım.

  Şimdi şu CSS kuralına bakalım:

  • body, etiketin adını temsil eden bir seçicidir ;
  • arka plan — arka plan parametrelerini ayarlamak için kullanılan stil özelliği;
  • #0000FF, RGB formatında bir renk kodu olan arka plan stili özelliğinin değeridir.

  Sonuç olarak bu stil gövde elemanına uygulanacaktır. internet sayfaları ve sayfa arka planını renklendirir belirtilen renk. Söz konusu stilin adı etiketi geçersiz kılma stili, çünkü seçici karakter içermeyen bir etiket adıdır< и >.

  Başka bir örneğe bakalım:

  sa1 (
  yazı tipi boyutu: 24 piksel;
  yeşil renk;
  }

  Bu stil, tarayıcının etiketlere yerleştirilen herhangi bir metni görüntüleyeceğini belirtir.

  yeşil ve yazı tipi boyutunu 24 piksele ayarlayacaktır.

  Etiket seçici olarak etiket adına ek olarak şunları da belirtebilirsiniz: Sınıf:

  Sarı metin (renk:sarı)

  Sınıf adı harflerden oluşmalıdır Latin alfabesi, sayılar ve kısa çizgiler ve bir harfle başlamalıdır. Ve CSS tanımı kurallarda sınıf adından önce bir nokta bulunmalıdır; bu, bir stil sınıfının tanımlandığı anlamına gelir. Bu tarz belirtilen özelliklere sahip tüm etiketlere uygulanacaktır sınıf özelliği ve değeri eşit olacak noktasız stil sınıfı adı:

  Bu paragrafta turuncu metin var

  Örnekte etikete bağlandık

  Yellowtext sınıf adını kullanan Css kuralı. Sonuç olarak, bu paragraftaki metin turuncu renkte görüntülenecektir.

  clsss özniteliğinin değeri olarak boşluklarla ayırarak birden fazla stil sınıfı adı belirtebilirsiniz. Bu durumda stil sınıflarının etkisi şöyle olacaktır:

  El yazısı metni (yazı tipi stili: italik)
  

  sarı italik metin

  Bu örnekte etikete

  Aynı anda iki sınıfı ekledik: sarı metin ve el yazısı metni. Sonuç olarak, etiketin içeriği görüntülenecektir sarı ve italik yazı tipi.

  Sınıfların yanı sıra css kuralları da seçici olarak kullanılabilir tanımlayıcı, öğe için benzersiz bir ad belirtir. Buradaki her şey stil sınıflarındakiyle aynı, yalnızca birkaç fark var:

  • CSS kural seçicisinde tanımlayıcının adı da belirtilir, ancak adının önüne nokta yerine “#” karma sembolü yerleştirilir;
  • bağlayıcı HTML öğesi aracılığıyla gerçekleştirilen kimlik özelliği değeri, karma işareti olmayan stilin adına ayarlanan;
  • id niteliğinin değeri sayfa içinde benzersiz olmalıdır, yani html kodunda id niteliğinin belirli bir değerine sahip yalnızca bir öğe olabilir, aksi takdirde kod geçerli olmayacaktır.

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

  #textcenter(metin hizalama: ortala;)
  

  Metni ortala

  id niteliğini kullanarak p öğesine (paragraf) bağlanır css kuralı Metni sayfanın ortasına hizalayan. Artık sayfada bu id öznitelik değeriyle öğe oluşturulmasına izin verilmiyor, aksi takdirde html kodu geçerli olmayacaktır.

  Stilleri tanımlamak için dikkate alınan yöntemlere ek olarak, CSS oluşturmanıza olanak tanır kombine stiller ve aynı anda birden fazla aynı stili ayarlayın. Bir örnek görelim:

  h1.redtext, p güçlü (renk: kırmızı)

  Örnekte, virgülle ayrılmış iki seçici belirtilmiştir: “h1.redtext” ve “p güçlü”. İlk seçici, sınıf öznitelik değeri kırmızı metinle eşdeğer olan tüm h1 öğelerinde metnin kırmızı renkte görüntüleneceğini söylüyor. İkinci seçicide, p etiketinin içine yerleştirilmiş tüm güçlü öğeler için aynı şey olacaktır:

  Bu başlık kırmızı renkte görünür

  
  

  düz metin, kırmızı metin