html ile css arasındaki ilişkiyi ele alacağım bu yazımda. peki neden bu konuyu açtığımı kısaca açıklamak istiyorum. ben bu konuyu açarak css'i html içerisinde nasıl kullanabiliriz ve kullanırken nelere dikkat etmeliyiz bunu anlatmak adına bu konuyu açtım. gelin birlikte bakalım.
ilk özelliğimiz font özelliği html içerisinde kullanımına kısaca bakalım.

<html>
<head>
<title> css </title>
<style type="text/css">
<!--
p
{
font-size : 12pt;
font-family : arial;
font-weight : bold;
font-style : italic;
color : #00ffff;
}
-->
</style>
<body>
<p> web tasarım </p>
</body>
</html>
font-size : Font büyüklüğünü belirtir.
İsterseniz aşağıdaki gibi standart değerleri seçersiniz;
xx-large (en büyük )
x-large (biraz büyük)
large (büyük)
medium (orta)
small (küçük)
x-small (biraz küçük)
xx-small (en küçük)
isterseniz direkt olarak punto (pt) değerini verebilirsiniz.

font-family : Font tipini belirler.
Arial, Courier, Verdana gibi font isimlerini alabilir.

font-weight : Fontun kalınlı incelik durumunu belirler.
bold : Fontu kalın yapar. normal : Fontun normal halde olmasını sağlar.
Bu özellik yazılmadığında normal özellik alınır.
font-style : Fontun yatık olup olmamasını sağlar.
italic : Yazının sağa doğru yatık olmasını sağlar. normal : Fontu normal halde olmasını sağlar.
bu özellik yazılmadığında normal özellik alınır.
color : Fontun rengini belirler.
Blue, red,green gibi renklerin ingilizce karşılıklarını alabilir.

text özellikleri
Text özelliği ile de font özelliğinin sahip olmadığı bazı özellikleri etiketimize ekleriz. Örnek ile açıklayalım.

