CSS kısaltması "basamaklı stil sayfaları" anlamına gelir. CSS, tüm cihazlarda kullanılan web sitelerine ve uygulamalara stil vermek için kullanılır. Stil sayfası, HTML ve JavaScript gibi bir ön uç programlama dilinin yanında yaygın olarak kullanılır.

CSS üç yoldan biriyle uygulanabilir - satır içi, dahili veya harici olarak. Önerilen yaklaşım harici CSS olsa da, kalan iki uygulama yönteminin daha pratik olabileceği durumlar vardır.

Bu öğretici makalede, bugün uygulamalar oluşturmaya başlamak için CSS'nin tüm temellerini öğreneceksiniz.

Farklı CSS Uygulama Yöntemleri Ne Zaman Kullanılmalı?

Satır içi CSS, bir web sayfasına yalnızca bir veya iki stil tercihinin yanı sıra birkaç başka niş durum eklemek olduğunda ideal uygulama yöntemidir. Satır içi CSS yöntemi, stil Belirli bir sonuca ulaşmak için bir CSS özelliği ile birlikte anahtar kelime.

Tek bir başlığın rengini kırmızıya çevirmeyi düşünüyorsanız, satır içi CSS iyi bir seçenek olabilir. Yukarıda bahsedildiği gibi, niş bir durum, öncelikle tablolardan oluşan HTML düzenleri oluştururken olabilir (eski bir uygulama).

Satır İçi CSS Örneği Kullanma

Ana başlık

Yukarıdaki kod satırı, kırmızı renkle kaplanmış “Ana Başlık” metnini gösterecektir. Bu, büyük olasılıkla satır içi CSS kullanmanın tek pratik nedenlerinden biridir çünkü genellikle yalnızca bir tane vardır. h1 Belirli bir web sayfasındaki öğe.

Hepsini kaplamayı düşünüyorsanız h2 sarı renkli bir web sayfasındaki öğeler. CSS kullanmanız gerekecek stil anahtar kelime ile birlikte renk özellik ve değeri (sarı). Ancak, bu görevi gerçekleştirmenin daha etkili bir yolu dahili CSS kullanmaktır.

Dahili CSS Örneği Kullanma

Yukarıdaki kodu aşağıdaki alana yerleştirmek HTML dosyanızın etiketi, tüm h2 bu dosyadaki öğeler sarı ile kaplanmıştır. Dahili CSS, HTML kodundan ayrılır ve bu, çeşitli öğe gruplarının hedeflenmesini kolaylaştırdığından yöntemi daha verimli hale getirir.

Öyleyse neden harici CSS uygulama yöntemi hala en çok önerilen yaklaşım? Endişelerin ayrılması. Harici CSS ile CSS kodunuz HTML kodunuzdan tamamen ayrılır, bu da büyük projeler için ölçeklenebilirlik sağlar ve test sürecini daha verimli hale getirir.

Harici CSS Örneği Kullanma

Yukarıdaki kod satırını HTML dosyanızın etiketi, harici CSS yöntemini kullanarak web sayfanızın stilini kolaylaştıracaktır. Yukarıdaki kodun değişecek tek yönü, koda atanan değerdir. href her zaman CSS dosyasının adı olması gereken özellik (.css uzantısı dahil).

İlgili: Basamaklı Stil Sayfaları Nedir ve CSS Ne İçin Kullanılır? CSS dosyanız HTML belgenize bağlıyken, artık CSS dosyanıza CSS kodu yazmaya başlayabilirsiniz. Bu noktada, yukarıdaki dahili CSS örneği ile harici CSS arasındaki tek fark, stil etiket. Bu nedenle, aşağıdaki kodu bir CSS dosyasına eklemek, yukarıdaki dahili CSS örneğiyle aynı sonucu verecektir.

h2{
Sarı renk;
}

CSS Temel Yapısını Keşfetmek

Aşağıdaki örnekte görebileceğiniz gibi, temel CSS bildirimi yedi temel öğe içerir. Hepsi, belirli bir stil tercihleri ​​kümesi elde etmek için birlikte çalışır.

seçici

Bir CSS bildiriminde bir seçici, bir İD, a sınıf, bir öğe veya bazı özel durumlarda bir sözde seçici. Yukarıdaki CSS yapısında a eleman seçici olarak kullanılır, bu da bir web sayfasındaki tüm bağlantıların kırmızı ile kaplanacağı anlamına gelir. Esasen seçicinin amacı, stil verilmesi gereken öğeyi/elemanları belirlemektir.

Beyanname Başlangıç ​​ve Bitiş

