Merhaba blog sitesinin sevgili okuyucuları. HTML ile ilgili bir blok yazıdan sonra, biçimlendirme araçları belge tasarımı için yeterli olmadığı için sizi CSS ile tanıştırmaya karar verdim. Genel olarak, HTML öğrenmek, web sitesi oluşturmayı öğrenmenin yalnızca ilk adımıdır, bir sonraki adım CSS'yi öğrenmektir. hadi öğrenelim CSS nedir ve neden gereklidir?.

Saf HTML içeren sayfalara bakarsanız, çekici görünmüyorlar. Monoton metin, kenarlıksız tablolar, kasvetli siyah ve beyaz renkler... Elbette, html kullanarak web sitesi sayfalarını daha parlak hale getirebilirsiniz, ancak bu yaklaşım yalnızca kaynak kodunu karıştırır ve herhangi bir esneklik sağlamaz. Bu nedenle, modern düzende, site sayfalarının dış tasarımından sorumludur. CSS biçimlendirme dili ya da sadece bir stil sayfası.

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

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

Bu nedenle, hem sıfırdan bir site oluştururken hem de mevcut bir projede değişiklik yaparken, stil sayfalarını basamaklandırma olasılıkları hakkında en az bilgiye ihtiyacınız olacaktır. Her şeyden önce, sitenin tasarımı üzerinde çalışırken bu bilgiye ihtiyaç duyulacaktır.

Bir HTML belgesine stil ekleme veya CSS'nin nasıl dahil edileceği

Basamaklı stil sayfalarının sözdizimi veya özellikleri hakkında konuşmadan önce, bunları html belgesine nasıl bağlayacağınızı öğrenmeniz gerekir. Toplamda, css'yi html'ye bağlamanın üç yolu vardır.

1. İlk yol, stilleri ayrı bir dosyaya veya .css uzantılı birkaç dosyaya yerleştirmektir. Bu durumda, CSS stillerini dahil etmek için şunu kullanın: bağlantı, harici stil sayfasının yolunu içerir. Bu meta etiket, ilgili web sayfasının başlık bölümüne, başlık etiketleri arasına yerleştirilir. İşte onu yazmanın formatı:

Stil dosyasının yolu, href niteliğinin değeri olarak yazılır. rel niteliği, tarayıcıya bağlantı etiketinin atıfta bulunduğu dosyanın ne olduğunu söyler. "Stil sayfası" değeri, bu dosyanın harici bir stil sayfası olduğunu gösterir. type özelliği, dosyanın MIME türünü belirtir. Harici bir stil sayfası için MIME türü "text/css"dir.

HTML kodundaki CSS stillerini bağlama satırı şu şekilde görünecektir:

...
.css"/>
...

Bu yöntemin avantajı, harici stil sayfası aynı anda birkaç web sayfasına bağlanabilir.

2. İkinci yol, sözde yazmaktır. küresel stiller, doğrudan web sayfasının html koduna yazılır. Bir çift içine alınırlar stil etiketi ve genellikle başlık etiketleri arasında başlık bölümüne yerleştirilir:

...

...

Bu yöntemin dezavantajı, global stil CSS kurallarının yalnızca yazıldığı web sayfası için geçerli olmasıdır.

3. Üçüncü yol, sözde yerleşik veya dahili stiller. Bunu yapmak için, sadece gerekli html etiketine yerleştirmeniz gerekir. stil özelliği, parametre olarak bir dizi CSS özelliği içerir:

Gri arkaplanlı ve kırmızı metinli paragraf

Ayrıca, stil özniteliğinde belirtilen özellikler yalnızca bir html öğesi için geçerlidir. Tipik olarak, bu stilleri dahil etme yöntemi, site tasarımında hata ayıklama aşamasında kullanılır ve ardından ortaya çıkan CSS özellikleri, harici stiller içeren bir dosyaya aktarılır.

