17-12-2012 Saat: 22:07
HTML sayfalarımızda en önemli olaylardan biridir CSS tasarımımızın kalbidir, canıdır diyebiliriz.O sebepten dolayı CSS dosyamızı html sayfamıza entegre etmek için hemen bir örnekle başlıyoruz.
İlk önce masaüstümde bir klasör oluşturdum adını Yeni Web Site olarak koydum.
Yukarıdaki gibi kendimize 1 adet index.html 1 adet Stil.css isimli dosya oluşturuyoruz.Dosyalarımızın için boş olucağından standart HTML başlangıç kodlarını veriyorum ve o kodları yapıştırıyoruz.
<!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> <title></title> </head> <body> </body> </html>
Bu standart kodlarımızı index.html dosyamıza ekliyoruz.Sonra sıra geldi Stil.css dosyamızı entegre etmeye.Stil dosyaları header taglarında entegre edilir.Entegre koduda aşağıdaki gibidir.
<link rel="stylesheet" type="text/css" href="Buraya Dosya Yolu Gelicek" />
Kodumuz yukarıda olduğu gibidir.Hemen index.html dosyamızın içine Stil.css dosyamızı entegre ediyoruz ve kodumuz aşağıdaki gibi oluyor.
<!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> <title></title> <link rel="stylesheet" type="text/css" href="Stil.css" /> </head> <body> </body> </html>
Böylece CSS dosyamızı entegre etmiş bulunmaktayız.Test etmek için body tag'ına css yazarak HTML dosyanıza eklediğiniz yazıların değiştiğini görebilirsiniz.Stil.css dosyamızı açalım aşağıdaki kodu ekleyelim.
body { font-family: Tahoma; font-size: 12px; color: Red; }
Sonra html sayfamıza body tagının içine birşeyler yazalım.
<!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> <title></title> <link rel="stylesheet" type="text/css" href="Stil.css" /> </head> <body> Bu bir deneme yazısıdır </body> </html>
Yazının değiştiğini gördüğümüze göre CSS dosyamızı başarıyla entegre etmişiz demektir.
alıntı
İlk önce masaüstümde bir klasör oluşturdum adını Yeni Web Site olarak koydum.
Yukarıdaki gibi kendimize 1 adet index.html 1 adet Stil.css isimli dosya oluşturuyoruz.Dosyalarımızın için boş olucağından standart HTML başlangıç kodlarını veriyorum ve o kodları yapıştırıyoruz.
<!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> <title></title> </head> <body> </body> </html>
Bu standart kodlarımızı index.html dosyamıza ekliyoruz.Sonra sıra geldi Stil.css dosyamızı entegre etmeye.Stil dosyaları header taglarında entegre edilir.Entegre koduda aşağıdaki gibidir.
<link rel="stylesheet" type="text/css" href="Buraya Dosya Yolu Gelicek" />
Kodumuz yukarıda olduğu gibidir.Hemen index.html dosyamızın içine Stil.css dosyamızı entegre ediyoruz ve kodumuz aşağıdaki gibi oluyor.
<!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> <title></title> <link rel="stylesheet" type="text/css" href="Stil.css" /> </head> <body> </body> </html>
Böylece CSS dosyamızı entegre etmiş bulunmaktayız.Test etmek için body tag'ına css yazarak HTML dosyanıza eklediğiniz yazıların değiştiğini görebilirsiniz.Stil.css dosyamızı açalım aşağıdaki kodu ekleyelim.
body { font-family: Tahoma; font-size: 12px; color: Red; }
Sonra html sayfamıza body tagının içine birşeyler yazalım.
<!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> <title></title> <link rel="stylesheet" type="text/css" href="Stil.css" /> </head> <body> Bu bir deneme yazısıdır </body> </html>
Yazının değiştiğini gördüğümüze göre CSS dosyamızı başarıyla entegre etmişiz demektir.
alıntı
