CSS Hakkında Detaylı Bilgi

'Creative · 15 Nis 2020

Öncelikle herkese merhaba. Bu yazımda bir " İşaretleme " dili olan Css' i anlatacağım.

Css Nedir ?

Css Cascade Style Sheets 1994 yılında Chicago'da ortaya çıktı, asıl amacı 1990 yılında çıkmış olan Html'in nasıl görselleştirileceği, bir diğer deyişle Nasıl Stilleştirileceği sorusuna cevap olmaktı. Css kısaca bir harfin büyüklüğünün,renginin,yazı tipinin nasıl olmasına karar verebilecek bir işaretleme dilidir. İlk çıktığı yıllarda Css1 olarak adlandılırılan işaretleme dili sadece;
yazıyı hizalama,renk ve metin yazı tipi ayarlama gibi özellikleri vardı. Şuanki Css yani sürüm 3' te neler olduğunu ve nasıl çalıştığını bu konuda göreceğiz. Css öğrenilmeden önce en az " Temel "düzeyde Html bilinmesi şarttır. Bunun nedeni ise Css'in asıl amacının Html'in Stilleştirilmesi olmasıdır. Bu konuda ilk olarak kısa bir şekilde Temel Html kodlarından ardından Css'ten bahsedeceğim.

Temel Html

Html " Hyper Text Markup Language "

Aynı şekilde Css gibi Html' de bir işaretleme dilidir. Genel amacından bahsetmek gerekir ise ;
metnin genel görünümünü, metnin biçimini, ve metnin yapısını nasıl olması gerektiğini getirdiği belirli kurallar sayesinde tanımlanabilir. Meraklısı için Html Sürümleri

Son kullanılan hali ile Html5 temel yapısı ve kodlarından bahsedeyim.

Bir Html Belgesi 2 kısımdan oluşur

Head (Başlık)

Html Sayfasında başlık ile ilgili özellikleri belirleyeceğiniz kısımdır.

BODY (Gövde)

Asıl metnin bulunduğu kısımdır. Başlık dışında her türlü elemanın yazıldığı kısımdır. Web sitelerinin görünen tarafıdır.
Html dökümanlarına her zaman döküman tipi tanımlanarak başlanmalıdır.

<!DOCTYPE html>

Asıl amacı web sitesinin döküman tipi belirtilerek doğru bir şekilde gösterilmesini-okunmasını sağlar birden fazla döküman tipi vardır örn.

Küçük bir örnek ile basit bir web sitesi tasarlayacağız. Sayfayı hazırlamak için çeşitli yorumlayıcı programlara ihtiyacımız olacak ;
Atom

https://atom.io/

Sublime Text

https://www.sublimetext.com/3

Notepad ++

https://notepad-plus-plus.org/downloads/

Adobe dreamweaver cc

https://creativecloud.adobe.com/apps/download/dreamweaver?promoid=T32PLZSW&mv=other

Benim kullanacağım program

Notepad++ olacak indirmek için:

https://notepad-plus-plus.org/downloads/

Sayfamızı hazırlamaya geri dönelim kullanacağımız komutlar
Html de her kullanılan etiketle işiniz bittiği zaman </.....> etiketi ile kapatmanız gerekmektedir aksi takdirde birçok hataya sebebiyet verebilir.

Kod:

<html></html>

Yazılacak olan her türlü html sayfası <html></html> etiketleri arasına alınması zorunludur.

Kod:

<head> </head>

Hazırlanacak olan sayfanın başlık kısmının belirtilmesinde kullanılır. Bu kısma eklenecek bütün etiketler sadece başlık kısmını ilgilendirecektir sayfa içeriğinde gözükmeyecektir.

Kod:

<title></title>

Bu etiket sayesinde hazırladığınız sayfanın başlığını belirleyebilirsiniz başlıktan kasıt olarak

Sayfa başlığı.

Kod:

<body> </body>

Hazırlanacak olan sayfada body yani gövde kısmının belirlenilmesinde kullanılır. Sayfanın görünen kısmıdır. Aşağıdaki bütün komutlar sadece <body> etiketi içinde kullanılacaktır.

