CSS kavramlarını keşfetme

  • 4 dakika

CSS Yapısı

HTML sayfanızın etiketler arasındaki h1 tüm metni turuncu renkle görüntülemesini istiyorsanız, aşağıdaki CSS kodunu kullanabilirsiniz.

h1 {
    color: orange;
}

Yukarıdaki CSS kodu, stil eklemek istediğiniz HTML'yi seçen (h1) ile başlar. h1 Örnekteki öğesine seçici adı verilir.

Küme ayraçlarının içindeki koda dikkat edin, color: orange;t seçili h1 etiketin nasıl stillendirilmesi gerektiğini bildirir. Küme ayraçlarındaki { }CSS koduna color: orange; bildirim adı verilir.

Örnek bildiriminiz, iki nokta üst üste ()color ile bir değerden ayrılmış bir özelliğiorangeve ayarın sonu noktalı virgülle (: ) işaretlenir.

Not

CSS'de mevcut her özelliği ve değeri ezberlemenize gerek yoktur. Başvurabileceğiniz birçok web sitesi var. Ayrıca, vscode.dev veya Visual Studio Code gibi araçlar, CSS oluştururken size yardımcı olabilecek otomatik tamamlama seçenekleri sunar.

CSS dosyası ekleme

Stil bilgilerini eklemenin hızlı bir yolu, bir öznitelik kullanarak head bunu style HTML sayfanızın etiketlerine yerleştirmektir. Bu yöntem en iyi yöntem olarak kabul edilmez, ancak öğrenme ve test için kullanılabilir.

Aşağıdaki örnek, herhangi bir <style> kullanıcının gri görüntülemesi h1 için stil bilgilerini içeren etiketi ekler. Tek stil bu olduğundan, HTML'nin geri kalanı tarayıcının varsayılan stiliyle görüntülenir.

<!DOCTYPE html>
<html>
    <head>
        <!-- Here's the styling information -->
        <style>
            h1 {
                color: gray;
               }
        </style>
    </head>
    <body>
        <h1>Welcome</h1>
        <p>This is my site</p>
    </body>
</html>

Tarayıcıda görüntülendiğinde, etiketteki <h1> "Hoş Geldiniz" metni gri görüntülenir.

İşlenmiş H T M L sayfasının ekran görüntüsü, 1 başlığını gri olarak görüntüler.

CSS kullanarak HTML'ye stil uygulama

Köprü Metni biçimlendirme diline (HTML) stiller eklediğinizde, stilinizi ayrı bir CSS dosyasında yapmak en iyisidir. Birkaç HTML dosyası aynı CSS'yi kullandığında, tutarlı bir görünüme sahip olurlar. Ayrıca, tek bir CSS dosyasını güncelleştirmek, her bir HTML dosyasını güncelleştirmek zorunda kalmaktan daha kolaydır.

CSS dosyasına başvurmak için öğesini kullanırsınız link .

linkve reliki özniteliği vardırhref. rel, stil sayfaları için stil sayfası olan başvurmuş olduğunuz kaynak türünü tanımlamak için kullanılır. href CSS dosyasının yolunu tanımlamak için kullanılır. CSS dosyanız HTML dosyanızla aynı klasördeyse ve adı style.css ise, sayfanızdan başvurmak için aşağıdakileri kullanabilirsiniz:

<link rel="stylesheet" href="style.css">

Artık en az iki dosyanız var, bir .html dosya ve bir .css dosya. Önceki örnekte CSS'ye bağlanan bir HTML dosyası olacaktı.

<!DOCTYPE html>
<html>
    <head>
        <title>Welcome</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>Welcome</h1>
        <p>This is my site</p>
    </body>
</html>