css nedir arşivleri - Mehmet Kirazlı https://www.mehmetkirazli.com/tag/css-nedir/ Yazılımcı Notları Fri, 06 Apr 2018 07:46:38 +0000 tr hourly 1 https://wordpress.org/?v=6.1.10 https://www.mehmetkirazli.com/wp-content/uploads/2018/04/mehmetkirazlilogo.png css nedir arşivleri - Mehmet Kirazlı https://www.mehmetkirazli.com/tag/css-nedir/ 32 32 CSS’e Giriş https://www.mehmetkirazli.com/csse-giris/ https://www.mehmetkirazli.com/csse-giris/#respond Wed, 28 Mar 2012 18:34:20 +0000 http://www.mehmetkirazli.com/?p=296 Merhabalar. Bu yazımda Css Nedir konusunu anlatarak Css’e giriş yapacağım. Böylece Css dersleri serisi hazırlamayı düşünüyorum. CSS NEDİR – CSS’E GİRİŞ Konumuza öncelikle Css ( Cascading Style Sheet ) nedir ile başlayalım. Html veya herhangi bir dil ile oluşturduğumuz web sitelerinin kullanıcıya nasıl görüneceğini Css ile ayarlayabiliriz Birçok sayfadan oluşan bir sitemizin olduğunu düşünelim.Sayfamızdaki her …

The post CSS’e Giriş appeared first on Mehmet Kirazlı.

]]> Merhabalar. Bu yazımda Css Nedir konusunu anlatarak Css’e giriş yapacağım. Böylece Css dersleri serisi hazırlamayı düşünüyorum.

CSS NEDİR – CSS’E GİRİŞ

Konumuza öncelikle Css ( Cascading Style Sheet ) nedir ile başlayalım. Html veya herhangi bir dil ile oluşturduğumuz web sitelerinin kullanıcıya nasıl görüneceğini Css ile ayarlayabiliriz

Birçok sayfadan oluşan bir sitemizin olduğunu düşünelim.Sayfamızdaki her linkin renginin mavi olmasını veya arka plan renginin sabit olmasını istiyoruz.Bunun için her html sayfasına aynı kodları yazmaktansa .css uzantılı bir dosyada  stillerimizi saklayarak sitemizin hem hızlı açılmasını hem de her sayfaya aynı kodu yazma sıkıntısından kurtulmamızı sağlayabiliriz.Her sayfada değişiklik yapmaktansa tek bir dosyada stillerimiz değiştirebiliriz

Peki bu isteklerimizi html dosyalarına nasıl entegre edeceğiz? Bunun için 3 yol var

1) .css dosyaları oluşturarak html sayfamıza bunları aktarmak (harici)

2) Her etiketimiz içine style parametresi tanımlamak (inline)

3) <head> etiketinin arasına <style> etiketi ile tanımlama yapmak (dahili)

 

CSS SÖZ DİZİMİ

Bir Css ifadesi 2 bileşenden oluşur

  • Seçici
  • İfade
p { color:green; text-align:center;}
*Buradaki p , hangi elemente stil uygulayacağımızı gösterir.Bu h1 gibi elementler de olabilir.Bunu belirttikten sonra { } parantezleri arasına özelliklerimiz yazılır

*color ve text-align , özelliğimizdir

*green ve center kısımları ise bu özelliklere verdiğimiz değerlerdir

->Her özellik noktalı virgül (;) ile  biter

->Css de yorum satırları /*……*/ ifadeleri arasına yazılır

——————————————————————————————————————————

CSS INLINE KULLANIMI

İlk olarak  her etiket için style parametresinin kullanımına örnek verelim

<html>
 <body style="background-color:green;">
  <h2 style="background-color:blue;">Mehmet Kirazlı </h2>
  <p style="background-color:red;">Web Sitesi</p>
 </body>
</html>

Öncelikle kodumuzun çıktısını göstererek daha sonra anlatmaya başlayalım

Css giriş

Burada görüldüğü gibi html den farklı olarak paragraf ve başlık etiketleri için de arka plan renkleri verilebiliyor. Style parametresi ile stil vermek için;

style=”background-color:green;”    ==> Bu kod satırı arka plan rengi vermemize yarar