Kod:

<p>

Sayfa içinde yeni paragrafa geçmenize olanak sağlar.

Kod:

<h1> <h2> <h3> <h4> <h5> <h6>

Sayfa içerisindeki başlıkları belirtmek için kullanılır <h1> en büyük başlık ve <h6> en küçük başlık boyutudur.

Kod:

<br>

Adlı etiket sayesinde bulunduğunuz cümleyi kapatıp yeni bir satıra geçebilirsiniz.

Kod:

<strong>

Yazdığınız metinin daha koyu veya kalın olmasını sağlayan etikettir. Genellikle vurgulamak istenen cümlelerde kullanılır.

Kod:

<u>

Bu etiket ile yukarıdaki gibi vurgulamak istediğiniz cümleyi altına çizgi çekerek daha belirgin yapar.

sadece <strong> etiketi değil <b> etiketi de yazıyı daha koyu hale getirebilir.

Kod:

<center>

etiketi sayfada belirlediğiniz her hangi bir cümlenin veya direk metnin ortalanmasında kullanılır.

şimdi bu öğrendiğimiz etiketler ile küçük bir sayfa hazırlayalım.

Kod:

<!DOCTYPE html>
<html>
     <head>
          <title> Temel Html Bilgisi</title>
     </head>
	 
	 <body>
	
	 <center><h1> Temel Html Bilgisi </h1></center>
	
	<h4>  TurkHackTeam  </h4>
	
<p> <strong>Türk Hack Team, 2002 yılında Arsenik tarafından kurulmuştur. </strong></p>
<b>Türkiye'nin en eski siber timlerinden biridir. <p></b>
Yöneticilerinin Bedros Sanches, OnLy, Arsenik, <br>
Se-Zer, Akşemsettin, ZoRRoKiN, TheKar1zma, 
Corsair olduğu söylenmektedir. </p> <u>Türkiye'de siber güvenlik konusunda ofansif birçok saldırıda bulunmuştur.</u>
	
	
</body>	
	
</html>

burada Tht wikipedia dan yardım alacağım.

Temel Html bilgisi buraya kadardı şimdi sırada asıl konumuz olan Css.

Css' e Giriş

Html de ki en büyük sorun Stil belirtme,Görselleştirme ve Biçimlendirme özelliğinin olmamasıdır. Buyüzden Css'e ihtiyaç duyulmuştur. Css hakkında yapılacak en iyi yorum metin içeriğinin nerede,nasıl görüneceğini ve ne stil de olacağını belirtmektir. Css kolay öğrenilebilen bir
İlk olarak bilinmesi gereken şey web sitelerinin yapısıdır bir site 3 katmandan oluşur
İçerik Katmanı
Adından da anlaşılacağı üzere sayfanın içeriği ile ilgilidir. Her sitede mevcuttur, buradaki amaç Html etiketlerini kullanarak (head,body) site üzerindeki temel alanlarını belirtmektir kısaca içeriğin hiyerarşisi belirlenir.

Görselleştirme Katmanı

Sitenin stilleştirilmesi yani yazı tipinin, yazı renginin, site içeriğinin görselleştirilmesinin yapıldığı katmandır genel olarak görselleştirme işleminde Css kullanılmaktadır.

Etkileşim Katmanı

Site ile ziyaretçi arasındaki ilişkinin nasıl olacağını belirler form doldurma, yorum atma, site içerisinde herhangi bir yere buton aracılığı ile gitme gibi işlemlerde kullanılır genel olarak javascript ile kodlanmaktadır.

İlk ders ile başlayalım

Css Yazım Kuralları (Syntax)

Bir CSS kural kümesi, bir seçici (selector) ve bir bildiri bloğundan (declaration block) oluşur.

Selector stil bilgilerini hangi html etiketine yüklemek istediğiniz oranın seçilmesini sağlar bu selector sayesinde istenen html bilgisini seçilebilir ve bildiri bloğundan (declaration block) seçilen etiketin ne yapması gerektiği söylenir bildirilerde özellik adı (property name) ve bir değer (value) içermektedir iki kodun arasına ":" eklenmelidir css kodları ";" sembolü ile kapatılmalıdır bildiriler (declaration block) "{}" sembolü arasına yazılmalıdır. Örneklerle daha kolay anlatayım.
Örnek:<p> etiketi arasına yazılmış yazının ilk olarak renginin, yazı tipinin, yazının hizasının ayarlamasını yapalım.

