CSS sınırları ve ana hatları, bir siteye yetenek katmak isteyen web tasarımcıları için değerli araçlardır. Nasıl çalıştıklarını bildikten sonra kullanımları kolaydır ve çok çeşitli ihtiyaçları karşılayacak kadar çok yönlüdürler. Nereden başlamanız gerektiğini görmek için CSS sınırlarına bakalım.
CSS'de Kenarlık ve Anahat Arasındaki Fark Nedir?
CSS anahatları ve kenarlıklar, CSS'nin dış katmanlarından ikisini oluşturur. CSS kutusu modeli, sınırlar ve kenar boşlukları arasında oturuyor. Bu özellikler benzer olmakla birlikte, farklı değerlere ve amaçlara sahiptirler.
Birincisi, CSS ana hatları sınırların dışındadır. Bu, onları uyguladığınız öğenin dışındaki içerikle çakışabilecekleri anlamına gelir. Bununla birlikte, CSS sınırları bir öğenin boyutlarını değiştirir, ancak ana hatlar değiştirmez.
Kenarlık ve anahat stillerini görselleştirmekte güçlük çekiyorsanız, hata ayıklamak için tarayıcının geliştirme araçları onlara.
CSS Kenarlık ve Anahat Paylaşılan Özellik Değerleri
Farklılıklarına rağmen, CSS sınırları ve ana hatları bazı değerlerini paylaşır. Her biri için kullandığınız steno da çok benzer.
CSS Kenarlık ve Anahat Steno
Diğer karmaşık CSS özellikleri gibi, hem kenarlıklar hem de ana hatlar kısa yoldan kullanılabilir. Bu özelliklerin her ikisi de kısayol seçenekleri için aynı biçimi paylaşır ve şöyle görünür.
sınır: Genişlikstilrenk;
anahat: Genişlikstilrenk;Bu, eylemde olduklarında buna benzeyen kurallar oluşturur. Elbette, yine de bu kısa yol, bu özellikler için mevcut olan tüm değerleri kapsamaz.
kenarlık: 10 piksel sabit mavi;
anahat: 20 piksel sürekli kırmızı;Bu kestirme CSS kenarlık ve anahat kuralları, kalın kırmızı ana hatlı ince mavi bir kenarlıkla sonuçlanır.
Diğer kestirme CSS özellikleri gibi, aynı sonuçları elde etmek için tek tek özellikleri de kullanabilirsiniz.
CSS kenarlık genişliği ve anahat genişliği
Kenarlık ve anahat genişlikleri, kullandığınız kenarlıkların ve ana hatların kalınlığını ayarlayan isteğe bağlı CSS özellik değerleridir. Bu özelliklerin biçimi aynıdır.
anahat genişliği: 20px;
kenarlık genişliği: 10px;Kenarlıklar, öğenin her bir tarafı için ayrı genişliklerin ayarlanmasına izin verir, ancak ana hatlar bunu yapmaz. Bununla ilgili daha fazla bilgiyi aşağıdaki bölümlerde okuyabilirsiniz.
CSS kenarlık stili ve anahat stili
CSS kenarlıkları ve ana hatları çeşitli stillerde gelir. Kesintisiz kenarlıklar en yaygın olanıdır, ancak kenarlıkları ve anahatları kullanma şeklinizle yaratıcı olabilirsiniz.
kenarlık stili: düz;
anahat stili: noktalı;Bu makalenin sonunda farklı CSS kenarlık ve anahat stillerinin tam listesini bulabilirsiniz.
CSS kenarlık rengi ve anahat rengi
Diğer renk tabanlı CSS özelliklerinde olduğu gibi, kenarlıklar ve ana hatlar tüm CSS yasal renklerini kabul eder. Bu, onaltılık kodları, RGB kodlarını, kestirme renkleri ve daha fazlasını içerir.
kenarlık rengi: mavi;
anahat rengi: #ff0000;CSS kenarlıkları ve ana hatlarıyla çalışırken renk gradyanlarını da kullanabilirsiniz.
CSS Sınırı Özellik Değerleri
Sınırlar ve dış hatlar, ortak özellik değerlerinin yanı sıra keşfedilecek benzersiz değerlere de sahiptir. CSS kenarlıklarının öğrenmeye değer iki benzersiz özelliği vardır.
CSS sınır yarıçapı
Bir öğenin kenarına bir yarıçap eklemek, şekli üzerinde size çok fazla kontrol sağlar. Bir öğenin her köşesi farklı bir yarıçapa sahip olabilir ve bu özellik, kenarlık stili yok olarak ayarlandığında bile ayarlanabilir.
sınır yarıçapı: 20px;Tüm köşelerin yarıçapını değiştirmek için tek bir değer ayarlayabilirsiniz.
Ayrıca köşeleri sol üst/sağ alt ve sağ üst/sol alt şeklinde gruplara ayırabilirsiniz.
sınır yarıçapı: 10px 20px;Bu, HTML öğelerinizle ilginç şekiller oluşturmayı kolaylaştırır.
Son olarak, her köşeyi kendi yarıçapına sahip olacak şekilde ayarlayabilirsiniz.
sınır yarıçapı: 10px 20px 30px 40px;Bu değerler sol üst köşeden başlayarak saat yönünde uygulanır.
CSS Kenarlık Tarafı Özellikleri
Ana hatların aksine, bir kenarlığın her bir tarafını, birçok özelliği için benzersiz bir değere sahip olacak şekilde ayarlayabilirsiniz. Bu, öğenizin her bir tarafına farklı bir genişlik vermenizi mümkün kılar.
sol kenarlık genişliği: 10px;
kenar-sağ-genişlik: 20px;
kenarlık-üst-genişlik: 30px;
alt sınır genişliği: 40px;Bir öğenin her bir tarafı için bağımsız CSS kenarlık stilleri de ayarlayabilirsiniz.
sol kenarlık stili: katı;
sağ kenarlık stili: noktalı;
border-top-style: kesikli;
kenar alt stili: çift;Ve isterseniz her bir tarafın rengini değiştirebilirsiniz.
sol kenarlık stili: mavi;
sağ kenarlık stili: #ff0000;
sınır üstü stili: #00ff00;
kenar alt stili: rgb (0, 0, 255);CSS kenarlık kenarları, bu şekilde birleştirmek için normal steno ile çalışır.
sol kenarlık: 10 piksel sabit mavi;
sağ kenarlık: 20piksel noktalı #00ff00;
kenarlık üstü: 30piksel kesikli #ff0000;
alt kenarlık: 40piksel çiftrgb(0, 0, 255);CSS Anahat Özellik Değerleri
CSS kenarlıkları gibi, ana hatların da kendilerine özgü benzersiz bir özelliği vardır; anahat ofseti.
CSS anahat ofseti
Bir dış hatta öteleme eklemek, kendisi ile ana öğe arasında bir boşluk oluşturur. Bu uzaklık, dış hattın her bir tarafı için aynı olmalıdır ve özellik yalnızca bir değer kabul eder.
ana hat ofseti: 10 piksel;Bu, öğeleriniz için arka plan renginizle eşleşen üçüncü bir kenarlıktan yararlanmanın zarif bir yolu olabilir.
CSS Kenarlık ve Anahat Stilleri
Hem kenarlıklar hem de ana hatlar çalışmak için bir stile ihtiyaç duyar. Hiç görünmeyen kenarlıklar da dahil olmak üzere, aralarından seçim yapabileceğiniz on stil vardır.
kenarlık stili: düz;
kenarlık stili: noktalı;
kenarlık stili: kesikli;
kenarlık stili: oluk;
kenarlık stili: sırt;
kenarlık stili: çift;
kenarlık stili: iç metin;
kenarlık stili: başlangıç;
kenarlık stili: gizli;
kenarlık stili: yok;Kenarlıklar, yalnızca özellik olarak anahat stili ayarlandığında, ana hatlarla aynı stilleri paylaşır.
CSS Kenarlıkları ve Anahatları Nasıl Kullanılır?
Ana hatlar ve kenarlıklar, web sitesi yaratıcıları için harika tasarım araçlarıdır. Bu CSS özellikleriyle web sitenizin görünümünü ve verdiği hissi tanımlayabilirsiniz, ancak yaratıcı olmanız gerekir.