style=”font-family:verdana;”                   ==>Bu kod satırı yazı tipini belirler. “verdana” yazan kısma herhangi bir yazı tipi girilebilir.

Bu özellikleri toplu olarak 1 satırda kullanmak istiyorsak ;

 style="font-family:arial;color:green;font-size:25px;

kod satırını kullanmalıyız.Buna bir örnek verelim ve çıktısını inceleyelim;

<html>
 <body>
 <h1 style="font-family:verdana;">Mehmet Kirazlı</h1>
 <p style="font-family:arial;color:green;font-size:25px;background-color:yellow;">Web Sitesi</p>
 </body>
 </html>

Çıktımızda anlaşıldığı üzere bir başlık ve paragraf yazımız olacaktır.Başlığımız verdana fontlu ,paragrafımız ise arial fontlu,yeşil renkli,sarı arka plana sahip ve font büyüklüğü 25 piksel olacaktır

Css giriş 2

*Bu yazdığımız etiketleri html de <font> etiketleri ile yaptığımızı hatırlatalım

Konumuzun detaylarına inmeden bu konuyu burada kapatıyoruz.İlerki konularda sık kullanılan sytle özelliklerini anlatacağım

 

CSS DAHİLİ KULLANIMI

Bu başlığımızda css kodlarını <head> elementi içinde tanımlamayı göreceğiz.Bunun için öğrendiğimiz bilgilerden yola çıkarak bir paragraf etiketleri içerisine metin giriyoruz ve <head> elementinin <style> etiketinin içinde bu paragraf için bir stil uyguluyoruz

<html >
	<head>
	<style>
			p {
              color:green;
              text-align:left;
			  background-color:yellow;
			}
	</style>
	<title>CSS GİRİŞ</title>
	</head>
	<body>
	<p>Fırtınalara yön veren kelebeklerin kanat çırpışlarıdır</p>
	</body>
</html>

<style> kısmında,hangi elemente stil vereceğimizi tanımladık.<body> kısmında tanımlayacağımız her <p> etiketi için bu stil uygulanacaktır.Aşağıda çıktımızı inceleyelim
Css giriş

 CSS HARİCİ KULLANIMI

Yukarıda belirttiğimiz gibi harici kullanımda .css uzantılı bir dosyaya stillerimizi kaydediyoruz ve html sayfamızın içine bu dosyayı <link> etiketi ile çağırıyoruz.Bunun için ilk olarak Notepad++ programımızı açıyoruz.Dosya->Yeni diyoruz ve yeni bir sayfa oluşturuyoruz.Adına stil.css ismini vererek farklı kaydedelim.Buraya stil kodlarımızı yazacağız.Yani hangi elemente stil vermek istiyoruz.Şimdi stil.css sayfamıza şu kodları ekleyelim;

p{
	color:red;
	background-color:green;
	text-align:left;
}

Burada p elementine birkaç özellik tanımladık.Şimdi ise tekrar Dosya->Yeni diyoruz ve onu da deneme.html olarak farklı kaydediyoruz.Buraya asıl sayfamızı yazacağız.Şimdi de aşağıdaki kodları bu deneme.html sayfamıza yazalım

<html>
   <head>
      <link rel="stylesheet" type="text/css" href="stil.css" />
      <title>HARİCİ KULLANIM</title>
   </head>
   <body>
   <p>Bilginin efendisi olmak için,çalışmanın kölesi olmak gerekir</p>
   </body>
</html>

Şimdi ise deneme.html sayfamızda yazdığımız kodları anlatalım;

-> <link> etiketi ile stil.css dosyamızdaki verileri alıyoruz

-> rel=”stylesheet”  olarak kalsın

-> href=”stil.css”   yazarak stil dosyamızın yolunu belirtiyoruz

-> type=”text/css”  ise şimdilik böyle kalmalı.Bunlar yazılması zorunlu alanlardır.

Notepad++ da yazdığımız kodları şu şekilde görelim;
css

Daha sonra deneme.html sayfamıza çift tıklarsak tarayıcımızda aşağıdaki gibi bir çıktı elde edeceğiz

css harici

The post CSS’e Giriş appeared first on Mehmet Kirazlı.

]]> https://www.mehmetkirazli.com/csse-giris/feed/ 0