Kod:

<html>
   <head>
[COLOR="Red"]	   *********
	   
p {color:blue;
text-align: center;
font-size: 40px;
}

</style>[/COLOR]

<body>

<p> Css Öğreniyorum </p>

</body>
</html>

Css kodlarını

Kod:

********* </style>

etiketi içine yazıyoruz çıktısına bakmak gerekir ise

Yukarıda bahsettiğim başlıklara yeniden dönüp detaylı bir açıklama yapayım.

CSS seçiciler (selectors)

Kısaca hedef html elemanlarını seçmenize ve bu elemanlar üzerinde işlem yapmanızı sağlar peki html elemanlarını seçicilere nasıl tanımlarız
Belirtmek için sınıf (class), özellikleri (attribute), id ve tipleri kullanılır.

Eleman seçiçi
id seçici
Sınıf (class) seçici
Örneklerimi bu seçiciler (selector) üzerinden vereceğim.

Eleman Seçici

Seçim işlemini Etiket adına göre yaparlar. <p> etiketinin arasına yazılan yazının özelliklerini atayacağız, burada bilinmesi gereken bir diğer önemli konu <p> etiketi arasına yazılan yazı her türlü yazılan css kodundan etkilenecektir.

Kod:

<html>
   <head>
	   *********
	   
[COLOR="red"]p{color:red;
text-align:center;
}[/COLOR]

</style>

<body>

<p> Css Öğreniyorum </p>

</body>
</html>

id seçici

Adından da anlaşılacağı üzere html etiketi id bilgisi üzerinden tanınır ve bu seçicinin eleman seçiciden farkı sadece tek bir elemanı kullanmak için bulmalısınız. Kullanımına bakacak olursak

Kod:

#örnek{
 text-align: left;
    color: green;
}

Burada atanan değerin tanımlaması için kullanılacak olan kod

Kod:

<body>

<p id="örnek"> Css Öğreniyorum </p>
<p> bu paragraf etkilenmedi</p>
</body>

olmalı. Atanan değeri şu şekilde gösteriyoruz

Kod:

<p id="örnek">  </p>

Sınıf (class) seçici

Seçilecek olan html kodunu verilen sınıf bilgisine göre arar. örn.

Kod:

 	   *********
	   
.hover {
      text-align: center;
     color: green;
     font-size:40px;	
          
  }
</style>

Sınıfı belirtmek için gövde kısmına girilecek herhangi bir html etiketi içine class="" yazılarak tanımlanmalı.
Örn.

Kod:

<body>

  <p class="hover">Sınıf belirtme işlemi </p>
<p> bu paragraf etkilenmedi</p>

Çıktısına bakacak olursak

CSS Kodlarını Ekleme Yöntemleri

İkinci başlığımızda temel bir soru olan Css kodlarını nasıl sayfamıza ekleriz ? in cevabını vereceğim. Bir css kodunu sayfamıza eklemenin 2 yolu vardır .
İç stil sayfası (Internal Style Sheet)
Dış stil sayfası (External Style Sheet)

İlk başlık ile başlıyalım.

İç stil sayfası (Internal Style Sheet)

Sadece tek bir etiketi biçimlendirmek için kullanabileceğimiz yöntemdir Web sayfamızda head bölümüne açılan <style </style> etiketleri içine yazmış olduğumuz kodlara denir. Yukarıda yazmış olduğumuz Css örneklerini de nternal Style Sheet yöntemini kullanarak sayfamıza ekledik.

Örn.

Dış stil sayfası (External Style Sheet)

Bu ekleme yöntemi genellikle birden fazla sayfayı stillendirme işlemi uygulanacağında kullanılır avantajı ise tek bir .css uzantılı dosya ile bütün sayfanın görünümünü değiştirebilmeniz. Eekleme yöntemi ise ise head bölümüne <link> etiketi eklenerek hazırlanan .css uzantılı dosyayı hedeflemeniz yeterli olacaktır.

