css border arşivleri - Mehmet Kirazlı https://www.mehmetkirazli.com/tag/css-border/ Yazılımcı Notları Fri, 06 Apr 2018 07:49:36 +0000 tr hourly 1 https://wordpress.org/?v=6.1.10 https://www.mehmetkirazli.com/wp-content/uploads/2018/04/mehmetkirazlilogo.png css border arşivleri - Mehmet Kirazlı https://www.mehmetkirazli.com/tag/css-border/ 32 32 CSS Seçiciler https://www.mehmetkirazli.com/css-seciciler/ https://www.mehmetkirazli.com/css-seciciler/#respond Thu, 29 Mar 2012 13:54:38 +0000 http://www.mehmetkirazli.com/?p=340 Merhaba. Bu yazımda. Css seçiciler konusunu ayrıntılı olarak ele alacağım. Css de anlattığımız kadarıyla, kullandığımız <style> elementi ile her element için ayrı ayrı stiller tanımlıyorduk. Mesela <p> etiketi için bir stil belirliyorduk ve her <p> etiketi için bu stiller kullanılıyordu. Fakat bazı <p> elementleri için farklı stilleri kullanmak istiyorsak ne yapacağız? Bunun için seçiciler kullanılmaktadır.2 …

The post CSS Seçiciler appeared first on Mehmet Kirazlı.

]]> Merhaba. Bu yazımda. Css seçiciler konusunu ayrıntılı olarak ele alacağım.

Css de anlattığımız kadarıyla, kullandığımız <style> elementi ile her element için ayrı ayrı stiller tanımlıyorduk. Mesela <p> etiketi için bir stil belirliyorduk ve her <p> etiketi için bu stiller kullanılıyordu. Fakat bazı <p> elementleri için farklı stilleri kullanmak istiyorsak ne yapacağız?

Bunun için seçiciler kullanılmaktadır.2 tür seçici vardır;

1) Id Selector

2) Class Selector

Id selector kullanımında her id,bir sayfada sadece bir kez kullanıldığı için biz daha pratik olması amacıyla Class Selector kavramını anlatacağız.Böylece class’larımızı bir sayfada istediğimiz kadar kullanabileceğiz

CLASS SELECTOR KULLANIMI

Class selector kullanımı şu şekildedir.<head> etiketinin olduğu kısımda classlarımızı tanımlarız,her birine birer isim veririz ve içine, vereceğimiz stillerimizi yazarız

–>Class seçicisi,başına nokta (.) koyularak tanımlanır.Class seçicisine bir örnek vererek , örnek üzerinden açıklayalım;

<html>
 <head>
  <style type="text/css">
  .deneme1
  {
  text-align:left;
  color:green;
  background-color:aqua;
  }
  .deneme2
  {
  text-align:left;
  color:blue;
  background-color:orange;

  }
  </style>
 </head>
<body>
   <h2 class="deneme1">Deneme1 class'ı için bir örnek </h2>
   <h4 class="deneme2">Deneme2 class'ı için bir örnek</h4>
</body>
</html>

Burada .deneme1 ve .deneme adlı 2 adet class tanımladık.Bunların başına nokta koyulduğunu unutmayalım…!

Bu sınıflarımız içine {  }  parantezleri arasına istediğimiz stilleri yazdık.Bu classlarımızı <head> etiketinde <style> etiketi arasına yazdığımızı ve <style> etiketini kapatmayı unutmayalım…!

–> Bu hazırladığımız classları hangi element üzerinde kullanmak istiyorsak o elementin <class> özelliğine yazıyoruz.Bu verdiğimiz örnekte biz h4 ve h2 elementleri üzerinde classlarımızı kullandık

<h2 class="deneme1">Deneme1 class'ı için bir örnek </h2>

Bu satırda class=” ”   ile hangi classımızı kullanacaksak parantezler içine onu yazıyoruz.Biz bunun için deneme1 classını kullandık.Şimdi yukardaki kodumuzun tarayıcıda çıktısını görelim;

css seçiçiler
Selector konusunda daha geniş bir örnek yapalım.Farklı classlar kullanalım ve bunları farklı etiketler için uygulayalım;

<html>
 <head>
  <style type="text/css">
  .deneme1
  {
   text-align:left;
   color:green;
   border-style:inset;
   border-width:10px;
   border-color:grey;
   background-color:aqua;
  }
  .deneme2
  {
   text-align:left;
   color:blue;
   background-color:orange;
   font-size:20px;
   text-decoration:underline;
   border-style:solid;
   border-width:5px;
   border-color:green;
   height:40px;

  }
  </style>
 </head>
<body>
  <h2 class="deneme1">Deneme1 class'ı için bir örnek </h2>
  <h4 class="deneme2">Deneme2 class'ı için bir örnek</h4>
</body>
</html>

Sayfamızın Çıktısını Görelim

css seçiçiler

Burada 2 tane class (sınıf) tanımladık.Rastgele stiller uyguladık.Örneğin arkaplan rengi,çerçeve stili,çerçeve kalınlığı,font büyüklüğü gibi özellikler verdik.Artık bu özelliklerimizi istediğimiz yerde istediğimiz etikete uygulayabiliriz.  Uygulamak istediğimiz etikette   class = ”  “   yapısıyla bu parantez içine ,kullanacağımız sınıfı ekleyerek uygulayabiliriz.

The post CSS Seçiciler appeared first on Mehmet Kirazlı.

]]> https://www.mehmetkirazli.com/css-seciciler/feed/ 0