Css kodunu html'ye ekleme. CSS ekleme

http-equiv="Content-Style-Type" özelliği şunu belirtir: bu eleman META stil sayfasını ifade eder ve content = "text/css" özelliği stil sayfalarının CSS dilinde yazılacağını belirtir. Stillerin bir HTML belgesine nasıl eklendiğini anlamak için süreçte oluşturduğumuz ilk belge örneğine geri dönelim. HTML öğrenme. Bunun "Dom" inşaat şirketinin açıklamasını içeren bir sayfa olduğunu hatırlatmama izin verin. Şöyle görünüyordu:

Diyelim ki başlık rengini mevcut siyahtan yeşile değiştirmek istedik. Daha sonra doğrudan H1 öğesine tasarım stilini belirleyen ek bir özellik yazabiliriz:

Stil niteliği herhangi bir HTML öğesinin stilini belirtmek için kullanılabilir. Tırnak içinde belirtilir CSS kuralı, öğenin nasıl stillendirilmesi gerektiğini açıklar. İÇİNDE bu durumda renk ayarlandı ve belirtildi belirli renk(yeşil Yeşil). CSS, bir parametreyi değerinden ayırmak için iki nokta üst üste kullanır.

Dahili stil sayfaları

kullanılarak bir HTML öğesi içinde tanımlanan bir stil sayfası stil özelliği, dahili olarak adlandırılır.

Dahili stil sayfalarının dezavantajı, evrensel olmama. Stil özelliğinin kullanılması belgede yalnızca bir başlığın yeşile dönmesine neden olur. Geri kalanı için stil özelliğini de aynı şekilde ayarlamanız veya üçlü bir stil sayfası oluşturmanız gerekir.

Yerleşik stil sayfaları

Satır içi tablolar, bir HTML belgesine, belgenin HEAD bölümündeki STYLE etiketleri arasına eklenir. Örneğin, tüm birinci düzey başlıkları yeşil yapmak için bunun gibi bir satır içi tablo yazabilirsiniz.

Bu derste eklemenin farklı yollarına bakacağız. CSS stilleri web sayfasına.

Stilleri doğrudan bir HTML öğesine ekleme

Style niteliğini kullanarak bir HTML öğesine stil ekleyebilirsiniz. Bu durumda stil yalnızca o öğeyi etkileyecektir. Bir web sitesi tasarlarken bu yöntemi kullanmamak daha iyidir.

Lorem ipsum dolor sit amet. Porro quisquam tahmini

Lorem ipsum dolor sit amet. Porro quisquam est, qui dolorem ipsum, quia voluptas.

HTML belgesine stil ekleme

Bir HTML belgesinin başlık bölümündeki web sayfası öğelerine stiller ekleyebilirsiniz. Bu durumda stiller yalnızca bu web sayfasında geçerli olacaktır. Stil sayısı çok fazla değilse bu yöntemin kullanılması önerilir. Bu yöntem aynı zamanda web sayfasının yüklenme hızını da artırır çünkü tarayıcının harici CSS dosyalarını aramasına ve eklemesine gerek yoktur.

.blue-20 (renk: mavi; yazı tipi boyutu: 20px; ) .bg-yellow ( arka plan: sarı; ) ")); )); ... .blue-20 ( renk: mavi; yazı tipi boyutu: 20px ; ) .bg-yellow ( arka plan: sarı ; ) ... ...

Lorem ipsum dolor sit amet. Porro quisquam est, qui dolorem ipsum, quia voluptas.

Lorem ipsum dolor sit amet. Porro quisquam est, qui dolorem ipsum, quia voluptas.

Lorem ipsum dolor sit amet. Porro quisquam est, qui dolorem ipsum, quia voluptas.

Lorem ipsum dolor sit amet. Porro quisquam est, qui dolorem ipsum, quia voluptas.

Harici CSS dosyalarını kullanarak stil ekleme

Kullanarak bir web sayfasına stiller ekleyebilirsiniz. harici dosya CSS. burada bu dosya stiller, başlık bölümüne yerleştirilmesi gereken bağlantı öğesini kullanarak sitedeki herhangi bir sayıdaki sayfaya bağlanabilir.

... ... ...

Lorem ipsum dolor sit amet. Porro quisquam est, qui dolorem ipsum, quia voluptas.

