HTML İçinde CSS Kullanımı

by trustix


Eklenme Tarihi : 16 Aralık 2020 17:53 Views:     522



CSS - Cascading Style Sheets, HTML sayfalarında kullanılan ve HTML etiketlerini biçimlendirmek, düzenlemek, tasarımlarını değiştirmek ve daha estetik bir biçime dönüştürmek için kullanılan bir işaretleme dilidir. CSS ile bir metnin rengi, arkaplanı, sayfa içerisindeki konumu, HTML elemanlarının yerleşim düzeni, sayfaların ve öğelerin arkaplan görüntüleri ve bu görüntülerin farklı cihazlarda ve farklı ekran boyutlarında nasıl görüneceği düzenlenebilir.

HTML içinde CSS 3 farklı şekilde kullanılabilir.

1 -    Satır içi CSS kullanımı

Bu yöntem bir HTML elementine direkt olarak satır içerisine style özniteliği yazılarak kullanılır. Örneğin:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML - CSS Kullanımı </title>


</head>
<body>


    <!-- p etiketine satır içi style özniteliği kullanarak metin rengini değiştiriyoruz.-->
    <p style="color:brown">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dicta quidem a quos ipsa perspiciatis odio adipisci voluptas placeat dolor nam?</p>

</body>
</html>

 

 

2 - Dahili CSS kullanımı

Bu yöntemde ise <head> </head> etiketleri arasına <style> </style> etiketi yazılır ve CSS kodları bu etiketlerin içerine yazılır. Bu yönteme dahili CSS kullanma denir. Örneğin :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML - CSS Kullanımı </title>

<!--style etiketi bu bölüme yazılır daha sonra  css kodları eklenir.-->
<style>
    h2 {
        color:red;
    }
</style>

</head>
<body>


    <h2>Merhaba Sayın Seyirciler</h2>
</body>
</html>

 

3 -    Harici CSS kullanımı

Bu yöntemde ise uzantısı .css olan bir dosya oluşturulur. CSS kodları bu dosyanın içerisine yazılır. Daha sonra <head> etiketi içerisinde bu harici dosya import edilerek CSS kodlarının çalışması sağlanır. Örneğin:

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML - CSS Kullanımı </title>

    <!-- CSS dosyasının import edilmesi -->
    <link rel="stylesheet" href="style.css">

</head>
<body>


    <h2>Merhaba Sayın Seyirciler</h2>
</body>
</html>

CSS dosyasındaki kodlar

body{
    background-color: burlywood;
}

 





0

Yorum Formu

vikikod.com    © 2019