Html ile CSS Kullanım Biçimleri

Bu dersimizde Html dökümanları ile CSS kullanım biçimlerine değinelim.

Bu dersimizde Html dökümanları ile CSS kullanım biçimlerine değinelim.

Html dokümanları ile css kodlarının 3 şekilde kullanımı vardır.Html ile arası iyi olan arkadaşlar bu dersi kolay anlıcaklarını umuyorum..

1.style özelliklerinin etiketin içine yerleştirilmesi:
Bu durumda etiketin içine diğer parametreler gibi yerleştirilir.

ÖRNEK:


<p style="font-family:arial;font-size:12px; font-color:black;">YAZILACAK OLAN BİLGİLER</p>



2.Sayfanın "head" bölümüne yerleştirilmesi :
Hazırlanan style özelliklerini sayfanın "head" bölümüne aşşadaki gibi yerleştirilir.

ÖRNEK:


<html>

<head>

<style>

p{font-family:arial; font-size:12px;}

</style>

</head>



3.Dışarıdan ayrı bir dosya olarak kullanılması:
Böyle bir durumda dosya iki şekilde kullanılabilir.

Style özellillerini içeren bir dosya yazıldıktan sonra *.css uzantasıyla kaydedilir.ardından sayfanın "head" bölümünde bu dosya ile bir bağlantı kurulur.

ÖRNEK:


<html>

<head>

<link type="text/css"rel="stylesheet" href="style/css.css">

</head>



Aynı şekilde bir css dosyası oluşturulur. Dışarıda ki bu dosya ile aynı şekilde "head" bölümünde aşşadakine benzer bir bağlantı kurulur.

ÖRNEK:


<html>

<head>

<style>@import url(style.css);</style>

</head>



ÖRNEK:


<>-- HARİCİ CSS DOSYASI KULLANIMI --->

<html>

<head>

<link rel="stylesheet" type="text/css" href="stiller.css">

<meta http-equiv="content-type" content="text/html;charset=">

</head>

<body>

<h1 style="color=blue">ÖZLÜ SÖZLER</h1>

<p>Alçakta olan kimse düşmekten korkmaz</p>

<p>En bitmek bilmeyen iş daha başlamayan iştir</p>

</body>

<html>



stiller.css (html sayfanın bağlantı kuracağı harici stil sayfası)


/*CSS Document*/

<style type="text/css">

<!--

p{font-family:verdana;font-size:12px;color:magenta}

-->

</style>

  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Yeni başlayanlar için güzel olmuş.
daha ekledim eklediklerimi yayınlasalar kullanışlı olur yeni başlayanlar için..
evet çok güzel olmuş tşler devamını bekliyorum bide divleri anlatsanız ben yeni kursa başladım <div id=ana>anlamadım olmuyo tarayıcıda görüntü alamıyorum.

Yukarı Git