Lorem ipsum dolor sit amet. Porro quisquam est, qui dolorem ipsum, quia voluptas.

Stil dosyalarını bağlamanın bu yöntemi tercih edilir, çünkü dosyaların HTML belgesinde belirtildikleri sırayla yüklenmesini sağlar (@import'un aksine). Bu yöntem aynı zamanda web sayfasının yüklenme hızını da artırır çünkü CSS dosyaları aynı anda yüklenir. Bir siteyi harici CSS dosyaları kullanarak uygulamak, stilleri düzenlemeyi ve sitenin tasarımını değiştirmeyi kolaylaştırır. Sonuç olarak, dileğiniz hakkında yorum yapabilirsiniz Google, tüm stillerin tek bir harici dosyaya yerleştirilmesini önerir; bu da daha fazla stile yol açar hızlı yükleme alan.

@import kullanarak stiller ekleme

HTML belgesinin stil bloğunun en üstüne yerleştirilmesi gereken @import yapısını kullanarak da CSS dosyaları ekleyebilirsiniz. Bu yöntem önerilmez çünkü CSS dosyalarının sıralı olarak yüklenmesini garanti etmez. Ayrıca kullanımı web sayfasının işleyişinde hatalara yol açabilir (Örneğin: betiğin yüklenmesi, bağlı olduğu stillerin yüklenmesinden daha önce tamamlanabilir).

... @import url("url olarak dosya yolu"); @import "dosyanın yolu"; ... ...

Lorem ipsum dolor sit amet. Porro quisquam est, qui dolorem ipsum, quia voluptas.

Lorem ipsum dolor sit amet. Porro quisquam est, qui dolorem ipsum, quia voluptas.

CSS dosyalarını dinamik olarak bağlama

Bazen dinamik olarak bağlanmanız gereken durumlar olabilir CSS dosyası web sayfasına. Bu yöntem, jQuery kütüphanesinin ekleme yöntemi kullanılarak uygulanabilir.

$(document).ready(function())( $("head").append($("")); ));

Not: Kullanırken Bu method bağlanmayı unutma jQuery kütüphanesi web sayfanıza:

Bir HTML belgesine dinamik olarak stiller ekleme $(document).ready(function())( $("head").append($(".blue-20 (color: blue; font-size: 20px; ) .bg- sarı ( arka plan: sarı; )")); )); Stil Önceliği ve CSS Küçültme

Stiller ayarlanabildiğinden Farklı yollar, o zaman bir yöntemin diğerine göre önceliğini bilmeniz gerekir. En yüksek önceliğe sahip stiller, style niteliği kullanılarak doğrudan HTML öğesine eklenen stillerdir. Bir HTML belgesine gömülü stiller, harici CSS dosyaları olarak eklenen stillere göre önceliklidir.

Harici dosya sample.css içeriği --- .red ( color: red; ) --- İçerik HTML belgesi--- .mavi ( renk: mavi; ) ... ...

Lorem ipsum dolor sit amet. Sunt, açıklanması gereken bir şey değil, aynı şekilde icat edildi.

Bu örneğin çalıştırılmasının bir sonucu olarak, metin sarı, Çünkü stil niteliği kullanılarak belirtilen stil en yüksek önceliğe sahiptir. Bir değere sahip stil özelliğini kaldırıp sayfayı yenilerseniz metin rengi artık mavi olacaktır, çünkü belgenin içinde belirtilen stil, harici dosyadaki stillerden daha yüksek önceliğe sahiptir.

CSS'yi küçült

CSS dosyalarının küçültülmesi (kod küçültülmesi), boyutlarının küçültülmesi için tasarlanmıştır; bu da site yükleme hızının ve performansının artmasına yol açar. Örnek olarak CSSTidy iyileştiriciyi kullanarak bir CSS dosyasının boyutunu küçültme sürecine bakalım.

Programı çalıştırın " cmd ( Komut satırı)", buraya csstidy.exe programının adını yazıp parametre olarak belirtiyoruz Orijinal dosya CSS ve küçültülmüş dosya adı.

Küçültme işleminin sonucu, giriş boyutunu, küçültülmüş dosya boyutunu ve sıkıştırma yüzdesini gösteren şekilde gösterilmektedir.

Ekleme seçenekleri ve CSS kullanma bir HTML belgesine.

