- Katılım
- 7 May 2010
- Konular
- 10,579
- Mesajlar
- 58,614
- Çözüm
- 219
- Online süresi
- 10mo 29d
- Reaksiyon Skoru
- 16,721
- Altın Konu
- 444
- TM Yaşı
- 16 Yıl 1 Ay 4 Gün
- Başarım Puanı
- 691
- MmoLira
- 19,925
- DevLira
- 601
ROHAN2 WORLD 1-120 TR TİPİ OFFICIAL YOHARA, BALATHOR VE AMON! 80. GÜNÜNDE! +10.000 ONLİNE! HİLE VE BOT %100 ENGELLİ HEMEN TIKLA!
Merhaba
İyi bir başlangıç projesi, bir web sitesi oluşturmak ve CSS ile bir arka plan resmi eklemektir.
Bu proje sizi hem HTML hem de CSS ile çalıştıracak.
CSS nedir?
CSS, Cascading Style Sheet (Basamaklı Stil Sayfası) kısaltmasıdır. Biçimlendirme dillerinin stilini belirlemenizi sağlayan bir programlama dilidir.
HTML kullanarak web sitesinin bazı stillerini kontrol edebilseniz de, CSS çok daha fazla kontrol ve tasarım seçeneği sunar.
HTML ile Temel Bir Web Sitesi Oluşturma
CSS sadece bir stil dili, onu kullanmak için öncelikle şekillendirecek bir şeye ihtiyacımız var.
CSS ile oynamaya başlamamız için çok basit bir web sitesi yeterli olacaktır. Sayfamızda "Hello world" (Merhaba Dünya) görüntülenecektir.
HTML'ye aşina değilseniz, hızlı bir şekilde tüm öğelerin ne işe yaradığına bakalım. Belirtildiği gibi, HTML bir biçimlendirme dilidir, yani metnin ne olduğunu işaretlemek için etiketleri kullanır. <> İle çevrili bir kelime gördüğünüzde , bu bir etikettir. İki tür etiket vardır; bir bölümün başlangıcını <> kullanarak işaretleyen bir etiket ve </> kullanarak bir bölümün sonunu işaretleyen bir etiket. Bir bölüm içindeki metin de bu ayrımı daha kolay görmeyi amaçlamaktadır.
Örneğimizde dört etiketimiz var. Html etiketi web sitesinin parçası olan unsurlar gösterir. Head etiketi sayfada görüntülenmez ancak sayfa oluşturmak için gereken başlık bilgilerini içerir. Görüntülenen tüm öğeler, body etiketleri arasındadır . Yalnızca bir görüntülenen öğemiz var, p etiketi. Web tarayıcısına metnin bir paragraf olduğunu söyler.
HTML'ye CSS Ekleme
Artık basit bir sayfamız olduğuna göre, stili CSS ile özelleştirebiliriz. Sayfamız şu anda oldukça basit ve yapabileceğimiz pek bir şey yok, ancak paragrafımızı öne çıkararak başlayalım, böylece bir kenarlık ekleyerek arka plandan ayırabiliriz.
Şimdi, paragrafımız siyah bir sınırla çevrelenecek. Paragraf etiketimize CSS'de bir stil açıklaması eklemek, web sitesinde paragrafın nasıl stillendirileceğini söyledi.
Daha fazla açıklama ekleyebiliriz. Paragrafımızın etrafındaki beyaz boşluğu veya dolguyu artıralım ve metnimizi ortalayalım.
Web sitemiz daha iyi görünüyor, ancak HTML’miz paragraf etiketindeki tüm bu açıklamalarla dağınık görünmeye başlıyor.
Bu bilgileri head'a taşıyabiliriz. Head, web sitesini doğru bir şekilde görüntülememiz gereken bilgiler içindir.
Artık HTML'mizin okunması daha kolay.
Bir CSS Dosyasını Web Sitenize Aktarmak
Stil bilgisini başlığa eklemek, kodumuzun okunmasını çok daha kolay hale getirir. Bununla birlikte, birçok farklı sayfayı aynı şekilde biçimlendirmek istiyorsak, bu metni her sayfanın en üstüne eklemeliyiz. Bu çok iş gibi görünmeyebilir, her şeye rağmen kopyalayıp yapıştırabilirsiniz, ancak daha sonra bir öğeyi değiştirmek isterseniz çok fazla iş yaratır.
Bunun yerine, CSS bilgilerini ayrı bir dosyada tutacağız ve sayfayı biçimlendirmek için dosyayı içe aktaracağız.
Stil etiketleri arasındaki bilgileri kopyalayıp yeni bir CSS dosyasına ourCSSfile.css yapıştırın .
Ardından, dosyayı HTML dosyasına aktarın.
CSS ile Arka Plan Resmi Ekleme
Artık HTML ve CSS'de sağlam bir tabana sahip olduğunuza göre, bir arka plan resmi eklemek çocuk oyuncağı olacaktır. İlk olarak, bir arka plan resmini vermek istediğiniz öğeyi belirleyin. Örneğimizde, tüm sayfaya bir arka plan ekleyeceğiz. Bu, body tarzını değiştirmek istediğimiz anlamına gelir.
Body etiketlerinin tüm görünür öğeleri içerdiğini unutmayın.
CSS'de gövde stilini değiştirmek için önce body anahtar sözcüğünü kullanın. Daha önce yaptığımız gibi küme parantezleri ekleyin {}.
Gövde için tüm stil bilgileri süslü parantezler arasında olmalıdır. Değiştirmek istediğimiz stil özelliği arka plan görüntüsüdür.
Birçok stil özelliği vardır. Hepsini ezberlemeyi beklemeyin.
Bir görüntüyü içe aktarmak için url () kullanın. resme işaret etmek için bir bağlantı kullandığınızı gösterir. Dosya konumunu parantez içinde tırnak işaretleri arasına yerleştirin. Son olarak, satırı noktalı virgülle bitirin. Beyaz boşluğun CSS'de bir anlamı olmamasına rağmen, CSS'nin okunmasını kolaylaştırmak için girintiyi kullanın.
Örneğimiz şuna benzer:
Görüntünüzün boyutu nedeniyle doğru görüntülenmiyorsa, görüntüyü doğrudan değiştirebilirsiniz. Bununla birlikte, CSS'de arka planı değiştirmek için kullanabileceğiniz arka plan stili nitelikleri vardır. Arka plandan daha küçük olan görüntüler otomatik olarak arka planda tekrarlanacaktır.
Bunu kapatmak için (background-repeat) arkaplan tekrarını ekleyin: no-repeat
Bir görüntünün tüm arka planı kaplamasını sağlamanın iki yolu vardır. İlk olarak, arka plan boyutunu, arka plan boyutuna sahip ekran boyutuna ayarlayabilirsiniz :%100%100; , ancak bu görüntüyü uzatır ve görüntüyü çok fazla bozabilir. Görüntünün orantılarının değişmesini istemiyorsanız, arka plan boyutunu da kaplayacak şekilde ayarlayabilirsiniz. Kapak, arka plan görüntüsünün arka planı örtmesini sağlar, ancak görüntüyü bozmaz.
Arka Plan Rengini Değiştirme
Son bir şeyi değiştirelim. Artık bir arka planımız olduğuna göre paragrafımızı okumak zor. Arka planını beyaz yapalım.
Değiştirmek istediğimiz öğe #ourParagraph. #, ""ourParagraph" bir kimlik adı olduğunu belirtir. Ardından, arka plan rengi özelliğini beyaz olarak ayarlamak istiyoruz .
Çok daha iyi.
CSS ile Web Sitenizi Tasarlamaya Devam Etmek
Değiştirmek istediğiniz öğeyi tanımlayın ve niteliğin nasıl değiştirileceğini açıklayın.
Daha fazlasını öğrenmenin en iyi yolu, farklı niteliklerle oynamaktır.
