Css Giriş Notları

unknown1923

Katılımcı Üye
15 Şub 2021
339
57
Türkiye

CSS GİRİŞ:

Html içinde css kullanmak istiyorsak;

<style></style> kodları içinde başka sayfa oluşturmadan kullana biliriz.

Lakin uzun kodlar yazdığımızda kafa karıştırıcı olabilmektedir.Bu yüzden başka bir css sayfası açıp html sayfamıza enjekte etmemiz lazım.Nasıl mı?
<link href="dosya adı.css" type="text/css" rel="stylesheet"/>

Dosya adı yazan yere dosyanın adı ve .css koyarak html sayfanızın <head> </head> bölümüne ekleye bilirsiniz. Not eklemek içinde /* notunuzu yazın o kodda neler yaptığınızı kimse göremez */


ID ve CLASS atama

CSS DE/ID /VE /CLASS /ATAMA
İlk önce ıd ve class ne işe yarar? Id ve class ile bir html sayfasında kullanırken verilen değer içinde ki kodların şekillenmesi için kullanırız.Mesela bir üye giriş sistemi yaptığımızı varsayalım.Lakin bu üye giriş sisteminin şekillenmesi lazım.Üye giriş sistemini boyutunu ,hizasını ayarlamak için kullanıyoruz.Gelin şimdi nasıl yapacağımızı anlatayım.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* ıd tanımlarken # işareti ve ıd adını yazınız*/ /*Burada ahmet ıd sine kırmızı rengini verdik isteğe bağlı red yazan yere blue vb. renklerin ingilizce olarak adını yazabilirsiniz.*/
#ahmet{
color: red;
}
</style>
</head>
<body>
<h1 id="ahmet">AHMET</h1>
</body>
CLASS ATMA


*******************************************************
Peki şimdi de class nasıl atarız bunu anlatayım.İlk önce <div></div> etiketleri açıyoruz ve <div class=”CLASSA VERMEK İSTEDİĞİN İSİM”> bu şekilde div etiketleri arasına ne yazarsanız css de ne yaptıysanız aynısı olur.

************************************************
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* Class atarken de .classın ismi şeklide başında nokta ile yapabilirsiniz*/
.ali{
color: red;
}
</style>
</head>
<body>
<div class="ali">
<h1>ALİ</h1>
</div>
</body>
</html>





ID VE CLASS ATAMADAN ATAMA
Şimdi de ıd ve class atamadan yapalım.Lakin sayfada verdiğiniz o etiketlerin hepsi o etikete verdiğiniz css değerinin aynısı şeklinde çalışır.Mesela <h1>etiketini css değer olarak verdiğinizde o sayfada verdiğiniz h1 etiketlerinin hepsi aynı değeri alır.Bu yöntem pek kullanılmaz.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
h1{
color: blue;
}


</style>

</head>
<body>

<h1>ahmet</h1>

</body>
</html>




************************************************************
Şimdi ise birden fazla etiketi bir kodda kullanmayı gösterelim.Mesela aynı değerleri o etiket içinde vermek istiyorsan fazla kod yazmak yerine bu kodları kullanarak fazla kod yazmaktan kurtula bilirsiniz.
Diyelim ki <h1> ve <b> etiketlerine aynı kodu yazmak istiyorsun.Yapılacak şey çok basit.

h1 , b{
color:blue;
}

Şeklinde basitçe kullana bilirisiniz.

BÜTÜN SAYFADA UYGULAMA
***************************************************************

Yada bütün sayfada kullanmak istiyorsunuz sadece CSS3 ile gelen bir özellik olan bu kodun kullanımı şöyle;
*{
color:red
}
Bu şekilde bütün sayfaya istediğin kodu uygulaya bilirsiniz.Burada ben bütün sayfaya kırmızı rengini verdim.
 
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.