CSS Basamaklı Stil Şablonu — Basamaklı Stil Şablonu) - açıklama teknolojisi dış görünüş Biçimlendirme dilinde yazılmış belge.

CSS'yi HTML'ye eklemenin birkaç yolu vardır.

Stil özelliği aracılığıyla CSS özelliklerini belirtme

Stil özelliği (İngilizce'den. stil) - karşılık gelen öğenin stil bilgisini tanımlar. Stil özelliği neredeyse tüm belge öğelerine uygulanır. Örneğin:

stil kullanma örneği

color:red stilinin kullanılması kırmızı bir dizeyle sonuçlanacaktır. Bu seçeneği kullanmanın amacı tek bir belge öğesi için CSS özelliklerini tanımlayabilmektir.

CSS kurallarını stil kapsayıcısına ekleme

Etiket stili (İngilizce'den. stil) - web sayfası öğelerinin stillerini tanımlamak için kullanılır. Stil etiketinin başlık kabının içine yerleştirilmesi gerektiğine dikkat edilmelidir. Örneğin:

p (renk:kırmızı; )

type özelliği, tarayıcıya stilleri doğru şekilde yorumlamak için hangi sözdiziminin kullanılacağını bildirir. Bizim durumumuzda öyle metin/css.

Bu seçeneği kullanmanın amacı, birden fazla seçici için CSS kurallarını tanımlayabilmektir. Yukarıdaki örnekte p seçicisi için tanımlanmıştır CSS renk özelliği kırmızı gibi.

Bağlantı etiketini kullanarak bir CSS dosyası ekleme

Bağlantı etiketi harici bir belgeye, bizim durumumuzda bir CSS dosyasına bağlantı kurar. Bağlantı etiketinin her zaman başlık kabının içine yerleştirildiğine dikkat edilmelidir. Örneğin:

Bu durumda, rel özelliği geçerli belge ile dosya arasındaki ilişkiyi tanımlar stil.css, Nasıl stil sayfası(İngilizceden) stil sayfası). Anlam tür özelliği dahil edilen dosyanın MIME veri türüdür; metin/css. Son href özelliği, dahil edilen CSS dosyasının yolunu içerir.

Bu seçeneği kullanmanın amacı mevcut belgeye bağlanabilmektir. harici CSS dosyaları, CSS kurallarını kopyalamanıza gerek kalmadan.

CSS Kurallarını İçe Aktarma

@import komutu (İngilizce'den) içe aktarmak) - CSS dosyasının geçerli stil sayfasına eklenmesi dışında bağlantı etiketine benzer. Örneğin:

@import url("/style/header.css"); p (renk:kırmızı; )

Stil sayfaları bir web sayfasına üç şekilde eklenebilir: Farklı yollar, yetenekleri bakımından farklılık gösterir.

İlgili stil sayfaları

En güçlü ve uygun yol Site için stilleri ve kuralları tanımlamak. Stiller şurada saklanır ayrı dosya, herhangi bir web sayfası için kullanılabilir. İlgili stillerin bir tablosunu eklemek için sayfa başlığında bir etiket kullanın (örnek 1).

Örnek 1: Bağlantılı bir stil sayfasını bağlama

Stiller Merhaba dünya!

Stil sayfası dosyasının yolu, şekilde gösterildiği gibi göreli veya mutlak olabilir. bu örnekte.

Bu yöntemin avantajları

Bir stil dosyası herhangi bir sayıda web sayfası için kullanılır; onu diğer sitelerde de kullanmak mümkündür.

Web sayfalarını değiştirmeden stil sayfasını değiştirebilirsiniz.

Tek bir dosyadaki stili değiştirdiğinizde, stil, kendisine bağlantı bulunan tüm sayfalara otomatik olarak uygulanır. Şüphesiz uygun. Yazı tipi boyutunu yalnızca tek bir yerde belirleriz ve sitemizin yüzlerce veya daha fazla web sayfasında değişir.

Stil dosyası ilk yüklendiğinde web sayfalarından ayrı olarak yerel bilgisayarınızda önbelleğe alınır, böylece site daha hızlı yüklenir.

Küresel stil sayfaları

Stil belgenin kendisinde tanımlanır ve genellikle web sayfasının başlığında bulunur. Esneklik ve yetenekler açısından, bu stil kullanma yöntemi öncekinden daha düşüktür, ancak aynı zamanda tüm stilleri tek bir yere yerleştirmenize de olanak tanır. Bu durumda, doğrudan belgenin gövdesinde. Stil tanımı bir etiketle belirtilir (örnek 2).

Örnek 2: Global stil sayfasını kullanma

H1 stilleri ( yazı tipi boyutu: 120%; /* Yazı tipi boyutu */ yazı tipi ailesi: Verdana, Arial, Helvetica, sans-serif; /* Yazı tipi ailesi */ color: #336; /* Metin rengi */ ) Merhaba, dünya!

Bu örnek, başlık stilindeki değişikliği göstermektedir. Bir web sayfasında artık yalnızca bu etiketi belirtmeniz yeterlidir; stiller otomatik olarak buna eklenecektir.

Dahili stiller

Satır içi stiller aslında bir web sayfasında kullanılan tek bir etiketin uzantısıdır. Stil özelliği bir stili tanımlamak için kullanılır ve değerleri bir stil sayfası dili kullanılarak belirtilir (örnek 3).

Örnek 3: Dahili Stilleri Kullanma

Stiller Merhaba dünya!

Bir dizi öğeyi değiştirmek sorun yaratacağından, tek etiketler için iç stilin kullanılması veya hiç kullanılmaması önerilir. İçerik ve tasarımı birbirinden ayrıldığında, iç stiller yapısal bir belgenin ideolojisine karşılık gelmez.

Açıklanan tüm CSS kullanma yöntemleri, bağımsız olarak veya birbirleriyle kombinasyon halinde kullanılabilir. Bu durumda hiyerarşilerini hatırlamak gerekir. Her zaman önce dahili stil uygulanır, ardından global stil sayfası ve en son da ilgili stil sayfası uygulanır. Örnek 4, bir belgeye stil sayfaları eklemek için iki yöntem kullanır.

Örnek 4. Kombinasyon farklı yöntemler stilleri birleştirme

H1 stilleri ( yazı tipi boyutu: %120; yazı tipi ailesi: Arial, Helvetica, sans-serif; renk: yeşil; ) Merhaba dünya! Selam Dünya!

Verilen örnekte ilk başlık 36 piksel kırmızıya, sonraki başlık ise 36 piksel kırmızıya ayarlanmıştır. yeşil ve farklı bir yazı tipi.

CSS (Basamaklı Stil Sayfaları) veya basamaklı stil sayfaları, biçimlendirme dilinde yazılmış bir belgenin görünümünü tanımlamak için kullanılır. Tipik olarak CSS stilleri, web sayfası öğelerinin stilini oluşturmak ve değiştirmek için kullanılır. Kullanıcı arayüzleri yazılmış HTML dilleri ve XHTML'dir ancak XML, SVG ve XUL dahil her türlü XML belgesine de uygulanabilir.

Basamaklı stil sayfaları, özellikleri ve bu özellikler için izin verilen değerleri kullanarak öğeleri biçimlendirmeye yönelik kuralları açıklar. Her öğe için sınırlı sayıda özellik kullanabilirsiniz; diğer özelliklerin üzerinde herhangi bir etkisi olmayacaktır.

Bir stil bildirimi iki bölümden oluşur: bir web sayfası öğesi, seçici ve bir biçimlendirme komutu, bildirim bloğu. Seçici, tarayıcıya hangi öğenin biçimlendirileceğini ve bildirim bloğunda (kod kıvırcık parantez) biçimlendirme komutları listelenir - özellikler ve değerleri.

Pirinç. 1. CSS stili bildirim yapısı Türler basamaklı tablolar stiller ve özellikleri 1. Stil sayfası türleri 1.1. Harici stil sayfası

Harici stil sayfası Metin dosyasıÖğeler için bir dizi CSS stili içeren .css uzantısıyla. Dosya, tıpkı bir HTML sayfası gibi bir kod düzenleyicide oluşturulur. Dosya, HTML işaretlemesi olmadan yalnızca stiller içerebilir. Harici bir stil sayfası, bölümün içinde bulunan etiketi kullanarak bir web sayfasına bağlanır. Bu stiller sitenin tüm sayfalarında çalışır.

Etiketin medya özelliğinde bu stil sayfasının amacını belirterek, sırayla birkaç etiket ekleyerek her bir web sayfasına birden fazla stil sayfası ekleyebilirsiniz. rel = "stylesheet" bağlantının türünü belirtir (bir stil sayfasına bağlantı).

type = "text/css" özelliği HTML5 standardı tarafından gerekli değildir, dolayısıyla atlanabilir. Öznitelik eksikse varsayılan değer type="text/css" olur.

1.2. Dahili stiller

Dahili stiller HTML belgesinin bir bölümüne gömülür ve . Dahili stiller harici stillere göre önceliklidir ancak satır içi stillerden (stil özelliği aracılığıyla belirtilir) daha düşüktür.

h1, h2 (renk: kırmızı; yazı tipi ailesi: "Times New Roman", Georgia, Serif; satır yüksekliği: 1,3em; ) ...

1.3. Yerleşik stiller

Satır içi stiller yazdığımızda, stil özelliğini kullanarak CSS kodunu HTML dosyasına doğrudan öğe etiketinin içine yazıyoruz:

Bu metne dikkat edin.

Bu tür stiller yalnızca ayarlandığı öğeyi etkiler.

1.4. @içe aktarma kuralı

@import kuralı harici stil sayfaları yüklemenize olanak tanır. @import yönergesinin çalışması için stil sayfasında (harici veya dahili) diğer tüm kurallardan önce görünmesi gerekir:

@import url(mobile.css); p (yazı tipi boyutu: 0,9em; renk: gri; )

@import kuralı aynı zamanda web yazı tiplerini dahil etmek için de kullanılır:

@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);

2. Seçici türleri

Seçiciler bir web sayfasının yapısını temsil eder. Web sayfası öğelerini biçimlendirmek için kurallar oluşturmaya yardımcı olurlar. Seçiciler öğeler, bunların sınıfları ve tanımlayıcıları olabileceği gibi sözde sınıflar ve sözde öğeler de olabilir.

2.1. Evrensel seçici

Herhangi bir HTML öğesiyle eşleşir. Örneğin, * (kenar boşluğu: 0;) sıfıra sıfırlanacaktır kenar boşlukları tüm site öğeleri için. Seçici aynı zamanda sözde sınıf veya sözde öğeyle birlikte de kullanılabilir: *:after (CSS stilleri), *:checked (CSS stilleri) .

2.2. Öğe seçici

Öğe seçiciler tüm öğeleri biçimlendirmenize olanak tanır bu türden sitenin tüm sayfalarında. Örneğin, h1 (yazı tipi ailesi: Lobster, cursive;), tüm h1 başlıkları için genel biçimlendirme stilini ayarlayacaktır.

2.3. Sınıf seçici

Sınıf seçiciler, aynı sınıf adına yerleştirilmiş bir veya daha fazla öğeye stil uygulamanıza olanak tanır farklı yerler sayfalarda veya farklı sayfalar alan. Örneğin, başlık sınıfına sahip bir başlık oluşturmak için, açılış etiketine değer başlığına sahip bir sınıf niteliği eklemeniz ve belirtilen sınıf için stil ayarlamanız gerekir. Bir sınıf kullanılarak oluşturulan stiller, o türden olması gerekmeyen diğer öğelere de uygulanabilir.

Kullanım için talimatlar kişisel bilgisayar.headline ( text-transform: büyük harf; renk: açık mavi; )

2.4. Kimlik seçici

Kimlik seçici belirli bir öğeyi biçimlendirmenize olanak tanır. Kimlik benzersiz olmalı ve bir sayfada yalnızca bir kez görünmelidir.

#kenar çubuğu ( genişlik: 300 piksel; kayan nokta: sol; )

2.5. Alt seçici

Alt seçiciler, stilleri bir kap öğesi içindeki öğelere uygular. Örneğin, ul li (text-transform: büyük harf;) - tüm ul öğelerinin çocukları olan tüm li öğelerini seçecektir.

Belirli bir öğenin alt öğelerini biçimlendirmek istiyorsanız, o öğeye bir stil sınıfı vermeniz gerekir:

p.ilk a (renk: yeşil;) — bu tarz sınıfı ilk olan bir paragrafın soyundan gelen tüm bağlantılara uygulanacaktır;

p .first a (renk: yeşil;) - boşluk eklerseniz, öğenin soyundan gelen herhangi bir .first class etiketinin içinde yer alan bağlantılar stillendirilecektir

Öncelikle a (renk: yeşil;) - bu stil, class.first tarafından belirtilen, başka bir öğenin içinde bulunan herhangi bir bağlantıya uygulanacaktır.

2.6. Çocuk seçici

Bir alt öğe, kendisini kapsayan öğenin doğrudan çocuğudur. Bir öğenin birden fazla alt öğesi olabilir, ancak her öğenin yalnızca bir ana öğesi olabilir. Çocuk seçici, yalnızca alt öğe ana öğenin hemen ardından gelirse ve aralarında başka öğe yoksa, yani alt öğe başka hiçbir şeyin içinde yuvalanmamışsa stilleri uygulamanıza olanak tanır.
Örneğin, p > güçlü, p öğesinin çocukları olan tüm güçlü öğeleri seçecektir.

2.7. Kardeş seçici

Kardeşlik, ortak bir ebeveyni paylaşan unsurlar arasında meydana gelir. Kardeş seçiciler aynı seviyedeki bir grup öğeden öğe seçmenize olanak tanır.

h1 + p - kalan paragrafları etkilemeden herhangi bir etiketin hemen ardından gelen ilk paragrafların tümünü seçecektir;

h1 ~ p - herhangi bir h1 başlığının kardeş olan ve hemen sonrasındaki tüm paragrafları seçecektir.

2.8. Özellik seçici

Öznitelik seçiciler, öznitelik adına veya öznitelik değerine göre öğeleri seçer:

[öznitelik] - belirtilen özniteliği içeren tüm öğeler - alt özniteliğin belirtildiği tüm öğeler;

seçici[öznitelik] - belirtilen özniteliği içeren bu türdeki öğeler, img - yalnızca alt özniteliğin belirtildiği görüntüler;

seçici[öznitelik = "değer"] - belirli bir değere sahip belirtilen niteliği içeren bu türden öğeler, img - başlığı çiçek kelimesini içeren tüm resimler;

selector[attribute~="value"] - kısmen aşağıdakileri içeren öğeler verilen değerörneğin, boşlukla ayrılmış bir öğe için birkaç sınıf belirtilmişse, p - sınıf adı özelliği içeren paragraflar;

seçici[attribute|="value"] - nitelik değerleri listesi belirtilen kelimeyle başlayan öğeler, p - sınıf adı feature olan veya feature ile başlayan paragraflar;

seçici[attribute^="değer"] - öznitelik değeri belirtilen değerle başlayan öğeler, a - http:// ile başlayan tüm bağlantılar;

seçici[attribute$="value"] - öznitelik değeri belirtilen değerle biten öğeler, img - png formatındaki tüm görüntüler;

selector[attribute*="value"] - nitelik değeri herhangi bir yerde belirtilen kelimeyi içeren öğeler, a - adı kitap içeren tüm bağlantılar.

2.9. Sözde sınıf seçici

Sözde sınıflar aslında HTML etiketlerine eklenmemiş sınıflardır. Bir olay meydana geldiğinde veya belirli bir kurala uyduğunda CSS kurallarını öğelere uygulamanıza olanak tanır. Sözde sınıflar, elemanları aşağıdaki özelliklerle karakterize eder:

:hover - fare imlecinin üzerine gelindiği herhangi bir öğe;

:focus - klavye kullanılarak yönlendirilen veya fare kullanılarak etkinleştirilen etkileşimli bir öğe;

:aktif - kullanıcı tarafından etkinleştirilen öğe;

:valid - içerikleri tarayıcıda belirtilen veri türüne uygunluk açısından kontrol edilen form alanları;

:geçersiz — içeriği belirtilen veri türüyle eşleşmeyen form alanları;

:etkin - tümü aktif alanlar formlar;

:disabled — form alanları engellendi, yani etkin olmayan durumda;

:in-range - değerleri belirtilen aralıkta olan form alanları;

:aralık dışı - değerleri belirtilen aralıkta olmayan form alanları;

:lang() - belirtilen dilde metin içeren öğeler;

:not(selector) - belirtilen seçiciyi içermeyen öğeler - sınıf, tanımlayıcı, ad veya form alanı türü - :not() ;

:target, belgede başvurulan # sembolüne sahip bir öğedir;

:checked — seçilen (kullanıcı tarafından seçilen) form öğeleri.

2.10. Yapısal sözde sınıf seçici

Yapısal sözde sınıflar, alt öğeleri parantez içinde belirtilen parametreye göre seçer:

:nth-child(odd) - tek alt öğeler;

:nth-child(even) - hatta alt öğeler;

:nth-child(3n) - çocuklar arasındaki her üç elementten biri;

:nth-child(3n+2) - ikinci çocuktan (+2) başlayarak her üç öğeyi seçer;

:nth-child(n+2) - ikinciden başlayarak tüm öğeleri seçer;

:nth-child(3) - üçüncü alt öğeyi seçer;

:nth-last-child() - alt öğeler listesinde, şu öğeyi seçer: belirtilen konum,:nth-child()'a benzer, ancak sonuncusundan başlayarak ters yönde;

:first-child - etiketin yalnızca ilk alt öğesine stil vermenizi sağlar;

:last-child - etiketin son alt öğesini biçimlendirmenizi sağlar;

:only-child - tek alt öğe olan öğeyi seçer;

:empty - çocuğu olmayan öğeleri seçer;

:root - belgedeki kök öğeyi seçer - HTML öğesi.

2.11. Yapısal tip sözde sınıf seçici

Belirli bir alt etiket türünü belirtir:

:nth-of-type() - :nth-child()'a benzer öğeleri seçer, ancak yalnızca öğenin türünü dikkate alır;

:first-of-type - belirli bir türün ilk çocuğunu seçer;

:türün sonuncusu - seçer son eleman bu türden;

:nth-last-of-type() - sondan başlayarak, belirtilen konuma göre öğeler listesinde verilen türdeki bir öğeyi seçer;

:only-of-type - tek bir öğeyi seçer belirtilen tür ana öğenin alt öğeleri arasında.

2.12. Sözde eleman seçici

Sözde öğeler, content özelliği kullanılarak oluşturulan içeriği eklemek için kullanılır:

:first-letter - her paragrafın ilk harfini seçer, yalnızca blok öğelere uygulanır;

:first-line - öğe metninin ilk satırını seçer, yalnızca blok öğelerine uygulanır;

:before - oluşturulan içeriği öğenin önüne ekler;

:after - oluşturulan içeriği öğeden sonra ekler.

3. Seçici kombinasyonu

Biçimlendirme için öğeleri daha doğru seçmek amacıyla seçici kombinasyonlarını kullanabilirsiniz:

img:nth-of-type(even) - tüm çift resimleri seçer, alternatif metin hangisini içerir kelime css.

4. Seçicilerin gruplandırılması

Aynı stil birden fazla öğeye aynı anda uygulanabilir. Bunu yapmak için gerekli seçicileri bildirimin sol tarafında virgülle ayırarak listelemeniz gerekir:

H1, h2, p, span ( renk: domates; arka plan: beyaz; )

5. Kalıtım ve kademelendirme

Kalıtım ve çağlayan - iki temel kavramlar CSS'de yakından ilişkilidir. Kalıtım, öğelerin özellikleri ebeveynlerinden (onları içeren öğe) devraldığı yerdir. Çağlayan kendini nasıl gösterir? farklı şekiller stil sayfalarının bir belgeye uygulandığı ve çelişen kuralların birbirini nasıl geçersiz kıldığı.

5.1. Miras

Kalıtım, belirli özelliklerin atadan onun soyundan gelenlere aktarıldığı mekanizmadır. CSS spesifikasyonu, renk, yazı tipi, harf aralığı, satır yüksekliği, liste stili, metin hizalama, metin girintisi, metin dönüşümü, görünürlük, beyaz gibi sayfanın metin içeriğiyle ilgili özelliklerin devralınmasına izin verir. -boşluk ve sözcük aralığı. Çoğu durumda bu kullanışlıdır çünkü web sayfasındaki her öğe için yazı tipi boyutunu ve yazı tipi ailesini ayarlamanıza gerek yoktur.

Blok biçimlendirmeyle ilgili özellikler devralınmaz. Bunlar arka plan, kenarlık, görüntü, kayan ve temizle, yükseklik ve genişlik, kenar boşluğu, minimum-maks-yükseklik ve -genişlik, anahat, taşma, dolgu, konum, metin-dekorasyon, dikey hizalama ve z-index'tir.

Zorunlu miras

Kullanarak anahtar kelime inherit, bir öğeyi üst öğesinin herhangi bir özellik değerini devralmaya zorlayabilir. Bu, varsayılan olarak devralınmayan özellikler için bile işe yarar.

CSS stilleri nasıl ayarlanır ve çalışır?

1) Stiller ana öğeden miras alınabilir (miras alınan özellikler veya devralınan değer kullanılarak);

2) Aşağıdaki stil sayfasında yer alan stiller, yukarıdaki tabloda yer alan stilleri geçersiz kılar;

