Css nasıl eklenir ?

sezaialkan
Sezai Alkan Frontend 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.

Yorumlar

Yorum Yapabilmek İçin Giriş Yapmalısınız.
İlk Yorum Yapan Sen Ol!
Uçur Beni Kahramanım Yukarı Çık
Bu web sitesi çerezleri kullanıyor. Devam ederek çerez kullanımını kabul etmiş oluyorsunuz. Detay

Devam Etmek İçin Giriş Yapın

Kod Hocası İle Paylaşımda bulunabilir, Kendini geliştirebilirsin. Sende Hemen Giriş Yap Aramıza Katıl.

GirişKayıt Ol