Örn.

Görüldüğü üzere head bölümüne eklemiş olduğumuz

Kod:

<link rel="stylesheet" type="text/css" href="dışstil.css">

Kodu sayesinde ayrı bir .css dosyası olarak hazırladığımız dosya içeriğini birbirleri ile entegre edilmesi gerektiğini belirttik çıktıya bakalım.

Not : Burada bahsedilmesi gereken bir diğer konu iki css kod ekleme yöntemini tek bir etiket üzerinde kullanılması halinde sayfamız hangisini göstereceği. Böyle bir durumda hangi ekleme yöntemi diğerine göre daha özel ve detaylı ise o eklenir.

Css Zemin Özellikleri

Genel Zemin Kodları

Kod:

Özellik	Açıklama
background:	Bütün zemin özelliklerini tek bir bildiride gerçekleştirir.
background-attachment: Zemin resmi sabit mi yoksa sayfanın diğer kısmında hareket edecek mi bunu belirler.

background-color: Bir elemanın zemin rengini belirler.
background-image: Bir eleman için zemin resmini belirler.

background-position: Zemin resminin başlangıç pozisyonunu belirler.
background-repeat: Zemin resminin nasıl tekrarlanacağını belirler.

Css de seçilen elemanın zemin rengi, zemine resim eklenmesi, eklenen resmin tekrarı ve eklenen resmin pozisyonu gibi özellikleri gibi işlemleri sayfamıza nasıl ekleriz bunları anlatacağım.

Zemin Rengi

Css de zemin rengini 3 farklı şekilde belirleyebilirsiniz:
Bir HEX değeri: "#cd5700"
Bir RGB değeri: "rgb(242 242 242)"
Bir renk adı: red, blue vb.

şekillerde belirlenir, nasıl eklenir sorusuna gelelim.

Birkaç örnek daha verelim.

Zemine Resim Eklenmesi

Eklenecek resmi seçelim. Ardından basit bir şekilde ekleyelim

eklemek için;

Kod:

body {
    background-image: url(".....");
}

şeklinde kolay bir şekilde eklenebilir.

link üzerinden resim eklemekte mümkün:

Kod:

 background-image: url("https://www.tutorialrepublic.com/lib/images/css-illustration.png");

şeklinde url eklerken bir dış ağ resim adresi vermeniz yeterlidir benim ekleyeceğim resim "https://www.tutorialrepublic.com/lib/images/css-illustration.png " şu olacak basit bi değişimle halledelim. .

Kod:

body {
    background-image: url("https://www.tutorialrepublic.com/lib/images/css-illustration.png");
}

Resmin tarayıcı tarafından yorumlanırken sayfayı kaplamak adına tekrar etmesini istemiyor olabilirsiniz bunun için gireceğiniz kod " background-repeat: no-repeat; " olacaktır.
Örn.

Kod:

body {
    background-image: url("https://www.tutorialrepublic.com/lib/images/css-illustration.png");
    background-repeat: no-repeat;
}

Artı olarak resmin pozisyonunu belirlemek isterseniz gireceğiniz kod " background-position: " olmalıdır.
Örn.

Kod:

body {
    background-image: url("https://www.tutorialrepublic.com/lib/images/css-illustration.png");
    background-repeat: no-repeat;
   background-position: right under;
}

Çıktısına bakacak olursak

Css de zemin özelliklerinden bahsettik sırada Metin işlemleri bulunmakta.

CSS Metin İşlemleri

Css de belirli bir elemana zemin rengi atamayı öğrendik şimdi sırada bir metne renk nasıl atanır konusu var.

Metin rengi (Text Color)

Yukarıda da birçok örneğini verdiğimiz gibi " color: " yazıp rengi atamanız yeterli olacaktır.

Kod:

