You need to enable JavaScript to run this app.

Skip to main content

Pir Zöhre Ana Forum

CSS’i Web Dokümanlarına Eklemek

CSS’i Web Dokümanlarına Eklemek

#1
donanma44
Administrator
Avatar: donanma44
CSS’i Web Dokümanlarına Eklemek
CSS’i (X)HTML sayfalarımıza eklemenin 4 yöntemi vardır.

1.4.1. Kod içinde (In-line)

Direk olarak (X)HTML elemanın içine style özelligi kullanılarak uygulamak.

<div style="color:red">Deneme yazımız</div>

Tüm CSS komutlarını kodların içine direk uygulamak önerilen bir kodlama
sekli degildir. Ancak özel durumlarda kullanılabilir.

1.4.2. <style> Elemanı Kullanılarak

<head> kısmında <style> elemanı içinde CSS kodumuzu yazarak
uygulamak.

[html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<**** http-e****="*******-Type" *******="text/html; charset=utf-8"
/>
<title>CSS’i Uygulamak </title>
<style type="text/css">
div{
color:red;
}
</style>
</head>[/html]Birinci yönteme göre avantajı (X)HTML kod ile CSS bir birinden ayrıştırılmış olmasıdır.

1.4.3. Harici CSS Dosyası Kullanımı

Bu metot da CSS kodlarımızı .css uzantılı bir dosyaya kaydederiz.
[COLOR=Green]
ornek.css

[html]p {
color: red;
}
a {
color: blue;
}[/html]Daha sonra bu kodu gereken sayfalarımıza uygularız.

[html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<**** http-e****="*******-Type" *******="text/html; charset=utf-8"
/>
<title>CSS’i Uygulamak</title>
<link rel="stylesheet" type="text/css" href="ornek.css" />
</head>[/html]Bu yöntemin digerlerine göre en büyük avantajı bir kere yazılan kod lazım
olan tüm sayfalara eklenebilmesidir.Bu sayede harici eklenen css kodu bir
kere yüklendikten sonra diger kullandıgımız sayfalarda tekrar yüklenemeyerek bize hız kazandıracaktır.

1.4.4. @import ile Eklemek

3üncü yöntem ile kullanımı benzerdir.

[html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<**** http-e****="*******-Type" *******="text/html; charset=utf-8"
/>
<title>CSS’i Uygulamak</title>
<style type="text/css">
@import "ornek.css";
</style>
</head>[/html]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 web tarayıcıları tarafından. Ayrıca CSS dosyalarımızda @import özelligini kullanarak devamlı kullandıgımız kodları css dosyamıza harici olarak ekleyebiliriz böylelikle tekrarlardan kurtulmus oluruz.

Sonuç olarak burada dört adet CSS uygulama metodu gördük ancak bu metotlardan dördüncüsü avantajları bakımından önerilen bir yöntemdir.Ayrıca içerigi 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. Bu sayfada kodun bir kısmında yaptıgımız degisiklik için tüm css kodu incelenip degistirtmesi gerekmez ve kod yönetimi kolaylasır.
Cevapla

İçerik sağlayıcı paylaşım sitesi olarak hizmet veren Pir Zöhre Ana Forum sitemizde 5651 sayılı kanunun 8. maddesine ve T.C.K'nın 125. maddesine göre tüm üyelerimiz yaptıkları paylaşımlardan kendileri sorumludur. Sitemiz hakkında yapılacak tüm hukuksal şikayetleri İletişim bağlantısından bize ulaşıldıktan en geç 3 (üç) gün içerisinde ilgili kanunlar ve yönetmenlikler çerçevesinde tarafımızca incelenerek, gereken işlemler yapılacak ve site yöneticilerimiz tarafından bilgi verilecektir.