CSS eğitim seti

dangerousvirus · 7 Kas 2018

CSS Nedir?

CSS açılımı Cascading Style Sheets.
Türkçe'de Basamaklı Stil Sayfası olarak da diye biliriz.
HTML dosyamızın daha anlaşılır olmasını sağlar. Stillerimiz tek bir dosyada toplanır ve kolaylıkla okunur ve değiştirilir.
CSS dosyasının uzantısı .css olarak kullanılır.(Harici stil dosyası için)

CSS programlama dili değildir!

CSS dört'e ayrılır;

Satıriçi Stil (Inline style)
Dahili Stil Sayfası (Internal style sheet)
Harici Stil Sayfası (External style sheet)
İçe Aktarılan Stil Sayfası (Imported style sheet)

CSS söz dizimi
Seçici(Selector) Seçici, bir stilin uygulanacağı bir HTML etiketi ifade eder. Bu, <h1> veya <p> gibi herhangi bir etiket olabilir.
Özellik(Property) HTML etiketinin nitelik özelliğidir. Basitçe söylemek gerekirse, tüm HTML öznitelikleri CSS özelliklerine dönüştürülür. Örneğin genişlik, renk, font gibi
Değer Değerler Özelliklere atanır. Örneğin, renk özelliği, kırmızı veya #FF0000 Değerlere sahip olabilir .

Satıriçi Stil (Inline style)
Stil kurallarını tanımlamak için herhangi bir HTML öğesinin style niteliğini kullanabilirsiniz. Bu kurallar yalnızca o öğeye uygulanır.

CSS her zaman ( ile biter

Kod:

p{
color: red;
text-align: center;
}

CSS yorum satırı /*........*/ olarak kullanılır.

Kod:

<!DOCTYPE html>
<html>
  <head>
    <title>Başlık yazılacak alan</title>
    <**** charset="utf-8"> <!--Türkçe karakteri tanımlama etiketi-->
  </head>
  <body>
 
    <p [COLOR="sandybrown"]style[/COLOR]="padding-left : 20px; font-size : 18px; color : brown;">Bu bir paragraftır.</p>

</body>
</html>

Tek bir öğe için benzersiz bir stil uygulamak için satır içi stil kullanılabilir. Ancak satıriçi kullanımı, CSS in sunduğu tüm avantajları neredeyse ortadan kaldırmak anlamına gelir. Muhtemelen aynı kodu tekrar tekrar yazmanızı gerektirecek durumlar ortaya çıkarabilir. Ayrıca kodunuzu okumayı zorlaştıracaktır. Bu açıdan değerlendirildiğinde kullanımı pek tavsiye edilmez!

Dahili Stil Sayfası (Internal style sheet)
<head>...</head> etiketinin arasına *********..</style> etiketi ekleyerek kullanılır.

Kod:

<!DOCTYPE html>
<html>
  <head>
    <title>Başlık yazılacak alan</title>
    <**** charset="utf-8">
    <'--style etiketi-->
    *********
      body {
         background-color: aqua;
      }
      h1 {
         color: maroon;
         margin-left: 40px;
      } 
    </style>
  </head>
  <body>
 
    <h1>Dahili Stil Sayfası</h1>
    <p>Bu bir paragraftır.</p>
 
</body>
</html>

Harici Stil Sayfası (External Style Sheet)
<head>...</head> etiketinin arasına <link> etiketi koyarak çalışır. (dosyayı dışarıdan alacağımız için dışardaki dosyanın uzantısı .css)

Kod:

<!DOCTYPE html>
<html>
   <head>
      <title>...<title>
      <link type="text/css" rel="stylesheet"  href="stil.css"> <!--burada kullanıldı-->
   </head>
   <body>
   
   <body>
</html>

İçe Aktarılan Stil Sayfası (Imported style sheet)
İçe aktarılan CSS ile bir CSS dosyasındaki kuralları, başka bir CSS dosyasındaki kurallarla birleştirebiliriz. Bunu yapmak için, stil sayfamızda [COLOR="black" [USER=106268]imp[/USER]ort[/COLOR] anahtar kelimesini kullanıyoruz . [COLOR="Black" [USER=106268]imp[/USER]ort[/COLOR], harici bir stil sayfasını <link> öğesine benzer şekilde içe aktarmak için kullanılır. [COLOR="black"][B import url ("stil.css") media-types;[/B][/COLOR] Bu satır CSS dosyasına herhangi bir kural bildiriminden önce en üste eklenmelidir.

stil1.css

Kod:

h1 {
   text-decoration: underline;
}
p {
   padding-left: 25px;
   font-size: 17px;
}

stil2.css

Kod:


 [USER=106268]imp[/USER]ort url("stil1.css");
h2 {
   color: #FF0000;
}

ID ve Class seçimi
HTML elementleri için stiller belirleyebildiğiniz gibi size özel stiller belirleyip elementlerin "id" ve "class" özelliklerinde bu stili belirterek de kullanabilirsiniz. (aralarındaki fark .class kullandığımızda birden fazla kez tanımlayabiliyoruz. Ama #id kullandığımızda sadece bir kez tanımlayabiliyoruz.)

Class Kullanımı

Kod:

<div class="stil">Türk Hack Team</div>

Yukarıdaki div elementi içinde yer alan class="stil", o div elementi için CSS özellikleri belirtmemizi sağlayan bir yoldur.

Kod:

.stil {
      font: 25px Tahoma, Verdana;
      color: darkblue;
   }

Class yazarken önüne (.) simgesi konulur.

Yararları;

Bir stili birden fazla elementte kullanabilmek.
Stillere CSS de yer verip HTML kodlarımızı sürekli tekrarlanan uzun CSS kodlarından arındırmak.

ID kullanımı

Kod:

<div id="stil">Türk Hack Team</div>

CSS'de kullanımı;

Kod:

#stil {
      font: 25pt Tahoma, Verdana;
      color: darkblue;
   }

id kullanımında başına (#) işareti koyunuz.

CSS arkaplan
background-color:......; (arkaplanın rengini belirler
background-image:......; (arka görüntü)
background-repeat:......; (arkaplan resminin tekrarlama durumunu belirleme)
background-attachment:......; (arkaplan resminin sabit ya da yüzer durumunu belirleme)
background-position:......; (arkaplanın pozisyonu)
background:......; (arkaplan)

CSS'de Renk İfadeleri
CSS dosyamızda yer yer renkleri belirtmemiz gerekebilir. Bunun için çeşitli yollar var. Bunlardan en çok kullanılan üç tanesi:

Onaltılık (Hex) Renkler
RGB (Kırmızı, Yeşil, Mavi) Renkler
Tarayıcı Renk İsimleri

Onaltılık (Hex) Renkler #000000 şeklinde önce diyez sonra 6 adet 0-9 ve A-F değerleri alabilen sembollerden oluşur. Örneğin #393939 bir rengi ifade etmektedir.

RGB (Kırmızı, Yeşil, Mavi) Renkler Bir renk oluştururken kırmızı, yeşil ve mavinin tonlarını belirterek renk oluşturmamızı sağlar. Örneğin rgb( 0, 0, 0 ) siyah rengi belirtir. (kısacası red(kırmızı) green(yeşil) blue(mavi) renklerden yararlanılır.)

Tarayıcı Renk İsimleri: İngilizce olarak belirlenmiş bazı renk adlarını yazarak renk elde edebilirsiniz. Örneğin white beyaz, black siyah, blue mavi rengini verecektir.

CSS yazılar

color
text-align
text-decoration
text-transform
text-indent

CSS yazı tipleri

font-family
font-size
font-style
font-weight

CSS bağlantılar

a:link - Normal link görünüşü
a:visited - Ziyaret edilmiş siteye giden link görünümü
a:hover - Fare ile üzerine gelindiğindeki görünüş
a:active - Tıklanılan andaki görüntüsü

Kod:

a:link {color:#FF0000;}      /* ziyaret edilmemiş */
a:visited {color:#00FF00;}  /* ziyaret edilmiş */
a:hover {color:#FF00FF;}  /* fare üzerindeyken */
a:active {color:#0000FF;}  /* aktifken */

a:hover her zaman a:link ve a:visited den sonra gelmeli.
a:active her zaman a:hover dan sonra gelmeli.

CSS listemele

list-style-type
list-style-image
list-style-position

CSS tablolar

border: Kenarlık
border-collapse: Kenarlıkları Kaldır
width/height: Tablo Genişliği ve Yüksekliği

Tablo Şekillendirme Komutları

text-align: Tablo içindeki yazıların hizasını belirlersiniz.
padding: Tablo içinden belirtilen değerde boşluk verdirir.
background-color: Arkaplan rengini belirtir.
color: Yazı rengini belirtir.

CSS kutu modeli

Margin - Kenarlığın çevresinde verilen boşluk.
Border - Kenarlık
Padding - Kenarlık ile içerik arasındaki boşluk. Arkaplan rengine boyanır.
Content (İçerik)

Border

border-style
border-width
border-color

border-style: Kenarlık Stili
none - Kenarlık yok
dotted - Noktalı
dashed - Kesik çizgili
(border-style:....; kullanabilirsiniz.)

İleri CSS sonra paylaşacağım...
Eksik gördüğünüz, beğenmediğiniz şeyler varsa bana bildirirseniz sevinirim

İyi Çalışmalar Dilerim!

ByCyberx · 7 Kas 2018

eline sağlık ama görsel kullansaydın daha iyi olurdu

reloadcryz · 7 Kas 2018

ByCyberx' Alıntı:
eline sağlık ama görsel kullansaydın daha iyi olurdu

Katılıyorum. Eline sağlık üstad

CSS eğitim seti

dangerousvirus

Yeni üye

ByCyberx

Üye

reloadcryz

Katılımcı Üye

Sosyal medya sayfalarımız