CSS Border Özelliğini Kısaltma

Önceki sayfada gördüğünüz gibi, kenarlıklarla uğraşırken dikkate alınması gereken birçok özellik vardır.

Kodu kısaltmak için, tüm bireysel kenarlık özelliklerini tek bir özellikte belirlemek de mümkündür.

Border özelliği, aşağıdaki bireysel border özellikleri için kısa bir özelliktir:

  • border-width
  • border-style (gerekli)
  • border-color
<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 5px solid red;
}
</style>
</head>
<body> 

<p>  border-width, border-style, ve border-color yazmak yerine kısaca tek satır kod yazdım.</p>

</body>
</html>

Ayrıca yalnızca bir taraf için tüm kenarlık özelliklerini ayrı ayrı belirleyebilirsiniz:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-left: 6px solid red;
  background-color: lightgrey;
}
</style>
</head>
<body> 
<p>border-left-width, border-left-style, ve border-left-color ile solda kenarlık yapımı</p>

</body>
</html>

CSS Alt Kenarlık Oluşturma

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-bottom: 6px solid red;
  background-color: lightgrey;
}
</style>
</head>
<body> 
<p>border-left-width, border-left-style, ve border-bottom-color ile solda kenarlık yapımı</p>

</body>
</html>
13 Ekim 2023
Was this article helpful?

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir