Burada aynı anda üç özdeş stil oluşturduk: etiketi geçersiz kılma stili

, stil sınıfı redtext ve birleşik stil P EM. Hepsi yazı tipi rengini kırmızı olarak ayarladı.

İncelediğimiz dört CSS stili türü de yalnızca stil sayfalarında mevcut olabilir. Bunları bir Web sayfasının HTML kodunda belirtirseniz büyük olasılıkla göz ardı edileceklerdir.

Son beşinci çeşidin stilleri doğrudan Web sayfasının HTML kodunda, ilgili etikette belirtilir. Bunlar satır içi stiller. Birbirine sıkı sıkıya bağlı bir stil ailesinde, birbirlerinden ayrı duruyorlar.

Doğrudan istenen etikete yerleştirildiklerinden seçicileri yoktur. Seçici girişi bu durumda sadece gerekli değil.

Küme parantezleri yoktur çünkü css stili niteliklerinin listesini orada olmayan seçiciden ayırmaya gerek yoktur.

Satır içi bir css stili yalnızca tek bir etikete (bulunduğu etikete) bağlanabilir.

Satır içi css stili tanımı, STYLE özelliğinin değeri olarak belirtilir istenilen etiket neredeyse tüm etiketler tarafından desteklenen:

Küçük
-italik.

Daha önce bazı durumlarda nitelik değerinin css stili tırnak içine alınmalıdır. Ancak satır içi stil tanımında tırnak işaretleri yerine kesme işaretleri kullanılır.

Yerleşik CSS stilleri artık oldukça nadir kullanılıyor çünkü Web 2.0 konseptinin Web sayfalarının içeriğini ve sunumunu ayırma gerekliliğini ihlal ediyorlar. Esas olarak stilleri bir Web sayfasının tek bir öğesine bağlamak için (çok nadiren) ve stiller denemeleri yaparken kullanılırlar.

14. Bölümde başka bir çeşide bakacağız CSS stilleri. Şimdilik bunları bitirelim ve stil sayfalarına bakmaya başlayalım.

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.

Ertelemeyelim ve başlayalım!

Ayrı bir CSS dosyası dahil!

Stilleri bağlamanın en kullanışlı ve en basit yollarından biri, 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 postalamak aşağıdaki kod:

Ş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 ne yapacağımızı gösteririz konuşacağız bağlantı hakkında. 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. Bana göre bu yöntem en uygun yöntem değil çünkü bunu 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üyor aşağıdaki gibi:

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

Lütfen etiketin içine şuna göre kod yazdığımızı da unutmayın: CSS kuralları, küme parantezleri kullanarak. 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 ayrı dosyalar sayfanın üstbilgisi, altbilgisi ve ana gövdesi için. 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, ancak bu durumda aynı anda iki dosyaya olan bağlantıları belirtiyoruz.

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

Yukarıdaki herkes hariç listelenen yöntemler, tek bir CSS dosyası içinde diğer birçok kişiye bağlantı vermenizi sağlayan bir yol var!

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. Eğer herhangi bir zorlukla karşılaşırsanız CSS'yi bağlama, yorumlarda onlara sorabilirsiniz.
Önceki iki dersten öğrendiğimiz gibi, CSS teknolojisiöyle en güçlü araç, her web yöneticisinin uzmanlaşması gereken bir şey! Materyalin özümsenmesini geliş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?

Web sitesinin güzel ve şık görünmesi için CSS dosyasıyla çalışmamız gerektiğini zaten biliyoruz. Stillerimizin uygulanabilmesi için birleştirmemiz gerekiyor HTML dosyası ve bir CSS dosyası.

Bu işlemi gerçekleştirmek için çeşitli seçenekler vardır: iç içe stil sayfalarını, harici stil sayfalarını ve satır içi stili kullanma.

Bugün ikinci yöntem hakkında konuşacağız.

Bir HTML etiketine stil enjekte etme

Öz bu yöntem etiketin içinde gerekli tasarımı uygulamamızdır. Ayrı bir özellik - stil. Bu özellik uygulanabilir herhangi bir etikete, ancak yalnızca sitenin gövdesi içinde, yani vücut içinde. Bu özelliğin değeri, verilen öğeye uygulanması gereken stillerin operatörleridir.

Örneğin, ayarlayalım farklı boyutlar iki farklı metin paragrafı için yazı tipi:

< p style= "font-size:25px;" >Bu metin parçasını 25 piksellik harf yüksekliğine ayarlayın. < p style= "yazı tipi boyutu:15 piksel; renk:#2400ff;"> Ve bu metinde 15 piksel yüksekliğinde harfler olacak ve aynı anda birden fazla stilin kullanımını göstermek için onu maviye boyayacağız.

Kusurlar

Örnek, böyle bir stilin sayfa kodunu nasıl tıkadığını mükemmel bir şekilde göstermektedir.

Bu stilizasyon tekniğini kullanmanın birkaç dezavantajını da not edebilirsiniz. Bunlardan ilki, stilin belge boyunca yayılmasıdır ve bu, düzenlemenin geleceğinde süreci önemli ölçüde karmaşıklaştıracaktır.

Büyük miktarda metni biçimlendirmek de zor olacaktır. Sanırım hiç kimse, özellikle de bu tür 40 paragraf varsa, her paragraf için bir yazı tipi boyutu belirleme olasılığından memnun değil.

Yerleşik stilleri kullanırken bile sözde sınıfları kullanmak imkansız hale gelir. büyük ölçüde bir web tasarımcısının elini kolunu bağlıyor.

Ayrıca stil özelliğinin kullanımında ortaya çıkması muhtemel olan karışıklığa da dikkat çekmekte fayda var. Stil girerken farklı tırnak kullanımından dolayı bu karışıklık ortaya çıkacaktır.

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

< div style= "yazı tipi ailesi: "Roboto Yoğunlaştırılmış", sans-serif"> Giriş doğrudur. < div style= "yazı tipi ailesi: "Roboto Yoğunlaştırılmış", sans-serif"> Bu da doğru. < div style= "font-family: " Roboto Condensed ", sans-serif" >Bu doğru bir giriş değil. < div style= "font-family: " Roboto Condensed ", sans-serif" >Ve bu da doğru değil

Yukarıda verilen hesaplamalara bakıldığında, mantıksal sonuç, yerleşik stillerin kullanımının bir dizi önemli komplikasyon ve rahatsızlıkla ilişkili olduğu yönündedir.

Satır İçi Stil Ne Zaman Kullanılır?

Tüm eksikliklere rağmen yerleşik stil boşuna icat edilmedi. Web yöneticileri, programatik stil ataması durumunda sıklıkla onlara başvurur. Örnek olarak şu koda bakalım

< div id= "productRate" > < div style= "width: 40%" >

Bu blok için gerekli genişliğin kaydedilmesi basit bir işlem olacaktır.

Bir kullanıcının arka plan resmini (örneğin) yönetici rolüyle değiştirmek gerekirse benzer bir durum ortaya çıkabilir. bu durumda img etiketi uymayabilir. Bu nedenle stil özelliğine değinmeye değer:

< div style= "background:url(fon.jpg)" >

Ayrıca programcılar açılır pencereler oluştururken sıklıkla yerleşik stillere başvururlar. Genellikle bu süreç şu şekilde ilerler: Tasarımı üzerinde çalışılan bloğa display:block atanır ve geri kalan pencereler display:none kullanılarak gizlenir, böylece programcının çalışmasına görsel olarak müdahale etmezler. İşte bir örnek:

< div class = "element" style= "display:block" >Şu anda tasarlanmakta olan açılır pencere

Sonuç olarak

Yerleşik stilleri kullanmak bir takım zorluklar ve rahatsızlıklarla ilişkilidir, ancak belirli öğeleri tasarlama sürecinde web yöneticileri çalışmalarını optimize etmek için sıklıkla bu yönteme başvururlar.

Merhaba! Web sitenizdeki CSS stillerini değiştirmek ister misiniz? Bunun zor olduğunu mu düşünüyorsun? Bu yazıya biraz dikkat edin ve herhangi bir WordPress sitesinde CSS stillerini çok kolay bir şekilde nasıl değiştireceğinizi öğreneceksiniz! İleri düzey bir web yöneticisi olmanıza, CSS stillerini ve diğer incelikleri öğrenmenize gerek yok, her şey çok daha basit. Her şey çok basit ve hızlı! Daha ileriye bakın!

WordPress sitesinde CSS stilleri nasıl değiştirilir?

Web sitenize gidin, tıklayın sağ tıklama Farenizi değiştirmek istediğiniz herhangi bir site öğesinin üzerine getirin. Açılan pencerede Kodu görüntüle sekmesine tıklayın. Örnekte site menüsündeki sayfa başlıklarının rengini değiştireceğiz. Bu şekilde kesinlikle herhangi bir site stilini değiştirebilirsiniz.

Daha sonra ekranın sağ tarafında bir pencere göreceksiniz. kaynak kodu Kodu açtığınız sitenin öğesi. Burada stillerle ilgileniyoruz; bunlar Stiller sekmesindeki pencerede görüntülenecek. Stil ve renk adına göre CSS stilinin hangi bölümünü değiştirmemiz gerektiğini hemen belirleyebiliriz. Ekran görüntüsü, ihtiyacımız olan şey olan ana menü ve beyaz renk (bir web sitesindeki menü gibi) içeren bir CSS stilinin bir alıntısını gösteriyor.

İki seçenek var CSS değişiklikleri stiller.

Bir eklenti kullanarak Seçenek 1

İlk seçenek tüm siteler için çok uygundur. CMS WordPress. İhtiyacımız olan CSS stillerini bulduktan sonra sitenize eklentiyi yüklemeniz gerekir - Simple Custom CSS. Bu eklentiyi doğrudan şuradan yükleyebilirsiniz: wordpress yönetici panelleri. Eklentiler – Yeni Ekle sayfasına gidin, arama formuna eklentinin adını girin, Enter tuşuna basın, eklentiyi kurun ve etkinleştirin.

Ardından Basit Özel CSS eklentisi sayfasına gidin. Sayfaya git: Görünüm – . Kopyalanan kısmı alana yapıştırın css kodu, stilleri değiştirin (aşağıdaki ekran görüntüsünde renk zaten değişmiştir) ve Özel CSS'yi Güncelle düğmesine tıklayın.

Diğer tüm stiller, boyut, renk, yazı tipi, kenarlık, baskı, çerçeve vb. aynı şekilde değişir. CSS stili notasyonlarının bulunduğu herhangi bir dizini açın ve stilleri ihtiyacınıza göre değiştirin.

Dikkat! CSS stillerini doğrudan WordPress'e aktarmak daha iyidir. Görünüm – Özelleştirme – Ek stiller. Yani Simple Custom CSS eklentisini kullanmanıza gerek yok!

Seçenek 2: sitenin css dosyalarındaki stilleri değiştirin

İhtiyacımız olan CSS stillerinin nerede bulunduğunu bilmek istiyoruz ve bunları değiştirmek o kadar da zor değil, değerleri değiştirin ve her şey hazır. Yalnızca tarayıcı penceresinde öğe kodunu görüntüleyerek ihtiyacınız olan CSS stillerinin nerede bulunduğunu çok kolay bir şekilde bulabilirsiniz. Sitenize tekrar gidin, sitenizin herhangi bir öğesine sağ tıklayın, açılan pencerede - Kodu görüntüle sekmesine tıklayın.

Kod görüntüleyicide, her css stilinin yanında sağ taraf bir bağlantı görüntülenecek, farenizi üzerine getirin, konumla ilgili bir ipucu göreceksiniz bu tarzın. Yani, değiştirmeniz gereken css stilinin hangi klasör ve dosyada bulunduğunu size göstereceklerdir.

Artık tek yapmanız gereken hostingdeki web sitenizin kök dizinine gidip bulmak. bu dosya, araç ipucunda belirtilen yolu takip edin ve CSS stillerini değiştirin. Gördüğünüz gibi, anlarsanız her şey çok basit!

Hala sorularınız mı var? Bir yorum yazın! İyi şanlar!

Bir web sitesindeki CSS stillerini değiştirmek kolay ve hızlıdır güncellenme tarihi: 22 Temmuz 2018: İlya Zhuravlev

Style niteliği, öğeleri doğrudan HTML kodunda biçimlendirmek için kullanılır. Stil özelliğinin amacı, basit yol değişiklikler dış görünüş hemen hemen her HTML öğesi.

Not: Burada biçimlendirme için stil özelliğini düşünüyoruz. genel fikir hakkında CSS kullanma Web sayfalarını tasarlamak için stiller. CSS eğitiminde CSS'nin yetenekleri hakkında daha fazla bilgi edinebilirsiniz.

Örnek kod size bir belgeyi biçimlendirmenin yeni bir yolunu tanıtacaktır:

Bu metin Verdana yazı tipi kullanılarak kırmızıyla yazılmıştır.

Bu metin yazıldı yeşil Times yazı tipini kullanarak.

Bu metin 30 piksel boyutundadır.

Ayarladığımız stil özelliğini kullanarak örneğe dikkatlice bakın CSS stili HTML öğelerinin içinde stilleri belirtmenin bu yöntemine satır içi stil adı verilir. Satır içi stil yalnızca tanımlandığı öğeye ve onun alt öğelerine (eğer uygulanmışsa) uygulanır. CSS özellikleri miras alınır).

Not: Uygulanan özelliğin değerinin alt öğeler tarafından miras alınıp alınmadığını bu özelliğin bulunduğu sayfadaki CSS referans kitabında görebilirsiniz.

Arka plan

Metin hizalaması

Metni hizalayın HTML belgesi Bu, metni sağa veya sola hizalamanıza ve metin hizalamasını genişliğe ayarlamanıza olanak tanıyan text-align özelliği kullanılarak ayarlanır. metin hizalama özelliği yalnızca şununla çalışır: blok elemanları, tüm satır içi öğeleri bir blokta hizalayarak:

Başlık

Çok küçük boy metin.

Bu metin sağa hizalanacak.