- 3 Ara 2020
- 94
- 51
CSS' in Bölümleri:
CSS 3’e ayrılır. Bunlar genel CSS, harici CSS ve yerel CSS olarak adlandırılmaktadır.
Harici Stil Kullanımı (External Style Sheet) ;
Bu kullanım şeklimizde isminden de anlaşılacağı üzere harici farklı bir CSS dosyamızın olması lazım.
CSS dosyamızın uzantısı .css olmalıdır. Sonrasında ise bu CSS dosyamızı HTML dosyamıza bağlamamız yönlendirmemiz gerekiyor.
Bunun için:
CSS:
<link rel="stylesheet" type="text/css" href="stil.css" />Bu kodu HTML dosyamızın içindeki head etiketinin içine yazmalıyız.
Örneğin:
HTML Dosyamız;
index.html
CSS Dosyamız;
stil.css
Bundan sonra sitemizde <p> etiketi ile yazdığımız her şey 15px boyutunda çıktı verecektir.
index.html
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="stil.css" /> <!-- Burada stil.css dosyamızı bağladık.-->
<title>TurkHack Team Cinco CSS Dersleri</title>
</head>
<body>
<p>TurkHackTeam</p>
</body>
</html>CSS Dosyamız;
stil.css
CSS:
p{
font-size: 15px;
}Bundan sonra sitemizde <p> etiketi ile yazdığımız her şey 15px boyutunda çıktı verecektir.
Dahili Stil Kullanımı (Internal Style Sheet) ;
İkinci yöntemimiz ise dahili stil kullanmaktır. Bu yöntemde ise kodlarımız HTML dosyamızın içindeki <head> etiketleri arasında <style> etiketini kullanarak yazıyoruz.
Tek bir HTML dosyası ile CSS ve HTML kodlarımızı bir arada kullanmış olucaz.
Örnek Gösterimi;
HTML Dosyamız:
index.html
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TurkHackTeam Cinco CSS Dersleri</title>
<style> <!-- Burada css kodlarımızı yazdık. -->
p{
font-size: 15px;
}
</style>
</head>
<body>
<p>TurkHackTeam Cinco</p>
</body>
</html>Bu türü kullanmak pek tavsiye edilmez çünkü kod sayfamızda ki kodların sayısı artacağı için düzensiz bir görüntü ortaya çıkıyor.
Bu yüzden tavsiye edilmez.
Etiket İçinde Kullanımı (Inline Style) ;
Bu yöntemimiz de yine tek bir HTML dosyası işimizi görüyor.
HTML dosyamızda ki kodların direkt içini kullanarak kullanıyoruz.
HTML dosyamızda ki kodların direkt içini kullanarak kullanıyoruz.
Örneğin;
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TurkHack Team Cinco CSS Dersleri</title>
</head>
<body>
<p style="font-size: 15px;">TurkHackTeam Cinco</p> <!-- Burada css kodlarımızı yazdık. -->
</body>
</html>Bu yöntem dahili stil kullanımında olduğu gibi HTML dosyamızdaki satır sayısını çok arttıracağı için pek tercih edilmez.
Not: Burada yazdığımız CSS kodları sadece yazdığımız etiketi etkiler.
Bugünkü konumuzda;
CSS' in bölümleri nelerdir ?
Örnek CSS kodlarını gördük.
Umarım Sizin için verimli bir konu olmuştur.
Soru ve görüşleriniz için yazabilirsiniz.
İyi Forumlar Dilerim.
Son düzenleme:
