Basamaklı (katmanlı) stil sayfaları - basamaklı stil sayfaları (CSS) bir tarayıcıda verilerin sunumunu tanımlayan güçlü bir metin tabanlı standarttır. HTML, bir belgenin bileşimi hakkında bilgi sağlarken, stil sayfaları size belgenin nasıl görünmesi gerektiğini söyler. Böylece, basamaklı stil sayfaları, içeriği sunumundan ayrı tutma yeteneği sağlar. Bir stil, her tür tasarım öğesini içerir: yazı tipi, arka plan, metin, bağlantı renkleri, kenar boşlukları ve sayfadaki nesnelerin konumu. CSS, metin ve grafiklerin yerleşimi üzerinde daha fazla kontrol sağlamak için tasarlanmıştır. Basamaklı stil sayfaları, site tasarımı sırasında yalnızca HTML ile elde edilemeyen bir düzeyde tutarlılık, organizasyon ve kontrol sağlar.

CSS, 3 tür stil sayfası olduğunu varsayar - satır içi, gömülü (dahili) ve bağlantılı (harici).

HTML belgelerini CSS ile biçimlendirme fikri ilk olarak 1996 yılında W3C tarafından önerildi. 1998'de güncellenen bu öneri, bugüne kadar Web geliştiricileri tarafından kullanılmaktadır.

Kelime ne anlama geliyor "basamaklı"?"Kademeli" terimi, aynı HTML sayfasında farklı stillerin kullanılabileceği anlamına gelir. Stil sayfalarını destekleyen bir tarayıcı, stil bilgilerini yorumlayarak sıralarını (kaskad olarak) izleyecektir. Bu, her üç stil türünü de kullanabileceğiniz ve tarayıcının önce bağlantılı stilleri, ardından gömülü stilleri ve son olarak satır içi stilleri yorumlayacağı anlamına gelir. Tüm siteye stil örnekleri uygulasanız bile, gömülü stiller kullanarak sayfaların belirli yönlerini ve gömülü stiller kullanarak bu sayfalardaki belirli alanları kontrol edebilirsiniz. Basamaklamanın bir başka yönü de miras (miras). Kalıtım, aksi belirtilmedikçe, belirli bir stilin HTML sayfasının diğer öğeleri tarafından devralınacağı anlamına gelir. Örneğin, etikete belirli bir metin rengi uygularsanız <р> , aksi belirtilmedikçe bu paragraftaki tüm etiketler bu rengi devralır.

Stil sayfalarının bir HTML belgesine uygulanabileceği birkaç teknik vardır. Sözdizimi, stil sayfasında yer alan bilgilerin gerçek yapısıyla eşleşir.

Bir HTML belgesine stil sayfası uygulamak için üç yöntem vardır:

Çizgide. Bu yöntem, herhangi bir HTML etiketi almanıza ve ona stil eklemenize olanak tanır. Yerleşik yöntemi kullanmak, bir Web sayfasının tüm özellikleri üzerinde size maksimum kontrol sağlar. Tek bir paragrafın görünümünü tanımlamak istediğinizi varsayalım. Bir paragraf etiketine basitçe bir stil niteliği ekleyebilirsiniz ve tarayıcı, kodunuza eklediğiniz stil seçeneklerini kullanarak bu paragrafı oluşturacaktır.

gömülü Gömme, tüm HTML sayfasını kontrol etmenizi sağlar. etiketi kullanırken ... Bu durumda, sayfada bulunan öğeler için bu stilleri kullanabilirsiniz. Parametre type = "metin / css" zorunludur ve tarayıcıya CSS kullanma talimatı vermeye yarar.

3. Belge etiketlerine gömme

Üçüncü seçenek, stil açıklamasının doğrudan tanımladığınız öğenin etiketinin içinde yer almasıdır. Bu ile yapılır parametre STİL çoğu standart HTML etiketiyle CSS uygularken kullanılır. Bu yöntem istenmeyen, CSS'nin ana avantajlarından birinin kaybına yol açar - bilgileri, bilgilerin görünümünün açıklamasından ayırma yeteneği. Ancak, yalnızca bir öğeyi tanımlamanız gerekiyorsa, stil açıklamasının konumu için bu seçenek de oldukça uygundur.

4. İthalat

etikette , ve sayfadaki tüm stil açıklamalarını normal metin olarak görüntüler. Bunu önlemek için stil açıklamalarınızı bir yorum etiketine sarmanız gerekir. Bu çok basit bir şekilde yapılır.





