• Bu metin, ilk paragraftır.
• <br>
• <br>
• Bu metin, ikinci paragraftır.

Bu metodu kullanarak görsel olarak istediğiniz sonucu elde etmenizi sağlar ancak aynı sonucu daha iyi bir biçimde sağlamak için p (paragraf) elementini kullanabilirsiniz. Örnek:

• <p>Bu metin, ilk paragraftır.</p>
• <p>Bu metin, ikinci paragraftır.</p>

p elementini kullanmanın sağladığı faydalar:

• Paragraf boşluklarını CSS yardımı ile daha kolay bir şekilde kontrol etmenizi sağlar
• Ekran okuyucu yazılım veya diğer yardımcı teknolojileri kullanan kullanıcıların bir sonraki paragrafa geçtiğini anlamalarını sağlar
• Anlamsal (semantik) olarak, metnin paragraf olduğunu tanımlar

br elementinin bir defa kullanmanın uygun olduğu yerler olsa da br elementini bir çok defa kullanmak yerine p elementini kullanmak daha iyi bir seçim olacaktır.

Orjinal makale: Use the p element to create paragraphs

Bu Yazıyı Paylaşın

HTML ve XHTML sınıf özelliklerini CSS yardımı ile biçimlendirilmesi esnasında kullanımında bir sorun olarak görmememe rağmen bu kullanımın bu amaçla yapılmadığını da biliyorum. Örneğin hangi elementlerin JavaScript fonksiyonlarından etkileneceğine karar vermek. HTML sınıflarının, CSS kullanılmamasına rağmen CSS Sınıfları şeklinde adlandırılması biraz kafa karıştırıcı.

Lütfen karışıklık yaşanmaması için “HTML sınıfları”nı “CSS sınıfları” şeklinde değil de, “HTML sınıfları” ya da sadece “sınıflar” şeklinde niteleyin.

Orjinal makale: It’s “class”, not “CSS class”

Bu Yazıyı Paylaşın

Yazılımın deneme sürümünü aşağıda vereceğim linkten indirip denyebilirseniz. Memnun kalmanız halinde ise yazılımın ücreti sadece 9.90$.

Download

Bu Yazıyı Paylaşın

Peki nedir bu yeni özellikler? Aslında hepimiz bir çoğunu uzun zamandan beri kullanmamıza rağmen, kullanabilmek için ‘bin dereden su getiriyoruz’. Haydi, ileriki günlerde sahip olacağımız bu özelliklerden bazılarına beraber göz atalım.

Resimleri kenar olarak atama (border-image)

CSS3 ile öğelere atadığımız kenarlıklara (border) pek güzel yenilikler geliyor. Bunlardan biri ‘border-image’. Bu yeni ve hoş özellik ile istediğimiz herhangi bir resmi öğelere kenarlık olarak atayabiliyor, yüksekliklerini belirleyebiliyoruz.

Yukarıdaki örnekte olduğu gibi, CSS’in 3. versiyonu ile istediğimiz bir resmi herhangi bir öğeye kenarlık olarak atayabileceğiz.

Kenar köşelerini ovallaştırma (border-radius)

CSS3 ile gelen muazzam yeniliklerden biri de öğenin kenarlıklarını ovallaştırma özelliği. Bu özellik ile herhangi bir öğenin istediğimiz bir kenarını ovallaştırma şansına sahip olacağız.
Tarayıcımız Firefox, bu özelliğe şimdiden alışmamız için şimdiden kısmen destekliyor bile. Özelliği aşağıdaki gibi kullanmamız mümkün:

Kenarlara birden çok renk atama (border-color)

Aşağıdaki örneği görebilmek için Firefox tarayıcısını indirin!