CSS stilleri oluşturma. Basamaklı stil sayfalarının 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çiciyi ve değerleri küme ayraçları ("(" ve ")") ile birlikte bir stil özellikleri listesi içerir:

• seçici eylemini genişletmesi gereken web sayfasının öğelerini bağlamak için kullanılır;
• "Özellik: Değer" çiftleri noktalı virgül (";") ile ayrılır ve istediğiniz kadar çok olabilir;
• son "Özellik: Değer" çifti ile kapanış küme ayracı arasında noktalı virgül simgesi atlanabilir;
• stil özelliği html sayfa öğesinin parametrelerinden birini temsil eder: metin rengi, yazı tipi yazı tipi, girinti değeri;
• boşluklar ve yeni satırlar css kuralları yazarken kritik değildir, tarayıcı bunları yok sayar, böylece kodu istediğiniz gibi biçimlendirebilirsiniz;
• ayrıca kod büyük/küçük harfe duyarlı değildir.

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

Bu CSS kuralını analiz edelim:

• body, etiketin adı olan bir seçicidir. ;
• arka plan, arka plan parametrelerini ayarlayan bir stil özelliğidir;
• #0000FF, RGB biçiminde bir renk kodu olan arka plan stili özelliğinin değeridir.

Sonuç olarak, bu stil web sayfasının gövde öğesine uygulanacak ve sayfanın arka planını belirtilen renge boyayacaktır. Düşünülen stil denir etiket geçersiz kılma stili, çünkü karaktersiz etiket adı seçici olarak belirtilir< и >.

Başka bir örnek düşünün:

h1 (
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 söyler.

yeşil ve 24 piksellik bir yazı tipi boyutu verin.

Etiket seçici olarak, etiket adına ek olarak belirtebilirsiniz. Sınıf:

sarı metin (renk: sarı)

Sınıf adı Latin harfleri, sayılar ve kısa çizgilerden oluşmalı ve bir harfle başlamalıdır. Ve bir CSS kuralının tanımında, sınıf adının önüne bir nokta gelmelidir; bu, stil sınıfının tanımlandığı anlamına gelir. Bu stil, sahip olduğu tüm etiketlere uygulanacaktır. sınıf özelliği ve değeri olacak noktasız stil sınıfı adı:

Bu paragrafta turuncu metin var

Örnekte, etikete ekledik

sarı metin sınıf adı ile css kuralı. Sonuç olarak, bu paragraftaki metin turuncu olarak görüntülenecektir.

clsss niteliği, boşluklarla ayrılmış birden çok stil sınıfı adına ayarlanabilir. Bu durumda, stil sınıflarının etkisi şöyle olacaktır:

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

italik sarı metin

Bu örnekte, etiket

Aynı anda iki sınıfı bağladık: yellowtext ve cursivtext. Sonuç olarak, etiketin içeriği sarı ve italik yazı tipinde görüntülenecektir.

Sınıflara ek olarak, seçici olarak css kurallarını kullanabilirsiniz. tanımlayıcıÖğenin benzersiz adını belirten bir. Burada her şey stil sınıflarında olduğu gibi aynıdır, sadece birkaç fark vardır:

• CSS kural seçicide, tanımlayıcının adı da belirtilir, ancak nokta yerine adından önce bir "#" kare işareti konur;
• html öğesine bağlanma, aracılığıyla yapılır kimlik özelliği değeri, kare işareti olmadan stil adına ayarlanmış;
• id niteliğinin değeri sayfa içinde benzersiz olmalıdır, yani html kodunda, id niteliğinin verilen değerine sahip yalnızca bir öğe olabilir, aksi takdirde kod geçerli olmaz.

Netlik için bir örneğe bakalım:

#textcenter(metin hizalama: merkez;)

orta metin

Metni sayfanın ortasına hizalayan id niteliği kullanılarak p (paragraf) öğesine bir css kuralı eklenir. Artık bu id öznitelik değerine sahip sayfada öğe oluşturmaya izin verilmez, aksi takdirde html kodu geçerli olmaz.

Stilleri tanımlamanın düşünülen yollarına ek olarak, css, kombine stiller ve aynı anda birkaç özdeş stil ayarlayın. Bir örnek görelim:

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

Örnekte, iki seçici virgülle ayrılmış olarak belirtilmiştir: "h1.redtext" ve "p güçlü". İlk seçici, redtext'e eşit bir sınıf öznitelik değerine sahip tüm h1 öğelerinde metnin kırmızı olarak görüntüleneceğini söyler. İkinci seçicide, p etiketi içinde iç içe geçmiş tüm güçlü öğeler için aynı şey olur:

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

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

İlk bölümde, web sitesi tasarımının CSS kullanılarak oluşturulduğunu öğrendiniz. Neyin ve neyin kullanılacağını daha iyi anlamak için iyi bir örneğe bakalım. HTML'nin, dekorasyonu olmayan bir evin siyah beyaz yapılandırılmış tel çerçevesi olduğunu ve benzersiz bir görünüm oluşturmak için kullandığımız şeyin CSS olduğunu hayal edin.

Gördüğünüz gibi, sağdaki evin renkleri, malzemeleri ve ek dekorasyonları var. Aynı şey bir web sayfasında da olur: CSS kuralları yardımıyla, üzerinde renkler, girintiler görünür, yazı tipi stili ve eleman boyutları değişir, bütün, eksiksiz bir stil oluşturulur.

Basit stil sayfası

En temel stil sayfasının neye benzediğine ve hangi unsurlardan oluştuğuna bir göz atalım. Bu, tüm etiketler için örnek bir CSS stilidir.

Web sayfasında bulunanlar:

Metin şimdi nasıl görünecek?

Tarayıcıda ve her satır ne anlama geliyor? Çok basit: yazı tipi kalın ve renk #1E824C (onaltılık renk kodu) olacak ve 1em boyutunda (tarayıcının varsayılan yazı tipi boyutuna eşit bir göreli birim) görüntülenecektir.

Yukarıdaki stil, diğerleri gibi, kendi adlarına sahip bir dizi öğe içerir. Bunları ezberleyin, böylece sonraki bölümleri okuduğunuzda neyin tehlikede olduğunu anlayacaksınız.

Selector Bunu belirterek tarayıcıya stili tam olarak neye uygulamak istediğimizi söyleriz. Bizim durumumuzda seçici p'dir. Bildirim bloğu Bu, seçiciden sonra kaşlı ayraçlar () arasındaki tüm içeriğin adıdır. Stil özelliği Bu, istenen biçimlendirmeyi belirten bir komuttur (örneğin, yazı tipi ağırlığını, rengi, yazı tipi boyutunu vb. değiştirmek istiyorsunuz). Özellik adının ardından iki nokta üst üste gelmelidir. Aşağıda, daha fazla CSS özelliğine aşina olacaksınız. Property Value İki nokta üst üste işaretinden sonra, kendi tanımladığınız özelliğin değeri yazılır, böylece kendi stilinizi oluşturursunuz. Özelliğe bağlı olarak, onun için uygun değeri belirtmelisiniz.

Örneğin, yazı tipi stili kalın , daha kalın vb. anahtar kelimelerle belirtilir, renk onaltılık bir değer, RGB(A), HSL(A) veya kırmızı , turuncu , beyaz , vb. anahtar kelimeler, yazı tipi boyut, CSS birimleriyle belirtilir (yüzde % , piksel piksel, puan nokta, yazı tipi yüksekliği) veya küçük , orta , büyük , vb. sabitler. Özellik değerinden sonra noktalı virgül gelir.

CSS satır sonlarına, boşluklara, sekmelere ve büyük/küçük harfe duyarlı olmadığından, daha sonra okunması ve düzenlenmesi kolay olacak şekilde kodunuzu biçimlendirebilirsiniz. Örneğin, yukarıdaki kodu bir satıra yazabiliriz:

P (yazı tipi ağırlığı:kalın;renk:#1E824C;yazı tipi boyutu:1em;)

Aynı zamanda işe yarıyor, ancak bunu anlamak kolay mı? Özellikle CSS kodu oldukça uzun olduğunda. Elbette en azından boşluklarla ayırmaktan zarar gelmezdi. Görgü kurallarının birkaç kuralı vardır ve bunları hemen öğrenirseniz ileride kendinize “teşekkür ederim” diyeceksiniz.

Çoğu zaman, bir stili tanımlarken, bir seçici için tüm özelliklerin bir blokta belirtildiği kompakt bir notasyon kullanılır:

P ( yazı tipi ağırlığı: kalın; renk: #1E824C; yazı tipi boyutu: 1em; )

Ve bu yazı biçimi, işe yaramasına rağmen çok hantaldır:

P (yazı tipi ağırlığı: kalın;) p (renk: #1E824C;) p (yazı tipi boyutu: 1em;)

Kodda gezinmeyi kolaylaştırmak için her özelliği yeni bir satıra yazmanız ve özellikleri listelerken sekmeleri veya boşlukları kullanmanız önerilir. Bazen iki nokta üst üste ile özellik değeri arasında bir boşluk olur, ancak burada hangisinin sizin için daha uygun olduğuna karar verebilirsiniz.

Daha fazla rahatlık için, doğrudan CSS'ye yorum ekleyebilirsiniz. Bunlara, stil sayfalarında gezinmenize yardımcı olacak açıklamalar, notlar yazabilirsiniz.

CSS'deki yorumlar /* ve */ arasında yazılır. Tarayıcıdaki web sayfasında görünmezler ve yalnızca kodda görünürler. Geliştiriciler ayrıca CSS kodunun geçici olarak gereksiz bir bölümünü gizlemek için yorumları sıklıkla kullanır. Yorumlar şöyle görünür:

/* Gövde metni stili */ p ( yazı tipi ağırlığı: kalın; renk: #1E824C; yazı tipi boyutu: 1em; )

İç ve dış stil sayfaları

Stil sayfanızı oluşturduktan sonra, onu web sayfanıza nasıl ekleyeceğinizi seçebilirsiniz. Tablolar için iki seçenek vardır - doğrudan sayfaya eklenen dahili ve .css uzantılı ayrı bir dosyada bulunan ve bir bağlantı kullanılarak sayfaya bağlanan harici.

HTML belgesinde etiketler arasına dahili stil sayfaları yazılır. Her web sayfasına bir stil sayfası eklemeniz gerekir. Sitede aynı tasarıma ihtiyaç duyan çok sayıda sayfa varsa, stiller eklemek ve düzenlemek nankör bir iş haline gelir - işlem çok uzun zaman alacaktır. Bu nedenle, dahili stil sayfaları uygunsuz olarak kabul edilir.

Dış stil sayfaları çok daha yaygındır. Tabloyu yalnızca etiketi kullanarak gerekli tüm web sayfalarına bağlamanız gerekir. rel özniteliği (sayfa ile dahil edilen dosya arasındaki ilişkiyi tanımlar) ve dahil edilen dosyanın bir stil sayfası içerdiği anlamına gelen stil sayfası değeri ile. href özelliği, .css dosyanızın yoludur (URL):

Yalnızca bir dosyayı düzenleyerek, kaç sayfası olursa olsun tüm sitenin stilini bir kerede değiştirebilirsiniz. Bu, özellikle büyük kaynaklar için çok uygundur.

Ders: Stil Sayfası Oluşturun

Tasarım geliştirmede en uygun ve yaygın olarak kullanılan dış stil sayfaları olduğundan, bunları nasıl oluşturacağımızı öğreneceğiz. Bu ders için dosyaları içeren arşivi bu sayfadan indirebilirsiniz.

Klasörde basit bir sayfa örneği ve bir resim (eğitimde kullanılacak) içeren bir HTML belgesi bulacaksınız. HTML belgesini bir tarayıcıda açın. Sayfanın tamamen normal göründüğünü göreceksiniz. Ona daha çekici bir görünüm kazandırmak için onun için bir stil yazalım.

Şimdilik, şu veya bu kod parçasının ne anlama geldiğine çok fazla girmenize gerek yok. Şimdi çalışma prensibini anlamanız gerekiyor. Başlayalım.

CSS'yi HTML'ye bağlama

Başlamak için, bilgisayarınızdaki herhangi bir metin düzenleyiciyi açın (not defteri yapacaktır) ve style adlı boş bir dosya oluşturun ve onu bir .css uzantısıyla kaydedin (sonunda bir style.css dosyası elde etmelisiniz). Dosyayı, indirilen HTML belgesiyle aynı klasöre kaydedin.

HTML belgesini bir metin düzenleyicide ve bir tarayıcıda açın (sayfanın görünümündeki değişiklikleri görmeyi kolaylaştırmak için). Etiketler arasına ekle aşağıdaki kod:

Yaptığınız şey hakkında kısaca. Bu kodu bir HTML belgesine yapıştırarak:

• Google sunucusundan alınacak olan Roboto Condensed adlı bir yazı tipine bağlantı sağladı (Google yazı tipleri hakkında daha sonra konuşacağız);
• harici stil sayfamız style.css'yi içeriyordu (şimdiye kadar boş).

CSS stilini yazmak

HTML belgesindeki değişiklikleri kaydedin ve oluşturduğunuz boş .css dosyasına gidin. Sayfaya stil verelim:

Html ( üst dolgu: 5px; arka plan resmi: url(background.jpg); )

Değişikliklerinizi kaydedin. Tebrikler, ilk kuralı yazdınız - bu etiketle ilgili . İlk özellik olan padding-top, tarayıcı penceresi ile web sayfası içeriği arasına 5 piksellik bir üst dolgu ekleyecektir. İkinci özellik olan background-image ile, resim dosyasının yolunu belirterek (HTML belgesiyle aynı klasörde bulunur) tüm sayfanın arka planı için bir resim eklediniz.

Tarayıcıda açık web sayfasını yenileyin. Her şey doğru yapılırsa, sayfada arka planın göründüğünü ve pencerenin üst kısmı ile metin arasındaki girintinin biraz arttığını göreceksiniz.

Gövde ( genişlik: %75; dolgu: 40 piksel; kenar boşluğu: 15 piksel otomatik; arka plan rengi: #EBEBEB; sınır yarıçapı: 30 piksel; )

Değişiklikleri dosyaya kaydedin. Şimdi sen:

• etiketin içeriği için alanı ayarla tarayıcı penceresinin genişliğinin %75'ine eşit olan;
• içerik alanının her tarafından 40 piksellik bir dolgu sağladı;
• alanı sayfanın ortasına yerleştirdi ve ayrıca 15 pikselin üst ve alt kısımlarını girintili hale getirdi;
• içerik alanı için arka plan rengini #EBEBEB olarak ayarlayın;
• 30 piksellik bir yuvarlama yarıçapı belirterek dikdörtgen bir alanın köşelerini yuvarladı.

HTML belgesini yeniden güncelleyin. Aynı zamanda, önbelleğin devre dışı bırakıldığından emin olun veya özel bir tuş kombinasyonu kullanarak, kendisiyle ilişkili tüm dosyaların güncellenmesiyle sayfayı yeniden yükleyin (örneğin, Chrome için bu Ctrl+F5).

Sayfanın ortasına köşeleri yuvarlatılmış dikdörtgen bir alanın eklendiğini göreceksiniz. Bu, CSS dosyasındaki eylemlerinizin sonucudur. Ayrıca tarayıcı penceresini küçültmeyi deneyebilir ve dikdörtgen alanın genişliğinin boyutuna nasıl uyum sağladığını görebilirsiniz. Bunun nedeni, genişliğin yüzde olarak ayarlanmış olmasıdır.

Yazı tipini CSS ile değiştirin

Metnimizi süslemenin zamanı geldi. Bu kodu stil sayfanıza ekleyin ve değişikliklerinizi kaydedin:

h1 ( renk: #E87E04; yazı tipi boyutu: 2em; kenar boşluğu: 20 piksel; yazı tipi ailesi: "Roboto Yoğun", sans-serif; ) h2 ( renk: #E87E04; yazı tipi boyutu: 1.7em; sol kenar boşluğu : 20 piksel; yazı tipi ailesi: "Roboto Yoğun", sans-serif; ) p ( renk: #22313F; satır yüksekliği: %150; kenar boşluğu: 20 piksel; sol kenar boşluğu: 20 piksel; yazı tipi ailesi: "Roboto Yoğun ", sans Serif; )

Bunu yazdıktan sonra, h1 , h2 , p etiketleri için yazı tipi renklerini ayarladınız, boyutlarını belirlediniz, sol kenardan 20 piksellik bir kenar boşluğu eklediniz ve ayrıca

20 piksellik bir üst girinti yaptık ve baştaki satır yüksekliğini (metnin satır aralığı) standarttan %50 daha fazla olarak ayarladık. Ek olarak, Roboto Condensed yazı tipini üç etikete de bağladınız (bu yüzden en başta HTML dosyasında buna bir bağlantı belirtmek gerekliydi).

Tarayıcınızda sayfayı yenileyin ve çalışmanızın sonucuna hayran kalın. Bu eğitimde, bir şey daha deneyeceğiz. Bu kodu CSS'ye ekleyin:

Vurgu ( yazı tipi ağırlığı: kalın; )

Sayfayı tarayıcıda kaydedin ve yenileyin. Son paragrafta metnin bir kısmında yazı tipinin kalınlaştığını göreceksiniz. Ne olduğunu anlamak için en başta HTML dosyasını açtığınız metin düzenleyici penceresine gidin. Son paragrafa bir göz atın: cümlenin bir kısmı bir etikete sarılmış sınıf vurgusu ile. Böylece, bir paragraftaki tek bir metin satırı için bir stil yazdınız. Bir sonraki bölümde dersler hakkında daha fazla konuşacağız.

Sonunda, şöyle bir sayfanız olmalı:

Uygulama olarak, metin boyutunu değiştirmeyi deneyin.

(diyelim ki 1.1em) ve aradaki dolguyu artırın

Ve içerik alanının sol kenarı 10 piksel daha.

sonuçlar

Bu bölüm CSS'nin sözdizimini ve ilkel bir stil sayfasının nasıl oluşturulacağını ele almıştır. Bir HTML sayfasına CSS'yi nasıl ekleyeceğinizi öğrendiniz ve ayrıca basit stiller oluşturmayı da öğrendiniz. İşte bu bölümden hatırlanması gereken başlıca şeyler:

Herhangi bir CSS stili birkaç öğeden oluşur: bir seçici, bir stil özelliği ve bu özelliğin değeri.

Seçici belirlendikten sonra tüm özellikler ve değerleri iki kaşlı ayraç () arasında bir bildirim bloğuna yazılır.

İşaretleri dikkatlice takip etmeniz gerekir: iki küme parantezi (bildirge bloğunun başında açılır ve sonunda kapanır). Bu parantezler olmadan CSS düzgün çalışmayacaktır.

Özellikten sonra iki nokta üst üste ve değerden sonra noktalı virgül koymak zorunludur.

CSS kodunun rahatlığı ve daha iyi okunabilmesi için her özelliği yeni bir satıra yazın ve boşlukları ve sekmeleri atlamayın.

Merhaba sevgili blog okuyucularım. Bugünün makalesinde, bir CSS stil sayfası ekleme yöntemleri veya yolları hakkında konuşacağız. sana nasıl yapabileceğini söyleyeceğim css'yi html sitesine bağla dört şekilde. Bu dört bağlantı yöntemi, sitede tüm bu bağlantı yöntemlerini kullanmanız gereken zamanlar olduğu için gelecekte işinize yarayacaktır. CSS stil sayfalarının ne olduğunu bilmeyenler için, .

Başlayalım...

İlgili stil sayfaları.

CSS Bağlantı Yöntemi - #1

Yöntem numarası 1 - site için stilleri tanımlamanın en uygun yolu. Site için tüm stiller ayrı bir dosyada saklanır ve herhangi bir web sayfası için kullanılır. Bir CSS tablosunu bir html sayfasına bağlamak veya bağlamak için sayfa başlığındaki LINK etiketini kullanın.

başlık

Bu yöntemin avantajları:

1. Bir web sitesinin tüm web sayfaları için bir CSS stil dosyası kullanmak;

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

3. Stili bir style.css dosyasında değiştirirken, stil, yalnızca CSS dosyasında bir bağlantının olduğu tüm sayfalara otomatik olarak uygulanır. Bu çok uygun;

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

Küresel stil sayfaları.

CSS bağlantı yöntemi - №2

Yöntem #2, Yöntem #1 kadar verimli ve kullanışlı değildir, ancak CSS'yi bu şekilde dahil etmenin gerekli olduğu zamanlar vardır.
Bu stil, belgenin kendisinde bulunur ve yazılır ve etiketlerin arasına web sayfasının başlığına yerleştirilir. . Bağlı stil etiketi

başlık

Bu örnekte başlık stili değişikliğini gösterdim

. Şimdi bu web sayfasında, sadece etiketi belirtmeniz gerekiyor

ve stiller buna otomatik olarak eklenecektir.

İç stiller.

CSS bağlantı yöntemi - №3

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

Bir CSS tablosu bağlama örneği:

başlık

Birleşik stil bağlantı yöntemi.

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

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

Bir CSS tablosu bağlama örneği:

başlık

başlık

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

Açıklanan tüm CSS kullanma yöntemlerinin bağımsız olarak kullanılabileceğini veya birbirleriyle birleştirilebileceğini tekrar ediyorum. Bu yöntem #4'te görülebilir.

İyi günler! Bu yazıda, CSS'yi HTML'ye dahil etmek için çeşitli yöntemler göstereceğim. Ayrıca stilleri bağlamanın farklı yollarının çeşitli inceliklerini ve nüanslarını da açıklayacağım.

Dahili bağlantı

Dahili stil sayfası, her zaman açılış ve kapanış etiketleri arasında görünmesi gereken, bir web sayfasının kodunun parçası olan bir stil kümesidir. HTML kodu, bir web sayfasının gövde etiketinde. Örnek vermek:

Verdana yazı tipi ile sarı metin

Veya HTML5 için kısa bir görünüm:

Burada özel bir nüans yoktur - hem HEAD bölümüne hem de BODY bölümüne bir yapı ekleyebilirsiniz. Ayrıca, sayfada, farklı bölümlerinde, bu tür birkaç yapı olabilir.

Satır içi stil sayfası bağlama

Çeşitli siteleri araştırdıysanız, yerleşimlerinin nasıl düzenlendiğine baktıysanız, stillerin doğrudan aşağıdaki gibi nasıl yazıldığını fark etmiş olabilirsiniz:

Bu seçenek, basit bir blok, resim veya gömülü video olsun, bir web sayfasının tüm öğelerine uygulanabilen "satır içi stiller" olarak adlandırılır.

Buradaki tek uyarı, harici veya dahili stillerde ise kullanılmamış Emlak " !önemli» – yerleşik özellik yürütme için bir önceliktir. Bunun anlamı ne? Basit bir örnek vereceğim:

Selam Dünya!

İç stillerde ifadenin rengini kırmızı olarak ayarlamamıza rağmen, satır içi stillerde belirtildiği gibi siyah olacaktır.