THT DUYURU

Web Programlama Asp, Php, Html, Asp.Net, Aspx, Perl Vb Web Programlama Bölümü

chat
Seçenekler

Temel Seviye CSS Part 1

KelHack - ait Kullanıcı Resmi (Avatar)
Üye
Üyelik tarihi:
08/2012
Mesajlar:
25
Konular:
6
Teşekkür (Etti):
27
Teşekkür (Aldı):
28
Ticaret:
(0) %
3 Hafta önce
#1
Temel Seviye CSS Part 1
Merhaba TürkHackTeam Ailesi bu konumuzda “CSS” alanını inceleyeceğiz.



CSS nedir?
Cascading Style Sheets kelimesinin baş harflerinin kısaltmasıdır. Türkçe anlamı ise basamaklı stil sayfasına gelmektedir. Bir html elementinin nasıl görüneceğini belirlemeye yarar. Stil dosyalarının uzantısı “.css” ile biter ve tek bir dosya halinde bulunur.


Css kod yapısı nasıl oluşur?
Css kodu 2 temelden oluşur biri html elementleridir(h1,p,a vb.) diğeri ise ekleyeceğimiz özellikleri bildirdiğimiz ifade bölümüdür.


Css kod örneği;
Bir css ifadesi her zaman noktalı virgül ile biter ve ifadeler kıvrımlı parantez içerisinde yazılır.

Kod:
  h1 {color: red; text-align: center; }

Css’de yorum satırı yapmak
Her programlama dilinde olduğu gibi bazı kullanıcıların görmeyeceği kendimize notlar bırakabileceğimiz kısımlar olur. Bunun için css’de “/* açıklama*/” kullanılır.
Kod:
/* başlık stili */
 h1 
{
	/*renk kırmızı olacak*/
color: red; 
/* ortalanmış olacak*/
text-align: center; 
}

CSS ID ve Class seçimi
Html dosyamızda belirtiğimiz “id” ve “class” etiketlerini belirtiğimiz stilde kullanabiliriz.

Class Kullanımı

Bir html dosyasında bir element özelliği olarak “class= “stil” şeklinde bir özellik ekleyebiliriz. Peki buna neden gerek var örnek ile açıklayalım.

Kod:
<div class=”stil”>Hoş geldiniz!</div>
Yukarıda yazdığımız div etiketi içerisindeki class=”stil”, o div elementinin CSS özelliklerini belirtmemize yarayan bir yoldur. CSS dosyamızda;

Kod:
.stil {
	font: 10pt Tahoma, Verdana;
	color: blue;
}
Nokta(.) ile başlayan bir stil oluşturduk. Bu demektir ki class=”stil” ile belirtiğimiz her element 10 punto Tahoma yazı tipinde olacaktır. Eğer tek bir element içerisinde geçerli olmasını istiyorsak;

Kod:
div.stil{
	font: 10pt Tahoma, Verdana;
	color: blue;
}
Bu seçimde CSS kodu sadece div etiketleri için kullanılacaktır.
CLASS özelliğinin bize sağladığı avantajlar;
• Kendimiz adlandırdığımız özel stiller yaratmak
• Bir stili birden fazla kullanmak
• Uzun CSS kodlarından arınmak


ID kullanımı
ID özelliği ilede stiller yaratılabilir, class’tan farkları;
• Sadece tek bir etikette kullanılır.
• Stil dosyamızda Class’da .(nokta) kullanırdık, id özelliğinde ise #(diyez) kullanılır.
Şimdi bunları örnek ile görelim.

Kod:
<div id=”stil”>Hoş geldiniz!</div>
Stil dosyasında ise;

