Basamaklı Stil Sayfaları (CSS) Nedir?
Basamaklı stil sayfalarının nasıl çalıştığının tam açıklaması için aşağıyı okuyun. Bulması ve kullanması kolay olsun diye uygulamalarımızı sayfanın üst kısmında gösteriyoruz. Bu makaleyi e-posta veya besleme yoluyla okuyorsanız, tıklayın CSS'nizi sıkıştırın.
Gerçekte site geliştirmiyorsanız, basamaklı stil sayfalarını tam olarak anlayamayabilirsiniz (CSS). CSS, bir belgenin görünümünü ve biçimlendirmesini tanımlamak için kullanılan bir stil sayfası dilidir. HTML or XML. Yazı tipi, renk, boşluk ve düzen gibi çeşitli öğelerin stillerini belirtmek için CSS kullanılabilir. CSS, HTML belgenizin sunumunu içeriğinden ayırmanıza olanak tanıyarak web sitenizin görsel stilini korumayı ve güncellemeyi kolaylaştırır.
CSS Dil Yapısı
The selektör stil vermek istediğiniz HTML öğesidir ve özellik ve değer o öğeye uygulamak istediğiniz stilleri tanımlayın:
selector {
property: value;
}Örneğin, aşağıdaki CSS, tüm <h1> bir sayfadaki öğelerin kırmızı rengi ve 32 piksel yazı tipi boyutu vardır:
CSS
h1 {
color: red;
font-size: 32px;
}Çıktı
Başlık
Bir öğede benzersiz bir kimlik için CSS de belirleyebilirsiniz:
CSS
/* styles for an element with ID "intro" */
#intro {
font-weight: bold;
text-align: center;
}Çıktı
Veya birden çok öğeye bir sınıf uygulayın:
CSS
/* styles for elements with class "highlight" */
.highlight {
background-color: yellow;
}Çıktı
Ben istiyorum vurgulamak span etiketindeki bir kelime.
HTML belgenize CSS'yi üç şekilde dahil edebilirsiniz:
- kullanarak satır içi CSS
stylebir HTML öğesindeki öznitelik - Dahili CSS, bir
<style>eleman<head>HTML belgenizin - Harici CSS, HTML belgenize bağlı ayrı bir .css dosyası kullanılarak
<link>eleman<head>HTML belgenizin
Duyarlı CSS
CSS inanılmaz derecede esnektir ve öğelerin görüntüsünü ekran çözünürlüğüne göre ayarlamak için kullanılabilir, böylece aynı HTML'ye sahip olabilir ancak onu oluşturabilirsiniz. duyarlı cihaz çözünürlüğüne:
/* media query for responsive design */
@media (max-width: 768px) {
p {
font-size: 14px;
}
#intro {
font-size: 20px;
}
}CSS Sıkıştırma
Yukarıdaki örnekte, CSS'nin görünümünü düzenlemek için boşluklar ve satır beslemeleri kullanan bir yorum, medya sorgusu ve birden çok stil olduğunu görebilirsiniz. Dosya boyutlarını ve ardından stilinizi istemek ve oluşturmak için gereken süreyi azaltmak için sitenizdeki CSS'nizi küçültmek veya sıkıştırmak harika bir uygulamadır. Küçük bir miktar değil… yukarıdaki bazı örneklerde %50'nin üzerinde tasarruf görebilirsiniz.
Birçok sunucu yapılandırması, CSS'yi anında otomatik olarak sıkıştıracak ve küçültülmüş dosyayı önbelleğe alacak araçlar sunar, böylece bunu manuel olarak yapmak zorunda kalmazsınız.
SCSS nedir?
Salaş CSS (SCSS), CSS diline ek işlevsellik ve sözdizimi ekleyen bir CSS ön işlemcisidir. Standart CSS'de bulunmayan değişkenlerin, karışımların, işlevlerin ve diğer özelliklerin kullanımına izin vererek CSS'nin yeteneklerini genişletir.
SCSS Avantajları
- Geliştirilmiş sürdürülebilirlik: Değişkenlerin kullanımıyla, değerleri tek bir yerde saklayabilir ve stil sayfanızda yeniden kullanabilirsiniz, böylece stillerinizi korumayı ve güncellemeyi kolaylaştırırsınız.
- Daha iyi organizasyon: Karışımlarla, stil kümelerini gruplayabilir ve yeniden kullanabilir, böylece stil sayfanızı daha düzenli ve okunması daha kolay hale getirebilirsiniz.
- Artırılmış işlevsellik: SCSS, işlevler, kontrol yapıları (örn. if/else) ve aritmetik işlemler gibi standart CSS'de bulunmayan birçok özelliği içerir. Bu, daha dinamik ve etkileyici bir stil sağlar.
- Daha iyi performans: SCSS dosyaları, tarayıcı tarafından ayrıştırılması gereken kod miktarını azaltarak performansı artırabilen CSS'de derlenir.
SCSS Dezavantajları
- Öğrenme eğrisi: SCSS, standart CSS'den farklı bir sözdizimine sahiptir ve bu yeni sözdizimini etkili bir şekilde kullanmadan önce öğrenmeniz gerekir.
- Ek karmaşıklık: SCSS, stil sayfanızı daha düzenli ve bakımı kolay hale getirebilse de, özellikle yeni özelliklere ve sözdizimine aşina değilseniz, kod tabanınıza ek karmaşıklık getirebilir.
- Araçlar: SCSS'yi kullanmak için, SCSS kodunuzu CSS'ye çevirecek bir derleyiciye ihtiyacınız olacak. Bu, bazı geliştiriciler için giriş engeli olabilecek ek kurulum ve araçlar gerektirir.
Aşağıdaki bu örnekte, SCSS kodu değerleri depolamak için değişkenleri kullanır ($primary-color ve $font-size) stil sayfası boyunca yeniden kullanılabilir. Bu SCSS kodundan oluşturulan CSS kodu eşdeğerdir ancak değişkenleri içermez. Bunun yerine, değişkenlerin değerleri doğrudan CSS'de kullanılır.
$primary-color: blue;
$font-size: 16px;
body {
font-size: $font-size;
color: $primary-color;
h1 {
font-size: 2em;
color: $primary-color;
}
}Bu örnekte gösterilen SCSS'nin bir başka özelliği de iç içe stillerdir. SCSS kodunda, h1 stiller iç içe geçmiştir body standart CSS'de mümkün olmayan stiller. SCSS kodu derlendiğinde, iç içe stiller, CSS kodunda ayrı stillere genişletilir.
Genel olarak SCSS, standart CSS'ye göre birçok avantaj sağlar, ancak ödünleşimleri göz önünde bulundurmak ve ihtiyaçlarınıza ve kısıtlamalarınıza göre projeniz için doğru aracı seçmek önemlidir.
İlgili bağlantılar Martech Zone İçerik
