Các tham khảo CSS 3.0

1. Cú pháp CSS

Bộ quy tắc CSS bao gồm bộ chọn và khối khai báo:

Cú pháp CSS

Bộ chọn trỏ đến phần tử HTML mà bạn muốn tạo kiểu.
Khối khai báo chứa một hoặc nhiều khai báo được phân tách bằng dấu chấm phẩy.
Mỗi khai báo bao gồm tên thuộc tính CSS và giá trị, được phân tách bằng dấu hai chấm.
Một khai báo CSS luôn kết thúc bằng dấu chấm phẩy và các khối khai báo được bao quanh bởi các dấu ngoặc nhọn.

2. Trình duyệt hỗ trợ

Hầu hết các trình duyệt đều hỗ trợ CSS như Edge/Internet Explorer, Firefox, Google Chrome, Safari, Opera.

Các giải thích thêm cho mỗi trình duyệt:

-ms- cho Edge/Internet Explorer
-moz- cho Firefox
-webkit- cho Google Chrome
-webkit- cho Safari
-webkit- cho Opera

3. Bộ chọn CSS

Trong CSS, bộ chọn là các mẫu được sử dụng để chọn (các) phần tử bạn muốn tạo kiểu. Có 3 loại bộ chọn chính:

+ Bộ chọn .class, ví dụ như .welcome để chọn tất cả các phần tử với class="welcome"
+ Bộ chọn #id, ví dụ như #customer để chọn tất cả các phần tử với id="customer"
+ Bộ trọn phần tử, ví dụ như p để chọn tất cả các phần tử <p> hay div > p để chọn tất cả các phần tử <p> trong đó phần tử cha là phần tử <div>

4. Các hàm CSS

Các hàm CSS được sử dụng làm giá trị cho các thuộc tính CSS khác nhau, có các hàm CSS như:
  1. attr()
  2. calc()
  3. cubic-bezier()
  4. hsl()
  5. hsla()
  6. linear-gradient()
  7. radial-gradient()
  8. repeating-linear-gradient()
  9. repeating-radial-gradient()
  10. rgb()
  11. rgba()
  12. var()

5. Âm thanh CSS

CSS âm thanh sử dụng kết hợp tổng hợp giọng nói và hiệu ứng âm thanh để khiến người dùng nghe thông tin, thay vì đọc thông tin.

Nó có thể được sử dụng bởi:
  1. Những người mù
  2. Để giúp người dùng học đọc
  3. Để giúp người dùng gặp vấn đề về đọc
  4. Cho giải trí gia đình
  5. Trong xe
  6. Bởi các cộng đồng print-impaired

6. Kết hợp phông chữ an toàn trên Web

Khi sử dụng CSS, chúng ta có thể dùng thuộc tính họ phông chữ để giữ một số tên phông chữ dưới dạng hệ thống "dự phòng" nhằm đảm bảo khả năng tương thích tối đa giữa các trình duyệt/hệ điều hành. Nếu trình duyệt không hỗ trợ phông chữ đầu tiên, nó sẽ thử phông chữ tiếp theo.

Ví dụ:

p {font-family: Verdana, Geneva, sans-serif;}

7. Hoạt hình CSS

Một số thuộc tính CSS có thể hoạt hình, có nghĩa là chúng có thể được sử dụng trong hoạt ảnh và chuyển tiếp. Chúng có thể thay đổi dần dần từ giá trị này sang giá trị khác, như kích thước, số, tỷ lệ phần trăm và màu sắc.

Ví dụ như hoàn hình màu nền từ red sang blue, cú pháp chuẩn:

@keyframes mymove {from {background-color: red;} to {background-color: blue;}}

8. Đơn vị CSS

CSS có một số đơn vị khác nhau để thể hiện độ dài, các thuộc tính CSS lấy các giá trị "chiều dài" chẳng hạn như width, margin, padding, font-size, border-width, ...

Độ dài là một số theo sau là một đơn vị độ dài, chẳng hạn như 10px, 2em, ... với một số thuộc tính CSS, độ dài âm được cho phép.

+ Các đơn vị độ dài tuyệt đối như cm, mm, in, px, pt, pc.
+ Các đơn vị độ dài tương đối như em, ex, ch, rem, vw, vh, vmin, vmax, %.

9. Chuyển đổi PX-EM CSS

Có thể thực hiện chuyển đổi đơn vị đo px sang đơn vị đo em và ngươc lại, theo công thức:

16px = 1.0em

10. Màu CSS

Với CSS, màu sắc có thể được đặt bằng cách sử dụng tên màu. Tất cả các trình duyệt hiện đại hỗ trợ 140 tên màu.

Ví dụ về sử dụng tên màu trong CSS:

#p1 {background-color:red;} /* màu red */
#p2 {background-color:green;} /* màu green */
#p3 {background-color:blue;} /* màu blue */

11. Giá trị màu CSS

Màu sắc trong CSS có thể được chỉ định bằng các phương pháp sau:
  • Màu thập lục phân
  • Màu RGB
  • Màu RGBA
  • Màu HSL
  • Màu HSLA
  • Tên màu

12. Giá trị CSS mặc định

Một số giá trị CSS mặc định, với giá trị "độ dài" sẵn có.

Phần Tử Giá Trị CSS Mặc Định
blockquote display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
body display: block;
margin: 8px;
dd display: block;
margin-left: 40px;
dl display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
fieldset display: block;
margin-left: 2px;
margin-right: 2px;
padding-top: 0.35em;
padding-bottom: 0.625em;
padding-left: 0.75em;
padding-right: 0.75em;
border: 2px groove (internal value);
figure display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
h1 display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
h2 display: block;
font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
h3 display: block;
font-size: 1.17em;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
h4 display: block;
margin-top: 1.33em;
margin-bottom: 1.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
h5 display: block;
font-size: .83em;
margin-top: 1.67em;
margin-bottom: 1.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
h6 display: block;
font-size: .67em;
margin-top: 2.33em;
margin-bottom: 2.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
hr display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
legend display: block;
padding-left: 2px;
padding-right: 2px;
border: none;
menu display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
ol display: block;
list-style-type: decimal;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
p display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
pre display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0;
table display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
ul display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;

13. Thực thể CSS

Nếu bạn sử dụng CSS để hiển thị bất kỳ ký tự nào trong HTML, bạn có thể sử dụng thực thể CSS để thực hiện.

Ví dụ về cách sử dụng thực thể:

<style> h4:after { content: ' \2764'; } </style>

Tất cả các phần tử <h4> sẽ được hiển thị với ký tự ♥ ở cuối.