Web sayfalarınıza çekici bir dekorasyon eklemek için bu iki özelliği kullanabilirsiniz, ancak aralarındaki fark nedir?

CSS sınırları ve anahatları, bir siteye yetenek katmak isteyen web tasarımcıları için değerli araçlardır. Nasıl çalıştıklarını öğrendikten sonra kullanımı 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 kutu modelinin iki dış katmanını oluşturur ve kenarlıklar ve kenar boşlukları arasında yer alır. Bu özellikler benzer olsa da farklı değerleri ve amaçları vardır.

Birincisi, CSS ana hatları sınırların dışındadır. Bu, onları uyguladığınız öğenin dışındaki içerikle örtüşebilecekleri 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 zorluk çekiyorsanız, hata ayıklamak için tarayıcınızın geliştirme araçlarını kullanabilirsiniz.

CSS Kenarlığı ve Anahat Paylaşılan Özellik Değerleri

Farklılıklarına rağmen, CSS sınırları ve anahatları bazı değerlerini paylaşır. Her biri için kullandığınız stenografi de çok benzer.

CSS Kenarlık ve Anahat Steno

Diğer karmaşık CSS özellikleri gibi, hem kenarlıklar hem de ana hatlar stenografiye sahiptir. Bu özelliklerin her ikisi de stenografi seçenekleri için aynı formatı paylaşır ve şöyle görünür.

border: width style color;

outline: width style color;

Bu, eylemde olduklarında buna benzeyen kurallar oluşturur. Tabii ki, bu kestirme bu özellikler için mevcut tüm değerleri kapsamaz.

border: 10px solid blue;

outline: 20px solid red;

Bu stenografi CSS kenarlığı ve anahat kuralları, kalın kırmızı bir anahatla ince mavi bir kenarlıkla sonuçlanır.

Diğer steno CSS özellikleri gibi, aynı sonuçları elde etmek için bireysel ö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 anahatların kalınlığını ayarlayan isteğe bağlı CSS özellik değerleridir. Bu özelliklerin formatı aynıdır.

outline-width: 20px;

border-width: 10px;

Kenarlıklar, öğenin her bir kenarı için ayrı genişliklerin ayarlanmasına izin verir, ancak ana hatlar buna izin vermez. Bununla ilgili daha fazla bilgiyi aşağıdaki bölümlerde okuyabilirsiniz.

CSS kenarlık stili ve anahat stili

CSS kenarlıkları ve anahatları çeşitli stillerde gelir. Düz kenarlıklar en yaygın olanıdır, ancak kenarlıkları ve anahatları kullanma şeklinizle yaratıcı olabilirsiniz.

border-style: solid;

outline-style: dotted;

Farklı CSS kenarlıklarının ve anahat stillerinin tam listesini bu makalenin sonunda bulabilirsiniz.

sınır-anahat-stilleri

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ı kodları, RGB kodlarını, stenografi renkleri ve daha fazlasını içerir.

border-color: blue;

outline-color: #ff0000;

CSS kenarlıkları ve anahatlarıyla çalışırken renk gradyanlarını da kullanabilirsiniz.

CSS Kenarlığı Özellik Değerleri

Paylaşılan özellik değerlerinin yanı sıra, sınırlar ve ana hatlar da keşfedilecek benzersiz değerlere sahiptir. CSS sınırlarının öğrenmeye değer iki benzersiz özelliği vardır.

CSS sınır yarıçapı

Bir öğenin sınırına bir yarıçap eklemek, size şekli üzerinde çok fazla kontrol sağlar. Bir elemanın her köşesi farklı bir yarıçapa sahip olabilir ve bu özellik, border-style hiçbiri olarak ayarlandığında bile ayarlanabilir.

border-radius: 20px;

Tüm köşelerin yarıçapını değiştirmek için tek bir değer belirleyebilirsiniz.

css temel sınır yarıçapı

Ayrıca köşeleri sol üst/sağ alt ve sağ üst/sol alt gruplara ayırabilirsiniz.

border-radius: 10px 20px;

Bu, HTML öğelerinizle ilginç şekiller oluşturmayı kolaylaştırır.

css çift kenarlık yarıçapı

Son olarak, her köşeyi kendi yarıçapına sahip olacak şekilde ayarlayabilirsiniz.

border-radius: 10px 20px 30px 40px;

Bu değerler sol üst köşeden başlayarak saat yönünde geçerlidir.

CSS Kenarlık Tarafı Özellikleri

Anahatlardan farklı olarak, bir sınırın her bir tarafını, birçok özelliği için benzersiz bir değere sahip olacak şekilde ayarlayabilirsiniz. Bu, öğenizin her iki tarafına farklı bir genişlik vermeyi mümkün kılar.

border-left-width: 10px;

border-right-width: 20px;

border-top-width: 30px;

border-bottom-width: 40px;

Bir öğenin her bir tarafı için bağımsız CSS kenarlık stilleri de ayarlayabilirsiniz.

border-left-style: solid;

border-right-style: dotted;

border-top-style: dashed;

border-bottom-style: double;

Ve isterseniz her iki tarafın rengini de değiştirebilirsiniz.

border-left-style: blue;

border-right-style: #ff0000;

border-top-style: #00ff00;

border-bottom-style: rgb(0, 0, 255);

CSS kenar kenarları, bu şekilde birleştirmek için normal steno ile çalışır.

border-left: 10px solid blue;

border-right: 20px dotted #00ff00;

border-top: 30px dashed #ff0000;

border-bottom: 40px double rgb(0, 0, 255);

CSS Anahat Özellik Değerleri

CSS kenarlıkları gibi, anahatların da kendilerine ait benzersiz bir özelliği vardır; anahat-ofset.

CSS anahat ofset

Bir anahatta bir öteleme eklemek, kendisi ile ana eleman arasında bir boşluk yaratır. Bu uzaklık, anahattın her bir tarafı için aynı olmalıdır ve özellik yalnızca bir değeri kabul eder.

outline-offset: 10px;

Bu, öğeleriniz için arka plan renginizle eşleşen üçüncü bir kenarlığı kullanmanın güzel 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 seçilebilecek on stil vardır.

border-style: solid;

border-style: dotted;

border-style: dashed;

border-style: groove;

border-style: ridge;

border-style: double;

border-style: inset;

border-style: outset;

border-style: hidden;

border-style: none;

Kenarlıklar, yalnızca özellik olarak ayarlanan anahat stiliyle anahatlarla 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.