HTML – CSS Stil Yapısı!
Html dosyalarını <style></style> etiketleri ile biçimlendirebiliyoruz. Ancak CSS dosyalarımız ile bu biçimlendirmeyi daha etkili yapabiliriz.
HTML’yi CSS ile biçimlendirme
CSS açılımı C ascading S tyle S heets.
CSS, HTML öğelerinin ekranda, kağıtta veya başka bir ortamda nasıl görüntüleneceğini açıklar .
CSS çok fazla iş tasarrufu sağlar . Aynı anda birden fazla web sayfasının düzenini kontrol edebilir.
CSS, HTML öğelerine 3 şekilde eklenebilir:
- Satır içi – HTML öğelerinde stil özelliğini kullanarak
- Dahili – bölümdeki bir
<style>öğeyi kullanarak. - Harici – harici bir CSS dosyası kullanarak
CSS eklemenin en yaygın yolu, stilleri ayrı CSS dosyalarında tutmaktır. Ancak, burada satır içi ve dahili stil kullanacağız, çünkü bunu göstermeniz daha kolay ve kendiniz denemeniz daha kolay.
Satır içi CSS
Bir satır içi CSS, tek bir HTML öğesine benzersiz bir stil uygulamak için kullanılır.
Satır içi bir CSS, bir HTML öğesinin stil niteliğini kullanır.
Bu örnek, <h1>öğenin metin rengini mavi olarak ayarlar :
<h1 style="color:blue;">Bu bir mavi başlık</h1>Çıktısı;
See the Pen mavi başlık by ArmyYazılım (@armyyazilim) on CodePen.
Dahili CSS
Tek bir HTML sayfasının stilini tanımlamak için dahili bir CSS kullanılır.
Bir <head>HTML sayfasının bölümünde, bir <style>öğenin içinde bir iç CSS tanımlanmıştır :
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>Bu bir başlık</h1>
<p>Bu bir paragraf.</p>
</body>
</html>Çıktısı;
See the Pen dahili css by ArmyYazılım (@armyyazilim) on CodePen.
Dış CSS
Birçok HTML sayfasının stilini tanımlamak için harici bir stil sayfası kullanılır.
Harici bir stil sayfasıyla, bir dosyayı değiştirerek tüm web sitesinin görünümünü değiştirebilirsiniz!
Harici bir stil sayfası kullanmak için <head>, HTML sayfasının bölümüne bir link ekleyin :
<link rel="stylesheet" href="styles.css">“style.css” burada stil doyanızın adıdır. Burayı tendinize göre düzenleyebilirsiniz.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Bu bir başlık</h1>
<p>Bu bir paragraf.</p>
</body>
</html>Çıktısı;
See the Pen dış css by ArmyYazılım (@armyyazilim) on CodePen.
Harici bir stil sayfası herhangi bir metin düzenleyicisine yazılabilir. Dosya herhangi bir HTML kodu içermemeli ve bir .css uzantısıyla kaydedilmelidir.
İşte “styles.css” böyle görünüyor:
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}CSS Yazı Tipleri
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.
<!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>Çıktısı;
See the Pen css text stilleri by ArmyYazılım (@armyyazilim) on CodePen.
CSS Border
CSS borderözelliği, bir HTML öğesinin etrafındaki bir kenarlığı tanımlar:
p {
border: 1px solid powderblue;
}Çıktısı;
See the Pen css border by ArmyYazılım (@armyyazilim) on CodePen.
CSS Padding
CSS paddingözelliği, metin ve kenarlık arasında bir dolgu (boşluk) tanımlar:
p {
border: 1px solid powderblue;
padding: 30px;
}Çıktısı;
See the Pen css padding by ArmyYazılım (@armyyazilim) on CodePen.
CSS Margin
CSS marginözelliği, sınırın dışında bir boşluk (boşluk) tanımlar:
p {
border: 1px solid powderblue;
margin: 50px;
}Çıktısı;
See the Pen css margin by ArmyYazılım (@armyyazilim) on CodePen.
Kimlik Özniteliği
Özel bir öğeye belirli bir stil tanımlamak için öğeye id özellik ekleyin :
<p id="p01">Ben farklı paragrafım.</p>daha sonra, belirli bir kimliğe sahip eleman için bir stil tanımlayın:
#p01 {
color: blue;
}Çıktısı;
See the Pen css id by ArmyYazılım (@armyyazilim) on CodePen.
Not: Bir öğenin kimliği sayfa içinde benzersiz olmalıdır, bu nedenle kimlik seçicisi benzersiz bir öğe seçmek için kullanılır!
Sınıf Özniteliği
Özel eleman türleri için bir stil tanımlamak için, classelemana bir özellik ekleyin :
<p class="error">I am different</p>daha sonra belirli sınıfa sahip elemanlar için bir stil tanımlayın:
p.error {
color: red;
}Çıktısı;
See the Pen css class by ArmyYazılım (@armyyazilim) on CodePen.
Not: “class” yani sınıf stillerini istediğiniz etiketler için kullanabilirsiniz.
Dış Kaynaklar
Dış stil sayfalarına tam URL ile veya geçerli web sayfasına göre bir yolla başvurulabilir.
Bu örnek, stil sayfasına bağlantı oluşturmak için tam bir Web URL kullanır:
<link rel="stylesheet" href="https://www.armyyazilim.com/html/styles.css">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">Bu örnek, geçerli sayfayla aynı klasörde bulunan bir stil sayfasına bağlantı verir:
<link rel="stylesheet" href="styles.css">Bölüm özeti
style:Satı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 saklamak için HTML öğesini kullanın
color:Metin renkleri için CSS özelliğini kullanın
font-family:Metin yazı tipleri için CSS özelliğini kullanın
font-size:Metin boyutları için CSS özelliğini kullanın
border:Kenarlıklar için CSS özelliğini kullanın
padding:Kenarlığın içindeki boşluk için CSS özelliğini kullanın.
margin:Kenarlığın dışındaki boşluk için CSS özelliğini kullanın.
HTML Stili Etiketleri
<style> : Bir HTML belgesi için stil bilgilerini tanımlar.
<link> : Belge ile harici kaynak arasındaki bağlantıyı tanımlar.
İlginizi çekebilir…
WordPress Kişisel Blog Temaları! (Ücretli – Ücretsiz)
Bu makaleyi beğendiyseniz, lütfen WordPress video eğiticileri için YouTube Kanalımıza abone olun . Bizi Twitter ve İnstagram‘da da bulabilirsiniz …