07/05/2018, 15:09
Tổng hợp các thuộc tính trong CSS
Trong chương này, mình sẽ liệt kê hầu như tất cả các thuộc tính trong CSS để giúp bạn tiện tìm kiếm và tham khảo. Trong List dưới đây, mình tổng hợp và phân loại các thuộc tính liên quan với nhau thành một nhóm để bạn tiện theo dõi. ...
Trong chương này, mình sẽ liệt kê hầu như tất cả các thuộc tính trong CSS để giúp bạn tiện tìm kiếm và tham khảo.
Trong List dưới đây, mình tổng hợp và phân loại các thuộc tính liên quan với nhau thành một nhóm để bạn tiện theo dõi.
|
|
|
|
Bảng dưới đây liệt kê toàn bộ các thuộc tính được đề nghị sử dụng bởi W3 Consortium và được sắp xếp theo thứ tự chữ cái. Bạn click vào link để tìm hiểu chi tiết:
| Thuộc tính | Miêu tả |
|---|---|
| Thuộc tính này miêu tả vị trí của một Sound Source theo trục ngang của môi trường của Listener | |
Sử dụng thuộc tính này, bạn có thể xác định các giá trị cho tất cả các thuộc tính liên quan tới background, bao gồm:
|
|
| Thuộc tính này xác định trạng thái cố định và trạng thái scroll của hình nền | |
| Thuộc tính này thiết lập màu nền cho một phần tử | |
| Thuộc tính này thiết lập hình nền cho một phần tử | |
| Thuộc tính này thiết lập vị trí ban đầu của hình nền của phần tử. Các giá trị thường là một cặp vị trí x y. Vị trí mặc định là 0% 0%. | |
| Thuộc tính này xác định hướng mà một hình nền được lặp đi lặp lại | |
| Thuộc tính này thiết lập 4 giá trị cho thuộc tính border: giá trị có thể là một hoặc nhiều trong các giá trị sau: một giá trị cho màu, một giá trị cho border-awidth, và một giá trị cho border-style. | |
| Thuộc tính này thiết lập 4 giá trị cho đường viền bên dưới: giá trị có thể là một hoặc nhiều trong các giá trị sau: một giá trị cho màu, một giá trị cho border-awidth, và một giá trị cho border-style. | |
| Thuộc tính này thiết lập độ dày cho đường viền bên dưới | |
| Thuộc tính này thiết lập một thuật toán trong việc hiển thị đường viền trong khi hiển thị bảng | |
| Thuộc tính này xác định màu cho border. Giá trị mặc định là màu của phần tử | |
| Thuộc tính này xác định màu cho đường viền bên trái. Giá trị mặc định là màu của phần tử | |
| Thuộc tính này xác định màu cho đường viền bên phải. Giá trị mặc định là màu của phần tử | |
| Thuộc tính này xác định màu cho đường viền bên trên. Giá trị mặc định là màu của phần tử | |
| Thuộc tính này xác định màu cho đường viền bên dưới. Giá trị mặc định là màu của phần tử | |
| Thuộc tính này thiết lập 4 giá trị cho đường viền bên trái: giá trị có thể là một hoặc nhiều trong các giá trị sau: một giá trị cho màu, một giá trị cho border-awidth, và một giá trị cho border-style. | |
| Thuộc tính này xác định độ rộng của đường viền bên trái | |
| Thuộc tính này thiết lập 4 giá trị cho đường viền bên phải: giá trị có thể là một hoặc nhiều trong các giá trị sau: một giá trị cho màu, một giá trị cho border-awidth, và một giá trị cho border-style. | |
| Thuộc tính này xác định độ rộng của đường viền bên phải | |
| Thuộc tính này xác định khoảng cách giữa các đường viền khác nhau. Hai giá trị tương ứng để xác định khoảng cách theo chiều dọc và chiều ngang. Thường được sử dụng để xác định khoảng cách của đường viền ô trong bảng | |
| Thuộc tính này xác định style cho đường viền | |
| Thuộc tính này thiết lập 4 giá trị cho đường viền bên trên: giá trị có thể là một hoặc nhiều trong các giá trị sau: một giá trị cho màu, một giá trị cho border-awidth, và một giá trị cho border-style. | |
| Thuộc tính này thiết lập độ rộng của đường viền bên trên | |
| Thuộc tính này thiết lập độ rộng cho toàn bộ đường viền | |
| Được sử dụng với thuộc tính position để xác định vị trí cạnh dưới cùng của một phần tử | |
| Thuộc tính này xác định vị trí của caption trong bảng | |
| Thuộc tính này ngăn không cho phần tử được hiển thị ngay bên cạnh phần tử được xác định với thuộc tính float | |
| Thuộc tính này để xác định phần bên ngoài mà nội dung của phần tử này hoàn toàn bị ẩn dấu | |
| Thuộc tính này xác định màu cho phần tử | |
| Thuộc tính này chèn nội dung nào đó (text hoặc hình ảnh) vào trước, sau phần tử | |
| Thuộc tính này hữu ích khi sử dụng trong việc xác định các đầu đề của bạn theo dạng mục lục như trong một cuốn sách | |
| Thuộc tính này tương tự như thuộc tính counter-increment, khác nhau là ở chỗ giá trị của counter được reset về 0 | |
| Thuộc tính này được sử dụng trong các thiết bị audio để chơi một bản nhạc (chẳng hạn) sau một phần tử | |
| Thuộc tính này được sử dụng trong các thiết bị audio để chơi một bản nhạc (chẳng hạn) trước một phần tử | |
| Thuộc tính này xác định hình dáng của con trỏ | |
| Thuộc tính này xác định hướng của nội dung phần tử | |
| Thuộc tính này điều khiển cách phần tử được hiển thị | |
| Thuộc tính này xác định độ cao tại đó một sound được chơi | |
| Với các đường viền khác nhau, thuộc tính này ẩn các ô trống trong bảng | |
| Thuộc tính này làm cho một phần tử di chuyển tới một bên cạnh nào đó của phần tử cha | |
Thuộc tính này xác định 4 thuộc tính font của phần tử. Giá trị của thuộc tính là một trong các giá trị sau:
|
|
| Thuộc tính này xác định font cho một phần tử. Hoặc là một font cụ thể hoặc là một trong các serif, sans-serif, cursive, fantasy, và monospace. | |
| Thuộc tính này thiết lập kích cỡ font | |
| Thuộc tính này điều chỉnh kích cỡ font theo tỉ lệ tương ứng | |
| Thuộc tính này làm chữ cái được hiển thị to hơn hay nhỏ hơn | |
| Thuộc tính này xác định font style | |
| Thuộc tính này xác định văn bản theo dạng chữ hoa nhỏ | |
| Thuộc tính này xác định độ đậm của văn bản. Nếu một giá trị số được sử dụng, số đó phải là bội số của 100 trong khoảng 100 và 900; 400 là normal, 700 là tương ứng với từ khóa bold | |
| Thuộc tính này xác định chiều cao của phần tử | |
| Thuộc tính này được sử dụng cùng với thuộc tính position để xác định cạnh trái của phần tử | |
| Thuộc tính này xác định khoảng cách giữa các chữ cái | |
| Thuộc tính này thiết lập chiều cao của Baseline | |
Thuộc tính này xác định style cho một list, sử dụng một trong các giá trị sau:
|
|
Thuộc tính này sử dụng một hình ảnh để làm marker (giống như các bullet), và được sử dụng thay thế cho:
|
|
| Thuộc tính này xác định độ thụt hoặc độ dãn của một marker tương ứng với nội dung của phần tử | |
| Thuộc tính này xác định một marker cho unordered list (giá trị là circle, disc, hoặc square) hoặc cho ordered list (giá trị là decimal, loweralpha, lower-roman, none, upper-alpha, hoặc upper-roman) . | |
| Thuộc tính này xác định lề cho phần tử | |
| Thuộc tính này xác định lề dưới của phần tử. Giá trị mặc định là 0 | |
| Thuộc tính này xác định lề trái của phần tử. Giá trị mặc định là 0 | |
| Thuộc tính này xác định lề phải của phần tử. Giá trị mặc định là 0 | |
| Thuộc tính này xác định lề trên của phần tử. Giá trị mặc định là 0 | |
| Thuộc tính marker-offset có thể được sử dụng trong các Bullet List để xác định khoảng cách giữa các bullet (hoặc marker) với các cạnh của đường viền gần nhất với bullet đó | |
| Thuộc tính marks được sử dụng để thiết lập Crop mark và Cross mark trên một thiết bị được đánh số trang. Thuộc tính này được sử dụng với qui tắc @page | |
| Thuộc tính max-height được sử dụng để thiết lập chiều cao tối đa của phần tử | |
| Thuộc tính max-awidth được sử dụng để thiết lập chiều rộng tối đa của phần tử | |
| Thuộc tính min-height được sử dụng để thiết lập chiều cao tối thiểu của phần tử | |
| Thuộc tính min-awidth property được sử dụng để thiết lập chiều rộng tối thiểu của phần tử | |
| Thuộc tính này được sử dụng để xác định số dòng tối thiểu phải xuất hiện tại bottom của trang. Bạn theo đường link này để hiểu rõ hơn về khái niệm Orphan | |
| Thuộc tính outline được sử dụng để xác định tất cả các thuộc tính liên quan tới outline | |
| Thuộc tính outline-color xác định màu cho outline. | |
| Thuộc tính outline-style xác định style cho outline | |
| Thuộc tính outline-awidth xác định độ rộng của outline | |
| Thuộc tính này xác định cách mà phần nội dung bị tràn khỏi khu vực chứa phần tử được hiển thị | |
| Thuộc tính này xác định tất cả các thuộc tính liên quan tới padding | |
| Thuộc tính này xác định bottom padding. Giá trị mặc định là 0 | |
| Thuộc tính này xác định left padding. Giá trị mặc định là 0 | |
| Thuộc tính này xác định right padding. Giá trị mặc định là 0 | |
| Thuộc tính này xác định top padding. Giá trị mặc định là 0 | |
| Thuộc tính này được sử dụng để triệu hồi một page layout đã được xác định bởi qui tắc @page | |
| Thuộc tính này bắt buộc hoặc không bắt buộc trình ngắt trang sau một phần tử | |
| Thuộc tính này bắt buộc hoặc không bắt buộc trình ngắt trang trước một phần tử | |
| Thuộc tính này không ngắt trang bên trong phần tử | |
| Thuộc tính pause xác định tất cả các giá trị liên quan tới pause trong aural media. | |
| Thuộc tính này xác định khoảng thời gian ngừng được chèn vào sau phần nội dung của phần tử | |
| Thuộc tính này xác định khoảng thời gian ngừng được chèn vào trước phần nội dung của phần tử | |
| Thuộc tính này xác định độ pitch trung bình trong khi phát thanh nội dung một phần tử | |
| Thuộc tính này xác định dãy pitch, từ 0 (flat) tới 100 (broad); giá trị mặc định là 50. | |
| Nếu cung cấp một URL, thì audio được trỏ tới bởi URL này sẽ được play trong khi render phần tử. Thuộc tính này xác định các giá trị liên quan tới thời gian repeat và giá trị mix | |
| Thuộc tính này xác định vị trí cho một phần tử | |
| Thuộc tính này xác định biểu tượng trích dẫn để được sử dụng khi trích dẫn một đoạn văn bản | |
| Thuộc tính này xác định độ Richness, từ 0 (flat) tới 100 (mellifluous); giá trị mặc định là 50. | |
| Thuộc tính này được sử dụng cùng với thuộc tính postion để xác định cạnh phải của một phần tử | |
| Thuộc tính size này được sử dụng trong paged media để xác định kích cỡ của trang | |
| Thuộc tính này xác định cách mà nội dung của một phần tử được phát | |
| Thuộc tính này được sử dụng để xác định các table header nên được phát một lần cho mỗi hàng hoặc cột hay một lần cho mỗi ô | |
| Thuộc tính này xác định cách các chữ số được phát | |
| Thuộc tính này xác định xem các dấu chấm câu có nên được phát hay không | |
| Thuộc tính này thiết lập speech rate. Tức là số từ được phát mỗi phút | |
| Thuộc tính này thiết lập voice stress, từ 0 (catatonic) tới 100 (hyperactive); giá trị mặc định là 50. | |
| Thuộc tính này xác định layout cho một bảng | |
| Thuộc tính thiết lập cách căn chỉnh văn bản cho một phần tử | |
| Thuộc tính xác định hướng văn bản của một phần tử | |
| Thuộc tính này thiết lập độ thụt dòng đầu tiên của đoạn văn bản trong một phần tử. Giá trị mặc định là 0 | |
| Thuộc tính này tạo shadow cho văn bản với các hiệu ứng màu sắc đa dạng | |
| Thuộc tính này tịnh tiến văn bản trong phần tử tương ứng với giá trị đã cho | |
| Thuộc tính này được sử dụng cùng với thuộc tính position để xác định cạnh trên của phần tử | |
| Thuộc tính này xác định sự căn chỉnh theo chiều dọc cho một phần tử | |
| Thuộc tính này xác định phần tử có là visible hay không | |
| Thuộc tính này lựa chọn voice family để phát nội dung phần tử | |
| Thuộc tính này thiết lập âm lượng khi phát nội dung phần tử. Giá trị của thuộc tính là một số trong dãy từ 0 tới 100 | |
| Thuộc tính này xác định cách xử lý các khoảng trắng trong một phần tử | |
| Thiết lập số dòng tối thiểu xuất hiện trong đoạn văn của cửa sổ | |
| Thuộc tính này xác định độ rộng của phần tử | |
| Thuộc tính thiết lập khoảng cách giữa các từ trong đoạn văn | |
| Thuộc tính này xác định Layer cho phần tử hiện tại |
Pseudo Class và Pseudo Element trong CSS
| Thuộc tính | Miêu tả |
|---|---|
| Sử dụng Pseudo Class này để thêm hiệu ứng đặc biệt tới một Active Element | |
| Sử dụng Pseudo Class này để thêm hiệu ứng đặc biệt tới một phần tử khi phần tử đó được focus | |
| Sử dụng Pseudo Class này để thêm hiệu ứng đặc biệt tới một phần tử khi bạn di chuyển chuột qua nó | |
| Sử dụng Pseudo Class này để thêm hiệu ứng đặc biệt tới một unvisited link. | |
| Sử dụng Pseudo Class này để thêm hiệu ứng đặc biệt tới một visited link. | |
| Sử dụng Pseudo Class này để thêm hiệu ứng đặc biệt tới một phần tử mà là phần tử con đầu tiên của phần tử nào đó | |
| Sử dụng Pseudo Class này để xác định một ngôn ngữ được sử dụng trong một phần tử cụ thể | |
| Sử dụng Pseudo Element này để thêm hiệu ứng đặc biệt tới chữ cái đầu tiên của phần văn bản đã cho | |
| Sử dụng Pseudo Element này để thêm hiệu ứng đặc biệt tới dòng đầu tiên của phần văn bản nào đó | |
| Sử dụng Pseudo Element này để chèn một số nội dung vào trước một phần tử nào đó (ví dụ chèn các bullet) | |
| Sử dụng Pseudo Element này để chèn một số nội dung vào sau một phần tử nào đó |
Loạt bài hướng dẫn Học CSS cơ bản và nâng cao của chúng tôi dựa trên nguồn tài liệu của: và
Follow fanpage của team hoặc facebook cá nhân Nguyễn Thanh Tuyền để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.
Bài học CSS phổ biến khác tại vietjack.com:
