HTML dosya içerisinde bazı özellikleri belirtmek için sytle kodu kullanılır. Bu kod html içinde direk yazılarak kullanılabildiği gibi bir css dosyası referans gösterilerekte kullanılabilir.
Bu kodun üç şekilde kullanımı mevcuttur ve sonuç bu üç kullanım içinde aynıdır. Tekrarlanan kodlar için kullanım kolaylığına göre seçim yapmak gerekir.
1.<head> içinde kullanılan style
Aşağıdaki kodda style kodu head içinde yer almaktadır. Bu kod body içinde bulunan tüm div seçimlerinin yükseklik ve genişliği belirlenmiştir. .stop class'ı kullanılıyorsa arka plan renginin kırmızı olması sağlanmıştır.
<head>
<style>
div {
height : 50px;
width : 50px;
border-radius: 25px;
}
.stop {
background-color: red;
}
</style>
</head>
<body>
<div class="stop"></div>
<div>
This will have a red background.
</div>
</body>
2. div kodu içinde style kullanımı.
style kodu div içinde aşağıdaki gibi kullanılır ve sadece yazıldığı div içeriğini etkiler. Sadece bir kez kullanılacak olan özelliklerde tercih edilebilir.
<body>
<div style="background-color: red">
Test text.
</div>
<div style="background-color: red">
Test text.
</div>
</body>
3. Css dosyası içinde style kullanımı.
Html dosyasına bir referans css dosyası eklenerek bu css dosyası içinde style komutlarını kullanarak genel style kullanımları listelenebilir ve bu dosya referans gösterilerek tekrar tekrar yazmadan class'lar ile gösterilebilir.
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div>
This text.
</div>
</body>
Bu örnekte main.css dosyasına aşağıdaki div içeriği yazıldığında div kullanıldığı durumda arka lanın kırmızı olması sağlanır.
div {
background-color : red;
}
Bu kodun üç şekilde kullanımı mevcuttur ve sonuç bu üç kullanım içinde aynıdır. Tekrarlanan kodlar için kullanım kolaylığına göre seçim yapmak gerekir.
1.<head> içinde kullanılan style
Aşağıdaki kodda style kodu head içinde yer almaktadır. Bu kod body içinde bulunan tüm div seçimlerinin yükseklik ve genişliği belirlenmiştir. .stop class'ı kullanılıyorsa arka plan renginin kırmızı olması sağlanmıştır.
<head>
<style>
div {
height : 50px;
width : 50px;
border-radius: 25px;
}
.stop {
background-color: red;
}
</style>
</head>
<body>
<div class="stop"></div>
<div>
This will have a red background.
</div>
</body>
2. div kodu içinde style kullanımı.
style kodu div içinde aşağıdaki gibi kullanılır ve sadece yazıldığı div içeriğini etkiler. Sadece bir kez kullanılacak olan özelliklerde tercih edilebilir.
<body>
<div style="background-color: red">
Test text.
</div>
<div style="background-color: red">
Test text.
</div>
</body>
3. Css dosyası içinde style kullanımı.
Html dosyasına bir referans css dosyası eklenerek bu css dosyası içinde style komutlarını kullanarak genel style kullanımları listelenebilir ve bu dosya referans gösterilerek tekrar tekrar yazmadan class'lar ile gösterilebilir.
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div>
This text.
</div>
</body>
Bu örnekte main.css dosyasına aşağıdaki div içeriği yazıldığında div kullanıldığı durumda arka lanın kırmızı olması sağlanır.
div {
background-color : red;
}
Arka plana sabit resim koymak isterseniz aşağıdaki kodu kullanabilirsiniz.
<head>
<style>
body {
background-image: url('1.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
</head>
