Konular

Cssin Html İçerisinde Kullanım Şekilleri, Pseudo Class Örnekleri

Cssin html içerisinde kullanım şekilleri, pseudo class örnekleri

Css'in HTML içerisinde kullanım şekilleri

 

1.)Kod içince (In-line)

2.)<style> Kullanarak

3.)Harici CSS dosyası oluşturarak

4.)@import İle Eklemek

 

Kod İçine (In-Line)

HTML dosyasının içinde style özelliği kullanılarak uygulanabilir.

 

 

<div style=&#8221;color:blue&#8221;>Mavi Renkli Yazımız

 <style> Kullanarak

Tüm CSS komutlarını html dosyalarının içerisine uygulamak sadece özel durumlarda (öğrneğin önemli bir haber için haber başlığını kırmızı yapmak isterseniz) tavsiye ederim. Bu yöntemi bilin ama gerekli durumlar hariç kullanmayın.

<!DOCTYPE html PUBLIC &#8220;-//W3C//DTD XHTML 1.0 Transitional//EN&#8221;
&#8220;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#8220;>
<html xmlns=&#8221;http://www.w3.org/1999/xhtml&#8220;>
<head>
<meta http-equiv=&#8221;Content-Type&#8221; content=&#8221;text/html; charset=utf-8¨
/>

<title>CSS&#8217;i Uygulamak </title>
<style type=&#8221;text/css&#8221;>
div{
color:red;
}
</style>
</head>
 

 

 

 

Harici CSS Dosyası Oluşturmak

Bu yöntem en çok kullanılan ve tavsiye edilen yöntemdir. Bu yöntemde .css uzantılı ayrı bir dosya oluşturulur ve diğer tüm html sayfalarına

<link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;dosya_adi.css&#8221; mce_href=&#8221;dosya_adi.css&#8221; />

 

şeklinde dosya yolu tanıtılır.Bu yöntemle 100 tane html sayfanız olsa bile oluşturduğunuz .css uzantılı CSS dosyanızda yapacağınız değişiklikler aynı zamanda tüm sayfaları değiştirecektir.

@İmport ile eklemek

<!DOCTYPE html PUBLIC &#8220;-//W3C//DTD XHTML 1.0 Transitional//EN&#8221;
&#8220;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#8220;>
<html xmlns=&#8221;http://www.w3.org/1999/xhtml&#8220;>
<head>
<meta http-equiv=&#8221;Content-Type&#8221; content=&#8221;text/html; charset=utf-8&#8243;
/>

<title>CSS&#8217;i Uygulamak</title>
<style type=&#8221;text/css&#8221;>
@import &#8220;ornek.css&#8221;;
</style>
</head>
 

 

 

 

Bu yöntemle eklenen harici css dosyası eski web tarayıcıları tarafından
görüntülenemeyecektir.(Örn: NN4)

@import ile eklenen kod link ile eklenen kodlamadan önce yorumlanır. Ayrıca CSS dosyalarımızda @import özelliğini kullanarak devamlı kullandığımız kodları css dosyamıza harici olarak ekleyebiliriz böylelikle tekrarlardan kurtulmuş olunur. Sonuç olarak burada dört adet CSS uygulama metodu gördük ancak bu
metotlardan dördüncüsü avantajları bakımından önerilir. Ayrıca içeriği büyük olan sitelerde css kodunun parçalara ayrılması ve kullanılan sayfa CSS’inde hangi parçalar gerekli ise onların import edilmesi
önerilir.

Pseudo-class örnekleri 

 

 

 Link,Hover,Visited,Active

<style type="text/css">
a:link {
color: green;
}
a:visited {
color: gray;
}
a:hover {
color: red;
}
a:active {
color: blue;
}
</style>

Cssin Html İçerisinde Kullanım Şekilleri, Puseduo Class Örnekleri

Focus

<style type="text/css">
input:focus
{
background-color: #FFFFE0;
color: white;
}
</style>

 

Cssin Html İçerisinde Kullanım Şekilleri, Puseduo Class Örnekleri

First-child

<style type="text/css">
p:first-child {
font-weight: bold;
}
li:first-child {
color:green;
}
</style>

 

Cssin Html İçerisinde Kullanım Şekilleri, Puseduo Class Örnekleri

Bahadır Küçükosman

Yorumunuzu Ekleyin

Css Referansı
CSS ve Katmanlar
CSS ve Filitreler
Yükleniyor...