HTML sayfalarını CSS ile Düzenleme

WEBMASTER ÖZEL > XHTML-CSS-HTML

(1/1)

danua:
HTML sayfalarını CSS ile Düzenleme

Html içerisinde düzenleme yaparken sayfanın stilini oluşturmak için css yapısını kullanacağız. Html de Css kod yapısı 3 şekil de kullanılmaktadır.
1. Inline Html sayfası içerisinde ayrı bir css dosyası oluşturmadan <h1> etiketleri arasında aynı sayfa içerisin de düzenleme yapmamıza yardımcı olur bunu bir örnekle aşağıda belirttiğimiz de daha iyi anlaşılacak.

Örnek

--- Kod: ---<h1 style="color:blue;">HTML Dersleri</h1>
--- Kod sonu ---
Aynı Sayfa içerisinde yazılacak yazının rengini başka bir düzenlemeye gerek kalmadan mavi olarak yazmasını istedik.

2. Internal Css de ise dahili css kodlarını <head> altına <style > etiketleri arasına yazacağımız css kodlarını aynu html sayfası içerisinde alt alta yazarak kullanmak

örnek

--- Kod: ---<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: red;}
h1 {color: white;}
p {color:black;}
</style>
</head>
<body>

<h1>HTML Dersleri</h1>
<p>Css yi Html sayfasına dahil etme</p>

</body>
</html>

--- Kod sonu ---

External CSS (Harici css dosyaları oluşturma)

Burada hazırlamış olduğumuz Html projesinde bir çok html sayfasının harici bir css dosyasıyla yönetilmesinin sağlanması.
Örnek

--- Kod: ---<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>HTML Dersleri</h1>
<p>Css Harici stil dosyası oluşturma/p>

</body>
</html>

--- Kod sonu ---

Buradaki ayrıntı uzantısı "styles.css" olan bir veya birden fazla stil dosyası harici olarak hazırlanıp ana dosyadan "<link rel="stylesheet" href="styles.css"> "kodula çağrılarak sayfa stilini oluşturmaktan ibarettir.

Alttaki kodlar html kodu içermeden ayrı bir dosya halinda uzantısı "styles.css" olarak oluşturulur.

--- Kod: ---body {
background-color: red;
}
h1 {
color: white;
}
p {
color: black;
}
--- Kod sonu ---

Css Fonts (Css Yazı Tipleri)

color = Renk Özelliğini Belirtmek İçin Kullaılır.
font-family = Yazı Tipini Belirlemek İçin Kullanılır.
font-size = Yazı Boyutunu Belirlemede Kullanılır.

Örnek

--- Kod: ---<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 200%;

}
p {
color: red;
font-family: courier;
font-size: 120%;
}
</style>
</head>
<body>

<h1>HTML Css Desleri</h1>
<p>Css Yazı Fontları</p>

</body>
</html>

--- Kod sonu ---

CSS Border (Css Kenarlıklar)

Border = Yazılarınızı kutu içerisine alır bir başka değişle kenerlıklar ekler.

--- Kod: ---<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid black;
}
</style>
</head>
<body>

<h1>Css border</h1>

<p>Css border</p>
<p>Css border</p>
<p>Css border</p>

</body>
</html>

--- Kod sonu ---

CSS Padding (dolgu ,Boşluk)
Metinle Kenarlık arasındaki mesafe ayarını yapar
Örnek

--- Kod: ---<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid powderblue;
padding: 40px;
}
</style>
</head>
<body>

<h1>CSS Padding</h1>

<p>CSS Padding</p>
<p>Metin ile Kenarlık arasında </p>
<p>Boşluk,Dolgu yapar, sınırı ayarlar</p>

</body>
</html>

--- Kod sonu ---

CSS Margin= Kenarlıklar arasındaki boşluk miktarını belirler

Örnek

--- Kod: ---<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid black;
margin: 40px;
}
</style>
</head>
<body>

<h1>CSS Margin</h1>

<p>CSS Margin</p>
<p>CSS Margin</p>
<p>CSS Margin</p>

</body>
</html>

--- Kod sonu ---

Linkback: HTML sayfalarını CSS ile Düzenleme

Navigasyon

[0] Mesajlar

Tam sürüme git