CSS ile, HTML elementlerinin diğer elementlere göre konumlarını belirleyebilirsiniz. Bir HTML elementini diğerinin
altına, üstüne ya da yanına alabilirsiniz.
Aşağıda konu ile ilgili bazı örnekler verilmiş ve özelliklerin açıklamaları yapılmıştır. Konunun daha iyi anlaşılabilmesi
için her bir özelliği mutlaka kendi örneklerinizde denemeli ve incelemelisiniz.
Uygulama:
<!DOCTYPE html lang="tr">
<head>
<meta charset="utf-8"/>
<title>Konumlandırma özelliği</title>
<style type="text/css">
#pt_layer {
max-width: 150px;
max-height: 150px;
font-family:Arial;
font-style:italic;
font-size:12px;
line-height:25px;
text-transform:uppercase;
text-decoration:underline;
background-color:#0094ff;
padding:5px;
color:#fff;
}
</style>
</head>
<body>
<div id="pt_layer"> Pinusart ile CSS dersleri </div>
</body>
</html>
Sonuç
Pinusart ile CSS dersleri
Açıklamalar:
Yukarıdaki kod yapısında ölçülendirme kuralları, metin kuralları ve arkaplan özellikleri
kullanılmıştır.
- Ölçülendirme Kuralları:
-
- height: Elementlerin yüksekliğini belirlemek için kullanılır, "px,em,%" gibi değerler ile belirtilir.
- min-height: Elementin alabileceğ en az yüksekliği tanımlar, "px,em,%" gibi değerler ile belirtilir.
- max-height: Elementin alabileceğ en fazla yüksekliği tanımlar, "px,em,%" gibi değerler ile belirtilir.
- width: Elementlerin genişliğini belirlemek için kullanılır, "px,em,%" gibi değerler ile belirtilir.
- min-width: Elementlerin alabileceği en az genişliği tanımlar, "px,em,%" gibi değerler ile belirtilir.
- max-width: Elementlerin alabileceği en fazla genişliği tanımlar, "px,em,%" gibi değerler ile belirtilir.
- Metin Kuralları:
-
- font-family: "Arial,verdana" gibi font isimleri tanımlamak için kullanılır.
- font-style: "normal, italic, oblique" değerlerinden birisini alır.
- font-size: Metin boyutunu ayarlamak için kullanılır, "px,em,%" gibi değerler ile belirtilir.
- color: Metin rengi belirlenir.
- line-height: Metinlerin çizgisel yükseklikleri belirlenir.
- text-transform: "capitalize, uppercase, lowercase" değerlerini alır. Metnin tüm harflerini büyük veya küçük ya da sadece baş harflerini büyük küçük yapmaya yarar.
- text-align: "left, right, center, justify" değerlerini alır. Metni konumlandırmak için kullanılır.
- text-decoration: "none, overline, line-through, underline" değerlerini alır. Metinleri altı çizili, üstü çizili şekilde yapmaya yarar.
- Arkaplan Özellikleri:
-
- background-color: Arkaplan rengini ayarlamak için kullanılır.
- background-image: Arkaplana resim koymak için kullanılır.
- background-repeat: Arkaplan resminin tekrarlanıp tekrarlanmayacağı belirlenir.
- background: Arkaplan ile ilgili bütün özelliklerin tek seferde yazılmasını sağlar.
Görünüş Kuralları
CSS yapısı:
/*display uygulaması*/
#dis {
display: none;
}
/*position uygulaması*/
.po {
position: relative;
}
/*Float uygulaması*/
#left {
float: left;
}
#right {
float: right;
}
/*visibility uygulaması*/
em {
visibility: hidden;
}
/*top uygulaması*/
#t1 {
position: relative;
}
#t2 {
position: absolute;
top:50px;
}
/*right uygulaması*/
#r1 {
position: relative;
}
#r2 {
position: absolute;
right:100px;
}
/*overflow uygulaması*/
.boyut {
width:100px; height:100px;
}
#o1 {
overflow: scroll;
}
#o2 {
overflow: hidden;
}
/*margin,padding,border uygulaması*/
#m {
margin: 10px;
padding: 10px;
border: 1px solid silver;
}
Açıklamalar
- display: Bir elementin gösterilme durumunu belirler, "none, block, inline-block" değerlerini alır.
- position: Bir elementin konumunu belirler, "absolute, relative, fixed, static" değerlerini alır.
- float: Elementin sağa veya sola kaydırılmasını sağlar.
- visibility:Elementin görünürlük durumunu belirler, "visible, hidden" değerlerini alır.
- top: Position değeri "absolute" olan elementin üsten olan uzaklığını belirler, "px, em, %" gibi değerler ile belirtilir.
- right: Position değeri "absolute" olan elementin sağdan olan uzaklığını belirler, "px, em, %" gibi değerler ile belirtilir.
- bottom: Position değeri "absolute" olan elementin alttan olan uzaklığını belirler, "px, em, %" gibi değerler ile belirtilir.
- left: Position değeri "absolute" olan elementin soldan uzaklığını belirler, "px, em, %" gibi değerler ile belirtilir.
- z-index: Elementin katman sırasını belirler, en yüksek değer en üst katmanı belirtir.
- overflow: Bir elementin içeriğinin taşması durumunda yapılması gereken görünüş kuralıdır, "auto, scroll, hidden" değerlerini alır.
- margin: Dış boşluğu belirler, "px, em, %" gibi değerler ile belirtilir.
- padding: İç boşluğu belirler, "px, em, %" gibi değerler ile belirtilir.
- border: Kenar çizgisini tanımlar, "px, em, %" gibi değerler ile belirtilir.
Kolay gelsin, görüşmek üzere..
