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.

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 azimuth

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

Thuộc tính background

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:

  • background-attachment
  • background-color
  • background-image
  • background-position
  • background-repeat

Thuộc tính background-attachment

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 background-color

Thuộc tính này thiết lập màu nền cho một phần tử

Thuộc tính background-image

Thuộc tính này thiết lập hình nền cho một phần tử

Thuộc tính background-position

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 background-repeat

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 border

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-width, và một giá trị cho border-style.

Thuộc tính border-bottom

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-width, và một giá trị cho border-style.

Thuộc tính border-bottom-width

Thuộc tính này thiết lập độ dày cho đường viền bên dưới

Thuộc tính border-collapse

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 border-color

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 border-left-color

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 border-right-color

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 border-top-color

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 border-bottom-color

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 border-left

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-width, và một giá trị cho border-style.

Thuộc tính border-left-width

Thuộc tính này xác định độ rộng của đường viền bên trái

Thuộc tính border-right

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-width, và một giá trị cho border-style.

Thuộc tính border-right-width

Thuộc tính này xác định độ rộng của đường viền bên phải

Thuộc tính border-spacing

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 border-style

Thuộc tính này xác định style cho đường viền

Thuộc tính border-top

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-width, và một giá trị cho border-style.

Thuộc tính border-top-width

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 border-width

Thuộc tính này thiết lập độ rộng cho toàn bộ đường viền

Thuộc tính bottom

Đượ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 caption-side

Thuộc tính này xác định vị trí của caption trong bảng

Thuộc tính clear

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 clip

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 color

Thuộc tính này xác định màu cho phần tử

Thuộc tính content

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 counter-increment

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 counter-reset

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 cue-after

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 cue-before

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 cursor

Thuộc tính này xác định hình dáng của con trỏ

Thuộc tính direction

Thuộc tính này xác định hướng của nội dung phần tử

Thuộc tính display

Thuộc tính này điều khiển cách phần tử được hiển thị

Thuộc tính elevation

Thuộc tính này xác định độ cao tại đó một sound được chơi

Thuộc tính empty-cells

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 float

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 font

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:

  • font-style
  • font-variant
  • font-weight
  • font-size
  • line-height
  • font-family

Thuộc tính font-family

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 font-size

Thuộc tính này thiết lập kích cỡ font

Thuộc tính font-size-adjust

Thuộc tính này điều chỉnh kích cỡ font theo tỉ lệ tương ứng

Thuộc tính font-stretch

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 font-style

Thuộc tính này xác định font style

Thuộc tính font-variant

Thuộc tính này xác định văn bản theo dạng chữ hoa nhỏ

Thuộc tính font-weight

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 height

Thuộc tính này xác định chiều cao của phần tử

Thuộc tính left

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 letter-spacing

Thuộc tính này xác định khoảng cách giữa các chữ cái

Thuộc tính line-height

Thuộc tính này thiết lập chiều cao của Baseline

Thuộc tính list-style

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:

  • list-style-image
  • list-style-position
  • list-style-type

Thuộc tính list-style-image

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:

  • list-style-type

Thuộc tính list-style-position

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 list-style-type

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 margin

Thuộc tính này xác định lề cho phần tử

Thuộc tính margin-bottom

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 margin-left

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 margin-right

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 margin-top

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

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

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

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-width

Thuộc tính max-width đượ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

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-width

Thuộc tính min-width 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 orphans

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

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

Thuộc tính outline-color xác định màu cho outline.

Thuộc tính outline-color-style

Thuộc tính outline-style xác định style cho outline

Thuộc tính outline-width

Thuộc tính outline-width xác định độ rộng của outline

Thuộc tính overflow

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 padding

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 padding-bottom

Thuộc tính này xác định bottom padding. Giá trị mặc định là 0

Thuộc tính padding-left

Thuộc tính này xác định left padding. Giá trị mặc định là 0

Thuộc tính padding-right

Thuộc tính này xác định right padding. Giá trị mặc định là 0

Thuộc tính padding-top

Thuộc tính này xác định top padding. Giá trị mặc định là 0

Thuộc tính page

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 page-break-after

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 page-break-before

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 page-break-inside

Thuộc tính này không ngắt trang bên trong phần tử

Thuộc tính pause

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 pause-after

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 pause-before

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 pitch

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 pitch-range

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.

Thuộc tính play-during

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 position

Thuộc tính này xác định vị trí cho một phần tử

Thuộc tính quotes

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 richness

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 right

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

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 speak

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 speak-header

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 speak-numeral

Thuộc tính này xác định cách các chữ số được phát

Thuộc tính speak-punctuation

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 speech-rate

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 stress

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 table-layout

Thuộc tính này xác định layout cho một bảng

Thuộc tính text-align

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 text-decoration

Thuộc tính xác định hướng văn bản của một phần tử

Thuộc tính text-indent

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 text-shadow

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 text-transform

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 top

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 vertical-align

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 visibility

Thuộc tính này xác định phần tử có là visible hay không

Thuộc tính voice-family

Thuộc tính này lựa chọn voice family để phát nội dung phần tử

Thuộc tính volume

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 white-space

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ử

Thuộc tính widows

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 width

Thuộc tính này xác định độ rộng của phần tử

Thuộc tính word-spacing

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 z-index

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ả

:active Pseudo Class

Sử dụng Pseudo Class này để thêm hiệu ứng đặc biệt tới một Active Element

:focus Pseudo Class

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

:hover Pseudo Class

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ó

:link Pseudo Class

Sử dụng Pseudo Class này để thêm hiệu ứng đặc biệt tới một unvisited link.

:visited Pseudo Class

Sử dụng Pseudo Class này để thêm hiệu ứng đặc biệt tới một visited link.

:first-child Pseudo Class

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 đó

:lang Pseudo Class

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ể

:first-letter Pseudo Element

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

:first-line Pseudo Element

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 đó

:before Pseudo Element

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)

:after Pseudo Element

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: TutorialspointW3Schools

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để 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.