Web Tasarım: CSS Nasıl Eklenir?

24 Aralık 2017 Pazar

CSS Nasıl Eklenir?

Bir önceki yazımda Css nedir sizlere bahsetmiştim.Şimdi ise Css'i nasıl kullanacağınızı sizlere anlatacağım.Css'i projeye dahil etmek için üç farklı yöntem vardır.Bunlar;

Stilleri Css Dosyanızdan Çağırın

Öncelikle bir not defteri ya da CSS düzenleyici program açmalısınız.

CSS Kodlarınızı CSS Kod Yapısı'na uygun olarak yazın ve kaydedin.

HTML Sayfanızı açıp <head> ile </head> arasına aşağıdaki şekilde stil dosyanızın adını belirtin.
```
 <link href="stil_dosyasi.css" type="text/css" rel="stylesheet"/>
```
href="DOSYA_ADI" ile belirttiğimiz yerde bizim kaydettiğimiz dosyanın adı yer almalı ve HTML sayfası ile CSS dosyası aynı klasörde bulunmalıdır. Farklı bir klasörde kullanmak istiyorsak HTML sayfasına göre konumu yazmamız gereklidir.

Dosya adını doğru yazdıysak artık CSS dosyamızı HTML sayfamıza bağladık demektir. Yani CSS dosyamızdaki stilleri rahatlıkla HTML sayfamızda kullanabiliriz.
HTML sayfasında CSS yazmak

HTML sayfamızda HEAD elementlerinin arasında STYLE elementi kullanarak stiller yaratmamız mümkün. Aşağıdaki örneğe bakalım:
```
  <html>
   <head>
      <title>Sayfa Başlığı</title>
      <style type="text/css">
         body { background-color:black; color:white; }
         p { font-family: Tahoma, Verdana; font-size: 12px; }
      </style>
   </head>
   <body>
      <p>Bu 12 piksel Tahoma yazı tipi ile yazıldı.</p>
   </body>
   </html>
```
Örneğe baktığımızda <style type="text/css"> elementini HEAD elementi içinde açıp kapatıyor ve içine stillerimizi yazıyoruz. Böylelikle dosyamızda belirttiğimiz stiller dışarıdan bir dosyaya bağlı olmaksızın kullanılabilir olacaklar.
HTML elementi içerisinde stil belirtmek

Bazen stil dosyası ya da STYLE elementi kullanmadan hızlı çözümler üretmek gerekebilir. Böyle durumlarda her elementin style="" özelliği kullanıma hazırdır. CSS kodlarını element içinde açacağımız STYLE özelliğine sıralarız. Örneğin;
```
 <p style="font-family: Tahoma; font-size: 12px;">
         Bu 12 piksel Tahoma yazı tipi ile yazıldı.
      </p>
   
```

24 Aralık 2017 Pazar

CSS Nasıl Eklenir?

Hiç yorum yok:

Yorum Gönder

WEB TASARIM'DA PÜF NOKTALAR

Bu Blogda Ara