Gördüğünüz gibi, CSS3′ün farklı ve pek yararlı bir özelliği de, örneğin 8 piksellik bir kenarın her pikseline istediğimiz rengi verebilmemiz. Bu özelliğin yardımıyla rengarenk kenarlar oluşturabileceğiniz gibi, rengi pikselden piksele açarak artalan efektli kenarlar oluşturabilirsiniz.
Tarayıcımız Firefox ile bu özelliği aşağıdaki kullanım şekliyle şimdiden kullanmanız mümkün;

Arkaplan boyutunu belirleme (Background-size)

CSS3 ile gelen yenilikler tabii ki sadece kenarlık cephesinde değil. Yeni ve yararlı özelliklerden bir diğeri ise arkaplan boyutunun belirlenebilmesi.
Bu yararlı özelliğin yardımı ile, örneğin 100×100 piksel boyutlarındaki bir resmi, 50×50 pixel boyutlarında arkaplan olarak atamanız mümkün olacak.
Kullanabilmek için biraz beklememiz gerekecek olan özelliği ileriki zamanlarda şu şekilde kullanacağız;

Birden fazla arkaplan

Bu pek güzel özellik ile, herhangi bir öğeye birden fazla arkaplan öğesi ekleyebilme şansına sahip olacağız. Arkaplanları ise arada virgül (,) kullanarak belirleyeceğiz.

Renk opaklığını belirleme (Opacity)

Diğer bir muazzam özellik ise, herhangi bir öğeye atadığımız rengin transparanlık oranını belirleyebilmemiz.

Özelliğin yardımıyla, herhangi bir grafik işleme programında bolca kullandığımız ‘Alpha’ veya ‘Transparency’ özelliğini CSS üzerinden istediğimiz öğeye atayabileceğiz.

Metinleri birden fazla sütuna paylaştırma

Bu muazzam özelliğin yardımıyla, herhangi bir metni birden fazla sütuna paylaştırabileceğiz.
Aşağıdaki örneği görebilmek için Firefox tarayıcısını indirin!

Yukarıdaki örnek kodlarda dikkatinizi çekmiş olan ‘-moz-column-gap’ ile sütunların arasındaki boşluğun genişliğini belirliyoruz.
3. versiyon CSS’in getireceği bazı güzelliklerden bahsettik. Bu özelliklerin ne zaman gelecekleri ve tarayıcıların (özellikle Internet Explorer’ın) ne zaman tam olarak destekleneceğini tam olarak bilemesek de, geldikleri zaman işe yarayacak olan özellikler olacaklarını görmüş olduk.

Alıntı: http://www.muhammetsevim.com/yazi/css3-ve-guzellikleri/

Bu Yazıyı Paylaşın

işte onun nasıl yapıldığını göstereceğim şimdi.

<style type="text/css" media="screen"> a, a:active, a:hover, a:visited { background: transparent url(link_img.gif) no-repeat top right; cursor: pointer; padding-right: 12px; } </style>

Style kodumuz bu şekilde link_bg.gif adında resmimiz bulunmaktadır elimizde. bunu üst ve sağa dayalı yapıyoruz. padding-right:12px ilede linkimizin sonuna 12px lik boşluk ekliyoruzki bu bize resim için 12px yer açacaktır. Bu şekilde her linkte link_bg.gif resmini gösterecektir. Bunu özel class şeklindede kullanarak istediğimiz linklere verebiliriz. isteyenler için link_bg.gif. Teşekkürler.

Bu Yazıyı Paylaşın

IE de bazı CSS kodları henüz işlev görmediği için HTML tagları içine şu kodlar ile farklı css’ler kullanabiliriz IE kullanılıyorsa

<!--[if IE]>
<link rel="stylesheet" xhref="ie-icin.css" mce_href="ie-icin.css" />
<![endif]-->

şeklinde kullanabiliriz.

Bu Yazıyı Paylaşın

<p style="display: none;"><input alt="Spam me" name="Send" class="send-btn" type="submit" value="Spam me" id="Send" xsrc="/img/btn.gif" mce_src="/img/btn.gif" /></p> <p><input alt="Spam me" name="Send" class="send-btn" type="image" id="Send" xsrc="/img/btn.gif" mce_src="/img/btn.gif" tabindex="5" /></p>

