HTML Stilleri - CSS
CSS, Basamaklı Stil Sayfaları anlamına gelir.
CSS çok fazla iş tasarrufu sağlar. Aynı anda birden fazla web sayfasının düzenini kontrol edebilir.
CSS = Stiller ve Renkler
CSS nedir?
Basamaklı Stil Sayfaları (CSS), bir web sayfasının düzenini biçimlendirmek için kullanılır.
CSS ile rengi, yazı tipini, metnin boyutunu, öğeler arasındaki boşluğu, öğelerin nasıl konumlandırıldığını ve düzenlendiğini, hangi arka plan resimlerinin veya arka plan renklerinin kullanılacağını, farklı cihazlar ve ekran boyutları için farklı ekranları ve daha fazla!
İpucu: Basamaklı sözcüğü , bir üst öğeye uygulanan bir stilin üst öğe içindeki tüm alt öğelere de uygulanacağı anlamına gelir. Bu nedenle, gövde metninin rengini "mavi" olarak ayarlarsanız, gövde içindeki tüm başlıklar, paragraflar ve diğer metin öğeleri de aynı rengi alır (başka bir şey belirtmediğiniz sürece)!
CSS'yi kullanma
CSS, HTML belgelerine 3 şekilde eklenebilir:
- Satır içi
style- HTML öğelerinin içindeki özniteliği kullanarak - Dahili - bölümdeki bir
<style>öğeyi kullanarak<head> - Harici -
<link>harici bir CSS dosyasına bağlanmak için bir öğe kullanarak
CSS eklemenin en yaygın yolu, stilleri harici CSS dosyalarında tutmaktır. Ancak, bu öğreticide satır içi ve dahili stilleri kullanacağız, çünkü bunu göstermek daha kolay ve kendiniz denemeniz daha kolay.
Satır içi CSS
Tek bir HTML öğesine benzersiz bir stil uygulamak için satır içi CSS kullanılır.
Satır içi CSS style, bir HTML öğesinin özniteliğini kullanır.
Aşağıdaki örnek, öğenin metin rengini <h1>mavi ve öğenin metin rengini <p>kırmızı olarak ayarlar:
Örnek
<h1 style="color:blue;">A Blue Heading</h1>
<p
style="color:red;">A red paragraph.</p>
Dahili CSS
Tek bir HTML sayfası için bir stil tanımlamak için dahili bir CSS kullanılır.
<head>Bir HTML sayfasının bölümünde, bir <style>öğe içinde dahili bir CSS tanımlanır .
Aşağıdaki örnek, TÜM <h1>öğelerin (o sayfadaki) metin rengini maviye ve TÜM <p>öğelerin metin rengini kırmızıya ayarlar. Ayrıca, sayfa "pudra mavisi" arka plan rengiyle görüntülenecektir:
Örnek
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a
heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Harici CSS
Birçok HTML sayfasının stilini tanımlamak için harici bir stil sayfası kullanılır.
<head>Harici bir stil sayfası kullanmak için , her HTML sayfasının bölümüne bir bağlantı ekleyin :
Örnek
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Harici stil sayfası herhangi bir metin düzenleyicide yazılabilir. Dosya herhangi bir HTML kodu içermemeli ve bir .css uzantısıyla kaydedilmelidir.
"styles.css" dosyası şöyle görünür:
"styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
İpucu: Harici bir stil sayfasıyla, bir dosyayı değiştirerek tüm web sitesinin görünümünü değiştirebilirsiniz!
CSS Renkleri, Yazı Tipleri ve Boyutları
Burada, yaygın olarak kullanılan bazı CSS özelliklerini göstereceğiz. Onlar hakkında daha sonra daha fazlasını öğreneceksiniz.
CSS colorözelliği, kullanılacak metin rengini tanımlar.
CSS font-familyözelliği, kullanılacak yazı tipini tanımlar.
CSS font-sizeözelliği, kullanılacak metin boyutunu tanımlar.
Örnek
CSS rengi, yazı tipi ailesi ve yazı tipi boyutu özelliklerinin kullanımı:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS Kenarlığı
CSS borderözelliği, bir HTML öğesinin etrafında bir kenarlık tanımlar.
İpucu: Neredeyse tüm HTML öğeleri için bir kenarlık tanımlayabilirsiniz.
Örnek
CSS kenarlık özelliğinin kullanımı:
p {
border: 2px
solid powderblue;
}
CSS Dolgusu
CSS paddingözelliği, metin ve kenarlık arasında bir dolgu (boşluk) tanımlar.
Örnek
CSS kenarlık ve dolgu özelliklerinin kullanımı:
p {
border: 2px
solid powderblue;
padding: 30px;
}
CSS Marjı
CSS marginözelliği, sınırın dışında bir kenar boşluğu (boşluk) tanımlar.
Örnek
CSS kenarlık ve kenar boşluğu özelliklerinin kullanımı:
p {
border: 2px
solid powderblue;
margin: 50px;
}
Harici CSS'ye bağlantı
Harici stil sayfalarına tam bir URL veya geçerli web sayfasına göre bir yolla başvurulabilir.
Örnek
Bu örnek, bir stil sayfasına bağlanmak için tam bir URL kullanır:
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
Örnek
Bu örnek, geçerli web sitesindeki html klasöründe bulunan bir stil sayfasına bağlantı verir:
<link rel="stylesheet" href="/html/styles.css">
Örnek
Bu örnek, geçerli sayfayla aynı klasörde bulunan bir stil sayfasına bağlanır:
<link rel="stylesheet" href="styles.css">
Dosya yolları hakkında daha fazla bilgiyi HTML Dosya Yolları bölümünde okuyabilirsiniz .
Bölüm özeti
styleSatır içi stil için HTML özelliğini kullanın<style>Dahili CSS'yi tanımlamak için HTML öğesini kullanın<link>Harici bir CSS dosyasına başvurmak için HTML öğesini kullanın<head><style> ve <link> öğelerini depolamak için HTML öğesini kullanıncolorMetin renkleri için CSS özelliğini kullanınfont-familyMetin yazı tipleri için CSS özelliğini kullanınfont-sizeMetin boyutları için CSS özelliğini kullanınborderKenarlıklar için CSS özelliğini kullanınpaddingKenarlık içindeki boşluk için CSS özelliğini kullanınmarginSınırın dışındaki boşluk için CSS özelliğini kullanın
İpucu: CSS Eğitimimizde CSS hakkında çok daha fazla bilgi edinebilirsiniz .
HTML Alıştırmaları
HTML Stil Etiketleri
| Tag | Description |
|---|---|
| <style> | Defines style information for an HTML document |
| <link> | Defines a link between a document and an external resource |
Mevcut tüm HTML etiketlerinin tam listesi için HTML Etiket Referansımızı ziyaret edin .