Css Nedir?
Bir sitesi yapmak için en az 3 dil bilmemiz gerekmektedir. Bunlar HTML, PHP ve CSS diye 3'e ayrılır. Css sitenin görünümünde, renklendirilmesinde kullanılır. Css kodları sayesinde web sitemizi ziyaret eden birinin ekranda sadece yazıları ve linkleri görmesi yerine tablolardan ve butonlardan oluşan, renklendirilmiş, görününümü iyileştirilmiş bir web sitesi görmenizi sağlar. Özellikle herkesin bildiği tema çeşitliliğinde kullanılır.
Css nedir daha iyi anlamanız için örnek üzerinden anlatacağım. Örnek olarak Site sahibi, ziyaretçilerine Klasik tema ve modern tema olarak iki seçenek sunuyor. Klasik site görünümünü sevenler için sade ve basit bir tema var. Modern site görünümünü sevenler için ise daha çok göz kamaştırmayan materyal renkleri, bunun yanında basit olduğu kadar şık görünümlü tema var. Siz hangi temayı seçecek olursanız, ekranda ona göre css kodları yüklenecektir.
Css kullanım şekilleri
Css kodları html kodlarının içinde, style etiketlerinin arasında yazılabilmektedir. css kodlarını kullanırken de etiketlerin içine class elementi ile kullanmalıyız. Örnek olarak şu şekilde yazılmalıdır.
Ayrıca illaha ki style etiketi arasında yazmamız gerekmiyor. Bunun yerine isterseniz başka dosyadan html içine kodları çekebilirsiniz. Bunun için ilk önce txt uzantılı bir text dosyası açıp .txt kısmını .css olarak değiştiriniz. En son olarak dosya adı "Style.css" olarak gözükmelidir. Css dosyamızı oluşturduğuma göre şimdi dosyayı açıp css kodlarını eklemek geldi. Şimdi bunu örnek ile daha iyi anlayacaksınız.
Şimdi bu style.css dosyasını kaydedelim ve html dosyamızı açalım.
Gördüğünüz gibi link etiketi ile css dosyamızı çağırdık ve oluşturduğumuz css'i class elementi ile etiket arasına yazdık.
Bir diğer css kullanım şekli ise dosya açmadan, style etiketleri arasına yazmaya gerek olmadan kullanılmaktadır. Tabi bu kullanım şeklini sadece küçük html çalışmalarında kullanmanızı tavsiye ederim. Büyük çalışmalarınızda bu kullanım şekli, sorgu sayısını artıracağı için site yavaş açılacaktır. Şimdi başlayalım.
Gördüğünüz gibi style elementi olarak da kullanılabilmektedir.
Biz bir div oluşturup bu divi hareket ettirmek istediğimiz zaman diğer kutuları görerek hareket eder. Yani kutular birbirinin içine girmez. Bunların iç içe geçmesi için de bir özelliğimiz mevcut.
Position özelliği;
Positionu relative yaparsak kutuları görür. Yani iç içe geçmezler. Absoluta yaparsak diğer kutulardan bağımsı hareket eder. Fixed yapar ise kutular sabitlenir.
Bir sitesi yapmak için en az 3 dil bilmemiz gerekmektedir. Bunlar HTML, PHP ve CSS diye 3'e ayrılır. Css sitenin görünümünde, renklendirilmesinde kullanılır. Css kodları sayesinde web sitemizi ziyaret eden birinin ekranda sadece yazıları ve linkleri görmesi yerine tablolardan ve butonlardan oluşan, renklendirilmiş, görününümü iyileştirilmiş bir web sitesi görmenizi sağlar. Özellikle herkesin bildiği tema çeşitliliğinde kullanılır.
Css nedir daha iyi anlamanız için örnek üzerinden anlatacağım. Örnek olarak Site sahibi, ziyaretçilerine Klasik tema ve modern tema olarak iki seçenek sunuyor. Klasik site görünümünü sevenler için sade ve basit bir tema var. Modern site görünümünü sevenler için ise daha çok göz kamaştırmayan materyal renkleri, bunun yanında basit olduğu kadar şık görünümlü tema var. Siz hangi temayı seçecek olursanız, ekranda ona göre css kodları yüklenecektir.
Css kullanım şekilleri
Css kodları html kodlarının içinde, style etiketlerinin arasında yazılabilmektedir. css kodlarını kullanırken de etiketlerin içine class elementi ile kullanmalıyız. Örnek olarak şu şekilde yazılmalıdır.
Kod:
<html>
<head>
<sty le> //sansürlendiği için ayrı yazdım
.renkliyazi{
color:red;
background-color: yellow;
}
</style>
</head>
<body>
<p class=".renkliyazi"> [URL="https://turkhackteam.org/net"]turkhackteam.org/net[/URL]</p>
</html>Ayrıca illaha ki style etiketi arasında yazmamız gerekmiyor. Bunun yerine isterseniz başka dosyadan html içine kodları çekebilirsiniz. Bunun için ilk önce txt uzantılı bir text dosyası açıp .txt kısmını .css olarak değiştiriniz. En son olarak dosya adı "Style.css" olarak gözükmelidir. Css dosyamızı oluşturduğuma göre şimdi dosyayı açıp css kodlarını eklemek geldi. Şimdi bunu örnek ile daha iyi anlayacaksınız.
Kod:
.thtcyberx{
color:blue;
border: 2px;
}
Kod:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p class="thtcyberx">selam turkiye</p>
</html>Gördüğünüz gibi link etiketi ile css dosyamızı çağırdık ve oluşturduğumuz css'i class elementi ile etiket arasına yazdık.
Bir diğer css kullanım şekli ise dosya açmadan, style etiketleri arasına yazmaya gerek olmadan kullanılmaktadır. Tabi bu kullanım şeklini sadece küçük html çalışmalarında kullanmanızı tavsiye ederim. Büyük çalışmalarınızda bu kullanım şekli, sorgu sayısını artıracağı için site yavaş açılacaktır. Şimdi başlayalım.
Kod:
<h1 style="color:pink;text-align:center;">THT Deneme CyberXhackk</h1>Gördüğünüz gibi style elementi olarak da kullanılabilmektedir.
Biz bir div oluşturup bu divi hareket ettirmek istediğimiz zaman diğer kutuları görerek hareket eder. Yani kutular birbirinin içine girmez. Bunların iç içe geçmesi için de bir özelliğimiz mevcut.
Position özelliği;
Positionu relative yaparsak kutuları görür. Yani iç içe geçmezler. Absoluta yaparsak diğer kutulardan bağımsı hareket eder. Fixed yapar ise kutular sabitlenir.
Son düzenleme:
)
