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. İ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, Basamaklı Stil Sayfasının kısaltmasıdır. Biçimlendirme dillerinin stilini belirlemenizi sağlayan bir programlama dilidir. Böyle bir biçimlendirme dili HTML veya Hyper-Text Markup Language'dir. HTML, web siteleri oluşturmak için kullanılır. 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 olduğu için, 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 "Merhaba Dünya" görüntülenecektir.
Selam Dünya
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. Etrafında bir kelime gördüğünde <> bu bir etikettir. İki tür etiket vardır; bir bölümün başlangıcını <> kullanarak işaretleyen ve bir bölümün sonunu <> kullanarak işaretleyen etiket
Örneğimizde dört etiketimiz var. html etiketi, hangi öğelerin web sitesinin parçası olduğunu gösterir. baş etiketi, sayfada görüntülenmeyen ancak sayfayı oluşturmak için gerekli olan başlık bilgilerini içerir. Görüntülenen tüm öğeler, vücut etiketleri. Yalnızca bir görüntülenen öğemiz var, p etiket. Web tarayıcısına metnin bir paragraf olduğunu söyler.
İlişkili: 10 Dakikada Öğrenebileceğiniz 10 Basit CSS Kod Örneği
CSS kullanımı hakkında daha fazla bilgi edinmek ister misiniz? Başlamak için bu temel CSS kod örneklerini deneyin, ardından bunları kendi web sayfalarınıza uygulayın.
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.
Selam Dünya
Şimdi, paragrafımız siyah bir sınırla çevrelenecek. Paragraf etiketimize CSS'de bir stil açıklaması eklemek, web sitesine 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.
Selam Dünya
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.
Selam Dünya
Artık HTML'mizin okunması daha kolay. Bazı şeyleri değiştirmek zorunda olduğumuzu fark edeceksiniz. Stil etiketi, web tarayıcısı stil bilgisinin yanı sıra neyin stil verileceğini de söyler. Örneğimizde, ona neyi biçimlendireceğini söylemek için iki farklı yol kullandık. p stil etiketinde, web tarayıcısına bu stili tüm paragraf etiketlerine uygulamasını söyler. #ourParagraph bölümü, yalnızca kimliğine sahip öğelere stil vermesini söyler bizimParagrafımız. Dikkat edin İD bilgileri vücudumuzdaki p etiketine eklendi.
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 yapıştırın ourCSSfile.css.
p {
metin hizalama: merkez
}
#ourParagraph {
kenarlık stili: düz;
dolgu: 30px;
}Ardından, dosyayı HTML dosyasına aktarın.
Selam Dünya
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, sayfanın tamamına bir arka plan ekleyeceğiz. Bu, sitenin stilini değiştirmek istediğimiz anlamına gelir. vücut. Gövde etiketlerinin tüm görünür öğeleri içerdiğini unutmayın.
vücut{
arkaplan resmi: url ("sky.jpg");
}
p {
metin hizalama: merkez
}
#ourParagraph {
kenarlık stili: düz;
dolgu: 30px;
}CSS'de gövde stilini değiştirmek için önce vücut anahtar kelime. 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ü. Birçok stil özelliği vardır. Hepsini ezberlemeyi beklemeyin. Yer imi a CSS özellikleri hile sayfası hatırlamak istediğiniz niteliklerle.
İlişkili: Herkesin Web Sitesine Ekleyebileceği 8 Harika HTML Efekti
Öznitelikten sonra, özniteliğ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 kullanın url (). 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 görüntünüz 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 şunu ekleyin: arkaplan tekrar: tekrar yok; elementinize.
Bir görüntünün tüm arka planı kaplamasını sağlamanın da iki yolu vardır. İlk olarak, arka plan boyutunu ekran 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ştirilmesini istemiyorsanız, arka plan boyutunu da ayarlayabilirsiniz. ö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 arka planımız 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. #, "Paragrafımızın" bir kimlik adı olduğunu belirtir. Sonra, ayarlamak istiyoruz arka plan rengi beyaz özniteliği.
vücut{
arkaplan resmi: url ("sky.jpg");
}
p {
metin hizalama: merkez
}
#ourParagraph {
arka plan rengi: beyaz;
kenarlık stili: düz;
dolgu: 30px;
}Çok daha iyi.
CSS ile Web Sitenizi Tasarlamaya Devam Etmek
Artık farklı HTML öğelerinin stilini nasıl değiştireceğinizi bildiğinize göre gökyüzü sınırdır! Stil niteliklerini değiştirmenin temel yöntemi aynıdır. 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. Daha sonra metninizin rengini değiştirmek için kendinize sorun.
Kendi 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.
- Programlama
- HTML
- Web Tasarım
- CSS
J. Seaton, karmaşık konuları ayırmada uzmanlaşmış bir Bilim Yazarıdır. Saskatchewan Üniversitesi'nden doktorası vardır; araştırması, öğrencilerin çevrimiçi katılımını artırmak için oyun tabanlı öğrenmeyi kullanmaya odaklandı. Çalışmadığı zamanlarda onu okurken, video oyunları oynarken veya bahçeyle uğraşırken bulacaksınız.
Haber bültenimize abone ol
Teknoloji ipuçları, incelemeler, ücretsiz e-kitaplar ve özel fırsatlar için haber bültenimize katılın!
Bir adım daha…!
Lütfen size az önce gönderdiğimiz e-postadaki e-posta adresinizi onaylayın.
