Cú pháp của CSS

Cú pháp của CSS bao gồm bộ chọn CSS (CSS selector) và một khối khai báo các thuộc tính.

Bộ chọn CSS giúp xác định phần tử HTML mà bạn muốn định dạng, tạo kiểu dáng (style).

Khối khai báo chứa một hoặc nhiều khai báo thuộc tính CSS, được phân tách bằng dấu chấm phẩy ‘;’. Mỗi khai báo thuộc tính gồm một tên thuộc tính CSS và một giá trị, được phân tách bằng dấu hai chấm ‘:’. Các khối khai báo được bao quanh bởi dấu ngoặc nhọn.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
  <title>CSS Syntex Examples</title>
  <style>
    h1 {
      font-size: 28px;
      color: green;
      text-align: center;
    }
    p {
      color: blue;
      font-size: 20px;
    }
    li {
      color: purple;
      font-size: 18px;
      list-style-type: circle;
    }
    .container{
      margin: auto;
      max-width: 50%;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>CSS Syntax Examples</h1>
    <p>The basic goal of the Cascading Stylesheet (CSS) language is to allow a browser engine to paint elements of the page with specific features, like colors, positioning, or decorations. The CSS syntax reflects this goal and its basic building blocks are:</p>
    <ul>
      <li>
        The property which is an identifier, that is a human-readable name, that defines which feature is considered.
      </li>
      <li>
        The value which describe how the feature must be handled by the engine. Each property has a set of valid values, defined by a formal grammar, as well as a semantic meaning, implemented by the browser engine.
      </li>
    </ul>
  </div>
</body>
</html>

Kết quả

Giải thích ví dụ

h1 {
      font-size: 28px;
      color: green;
      text-align: center;
    }

h1 là một selector trong CSS, xác định phần tử HTML muốn định dạng là thẻ <h1>
font-size là thuộc tính CSS, 28px là giá trị
color là thuộc tính CSS, green là giá trị
text-align là thuộc tính CSS, center là giá trị

p {
      color: blue;
      font-size: 20px;
    }

p là một selector trong CSS, xác định phần tử HTM muốn định dạng là thẻ <p>
color là thuộc tính CSS, blue là giá trị
font-size là thuộc tính CSS, 20px là giá trị

li {
      color: purple;
      font-size: 18px;
      list-style-type: circle;
    }

li là một selector trong CSS, xác định phần tử HTM muốn định dạng là thẻ <li>
color là thuộc tính CSS, purple là giá trị
font-size là thuộc tính CSS, 18px là giá trị
list-style-type là thuộc tính CSS, circle là giá trị

.container{
      margin: auto;
      max-width: 50%;
    }

.container là một selector trong CSS, xác định phần tử HTM muốn định dạng là những phần tử có thuộc tính class="container"
margin là thuộc tính CSS, auto là giá trị
max-width là thuộc tính CSS, 50% là giá trị

Với những khai báo thuộc tính khác nhau theo đúng cú pháp của CSS, các phần tử HTML sẽ có định dạng khác nhau.

5/5 - (1 bình chọn)

Chia sẻ trên mạng xã hội:

css tricks programming

Cú pháp của CSS

Ví dụ:

Kết quả

Giải thích ví dụ

Để lại một bình luận Hủy

Lưu ý:

Ví dụ:

Kết quả

Giải thích ví dụ

Bài viết liên quan

Để lại một bình luận Hủy

Lưu ý: