css dosyası. CSS'yi bağlama

Çoğu insanın inandığı gibi HTML'nin bir programlama dili olmadığını unutmamak çok önemlidir. deneyimsiz kullanıcılar, ancak yalnızca web sayfalarının düzeni için bir araç, başka bir şey değil! Hatırla bunu. İnsanların programcı olduklarını söyledikleri ve “programlarını” HTML ile yazdıkları çok sayıda saçma mesaj görüyorum. Muhtemelen seni üzeceğim ama bu doğru değil.

HTML yalnızca sayfa düzeni için bir araçtır ve bunu yaparsanız bir düzen tasarımcısı olursunuz. Ancak aynı JavaScript veya PHP'de ek olarak biraz yazarsanız, o zaman bir programcı olarak böyle bir şey hakkında konuşabilirsiniz. Ancak şu anda bahsettiğimiz konu bu değil ve artık HTML'nin bir programlama dili olup olmadığından emin olduğumuza göre bu makalenin asıl konusuna geçelim.

HTML'nin web sayfalarınızın düzeni görevi görmesinin yanı sıra, CSS diye bir şey de var (hayır, bu birçok genç web yöneticisinin düşünebileceği gibi bir Counter-Strike: Source oyunu değil), bunlar basamaklı stil sayfaları. . Özleri, sayfanın genel stilinin veya bireysel unsurunun oluşmasıdır. Basit kelimelerle– girintiler, renk, yazı tipi, genişlik, yükseklik ve diğer parametreler bu stiller aracılığıyla yapılandırılır.

Çok çeşitli özellikler vardır; bunlardan bazıları evrenseldir, bazıları ise belirli bir unsur için kişiseldir. Bunları şimdi açıklamayacağız ancak stillerinizi bir HTML belgesine nasıl bağlayacağınıza odaklanacağız.

Harici bir stil sayfası bağlama

Harici stil dosyası .css uzantısına sahiptir (bu gerekli koşul) ve dosya adını ingilizce dili. Örnek - main.css veya stil.css. Böyle bir dosya oluşturup uygun stillerle doldurduktan sonra, bunu size uygun bir klasöre web sitenize yükleyin ve HTML belgesine bağlayın.

En yaygın bağlantı yöntemi harici dosya stiller şunlardır:

Veya HTML5'in kısaltılmış versiyonu:

Burada nelere dikkat etmelisiniz?

1. Dosya sitenizin tüm sayfalarının HEAD bölümünde bulunur. Bu dosyanın olmadığı yerde tasarımınız eksik olacaktır.
2. Kısmen href tam olarak yazılmış veya göreceli bağlantı CSS dosyasına.
3. Son kapanış eğik çizgisi isteğe bağlıdır ancak tercih edilir. “Feng Shui'ye göre” kod bu şekilde elde ediliyor.
4. Bir sayfaya istediğiniz sayıda stil dosyasını bağlayabilirsiniz. Önemli olan fanatizm olmadan.

Ek olarak stiller başka şekillerde de satır içi hale getirilebilir.

Dahili bir stil sayfasının bağlanması

Dahili stil sayfası, stil dosyasının olmadığı anlamına gelir. Bu durumda tablo özellikleri sayfaya aşağıdaki şekilde eklenir:

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

Burada özel bir nüans yoktur - yapıyı hem HEAD hem de BODY bölümlerine yerleştirebilirsiniz. Üstelik bir sayfada, farklı yerlerinde bu tür birkaç yapı bulunabilir.

Gömülü bir stil sayfasını bağlama

Çeşitli siteleri araştırıp sayfa düzenlerinin nasıl yapılandırıldığına baktıysanız stillerin doğrudan şu şekilde yazıldığını fark etmiş olabilirsiniz:

Bu seçeneğe "satır içi stiller" adı verilir ve ister basit bir blok, ister bir resim veya gömülü bir video olsun, bir web sayfasının tüm öğelerine uygulanabilir.

Buradaki tek uyarı, harici veya dahili stillerde ise kullanılmamış mülk " !önemli» – yerleşik özelliğin uygulamada önceliği vardır. Bu ne anlama geliyor? Size basit bir örnek vereyim:

Dahili stillerde ifadenin rengini kırmızı olarak ayarlamış olsak da, yerleşik stillerde de belirtildiği gibi siyah olacaktır.

Bu derste css'i html'ye nasıl bağlayacağınızı öğreneceksiniz. Örneklerle birkaç seçeneğe bakalım. Ayrıca farklı tarayıcılar için stillerin ve hilelerin eşzamansız yüklenmesi hakkında da konuşacağız.

Ayrı bir dosyada css'yi html'ye bağlama

Şimdi size ayrı bir stil dosyasıyla css'i html'ye nasıl bağlayacağınızı göstereceğim. Oluşturuldu ayrı dosya css. Daha sonra özel komutlar kullanarak bağlanır gerekli belgeler. Bu türe harici stil sayfası denir.

Bu yöntem en çok tercih edilendir. Web sitesi stillerini HTML belgelerinden ayrı olarak geliştirmenize olanak tanır. Stil daha sonra tek bir style.css dosyasında birçok sayfada kullanılabilir.

Head etiketine tam olarak yolu yazıyoruz. Sayfayı görüntülemek için gerekli tüm sistem bilgilerini belirtir. Şu şekilde bağlanır:

Başka bağlantı yöntemleri de vardır. Bunları yalnızca şu şekilde kullanın: ek seçenek.

Satır içi stillerin en yüksek önceliğe sahip olduğunu söylemeye değer. Bağlansanız bile harici css, tarayıcı belirli bir etiket için satır içi stilleri tercih edecektir. İkinci sırada ise iç stiller yer alıyor. Yerleşik olanlardan daha aşağıdırlar, ancak harici olanlardan üstündürler.

Genel olarak ek bir seçenek olarak satır içi veya dahili stilleri kullanmayı faydalı bulabilirsiniz. Ana css dosyasını etkilemeden belirli bir sayfadaki bazı öğelere stil vermeniz gerekiyorsa bu çok kullanışlıdır.

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 konuşursak, HTML öğrenme Bu, web sitelerinin nasıl oluşturulacağını öğrenme sürecinin yalnızca ilk adımıdır; bir sonraki adım CSS'yi öğrenmektir. Öyleyse öğrenelim CSS nedir ve neden gereklidir?.

Saf HTML içeren sayfalara baktığınızda çekici görünmezler. Monoton metinler, çerçevesiz tablolar, kasvetli siyah beyaz renkler... Elbette html kullanarak web sitesi sayfalarını daha parlak hale getirebilirsiniz ancak bu yaklaşım sadece karmaşa yaratır. kaynak ve herhangi bir esneklik sağlamaz. Bu nedenle modern düzende 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 HTML dilini kullanarak web sayfalarının yapısını oluşturursunuz, örneğin ayarlarsınız. 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. ayarlarsınız. Ayrıca, bir CSS kuralı, bir web sayfasının çeşitli öğelerinin görsel sunumunu aynı anda etkileyebilir.

Bu yüzden minimum bilgi 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 özelliklerine ihtiyacınız olacak. Ö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ı bir HTML belgesine nasıl bağlayacağınızı öğrenmeniz gerekir. 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 head etiketleri arasına yerleştirilir. İş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. type niteliği dosyanın MIME türünü belirtir. 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, yerleşik veya dahili stiller olarak adlandırılanlardır. Bunu yapmak için gerekli html etiketini yerleştirmeniz yeterlidir. 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ış küme parantezi arasında noktalı virgül sembolü ihmal edilebilir;
• stil özelliği bir html sayfa öğesinin parametrelerinden birini temsil eder: metin rengi, yazı tipi türü, 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 sayfanın arka planını belirtilen renkte renklendirir. 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 ona 24 piksellik bir yazı tipi boyutu verecektir.

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

Sarı metin (renk:sarı)

Sınıf adı Latin alfabesindeki harflerden, rakamlardan 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ünde bir nokta bulunmalıdır; bu, bir stil sınıfının tanımlandığı anlamına gelir. Bu stil, 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 sarı ve italik yazı tipiyle görüntülenecektir.

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 yalnızca bir öğe bulunabilir. verilen değer id niteliğini kullanın, aksi halde kod geçerli olmayacaktır.

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

#textcenter(metin hizalama: ortala;)

Metni ortala

Metni sayfanın ortasına hizalayan id niteliğini kullanarak p (paragraf) öğesine bir CSS kuralı eklenir. 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

Merhaba, İş Anatomisi projesinin sevgili okuyucuları. Webmaster Alexander yanınızda! Son yazımızda CSS stillerinin ne olduğuna ve WEB programlamada ne kadar önemli olduğuna baktık.

CSS stillerinin bir HTML dosyasının görüntülenmesi üzerinde önemli bir etkisi varsa, bunların bir şekilde birbirine bağlanması gerektiği oldukça açıktır. Bugün CSS stilini HTML'ye bağlamanın dört ana yoluna bakacağız.

Konuyu uzatmayalım uzun kutu ve başlayalım!

Ayrı bir CSS dosyası dahil!

En uygun ve kullanışlı olanlardan biri basit yollar stilleri bağlamak, ayrı bir dosyayı stillere bağlamaktır. Bunu yapmak için metin kullanmanız gerekir not defteri düzenleyicisi++ (veya başka herhangi bir) .css uzantılı bir dosya oluşturun ve onu yerleştirmek istediğimiz dosyayla aynı klasöre yerleştirin.

Daha sonra HTML dosyasında etiketler arasında aşağıdaki kodu gönderin:

Şimdi tüm bunların ne anlama geldiğine bakalım:

Bağlantı # İngilizceden çevrildiğinde “bağlantı” anlamına gelir. Bu şekilde tarayıcıya bundan sonra konuşacağımız şeyin bir bağlantı olduğunu göstermiş oluyoruz. rel= # bu özellik ile CSS dosyasının HTML dosyasıyla nasıl ilişkili olduğunu gösteririz. "stil sayfası" # yani CSS dosyasının basamaklı bir stil sayfası olduğu anlamına gelir. type = "text/css" # burada her şey basit: bu, dosyanın yazıldığının bir göstergesidir Metin formatı ve .css href="style.css" uzantısına sahiptir # bu, CSS stillerine sahip bir dosyanın bağlantısıdır.

Bana göre CSS stillerini dahil etmenin en çok tercih edilen yolu budur.

Stilleri doğrudan HTML dosyasına yazıyoruz (ilk yöntem)

CSS stillerini belirtmenin bir sonraki yolu, bunları doğrudan HTML belgesine yazmaktır. Şuna benziyor:

Bu HTML belgesinin tarayıcıda nasıl görüneceğine bakarsak, etiketler arasındaki metnin kırmızıya döndü. Ve stil niteliğini kullanarak, daha sonra görüntü stili parametrelerine sahip olduğumuzu söylüyoruz. Renk renkten sorumlu bir seçicidir. Kırmızı bu seçicinin değeridir. Bu şekilde metnin belirli bölümlerini belirli bir görüntüleme türüyle vurgulayabiliriz.

Basamaklı stil sayfalarını HTML'nin içine yerleştirme (ikinci yöntem)

CSS stillerini eklemenin başka bir yolu da basamaklı tabloları HTML dosyasının içine yerleştirmektir. Bence, Bu method en uygun olanı değil, çünkü onu kullanmak, site kodunu analiz etmek pek uygun olmuyor. CSS stilleri yazmaya başlamak için HTML dosyasına etiket eklemeniz yeterlidir. . Pratikte şöyle görünür:

İşte bir örnek: CSS stillerini bir HTML belgesinde görüntülemek

Lütfen etiketin içinde küme parantezleri kullanarak CSS kurallarına göre kod yazdığımızı unutmayın. Sonraki yazılarımda CSS'deki sözdizimi kurallarından daha detaylı bahsedeceğim.

Birden fazla CSS dosyasını tek bir HTML belgesine bağlama.

HTML kuralları birden fazla CSS dosyasının aynı anda dahil edilmesine izin verir. Birçok web yöneticisi bunu kullanır: metin ve resimler için ayrı CSS dosyaları oluştururlar. Veya sayfanın üstbilgisi, altbilgisi ve ana gövdesi için ayrı dosyalar. Bunu nasıl uygulayacağımızı bulalım.

Birkaç CSS stil dosyası oluşturuyoruz. İsimleri style-1.css ve style-2.css olsun. Birinci yöntemde olduğu gibi onu HTML dosyasıyla aynı klasöre yerleştiriyoruz.

İşte bir örnek: CSS stillerini bir HTML belgesinde görüntülemek

Her şey ilk yönteme benzer, yalnızca bu durumda aynı anda iki dosyaya bağlantı sağlıyoruz.

Aynı türdeki bir dosyanın içindeki CSS dosyasına bağlantı verin.

Yukarıdaki yöntemlerin tümüne ek olarak, tek bir CSS dosyasına diğer birçok yöntemin bağlantısını yerleştirmenize olanak tanıyan bir yöntem vardır!

Bu şu şekilde uygulanır:
Öncelikle aynı şekilde en az bir CSS dosyasını kodunuza bağlamamız gerekiyor.

İkinci olarak, halihazırda bağlı olan dosyaya aşağıdaki kodu girin:

@import url("style-2.css");

Bu satır dosyamıza bağlanıyor ek dosya CSS. CSS'ye bağlanmada zorluk yaşıyorsanız yorumlardan sorabilirsiniz.
Önceki iki dersten öğrendiğimiz gibi CSS teknolojisi en güçlü araç, her web yöneticisinin uzmanlaşması gereken bir şey! Materyalin özümsenmesini iyileştirmek için, alınan bilgileri pekiştirmek amacıyla her dersin sonuna bir eğitim videosu + test eklemeye karar verdim.

Malzeme sabitleme testi:

HTML dosyasına bir link yerleştirerek CSS dosyasını eklememiz gerekiyor. Aşağıdaki yöntemlerden hangisi doğrudur?

Seçenek 1:

seçenek 2:

Seçenek 3:

Seçenek 4:

CSS basamaklarını doğrudan HTML dosyasına yerleştirebilir miyiz?

CSS tablolarını şuraya bağlayın: HTML belgesi birkaç yolla mümkündür.

Yerleşik stiller

Ayarlamak CSS stilleri bir css kuralı ekleyerek doğrudan HTML işaretlemesinde yapabilirsiniz istenilen etikete stil özelliğini kullanarak.

Kırmızı metin rengi

CSS stilleri kullanılarak etikete kaydedilir stil özelliği. Bu şekilde CSS stillerini herhangi bir etikete uygulayabiliriz. HTML sayfası. İÇİNDE bu örnekte başvurduk CSS renk özelliği bir paragraf için anlamını belirleme kırmızı renk. Aynı anda birkaç CSS özelliğini ayarlayabiliriz; bunu yapmak için her özellik-değer çiftini bir sembolle ayırmayı unutmayın. ";" .

Eksi bu yaklaşım şudur Bu mülk irade yalnızca belirli bir p etiketine uygulanır, diğer paragraflar bu özelliği görmeyecektir ki bu da buna bağlı olarak büyük bir eksidir. Ayrıca böyle bir sayfa basitçe bakımı imkansız. Satır içi CSS özelliklerinin değiştirilmesi her yeni sayfa için tekrarlanmalıdır.

Üçüncü eksi bu yaklaşım yavaş sayfa yükleme hızı Ve dağınıklık HTML işaretlemesi . CSS özellik verilerini önbelleğe alamayacağız, yani. Sayfa her yüklendiğinde tarayıcı özellikleri yeniden hesaplar.

Artı bu yaklaşım sizin CSS oluşturmaya gerek yok dosya ve hata ayıklama modunda hızlı bir şekilde değişiklik yapabilir ve sonuçlarını görebilirsiniz.

Dahili stil sayfaları

CSS stillerini bağlamanın ikinci yolu, CSS stillerini sayfaya bir etiket aracılığıyla eklemektir.

Şimdi, bir sayfada bir grup etiketi seçmek için CSS seçicileri kullanabiliyorsanız ancak yeni sayfalar oluştururken sorun yaşıyorsanız, bu yöntem yine çözümsüz kalır. Ayrıca CSS stillerini hâlâ önbelleğe alamayacaksınız.

Harici stil sayfalarını bağlama

En çok uygun bir şekilde birlikte çalışmak CSS tabloları, harici stil sayfalarının kullanılmasıdır. CSS kodu HTML işaretlemesinden ayrı olarak yerleştirildiği ve satır kullanılarak sayfaya bağlandığı için harici olarak adlandırılırlar.

Nerede href özelliği belirtmeniz gerekir css dosyasının yolu ( Tüm CSS stillerimizi içeren bir dosya, dosya uzantısı .css olmalıdır).

Böylece her birine yapabiliriz yeni sayfa, bu dosyaya bir bağlantı dizesi ekleyin. Ve ilk HTML sayfasında çalışan tüm stiller sonraki sayfalara da uygulanacaktır.

Artık CSS'yi ayrı bir dosyada bulundurduğumuz için, tarayıcı onu ilk kez erişildiğinde indirir ve gelecekte, eğer dosya değiştirilmediyse, onu daha fazla kullanır (dosya tarayıcı önbelleğinde kalır), bu nedenle , sayfa çok daha hızlı yüklenecek ve aynı zamanda css ve js dosyalarının küçültülmesini kullanırsanız, yükleme birçok kez daha hızlı gerçekleşecektir.

CSS kodunu da koyabiliriz farklı dosyalar. Örneğin, metin tasarımı için fonts.css dosyası ve diğer her şey için stiller.css dosyası. Ve bunları HTML sayfasına bağlayın çünkü... aynı anda birkaç tane bağlayabilirsiniz CSS dosyası ov'u bir HTML sayfasına dönüştürün.

@import direktifini kullanma

Ayrıca doğrudan bağlantı bir etiket kullanarak sayfaya bağlantı, bir CSS dosyası içindeki stilleri bir direktif kullanarak bağlamak mümkündür @içe aktarmak.

Yukarıda belirtildiği gibi, birinin içinde yapabilirsiniz HTML dosyası, bağlantı satırını kullanarak birkaç CSS dosyasını aynı anda bağlayın. Ama hepsi bu değil.

Gerekirse (birçok CSS dosyası içeren büyük bir projeniz varsa), tüm CSS dosyalarını ortak bir CSS dosyasına aktarabilir ve bunu belgeye bağlayabilirsiniz; diğer tüm CSS'ler bu dosyaya aktarılacaktır.

İçin CSS dosyalarını içe aktar dize kullanılır

@import url("style.css");

Parantezlerin içinde içe aktarılan css dosyasının yolu bulunur.