Başlangıç ​​ve bitiş bildirimi, belirli bir seçiciye uygulanan tüm stil tercihlerini kapsadıkları için önemlidir. Her iki eleman da bir çift açık ve kapalı kaşlı ayraç ile temsil edilir. Bir bildirim başlangıcı veya bildirim sonu kullanmayı hatırlamanın iyi bir yolu, açık bir küme ayracı varsa, buna karşılık gelen bir kapalı küme ayracı olması gerektiğini ve bunun tersini hatırlamaktır.

Özellikler

Bir bildirim yapısındaki CSS özelliği, yüzün üzerinde farklı özellik türünden herhangi biri olabilir. Yukarıdaki CSS yapısında kullanılan özellik türü renk ve bu özellik bir web sayfasındaki metni hedefler. Daha fazlasını öğrenmek isterseniz, kapsamlı CSS özellikleri listesi ve kullanımları.

Özellik/Değer Ayırıcı

Küçük ve önemsiz gibi görünse de, özellik/değer ayırıcısı CSS yapısındaki diğer tüm öğeler kadar önemlidir. Bu öğenin unutulduğu bir durum olursa, tüm CSS bildirimi yürütülmez.

Değer

CSS özelliği değeri, belirli bir özelliğe tam olarak uygulamak istediğiniz stili temsil eder. Kullanılabilir değerler, özellik türüne bağlıdır. Örneğin, yukarıdaki yapıda kullanılan özellik, renk, bu, bu özelliğe uygulanabilecek yalnızca bir tür değer olduğu anlamına gelir, bir renk adı. A renk değer dört biçimden birinde sunulabilir: bir sözcük değeri (yukarıdaki örnekte olduğu gibi), onaltılık bir değer, bir HSL (Ton, Doygunluk, Açıklık) değeri veya bir RGB (Kırmızı, Yeşil, Mavi) değeri.

Bildirim Ayırıcı

Bildirim ayırıcı, belirli bir stil bildiriminin sonunda olduğunuzu gösterir. Yukarıdaki yapıda yalnızca bir bildirim ayırıcısı vardır, ancak daha fazlası olabilir. Her şey, belirli bir sistemde kullanmayı düşündüğünüz CSS özelliklerinin sayısına bağlıdır. sınıf, İD, veya öğe.

Kimlikler ve sınıflar nedir?

kimlikler ve sınıflar CSS stil oluşturma sürecinde temel bir rol oynar. HTML öğeleri gibi, CSS kimlikler ve sınıflar bir CSS bildiriminde seçici olarak kullanılır. Yine de, sınıflar ve kimlikler bir HTML öğesine göre önceliklidir.

CSS'deki genel kural, bir dosyaya eklediğiniz son stil bildiriminin daha önce orada olanları geçersiz kılmasıdır. Bu nedenle, bir ile iki bildirim varsa h2 Seçici bir CSS dosyasında, en son eklenen bildirim, daha önce orada olanları geçersiz kılar.

Ancak, eğer bu h2 öğenin bir İD bu, bir CSS bildiriminde, konumundan (önce veya sonra) bağımsız olarak h2 seçicisi olarak öğe, içindeki stil tercihi İD bildirim her zaman öğeye göre öncelikli olacaktır. Kısacası, bir İD diğer stil seçicileri geçersiz kılar.

Bir CSS bildiriminde şunu hatırlamak önemlidir, kimlikler bir sayı işaretiyle başlar ve sınıflar bir nokta ile başlar. arasındaki en önemli fark, İD ve bir sınıf bu bir İD benzersizdir, bir sınıf çoğaltılabilir. Örneğin, benzer bir koleksiyon etiketler aynı verilebilir sınıf isim; Ancak İD her biri için etiketinin benzersiz olması gerekir.

Farklı Seçici Türlerini Keşfetmek

Üç temel seçici türü vardır: tekli, çoklu ve iç içe. Şimdiye kadar, bu makale tek seçicileri kapsamlı bir şekilde ele aldı.

CSS kullanırken, farklı öğelerin farklı konumlarda olmasını istediğiniz durumlar olacaktır. Web sayfasının tamamına uygulanan genel stilden farklı, benzer bir stile sahip olması için. Bu durumlarda, çoklu seçicilerin nasıl kullanılacağını bilmek yardımcı olacaktır.

Temel HTML Şablonu Örneği

Hoş geldin

Lorem ipsum dolor sit amet conectetur, adipisicing elit. Engellemek odit voluptates
dignissimos voluptatibus tenetur.  Repudiandae, animi corporis!  mimar
tempora voluptates quisquam facere'de nulla officia placeat! Quod dolore doloribus eos!







Hakkında

