Projelerinizde verimliliği artırmak, hataları bulmak ve daha hızlı geliştirmek için kullanabileceğiniz araçlarla dolu bir dünya!

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.

Anonim

Yorum yapabilmek için giriş yapmanız gerekmektedir.

Sosyal Medya

Mobil Uygulama

Tarayıcı Eklentileri

Şifre Oluşturucu

Google Chrome Plugin

Yardımcı Siteler

w8icon

w8icon.com

Kod depo

koddepo.com

e-mvc

e-mvc.com