CSS değerleri ve birimleri

CSS'de kullanılan her niteliğin, o nitelik için izin verilen değer kümesini tanımlayan bir değer tür vardır. Bu derste en sık kullanılan değer türlerinden bazılarına ve bunların en yaygın değerlerine ve birimlerine bir göz atacağız. Ayrıca MDN'deki nitelik sayfalarındaki açıklamalara göz atmanız, belirli bir nitelik için geçerli olan değer türüyle ilişkili değerleri anlamanıza yardımcı olacaktır.

Ön koşullar: Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesidosyalarla çalışma konusunda yeterli seviyede bilgiler ve  HTML temelleri (IHTML'ye Giriş bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(CSS ilk adım)
Amaç: CSS niteliklerinde kullanılan farklı değer ve birimler hakkında bilgi edinmek

CSS değeri nedir?

CSS belirtimlerinde ve MDN'deki nitelik sayfalarında, değer türlerini açılı parantezlerle çevrili olarak göreceksiniz, <color> veya <length> gibi. <color>  veri türünün herhangi bir nitelik için kullanılabilir olduğunu gördüğünüzde; <color> referans sayfasında listelenen değerin, bu niteliğe uygulanabilir olduğu anlamına gelir.

Note: Veri tipi olarak adlandırılan CSS değerlerini de görürsünüz. Terimler temelde birbirinin yerine kullanılabilir. CSS'de veri tipi olarak adlandırılan bir terim gördüğünüzde, bu değer tipini söylemenin süslü bir yoludur. Terim değeri kullanılmak istenilen değer türü tarafından desteklenen herhangi bir ifade anlamına gelir.

Note: Evet, CSS değer türleri ile CSS niteliklerini (örn. color nitelik, <color> değer türü). ayırt edebilmek için genellikle açılı parantezler kullanılarak gösterilir. HTML öğeleri ile CSS değer türlerinin ikiside açılı parantezler kullanılarak gösterildiklerinden, kafanız karışabilir ancak işlev olarak aynı değillerdir — çok farklı kavramlar için kullanılırlar.

Aşağıdaki örnekte, bir anahtar kelime kullanarak başlığımızın ve arka plan rengimizi rgb() fonksiyonunu kullanarak ayarladık:

h1 { 
  color: black; 
  background-color: rgb(197,93,161); 
} 

CSS'de bir öğeye değer türüyle, izin verilen değerler kümesinin içinden değer atamanın tek yoludur. <color> renk değer türünün farklı şekillerde kullanıldığını gördüğünüzde telaşlanmanıza gerek yok — Anahtar kelimeler, onaltılık(hex) değerler, rgb() fonksiyounu, gibi. Ayrıca tarayıcınız tarafından desteklendiklerini varsayarak mevcut tüm <color> değerlerini kullanabilirsiniz. İsterseniz her değer için MDN sayfasında tarayıcı desteği hakkında bilgi edinebilirsiniz. Örn, <color> sayfasına bakarsanız tarayıcı uyumluluğu bölümünün, farklı renk veri tiplerinin listelediğini ve bunların hangi sürümler tarafından desteklendiği hakkında bilgi verdiğini göreceksiniz(rgba(), hsla(),vb).

Sıklıkla karşılaşabileceğiniz bazı değer ve birim türlerine örneklerle birlikte bir göz atalım, böylece farklı olası dğerleri deneyebilirisiniz.

Sayılar, uzunluklar ve yüzdeler

Kendinizi CSS'de, kullanırken bulabilceğiniz çeşitli sayısal değer türleri vardır. Aşağıdakilerin tümü sayısal olarak sınıflandırılmıştır:

Veri tipi Açıklama
<integer> <integer> bir tamsayıyı temsil eder, 1024 veya -55 gibi.
<number> <number> ondalıklı bir sayıyı temsil eder — kesirli bileşeni olan bir ondalık basamağa sahip olabilir veya olmayabilir. Örn, 0.255, 128 veya -1.2.
<dimension>  <dimension> bir birime bağlı olan <number> tipinde bir sayıdır. Örn., 45deg, 5s, or 10px<dimension>; <length>, <angle>, <time>, ve <resolution> değer türlerini içeren bir şemsiye kategoridir.
<percentage> <percentage> başka bir değerin bir kısmını temsil eder. Örn., 50%. Yüzde değeri her zaman başka bir miktara bağlıdır. Örn., bir öğenin uzunluğunun, üst değerin uzunluğuna bağlı olması gibi.

Uzunluklar

En sık karşılaşacağınız sayısal tür <length>'dir. Örn. 10px (pixels) veya 30em. CSS'de kullanılan iki tür uzunluk vardır — bağıl ve mutlak. işlerin ne kadar büyük olacağını anlamak için farkı bilmek önemlidir.

Mutlak uzunluk birimleri

Aşağıdakilerin tümü mutlak uzunluk birimleridir — başka hiçbir şeye bağlı değildirler ve genellikle her zaman aynı boyutta kabul edilirler.

Birim İsim Eşittir
cm Santimetre 1cm = 96px/2.54
mm Milimetre 1mm = 1/10th of 1cm
Q Çeyrek milimetre 1Q = 1/40th of 1cm
in İnç 1in = 2.54cm = 96px
pc Picas 1pc = 1/6th of 1in
pt Point 1pt = 1/72th of 1in
px Piksel 1px = 1/96th of 1in

Bu birimlerin çoğu, ekran yerine baskı için kullanıldığında daha kullanışlıdır. Örn., genellike ekrandacm(santimetre) kullanmayız. Yaygın olarak kullanacağınız tek değer px(piksel)'dir.

Bağıl uzunluk birimleri

Bağıl uzunluk birimleri başka bir şeye, belki de ana öğenin yazı tipinin boyutuna veya görünüm alanının boyutuna bağlıdır. Bağıl birimleri kullanmanın yararı, dikkatli bir planlama ile, metnin veya diğer öğerin boyutunu sayfadaki diğer her şeye göre ölçeklenmesini sağlabilmenizdir.

Birim Bağıl
em Öğenin veya ebeveyninin yazı tipi boyutuna.
ex mevcut yazı tipinin x harfinin yüksekliğine.
ch Öğenin yazı tipinin "0"(sıfır) karakterinin ilerleme ölçüsü(genişliği).
rem Kök(root) öğenin yazı tipi boyutu.
lh Öğenin satır yüksekliği
.
vw Görüntü alanı genişliğinin %1'i.
vh Görüntü alanı yüksekliğinin %1'i.
vmin Görüntü alanında küçük olan değerin %1'i.
vmax Görüntü alanının büyük olan değerin %

Bir örnekle keşfedelim

Aşağıdaki örnekte, bazı göreli ve mutlak uzunluk birimlerinin nasıl davrandığını görebilirsiniz. İlk kutunun width niteliği piksel cinsinden bir değeri vardır. Mutlak bir birim olarak, bu genişlik başka ne değişirse değişsin aynı kalacaktır.

İkinci kutu, vw(görüntü alanı genişliği) birimlerinde ayarlanmış bir genişliğe sahiptir. Bu değer, görüntü alanı genişliğine bağlıdır ve bu nedenle 10vw, görüntü alanının genişliğinin yüzde 10'udur. Tarayıcı pencerenizin genişliğini değiştirirseniz, kutunun boyutu değişmelidir. Ancak bu örnek, bir <iframe> kullanılarak sayfaya gömüldüğü için tarayıcının genişliğinin değiştirilmesi işe yaramaz. Bunu çalışır bir şekilde görebilmek için, örneği kendi tarayıcı sekmesinde açtıktan sonra denemeniz gerekir.

Üçücü kutu em birimi kullanır. Bunlar yazı tipi boyutuna bağlıdır. .wrapper sınıfının yazı tiği boyutunu 1em olarak ayarladım. Bu değeri değiştirdiğinizde tüm öğelerin yazı tipi boyutunun değiştiğini göreceksiniz, ancak genişliği yazı tipi boyutuna bağlı olan sadece son öğe olduğu için birtek onun genişliği değişecektir.

ems ve rems

em ve rem kutulardan metne kadar herhangi bir öğeyi boyutlandırırken en sık karşılaşacağınız iki göreceli uzunluktur. Bunların nasıl çalıştıklarını ve aralarındaki farkları anlamak önemlidir, özellikle de stil metni veya CSS düzeni gibi daha karmaşık konulara geçmeye başladığınızda. Aşağıdaki örnek anlayabilmeniz için bir sunum sunar.

HTML, iç içe geçmiş bir dizi listeden oluşur — Toplamda üç listemiz var ve her iki örnekte de aynı HTML kodları mevcut. Tek fark, ilkinin bir ems sınıfına ve ikicinin bir rems sınıfına sahip olmasıdır.

Başlangıç olarak, <html> öğenin yazı tipi boyutu olarak 16px ayarladık.

Özetlemek gerekirse, tipografi durumunda em birimi "ana öğenin yazı tipi boyutu" anlamına gelir. <li> İçindeki <ul> öğeleri ems sınıfına dahil olan ebeveynlerinden boyutlandırma alır. Böylece, her bir ardışık iç içe geçme düzeyi giderek büyür, çünkü her birinin yazı tiği boyutu 1.3em'dir, ebeveyninin yazı tiği boyutunun 1,3 katıdır.

Özetlemek gerekirse, rem birimi "Kök(root) öğenin yazı tipi boyutu" anlamına gelir (rem "kök em" anlamına gelir). <li> öğesinin içindeki <ul> öğeleri, boyutlarını rems sınıfındaki rem tanımından dolayı kök öğenin<html> yazı tipi boyutundan alır. Bu da, birbirini izleyen her yuvada kök öğenin yazı tiği değişmediğinden bu öğelerdeki yazı tipi boyutlarıda sabit kalır.

Bununla birlikte, <html> öğesinin font-size niteliğini CSS'de değiştirirseniz, diğer her şeyin ona göre değiştiğini göreceksiniz — hem rem, hemde em buyutlu metinler.

 

Yüzdeler

Çoğu durumda, bir yüzde, uzunlukla aynı şekilde ele alınır. Yüzde olan değer, her zaman başka bir değere göre ayarlanmış olmaktadır. Örneğin, bir öğeyi font-size yüzde olarak ayarlarsanız, bu öğenin üst öğesinin font-size nitelik değerinin bir yüzdesi olacaktır. Bir width değer için yüzde kullanırsanız, üst öğenin width nitelik değerinin yüzdesi olacaktır.

Aşağıdaki örnekte, yüzde boyutlu iki kutu ve iki piksel boyutlu kutu aynı sınıf adlarına sahiptir. Her iki set de sırasıyal 200 piksel ve %40 genişliğindedir.

Aradaki fark, iki kutudan oluşan ikici setin 400 piksel genişliğinde bir çerçevenin içinde olmasıdır. İkici 200 piksel genişliğindeki kutu birincisi ile aynı genişliktedir. ancak ikinci %40'lık kutu şimdi 400 pikselin %40'na sahip olduğundan ilkinden daha dardır!

Bunun nasıl çalıştığını görmek için çerçevenin genişliğini veya yüzde değerini değiştirmeyi deneyin.

 

Sonraki örnekte yazı tiği boyutları yüzde olarak belirlenmiştir. <li> öğesinin font-size nitelik değeri %80'lik bir paya sahip olduğu ve iç içe yerleştirilmiş liste öğelerinin, boyutlarını üstlerinden devraldığından her bir basamakta giderek küçülür.

 

Birçok değer türü bir uzunluk veya yüzdeyi kabul ederken, yalnızca uzunluğu kabul eden bazılarının olduğunu unutmayın. MDN nitelik referans sayfalarında hangi değerlerin kabul edildiğini öğrenebilirisiniz. İzin verilen değerler <length-percentage>'ri içeriyorsa, bir uzunluk veya yüzde kullanılabilir. izin verilen değer yalnızca <length> içeriyorsa, yüzde kullanmak mümkün değildir.

Sayılar

Bazı değer türleri, herhangi bir birim eklenmeden sayıları kabul eder. Birimsiz bir sayıyı kabul eden bir niteliğe örnek, opacity bir öğenin opaklığını(ne kadar şeffaf olduğunu) kontrol eden özelliktir. Bu özellik 0(tamamen şeffaf) ve 1(şeffaflık yok) arasında bir sayıyı kabul eder.

Aşağıdaki örnekte, opacity değerini değiştirmeyi deneyin. 0 ve 1 arasında çeşitli ondalık değerler vererek kutunun şeffaflığının nasıl değiştiğine dikkat edin.

 

Not:CSS'de değer olarak bir sayı kullandığınızda, bu sayı tırnak içine alınmamalıdır.

Renk

CSS'de rengi belirlemenin birçok yolu vardır ve bunlardan bazıları yeni yeni desteklenmeye başlamıştır. Metin rengini, arka plan rengini veya başka herhangi bir şeyi belirtirseniz, CSS'in her yerinde aynı rengi kullanabilirsiniz.

Modern bilgisayarlarda bulunan standart renk sistemi 24bit olup, kanal başına 256 farklı değerde kırmızı, yeşil ve mavi kombinasyonu aracılığıyla yaklaşık 16,7 milyon farklı rengin görüntülenmesini sağlar (256 x 256 x 256 = 16.777.216.) CSS'de renkleri belirlemenin bazı yollarına bir göz atın.

Not: Bu eğitimde, iyi bir tarayıcı desteğine sahip olan renkleri belirlemenin yaygın yöntemlerine bakacağız, başkaları da var ama anlatacaklarımız kadar iyi desteğe sahip değiller ve daha az yaygınlar.

Anahtar kelime renkleri

Renk belirtmenin basit ve anlaşılır bir yolu oldukları için, buradaki ve MDN'nin başka bir yerindeki örneklerde sıklıkla kullanıldıklarını göreceksiniz. Bu anahtar kelimelerinin bazıları oldukça eğlenceli isimlere sahip! <color> değer türü için sayfada tam bir liste görebilirsiniz.

Nasıl çalıştıklarını hakkında daha fazla fikir edinmek için aşağıdaki canlı örneklerde farklı renk değerleriyle oynamayı deneyin.

Onaltılık RGB değerleri

Karşılaşacağınız sonraki renk veri tipi değeri onaltılık kodlardır. Her bir onaltılık değer, bir karma/pound sembolünden(#) ve ardından altı onaltılık sayıdan oluşur; bunların her biri 0 ile f(15'şi temsil eder) arasında 16 değerden birini alabilir. yani 123456789abcdef. Her bir değer çifti, kanallardan birini (kırmızı, yeşil ve mavi) temsil eder ve her biri için mevcut 256 değerden herhangi birini belirlememize olanak tanır (16 x 16 = 256).

Bu değerler biraz daha karmaşık ve anlaşılması daha az kolaydır, ancak anahtar kelimelerden çok daha yönlüdürler — renk düzeninizde kullanmak istediğiniz herhangi bir rengi temsil etmek için onaltılık değerleri kullanabilirsiniz.

 

Renklerin nasıl değiştiğini görmek için değerleri değiştirmeyi deneyin.

RGB ve RGBA deperleri

Burada bahsedeceğimiz üçüncü şema RGB'dir. RGB değeri, kırmızı, yeşil ve mavi renklerinin kanal değerlerini, onaltılık değerlerle hemen hemen aynı şekilde temsil eden üç parametre verilen bir fonsiyondur — rgb(). onaltılık sistemle arasındaki fark, her kanalın iki onaltılık rakamla değil, 0 ile 255 arasında bir sayıyla temsil edilmesidir — anlaşılması biraz daha kolaydır.

RGB renklerini kullanmak için son örneğimizi yeniden yazalım:

 

Ayrıca RGBA veri tipinide kullanabilirsiniz — bunlar RGB renkleriyle tamamen aynı şekilde çalışır ve böylece herhangi bir RGB değerini kullanabilirsiniz. Sadece, şeffaflığı kontrol eden rengin alfa kanalını temsil eden dördüncü bir değeri vardır. Bu değeri 0 olarak ayarlarsanız rengi tamamen şeffaf hale getirir, 1 olarak ayarlarsanız tamamen opak hale getirir. Ara değerler farklı şeffaflık düzeyi verir.

Not:  Bir renk üzerinde bir alfa kanalı ayarlamanın, daha önce baktığımız opacity niteliğini kullanmaktan önemli bir farkı vardır. Opaklığı kullandığınızda, öğeyi ve içindeki her şeyi opak yaparsınız, RGBA renklerini kullanmak ise yalnızca belirttiğiniz rengi opak yapar.

Aşağıdaki örnekte, renkli kutularımızın bulunduğu bloğa bir arka planresmi ekledim. Daha sonra kutuları farklı opaklık değerlerine sahip olacak şekilde ayarladım — alfa kanalı değeri daha küçük olduğunda arka planın nasıl daha fazla göründüğüne dikkat edin.

Bu örnekte, renk çıktısını nasıl etkilediğini görmek için alfa kanalı değerlerini değiştirmeyi deneyin.

Not: rgba() ile rgb()  ve hsl() ile hsla()(aşağıya bakın) birbirinden saf takma ad ile ayrılan ve aynı şekilde hareket edecek şekilde tarayıcılar tarafından güncellendi. Yani, örneğin hem rgba(), hemde rgb() ile alfa kanalı değerleri olmadan renkleri oluşturabiliyoruz. Yukarıdaki örneğin rgba() fonksiyonunu rgb() olarak değiştirin ve renklerin hala çalışıp çalışmadığını görün! Hangi stili kullanacağınız size bağlıdır, ancak farklı işlevleri kullanmak, şeffaf olmayan ve şeffaf olan renk tanımlarını ayırmak için daha iyi tarayıcı desteği sağlar ve kodunuzda şeffaf renklerin nerede tanımlandığının görsel bir göstergesi olarak işlev görebilir.

HSL ve HSLA değeri

RGB'den biraz daha az desteklenen HSL renk modelidir(IE'nin eski sürümlerinde desteklenmez) ve tasarımcıların büyük ilgisinden sonra uygulanmıştır. hsl() fonksiyonu, kırmızı, yeşil ve mavi değerleri yerine 16,7 milyon rengi ayırt etmek için kullanılan ton, doygunluk ve açıklık değerlerini kabul eder, ancak farklı bir şekilde:

  • Ton: Rengin temel tonudur. Bu, renk tekerleği etrafındaki açıları temsil eden, 0 ile 360 arasında bir değer alır.
  • Doygunluk: Renk ne kadar doygun? Bu, 0'ın renk olmadığı (gri gölgesi olarak görünecektir) ve %100'ün tam renk doygunluğu olduğu %0 ile %100 arasında bir değer alır.
  • Hafiflik: Renk ne kadar açık veya parlak? Bu, 0'ın ışık olmadığı (tamamen siyah görünür) ve %100'ü tam ışık olduğu(tamamen beyaz görünür) %0 ile %100 arasında bir değer alır

HSL renklerini şu şekilde kullanmak için RGB örneğini güncelleyebiliriz:

Slightly less well-supported than RGB is the HSL color model (not supported on old versions of IE), which was implemented after much interest from designers. Instead of red, green, and blue values, the hsl() function accepts hue, saturation, and lightness values, which are used to distinguish between the 16.7 million colors, but in a different way:

  • Hue: The base shade of the color. This takes a value between 0 and 360, representing the angles around a color wheel.
  • Saturation: How saturated is the color? This takes a value from 0–100%, where 0 is no color (it will appear as a shade of grey), and 100% is full color saturation
  • Lightness: How light or bright is the color? This takes a value from 0–100%, where 0 is no light (it will appear completely black) and 100% is full light (it will appear completely white)

We can update the RGB example to use HSL colors like this:

 

RGB'nin RGBA'ya sahip olması gibi, HSL'nin de bir HSLA tipinde bir eşdeğeri vardır, bu da alfa kanalını belirtmeniz için size aynı yeteneği verir. Bunu aşağıda RGBA örneğimi HSLA renklerini kullanacak şekilde değiştirerek gösterdim.

 

Bu renk değerlerinden herhangi birini projelerinizde kullanabilirsiniz. Çoğu proje için bir renk paletine karar vermeniz ve ardından bu renkleri — ve seçtiğiniz rengi belirleme yöntemini — tüm proje boyunca aynı modeli kullanmanız muhtemeldir. Renk modellerini karıştırıp eşleştirebilirsiniz, ancak tutarlılık için genellikle en iyisi tüm projenizin aynı modeli kullanmasıdır!

Görüntüler

<image> değer türü kullanıldığı herhangi bir yerde geçerli bir görüntü değeri taşır. Bu, bir url() fonksiyonu ile işaret edilen gerçek bir görüntü dosyası veya bir gradyan olabilir.

Aşağıdaki örnekte, CSS background-image niteliğine tanımlanan bir görüntü ve gradyanı gösterdik.

 

Not: <image> için olası başka veri tipleri de vardır, ancak bunlar daha yenidir ve şu anda daha az tarayıcı desteğine sahiptir. Daha fazla bilgi edinmek istiyorsanız, MDN'deki <image> sayfasına bakabilirsiniz.

Konum

<position> değer türü, arka plan görüntüsünü, 2 Boyutlu koordinat sistemine göre öğeye konumlandırmak(background-position üzerinden) için kullanılan bir değerdir. Değer türü, top, left, bottom, right, ve center gibi anahtar kelimeleri alabilir, kutunun üst ve sol kenarından uzaklıkları temsil eden 2 boyutlu bir koordinatlamayı da kullanabilir.

Tipik bir konum değeri iki değerden oluşur — birincisi konumu yatay, ikincisi dikey olarak ayarlar. Yalnızca bir eksen için değerler belirtirseniz, diğeri varsayılan olacaktır: center.

Aşağıdaki örnekte, bir anahtar kelime kullanarak kabın üstünden 40 piksel uzaklıkta, sağ tarafa dayalı bir arka plan yerleştirdik:

 

Görüntünün nasıl hareket ettirebileceğinizi görebilmek içn bu değerlerle oynayın.

Dizeler ve tanımlayıcılar

Daha önceki örneklerde, anahtar kelimelerin nerede ve nasıl kullanıldıklarını gördük(Örn., <color> değer türünde kullandığımız red, black, rebeccapurple, ve goldenrod  anahtar kelimeleri gibi). Bu anahtar kelimeler, tanımlayıcılar olarak tarfi edilir ve CSS onların özel değer olduklarını anlar. Bu nedenle, alıntı yapılmaz — dizeler olarak değerlendirilmezler.

CSS'de dizeleri kullandığımız yerler de var. örneğin oluşturulan içeriği belirtirken. Bu durumda, değer bir dizge olduğunu göstemek için tırnak içine alınır. Aşağıdaki örnekte, tırnak içinde oluşturulmuş bir içerik dizesi ile birlikte alıntılanmamış renk anahtar sözcükleri kullanıyoruz.

 

Fonksiyonlar

Bakacağımız son değer türü, fonksiyonlar olarak bilinen değerler grubudur. Programlamada, bir fonksiyon, hem geliştirici hem de bilgisayar tarafından minimum çabayla tekrar eden bir görevi tamamlamak için birden çok kez çalıştırılabilen ve yeniden kullanılabilir olan kod bölümüdür. Fonksiyonlar genellikle JavaScript, Python veya C++ gibi dillerle ilişkilendirilir, ancak nitelik değerleri olarak CSS'de de bulunurlar. Zaten renkler bölümünde eylem fonksiyonlarını gördük — rgb(), hsl() ve bir dosyadan görüntüyü döndürmek için kullanılan url() gibi.

calc() geneneksel bir programlama dilinde bulabileceğiniz fonksiyonlara benzeyen bir CSS fonksiyonudur. Bu fonksiyon, basit hesaplamalar yapabilmenizi sağlar. Projeniz için CSS'i yazarken tanımlayamadığınız değerleri hesaplamak istiyorsanız ve tarayıcının çalışma zamanında sizin için çalıştırmasını istediğiniz durumlarda yararlıdır.

Örneğin, aşağıda calc() fonksiyonunu kutunun genişliğini %20 + 100px yapmak için kullanıyoruz. %20, ebeveyn öğesinin genişliğinden hesaplanır. .wrapper sınıfında tanımlanan genişlik değeri değişirse oğul öğenin genişliğide değişir. Bu hesaplamayı önceden yapamayız çünkü ebeveynin %20'sinin ne olacağını bilmiyoruz, bu yüzden calc() fonksiyonunu kullanarak tarayıcıya bunu bizim için yapmasını söyleyebiliriz.

Becerilerinizi test edin!

Bu derste birçok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musunuz? Devam etmeden önce bu bilgileri öğrendiğinizi doğrulamak için bazı testler hazırladık. — bkz. Becerilerinizi test edin: Değerler ve birimler.

Özet

Bu, karşlaşabileceğiniz en yaygın değer ve birim türlerinin hızlı bir şekilde gözden geçerilmesi olmuştur. CSS Değerleri ve birimleri referans sayfasındaki tüm farklı türlere göz atabilirsiniz; bu derslerde çalışırken bunların çoğuyla karşılaşacaksınız.

Unutulmaması gereken en önemli konu, her özelliğin izin verilen değer türlerinin tanımlanmış bir listesine sahip olması ve her değer türünün değelerinin ne olduğunu açıklayan bir tanıma sahip olmasıdır. Daha sonra MDN'de ayrıntılara bakabilirsiniz.

Örneğin <image>  bir renk gradyanı oluşturmanıza da izin veren anlayışı yararlıdır, ancak yazılışından bu anlayışının anlaşılması zordur.

Bu kısımda

  1. Kaynak sırası ve miras
  2. CSS seçicileri
  3. Kutu modeli
  4. Arka planlar ve kenarlıklar
  5. Farklı metin yönleri kullanma
  6. Taşan içerik
  7. Değerler ve birimler
  8. CSS'de elemanların boyutları
  9. Görseller, medya ve form öğeleri
  10. Tabloları şekillendirme
  11. CSS'de hata ayıklama
  12. CSS'inizi düzenleme
  13. /ol>