p{
color:green;

gibi basit örnek verilebilir veya hex,rgb gibi değerler atayarakta renk eklenebilir.

Kod:

p{
color: #b21b23

Metnin yerleştirilmesi

Css kullanılarak metnin pozisyonunun nasıl olması gerektiği veya sadece belirli bir cümlenin pozisyonunun atanması gibi işlemlerin nasıl yapıldığına bakalım.

Css de " text-align " özelliği metninizin pozisyonunu belirlemenize olanak sağlar. Örnek kullanımlarla göreceğiniz gibi metin ortalanabilir, sağ ve sol gibi pozisyonlara atanabilir.
Örn.

Kod:

 *********  

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

p{

text-align: right;
color:blue;
font-size:25px;
}


</style>

Metin dekorasyonu

İsminden de anlaşılacağı üzere Css metin dekorasyon özelliğinden bahsedeceğim. Kullanacağımız özellik " Text-decoration " olacak metni dekore etmek veya dekorasyon çıkarma işlemlerinde kullanılır.

Kod:

Metin özellikleri
Özellik	Anlamı

color: Metnin rengini atama işlemini gerçekleştirir.

direction: Metnin yazma yönünü belirler.

letter-spacing: Metindeki karakterler arasındaki boşlukları artırır ya da azaltır.

line-height: Satır yüksekliğini atama işlemini gerçekleştirir.

text-align: Metnin yatay konumlandırılmasını belirler.

text-decoration: Metne eklenecek dekorasyonu belirler.

text-indent: Bir metin bloğundaki ilk satırın ne kadar içerden başlayacağını belirler.

text-shadow: Metne eklenecek gölge etkisini belirler.

text-transform: Metnin büyük-küçük harf durumunu belirler.

vertical-align: Bir elemanın düşey yerleşimini belirler.

white-space: Eleman içinde alfabe dışı karakterlerin nasıl işlem göreceğini belirler.

word-spacing: Bir metinde kelimeler arasında bulunan boşluk sayısını artırır ya da azaltır.

CSS Yazıtipi Özellikleri

Yazı tipi (font) denmesinden de anlayacağınız üzere italik ve kalın gibi seçenekleri atamakta ve asıl amacı olan metnin Stil tanımlamasında kullanılır.

Yazıtipi ailesi

Özelliğin ismi " font-family" 'dir. Kullanım amacı tarayıcıların bazı yazı tipi özelliklerini kabul etmiyor olmasıdır örnek olarak google New York
Times Roman'ı kabul etmezken Georgia'yı kabul ediyor ise siz de bunu bilmiyor iseniz yazınız normal yazı tipinde gözükecektir fakat siz font-family özelliği ile birden fazla özellik eklemiş iseniz (georgia)kabul edilmeyen yazı tipinin hemen belirlenen yedeğine geçiş yapılacaktır bu geçiş işlemi de " fallback" olarak adlandırılmıştır. Yazı Tiplerini öğrenmeden uygulamaya geçemeyiz.

Css de Yazı Tipleri İki Temel gruptan oluşur.

Serif

*Resim gelince düzenlenecek *

Css de Yazı Tipi Uygulamaları

"font-family" Özelliğini kullanırken birden fazla yazı tipi atanmışsa virgülle ayrılmalıdır.

Örn.

Kod:

p {
    font-family: "Times New Roman", Times, serif;
}

Şimdi bir metin içerisinde iki farklı font kullanacağız.

Resimde de görüldüğü üzere aynı metin içerisinde de geçen iki cümleye farklı yazı tipleri atanmış bu işlem yapılırken iki farklı sınıf kullanılarakyazı tiplerinin karışmaması sağlanmış. Çıktısına bakacak olursak

Yazıtipi stili

Yani Font-style özelliği üç farklı değer taşımaktadır.

normal
italic
oblique: Bilmeyenler için, metin eğik durmaktadır.

Kullanımına gelecek olursak

Kod:

p.normal {
    font-style: normal;
}

p.italic {  
    font-style: italic;
}

p.oblique {
    font-style: oblique;
}

verdiğimiz özellikleri şimdi bir örnek ile anlatalım.

CSS Hakkında Detaylı Bilgi

'Creative

Kıdemli Üye

Sosyal medya sayfalarımız