Etiket

Daha önce belirtildiği gibi, stil sayfaları düzenlenmesi kolay metin dosyalarında saklanır. Elle oluşturmaları zor değildir, ancak örneğin popüler Microsoft FrontPage programı gibi özel stil sayfası düzenleyicileri vardır.

Stil sayfaları, bir veya daha fazla etiket için bir stil tanımlamanıza olanak tanır. Örneğin, etiketlerin stillerini tanımlayan bir stil sayfası oluşturabilirsiniz.

,

,

VE ... Her tanım denir kural (kural e). Kural şunları içerir: seçici(HTML etiketi) ardından beyanname(stil tanımı). Seçici, tanım ve etiket arasındaki bağlantıdır. Aşağıda, başlık etiketlerinin her biri için stili belirleyen bir kural örneği verilmiştir.

:

H1 (renk: mavi)

Beyanname kaşlı ayraçlar içine alınır. Her bildirimin iki bölümü vardır: iki nokta ile ayrılmış özellik adı ve ona atanan değer. HTML'de, aşağıda tartışılacak olan düzinelerce özellik (yazı tipi boyutu, yazı tipi stili, renk, kenar boşluğu, vb.) vardır. Her özellik, biri varsayılan olarak kendisine atanan birkaç değer alabilir.

Önceki örnekte, yalnızca bir renk özelliği belirtildi. Ancak hiçbir şey, bir etikette bir dizi özelliği birbirinden noktalı virgülle ayırarak tanımlamanızı engellemez:

HI (renk: mavi; yazı tipi boyutu: 12pt; metin satırı: orta)

Bu örnekte, görüntüleyici her birinci seviye başlığı 12 punto mavi yazı tipinde oluşturacak ve bunları pencerenin ortasına hizalayacaktır. Diğer tüm özellikler varsayılan değerlerini kullanır (örneğin, yazı tipi stili özelliği normale ayarlanır).

Birkaç etiket için aynı stili tanımlamanız gerekiyorsa, bunları ayrı bir listede listeleyebilirsiniz:

P (yazı tipi boyutu: 12pt)
UL (yazı tipi boyutu: 12pt)
LI (yazı tipi boyutu: 12pt)

HTML, aynı şeyi daha kompakt bir şekilde tek satırda yapmanızı sağlar:

P, UL, LI (yazı tipi boyutu: 12pt)

Burada virgül gereklidir. Atlanırsa, kuralın anlamı değişecektir (bu bölümün ilerisindeki "" bölümüne bakın).

Stil sayfanız daha karmaşık hale geldikçe, muhtemelen bir kuralın amacı hakkında daha fazla bilgi eklemeniz gerekecektir. Yorumlar / * ve * / karakterleri arasına yerleştirilir ve izleyiciler tarafından yok sayılır, örneğin:

BODY (sol kenar: lin) / * 1 inç ofset * /
H1 (sol kenar boşluğu: -lin) / * Sola ofset 1 inç * /
H2 (sol kenar boşluğu: -lin) / * 1 inç sola kaydırma * /

HTML, çok çeşitli stil sayfası özelliklerini tanımlamanıza olanak tanır. Özellik adları, bir tire ile ayrılmış bir ve daha sık olarak iki veya üç kelimedir. Karmaşık isimlerde, ilk kelime genellikle kategoriyi temsil eder ve aynı zamanda özellik adının kısaltmasıdır ("" bölümüne bakınız).