3) Bir öğenin stilleri uygulanabilir farklı kaynaklar. Tarayıcı geliştirici modunda hangi stillerin uygulandığını kontrol edebilirsiniz. Bunu yapmak için öğeye tıklayın sağ tık farenizi seçin ve “Kodu görüntüle”yi (veya benzer bir şeyi) seçin. Sağdaki sütun, bu öğe üzerinde ayarlanan veya bir üst öğeden miras alınan tüm özellikleri, bunların belirtildiği stil dosyalarıyla birlikte listeleyecektir ve seri numarası Kod satırları.

Pirinç. 2. Geliştirici modu Google tarayıcısı Krom

4) Bir stil tanımlarken, herhangi bir seçici kombinasyonunu kullanabilirsiniz - bir öğe seçici, bir öğe sözde sınıfı, bir sınıf veya bir öğe tanımlayıcı.

div (kenarlık: 1px katı #eee;) #wrap (genişlik: 500px;).kutu (kayan nokta: sol;).clear (clear: her ikisi de;)

5.2. Çağlayan

Basamaklılaştırma, aynı öğeye farklı CSS kurallarının uygulandığı bir durumda nihai sonucu kontrol eden bir mekanizmadır. Özelliklerin uygulanma sırasını belirleyen üç kriter vardır: Önemli kural, özgüllük ve stil sayfalarının dahil edilme sırası.

Kural!önemli

Bir kuralın ağırlığı, özellik değerinden hemen sonra eklenen!important anahtar sözcüğü kullanılarak belirtilebilir; örneğin, span (font-weight: kalın!important;) . Kural, bildirimin sonuna, kapanış parantezinden önce, boşluk bırakılmadan yerleştirilmelidir. Bu duyuru diğer tüm kuralların üzerinde öncelikli olacaktır. Bu kural, stil dosyasına doğrudan erişimin olmadığı durumlarda, bir özellik değerini iptal etmenize ve bir öğe grubundan bir öğe için yeni bir değer ayarlamanıza olanak tanır.

özgüllük

Tarayıcı, her kural için seçicinin özgüllüğünü hesaplar ve bir öğenin çelişen özellik bildirimleri varsa, en yüksek özgüllüğe sahip kural dikkate alınır. Özgüllük değerinin dört bölümü vardır: 0, 0, 0, 0. Seçici özgüllüğü şu şekilde tanımlanır:

kimlik için 0, 1, 0, 0 eklenir;
sınıf 0 için 0, 1, 0 eklenir;
her öğe ve sözde öğe için 0, 0, 0, 1 eklenir;
doğrudan bir öğeye eklenen satır içi stil için - 1, 0, 0, 0;
Evrensel bir seçicinin hiçbir özelliği yoktur.

H1 (renk: açık mavi;) /*özgüllük 0, 0, 0, 1*/ em (renk: gümüş;) /*özgüllük 0, 0, 0, 1*/ h1 em (renk: altın;) /*özgüllük: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about (renk: mavi;) /*özgüllük: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .kenar çubuğu (renk: gri;) /*özgüllük 0, 0, 1, 0 */ #kenar çubuğu (renk: turuncu;) /*özgüllük 0, 1, 0, 0*/ li#kenar çubuğu (renk: mavi;) /*belirlilik: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

Sonuç olarak, daha spesifik olan kurallar öğeye uygulanacaktır. Örneğin, bir öğenin 0, 0, 0, 2 ve 0, 1, 0, 1 değerlerine sahip iki özelliği varsa, o zaman ikinci kural kazanacaktır.

Bağlı tabloların sırası

Birden fazla harici stil sayfası oluşturabilir ve bunları tek bir web sayfasına bağlayabilirsiniz. Eğer içindeyse farklı tablolar buluşacak Farklı anlamlar Bir öğenin özelliklerini belirlerseniz sonuç olarak aşağıda listelenen stil sayfasındaki kural öğeye uygulanacaktır.