<html>
<head>
<title> css </title>
<style type="text/css">
<!--
p
{
<html>
<body>
<head>
<title>Css</title>
<style type="text/css">
<!--
p {
text-transform : lowercase;
text-decoration : underline;
text-align : left;
line-height : 20px;
text-indent : 15px;
}
-->
</style>
</head>
<body>
<p>Web tasarım</p>
</body>
</html>

Alt özellikleri tanıyalım.

text-transform :
lowercase : Yazının tümünün küçük harf olmasını sağlar.
uppercase : Yazının tümünün büyük harf olmasını sağlar.
capitalize : Yazının istenilen şekilde kalmasını sağlar.
text-decoration :
underline : Yazının altının çizili olmasını sağlar.
overline : Yazının üstünün çizili olmasının sağlar.
line-through : Yazının üstünün çizili olmasını sağlar.
none : Yazının herhangi bir yerine çizgi çekilmemesini sağlar.
text-align:
left: Yazının sola bitişik olmasını sağlar.
center : Yazının ortada olmasının sağlar.
right : Yazının sağa bitişik olmasını sağlar.
line-height :Yazının normal satırdan çizgi yüksekliğini belirler. 3px, 5px gibi değerler alır.
text-ident : Yazının soldan ne kadar boşlukla içeriden başlayacağını belirler. 5px, 10px gibi değerler alır.

Background ile html sayfamızın arkafonlarının özelliklerini değiştirmemizi sağlar.
<html>
<body>
<head>
<title>Css</title>
<style type="text/css">
<!--
p {
background-color :#00ff00;
background-image : url ("resim_adi.gif");
background-position : center;
background-repeat : repeat-y;
}
-->
</style>
<body>
<p>Web tasarım</p>
</body>
</html>

background-color : Arka fonun rengini belirler. Css’te renkleri blue, red gibi tanımlayabileceğimiz gibi Html kodunu vererek de tanımlayabiliriz.

background-image : Arka fonu bir resim dosyası yapmak için kullanılır. url etiketinin içine resim dosyasının yolu ve ismi tam olarak yazılmalıdır.

background-position :
left : Arka fondaki resmin sadece sol tarafta olmasını sağlar.
center : Arka fondaki resmin sadece sol tarafta olmasını sağlar.
right : Arka fondaki resmin sadece sol tarafta olmasını sağlar.
background-repeat : Arkafondaki resmin tekrarlanması istendiğinde kullanılır.
repeat : Tüm yönlerde tekrar edilmesini sağlar.
repeat-x : X (yatay) yönünde tekrar edilmesini sağlar.
repeat-y : Y (dikey) yönünde tekrar edilmesini sağlar.
no-repeat : Resmin tekrar edilmeyerek bir kere gösterilmesini sağlar.

list özellikleri
Bu Css özelliği <ul> ve <li> html etiketleri ile oluşturduğumuz listelerin özelliklerini belirlemek için kullanılır.
<html>
<body>
<head>
<title>Css</title>
<style type="text/css">
<!--
li {
list-style-type : circle;
list-style-position : inside;
list-style : decimal;
list-style-image : url ("resim.gif");
}
-->
</style>
<body>
<ul>
<li>Web tasarım
<li>Html
<li>Javascript
<li>Css
<li>Web Grafik
</ul>
</body>
</html>

list-style-type :
disk : Liste biçiminin disk (içi dolu yuvarlak) şeklinde olmasını sağlar. circle : Liste biçiminin çember şeklinde olmasını sağlar. square : Liste biçiminin kare olmasını sağlar. decimal : Liste biçiminin rakamlardan oluşmasını sağlar.
lower-roman : Liste biçiminin i,ii,iii, gibi roma rakamlarının küçük harfi olmasını sağlar.
upper-roman: Liste biçiminin I,II,II gibi roma rakamlarının büyük harfi olmasını sağlar. lower-alpha : Liste biçiminin a,b,c şeklinde olmasını sağlar. upper-alpha: Liste biçiminin A,B,C şeklinde olmasını sağlar. none : Listenin imgesiz olmasını sağlar.
list-style-position :
inside : Listenin ikinci satırının en soldan başlamasını sağlar. Outside : Listenin ikinci satırının ilk satır ile aynı yerden başlamasını sağlar.
list-style-image : Liste biçiminin resim olmasını sağlar.

Position Özelliği
Html’de kullandığımız Layer (katman) etiketlerinin html üzerindeki yerleştirme işlemi için kullanılır. Hemen bir örnek ile görelim.
<html>
<head>
<title>Css</title>
<style type="text/css">
<!--
div {
position:absolute;
top:20px;
left:10px;
width:200px;
height:200px;
clip:auto;
overflow:scroll;
z-index:auto;
visibility:visible;
}
-->
</style>
<body>
<div>
Web tasarım<br>
Html<br>
Javascript<br>
Css<br>
Grafik<br>
</div>
<p> Web tasarım
</body>
</html>

position :
absolute : Katmanın yerinin kesin olarak belirlenmek istendiğinde kullanılır.
relative : Katmanın yerinin göreli(diğer öğelere göre değişebilen) olarak belirlenmek istendiğinde kullanılır.
static : Katmanın yerinin sabit olarak belirlenmek istendiğinde kullanılır.

top : Katmanın üst kısımdan kaç piksel aşağıda olması gerektiğini belirler.

left : Katmanın sol kısımdan kaç piksel aşağıda olması gerektiğini belirler.

width : Katmanın genişliğinin kaç piksel olacağını belirler.

height : Katmanın boyunun kaç piksel olacağını belirler.

clip : Katmanın görünmesi istenen bölgeyi içeren kutucuk.

overflow : Katmanın belirtilen yükseklik ve genişliğe sığmayan kısmına ne olacağını belirler.
auto : Otomatik olarak belirlenir.

scroll : Kaydırma çubukları ekler.

visibility : Katmanın görünebilirlik ayarı yapar
visible : Görünür hale getirir.
hidden : Gizler.

z-index : Katmanın sayfa üzerindeki sıra sayısı.

Bir önceki yazımız olan css çeşitleri başlıklı makalemizde bağlantılı css, css ve css çeşitleri hakkında bilgiler verilmektedir.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir