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ínhclass="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.
- Lớp dẫn xuất (derived class) trong lập trình hướng đối tượng với C++
- Các kỹ thuật lập trình với tập tin (file) trong C++
- Cách sử dụng biến (variable) và hằng (constant) trong PHP
- Cú pháp và cách sử dụng vòng lặp while trong C++
- Phương thức tĩnh (static method) và thuộc tính tĩnh (static property) trong PHP