Trong thế giới lập trình web, CSS không chỉ là một ngôn ngữ để tô màu hay sắp xếp vị trí cho các phần tử. Nó chính là chiếc cầu nối giữa thiết kế và trải nghiệm người dùng, giúp website của bạn không chỉ đẹp mắt mà còn hoạt động trơn tru, thân thiện với mọi đối tượng người dùng. Nếu bạn đã từng tự hỏi làm thế nào để trang web của mình nổi bật giữa hàng triệu website khác và mang lại trải nghiệm tối ưu cho khách truy cập, thì việc nắm vững các thuộc tính CSS là chìa khóa không thể bỏ qua. Trong bài viết này, chúng ta sẽ cùng khám phá hơn 200 thuộc tính CSS mà Designer & nhà phát triển cần biết để biến website từ tốt thành xuất sắc. Hãy cùng bắt đầu hành trình tối ưu hóa này nhé!
Thuộc tính z-index & 200 Thuộc tính CSS :
Thuộc tính z-index : xác định thứ tự xếp chồng của các phần tử được định vị (tức là các phần tử có thuộc tính position là relative, absolute, fixed, hoặc sticky). Phần tử có z-index cao hơn sẽ hiển thị phía trên phần tử có z-index thấp hơn.
color: Đặt màu văn bản.
background-color: Đặt màu nền cho phần tử.
width: Đặt chiều rộng của phần tử.
height: Đặt chiều cao của phần tử.
margin: Đặt khoảng cách bên ngoài phần tử.
padding: Đặt khoảng cách bên trong phần tử.
border: Đặt đường viền cho phần tử.
font-size: Đặt kích thước văn bản.
font-family: Chọn phông chữ cho văn bản.
text-align: Căn chỉnh văn bản (trái, phải, giữa).
display: Xác định kiểu hiển thị của phần tử (block, inline, none).
position: Xác định cách phần tử được định vị trên trang.
top, left, right, bottom: Xác định khoảng cách từ phần tử đến cạnh của khung chứa nó.
overflow: Xử lý nội dung tràn ra khỏi phần tử.
visibility: Quyết định liệu phần tử có hiển thị hay không.
opacity: Đặt độ trong suốt của phần tử.
transform: Áp dụng các phép biến đổi như xoay, co giãn, di chuyển.
transition: Xác định hiệu ứng chuyển tiếp giữa các trạng thái của phần tử.
animation: Định nghĩa các hoạt ảnh cho phần tử.
cursor: Đặt kiểu con trỏ khi di chuột lên phần tử.
box-shadow: Thêm bóng đổ vào phần tử.
border-radius: Tạo góc bo tròn cho phần tử.
line-height: Xác định chiều cao dòng.
letter-spacing: Đặt khoảng cách giữa các ký tự.
text-decoration: Thêm các kiểu trang trí cho văn bản (gạch chân, gạch ngang).
background-image: Đặt hình ảnh nền cho phần tử.
background-repeat: Xác định cách lặp lại hình nền.
background-position: Đặt vị trí của hình nền.
background-size: Đặt kích thước của hình nền.
background-attachment: Quyết định xem hình nền có cuộn cùng với trang hay không.
background-clip: Xác định phạm vi vẽ của hình nền.
border-width: Đặt độ dày của viền.
border-style: Đặt kiểu đường viền (solid, dashed, dotted).
border-color: Đặt màu của viền.
border-collapse: Định dạng viền cho bảng (collapsed hoặc separate).
border-spacing: Đặt khoảng cách giữa các đường viền trong bảng.
box-sizing: Quy định cách tính kích thước của phần tử (content-box, border-box).
content: Chèn nội dung trước hoặc sau một phần tử (thường dùng với ::before, ::after).
flex: Định nghĩa cách các phần tử con co giãn trong một phần tử bố trí flex.
flex-direction: Xác định hướng của các phần tử trong một container flex.
flex-wrap: Xác định liệu các phần tử con trong flex container có được bọc xuống dòng hay không.
justify-content: Căn chỉnh các phần tử con theo trục chính trong flex container.
align-items: Căn chỉnh các phần tử con theo trục chéo trong flex container.
align-content: Căn chỉnh các dòng trong flex container khi có không gian dư thừa.
order: Xác định thứ tự của một phần tử trong container flex.
grid: Định nghĩa cấu trúc lưới cho container grid.
grid-template-columns: Xác định cấu trúc các cột trong lưới.
grid-template-rows: Xác định cấu trúc các hàng trong lưới.
grid-template-rows: Xác định cấu trúc các hàng trong lưới.
grid-column-gap: Đặt khoảng cách giữa các cột trong lưới.
grid-row-gap: Đặt khoảng cách giữa các hàng trong lưới.
grid-auto-flow: Xác định cách các phần tử con tự động được đặt vào trong lưới.
grid-template-areas: Định nghĩa vùng lưới theo tên để dễ sắp xếp các phần tử.
grid-area: Gán một phần tử vào một vùng lưới xác định.
column-count: Đặt số cột cho một phần tử.
column-gap: Xác định khoảng cách giữa các cột.
column-rule: Đặt quy tắc giữa các cột (kiểu, màu, độ dày).
column-width: Xác định chiều rộng của cột.
filter: Áp dụng các hiệu ứng đặc biệt (như mờ, làm sáng) cho phần tử.
float: Xác định cách một phần tử nổi sang trái hoặc phải trong khung chứa.
clear: Xác định việc di chuyển một phần tử xuống dưới các phần tử nổi trước đó.
clip: Cắt bỏ nội dung của phần tử ngoài vùng xác định.
caption-side: Xác định vị trí của chú thích bảng (trên hoặc dưới bảng).
counter-increment: Tăng giá trị bộ đếm CSS.
counter-reset: Đặt lại giá trị bộ đếm CSS.
list-style: Xác định kiểu danh sách (dấu đầu dòng, số thứ tự).
list-style-type: Chọn kiểu dấu đầu dòng hoặc số thứ tự.
list-style-position: Xác định vị trí của dấu đầu dòng hoặc số thứ tự.
list-style-image: Sử dụng hình ảnh làm dấu đầu dòng.
min-width: Đặt chiều rộng tối thiểu của phần tử.
max-width: Đặt chiều rộng tối đa của phần tử.
min-height: Đặt chiều cao tối thiểu của phần tử.
max-height: Đặt chiều cao tối đa của phần tử.
outline: Đặt đường viền ngoài phần tử.
outline-width: Đặt độ dày của đường viền ngoài.
outline-style: Đặt kiểu của đường viền ngoài.
outline-color: Đặt màu của đường viền ngoài.
outline-offset: Đặt khoảng cách giữa đường viền ngoài và viền của phần tử.
overflow-x: Xử lý nội dung tràn theo chiều ngang.
overflow-y: Xử lý nội dung tràn theo chiều dọc.
page-break-after: Xác định ngắt trang sau một phần tử.
page-break-before: Xác định ngắt trang trước một phần tử.
page-break-inside: Xác định ngắt trang bên trong một phần tử.
perspective: Đặt phối cảnh cho các phần tử con 3D.
perspective-origin: Xác định vị trí xuất phát của phối cảnh.
pointer-events: Quyết định phần tử có thể nhận các sự kiện trỏ chuột hay không.
quotes: Đặt các cặp dấu ngoặc kép cho các phần tử con.
resize: Cho phép người dùng thay đổi kích thước phần tử.
scroll-behavior: Xác định hành vi cuộn của phần tử khi dùng API cuộn.
tab-size: Đặt kích thước khoảng trắng khi dùng tab.
table-layout: Xác định cách bố trí bảng.
text-align-last: Căn chỉnh dòng cuối cùng của văn bản.
text-indent: Thụt lề dòng đầu tiên của đoạn văn.
text-justify: Căn đều văn bản.
text-overflow: Quyết định cách xử lý văn bản tràn ra ngoài khung chứa.
text-shadow: Thêm bóng đổ cho văn bản.
text-transform: Biến đổi văn bản (viết hoa, viết thường).
transform-origin: Đặt điểm gốc cho các phép biến đổi.
transform-style: Xác định cách các phần tử con được vẽ trong 3D.
transition-delay: Đặt thời gian chờ trước khi bắt đầu hiệu ứng chuyển tiếp.
transition-duration: Đặt thời gian diễn ra hiệu ứng chuyển tiếp.
transition-property: Chọn thuộc tính nào sẽ có hiệu ứng chuyển tiếp.
transition-timing-function: Xác định tốc độ của hiệu ứng chuyển tiếp.
unicode-bidi: Sử dụng cho văn bản lưỡng ngữ để điều chỉnh hướng văn bản.
user-select: Quyết định liệu người dùng có thể chọn văn bản hay không.
vertical-align: Căn chỉnh phần tử theo chiều dọc.
white-space: Xử lý khoảng trắng trong văn bản.
word-break: Xác định cách ngắt từ trong văn bản.
word-spacing: Đặt khoảng cách giữa các từ.
word-wrap: Quyết định cách ngắt dòng nếu từ quá dài.
writing-mode: Xác định hướng viết văn bản.
zoom: Phóng to hoặc thu nhỏ phần tử.
align-self: Căn chỉnh riêng cho từng phần tử trong container flex.
backface-visibility: Quyết định xem mặt sau của phần tử 3D có hiển thị không.
direction: Xác định hướng văn bản (ltr hoặc rtl).
empty-cells: Xử lý ô trống trong bảng.
font-kerning: Điều chỉnh khoảng cách giữa các ký tự.
font-optical-sizing: Tự động điều chỉnh kích thước phông chữ dựa trên kích thước văn bản.
font-stretch: Chọn mức độ dãn phông chữ.
font-variant: Biến thể của phông chữ (chữ hoa nhỏ, số cũ).
font-weight: Đặt độ đậm của phông chữ.
isolation: Thiết lập các phần tử con trong một ngữ cảnh cách ly.
justify-self: Căn chỉnh phần tử con trong container grid.
object-fit: Xác định cách hình ảnh hoặc video được co giãn để phù hợp với phần tử chứa.
object-position: Đặt vị trí của hình ảnh hoặc video trong phần tử chứa.
outline-offset: Đặt khoảng cách giữa viền ngoài và viền của phần tử.
scroll-margin: Đặt khoảng cách cuộn xung quanh phần tử.
scroll-padding: Đặt khoảng cách cuộn bên trong phần tử.
scroll-snap-align: Xác định căn chỉnh phần tử trong chế độ cuộn chụp.
scroll-snap-stop: Xác định việc dừng cuộn có chính xác không.
scroll-snap-type: Định dạng cuộn chụp.
text-combine-upright: Kết hợp nhiều ký tự thành một dòng đứng.
text-decoration-color: Đặt màu cho trang trí văn bản.
text-decoration-color: Đặt màu cho trang trí văn bản.
text-decoration-line: Xác định loại đường trang trí (gạch chân, gạch ngang).
text-decoration-skip: Xác định khi nào bỏ qua trang trí văn bản.
text-decoration-skip-ink: Bỏ qua mực trang trí khi có các ký tự xấu.
text-decoration-style: Đặt kiểu trang trí văn bản.
text-underline-position: Xác định vị trí gạch dưới văn bản.
translate: Di chuyển phần tử theo các trục x, y, z.
backdrop-filter: Áp dụng hiệu ứng lọc nền sau phần tử.
contain: Hạn chế phạm vi ảnh hưởng của phần tử với các phần tử khác.
image-rendering: Quyết định cách hiển thị hình ảnh khi bị phóng to hoặc thu nhỏ.
line-clamp: Giới hạn số lượng dòng văn bản.
mix-blend-mode: Xác định cách phần tử kết hợp với nền của nó.
place-content: Căn chỉnh nội dung trong container grid hoặc flex.
place-items: Căn chỉnh các phần tử trong container grid hoặc flex.
place-self: Căn chỉnh phần tử trong container grid hoặc flex.
shape-image-threshold: Xác định mức độ trong suốt của hình ảnh khi tạo hình dạng.
shape-margin: Đặt khoảng cách giữa hình dạng và phần tử văn bản.
shape-outside: Xác định hình dạng của phần tử văn bản bên ngoài.
text-underline-offset: Đặt khoảng cách giữa gạch dưới và văn bản.
text-wrap: Quyết định cách văn bản ngắt dòng.
writing-mode: Đặt hướng viết văn bản (ngang, dọc).
will-change: Gợi ý cho trình duyệt về những thay đổi trong tương lai của phần tử.
font-kerning: Điều chỉnh khoảng cách giữa các ký tự.
font-optical-sizing: Điều chỉnh kích thước phông chữ theo kích thước văn bản.
font-stretch: Điều chỉnh độ rộng của phông chữ.
font-variant-alternates: Chọn các dạng phông chữ thay thế.
font-variant-caps: Sử dụng các ký tự viết hoa thay thế.
font-variant-east-asian: Điều chỉnh các ký tự Đông Á.
font-variant-ligatures: Điều chỉnh cách hiển thị liên kết ký tự.
font-variant-numeric: Điều chỉnh kiểu hiển thị của số.
font-variant-position: Điều chỉnh vị trí ký tự (trên, dưới).
forced-color-adjust: Điều chỉnh màu sắc trong các chế độ màu cao độ tương phản.
glyph-orientation-vertical: Xác định hướng của ký tự dọc.
grid-auto-columns: Xác định kích thước tự động của các cột trong lưới.
grid-auto-rows: Xác định kích thước tự động của các hàng trong lưới.
image-orientation: Đặt hướng hiển thị của hình ảnh.
image-resolution: Xác định độ phân giải của hình ảnh.
initial-letter: Định dạng chữ cái đầu tiên của đoạn văn.
initial-letter-align: Căn chỉnh chữ cái đầu tiên với đoạn văn.
inline-size: Đặt kích thước ngang của phần tử.
inset: Đặt khoảng cách từ các cạnh của phần tử đến viền của nó.
inset-block: Đặt khoảng cách trên và dưới của phần tử.
inset-inline: Đặt khoảng cách trái và phải của phần tử.
justify-items: Căn chỉnh các phần tử con trong container grid.
mask: Áp dụng một lớp mặt nạ cho phần tử để che hoặc hiển thị các phần của nó.
mask-border: Đặt viền mặt nạ cho phần tử.
mask-clip: Xác định vùng mà mặt nạ ảnh hưởng.
mask-composite: Xác định cách các lớp mặt nạ được kết hợp với nhau.
mask-image: Chọn hình ảnh dùng làm mặt nạ.
mask-mode: Xác định cách mặt nạ được áp dụng.
mask-origin: Đặt điểm xuất phát của mặt nạ.
mask-position: Đặt vị trí của mặt nạ.
mask-repeat: Xác định cách mặt nạ lặp lại.
mask-size: Đặt kích thước của mặt nạ.
mask-type: Xác định kiểu mặt nạ (alpha, luminance).
offset: Di chuyển phần tử dựa trên đường dẫn đã xác định.
offset-anchor: Đặt điểm neo của phần tử cho phép di chuyển.
offset-distance: Đặt khoảng cách di chuyển của phần tử dọc theo đường dẫn.
offset-path: Định nghĩa đường dẫn mà phần tử di chuyển theo.
offset-rotate: Xác định góc xoay của phần tử khi di chuyển theo đường dẫn.
overscroll-behavior: Xác định hành vi của phần tử khi cuộn vượt quá giới hạn.
padding-block: Đặt khoảng đệm trên và dưới của phần tử.
padding-inline: Đặt khoảng đệm trái và phải của phần tử.
scroll-margin-block: Đặt khoảng cách cuộn trên và dưới của phần tử.
scroll-margin-inline: Đặt khoảng cách cuộn trái và phải của phần tử.
scroll-padding-block: Đặt khoảng đệm cuộn trên và dưới của phần tử.
scroll-padding-inline: Đặt khoảng đệm cuộn trái và phải của phần tử.
text-underline-position: Xác định vị trí của gạch dưới văn bản.
writing-mode: Đặt hướng viết của văn bản (ngang, dọc).
Kết Luận :
Sau khi khám phá và hiểu rõ hơn 200 thuộc tính CSS quan trọng, bạn đã trang bị cho mình một kho tàng kiến thức phong phú để tối ưu hóa bất kỳ website nào. Mỗi thuộc tính, dù nhỏ hay lớn, đều đóng vai trò quan trọng trong việc cải thiện hiệu suất, tăng cường tính thẩm mỹ và đảm bảo trải nghiệm người dùng tốt nhất. Trong một thế giới số hóa đang ngày càng phát triển, việc nắm vững những công cụ này không chỉ giúp bạn xây dựng những trang web đẹp mắt, mà còn giúp bạn tạo ra những sản phẩm có sức ảnh hưởng lớn đến người dùng. Hãy tiếp tục thử nghiệm, áp dụng và sáng tạo với CSS để biến những ý tưởng của bạn thành hiện thực, và đừng ngừng học hỏi để luôn dẫn đầu trong cuộc chơi của thế giới web. Thành công đang chờ đón bạn với mỗi dòng code CSS hoàn hảo!
