Home-theater-designers
Bir web sitesi oluşturmak, kendinizi ifade etmenin harika bir yoludur. Birçok web sitesi oluşturma aracı olmasına rağmen, bunu kendiniz yazmak, web sitelerinin perde arkasında nasıl çalıştığı hakkında daha fazla bilgi edinmenin eğlenceli bir yoludur. Başlangıç için iyi bir proje, bir web sitesi oluşturmak ve CSS ile bir arka plan resmi eklemektir. Bu proje sizi hem HTML hem de CSS ile çalışır duruma getirecektir.
CSS nedir?
CSS, Basamaklı Stil Sayfası anlamına gelir. İşaretleme dillerine stil vermenizi sağlayan bir programlama dilidir. Böyle bir biçimlendirme dili, HTML veya Hiper Metin İşaretleme Dili'dir. HTML, web siteleri oluşturmak için kullanılır. HTML kullanarak web sitesinin bazı stillerini kontrol edebilmenize rağmen, 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 olduğundan, onu kullanmak için önce stil verecek bir şeye ihtiyacımız var. CSS ile oynamaya başlamamız için çok basit bir web sitesi yeterli olacaktır. Sayfamızda 'Merhaba Dünya' görüntülenecektir.
Hello World
HTML'ye aşina değilseniz, tüm öğelerin ne yaptığını hızlıca gözden geçirelim. Belirtildiği gibi, HTML bir biçimlendirme dilidir, yani metnin ne olduğunu işaretlemek için etiketleri kullanır. Etrafında bir kelime gördüğünüzde bu bir etikettir. İki tür etiket vardır, kullanarak bir bölümün başlangıcını işaretleyen bir etiket ve kullanarak bir bölümün sonunu işaretleyen etiket. Bir bölüm içindeki metin de bu ayrımın daha kolay görülmesini sağlamayı amaçlamaktadır.
Örneğimizde dört etiketimiz var. NS html etiketi, hangi öğelerin web sitesinin parçası olduğunu gösterir. NS kafa etiketi, sayfada görüntülenmeyen ancak sayfayı oluşturmak için gerekli olan başlık bilgilerini içerir. Görüntülenen öğelerin tümü arasında vücut etiketler. Yalnızca bir görüntülenen öğemiz var, P etiket. Web tarayıcısına metnin bir paragraf olduğunu söyler.
İlgili: 10 Dakikada Öğrenebileceğiniz 10 Basit CSS Kodu Örneği
HTML'ye CSS Eklemek
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 ama paragrafımızı öne çıkararak başlayalım ki bir kenarlık ekleyerek onu arka plandan ayırt edebilelim.
Hello World
Şimdi paragrafımız siyah bir kenarlıkla çevrili olacak. Paragraf etiketimize CSS'de bir stil açıklaması eklemek, web sitesine paragrafın nasıl stillendirileceğini anlattı. Daha fazla açıklama ekleyebiliriz. Paragrafımızın etrafındaki beyaz boşluğu veya dolguyu artıralım ve metnimizi ortalayalım.
Hello World
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 bilgiyi başlığımıza taşıyabiliriz. Başlığımız, web sitesini doğru bir şekilde görüntülememiz gereken bilgiler içindir.
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}
Hello World
Artık HTML'mizi okumak daha kolay. Bazı şeyleri değiştirmek zorunda kaldığımızı fark edeceksiniz. Stil etiketi, web tarayıcısına stil bilgilerinin yanı sıra neyin stil verileceğini de söyler. Örneğimizde, neye stil verileceğini söylemek için iki farklı yol kullandık. NS P stil etiketi, web tarayıcısına bu stili tüm paragraf etiketlerine uygulamasını söylüyor. NS #ourParagraf bölüm, yalnızca kimliğe sahip öğelere stil vermesini söyler bizimParagrafımız . dikkat edin İD Vücudumuzdaki p etiketine bilgi eklendi.
android telefon için en iyi temizleme uygulaması
Bir CSS Dosyasını Web Sitenize Aktarma
Stil bilgilerini başlığa eklemek, kodumuzu okumayı çok daha kolay hale getirir. Ancak, birçok farklı sayfayı aynı şekilde biçimlendirmek istiyorsak, o metni her sayfanın başına eklememiz gerekir. Bu çok fazla iş gibi görünmeyebilir, sonuçta 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ı stillendirmek için dosyayı içe aktaracağız. Stil etiketleri arasındaki bilgileri kopyalayıp yeni bir CSS dosyasına yapıştırın bizimCSSdosyamız.css .
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}Ardından dosyayı HTML dosyasına aktarın.
Hello World
CSS ile Arka Plan Resmi Ekleme
Artık HTML ve CSS'de sağlam bir temele sahip olduğunuza göre, arka plan resmi eklemek çocuk oyuncağı olacaktır. İlk olarak, hangi öğeye arka plan görüntüsü vermek istediğinizi belirleyin. Örneğimizde, tüm sayfaya bir arka plan ekleyeceğiz. Bu, stilini değiştirmek istediğimiz anlamına gelir. vücut . Unutmayın, gövde etiketleri tüm görünür öğeleri içerir.
body{
background-image: url('sky.jpg');
}
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}CSS'de gövde stilini değiştirmek için önce vücut anahtar kelime. Ardından {} öncesinde yaptığımız gibi küme parantezleri ekleyin. Gövde için tüm stil bilgileri küme parantezleri arasında olmalıdır. Değiştirmek istediğimiz stil özelliği arka plan görüntüsü . Birçok stil özelliği vardır. Hepsini ezberlemeyi beklemeyin. Hatırlamak istediğiniz niteliklere sahip bir CSS özellikleri kopya sayfasına yer işareti koyun.
İlgili: Herkesin Web Sitelerine Ekleyebileceği 8 Harika HTML Efekti
iphone'da gizli moda nasıl geçilir
Nitelikten sonra, niteliği nasıl değiştireceğinizi belirtmek için iki nokta üst üste kullanın. Bir görüntüyü içe aktarmak için şunu kullanın: url() . resme işaret etmek için bir bağlantı kullandığınızı gösterir. Dosya konumunu tırnak işaretleri arasında parantez içine yerleştirin. Son olarak, satırı noktalı virgülle bitirin. Beyaz boşluğun CSS'de bir anlamı olmamasına rağmen, CSS'nin daha kolay okunmasını sağlamak için girinti kullanın.
Örneğimiz şuna benziyor:
Resminiz, resmin boyutu nedeniyle düzgün görüntülenmiyorsa, resmi doğrudan değiştirebilirsiniz. Ancak, CSS'de arka planı değiştirmek için kullanabileceğiniz arka plan stili özellikleri vardır. Arka plandan daha küçük olan resimler arka planda otomatik olarak tekrarlanacaktır. Bunu kapatmak için ekleyin arka plan-tekrar:tekrarsız; senin elementine.
Ayrıca bir görüntünün tüm arka planı kaplamasını sağlamanın iki yolu vardır. İlk olarak, arka plan boyutunu ekranın boyutuna ayarlayabilirsiniz. arka plan boyutu: %100 %100; , ancak bu görüntüyü uzatır ve görüntüyü çok fazla bozabilir. Görüntünün oranlarının değişmesini istemiyorsanız, arka plan boyutunu da örtmek . 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 geçmişimiz olduğuna göre, paragrafımızı okumak zor. Arka planını beyaz yapalım. Süreç benzer. Değiştirmek istediğimiz öğe #ourParagraph. #, 'yourParagraph'ın bir kimlik adı olduğunu gösterir. Ardından, ayarlamak istiyoruz arka plan rengi beyazın özelliği.
body{
background-image: url('sky.jpg');
}
p {
text-align: center
}
#ourParagraph {
background-color: white;
border-style: solid;
padding: 30px;
}Çok daha iyi.
Web Sitenizi CSS ile Tasarlamaya Devam Edin
Artık farklı HTML öğelerinin stilini nasıl değiştireceğinizi bildiğinize göre, sınır gökyüzünde! Stil niteliklerini değiştirmenin temel yöntemi aynıdır. Değiştirmek istediğiniz öğeyi tanımlayın ve niteliği nasıl değiştireceğinizi açıklayın. Daha fazlasını öğrenmenin en iyi yolu, farklı özelliklerle oynamaktır. Bir sonraki metninizin rengini değiştirmek için kendinize sorun.
Paylaş Paylaş Cıvıldamak E-posta Kaliteli HTML Kodlama Örnekleri için En İyi 8 SiteKendi web sitelerinizi ve uygulamalarınızı kodlamak için HTML öğrenmek ister misiniz? Kendinize HTML ve CSS öğretmek için bu web sayfası örneklerini ve kaynak kodunu kullanın.
Sonrakini Oku İlgili konular- Programlama
- HTML
- Web Tasarım
- CSS
J. Seaton, karmaşık konuları ayrıştırma konusunda uzmanlaşmış bir Bilim Yazarıdır. Saskatchewan Üniversitesi'nden doktora derecesine sahiptir; Araştırması, öğrencilerin çevrimiçi katılımını artırmak için oyun tabanlı öğrenmeyi kullanmaya odaklandı. Çalışmadığı zamanlarda onu kitap okurken, video oyunları oynarken ya da bahçe işleriyle uğraşırken bulacaksınız.
Jennifer Seaton'dan Daha FazlaHaber bültenimize abone ol
Teknik ipuçları, incelemeler, ücretsiz e-kitaplar ve özel fırsatlar için bültenimize katılın!
Abone olmak için buraya tıklayın