css arşivleri - Mehmet Kirazlı https://www.mehmetkirazli.com/tag/css/ Yazılımcı Notları Fri, 06 Apr 2018 07:56:28 +0000 tr hourly 1 https://wordpress.org/?v=6.1.10 https://www.mehmetkirazli.com/wp-content/uploads/2018/04/mehmetkirazlilogo.png css arşivleri - Mehmet Kirazlı https://www.mehmetkirazli.com/tag/css/ 32 32 Css Metin Biçimlendirme https://www.mehmetkirazli.com/css-metin-bicimlendirme/ https://www.mehmetkirazli.com/css-metin-bicimlendirme/#comments Mon, 02 Apr 2012 18:59:20 +0000 http://www.mehmetkirazli.com/?p=351 Önceki dersimizde Css de oluşturduğumuz sınıfları her etiket için nasıl kullandığımızı gördük.Bu yazımızda ise Css metin biçimlendirme etiketleriyle metinleri nasıl biçimlendireceğimizi görelim Metin biçimlendirmedeki kastımız ;metnin hizalanması,renginin değişmesi,altının çizilmesi,yazı tipi vb. özelliklerdir.Şimdi bunların ne olduklarını teker teker görelim ve örnekler üzerinde anlatalım METİN RENGİ DEĞİŞTİRME Bir elementin rengini değiştirmek için kullanacağımız özellik color dır.Bu parametreye ” ” …

The post Css Metin Biçimlendirme appeared first on Mehmet Kirazlı.

]]> Önceki dersimizde Css de oluşturduğumuz sınıfları her etiket için nasıl kullandığımızı gördük.Bu yazımızda ise Css metin biçimlendirme etiketleriyle metinleri nasıl biçimlendireceğimizi görelim

Metin biçimlendirmedeki kastımız ;metnin hizalanması,renginin değişmesi,altının çizilmesi,yazı tipi vb. özelliklerdir.Şimdi bunların ne olduklarını teker teker görelim ve örnekler üzerinde anlatalım

METİN RENGİ DEĞİŞTİRME

Bir elementin rengini değiştirmek için kullanacağımız özellik color dır.Bu parametreye ” ”  ifadeleri arasında renk değerleri verebiliriz.Vereceğimiz renkleri doğrudan adını girerek , renk kodunu yazarak veya RGB formatında yazarak belirleyebiliriz.Şimdi,önceki derste gördüğümüz gibi sınıf şeklinde bir stil belirleyelim ve bu renk stillerimizi, başlık ve paragraf içinde kullanalım

<html>
 <head>
   <style type="text/css">
    body {color:aqua;}
    p.stilim{color:FF0000;}
    h4{color:Orange;}
    p{color:green;}
   </style>
 </head>
  <body>
   <h4>Burası,turuncu renkli bir başlıktır</h4>
   <p>Burası,yeşil renkli bir paragraftır</p>
   <p class="stilim">Burası,p etiketinin "stilim" sınıfına aittir ve kırmızı renktir</p>
  </body>
</html>

Yazdığım kodun Çıktısını görerek konuyu daha ayrıntılı anlatalım

css yazı stili

Yukarıdaki kodlarımızda biz,önceki derste gördüğüm konulardan olan dahili css ile yazdık. <body> kısmında sayfamızın arka plan rengini, h4 ve p özelliğinde ise sayfamızda yazılacak her h4 ve p elementi için bir stil belirledik. p.stilim kısmında ise , diğer p etiketlerinden ayrı olarak bir stil uygulamak istediğimiz için yazdık.

<p class="stilim"

kod satırı ile paragraf etiketimiz için (stilim) adındaki sınıf üyemizi kullandık.Bunun tanımlaması ise yukarıda p.stilim ile belirlendi

 

METİN HİZALAMA

Html derslerinde gördüğümüz gibi yazılarımızı sağa,sola dayalı veya ortalı yapabiliyorduk.Bunu Css kodları ile nasıl yapabileceğimizi görelim;

<html>
   <head>
      <style type="text/css">
         h3.sola { text-align:left; }
         h3.orta { text-align:center; }
      </style>
   </head>
   <body>
      <h3 class="sola" >
      Bu başlık sola dayalıdır</h2>
      <h3 class="orta">Bu başlık ortadadır</h3>
      </ul>
   </body>
</html>

Burada h3.sola , h3.orta stilleri tanımladık.Bu şu demektir.Yazacağımız <h3> etiketleri için orta ve sola adlı 2 stil tanımladık. <h3> etiketlerinde class=”sola” tanımlarsak , h3.sola stilimizi kullanacaktır.Bu stilimizde ise yazılarımız sola dayalıdır.Şimdi tarayıcımızda çıktımızı görelim
sola dayali

 

METİN DEKORASYONLARI

Bu konumuza da önceki derslerimizde kısaca bahsetmiştir.Şimdi derinlemesine inceleyelim.Metin dekorasyonu derken metnimizin altını, üstünü çizmek gibi stillerden bahsediyoruz.Burada yapacağımız örnekleri de Dahili Css mantığı ile yapalım (Önceki Css derslerimizde bahsetmiştik)

Kullanabileceğimiz dekorasyonlardan bahsedelim ve örneklerimize geçelim;

text-decoration:overline;               =>  Yazımıza üst çizgi koyar
text-decoration:line-through;      =>   Yazımızın üstünü çizer
text-decoration:underline;            =>   Yazımızın altını çizer
text-decoration:none;                      =>   Default olarak herhangi bir çizgi koymaz.

 

Bu verdiğimiz özellikler ile ilgili örnek kodumuzu verelim;

<html>
   <head>
      <style type="text/css">
         h2 { text-decoration:none; }
         h3 { text-decoration:overline; }
         h4 { text-decoration:line-through; }
         h5 { text-decoration:underline; }
      </style>
   </head>
   <body>
      <h2>Mehmet</h2>
      <h3>Mehmet</h3>
      <h4>Mehmet</h4>
      <h5>Mehmet</h5>
   </body>
</html>

Burada h2,h3,h4,h5 etiketleri için 4 er tane metin dekorasyonu tanımladık ve bunları <body> kısmındaki etiketlerimiz üzerinde kullandık

Çıktımız ise ;
decoration

Kodlara ve çıktımıza bakarak neyin ne olduğunu daha iyi anlayabiliriz

 

CSS YAZI TİPİ DEĞİŞTİRME

Font stili sayesinde , yazılarımızı italik (eğik) yapabilir veya yazı fontunu değiştirebiliriz

font-family     => ile fontumuzun yazı tipi belirlenir

font-style        => ile fontumuzun stili belirlenir

font-size          => ile fontumuzun boyutu belirlenir (px-piksel cinsinden)

<html>
   <head>
      <style type="text/css">
         p.duz {font-style:normal;}
         p.egik {font-style:italic;}
         p.times{font-family:"Arial";}
      </style>
   </head>
   <body>
      <p class="duz">Burası normal yazıdır</p>
      <p class="egik">Burası egik yazıdır</p>
      <p class="times">Burası Arial Yazı tipiyle yazıldı</p>
   </body>
</html>

P elementimiz için 3 adet özellik belirledik.İlki için p.normal kullandık.Bu demektir ki classını egik belirlediğimiz her p etiketi için bu stiller kullanılacaktır
yazı stilleri

 

 

The post Css Metin Biçimlendirme appeared first on Mehmet Kirazlı.

]]> https://www.mehmetkirazli.com/css-metin-bicimlendirme/feed/ 1 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