Tüm mantıksal yapısı için Basamaklı Stiller (CSS)basitlik, yalnızca etkili bir tasarım çözümü oluşturmaya değil, aynı zamanda gerçek eylemli öğeler sağlamaya, gerçek kodun yürütülmesini taklit etmeye izin verir.
Herhangi bir görsel HTML işaretleme etiketi -belirli bir yapıya ve içeriğe sahip dikdörtgen bir alan. Öğe, koordinatların, boyutların, girintilerin, renklerin, yazı tipinin, stilinin vb. göstergesini içerir. Bir CSS öğesinin çerçevesi, sınırından içe doğru, açıklamada belirtilen genişlikte yer alan, kapladığı alanı belirtir.
Açıklama sözdizimi
Öğe yerleştirme alanı koordinatlarla belirlenirsayfanın sol üst köşesine göre (sol, üst), yatay ve dikey olarak (genişlik, yükseklik). Bir elemanın tüm tasarımı ve animasyonu çiftler halinde gerçekleştirilir: "özellik: değer".
Açıklama, doğrudan sayfa kodunda, ekleme stilinde veya bir LINK bağlantısıyla işaret edilerek ayrı bir dosyada gerçekleştirilir. Sözdizimi:
#name {özellik: değer; mülk değeri; mülk değeri; ...}
veya
.name {özellik: değer; mülk değeri; mülk değeri; ...}
Ad ayrıca p, gövde, html, tablo, td ..., yani HTML işaretleme etiketinin adı olabilir. Doğrudan öğeye bir stil açıklaması eklenmesine izin verilir.
Kendi seçeneklerinizi oluşturmadan önceyazma stilleri, popüler sitelerde nasıl yapıldığını görmek, sayfa kodunu kaydetmek veya doğrudan tarayıcıda görüntülemek için Ctrl-U tuşlarına basmak zarar vermez.
Temel parametreler
Öğe için gerçek CSS çerçevesi sunulurstil (border-style), color (border-color), genişlik (border-width). Her şey tek bir özellik ile tanımlanabilir - sınır. Çerçevenin her kenarlığını bağımsız olarak tanımlayabilirsiniz (kenarlık-üst, kenarlık-alt, kenarlık-sol, kenarlık-sağ).
CSS çerçevesi, basamaklı stil sayfalarının genel kurallarına göre tanımlanır:
sınır: 3 piksel;
sınır rengi: kırmızı;
kenarlık stili: çift kesikli düz noktalı.
Bu açıklama, kenarlık genişliğini 3 piksele, rengi kırmızıya, yan stili ayarlar: üst taraf çift, sağ taraf kesik, alt düz, sol taraf noktalı.
kenarlık genişliği: 1px 2px 4px 8px;
sınır rengi: mavi;
kenarlık stili: noktalı.
Burada, her iki tarafın boyutları da sırayla, üstten başlayarak saat yönünde, renk mavidir ve stil noktalıdır.
sınır rengi: mavi kırmızı yeşil siyah;
bu açıklama, her bir tarafın rengini ayrı ayrı gösterir. Border özelliği aynı anda birkaç parametre içerebilir ve sınırın köşeleri yuvarlatılabilir:
kenarlık: 1 piksel yeşil düz;
sınır yarıçapı: 0px 4px 8px 12px;
-moz-border-radius: 0px 4px 8px 12px;
-webkit-border-radius: 0px 4px 8px 12px;
CSS'de sınırın nasıl yapılacağı,ziyaretçinin rahatlığı, çünkü bu stil efekti genellikle teknik amaçlar için kullanılır: sayfadaki alanın tam olarak yerini veya boyutunu göstermek önemli olduğunda.
Çerçeve kalınlığı ve amacı
Çerçeve kalınlığını seçerken px, pt,em ..., ancak her zaman öğenin alanı içinde olduğunu unutmayın. Bir CSS kenarlığının bir tasarım amacı olduğunu varsaymak zordur, ancak teknik açıdan sayfa öğelerini vurgulamak için kullanımı çok uygundur.
Çerçeve ana sınıfta kilitliyse, o zamaneksikse, daha sonra şunu belirterek: hover sözde sınıfında, fare imleci üzerindeyken sayfa öğesini ziyaretçiye gösterebilir, örneğin bir menü öğesi seçebilirsiniz. Bazen resme tıklayarak bir şey seçmeniz veya bir şeyi bir yere sürükleyip bırakmanız gerekir. Bir öğenin arka planını veya içeriğini değiştirmek yerine burada noktalı bir kenarlık kullanmak çok uygundur.
Bazı uygulamaların vurgulanması gerekiyorsayfanın alanı veya daha fazla işlem için öğelerin seçimi. Bu durumda, tıklama anında kenarlıklı bir div oluşturabilir ve ziyaretçi fare düğmesini bırakana kadar yeniden boyutlandırabilir ve seçimin sonucunu görsel olarak gösterebilirsiniz.
Öngörülenlerin ötesinde
CSS dersleri çok ilginç, popüler sitelerin sayfalarının kodlarını incelemek de önemli. Ancak, kendi kaynağı benzersiz olmalı, kendi kimliğine sahip olmalıdır.
Sözdizimi tarafından sağlanan CSS sınırıkendi inisiyatifleri gibi bir çeşitlilik. Doğaçlama harika bir başlangıçtır ve geliştiricinin kendi çerçevesini oluşturmasını engelleyen hiçbir şey yoktur. Ayrıca, İnternet teknolojilerinin tüm başarıları ve mevcut standartların yetenekleri ile, (tanım gereği) her zaman kesinlikle resmi olan mevcut sözdizimindeki gerçek kusurlara dayanan birçok umut verici fikir vardır.
Özellikle, bunlar için gerçekten bir çerçeve oluşturursak veyadiğer unsurlar, bunu kapsamlı bir şekilde yapmak tavsiye edilir. Bir alanın kenarlarını ve köşelerini ayrı etiketlerde seçerek harika efektler elde edebilirsiniz. Uygun işleyicileri atayarak konumu, şekli ve içeriği değiştirerek dinamik sayfa öğeleri oluşturabilirsiniz.
