CSS Notlarım Pt2

Css Notlarım

Neden paylaşıyorum?

Öğrendiğim şeyleri bir yerde tutmam lazım. Bunları deftere yazmak uzun sürüyor ya da notpad’a yazmak. Bende her yerden erişebileceğim şekilde burada paylaşacağım.


<div>

   <p>text</p>

   <p>text</p>

   <p>text</p>

</div>

Div kod bloğu oluşturur.,

#first-section

{

float: right / left;

}

Float; <div> sıralamalarından önemsiz bir şekilde yerleşir.

.clear

{

clear: both;

}

Clear ile iki float arasında boşluk oluşturur.

.example

{

display: inline-block;

}

Clear alternatifi olarak Inline-block kullanılabilir.

.first{ opacity: 0.5; }

Saydamlık, opaklık.

.first { z-index: 5;}

.second { z-index: 3;}

Üst üste gelen iki <div>’in hangisinin üstte olacağını belirtir.

.first { position: relative;}

.second { position: absolute; }

.third { position: fixed; }

Relative ile <div> akış içindedir ama Absolute ile <div> yer kapladığı halde akıştan çıkar. Fixed ile <div> sayfada o alanda sabitlenir.

.example

{

left: 5; // right: 3;

top: 3; // bottom: 2;

}

<div>’in sayfada yönünü belirleme.

<head>
 <style>
   .tooltip{
   position: relative;
   }
   .text{
   visibility: hidden;
   }
   .tooltip:hover .text{
   visibility: visible;
   }
 </style>
</head>
<body>
 <span class="tooltip">
   Tooltip
  <span class="text">
     Tooltip Text
  </span>
 </span>
</body>

Tooltip: Yazının üzerine imleci getirince, açılıp kapanan açıklama yazısı.

.text{
visibility: hidden;
opacity: 0;
transition: opacity 1s;
}

.tooltip:hover .text{
visibility: visible;
opacity: 1;
}

Tooltip açılış zamanlaması.

.style
{
margin: 50px;
margin: 50px 50px;
margin: 20px 20px 20px 20px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-top: 10px;
}

Margin ile <div> konumu ayarlama. Dörtlü margin’de saat yönünde hizalama yapılır.

.style
{
padding: 50px;
padding: 20px 20px 20px 20px;
}

Padding <div> içindeki nesnelerin <div> ile mesafe ilişkisini ayarlar. Margin ise dış kenar boşluklarını ayarlar.

 

.style
{
border: 50px;
border: 20px 20px 20px 20px;
border-radius: 2px;
}

Border çerçeve verir. Radius ile kenarları oval yapar.

 

Tagged ,

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir