Tidadigi Logo

CSS | Shorthand Properties

Các thuộc tính Shorthand cho phép viết nhiều thuộc tính trên một dòng ngắn gọn hơn. Chúng hữu ích vì cung cấp code rõ ràng và giảm số dòng code (LOC). Các thuộc tính Shorthand chúng ta sẽ đề cập:

  1. Background
  2. Font
  3. Border
  4. Outline
  5. Margin
  6. Padding
  7. List

Background: Thuộc tính CSS Background dùng để thiết lập background cho trang web. Background có thể áp dụng cho mọi phần tử như body, h1, p, div... Có nhiều thuộc tính background như color, image, position. Một số thuộc tính được dùng trong code dưới đây.

  • Longhand way:
html 
background-color:#000;
background-image: url(images/bg.png);
background-repeat: no-repeat;
background-position:left top;
  • Shorthand way:
html 
background:#000 url(images/bg.png) no-repeat left top;
  • Example:
html 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,
          initial-scale=1.0" />
    <title>Document</title>

    <style>
        body {
            background: #000 url(images/bg.png) no-repeat left top;
        }
    </style>
</head>

<body></body>

</html>
  • Output: css-shorthand-properties

Font: Thuộc tính CSS font dùng để áp dụng các font khác nhau cho text trên trang web. Các thuộc tính có thể thiết lập bằng font là font-family, font-size, font-weight. Một vài thuộc tính sẽ được dùng trong code bên dưới.

  • Longhand way:
html 
font-style:italic;
font-weight:bold;
font-size:18px;
line-height:150%;
font-family:Arial,sans-serif;
  • Shorthand way:
html 
font: italic bold 18px/150% Arial, sans-serif;
  • Example:
html 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,
                                   initial-scale=1.0" />
    <title>Document</title>

    <style>
        h1 {
            font: italic bold 18px/150% Arial, sans-serif;

        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
</body>

</html>
  • Output: css-shorthand-properties

Border: Thuộc tính CSS border dùng để áp dụng border cho các phần tử khác nhau của trang web. Border có nhiều thuộc tính như width, style, color.

  • Longhand way:
html 
   border-width: 1px;
   border-style: solid;
   border-color: #000;
  • Shorthand way:
html 
border: 1px solid #000;
  • Example:
html 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,
                          initial-scale=1.0" />
    <title>Document</title>

    <style>
        h1 {
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
</body>

</html>
  • Output: css-shorthand-properties

Outline: Thuộc tính CSS outline dùng để áp dụng outline cho các phần tử trên trang web.

  • Longhand way:
html 
outline-width: 1px;
outline-style: solid;
outline-color: #000;
  • Shorthand way:
html 
outline: 1px solid #000;
  • Example:
html 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,
                                   initial-scale=1.0" />
    <title>Document</title>

    <style>
        h1 {
            outline: 10px solid #000;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
</body>

</html>
  • Output: css-shorthand-properties

Margin: Các thuộc tính CSS margin dùng để tạo khoảng trắng xung quanh phần tử, bên ngoài border. Chúng ta có thể định nghĩa margin cho cả 4 cạnh: trên, dưới, trái, phải.

  • Longhand way:
html 
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left :5px;
  • Shorthand way:
html 
margin : 10px 5px 10px 5px;
  • Example:
html 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,
                          initial-scale=1.0" />
    <title>Document</title>

    <style>
        h1 {
            margin: 100px 50px 100px 50px;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
</body>

</html>
  • Output: css-shorthand-properties

Padding: Các thuộc tính CSS padding dùng để tạo khoảng trắng xung quanh nội dung, bên trong border. Padding có thể áp dụng cho top, bottom, left và right.

  • Longhand way:
html 
padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left :5px;
  • Shorthand way:
html 
padding : 10px 5px 10px 5px;
  • Example:
html 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,
                          initial-scale=1.0" />
    <title>Document</title>

    <style>
        h1 {
            padding: 100px 50px 100px 50px;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
</body>

</html>
  • Output: css-shorthand-properties

Margin và Padding cũng chấp nhận hai và ba giá trị trong dạng shorthand. Ví dụ:

margin: 50px 75px; // margin trên-dưới là 50px và margin phải-trái là 75px. Điều tương tự áp dụng cho padding.

margin: 50px 35px 75px; // margin trên là 50px margin phải-trái là 35px và margin dưới là 75px. Điều tương tự áp dụng cho padding.

Nó áp dụng theo chiều kim đồng hồ bắt đầu từ trên, phải, dưới, trái.

List: Có hai loại list chính trong CSS: 1. Ordered list <ol> 2. Unordered list <ul>. Unordered list có dấu chấm đầu dòng, ordered list có số.

  • Longhand way:
html 
list-style-type: disc;
list-style-position: inside;
list-style-image: url(disc.png);
  • Shorthand way:
html 
list-style: disc inside url(disc.png);
  • Example:
html 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,
                       initial-scale=1.0" />
    <title>Document</title>

    <style>
        li {
            list-style: disc inside url(assets/hole.png);
        }
    </style>
</head>

<body>
    <li>GeeksforGeeks</li>
</body>

</html>
  • Output: css-shorthand-properties

Last Updated : 20/07/2025