Archives for the 'CSS' Category
Text Özellikleri
Text özelliği ile font özelliğinin sahip olmadığı bazı özellikleri etiketimize ekleriz. Örnek ile açıklayalım.
<html><body><head><title>Css</title> <style type=”text/css”><!–p {text-transform : lowercase;text-decoration : underline;text-align : left;line-height : 20px;text-indent : 15px;}–></style> <body><p>Pc-Kopat</p></body></html>
text-transform :
lowercase : Yazının tümünün küçük harf olmasını sağlar.
uppercase : Yazının tümünün büyük harf olmasını sağlar.
capitalize : Yazının istenilen şekilde kalmasını sağlar.
text-decoration :
underline : Yazının altının çizili olmasını […]
List Özellikleri
Bu Css özelliği ul ve li html etiketleri ile oluşturduğumuz listelerin özelliklerini belirlemek için kullanılır.
<html><body><head><title>Css</title> <style type=”text/css”><!–li {list-style-type : circle;list-style-position : inside;list-style : decimal;list-style-image : url (”resim.gif”);}–></style> <body><ul><li>Pc-Kopat<li>Html<li>Javascript<li>Css<li>Grafik</ul> </body></html>
list-style-type :
disk : Liste biçiminin disk (içi dolu yuvarlak) şeklinde olmasını sağlar.
circle : Liste biçiminin çember şeklinde olmasını sağlar.
square : Liste biçiminin kare olmasını sağlar.
decimal : Liste […]
Seçiciler
Css’te seçiciler en çok kullanılan öğelerdendir. Örneğin h1 etiketine Css yardımıyla belli bir şablon yüklediniz. Ama sayfanızda kullanacağınız h1 etiketlerinin tümünün aynı şekilde olmasını istemiyorsunuz. Bu durumda bize seçiciler yardımcı olur.
İki çeşit seçici göreceğiz. Bunlar :
* Id Selector (Id seçicisi)
* Class Selector (Sınıf Seçicisi)
Class Selector (Sınıf Seçicisi)
Bu seçiciyi sayfanızdaki h1 gibi etiketlerin tümünün aynı olmasını […]
Position (Pozisyon) Özelliği
Html’de kullandığımız Layer (katman) etiketlerinin html üzerindeki yerleştirme işlemi için kullanılır. Hemen bir örnek ile görelim.
<html><head><title>Css</title> <style type=”text/css”><!–div {position:absolute;top:20px;left:10px;width:200px;height:200px;clip:auto;overflow:scroll;z-index:auto;visibility:visible;}–></style> <body><div>Pc-Kopat<br>Html<br>Javascript<br>Css<br>Grafik<br></div><p> Pc-Kopat</body></html>
position :
absolute : Katmanın yerinin kesin olarak belirlenmek istendiğinde kullanılır.
relative : Katmanın yerinin göreli(diğer öğelere göre değişebilen) olarak belirlenmek istendiğinde kullanılır.
static : Katmanın yerinin sabit olarak belirlenmek istendiğinde kullanılır.
top : Katmanın üst kısımdan kaç piksel […]
konumlandırma (positioning)
CSS konseptinin üç önemli konusu kutu modelleme, konumlandırma(positioning) ve floating konularıdır.
Burada CSS ile konumlandırma hakkında bilgi vermeye çalışacağız.
Konumlandırma ile alakalı olduğu için blok-level ve inline-level elementlerin tanımını tekrarlayacağız.
Blok-level elementler : Blok-level elementingörünüş formatı bir kutu gibidir. Blok-level elementler inlineelementleri ve diğer blok-level elementleri içerebilir. Tipiközellikleri yeni bir satır başlangıcı yapmalarıdır. Örnek: h6, p, li
Inline-level Elementler […]