Beytullah Toprak
CSS Temel - CSS Giriş

CSS Temel - CSS Giriş


Bu eğitim  serisin de, CSS kullanarak web sayfalarına stil ve biçimlendirme bilgileri eklemenin ne kadar kolay olduğunu öğreneceksiniz. Ancak, başlamadan önce, HTML bilginiz olması lazım.

Eğer web geliştirme dünyasına yeni başlıyorsanız , buradan öğrenmeye başlayın »

Peki, en popüler stil sayfası dili ile başlayalım.

HTML Belgelerine CSS Dahil Etmek

CSS'yi bir HTML belgesine üç yolla dahil edebilirsiniz:

  • Satır içi stilleri - style HTML başlangıç ​​etiketindeki niteliği kullanma .
  • Gömülü stiller - <style>Bir belgenin <head> </head> arasında öğeyi kullanma .
  • Dış stil sayfaları - <link> Öğeyi kullanarak, harici bir CSS dosyası çekebilirsiniz.

Bu derste, CSS'yi birer birer eklemek için bu üç yöntemi ele alacağız.

Satır İçi Stilleri

Satır içi stiller, benzersiz stil kurallarını CSS kurallarını doğrudan başlangıç ​​etiketine koyarak bir öğeye uygulamak için kullanılır. Bu style nitelik kullanılarak bir elemana eklenebilir .

Ancak, hepsinin bir satırda olması gerekir, yani burada gösterildiği gibi, noktalı virgülden sonra satır sonu olmaz:

<!DOCTYPE html>
<html lang="tr">
<head>
	<meta charset="utf-8">
    <title>CSS Örneği</title>
</head>
<body>
	<h1 style="color:red; font-size:30px;">Bu Bir Başlık</h1>
	<p style="color:green; font-size:22px;">Bu bir paragraf.</p>
	<div style="color:blue; font-size:14px;">Bir metin içeriği.</div>
	</body>
</html>

Satır içi stilleri kullanmak genellikle kötü bir uygulama olarak kabul edilir. Stil kuralları doğrudan HTML etiketinin içine gömülü olduğundan, sunumun belgenin içeriğiyle karışmasına neden olur.


Gömülü Stil Sayfaları

Gömülü veya dahili stil sayfaları yalnızca gömüldükleri dokümanı etkiler.

Gömülü stil sayfaları, <style>öğeyi kullanan bir HTML belgesinin <head> bölümünde tanımlanır . <style>Bir HTML belgesinde istediğiniz sayıda öğe tanımlayabilirsiniz, ancak bunlar <head> ve </head>etiketleri arasında görünmelidir. İşte bir örnek:

<!DOCTYPE html>
<html lang="tr">
<head>
	<meta charset="utf-8">
    <title>Css Style Örneği</title>
    <style type="text/css">
        body { background-color: #000; }
        p { color: #fff; }
        h1 { color: #ff0000;}
    </style>
</head>
<body>
    <h1>Bu Bir Başlık</h1>
    <p>Bu bir paragraf yazısı.</p>
</body>
</html>

İpucu:type nitelik <style> ve <link>etiketi (yani type="text/css") stil sayfasının dilini tanımlar. Bu özellik tamamen bilgilendirme amaçlıdır. Bunu ihmal edebilirsiniz, çünkü CSS, HTML5'te standart ve varsayılan stil sayfası dilidir.


Dış Stil Sayfaları

Stil, web sitesinin birçok sayfasına uygulandığında harici bir stil sayfası idealdir.

Harici bir stil sayfası, tüm stil kurallarını sitenizdeki herhangi bir HTML dosyasından bağlayabileceğiniz ayrı bir belgede tutar. Harici stil sayfaları en esnektir çünkü harici bir stil sayfasında yalnızca bir dosyayı değiştirerek tüm web sitesinin görünümünü değiştirebilirsiniz.

Dış stil sayfalarını iki şekilde ekleyebilirsiniz - bağlama ve içe aktarma ile.

Dış Stil Sayfalarını Bağlama

Bağlamadan önce, bir stil sayfası oluşturmamız gerekir. Favori kod düzenleyicinizi açalım ve yeni bir dosya oluşturalım. Şimdi bu CSS kodunu bu dosyanın içine yazın ve "style.css" olarak kaydedin.

body {
    background: lightyellow;
    font: 18px Arial, sans-serif;
}
h1 {
    color: orange;
}

Harici bir stil sayfası, <link>etiket kullanılarak bir HTML belgesine bağlanabilir . <link>Etiketi <head> etiketin içine yazılır bu örnekte görüldüğü gibi, bölüm:

<!DOCTYPE html>
<html lang="tr">
<head>
	<meta charset="utf-8">
    <title>CSS Örneği</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Bu Bir Başlık</h1>
    <p>Bu bir deneme paragraf yazısı.</p>
</body>
</html>

İpucu: Her üç yöntem arasında da, harici stil sayfası kullanmak, HTML belgelerine stilleri tanımlamak ve uygulamak için en iyi yöntemdir. Dış stil sayfalarında açıkça görebileceğiniz gibi, etkilenen HTML dosyası işaretlemede minimum değişiklik gerektirir.

Dış Stil Sayfalarını İçe Aktarma

@import Kural harici stil sayfası yüklenirken başka bir yoludur. @importDeyimi, harici bir stil sayfası yüklemek ve stillerini kullanmak için tarayıcı bildirir.

İki şekilde kullanabilirsiniz. En basit belgenizin başlığı içinde. Diğer CSS kurallarının <style> öğeye hala dahil edilebilir . İşte bir örnek:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
    <title>CSS Örneği</title>
    <style type="text/css">
        @import url("style.css");
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>
<body>
	<h1>Bu Bir Başlık</h1>
   	<p>Bu bir deneme paragraf.</p>
</body>
</html>

Benzer şekilde, @import bir stil sayfasını başka bir stil sayfasının içine almak için de kuralı kullanabilirsiniz .

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>CSS Örneği</title>
    <style type="text/css">
        @import url("layout.css");
        @import url("color.css");
        body {
            color:blue;
            font-size:14px;
        }
    </style>
</head>
<body>
    <div>
		<h1>Deneme Başlık</h1>
   		<p>Bu HTML öğesinin düzen stilleri 'layout.css' ve renkler 'color.css' içinde tanımlanmıştır.</p>
    </div>
</body>
</html>

Not: Tüm @import kurallar stil sayfasının başında yer almalıdır. Stil sayfasında tanımlanan stil kuralları, içe aktarılan stil sayfalarındaki çakışan kuralları geçersiz kılar. Ancak, performans sorunu nedeniyle bir stil sayfasını başka bir stil sayfasına içe aktarmanız önerilmez.


Yorum (0)

Hiç Bir Yorum Bulunamadı. İlk Yorumuz Siz Yapın :)

Yorum Yap