HTML TEMELLERİ
HTML NEDİR ? HTML Başlık(Heading) HTML Paragraf(Paragraphs) HTML Yazı Stili(Font Style) HTML Yazı Formatları(Format Text) HTML Renk Kodları(Color Codes) HTML Link Verme-Ekleme HTML Resim Ekleme(Add a Image) HTML Tablo Ekleme(Add a Table) HTML Liste Ekleme(Add a List) HTML Web Site Penceresi Ekleme(Iframe) HTML Head ve Meta Etiketleri HTML Semboller(Symbols) HTML Form HTML Form Elemanları(Form Elements) HTML Form Giriş Özellikleri (Form Input Properties)
HTML5
İLERİ SEVİYE
HTML 5 NEDİR? HTML Sayfa Bölümleri HTML Form Giriş(Input) Özellikleri HTML Form Elementleri HTML Form Özellikleri(Form Properties) HTML Canvas Kullanımı HTML SVG Kullanımı HTML Video Ekleme-Oynatma(Video Player) HTML Ses Ekleme-Oynatma(Audio Player)
CSS TEMELİ
CSS NEDİR ? CSS CSS-HTML İlişkisi CSS Backgrounds(Arkaplan) CSS Border(Kenarlık) CSS Margins(Dış Boşluk) CSS Padding(İç Boşluk) CSS Height and Width(Yükseklik ve Genişlik) CSS Box Model(Kutu Modeli) CSS Outline(Dış Çizgi) CSS Text(Metin) CSS Fonts(Yazı) CSS Icons(Ikon) CSS Links CSS List(Liste) CSS Tables(Tablolar) CSS Display(Görüntü-Ekran) CSS Layout - Width and Max-width(Yerleşim - Genişlik ve Max Genişlik) CSS Positon(Durum) CSS Overflow(Taşma) CSS Layout-Float and Clear(Yerleşim - Yön ve Temizliği) CSS Image Opacity / Transparency(Opaklık/Saydamlık) CSS Navigation Bar(Gezinme Menüsü)
css html ilişkisi
html css relationship
css and html relationship
css relationship to html
css html inline
css html inline style
html css inliner, html inline and css
html css after inline
html inline css align
html inline css text align
html css inline code
html css inline menu
css html internal
html internal css example
html internal css class
css in html internal
css internal code in html
html harici css ekleme
html harici css kullanımı
css html external
html css external example
css html external link
css html selector
css html selector element
css html selectors
css select html comment
css html class selector
css html id selector
css id selector in html

CSS CSS-HTML İlişkisi

CSS CSS-HTML İlişkisi

Html dili Css dili ile eş zamanlı olarak çalışır. Tek başına bir işe yaramaz. Html sayfamıza Css dilini üç farklı şekilde ekleyebiliriz;

1-YEREL CSS(INLINE)

Yerel css ile doğrudan html etiketi içinde sadece o etiketi etkileyecek biçimler verebilirsiniz. Bunu sadece sayfanızda istisna olacak şeyler için kullanabilirsiniz.

Kullanımı:

Css
.contain {
background-color: lightblue;
}
.contain h1{
color: green;
}
p{
color:#CCC;
font-size:16px;
margin-left:10px;
}
Html
<html>
<head>
<style>
#kare{
border:1px red dashed;
height:100px;
width:100px;
}
</style>
</head>
<body>
<div class="contain">
<h1>Birinci başlık</h1>
<p>Birinci paragraf</p>
<h1>İkinci başlık</h1>
<p>İkinci paragraf</p>
<h1>Üçünçü başlık</h1>
<p>üçüncü paragraf</p>
<div id="kare"></div>
<p style="color:#6624e2;font-weight:bold;">Özel yazı</p>
</div>
</body>
</html>

Html dili Css dili ile eş zamanlı olarak çalışır. Tek başına bir işe yaramaz. Html sayfamıza Css dilini üç farklı şekilde ekleyebiliriz;

1-YEREL CSS(INLINE)

Yerel css ile doğrudan html etiketi içinde sadece o etiketi etkileyecek biçimler verebilirsiniz. Bunu sadece sayfanızda istisna olacak şeyler için kullanabilirsiniz.

Kullanımı:

Css
/*Boş*/
Html
<p style="color:orange;font-size:12px;">mavi renkli küçük paragrafım</p>

2-GENEL CSS(INTERNAL)

