CSS NEDİR? ÖRNEK CSS PROGRAM KODLARI
1-CSS NEDİR?
Bu makalemizde basit css örnekleri, css kodları, css örnekleri ve kodları, html içinde css kullanımı, css örnek siteler gibi konuları ele alacağız.
HTML bize metin biçimlendirme alanında çok geniş
olanaklar sunar. CSS, uzun yazılışıyla Cascading Style Sheets, veya Türkçesiyle
Stil şablonları ise bunu bir adım daha öteye götürür, bize sayfalarımız için global
şablonlar hazırlama olanağı verdiği gibi, tek bir harfin stilini; yani renk, font,
büyüklük gibi özelliklerini değiştirmek için de kullanılabilir. Bu tekniğin en önemli
özelliği kullanımındaki bu esnekliğidir.
Bir web sayfası içerisinde zaten estetik kuralları gereği yüzlerce renk ve font
kullanmayız. Genelde birbiriyle uyumlu birkaç renk ve birkaç font kullanırız ki,
bunları her sayfada ayrı ayrı tekrar belirtmek yerine CSS yardımıyla bir sefer tanımlayıp
bütün web sayfamızda kullanabiliriz.Bu şekilde güncelleme yaparken de onlarca sayfayı
değiştirmekten kurtuluruz.
CSS kodları HTML kodlarının içine yazılırlar. Türüne göre body veya head bölümlerinde
yer alabilirler. Bunların dışında harici CSS dosyaları oluşturulup bunlar gerektiğinde
HTML belgesi içerisinde çağırılabilirler.
Hemen hemen her konuda olduğu gibi CSS konusunda da Microsoft Internet Explorer
ve Netscape farklı yorumlar ortaya koyarlar. Bu noktada her iki browserın da aynı/benzer
yorumlayacağı kodlar yazmak en uygunudur.
2-BAZI FAYDALI CSS KODLARI
a-CSS'ye giriş:
HTML KODU:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link
href="StyleSheet.css" rel="stylesheet" type="text/css" />
<title>Untitled
Page</title>
</head>
<body>
<form
id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<h1>mehmet yarluğkal</h1>
<h1>yaşar yarluğkal</h1>
<h1>hayri yarluğkal</h1>
<h1 class="kişiler">mehmet yarluğkal</h1>
<h1 class="kişiler">yaşar yarluğkal</h1>
<h1 class="kişiler">hayri yarluğkal</h1>
<h1 id="kişi1">mehmet yarluğkal</h1>
<h1 id="kişi2">yaşar yarluğkal</h1>
<h1 id="kişi3">hayri yarluğkal</h1>
<p id="kişi1">hayri yarluğkal</p>
</div>
</form>
</body>
</html>
CSS KODU:
body /*bu özellik de sayfanın gövdesini etkileyecek türden değişiklikler yapılırken kullanılır*/
{
background-color:Yellow;
}
h1 /*css de defaultta yazdığımız kodlara buradan mesela h1 tagını kullanarak ve class ismin de n ya da id den ulaşarak gerekli düzenlemeleri yapabiliirz.*/
{
color:Red;
}
.kişiler /*class isimleri kullanılırken başında nokta kullanılara ilgili classlara erişilir*/
{
color:Black;
}
h1#kişi1 /*id ler kullanılırken başında sharp işareti kullanılarak erişim yapılır. ayrıca burada başına h1 yazarsam hem h1 i hem de kişi1 e sahip olanı etkileyecek ama sade #kişi1 yazarsam bütün kişi1 leri etkiler*/
{
color:Blue;
}
b-CSS ile resimli menü yapımı:
HTML KODU:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link
href="StyleSheet.css" rel="stylesheet" type="text/css" />
<title>Untitled
Page</title>
</head>
<body>
<form
id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<ul id="menu">
<li> <a href="Default.aspx"
class="tıkla">Anasayfa</a></li>
<li> <a href="hak.htm">HakkImIzda</a></li>
<li> <a href="ürün.htm">Ürünlerimiz</a></li>
<li> <a href="ilet.htm">İletİşİm</a></li>
</ul>
</div>
</form>
</body>
</html>
CSS KODU:
body {
}
ul#menu
{
list-style-type:none;/*linklerin yanıdaki noktaları atmak için kullanıyoruz*/
padding:0;/*padding ve margin sayesinde yazılarımız sayfanın soluna kayar*/
margin:0;
width:auto;
height:36px;
text-transform:uppercase;/*bu özellkikle yazılan yazılan büyük harfla yazılmış hale gelir*/
font-size:12px;
font-weight:bold;
font-family:Arial Helvetica Sans-Serif;
border-bottom:4px solid #336666;/*içi dolu çizgi oluşturulurken*/
border-top:1px solid #c0e2d4;
background:transparent url(images/açık.gif) repeat-x top left;
}
ul#menu li
{
display:block; /*linklerimizi yatay blok haline getirdi ve sola doğu döşedik float:left ile */
float:left;
}
ul#menu li a
{
color:#874b46;
height:32px;
text-decoration:none;
padding:12px 20px 0;
background:transparent url(images/çizgi.gif) no-repeat top right;
}
ul#menu li a:hover
{
background:transparent url(images/açık.gif) no-repeat top right;
height:32px;
}ul#menu li a.tıkla
{
color:#ffffff;
background:transparent url(images/koyu.gif) no-repeat top right;
}