Tablo, HTML stil sayfası özelliklerine genel bir bakış sağlar.Kategori sütunu, bir özelliğin diğer özelliklerle gruplanıp gruplanamayacağını gösterir. Üçüncü sütun, özelliğin alt etiketler tarafından devralınıp devralınmadığı hakkında bilgi içerir (özellik devralma için "" bölümüne bakın).

		Miras
		HTML stil sayfaları, bir sayfa öğesinin arka planını bir renk veya görüntü ile süslemenize olanak tanır. Bundan sonra özelliklerin tüm sayfa için değil, ayrı bir öğe için kullanılmasından bahsedeceğimize dikkat edilmelidir. Örneğin, bir etiket için bir arka plan tanımlarsanız , o zaman yalnızca etiketler bu arka plana sahip olur tüm sayfa: sen L (arka plan resmi: URL (http://www.myserver.com/images/watermark.gif)) W3C Önerileri, sayfa öğeleri için kenarlıklar, kenar boşlukları ve beyaz boşluk tanımlama yeteneği sağlar. Örneğin, başlığın etrafına bir çerçeve koyabilir veya bir paragraf etiketindeki kenar boşluklarını değiştirebilirsiniz.<Р>metnin tüm paragraflarını girintili hale getirmek için. Bu amaçlar için aşağıdaki özellik gruplarını kullanabilirsiniz: border - bir öğenin solunda, sağında, üstünde ve altında bir sınır tanımlamak için kullanılır. Kenarlığın genişliğini, rengini ve stilini ayarlayabilirsiniz. kenar boşluğu - bir öğenin solundaki, sağındaki, üstündeki ve altındaki kenar boşluklarını tanımlamak için kullanılır. Kenar boşluklarının genişliğini de ayarlayabilirsiniz. dolgu - kenarlık ile öğenin içeriği arasındaki boş alanı belirtmek için kullanılır. Bu özellikler, listelerin nasıl görüntüleneceğini belirtmek için kullanılır. Onların yardımıyla, işaretçinin konumunu (özellik listesi-stil-konumu), işaretçinin stilini veya görüntüsünü (özellikler listesi-stil-tipi ve liste-stil-görüntü) değiştirebilirsiniz. Liste özellikleri devralınır, yani etikette bir özellik tanımlanmışsa , tüm etiketler için geçerli olacaktır konteyner UL. Özellikler, görüntüleyicinin metni nasıl görüntüleyeceği üzerinde tam kontrol sağlar. Onların yardımıyla rengi, boyutu, yazı tipini, satır aralığını vb. kontrol edebilirsiniz. Tüm metin özellikleri aşağıda ayrıntılı olarak açıklanacaktır. Yukarıda açıklanan özelliklerin çoğu birbiriyle gruplandırılabilir. Yani, kural yerine H1 (yazı tipi ağırlığı: kalın; yazı tipi stili: normal; yazı tipi boyutu: 12pt; yazı tipi ailesi: serif) daha kısa bir formülasyon yazılabilir: H1 (yazı tipi: kalın normal 12pt serif) HTML stil sayfaları, kenarlık, arka plan, yazı tipi, liste, kenar boşluğu ve dolgu özelliklerini gruplandırmanıza olanak tanır. Grupların her birini ayrı ayrı ele alalım. sınır özellik grubu Kenarlık özelliklerini beş farklı şekilde gruplayabilirsiniz. kullanarak çerçevenin belirli bir tarafı için özellikler tanımlayabilirsiniz. B order-top, border-right, border-bottom VE border-sol veya border kullanarak tüm sınırı bir kerede tanımlayın. Bu özelliklerin her biri ile kenarlığın genişliğini, stilini ve rengini belirleyebilirsiniz, örneğin: b sipariş üstü: ince noktalı siyah Arka plan özellik grubu Arka plan özellik grubunda renk, görüntü, tekrar, ek ve konum için değerler belirtebilirsiniz, örneğin: arka plan: beyaz URL (http://www.myserver.com/image/bg.gif) tekrar-x sabit sol üst yazı tipi özellik grubu Yazı tipi grubuna ağırlık, stil, boyut ve aile değerleri verilebilir, örneğin: yazı tipi: kalın normal 12pt kez, serif Özellik grubunu listele Özellikler, liste stili özelliği kullanılarak gruplandırılır. İşaretçi için görüntüyü, işaretçinin türünü ve konumunu belirtmek mümkündür, örneğin: liste stili: kare URL (http://www.myserver.com/images/marker.gif) içeride Marj özellik grubu Kenar boşluğu grubu için üst, sağ, alt ve sol kenar boşluklarının her biri için bir genişlik tanımlayabilirsiniz, örneğin: kenar boşluğu: 0,5 inç 1 inç ,5 inç 1 inç Yalnızca bir değer belirtilirse, görüntüleyici diğer alanların genişliklerini aynı yapacaktır. Bir veya iki değer belirtmezseniz, değeri belirsiz alanlar zıt alanlarla aynı genişlikte olacaktır. Örneğin, son değeri (sol) atlarsanız, sol kenar boşlukları 1 inç olan sağ kenar boşluklarıyla aynıdır. Dolgu özellik grubu Doldurma Grubunda üst, sağ, alt ve sol için değerler belirtebilirsiniz, örneğin: dolgu: .25in .25in .25in .25in Yalnızca bir değer belirtilirse, görüntüleyici eksik değerlere aynı değeri atar. Bir veya iki değer belirtmezseniz, değeri belirtilmeyen boşluklar zıtlarıyla aynı genişlikte olacaktır. Örneğin, son değeri (sol) atlarsanız, sınırın sol tarafı ile öğenin içeriği arasındaki boş alan sağ taraftaki boşlukla aynı olacaktır. HTML'de alt etiketler, üst etiketlerinin bazı özelliklerini devralır. Örneğin, tüm kapsayıcı etiketleri (< P >ve ) etiketin bazı özelliklerine sahip olacaktır ... Aynı şekilde etiket etiket özelliklerini devralır ... Aşağıdaki kodu göz önünde bulundurun: Merhaba. Bu bir metin paragrafıdır. Bu vurgulanır Bu belgenin stil sayfası, etiketteki rengi belirler < P > mavi, ancak, etiketin rengidir açıkça tanımlanmamıştır (varsayılan siyahtır). Bu etiket üst kapsayıcıda olduğu için burada endişelenecek bir şey yok Ve böylece mavi rengi devralır. Bazen bir etiket için iki (veya daha fazla) stil tanımlamak gerekebilir. Örneğin, bir etiket için iki stil belirtmeniz gerekebilir. : etikete bağlı olduğu durum için bir tane , ve ikincisi etikete bağlı olduğunda ... Bu, bağlamsal seçiciler kullanılarak yapılabilir. Bağlam seçici, belirli bir stilin uygulanacağı etiketlerin tam sırasını belirler. Başka bir deyişle, örneğin etikette bazı stillerin uygulanması gerektiğini belirtebilirsiniz. yalnızca bu etiket etikete bağlıysa : OL LI (liste stili türü: ondalık) Aynı etiket için yalnızca etiketin ikincil olması durumunda geçerli olan farklı bir stil tanımlayabilirsiniz : UL LI (liste stili tipi: kare) Seçici listesinin virgülle ayrılmadığına dikkat edilmelidir. Aksi takdirde, listedeki tüm etiketlere aynı stil atanacaktır. W3C yönergeleri, stil sayfalarına "basamaklı stil sayfaları" olarak atıfta bulunur. " çünkü Web'in düzeni için - sayfalar aynı anda bir değil birkaç tablo kullanılabilir. Bu durumda, izleyici tabloları kullanma sırasını kendisi belirler ve aralarındaki çakışmaları basamaklama ilkesine göre çözer. Örneğin, bir sayfanın stil sayfası sadece yazarı tarafından değil aynı zamanda okuyucu tarafından da tanımlanabilir, bu durumda basamaklı kurallar hangi stil sayfasının geçerli olacağına karar verir. O nasıl çalışır? Tarayıcı, her kurala bir ağırlık faktörü atar. Her bir etiketi yorumlarken, program bu etiketin tüm kurallarına bakar ve bunları ağırlık katsayısının değerine göre sıralar. En "ağır" kural kazanır. Stil sayfaları arasındaki çakışmaları çözmek için aşağıdaki genel ilkeler vardır: Belgedeki stil sayfası türlerinin yaygınlığı (azalan): geçerli stil ayarı (satır içi), gömme (gömme), bağlama (bağlama). Önemli anahtar sözcüğünü kullanarak bir kuralın ağırlığını da değiştirebilirsiniz. Aşağıdaki örnekte, red özelliğinin değeri sütun veya font-family özelliğinin sans-serif değeri bu hizmet sözcüğü ile işaretlenmiştir ve bu nedenle izleyici tarafından geçersiz kılınmamalıdır. Ancak, bu tür iki kural çatışırsa, çatışma yukarıda belirtilen ilkelere göre çözülür. H1 (renk: kırmızı! Önemli yazı tipi ağırlığı: kalın yazı tipi ailesi: sans-serif! Önemli) Sınıf, her biri sayfada istenilen yerde kullanılabilen bir öğenin çeşitli stillerinin tanımıdır. Örneğin, H1 başlık stilinin üç varyasyonunu tanımlayabilirsiniz. Varyasyonları tanımlamak, bir stil belirtmeye benzer, ancak etiket adına bir nokta ile ayrılmış rasgele bir sınıf adı eklenir: H1 mavi (renk: mavi) H1 .kırmızı (renk: kırmızı) H1 .siyah (renk: siyah) Şimdi, belgeye etiket dahil , SINIF özniteliğini kullanarak içinde belirli bir stil belirtebilirsiniz: kırmızı başlık