Burada kullanılan /img/btn.gif resmi direk üstteki 2 butonun resmi olan resimdir.

input.send-btn { width: 130px; height: 25px; background: #333 url(/img/btn-send.gif) no-repeat; outline: none; } input.send-btn:hover { background: #666 url(/img/btn-send.gif) no-repeat 0 -25px; }

CSS kodlarını bu şekilde derliyoruz ve

input.send-btn:hover

Buradaki hover kısmında no-repeat 0-25px demek resmimizi alttan -25 aralığından sonra görüntülenmesini sağlamaktadır. Buda bizim resmimizde görünen alttaki bölümdür. Şimdi diyeceksiniz ki buna ne gerek var 2 farklı resim kullanabilirdik?Tabiki kullanabilirdik ama tek dosya ve kb cinsinden tasarruf ve hızlı sayfa izlenimleri yaratmaktir. Teşekkürler

Bu Yazıyı Paylaşın

<style>

a.bolum1
{ font:Arial; font-size:10px; color:#74A8F5; text-decoration: none; }

a.bolum1:hover
{ font:Arial; font-size:10px; color:#86C32A; text-decoration: underline; }

a.bolum2
{ font:Verdana; font-size:14px; color:#000000;
text-decoration: none; bgcolor:#74A8F5; } a.bolum2:hover{ font:Arial; font-size:10px; color:#FF6600; text-decoration: underline; } </style>Kullanim sekilleri:

<a xhref=”http://www.csspage.com/#” mce_href=”http://www.csspage.com/#” class=”bolum1″>Deneme1</a>

<a xhref=”http://www.csspage.com/#” mce_href=”http://www.csspage.com/#” class=”bolum2″>Deneme2</a>

Görünümü:

Bu Yazıyı Paylaşın

Tuşlar ve butonlar için her zamanki gibi style yazacağız nasıl mı ?

İste böyle

input {
border: 1px solid #000000;
background-image:url(inputbg.png);
height:20px;
font-family: Arial;
font-size: 10pt; }

textarea {
background-color:#FFFFFF;
background-image:url(textareabg.png);
background-repeat:repeat-x;
border: 1px solid #3399FF;
font-family: Arial;
font-size: 10pt; }

Şimdi buradakiler nelerdir ?

border:1px solid #000000 <= Kenarlığını 1px yapıyor ve rengini Siyah

background-image:url(inputbg.png); <= Nesnenin arkaplanını inputbg.png yapıyor.

height:20px; <= Nesnemize yükseklik veriyoruz.

font-family: Arial; font-size: 10pt; <= Font ayarları

background-repeat:repeat-x; <= En önemlisi burada budur. Bu özellik arka plana koyduğumuz resmin tekrarlanmasını sağlayan özelligin nasıl kullanılacağını söyler. Yani repeat tekrarlanma özelliği X eksenine göre olacaktır. Aşağı doğru tekrarlanmasın soldan sağa tekrarlansın anlamındadır.

Örnek olarak da :

Teşekkürler.

Bu Yazıyı Paylaşın

.style1 { margin:10px 10px 10px 10px; } .style2 { padding:5px 5px 5px 5px; }

Arasındaki farklar nelerdir. Resimlerle örneklemek daha mantıklı olur değil mi style1 de nesnenin dışına 10px 10px 10px 10px uyguladi. style2 de ise nesnemizin içine padding işlemini uyguladı. Buradaki 10px 10px 10px 10px nedir diyen vardır ? 4 boyuttan olusmaktadir.

Üst uzunluk Sağ Uzunluk Alt Uzunluk Sol Uzunluk şeklindedir.

Not: Nesnemiz ssssss yazan beyaz tablodur.

Bu Yazıyı Paylaşın