Kod:
#stil{
	font: 10pt Tahoma, Verdana;
	color: blue;
}
Görüldüğü gibi bu sefer diyez(#) işareti kullandık arkadaşlar. Sadece bu elemente ait bir stil oluşturduk. Ayrıca hiçbir id etiketi rakamla başlamaz.


Son olarak arkadaşlar CSS nasıl eklenir bundan bahsedelim.
Css kodlarımızı 3 farklı şekilde tanımlayabiliriz. Bunlar;

• Inline
• Internal
• External

Inline css nasıl eklenir?
Tanımdağımız etiketinin içerisinde geçerli olmasını istediğimiz css kodlarımızı inline olarak tanımlarız. Örnek;

<span style=”color:blue;”> Hoşgeldiniz!</span>


Internal css nasıl eklenir?

Internal css head etiketi arasına style etiketleri ile tanımlanır. Örnek;

Kod:
<head>

	<style type=”text/css”>
	h1{
		font-size: 30px;
		color:blue;
} 
</head>
Internal olarak yazdığımız css kodlarımız sadece bağlı olduğu sayfada çalışmaktadır, diğer sayfalara yaptığımız değişiklikler uygulanmaz.


External CSS nasıl eklenir?
Eğer yazdığımız css kodları tüm sayfalarda geçerli olmasını istiyorsak bu durum “.css” uzantılı bir dosya oluşturup bunun içerisinde css kodlarımızı tanımlamalıyız.
Bunu bir örnek ile açıklayalım. Bir “syle.css” adında bir dosya oluşturalım ve not defteri ile açalım.

Kod:
h1{
		font-size: 30px;
		color:blue;
} 
p{
		font-size: 30px;
		color:blue;
}
Bu şekilde kaydelim, css ve html sayfamız aynı konumda olduğundan emin olalım. Şimdi uygulamak istediğimiz sayfaya gidelim ve bu dosyayı oraya tanıtalım.

Kod:
<head>
	<link rel=”stylesheet” href=”style.css”>
</head>
Bu tanımlamayı yaptıktan sonra kaydedip açtığımızda css kodlarımız sayfaya uygulanmuş olduğunu göreceğiz.


Bu konumda css hakkında en temel bilgileri aktardım arkadaşlar birdaha ki konumuzda csste arkaplan, yazılar, yazı tipleri gibi biçimlendirme etiketlerini göreceğiz.

---------------------
Ey Türk gençliği! Birinci vazifen; Türk istiklalini, Türk cumhuriyetini, ilelebet muhafaza ve müdafaa etmektir.

Telegram
musluq, ARSEF7, NightWishTR, rquene, DeliDalyan Teşekkür etti.
musluq - ait Kullanıcı Resmi (Avatar)
Tamamen Forumdan Uzaklaştırıldı
Üyelik tarihi:
04/2020
Nereden:
Oradan
Mesajlar:
96
Konular:
2
Teşekkür (Etti):
53
Teşekkür (Aldı):
18
Ticaret:
(0) %
3 Hafta önce
#2
Cevap: Temel Seviye CSS Part 1
eline sаğlık çаylak
KelHack Teşekkür etti.
Codx - ait Kullanıcı Resmi (Avatar)
Junior Green Team
Üyelik tarihi:
07/2017
Mesajlar:
69
Konular:
11
Ticaret:
(0) %
3 Hafta önce
#3
Cevap: Temel Seviye CSS Part 1
Eline sağlık
KelHack Teşekkür etti.
ARSEF7 - ait Kullanıcı Resmi (Avatar)
Çaylak (Green Team)
Üyelik tarihi:
02/2020
Nereden:
Uzay
Mesajlar:
352
Konular:
19
Teşekkür (Etti):
213
Teşekkür (Aldı):
129
Ticaret:
(0) %
3 Hafta önce
#4
Cevap: Temel Seviye CSS Part 1
Eline Sağlık
---------------------
Bin atlı akınlarda çocuklar gibi şendik
Bin atlı o gün dev gibi bir orduyu yendik
_____________________________________________
(Bana Değemezsin Bir Karış Aklınla)
KelHack Teşekkür etti.
TebriZz - ait Kullanıcı Resmi (Avatar)
Tamamen Forumdan Uzaklaştırıldı
Üyelik tarihi:
04/2020
Nereden:
İskenderun
Mesajlar:
164
Konular:
26
Teşekkür (Etti):
136
Teşekkür (Aldı):
138
Ticaret:
(0) %
3 Hafta önce
#5
Cevap: Temel Seviye CSS Part 1
Eline sağlık
KelHack - ait Kullanıcı Resmi (Avatar)
Üye
Üyelik tarihi:
08/2012
Mesajlar:
25
Konular:
6
Teşekkür (Etti):
27
Teşekkür (Aldı):
28
Ticaret:
(0) %
3 Hafta önce
#6
Cevap: Temel Seviye CSS Part 1
Alıntı:
Codx´isimli üyeden Alıntı Mesajı göster
Eline sağlık
Alıntı:
ARSEF7´isimli üyeden Alıntı Mesajı göster
Eline Sağlık
Alıntı:
TebriZz´isimli üyeden Alıntı Mesajı göster
Eline sağlık
Alıntı:
musluq´isimli üyeden Alıntı Mesajı göster
eline sаğlık çаylak
Hepinize teşekkür ederim
---------------------
Ey Türk gençliği! Birinci vazifen; Türk istiklalini, Türk cumhuriyetini, ilelebet muhafaza ve müdafaa etmektir.

Telegram
Sulox32 - ait Kullanıcı Resmi (Avatar)
Üye
Üyelik tarihi:
05/2020
Nereden:
Stuttgart
Mesajlar:
3
Konular:
0
Teşekkür (Etti):
1
Teşekkür (Aldı):
0
Ticaret:
(0) %
3 Hafta önce
#7
Cevap: Temel Seviye CSS Part 1
Ellerine Saglik, kisa ve öz olmus.

Bookmarks


« Önceki Konu | Sonraki Konu »
Seçenekler