CSS Kullanım Şekilleri

0 217

CSS Kullanım Şekilleri denilince her birimizin aklına farklı yöntemler gelebilir. Bu gayet doğal ve normal bir durumdur. CSS öğrenmeye yeni başlayanlar için bir soru işareti olsa da CSS kullanım şekilleri bakımında 3’e ayrılmaktadır. Tabi bu ayrılma kodların farklı olduğu ya da aynı tür şeyler olmadığı anlamına gelmez. Yine her 3 yöntemde de CSS kodları aynı ancak bu kodların kullanım yerlerine göre farklılık göstermektedir. Gelin hep beraber bu farklılıkları inceliyelim…

CSS Kullanım Şekilleri

Yukarda da bahsettiğimiz gibi CSS kullanım şekilleri 3’e ayrılmaktadır. Bunlar harici, dahili ve etiket içi olarak bilinmektedir. Bu üçünde de kod içerikleri aynı ancak kullanıldığı yerler farklı gelin ayrı ayrı inceliyelim.

1. Harici Stil Kullanımı (External Style Sheet)

Harici Stil Kullanım şekli, herkesin kullanması gereken CSS kullanım şeklidir. Adından da anlaşılacağı üzere CSS kodlarımız ayrı bir belgede barındırılıyor olacak ve biz bu dosyayı HTML dosyasının Head kısmında çağıracağız. CSS dosyaların uzantısı “.css” olarak kulanılmaktadır ve CSS dosyamızda sadece CSS kodları İçermektedir.

<!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 href="legalyazilim.css" rel="stylesheet" type="text-css" />
    <title>Legal Yazılım</title>
</head>
<body>
    
</body>
</html>

2. Dahili Stil Kullanımı (Internal Style Sheet)

Dahili Stil Kullanım şekli, kullanması tavsiye edilmeyen CSS kullanım şeklidir. Adından da anlaşılacağı üzere CSS kodlarımız HTML dosyasının içinde barındırılıyor olacak ve biz bu kodları Head kısmın Style kodları arasında yazacağız. Kullanılmasının tavsiye edilmemesinin başlıca nedenleri arasında kodların çok fazla karmaşıklık oluşturmasıdır. Kodlar Dahili olarak yazılsa da çalışacaktır ancak kodların düzeni ve görüntüsü açısından hiç kullanışlı bir şekil değildir.

<!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>Legal Yazılım</title>
    <style>
        body{
            background-color: red;
            color: aqua;
        }
    </style>
</head>
<body>
    
</body>
</html>

3. Etiket İçinde Stil Kullanımı (Inline Style)

Etiket İçinde Kullanım şeklinde ise CSS kodlarımızı HTML/XHTML etiketleri içerisinde kodlara “style” özniteliği vererek yazıyoruz. Bu kullanım şeklini bilin ama kullanmayın. Üç farklı CSS kullanımda en az tavsiye edilen ve hatta hiç tavsiye edilmeyen CSS kullanım yöntemidir.

<!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>Legal Yazılım</title>
</head>
<body style="background-color: red; color: aqua;">
    
</body>
</html>

Birden Fazla Kullanım Şekli Kullanılırsa Ne Olur?

Eğer CSS için 3 kullanım şeklini de kullanmışsanız öncelik “Etiket İçinde” (Inline Style) olacaktır ve daha sonra da öncelik “Dahili Kullanım” (Internal Style Sheet) şeklinde olacak. En son öncelikte “Harici Kullanım” (External Style Sheet) şeklinde olacak. Birden fazla CSS Kullanım Şekilleri olması illaki hepsini kullanmamız gerekir anlamına gelmez tüm kod ve sayfalarınızda kesinlikle ama kesinlikle Harici Kullanımı kullanmanızı tavsiye ederiz. Heleki birden fazlasını aynı anda kullanmanızı kesinlikle tavsiye etmiyoruz.

Cevap bırakın

E-posta hesabınız yayımlanmayacak.