Css nasıl eklenir ?
Sezai AlkanFrontend Developer
Css Nasıl Eklenir ?
Css'i Konum Olarak 4 Yerde Kullanabiliriz.
- Html Dökümanına Harici Olarak
- Html Dökümanına Dahili Olarak
- Satır İçi Olarak
- import Olarak
Bu Kullanım Şekilleri Kullanım Amaçlarına Göre Değişiklik Göstermektedir.
1 - Html Dökümanına Harici Olarak
Html Dökümanına Harici Olarak Kullanım Şekli css Dosyasını Dışarıdan Html Dosyamıza Çağırma Yöntemiyle Kullanılıyor. Bunun İçin Html Dosyamızın Haricinde Birde .css Uzanlıtılı Css Dosyası Oluşturmamız Gerekiyor.
<!DOCTYPE html>
<html>
<head>
<title>Harici Olarak Css Kullanımı</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
</body>
</html>Yukarıda Satırda Html Dosyamıza Dışarıdan style.css Adında Bir Css Dosyası Çağırıyoruz. Dosyayı Dışarıdan Çağırırken, Html Dökümanımızın İçinde <head> </head> Etiketleri Arasında Çağırmamız Gerekmektedir.
2 - Html Dökümanına Dahili Olarak
Html Dosyasına Dahili Olarak Kullanım Şekli <head> </head> Tagları Arasında <style type="text/css"> </style> Etiketleri İçerisinde Kullanımı Gerçekleşmektedir.
<!DOCTYPE html>
<html>
<head>
<title>Dahili Olarak Css Kullanımı</title>
<style type="text/css">
/* Bu Alan Css Kodlarınızın Bulunacağı Alan */
</style>
</head>
<body>
</body>
</html>Yukarıdaki Alanda, Yorum Satırının Bulunduğu Kısım Dahili Olarak Css Kodlarınızın Yazacağınız Alandır.
3 - Satır İçi Kullanımı
Css' i Satır İçersinden Kullanımı, Kullanacağımız Etiketin İçersinde style="" Tanımlamasının İçerisinde Kullanabiliriz.
<p style="color: red;">Paragraf İçi Yazı</p>
Yukarıdaki Örnekte p Etiketi İçersindeki Yazının Rengini Css Kodları İle Kırmızı Hale Getirilmiştir. Bu Kullanım Sadece Kullanılan Etiket İçin Geçerlidir.
4 - import Ederek Kullanım
import Ederek Kullanım, Bu Kullanımı Css Dosyası İçerisinde Gerçekleştirebiliriz. İki Farklı Css Dosyasını Böylelikle Birşeltirebilirsiniz.
<style type="text/css">
@import url(style.css);
</style>Yukarıda import 'un Kullanım Şekli Bulunmaktadır. Bu Kullanımda style.css Adında Bir Css Dosyasını Çağırmış Bulunmaktayız.
- 0
- 0
- 544
- 23 Ara 2021
Yorum yapabilmek için giriş yapmanız gerekmektedir.