Web Geliştirme - CSS Notları

Sefer Kayar
21 Mayıs 2019 Salı
Kategori: Eğitim Notları

CSS Yazım Biçimi

  • Selector ile CSS'in uygulanacağı etiket seçilir. Yukarıdaki örnekte paragraf etiketi seçilmiştir.
  • Köşeli parantez ile de CSS'in özelliği ve o özelliğin değeri belirtilir.
  • CSS kodları 3 farklı şekilde tanımlanabilir.
    • Internal CSS: <header> etiketi içinde <style></style> etiketi ile tanımlananan CSS söz dizimidir.
    • Inline CSS: herhangi bir etiket içinde style="" niteleyicisi ile tanımlanan CSS söz dizimidir.
    • External CSS: .css uzantılı ayrı bir dosyada yazılarak, bütün sayfalar için uygulanabilen ortak bir css sözdizimidir. HTML sayfası ile css dosyası HMTL sayfasında <header> içinde <link rel="stylesheet" href=""> etiketi ile ilişkilendirilir.
  • Bir HTML sayfası için bu 3 CSS tanımı da bir arada kullanılabilir. Genel tanımlar için External CSS, belirli bir sayfaya özel tanım için Internal CSS, belirli bir etikete özel tanım için Inline CSS tanımlanır. Aynı ayarların olduğu durumda, Internal CSS tanımı etiket içinde olduğu için diğerlerine baskındır. Internal CSS de sayfaya özel olduğu için External CSS'ten baskındır.
  • Bir CSS tanımının diğer tanımlar tarafından ezilmemesi istenildiğinde ilgili CSS değerinin yanına !important yazılır.

CSS Niteleyicileri

  • color: renk niteleyicisi, yazı renginini ayarlar.
  • font-size: yazı boyutunu ayarlar.
  • text-align: yazının sayfadaki hizasını ayarlar. Sağa, sola dayalı veya ortada olabilir.
  • text-decoration: text özelliklerini (altı çizili, üstü çizili vs) ayarlar.
  • display:etiketin blok veya inline özelliği bu niteleyici ile değiştirilebilir.
  • list-style-type:Listelerdeki madde işaretlerinin şeklini ayarlar.
  • word-spacing:Kelimeler arasındaki boşlukları ayarlar.
  • letter-spacing: Harfler arasındaki boşlukları ayarlar.
  • background-color:Arkaplan rengini ayarlar.
  • font-weight:Yazı kalınlığını ayarlar.

ID'ler Class'lar

ID

  • ID'ler etiketlere verilen, sadece bir etiket için kullanılan stil kimliğidir.
  • bir etiketin sadece bir ID si olur, bir ID sadece bir etikette kullanılır.

Class

  • Class'lar ise birden fazla etiket için kullanılabilien, etiketleri gruplayarak stil vermek için kullamnılan tanımlayıcılardır.
  • Bir etikete birden fazla class verilebilir.
  • Class etiket ismi ile tanımlı stile göre daha özeldir, bu nedenle etiket ismi ile tanımlı stili ezer. Etiket stilinin tanımlı olması istenirse, stil değerinden sonra "!important" yazılarak baskın hale getirilir.

Group Selectors

  1. (*): Tüm etikerleri belirtir. Tüm etiketlere ortak özellikler tanımlamak amacıyla kullanılır.
  2. (etiket_ismi): Belirli bir etiketi belirtir. İsmi verilen tüm etiketler için ortak özellikler tanımlar.
  3. (etiket_ismi etiket_ismi): Belirli bir etiket altındaki belirli bütün etiketleri belirtir. Örneğin, <div> altındaki bütün <p> etiketleri belirtilebilir. <p> etiketleri <div> etiketi altındaki başka etiketlerin altında da olabilir.
  4. (class_ismi etiket_ismi): Belirli bir class ismi altındaki belirli bütün etiketleri belirtir.
  5. (etiket_ismi.class_ismi): Belirli bir etiket altındaki belirli bir class ismine sahip bütün etiketleri belirtir.
  6. (etiket_ismi,etiket_ismi): Birden fazla etiketi bir arada belirtir. Virgülle ayrılan belirli tüm etiketleri belirtir.
  7. (etiket_ismi>etiket_ismi):Üzerinde belirli bir etiket bulunan etiketleri belirtir. Örneğin, bir üzerinde <div> etiketi bulunan bütün <p> etiketleri belirtilebilir.
  8. (etiket_ismi~etiket_ismi):Belirli bir etiketten sonra gelen, aynı seviyedeki ismi verilen etiketleri belirtir.
  9. (etiket_ismi+etiket_ismi): Belirti bir etiketten sonra gelen, aynı seviyedeki ismi verilen ilk etiketi belirtir.