Genel css sadece o sayfadaki etiketleri biçimlendirmek için kullanılır. Diğer sayfalardaki etiketleri etkilemez. Bu yöntem ile sayfadaki tüm ilgili etiketleri aynı anda biçimlendirebilirsiniz. Örnek ile daha iyi anlayacaksınız..

Kullanımı:

Css
/*Boş Sayfa*/
Html
<html>
<head>
<style>
h2{
color:#7939f0;
}
p{
color:#721805;
}
</style>
</head>
<body>
<h2>Birinci başlık</h2>
<p>Paragraf yazısı 1</p>
<h2>İkinci başlık</h2>
<p>Paragraf yazısı 2</p>
<h2>Üçüncü başlık</h2>
<p>Paragraf yazısı 3</p>
</body>
</html>

3-HARİCİ(EXTERNAL) CSS

Harici css ile html dosyanıza css kodu yazmadan ayrı bir css dosyası ile html dosyanızdaki etiketlerinizi biçimlendirmeniz sağlanır. Genel Css"' den bir farkı yoktur, sadece html kodlarınızı ve css kodlarınızı birbirlerinden ayırmış ve daha düzenli bir hale getirmiş olursunuz. Genelde web siteleri bu yöntem ile biçimlendirilir.

Kullanımı:

Css
/*stil.css*/
h2{
color:#7939f0;
}
p{
color:#721805;
}
Html
<html>
<head>
<link rel="stylesheet" type="text/css" href="stil.css">
</head>
<body>
<h2>Birinci başlık</h2>
<p>Paragraf yazısı 1</p>
<h2>İkinci başlık</h2>
<p>Paragraf yazısı 2</p>
<h2>Üçüncü başlık</h2>
<p>Paragraf yazısı 3</p>
</body>
</html>

Html kodlarımızdaki etiketle rin hepsini nasıl aynı anda düzenleyeceğimizi öğrendik.

Peki mesela bütün paragrafları değilde sadece belirlediğim paragrafları nasıl düzenlerim ?

Bunun için id ve class denen seçicilerden yararlanırız. Bu seçiciler ile etiketlerimizi dilediğimiz şekilde guruplandırabilir ve seçebiliriz. Bunları birer örnekle açıklayalım.

1-ID Seçicisi(Selector)

Id seçicisi etiketin bir özelliğidir. Bu seçici sadece bir tek etikete verilebilir. Dikkat edin etiket gurubuna demedim yani sayfadaki tüm <p> etiketlerine bunu veremezsiniz, sadece bir tek <p> etiketine verebilirsiniz. Aşağıdaki örnek ile bir bakışta anlayacaksınız zaten.


Css
#uyari{
color:red;
font-size:16px;
font-weight:bold;
}
Html
<html>
<head>
</head>
<body>
<h1>Birinci başlık</h1>
<p>Birinci paragraf</p>
<h1>İkinci başlık</h1>
<p>İkinci paragraf</p>
<h1>Üçünçü başlık</h1>
<p>üçüncü paragraf</p>
<div id="kare"></div>
<p id="uyari">Dikkat: Lütfen yazım kurallarına uyunuz !</p>
</body>
</html>

2-Class Seçicisi(Selector)

Class seçicisi, etiketleri guruplandırmanızı sağlar. Mesela "Meyveler" başlıklı bir sayfanız var. Her meyve için yazdığınız paragraf etiketlerine "meyve" isminde class değeri verirseniz. Tüm meyve paragraflarını guruplandırmış oluruz, böylece de sadece onları istersek biçimlendirebiliriz. Aşağıdaki örneği incelerseniz daha anlayabilirsiniz.

Kullanımı:

Css
.meyve{
color:#681b1b;
}
h2{
color:#397be9;
}
h1{
color:Red;
}
Html
<html>
<head>
</head>
<body>
<h1>MEYVELER</h1>
<h2>Kivi</h2>
<p class="meyve">kivi hakkında paragraf</p>
<h2>Armut</h2>
<p class="meyve">armut hakkında paragraf</p>
<h2>Çilek</h2>
<p class="meyve">çilek hakkında paragraf</p>
</body>
</html>

Son Olarak..

Html etiketlerinize nasıl Css ile ulaşabileceğinizi bu derste öğrenmiş olduk. Diğer derslerimizde etiketlerimizi nasıl daha iyi biçimlendirebileceğimizi göreceğiz...



Paylaş:

Enes KILIÇ
Webmaster