CSS Temel Kavramlara Dön Açıklama Açıklandı
CSS veya Cascading Stylesheets, web için tasarım kurallarının tanımlayıcı dilini tamamlar. Her yerdeki sanatçılar, temel web sitesi düzenleri için kural kümelerini oluşturmak, düzenlemek ve kodlamak için günlük olarak CSS kullanıyor. Bu, ön uç tasarım için en popüler dil haline geldi ve CSS3'ün son sürümüyle inanılmaz yetenekler sunuyor. Fakat bu kodun tümü aslında ne anlama geliyor??
Dilin kendisi birkaç yıldır tamamen gelişmiştir. Karışıklık çoğunlukla yanlış iletişim ve benzer terimlerin yanlış kullanımı nedeniyle ortaya çıkabilir. CSS, masaya birçok yeni konsept getiriyor. Bir CSS gurusu olarak ustalaşmak için kullanılan en popüler terminolojiden bazılarını ele alacağız.
Neden CSS ile Uzmanım??
Bu soru daha önce yayınlandı ve hatta 2011'e girerken aynı sonuçların ortaya çıktığını görebiliriz. CSS yazmayı veya programlamayı sevmeyen güçlü bir dildir. Bir web sayfasının nasıl davranması gerektiğini açıklamak için kullanılan bir stil dili, daha spesifik olarak kullanılan bir kod..
CSS kullanarak, HTML öğelerinin özniteliklerini doğrudan değiştirebiliriz. Tüm bloklar, paragraflar, bağlantılar ve görüntüler CSS kurallarından etkilenebilir. Web için sunum anlamını rafine etmek her zaman büyük bir adım olmuştur. Bu, CSS'nin hala tasarımcılar için lider oyuncu olmasının ana nedeni - kimse daha iyi bir şey yaratmadı.!
Özellikler ve Değerler
Bu, CSS'ye girmenin en basit yoludur. Tüm kod iki işleme ayrılır: tasarımları uygulamak için bir eleman seçmek ve ne uygulanacak. İkincisi, özellik / değer çiftleri aracılığıyla yaratılır.
Örnek olarak kırmızı renk; çok basit bir özellik / değer çifti. Kullandığımız özellik renk bu kabul edilebilir herhangi bir kabul etmemizi sağlar değer Metin rengini değiştirmek için Bu ayrıca onaltılık kod veya RGB (Kırmızı-Yeşil-Mavi) renk verileri olabilir. Çoğu zaman tasarımcılar değer fikrinden bahsetmez çünkü yanıltıcı olabilir.
Özellikler ve değerler gerçekten tek bir fikirdir. Her mülk bildiriminde bir değer gereklidir ve değerler kendi başlarına anlamsızdır. Çevrimiçi olarak birçok farklı özelliğe ve HTML öğelerini nasıl etkilediğine dair çok fazla belge var. Yakındaki herhangi bir kitapçıdan bir CSS referans kitabı satın almanızı tavsiye ederim. Oldukça ucuzlar ve ihtiyacınız olan tüm bilgileri saklıyorlar.
Seçici Değerler
CSS kodunun tamamını tamamlamak için seçicilere ihtiyaç var. Bunlar, ne tür bir eleman hedeflediğimizi belirlediğimizi beyan ediyoruz. Pek çok seçici var ve pek çok kişi o kadar içindeydi ki ortalama bir tasarımcı yeteneklere ihtiyaç duymayacaktı. Daha fazla bilgi edinmek istiyorsanız, W3'ün seçici dokümanlarını kontrol edin..
Stil tanımlarına başlamanın en basit yolu, çıplak elemanları özellik seçicileri olarak kullanmaktır. Bu gibi kök kodunu değiştirmek anlamına gelir p paragraflar için, div bölümler için ve hatta vücut ve html tüm web sayfası belgesini değiştirmek için kullanılabilir. Aşağıda, tüm paragraf öğelerinin şekillendirilmesinin hızlı bir örneği verilmiştir..
p font-family: Arial, sans-serif; renk: # 222; yazı tipi ağırlığı: kalın;
CSS'ye gerçek ağırlık veren, seçici seçicinin ne kadar hassas olabileceğidir. Hedeflenen stilleri gerçekleştirmenin en iyi yolu olarak bilinen 2 yöntemdir. sınıflar ve kimlikleri. Bunlar HTML'deki herhangi bir öğeyi öznitelikler yoluyla bir kimliğe ve sınıf değerine sahip olacak şekilde ayarlayabileceğiniz sıradan fikirler. O zaman CSS kullanarak, belirli bir bloğa stil uygulamak çok kolaydır..
p # firstpar font-size: 14px; / * "firstpar" kimliğine sahip paragraf stilleri * / p.comment font-size: 1.0em; hat yüksekliği: 1.3em; / * "comment" sınıfı * ile paragraf (lar)
Uzunluk Birimleri ve Değerler
Çoğu zaman bu terimler karışır, büyük bir sürpriz olmaz. Değerler, bir mülkü tanımlamak için kullandığımız yerleşim olarak daha önce açıklanmıştır. Uzunluk birimleri aynı zamanda bir özelliği tanımlamak için kullanıldığı değerlerdir..
Aradaki fark, bu değerlerin sayısal veri gerektirmesidir ve bu nedenle bazı birimler biçimini döndürmelidir. Piksel (px) en yaygın olanıdır ve çoğu şey için kullanılabilir: genişlik / yükseklik, yazı tipi boyutu, dolgu / kenar boşlukları, birkaç isim vermek için.
Bunların dışında, akışkan düzenlerinde sıkça kullanılan yüzdeleri (%) görebilirsiniz. Genişlik değerlerinin yüzde olarak ayarlanması durumunda, derleyici, web tarayıcısının tüm genişliğinin% 100 olduğunu varsayar. Bu, tasarım yapanlara mizanpaj yapılarına ve hatta sayfa tipografisine stil uygularken çok fazla hassasiyet verir.
Beyanname Bloğu
Şimdi tüm bu terimleri bir araya getirdikten sonra, nihayetinde stil sayfalarının ardındaki temel fikri tartışabiliyoruz. Kod blokları, konu alanlarını belirlemek ve eleman ayrıntılarını belirtmek için kullanılır. Örneğin, aşağıdakiler basit bir gezinme konteyneri için bir kod satırıdır:
div # nav ekran: blok; genişlik:% 100; dolgu maddesi: 3px 6px; marj-alt: 20 piksel;
Bu kodu görüntülemenin en kolay yolu, özellikleri birbiri ardına sıraya koymaktır. CSS geliştiricileri, her özelliği kendi satırına bölmek için kod blokları kullandı. Bu gündem yalnızca daha fazla yer kaplamakla kalmıyor, aynı zamanda “kaymağı alınmış” tam olarak neye ihtiyacınız olduğunu bulmak için.
Kod bloklarını parçalamanın daha iyi bir yolu, kıvrımlı elemanları bir eşiğe ulaştıktan sonra kendi parçalarına ayırmaktır. Bu sayı kişiseldir ve geliştiriciler arasında farklı olacaktır. Mantığın her şeyi tek bir satırda tutmak için aptalca dikte ettiği, özellikle de okunabilirlik nedeniyle devrilme noktası..
Aşağıda hep birlikte gezinme özellikleri bloğu örneği yazdım. Bu uygulama, daha derin öğeleri aynı konumda tutar, böylece tüm gezinme öğelerinde yapılan düzenlemeler çok daha kolaydır..
div # nav ekran: blok; genişlik:% 100; dolgu maddesi: 3px 6px; marj-alt: 20 piksel; div # nav ul list tarzı: yok; Ekran bloğu; div # nav ul li float: bırak; sağ kenar: 10px; yazı tipi boyutu: 12 piksel; div # nav ul li a renk: # 0f0f0f; metin dekorasyon: yok; ekran: satır içi blok; dolgu maddesi: 2px 5px;
CSS2 / CSS3'ten Olası Gelişmeler
Son zamanlarda, Manşetler’de CSS3’ün inanılmaz yararları hakkında durmaksızın konuşma yapıldı. Ama gerçekte ne var değişmiş dilde Açıkça eski kod hala iyi çalışacaktır. Bu en azından derleyiciler arasında geriye dönük uyumluluk gösterir (her zaman iyi bir şeydir).
Büyük farklılıklar çoğunlukla yeni mülklerle ilgilidir. Bunlar, yuvarlatılmış köşelerin ve alt gölge efektlerinin tarayıcıda oluşturulmasını sağlar. CSS3 ayrıca belgedeki renkleri tanımlamak için yeni araçlar sunar. HSL (Ton-Doygunluk-Hafiflik), opaklığı azaltmak için bir Alfa kanalı içeren HSLA'ya ek olarak en yenisidir..
Özellik seçicileri, düz biçimlendirme stilinde ileriye yönelik büyük bir adımdır. Bu kod stili ile, belirli değerlere sahip özellikler içeren belirli bir öğe adını hedefleyebilirsiniz. Bunlar çoğunlukla, düğümleri değiştirmek için standart tasarım ilkelerinin bulunmadığı XML gibi biçimlendirme ile çalışırken kullanışlıdır. Aşağıdaki örnek nispeten basit bir fikirdir:
div [attrib ^ = "1"] / * burada stilleri * /
Yukarıdaki kod, CSS seçici kitaplığının bir parçasıdır. Bu, tüm div öğelerini bir öznitelikle etkiler “attrib” aynı zamanda değer “1”. Bu hala kafa karıştırıcı ise açıklığa kavuşturmak için aşağıdaki örneğe başvurunuz. Teorik olarak bu iki seçici aynı eylemleri gerçekleştirmelidir.
p [id ^ = "birincil"] / * stiller * / p # birincil / * styles * /
Sonuç
Aşırı karışık terimlerden birkaçının yıkılmasından sonra, CSS parkta yürüyüşe benziyor. Dil çok sezgiseldir ve yeni başlayanlar eldeki ilk birkaç saat içinde tasarlamaya başlayabilir. Web geliştiricileri arasında CSS'yi bu kadar popüler yapan da budur.
CSS3'ün faydaları henüz yeni etkili olmaya başladı. Yeni birkaç yılda gelişen web trendleri, web sayfası tasarımı üzerinde gerçekten ne kadar kontrol sahibi olduğumuzu gösterecek. CSS şu anda ön uç web sitesi tasarımında baskın dil olarak gurur duyuyor. İlkel orta seviye becerilerde bile pratik yapmak, bol miktarda tasarım deneyimi ve daha fazla bilgi üretebilir.
