CSS

Cascading Style Sheets (Basamaklı Stil Şablonları ya da Basamaklı Biçim Sayfaları, bilinen kısa adıyla CSS), HTML'e ek olarak metin ve format biçimlendirme alanında fazladan olanaklar sunan bir işaretleme dilidir.

İnternet sayfaları için genelgeçer şablonlar hazırlama olanağı verdiği gibi, bağımsız olarak harflerin stilini, yani renk, yazı tipi, büyüklük gibi özelliklerini değiştirmek için de kullanılabilir. Bu tekniğin en önemli özelliği kullanımındaki esnekliktir.

Bir Web sayfası içerisinde birbiriyle uyumlu birkaç renk ve birkaç yazı tip kullanılır ve bunları her sayfada ayrı ayrı tekrar belirtmek yerine CSS yardımıyla bir sefer tanımlayıp bütün Web sayfalarında ortak olarak kullanılabilir. Böylece sayfaların hafızadaki boyutu epey küçüldüğü gibi güncelleme yapmak da kolaylaşır.

CSS kodları, HTML kodlarının içine yazılabildiği gibi harici bir CSS dosyası oluşturularak da işlem yaptırılabilir. Türüne göre

<BODY> veya <HEAD> bölümlerinde yer alabilirler. Ayrıca <link rel="stylesheet" type="text/css" href="style.css" /> koduyla CSS dosyası çalışma sayfasına eklenebilir. Onları ayrı dosyada veya dosyalarda saklamak, onları değişik HTML sayfalarınca kullanılmasını sağlar, aynı sayfanın değişik aygıtlara göre formatlandırılmasını kolaylaştırır, sunumla yapıyı ayırarak değişiklik yapılmasını ekonomikleştirir.

Kaynak: CSS Wiki

İnline CSS

İnline css etiketin içine style özelliği ekenerek kullanılır. Örneği yukarıda ve bu cümlenin kaynak kodunda

Genelde tek bir yerde değişiklik yapmak için veya planlanan değişikliği bir yerde denemek için kullanılır

İnternal CSS

head etiketinin içinde style etiketi açılarak CSS kuralları ile yazılır.

etiket_adı {} şeklinde yazılır. Örnek kaynak kodunda

Yapılan işlem bütün sayfayı etkiler

Eksternal CSS

lokal veya online CSS dosyasını kullanır

head etiketi içinde link verilerek kullanılır. Örnek kaynak kodunda

link ile bağlanan bütün html dosyalarını etkiler

CSS Seçiciler

özellik atanacak html etiketinin seçilmesini sağlarlar

Tam liste: css_selectors

css-tricks.com|selectors

Genel seçici: *

tüm etiketlere CSS uygular

Element Seçiciler

İlgili etikete özellik uygular

Sınıf seçiciler: .sınıf

İlgili sınıfa etiket uygular

iki veya daha fazla sınıfın kesişimine özellik atamak

sınıflar yazılırken aralarında boşluk olmadan yazılırsa (.sinif1.sınıf2) aynı anda iki sınıfı da alan etikete ek özellik kazandırır.
Sınıflar aralarında boşluk ile yazılırsa (.sınıf1 .sınıf2) alt etiket ilişkisinde olan durumlarda, kesişim olduğunda ek özellik kazanırlar
Boşluk ile ayrıldığı durumda hiyerarşide sıralama önemlidir (ilk etikete .sinif1 alt etikete .sinif2 gelmeli).

Id seçici: #

Tek bir etikete atanmış eşsiz elemente özellik atamaya yarar.

Özellik Seçici [ozellik_adi]

Belirli bir özellik atanmış elemente CSS uygular. Özelliğin içi boş olsa, özellik adı anlamsız olsa da da farketmez

.sinif_adi[ozellik_adi]

sinif_adi classında ozellik_adi içeren etikete CSS uygular

etiket[ozellik_adi="ozellik"]

ozellik_adi özelliği ozellik olan etikete CSS uygular

etiket[ozellik_adi~=ozellik]

ozellik_adi özelliğinde ozellik bulunan etikete CSS uygular

etiket[ozellik_adi^=ozellik]

ozellik_adi özelliği ozellik ile başlayan etikete CSS uygular

etiket[ozellik_adi$=ozellik]

ozellik_adi özelliği ozellik ile biten etikete CSS uygular

Grup seçiciler

birden fazla etikete aynı CSS uygulanaksa virgül ile ayırıp yan yana yazabiliriz

Bir sınıfa ait bir etiket grubuna ulaşmak için etiket.sinif_adi kalıbını kullanabiliriz

Çocuk seçiciler

Hiyerarşideki yerine göre HTML seçmek için kullanılır.

Örneği yukarıda h3>b{color: red} olarak CSS içine yazıldı

Torun-Soy Seçiciler

Bir kapsayıcı etiket içinde başka bir etiket grubununun tamamını seçmek için etiketler aralarında boşluk ile yazılır ((div p)div içindeki tüm p ler)

Genel kardeş seçiciler

Aynı seviyedeki bir etiketten sonra gelen diğer etiketi seçmek için arasına ~ eklenir (etiket1~etiket2)

etiket2, etiket1 den sonra gelmeli ve aynı etiketin içinde aynı hiyerarşik seviyede olmalı. Araya başka etiketler girebilir

Bitişik Kardeş Seçiciler

Aynı seviyedeki bir etiketten sonra bitişikteki diğer etiketi seçmek için arasına + eklenir (etiket1+etiket2)

Sahte Sınıf Seçiciler

selector:psedo_class

:link

Daha önce açılmamış linke CSS uygulanır

:hover

Seçici ile işaretlenen etiketin üzerine mouse ile gelindiğinde CSS uygalanır ve mouse üzerinde değilken etki kaybolur.

:active

Mouse ile tıklandığında CSS uygulanır. Tıklama kaldırıldığında etki kaybolur.

:first-child

İlk child etikete CSS uygulanır.

:last-child

Son child etikete CSS uygular.

::first-letter

Blok seviyesinde bir etiketteki ilk harfe CSS uygular. span blok seviyesinde bir etiket olmadığından bu pseudo class uygulanamaz."

::first-line

Blok seviyesinde bir etiketin
ilk satırına
CSS uygular.

::before

Belirtilen etiketin önüne CSS uygular.
Genelde metin eklemek için kullanılır

::after

Belirtilen etiketin sonuna CSS uygular. Kullanımı ::before ile aynıdır.

Kutu elementleri

margin

kutular arası mesafe

padding

Kutu sınırının içeriğe mesafesi

Width ve Heigt

width: genişlik height: yükseklik

Örnek:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates quam repellat maiores corporis totam tempora saepe ut quo omnis, labore dolores iste dolorem odio. Id dolore nemo exercitationem dolorem dicta!

Lorem ipsum dolor sit amet.

Left Bar

Lorem.
Odio.
Amet!
Facere!
Iusto.
Ab.
Ipsam!
Ratione.
Maxime.
Earum?

Content

Lorem ipsum dolor sit.

Lorem, ipsum.