Html ve css'deki sınıflara giriş

Söylemeye gerek yok, web geliştirme çok büyük. Bunun büyük bir kısmı, hemen hemen herkes Web'de olduğu içindir. Ancak, bu alanda geliştiricilerin sıkıntısı var ve bu yüzden web geliştirme müfredatı bu kadar hazır ve ücretsiz. Bunu akılda tutarak, size HTML ve CSS'nin neyle ilgili olduğunu biraz göstereceğiz. Daha spesifik olarak, size “sınıfların” nasıl çalıştığını göstereceğiz.

Sizi başlangıçtan itibaren başlatmıyoruz, çünkü orada zaten ücretsiz bir müfredat var. Bunun yerine, web sitenizi şekillendirmek için gerekli bir bileşen olduğundan, sınıfların nasıl çalıştığını size özel olarak göstereceğiz. Ayrıca, dersler de bunun için gerekli bir bileşen olduğundan, Twitter'ın Bootstrap API'sine bakmadan önce kapsanmaya değeceğini düşündük.

Feragatname olarak, HTML ve CSS'de tamamen yeniyseniz, bu muhtemelen sizin için iyi bir başlangıç ​​değildir. Eğer aşina iseniz, yine de almak zor olmamalıdır. Ancak, tam bir başlangıç ​​eğitimi için arıyorsanız, çevrimiçi olarak birçok harika seçenek var. Birkaç isim, FreeCodeCamp, Odin Projesi, CodeAcademy, Kod Okulu, Team Treehouse, Udacity ve daha pek çok şey var. Bunlardan birine kazmaya başlamayı tercih ederseniz, bunlardan birine (Ücretsiz Kod Kampı gibi) bağlı kalmanızı ve başka birine başlamadan önce onu sonlandırmanızı şiddetle tavsiye ederim, çünkü “temel” içeriğin çoğu oldukça tekrarlanabilir.

Bunun dışında, hadi sınıfların neyle ilgili olduğunu bulalım.

Sınıflar Nasıl Çalışır?

Sınıflar son derece kullanışlıdır. HTML'nin tekrar eden özelliğini alırlar. Sınıflar olmadan, işaretlemenizdeki her bir öğeyi ayrı ayrı stillendirirsiniz. Peki ya aynı öğelerin ikisine sahipseniz, ancak her birini farklı bir şekilde stillendirmek istiyorsanız? Tam bir karışıklık olurdu. Bu yüzden sınıflarımız var. Sınıflar, kodunuzu nispeten temiz tutmanıza olanak tanıyan HTML’nizin bazı organizasyon yapılarını ekler. Sadece bu değil, sınıflar bir defadan fazla kullanılabilir. Başka bir deyişle, aynı stil kurallarını iki kez oluşturmak zorunda kalmayacaksınız.

İşte sınıflarımız nasıl görünüyor? etiket:

Gördüğünüz gibi, vücut etiketimizin altında iki tane var.

farklı sınıflardaki öğeler. İlk

etiketi "head1", ikinci etiketi ise "head2" sınıfına sahipken, CSS'imizde, sadece

eleman, bu bireysel sınıflara stil uygulayabiliriz. Neden bunu yapmak istiyoruz?

Birincil sebep, hepsini istemiyor olmanızdır.

Elemanların aynı stilde olması. Bir web sitesi yaparken çok fazla sıkıntı yaratır ve buna ek olarak, web siteleri çok iyi görünmezdi. Sınıflar, stilin etiketin yalnızca bir örneğine uygulanmasını sağlar, hepsi değil.

Belge boyunca etiketler. Peki, nasıl bir ders HTML yazarsın? Bunun gibi, böyle:

Bazı içerik

“Class” özelliğini neredeyse tüm HTML öğelerine ekleyebilirsiniz.

Harika! Yani, sınıflarımız var, ama şu anki durumlarında, aslında hiçbir şey yapmıyorlar. Çünkü henüz sınıfa henüz stil kuralları eklemedik. Bunu yapmak için ayrı bir .css belgesi oluşturmamız gerekecek. Ben sadece onu main.css diyeceğim. Bu belgede, böyle bir sınıfa stil uygularız:

Stillemek istediğimiz bir sınıfı seçmek için şunu yaparız:

.head1 {renk: kırmızı; metin hizalama: orta; }

Kıvrımlı parantezlerin içinde o sınıfa uyguladığımız tüm "kurallar" (veya stil) vardır. Bu sınıfa koyabileceğiniz birçok farklı kural var. Benim durumumda, “color” kuralını kullanarak metnin rengini kırmızıya değiştirdim ve “text-align” kuralını kullanarak metni ortaladım. CSS kurallarının tam listesini ve bunların belgelerini Mozilla'nın Geliştirici Ağı'ndan bulabilirsiniz.

Şimdi, stilimiz hala HTML belgemizdeki sınıflara uygulanmadı ve bunun nedeni iki dosyayı henüz birbirine bağlamadık. HTML dosyanıza geri dönün ve etiketinde, şunu yaparak CSS dosyanızı bağlamak istersiniz:

HTML belgeniz şöyle görünmelidir:

Test projemiz Web’de şöyle görünmeli:

Bu adımlardan geçen daha ayrıntılı bir video için lütfen aşağıya bakın.

Video

Sonuç

Ve sınıfların hepsi bu kadar! Anlaması gerçekten çok basit. Açıkça ziyaret ettiğiniz büyük ve popüler web sitelerinde, sınıflar içindeki kurallar, içerdiklerimizden çok daha karmaşık, ancak en temel şekliyle, nasıl çalıştıkları.

Herhangi bir sorunuz varsa veya uzun zaman sonra sorun yaşarsanız, aşağıdaki yorumlarda veya PCMech Forumlarında bize bildirdiğinizden emin olun! Veya PCMech'te tam bir HTML / CSS başlangıç ​​kılavuzu ile ilgileniyorsanız, bize de bunu bildirdiğinizden emin olun!