<html><head><style type=?text/css?>i:first-child{color:blue;}</style></head><body><p>Banadersanlat.com</i>excel dersleri <i>photoshop dersleri</i> css dersleri</p><p>Banadersanlat.com</i>excel dersleri <i>photoshop dersleri</i> css dersleri</p></body></html>
Kategori: CSS Uygulamaları
CSS Position
<html><head><style type=?text/css?>.positionfix{position:fixed;right:30px;top:50px;}.rel{position:relative;top:-50px;}h3{position:absolute;left:100px;top:300px;}</style></head><body><p class=?positionfix?>Paragraf positionfix ile biçimlendirildi</p><h2>Relative kullanıldı</h2><h2 class=?rel?>Relative Uygulandı</h2><h3>Absolute uygulandı</h3></body></html>
CSS Display
<html> <head> <style type=”text/css”> li {display:inline} span {display:block;} </style> </head> <body> <ul> <li><a href=”http://www.banadersanlat.com” target=”_blank”>BDA Anasayfa</a></li> <li>Photoshop Dersleri</li> <li>Excel Dersleri</li> <li>CSS Dersleri</li> </ul> <span>www.banadersanlat.com</span> <span>www.banadersanlat.com</span> <span>www.banadersanlat.com</span> <span>www.banadersanlat.com</span> <span>www.banadersanlat.com</span> <span>www.banadersanlat.com</span> </body> </html>
CSS Border
<html> <head> <style type=”text/css”> p.border { border-style:solid; border-width:medium; border-color:red; } p.borderiki { border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid; } </style> </head> <body> <p class=”border”>Paragrafı border kullanarak biçimlendirdik</p> <p class=”borderiki”>İkinci bir border kullanarak biçimlendirdik</p> </body> </html>
CSS Grup
<html> <head> <style type=”text/css”> h1,h2,p { color:blue; text-align:center; } </style> </head> <body> <h1>CSS Grup Örneği</h1> <h2>CSS Grup </h2> <p>Paragraf</p> </body> </html>
CSS Kutu Modeli
<html> <head> <style type=”text/css”> .kutucuk { width:150px; border:6px solid gray; padding:12px; margin:0px; } </style> </head> <body> <div class=”kutucuk”>CSS Box.</div> </body> </html>
CSS Liste Biçimlendirme
<html> <head> <style type=”text/css”> ul.a {list-style-type:circle;} ul.b {list-style-type:square;} ol.c {list-style-type:upper-roman;} ol.d {list-style-type:lower-alpha;} </style> </head> <body> <p>Unordered kullanarak biçimlendirilen liste</p> <ul class=”a”> <li>Banadersanlat</li> <li>Photoshop Dersleri</li> <li>Excel Dersleri</li> </ul> <ul class=”b”> <li>Php dersleri</li> <li>CSS Dersleri</li> <li>C# Dersleri</li> </ul> <p>Ordered kullanarak biçimlendirdiğim liste</p> <ol class=”c”> <li>Banadersanlat</li> <li>Photoshop Dersleri</li> <li>Excel Dersleri</li> </ol> <ol class=”d”> <li>Php dersleri</li> <li>CSS Dersleri</li> <li>C# […]
CSS Link Biçimlendirme
Merhaba BDA Takipçileri linkin üstüne tıklayınca yönlendirme işlemleri html kullanarak biçimlendirmeyi css ile yapalım <html> <head> <style type=?text/css?> a:link { color:blue; text-decoration:none; background-color:grey; } a:visited { color:black; text-decoration:none; background-color:blue; } a:hover { color:red; text-decoration:underline; background-color:blue; } a:active { color:green; text-decoration:none; background-color:black; } </style> </head> <body> <a href=?http://www.banadersanlat.com? target=?_blank?>BDA</a> </body> </html>
CSS Font Biçimlendirme
<html> <head> <style type=?text/css?> p.normal {font-style:normal;} p.italic {font-style:italic;} p.oblique {font-style:oblique;} h1 {font-size:2.5em;} /* 20px/=3.5em */ h2 {font-size1,600em;} /*25px/=1,600 em */ </style> </head> <body> <p class=?normal?>Normal font uygulandı.</p> <p class=?italic?>İtalic font kullanıldı</p> <p class=?oblique?>Oblique font kullanıldı.</p> <h1>em ölçü birimi kullanalım</h1> <h2>Bu header 30px 1,600 em.</h2> </body> </html>
CSS Text Biçimlendirme
<html> <head> <style type=?text/css?> h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;} .buyukharf {text-transform:uppercase;} .basharfbuyuk {text-transform:capitalize;} .kucukharf {text-transform:lowercase;} </style> </head> <body> <h1>Overline özelliğini kullandığımız yazımız.</h1> <h2>Line-through özelliğini kullandığımız yazımız.</h2> <h3>Underline özelliğini kullandığımız yazımız.</h3> <p class=?buyukharf?>Uppercase özelliğini kullandığımız yazımız.</p> <p class=?basharfbuyuk?>Capitalize özelliğini kullandığımız yazımız.</p> <p class=?kucukharf?>LOWERCASE özelliğini kullandığımız yazımız.</p> </body> </html>