Lorem ipsum dolor sit amet conectetur, adipisicing elit. Engellemek odit voluptates
dignissimos voluptatibus tenetur.  Repudiandae, animi corporis!  mimar
tempora voluptates quisquam facere'de nulla officia placeat! Quod dolore doloribus eos!







Başlık

Lorem ipsum dolor sit amet conectetur adipisicing elit. Her şey yolunda gitti!
Ea delectus otur, Laboriosam eos aperiam asperiores? Ad Laborum illo Invente quos est Dolores'de
impedit fugit asperiores repelendus harum maxime voluptate oturmak nulla eaque officiis fuga animi,
perferendis in earum iure dolorum Laboriosam enim reiciendis! Eum boşalmak delectus est tenetur bozuk
mollitia, minima, magni at iusto id necessitatibus harum rasyonel, ipsum doloremque deleniti ex eligendi
engel hic maxime? Eius modi optio reklam, nisi tempora sapiente?







Başlık

Lorem ipsum dolor sit amet conectetur adipisicing elit. Her şey yolunda gitti!
Ea delectus otur, Laboriosam eos aperiam asperiores? Ad Laborum illo Invente quos est Dolores'de
impedit fugit asperiores repelendus harum maxime voluptate oturmak nulla eaque officiis fuga animi,
perferendis in earum iure dolorum Laboriosam enim reiciendis! Eum boşalmak delectus est tenetur bozuk
mollitia, minima, magni at iusto id necessitatibus harum rasyonel, ipsum doloremque deleniti ex eligendi
engel hic maxime? Eius modi optio reklam, nisi tempora sapiente?

Yukarıdaki HTML dosyasına yakından bakarsanız, aralarında var olan dinamiği görürsünüz. kimlikler ve sınıflar. Yukarıdaki dosyaya atıfta bulunarak, aynı stili hakkında bölümü ve sadece web sayfasındaki makaleler, aşağıdaki CSS kodu bunu başaracaktır.

Çoklu Seçici Kullanma Örneği

#Hakkında, .content{
Beyaz renk;
arka plan rengi: koyu mavi;
}

Birden çok seçici kullanırken, her seçiciyi her zaman virgülle ayırmalısınız. Yukarıdaki örnekte iki seçici vardır, bir İD ve bir sınıf. Aşağıdaki virgül ise hakkındaİD eksikse, CSS bildirimi yürütülmez.

Yukarıdaki Temel HTML Şablonu Örneğine geri dönersek, iki tane vardır. etiketler mevcut—biri hoş geldiniz bölümünde, diğeri hakkında bölümünde. Amacınız bunlardan yalnızca birini hedeflemekse etiketler, iç içe bir seçici, go-to yönteminiz olmalıdır.

İç İçe Seçici Örneklerini Kullanma

#Hoşgeldiniz p aralığı{
kırmızı renk;
}

Yukarıdaki iç içe seçici, bir İD ve iki HTML öğesi. Yukarıdaki örnekte görebileceğiniz gibi, yuvalanmış bir seçici size bir grup içindeki belirli bir öğeyi hedefleme olanağı sağlar.

Bu nedenle, yalnızca açıklık bölümündeki etiketi div ile hoş geldiniz kimliği kırmızı renkle kaplanacaktır.

İster CSS gibi bir stil dili veya bir programlama dili kullanıyor olun, kesinlikle nasıl yorum yazılacağını bilmelisiniz. Yorumlar, birden fazla geliştiricinin birlikte çalıştığı kurumsal düzeydeki projelerde çok önemlidir ve ayrıca küçük ölçekli geliştirme yaparken de yararlıdır.

Bir CSS yorumu, iki eğik çizgi, iki yıldız işareti ve bir yorum bölümü içerir.

/* CSS'de tek satırlık bir yorum bu şekilde yazılır */

/*
böyle yazarsın
çok satırlı yorum
CSS'de
*/

Sıradaki ne?

Bu makale size CSS'nin temel bileşenlerini sağlar. Artık bir tanımlama kullanabilirsiniz:

• Üç CSS uygulama yönteminden herhangi biri
• Bir CSS bildirimindeki tüm öğeler
• Üç temel seçici türü
• Bir CSS yorumu

Ancak, bu sadece başlangıç. CSS, dili daha iyi anlamanıza yardımcı olacak birkaç çerçeveye sahiptir. Tek zorluk, hangisinin sizin için en iyisi olduğuna karar vermek.

Tailwind CSS vs. Bootstrap: Hangisi Daha İyi Bir Çerçevedir?

Bir CSS çerçevesi seçerken gereksinimlerinizi karşılayanı bulmak önemlidir.

Sonrakini Oku

Yazar hakkında