Attribute Selectors

  • Bir etiketin içindeki niteleyiciye göre stil belirtilebilir. Niteleyiciyi belirtmek için etiket isminden sonra köşeli parantez [] içinde niteleyici ismi belirtilir. Örneğin p[title] şeklinde.
  • Niteleyicinin değerine göre de belirtme yapılabilir. Örneğin p[title="third paragraph"] şeklinde.
  • İçinde belirli bir kelime bulunan niteleyicileri belirtmek için ~= işareti kullanılır. Örneğin p[title~="third"] şeklinde.
  • Belirli bir kelime ile başlayan niteleyicileri belirtmek için ^= işareti kullanılır. Örneğin http ile başlayan href niteleyicileri için a[href^=http"] şeklinde.
  • Belirli bir kelime ile biten niteleyicileri belirtmek için $= işareti kullanılır. Örneğin com ile biten href niteleyicileri için a[href$=com"] şeklinde.
  • Birden fazla niteleyici, birden fazla köşeli parantez [] ile yan yana yazılarak belirtilir.

Pseudo Selectors

Pseudo Element

  • Bir elemanın bir parçasını (örneğin, bir paragrafın bir kısmını) seçerek stil vermek için kullanılır.
  • Paragrafın ilk satırı: p::first-line
  • Class'ı about olan parafraf etiketinin ilk satırı: p.about::fist-line
  • Paragrafın ilk harfi: p::fist-letter
  • Paragraftan önce: p::before
  • Paragraftan sonra: p::after

Pseudo Class

  • Bir kapsayıcı etiket içindeki etiket kümelerinden birini seçmek için kullanılır.
  • <ul> etiketi içindeki <li> etiketlerinden ilkini seçme: ul li:first-child
  • <ul> etiketi içindeki <li> etiketlerinden sonuncuyu seçme: ul li:lastr-child
  • <ul> etiketi içindeki <li> etiketlerinden tek sayı olanlarını seçme: ul li:nth-of-type(odd)
  • <ul> etiketi içindeki <li> etiketlerinden çift sayı olanlarını seçme: ul li:nth-of-type(even)
  • <a> etiketi için "link, visited, hover, active" pseudo seçicileri tanımlanabilir.
  • hover seçicisi herhangi bir etiket için de kullanılabilir.

CSS Inherit

  • CSS tanımları arasında özelden genele doğru hiyerarşi vardır. External CSS en genel CSS tanımıdır. Inline CSS tanımı ise en özel CSS tanımıdır. En öncelikli tanım Inline CSS dir. Daha sonra Internal CSS, sonra External CSS tir.
  • CSS stiller içinde id'ler class'lardan önceliklidir. Class'lar da etiket stillerinden önceliklidir.
  • CSS stilleri üst elemanlardan alt elemanlara doğru aktarılır. Fakat bazı elemanlar üst elemanlardaki CSS stillerinden etkilenmezler. Örneğin <a> etiketi.
  • Üst stillerden etilenmeyen etiketlerde CSS değeri "inherit" yazılırsa, bir üst elemandan etkilenir hale gelir.
  • Bir CSS tanımının daha özel CSS tanımlarına baskın olması için ilgili CSS değerinin yanına !important yazılır.

Colors (Renkler)

  • www.w3schools.com adresinde renk tablosu ve karşılık gelen renk kodları bulunmaktadır.
  • Renkler isim ile (örneğin, kırmızı, beyaz, mavi gib), hexadecimal kodları ile (örneğin, #727F3A, #B23FC2 gibi) veya RGB kodu ile ile (örneğin, rgb (123,213,012) gibi) belirtilebilir.
  • RGBA kodu ise rengin yanında transparanlığını ayarlar. Örneğin rgba (212,012,123,0.2) gibi
  • Renk kodlarını görmek için tablolar, renk paletleri gibi araçlar kullanılabilir. Bir sitedeki rengin kodunu öğrenmek için, Colorzilla (chrome eklentisi) kullanılabilir.

Floating Images (Resimleri Kaydırma)

  • Bir resmin sağ tarafa veya sol tarafa kaydırılması için "float:" CSS stili kullanılır.
  • float stili bir paragraf içinde kullanıldığında yazılar resmin etrafını çevreler.

Floating Divs (Div'leri Kaydırma

Display

  • display stilinin alabileceği değerler "none, inline, blok, inline-block" dur.
  • display:none olduğunda eleman görünmez.

Positioning

  • position stilinin alabileceği değerler "static, relative, fixed, absolute, sticky" dir.
  • position:relative olduğunda eleman alttan,üstten, sağdan, soldan "top, bottom, left, right" stilleri ile hizalanabilir, kaydırılabilir hale gelir. Relative olduğunda normal akışın dışına çıkmaz, hizalama, kendisinden önce gelen elemanlara göredir.
  • position:absolute olduğunda eleman alttan,üstten, sağdan, soldan "top, bottom, left, right" stilleri ile hizalanabilir, kaydırılabilir hale gelir. Absolute olduğuda normal akışın dışına çıkar, diğer nesnelerle bağlantılı olmaz. Hizalama, sayfanın kenarlarına göre olur.
  • position:fixed olduğunda, sayfa aşağıya veya sağa kaydırıldığında, elaman aynı konumunu korur, görünen bölgede hizasını korur. Mesaj kutularının sayfa kaydırıldığında pencere içinde kalması için kullanılır.
  • position:sticky olduğunda, fixed gibi sayfa kaydırıldırıldığında aynı yerde kalması için kullanılır. Fakat, sayfa kaydırılmadan önce farklı konumda olabilir, kaydırıldıkran sonra girilen değerlerde hizada kalır. Menülerin sayfa kaydırıldığında aynı yerde kalması için kullanılır.

Margin

  • Elemanın dış taraftan diğer elemanlara doğru üstten, sağdan, alttan, soldan uzaklığını ayar.
  • Tek değer verildiğinde, alt, üst, sağ, sol hepsi için aynı değer atanmış olur.
  • İki değer verildiğinde, ilk değer üst, alt; ikinci değer sağ, sol için atanmış olur.
  • Dört değer verildiğinde, sırasıyla (saat yönünde) üst, sağ, alt, sol olarak atanmış olur.
  • Inline elemanlara margin üstten ve alttan etki etmez. Sadece sağdan solden etki eder.
  • margin:auto olduğunda elemanı sağdan ve soldan ortalar.

Padding

  • Elamanın iç taraftan diğer elemanlara doğru üstten, sağdan, alttan, soldan uzaklığını ayar.
  • Tek değer verildiğinde, alt, üst, sağ, sol hepsi için aynı değer atanmış olur.
  • İki değer verildiğinde, ilk değer üst, alt; ikinci değer sağ, sol için atanmış olur.
  • Dört değer verildiğinde, sırasıyla (saat yönünde) üst, sağ, alt, sol olarak atanmış olur.
  • Padding değeri elemanın genişliğine eklenir. Elemanın genişliğ 100 piksel ise 100+padding değeri olur.
  • Inline elemanlara paddding değeri dört bir köşeden etki eder. Ancak nesne (eleman) sağa sola aşağıya kaymaz, olduğu yerde genişler.

Borders (Kenarlıklar)

  • border stiline verilecek 3 değer bulunur. Kenarlığın kalınlığı, kenarlığın tipi ve kenarlığın rengi.
  • Border değerleri ayrı ayrı da verilebilir. border-width: ile kenar kalınlığı, border-style: ile kenarlık tipi, border-color: ile kenarlık rengi verilebilir.
  • Her bir kenara ayrı değerler verilebilir. Örneğin, border-top-width: ile üst kenar kalınlığı ayarlanabilir.
  • border-radius: stili ile köşelerin yuvarlaklığı ayarlanabilir. border-radius:50% değeri verildiğinde kutu, bir daireye dönüşür.
  • border-radius: stili de her köşeye ayrı ayrı uygulanabilir.

Box Sizing & Box Model

  • Bir blok etiketinin kutu boyutu verilen genişlik yükseklik, border, padding ve margin değerlerinin toplamı kadardır.
  • Varsayılan olarak kutu boyutu (box-sizing) content-box'dır. Kutu boyutu verilen değer kadardır. Üzerine border, padding ve margin eklenir.Fakat kutu boyutu tipi değiştirilebilir, "borderbox yapılabilir. Bu durumda verilen kutu boyutu padding ve border değerlerini de kapsar. Marginini kapsamaz.

Fonts (Yazı Tipleri)

  • font-size: stili ile yazı boyutu ayarlanabilir. font-size değeri piksel olarak, yüzde olarak veya "em" olarak verilebilir.
  • font-family: stili ile yazı tipi ayarlanabilir. Birden fazla yazı tipi değeri verildiğinde, ilk değer uygulanır, tarayıcı bu değeri tanımıyor ise, ikinci değer aktif olur. Bu şekilde sırayla gider.

Icons

  • İkonlar küçük küçük ikon resimleri ile gösterilebilirler. Küçük küçük ikon resimleri yerine ikon kütüphanesi kullanılılabilir. İkon kütüphanesi kullanmak daha iyidir.
  • Fonte Awesome kütüphanesi kullanılabilir.

Styling Text (Metin Biçimlendirme)

  • Metin Biçimlendirme için kullanılabilecek etiketler:
    1. font-weight: Yazı kalınlığını ayarlar.
    2. font-style: Yazı şeklini değiştirir. Örneğin, italik yapma.
    3. text-decoration: Yazı üzerini, altını ya da üstünü çizer.
    4. font-size:Yazı boyutunu ayarlar.
    5. line-height: Satırlar arasındaki boşluğu ayarlar.
    6. word-spacing: Kelimeler arasındaki boşluğu ayarlar
    7. letter-spacing: Harfler arasındaki boşluğu ayarlar
    8. text-indent:Paragraf başındaki satırı içeri kaydırır.
    9. text-transform:Yazıyı büyük harf, küçük harf, kelime baş harflerini büyük hale getirme gibi değişiklikler yapar.

Alligning Text (Metin Hizalama)

  • Metin Hizalama için kullanılabilecek etiketler:
    1. text-align: Yazıyı sağa, sola hizalar, ortalar. Inline etiketlere etki etmez.
    2. column-count:Paragraf içinde yazıları kolonlara böler.
    3. column-rule:Kolonlara arasına çizgi ekler.

Styling Lists (Liste Biçimlendirme)

Link ve Buton Biçimlendirme

Box Shadow (Gölgelendirme)

  • box-shadow: stili ile gölgelendirme yapılır.
  • box-shadow stili 4 farklı değer alabilir. Örneğin, box-shadow: 4px 3px 10px 5px; gibi. Birinci değer yataydaki kaymayı, ikinci değer dikeydeki kaymayı, üçüncü değer de gölgelendirme derecesini, dördüncü değer de gölgelendirmenin dağıtılmasını (daha buğulu) belirtir.
  • Stilin sonunda renk de eklenebilir. Örneğin red, green, rgba (0,0,0,.4) gibi. Gölgenin rengini ve transparanlığını belirtir.
  • hover ile üzerine geldiğinde farklı görünmesi ayarlanabilir.
  • Değerler virgülle tekrar yazıldığında iki defa gölgelendirme uygular, daha güçlü bir gölgelendirme olur.

Transitions (Geçiş Efekleri)

  • transition: stili ile bir elemanın üzerine gelindiğinde "hover" ile yapılan değişikliğin geçiş süresini ayarlaer. Örneğin transition: all .1s ease; gibi
  • İlk parametre değişikliğin etki edeceği özelliği belirtir. Örneğin, width, font-size gibi özelliklerden biri seçilebilir. "all" yazıldığında bütün özellikler için geçerli olur.
  • İkinci parametre geçişin tamamlanacağı süreyi belirtir.
  • transition-timing-function: stili ile geçişin hızı ayarlanabilir. ease olduğunda yavaş başlar, hızlanır, sona doğru yavaşlayarak değişir. linear olduğunda aynı hızda değişir. ease-in olduğunda yavaş başlar, hızlanarak değişir. ease-out olduğunda hızlı girer, bitmeye doğru yavaşlar. ease-in-out olduğunda başlangıçta ve bitişte yavaş, arada hızlıdır.
  • transition-delay: stili ile geçişin başlama süresi ayarlanabilir.

Resim Galerisi

  • object-cover:

Arkaplan Resmi

  • HTML sayfasının görünen alanına viewport denir. Genişlik ve yükseklik değerleri görüenen alana göre verilebilir. Örneğin, bir div etiketinde yükseklik ayarı yaparken height: 95vh; değeri girildiğinde görünen alanın %95'ini kapsar.
  • background: stili, bütün arkaplan stilleri için genel stillerdir. Bu stil kullanılarak değerler verilileceği gibi daha özel stiller kullanılabilir.
  • background-image: stili arkaplana resim atamak için kullılır. background-image: url (path) şeklinde resim gösterilir.
  • background-size: stili ile resmin ekrana nasıl oturacağı (cover, contain vs) ayarlanır.
  • background-position: stili ile resmin ekranın neresinde pozisyonlanacağı ayarlanır.
  • clip-path: stili ile resmin kenarları kesilip biçilebilir.

Form Biçimlendirme

Tooltip


131 Defa Okundu