CSS Nedir?

by trustix


Eklenme Tarihi : 11 Aralık 2020 14:53 Views:     318



 

Cascading Style Sheets ya da kısaca CSS. Web sitelerinin ve web sayfalarının tasarlanmasından, daha esteik hale getirilmesinde ve bu sitelerin kullanııclara kullanışlı ve basit bir şekilde sunulmasına olanak sağlayan bir tasarım dilidir.

CSS temelde bir web sayfasının nasıl göründüğü ile ilgilenir. Bir web sayfasındaki metinlerin tarzı, yazı tipi, font değeri, metnin rengi, harfler, kelimeler ve cümleler arasındaki boşluk miktarı gibi bir web sitesindeki birçok noktaya müdahale etmeyi ve düzenlemeyi sağlayan, HTML ile iç içe yazılabilen bir tasarım dilidir. Bir fotoğrafın web sayfasından hangi konumda bulunacağı, çerçevesi, genişliği ve yükseliği gibi diğer birçok nokta da aynı şekilde CSS kullanılarak düzenlenebilir. CSS'nin en yaygın kullanımı HTML ile birlikte olan kullanımıdır. 

 

CSS kodları direkt HTML dosyalarının içine yazılabileceği gibi farklı bir dosyaya kaydedilip HTML dosyasına aktarılması da mümkündür. CSS kodlarının ayrı bir dosyaya yazılması durumuna bu dosyanın uzantısının .css olması gerekir.

CSS kodları sadece bir HTML elementine de html sayfası içerisinde uygulanabilir. Standart önerilern CSS kodlarının ayrı bir sayfada tutulmasııdır.

 

CSS Nasıl Kullanılır?

CSS kodları temelde 3 farklı şekilde kullanılabilir.

Satır içi CSS uygulama : Satır içi CSS uygulama bir HTML elementine aynı satır içerisinde belli bir söz dizimini takip ederek css kodlarının eklenmesini içerir. 

 

Örneğin : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Test</title>
</head>
<body>
    
    <!-- CSS kodlarını burada olduğu gibi direkt element içerisinde kullanılması satır için uygulamasıdır. -->
    <p style="color:red;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, magni.</p>

</body>
</html>

 

 

Dahili CSS uygulama: Bir  HTML sayfasının <head> </head> etiketleri arasına yazılacak olan <style> </style> etiketleri ve bu etiketlerinn arasına yazılacak olan CSS kodlarını içeren uygulamadı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>CSS Test</title>

<!--
    Buradaki gibi head etiketleri arasında bir 
    style etiketi açmak ve kodları bunun içerisine yazarak
    müdahale etmek dahili CSS uygulamasıdır.
-->
    <style>
        
        p {
            color:red;
        }
        
    </style>

</head>
<body>
    
    <!-- CSS kodlarını burada olduğu gibi direkt element içerisinde kullanılması satır için uygulamasıdır. -->
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, magni.</p>

</body>
</html>

 

Harici CSS uygulama : Harici bir dosyaya CSS kodlarını yazdıktan sonra bu dosyayı yine HTML sayfasının üst tarafında bir link aracılığı ile sayfaya aktarma şeklindeki uygulamadı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>CSS Test</title>
<!-- Buradaki gibi bir CSS dosyasını yolunu belirterek çağırmak ise Harici CSS uygulamasıdır. -->
<link rel="stylesheet" href="style.css">

</head>
<body>
    
    <!-- CSS kodlarını burada olduğu gibi direkt element içerisinde kullanılması satır için uygulamasıdır. -->
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, magni.</p>

</body>
</html>

 

 

CSS Nasıl Bir Avantaj Sağlar

  • Statik HTML iskeletini daha dinamik ve estetik hale getirilebilir.
  • Aynı kodun birçok sayfaya ve birçok HTML elementine uygulanabilmesi sayesinde zaman kazandırır.
  • CSS kodlarının anlaşılması, yazılması ve değiştirilmesi gayet kolaydır.
  • Uygun kullanımda bir web sayfasını tüm ekran türlerine ve tüm cihazlara uygun hale getirebilir.
  • Yeni nesil web tasarım platformlarına uyumludur.
  • Aynı CSS kodunun birden çok HTML elementine uygulanabilmesi sayesinde sayfa yüklenmesini hızlandırır.





0

Yorum Formu

vikikod.com    © 2019