CSS, web sitelerinin tasarımı için kullanılan bir teknolojidir CSS seçicileri, HTML öğelerini seçmek ve stil uygulamak için kullanılır Temel seçiciler arasında element, class, ID ve universal seçicileri yer alır Element seçicileri, belirli bir HTML öğesi için stil uygulamamızı sağlar Class seçicileri, HTML öğelerine stil uygulamak için kullanılan en yaygın seçicilerdir ID seçicileri, her bir HTML öğesi için benzersiz bir tanımlayıcı sağlar Universal seçicileri ise sayfadaki tüm HTML öğelerine stil uygulamak için kullanılır İleri düzey CSS seçicileri arasında attribute, nth-child, nth-last-child ve hover seçicileri yer alır Attribute seçicisi, elementin belirli bir attribute özelliğine göre seçilmesini sağlar Nth-child, liste sırasına göre elementi seçer Nth-last-child, listedeki son elemente göre hedefleme yapmanızı sağlar Hover seçicisi, elementin üzerine gelindiğinde
CSS (Cascading Style Sheets), bir web sitesinin tasarımı için kullanılan ve HTML kodunun görünümüyle ilgili olan bir web teknolojisidir. CSS, bir web sayfasında bulunan HTML etiketlerini seçmek ve stil özellikleri uygulamak için seçiciler kullanır. Bu makalede, temel CSS seçicileri olan element, class, ID ve universal seçicileri ile ileri düzey seçiciler olan attribute, nth-child, nth-last-child ve hover seçicilerinin kullanımı hakkında ayrıntılı bilgiler yer alacaktır.
CSS'nin özellikleri, her seçiciye ait stil parametrelerinin belirlenmesiyle ilgili bilgileri içerir. Background, font ve position özellikleri gibi hemen hemen tüm web tasarım ihtiyaçlarını karşılayacak birçok kategori bulunmaktadır. CSS'in folloş yapısı da oldukça basittir. Bu yapının özü, bir HTML etiketini seçmenin komutu, ardından stil özelliğinin ismini ve sonrasında stil özelliğinin değerini belirtmektedir.
Temel CSS Seçicileri
CSS, web sayfası tasarımında önemli bir rol oynayan bir dildir. CSS, web sayfalarının görünümünü düzenlemek için kullanılan bir dildir. CSS, HTML öğelerinin, yazı stili, renk ve arka plan gibi özelliklerini değiştirmemize yardımcı olur.
CSS seçicileri, belirli HTML öğelerinin belirli özelliklerini seçmemize yardımcı olan öğelerdir. CSS seçicilere genel olarak element, class, ID ve universal seçicileri olarak ayrılır.
Element Seçicileri
Element seçicileri en temel seçicilerdir. Bu seçiciler, belirli bir HTML elementi için stil uygulamamızı sağlar. Örneğin, <p> elementi için bir stil belirlemek isterseniz, element seçicilerini kullanabilirsiniz.
| Seçici | Örnek | Açıklama |
|---|---|---|
| p | p {color: red;} | P elementi için stil belirler |
| h1-h6 | h1 {font-size: 36px;} | Başlık elementleri için stil belirler |
Class Seçicileri
Class seçicileri, HTML öğelerine stil uygulanması için kullanılan en yaygın seçicilerdir. Bir HTML öğesine birçok farklı sınıf atanabilir ve her bir sınıfın kendine özgü bir stil belirleyebilir.
| Seçici | Örnek | Açıklama |
|---|---|---|
| .class-adi | .info {background-color: #f2f2f2;} | info sınıfına belirli bir stil uygular |
| .class-adi1.class-adi2 | .info.highlight {color: red;} | info ve highlight sınıflarına belirli bir stil uygular |
ID Seçicileri
ID seçicileri, her bir HTML öğesi için benzersiz bir tanımlayıcı sağlar ve bu seçiciler, sadece belirli bir öğeye stil uygulanması gerektiğinde kullanılır.
| Seçici | Örnek | Açıklama |
|---|---|---|
| #id-adi | #logo {width: 200px;} | logo öğesine genişlik belirler |
Universal Seçicileri
Universal seçicileri, sayfadaki tüm HTML öğelerine stil uygulamak için kullanılır.
| Seçici | Örnek | Açıklama |
|---|---|---|
| * | * {margin: 0;} | Tüm HTML öğelerine margin sıfırlar |
Temel CSS seçicileri, web tasarımcıların kullanabileceği en yaygın seçicilerdir. Bu seçiciler, HTML öğelerinin belirli özelliklerine stil uygulamayı sağlar. Ancak, daha kapsamlı bir tasarım için ileri düzey CSS seçicileri kullanılabilir.
İleri Düzey CSS Seçicileri
CSS seçicileri, web tasarımında oldukça önemli bir yere sahiptir. Temel seçicileri anlatmaktan sonra, şimdi ileri düzey seçicilere göz atalım. Bu seçiciler, daha karmaşık ve yaratıcı web tasarımı gerektiren projeler için kullanışlıdır. Aşağıda, ileri düzey CSS seçicileri hakkında daha fazla bilgi vereceğiz.
Attribute seçicisi, bir elementin belirli bir attribute özelliğine göre seçilmesini sağlar. Örneğin, birkaç tane resimden oluşan bir sayfanız var ve her bir resmin farklı bir boyutu var. Bu boyutları CSS ile belirlemek isterseniz, attribute seçicisini kullanabilirsiniz. "img[src$='.png']" şeklinde bir syntax ile .png uzantılı resimleri seçebilir ve stil özelliklerini belirtebilirsiniz.
Nth-child, listenin belirli bir sırasındaki elementi seçmenizi sağlar. Örneğin, "ul li:nth-child(2)" yazarsanız, listedeki ikinci elementi seçer. Böylece, tasarımınızda belirli elementleri hedeflemek ve stillendirmek için kullanabilirsiniz. Ayrıca "even" veya "odd" gibi anahtar kelimeler de kullanabilirsiniz, böylece belirli bir sıraya sahip olmayan elementlerin de seçimini yapabilirsiniz.
Nth-last-child, listedeki son elemente göre hedefleme yapmanızı sağlar. Bu seçici, infinite scroll tarzı bir web sitesinde oldukça kullanışlıdır. Ayrıca "even" veya "odd" gibi anahtar kelimeler ile de kullanabilirsiniz.
Hover seçicisi, web tasarımında oldukça yaygın olarak kullanılan bir seçicidir. Bu seçici, bir element üzerine gelindiğinde tetiklenir ve elementin belirlenen stil özelliklerine göre değişmesini sağlar. Bu, gezinme menüleri veya butonlar gibi birçok alan için oldukça uygun bir seçicidir.
Attribute Seçicisi
Attribute seçicisi, CSS'nin yaratıcı seçicilerinden biridir. Bu seçici, belirli niteliklere sahip öğeleri hedeflemek için kullanılır. Seçicinin temel syntax'ı şu şekildedir: [attribute=value]. Bu syntax, web sayfanızdaki belirli nitelik değerlerinin hedeflenmesinde kullanılabilir. Örneğin, bir ürün sayfasında her bir ürünü benzersiz bir kimlikle etiketlemek istiyorsanız, her ürünün veri-ürün-no niteliğine sahip olmasını sağlayabilirsiniz. Daha sonra, CSS seçicisinin [data-ürün-no = "değer"] syntax'ını kullanarak, belirli bir ürüne stil özellikleri atayabilirsiniz. Örneğin, aşağıdaki tablo, belirli bir ürün için CSS özelliklerinin nasıl uygulanabileceğini göstermektedir:
| Veri-ürün-no | Ürün Adı | Stil Özellikleri |
|---|---|---|
| 123456 | Cep Telefonu | background-color: #F2F2F2 |
| 654321 | Bilgisayar | background-color: #DDD |
Attribute seçicisi aynı zamanda, bir öğenin bir dizi nitelikten herhangi birine sahip olup olmadığını kontrol etmek için de kullanılabilir. Örneğin, bir web formunda bir giriş alanı, sadece belirli bir karakter kümesiyle doldurulabilirse belirli bir sınıf niteliğine sahip olabilir. Attribute seçicisi [class ~ = "değer"] syntax'ını kullanarak, bu giriş alanına stil özellikleri atayabilirsiniz.
Attribute seçicisinin bir diğer kullanımı da başlık etiketleridir. Örneğin, h1 etiketi için bir stil özelliği atamak istiyorsanız, [etiket = "h1"] syntax'ını kullanarak başlık etiketi için özel stil özellikleri tanımlayabilirsiniz.
Attribute seçicisi, CSS seçicilerinin en esnek ve yaratıcı olanlarından biridir. Bu seçiciyi kullanarak, web sitenizin tasarımında son derece eşsiz özellikler oluşturabilirsiniz.
Subsubsubheading1
CSS'te kullanılan özelliklerden biri olan attribute seçicilerinin doğru syntax kullanımını bilmek oldukça önemlidir. Attribute seçici özelliği, seçili elementlerin belirli bir özelliğe sahip olmasına göre stil uygulamak için kullanılır. Syntax yapısı, "element[attribute=value]" şeklindedir. Yapıyı anlamak için örnek olarak, bir HTML sayfasında "img" etiketine sahip bir element için alt özellikleri kullanabiliriz. Örneğin img etiketine "alt" öznitelik için "cats" değerini vermek istediğimizde, syntax formunu "img[alt='cats']" şeklinde kullanırız.
Bu syntax yapısı aynı zamanda "not equal" sembolü olan != kullanılarak da kullanılabilir. Örneğin, "img" etiketi için "alt" özniteliğini "dogs" olarak atadığımızda syntax yapısını şöyle yazabiliriz: "img[alt!='dogs']". Bu syntax, "dogs" değerine sahip olan img elementlerini seçmeyecektir. Eğer "img" etiketi için herhangi bir "alt" özniteliği kullanılmamışsa, syntax "img[alt]" olarak yazılabilir.
- "^" sembolü, belirli bir özelliğe başlayan değeri ifade eder. Örneğin, "img" etiketi için "alt" özniteliklerinde "cat" değerine sahip olanları seçmek için syntax yapısı: "img[alt^='cat']" şeklinde kullanılabilir.
- "$" sembolü, belirli bir özelliğe biten değeri ifade eder. Örneğin, "img" etiketi için "alt" özniteliklerinde "cat" kelimesiyle bitenleri seçmek için syntax: "img[alt$='cat']" şeklindedir.
- "*" sembolü, belirli bir özelliği içeren değeri ifade eder. Örneğin, "img" etiketi için "alt" özniteliklerinde "cat" geçen herhangi bir değeri seçmek için syntax yapısı: "img[alt*='cat']" şeklinde kullanılabilir.
Attribute seçicisi kullanırken, belirli bir özelliğe sahip veya olmayan elementleri de seçebiliriz. Örneğin, "data" özniteliğine sahip olan elementleri şu şekilde seçebiliriz: "*[data]". Ayrıca, "data" özniteliğine sahip olmayan elementleri seçmek için, syntax "img:not([data])" şeklinde kullanılabilir.
Subsubsubheading2
Attribute seçicileri, bir HTML elementinin özelliklerine göre hedeflemeyi sağlar. Bu seçici, özellik değerleri belirterek elementlerin seçilmesi için son derece yararlıdır. Örneğin, bir dökümanınızda belirli bir CSS sınıfı olmayan tüm HTML linklerini rengini değiştirerek hedefleyebilirsiniz.
Bir örnek olarak, bir dökümandaki tüm HTML linkleri hedeflemek isteyeceğinizi düşünelim. Bu durumda, [href] kullanarak tüm linkleri hedefleyebilirsiniz. Aşağıdaki örnek kodda, "a[href]" kullanarak tüm linkleri kırmızıya boyuyoruz:
a[href] { color: red;}Attribute seçicileri, bize sadece bir elementi hedefleme fırsatı sağlamaz, aynı zamanda elementlerin özelliklerinin değerlerine göre seçici değiştirerek de hedefleyebiliriz. Örneğin, sahip oldukları özellik değerleri ile hedeflenen elementler dizisini görüntüleyebiliriz. Aşağıdaki örnek kodda [class*="example"] kullanarak, sınıf özelliğinin değerinin "örnek" kelimesini içerdiği tüm elementleri hedefliyoruz:
[class*="example"] { background-color: yellow;}Bu örneklerde olduğu gibi, CSS seçicilerinin kullanımı, web tasarımındaki görsel etkiyi önemli ölçüde değiştirebilir. Doğru bir kullanım ile, hem web sitenizin görsel görünümünü hem de kullanılabilirliğini artırabilirsiniz.
Nth-Child Seçicisi
CSS'deki :nth-child özelliği, belirlenen bir CSS seçicisi için seçilen nesnelerin belirli bir sıra numarasına sahip olanlarını hedeflemek için kullanılır. Örneğin, :nth-child(3) kullanıldığında, üçüncü sıradaki nesneleri seçer. Bu özellik, CSS'te formların hedeflenmesinde oldukça yararlıdır. Bu özellik, basit ve karmaşık formlarda kullanılabilir ve seçicinin belirli bir sayıya sahip nesnelerle eşleşmesini sağlar.
Bu özellik kullanımıyla, alternatif satırlar veya sütunlar hedeflenebilir. Örneğin, :nth-child(odd) sadece tek sayıdaki satırları seçerken, :nth-child(even) yalnızca çift sayılı satırları seçer.Bunların yanı sıra, sıralama ve farklı ölçütler belirleyerek seçimler yapmak için birden fazla :nth-child() özelliği bile kullanılabilir.
Nth-Last-Child Seçicisi
CSS'deki Nth-Last-Child seçicisi, en sondan x'inci çocuğu hedeflemek için kullanılır. Örneğin, son elementi hedeflemek istiyorsanız, seçici olarak "nth-last-child(1)" kullanmanız gerekir.
Bu seçici, karmaşık formlarda özellikle yararlıdır. Örneğin, bir formda sonuncu girilen alanı hedefleyebilirsiniz.
Seçiciyi kullanırken, kullanımı Nth-Child seçicisiyle benzerdir. Ancak, Nth-Last-Child seçicisi sonda çalışırken, Nth-Child seçicisi baştan başlar.
Örneğin, "nth-last-child(2)" seçici, son iki çocuğu hedeflerken, "nth-child(2)" seçici, ikinci çocuğu hedefler.
Bu seçiciyi kullanarak, son elemana özgü stiller sağlayabilirsiniz. Ayrıca, form elementlerinin son sırada olanlarına özel stiller de sağlayabilirsiniz.
Hover Seçicisi
Hover seçici, web tasarımında önemli bir yere sahiptir. Elementlerin üzerine gelindiğinde belirli özelliklerin değişmesi ve animasyonların oluşması sağlanır. Bu seçici, gezinme menüleri, butonlar, resimler, bağlantılar ve daha pek çok yerde kullanılabilir.
Hover seçicisi aynı zamanda kullanıcı deneyimini artırmak için de önemlidir. Örneğin, bir kullanıcının bir butona tıklamak yerine üzerine gelmesi, butonun renginin değişmesi veya animasyonlu bir efektin oluşması sağlanabilir. Bu da kullanıcının butona tıklama ihtimalini artırır.
Hover seçicisinde kullanılabilecek özellikler arasında renk değiştirme, yazı fontu değiştirme, elementin boyutunu değiştirme, arka plan rengini değiştirme gibi seçenekler yer alır. Örneğin, gezinme menüsünde üzerine gelindikçe menünün arka plan renginin değişmesi, linklerin altı çizilmesi veya yazı fontunun değişmesi sağlanabilir.
Bunun yanı sıra hover seçicisinin CSS pseudo-sınıfı olan :hover seçici özelliği de kullanılabilir. Bu özellik belirli bir elementin bir kuralı sadece üzerine gelindiğinde etkilemesini sağlar. Bu da özellikle animasyonlu efektler için oldukça kullanışlıdır.
Genel olarak, hover seçicisi bir web sitenin tasarımındaki detaylardan biridir ve doğru kullanıldığında kullanıcının siteye olan ilgisini artırır.
Özellikler
CSS, web tasarımında en önemli araçlardan biridir ve web sayfaları için çok çeşitli stil oluşturma seçenekleri sunar. Bu seçenekler, özellikler adı verilen CSS kodları sayesinde elde edilir. Özellikler, web sayfasının boyutunu, web sayfasının arka plan rengini, yazı tipini, konumlandırma ve diğer birçok özelliği belirlemek için kullanılabilir. Bu bölümde, CSS özelliklerinin kullanımı ve etkileri hakkında bilgi vereceğiz.
CSS özellikleri, web tasarımında oldukça geniş bir kullanım alanına sahiptir. Arka plan özellikleri, font özellikleri ve konumlandırma özellikleri gibi birçok farklı kategori altında incelenebilirler. Arka plan özellikleri, sayfanın arka plan rengini ve görüntüsünü belirlemek için kullanılır. Örneğin, background-color özelliği ile sayfanın arka plan rengi belirlenebilir. Background-image özelliği ile de sayfanın arka planına bir resim ekleyebilirsiniz. Background-position özelliği ile arka plan resminin konumunu ayarlayabilirsiniz.
Font özellikleri, web sayfalarının yazı tipi stilini belirlemek için kullanılır. Font-family özelliği, sayfa yazı tipini belirlerken, font-weight özelliği ile de yazı tipi kalınlığı belirlenebilir. Font-size özelliği sayesinde ise yazı tipi boyutu ayarlanabilir. Ayrıca, font-style özelliği ile de yazı tipi stilini belirleyebilirsiniz.
Konumlandırma özellikleri, bir web sayfasındaki bileşenlerin konumunu belirlemek için kullanılır. Relative position, nesneyi belirlenen konumun yanına yerleştirirken, absolute position nesneyi belirlenen konumda sabitler. Fixed position özelliği, nesneyi sabit bir konumda tutarak sayfanın herhangi bir yerinde kaymasını önler.
CSS özellikleri, web sayfaları için gereklidir ve web sayfasının planlaması, tasarımı ve oluşturulması sırasında önemli bir rol oynar. Bu nedenle, web tasarımında iyi bir şekilde kullanılması gerekmektedir. Yukarıda belirtilen özellikler, diğer CSS özellikleri gibi, tek başına veya bir arada kullanılabilir. Bu özelliklerin doğru bir şekilde kullanılması, web sayfası tasarımının kalitesini artıracaktır.
Background Özelliği
Web tasarımında, arka plan özellikleri tasarımın genel yapısını belirlemede son derece önemlidir. Arka plan özellikleriyle, web sayfalarına renk, desen, resim ve grafikler gibi pek çok çeşitli özellik eklenebilir. Arka plan özellikleri yaratıcı bir web tasarımının olmazsa olmazıdır. Arka plan özelliği, öğelerin arka plan rengini veya görselini düzenleyen bir CSS özelliğidir.
background-size: Arka plan resminin boyutunu belirler. Genişlik ve yükseklik gibi değerler kullanılarak özelleştirilebilir. Bu özellikle, resimlerin sayfadaki boyutunu ölçeklendirebilirsiniz.
background-repeat: Arka plan resminin yinelenip yinelenmeyeceğini belirleyen bir özelliktir. Bu özellikle, resmin belirli bir alanı kaplamasını sağlayabilirsiniz. Dört farklı yineleme seçeneği mevcuttur: repeat, repeat-x, repeat-y ve no-repeat.
background-clip: Arka planın kesileceği alanı belirleyen bir özelliktir. "padding-box", "border-box" ve "content-box" gibi parametreler kullanılarak düzenlenebilir. Bu özellikle, arka planın sınır boyunca mı yoksa yalnızca içerik kutusunda mı görünmesini istediğinizi belirleyebilirsiniz.
- Background-size: Resimlerin orantılarını koruyarak en-boy oranını düzenlemek için "cover" ve "contain" değerlerini kullanabilirsiniz.
- Background-repeat: "repeat" yerine "space" veya "round" parametreleri kullanarak arka planın daha estetik görünmesini sağlayabilirsiniz.
- Background-clip: Arka planın sınır kutusunun sadece içinde veya yalnızca dışında mı ortaya çıkmasını istersiniz? Bu özelliği kullanarak sınır kutusunun hizasını belirleyebilirsiniz.
Arka plan özellikleri, web sayfasının tasarımında kullanıldığında, sayfayı daha estetik ve kullanımı daha kolay hale getirir. Bu özellikler, sayfanın renk ve desen seçimi, içerik kutusu ve sınırları kullanımı gibi diğer tasarım öğeleriyle birlikte, son derece önemlidir.
Font Özelliği
Font özelliği, web sitenizde kullanılan yazı stillerinin, boyutlarının ve kalınlıklarının belirlenmesine olanak tanır. Bu özellik, web sitenizin tasarımında önemli bir role sahiptir.
Font family özelliği, belirlenen metin stilinin hangi font ailesiyle yazılacağını tanımlar. Bu özellik, birden fazla yazı tipi seçeneği arasından seçim yaparak, yazı stillerine daha fazla esneklik kazandırır. Örneğin:
- CSS kodu: font-family: 'Arial', sans-serif;
- Bu örnekte, eğer Arial font ailesi mevcut değilse, web sitesi sans-serif font ailesini kullanacaktır.
Font-weight özelliği, yazıların kalınlığını belirler. Bu özelliği kullanarak, ince veya kalın yazı stilleri oluşturabilirsiniz. Örneğin:
- CSS kodu: font-weight: bold;
- Bu örnekte, yazılar kalın hale getirilir.
Font-size özelliği, yazıların boyutunu belirler. Bu özellik, piksel veya yüzde cinsinden belirlenebilir. Örneğin:
- CSS kodu: font-size: 18px;
- Bu örnekte, yazı boyutu 18 piksel olarak belirlenir.
Font özelliğinde ayrıca, yazı stilinin metin rengini de belirleyebilirsiniz. Böylece yazıların, web sitenizin arka planıyla uyumlu olmasını sağlayabilirsiniz. Font özelliği, web sitenizin genel tasarımında önemli bir rol oynamaktadır ve şık ve okunaklı yazı stilleri oluşturarak, sitenizi ziyaretçilerinize daha profesyonel bir şekilde sunabilirsiniz.
Positioning Özelliği
HTML sayfalarımızda, öğelerin yerlerini ayarlamak için CSS'de yerleştirme özelliklerini kullanabiliriz. Bu özellikler sayesinde, sayfalarımızda öğelerimizin konumunu belirleyebilir ve sayfalarımıza estetik bir görünüm kazandırabiliriz.
İlk yerleştirme özelliğimiz, 'relative' yerleştirme özelliğidir. Bu özellik, HTML öğesi için bir konum belirlememize olanak sağlar. Eğer bir öğeyi 'relative' olarak konumlandırırsak, bu öğe, normal konumunun (HTML sayfasında yer aldığı sıralama) sol, sağ, yukarı ve aşağı yönlere göre hareket edebilir.
İkinci yerleştirme özelliğimiz 'absolute' yerleştirme özelliğidir. Bu özelliği kullanarak, bir öğeyi HTML sayfasının belirli bir bölgesine konumlandırabiliriz. Yani, HTML sayfamızda belirlediğimiz bir alanda öğeyi konumlandırabiliriz. 'Absolute' yerleştirme özelliğinde kullanılan sol, sağ, yukarı ve aşağı durumları belirli bir referans noktasından itibaren hesaplanır.
Son olarak, 'fixed' yerleştirme özelliği de yerleştirme özelliklerimiz arasında yer alır ve kullanımı oldukça sık görülür. 'Fixed' özelliğini kullanarak bir öğeyi sabit bir konumda konumlandırabiliriz. Bu özelliği kullandığımızda, tarayıcımızın scroll işlemi ile ekranımızı kaydırsak bile, öğemiz sabit kalan bir konumda kalır.
Yerleştirme özellikleri sayesinde, HTML sayfalarımızda özgün tasarımlar oluşturabiliriz. Ancak bu özellikleri kullanırken, dikkatli olmamız gerekir. Yanlış kullanımda, sayfa düzenimiz bozulabilir ve kullanıcılarımızın sayfamızda gezinti yapması zorlaşabilir.