CSS (viết tắt của Cascading Style Sheets) là một trong những ngôn ngữ lập trình đơn giản. Và được sử dụng phổ biến. Trong quá trình thiết kế website. CSS là một ngôn ngữ khó có thể thiếu được. Bài viết này VMO sẽ giới thiệu cho bạn cách mà CSS hỗ trợ trình duyệt biết thêm thông tin.
CSS thường được sử dụng để can thiệp vào Front-end (Giao diện bên ngoài của Website). CSS thường được sử dụng để tùy biến màu sắc văn bản, font chữ, hình ảnh, bố cục, màu nền,… Với sự hỗ trợ của CSS thì bạn có thể thay đổi, chỉnh sửa những yếu tố trên theo ý muốn một cách đơn giản.
accent-color | Chỉ định màu cho nhấp chuột giao diện người dùng |
align-content | Chỉ định căn chỉnh giữa các dòng bên trong box chứa linh hoạt |
align-items | Chỉ định căn chỉnh cho các mục bên trong box chứa linh hoạt |
align-self | Chỉ định căn chỉnh cho các mục đã chọn bên trong một box chứa linh hoạt |
all | Đặt lại tất cả các thuộc tính (ngoại trừ unicode) |
animation | Thuộc tính viết tắt cho tất cả các thuộc tính animation- * |
animation-delay | Chỉ định thời gian trễ để bắt đầu animation |
animation-direction | Chỉ định xem một hoạt ảnh sẽ được phát tới, lùi hoặc theo các chu kỳ thay thế |
animation-duration | Chỉ định thời lượng hoạt ảnh sẽ hoàn thành một chu kỳ |
animation-fill-mode | Chỉ định kiểu cho phần tử khi hoạt ảnh không phát (trước khi bắt đầu, sau khi kết thúc hoặc cả hai) |
animation-iteration-count | Chỉ định số lần một hoạt ảnh sẽ được phát |
animation-name | Chỉ định tên cho hoạt ảnh @keyframes |
animation-play-state | Chỉ định hoạt ảnh đang chạy hay bị tạm dừng |
animation-timing-function | Chỉ định đường cong tốc độ của hoạt ảnh |
aspect-ratio | Chỉ định tỷ lệ co ưa thích của một phần tử |
backdrop-filter | Xác định hiệu ứng đồ họa cho khu vực phía sau một phần tử |
backface-visibility | Xác định xem có nên nhìn thấy mặt sau của một phần tử khi đối diện với người dùng hay không |
background | Thuộc tính viết tắt cho tất cả các thuộc tính background- * |
background-attachment | Đặt xem hình nền cuộn với phần còn lại của trang hay được cố định |
background-blend-mode | Chỉ định chế độ hòa trộn của mỗi lớp nền (màu / hình ảnh) |
background-clip | Xác định khoảng cách nền (màu hoặc hình ảnh) sẽ kéo dài trong một phần tử |
background-color | Chỉ định màu nền của một phần tử |
background-image | Chỉ định một hoặc nhiều hình nền cho một phần tử |
background-origin | Chỉ định vị trí gốc của hình nền |
background-position | Chỉ định vị trí của hình nền |
background-position-x | Chỉ định vị trí của hình nền trên trục x |
background-position-y | Chỉ định vị trí của hình nền trên trục y |
background-repeat | Đặt nếu / cách một hình nền sẽ được lặp lại |
background-size | Chỉ định kích thước của hình nền |
border | Thuộc tính viết tắt cho chiều rộng đường viền, kiểu đường viền và màu đường viền |
border-bottom | Thuộc tính viết tắt cho đường viền-dưới-độ rộng, kiểu đường viền-dưới cùng và màu đường viền-dưới cùng |
border-bottom-color | Đặt màu của đường viền dưới cùng |
border-bottom-left-radius | Xác định bán kính của đường viền góc dưới bên trái |
border-bottom-right-radius | Xác định bán kính của đường viền góc dưới bên phải |
border-bottom-style | Đặt kiểu của đường viền dưới cùng |
border-bottom-width | Đặt chiều rộng của đường viền dưới cùng |
border-collapse | Đặt xem các đường viền bảng nên thu gọn thành một đường viền duy nhất hay được tách ra |
border-color | Đặt màu của bốn đường viền |
border-image | Thuộc tính viết tắt cho tất cả các thuộc tính border-image- * |
border-image-outset | Chỉ định số lượng mà vùng hình ảnh đường viền mở rộng ra ngoài hộp đường viền |
border-image-repeat | Chỉ định xem hình ảnh đường viền nên được lặp lại, làm tròn hay kéo dài |
border-image-slice | Chỉ định cách cắt hình ảnh đường viền |
border-image-source | Chỉ định đường dẫn đến hình ảnh được sử dụng làm đường viền |
border-image-width | Chỉ định chiều rộng của hình ảnh đường viền |
border-left | Thuộc tính viết tắt cho tất cả các thuộc tính border-left- * |
border-left-color | Đặt màu của đường viền bên trái |
border-left-style | Đặt kiểu của đường viền bên trái |
border-left-width | Đặt chiều rộng của đường viền bên trái |
border-radius | Thuộc tính viết tắt cho thuộc tính bốn đường viền – * – radius |
border-right | Một thuộc tính viết tắt cho tất cả các thuộc tính border-right- * |
border-right-color | Đặt màu của đường viền bên phải |
border-right-style | Đặt kiểu của đường viền bên phải |
border-right-width | Đặt chiều rộng của đường viền bên phải |
border-spacing | Đặt khoảng cách giữa các đường viền của các ô liền kề |
border-style | Đặt kiểu của bốn đường viền |
border-top | Thuộc tính viết tắt cho đường viền-trên cùng-độ rộng, kiểu đường viền trên cùng và màu viền-trên cùng |
border-top-color | Đặt màu của đường viền trên cùng |
border-top-left-radius | Xác định bán kính của đường viền góc trên bên trái |
border-top-right-radius | Xác định bán kính của đường viền góc trên cùng bên phải |
border-top-style | Đặt kiểu của đường viền trên cùng |
border-top-width | Đặt chiều rộng của đường viền trên cùng |
border-width | Đặt chiều rộng của bốn đường viền |
bottom | Đặt vị trí các phần tử, từ cuối phần tử mẹ của nó |
box-decoration-break | Đặt hành vi của nền và đường viền của một phần tử tại ngắt trang hoặc đối với các phần tử trong dòng, tại ngắt dòng. |
box-shadow | Gắn một hoặc nhiều bóng vào một phần tử |
box-sizing | Xác định cách tính chiều rộng và chiều cao của một phần tử: chúng có bao gồm phần đệm và đường viền hay không |
break-after | Chỉ định liệu ngắt trang, cột- hoặc ngắt vùng có xảy ra sau phần tử được chỉ định hay không |
break-before | Chỉ định liệu ngắt trang, cột- hoặc ngắt vùng có xảy ra trước phần tử được chỉ định hay không |
break-inside | Chỉ định xem liệu ngắt trang, cột- hoặc ngắt vùng có xảy ra bên trong phần tử được chỉ định hay không |
caption-side | Chỉ định vị trí của chú thích bảng |
caret-color | Chỉ định màu của con trỏ (dấu mũ) trong đầu vào, vùng văn bản hoặc bất kỳ phần tử nào có thể chỉnh sửa |
@charset | Chỉ định mã hóa ký tự được sử dụng trong biểu định kiểu |
clear | Chỉ định điều gì sẽ xảy ra với phần tử bên cạnh phần tử nổi |
clip | Cắt một phần tử được định vị tuyệt đối |
color | Đặt màu cho văn bản |
column-count | Chỉ định số cột mà một phần tử sẽ được chia thành |
column-fill | Chỉ định cách điền vào các cột, cân bằng hay không |
column-gap | Chỉ định khoảng cách giữa các cột |
column-rule | Thuộc tính viết tắt cho tất cả các thuộc tính column-rule- * |
column-rule-color | Chỉ định màu của quy tắc giữa các cột |
column-rule-style | Chỉ định kiểu của quy tắc giữa các cột |
column-rule-width | Chỉ định chiều rộng của quy tắc giữa các cột |
column-span | Chỉ định số lượng cột mà một phần tử sẽ trải qua |
column-width | Chỉ định chiều rộng cột |
columns | Thuộc tính viết tắt cho chiều rộng cột và số cột |
content | Được sử dụng với: before và: after pseudo-element, để chèn gen |
counter-increment | Tăng hoặc giảm giá trị của một hoặc nhiều bộ đếm CSS |
counter-reset | Tạo hoặc đặt lại một hoặc nhiều bộ đếm CSS |
cursor | Chỉ định con trỏ chuột được hiển thị khi trỏ qua một phần tử |
direction | Chỉ định hướng văn bản / hướng viết |
display | Chỉ định cách một phần tử HTML nhất định sẽ được hiển thị |
empty-cells | Chỉ định có hay không hiển thị đường viền và nền trên các ô trống trong bảng |
filter | Xác định các hiệu ứng (ví dụ: làm mờ hoặc chuyển màu) trên một phần tử trước khi phần tử đó được hiển thị |
flex | Một thuộc tính tốc ký cho các thuộc tính flex-grow, flex-co và các thuộc tính flex-base |
flex-basis | Chỉ định độ dài ban đầu của một mục linh hoạt |
flex-direction | Chỉ định hướng của các mục linh hoạt |
flex-flow | Thuộc tính viết tắt cho hướng uốn và thuộc tính bọc uốn |
flex-grow | Chỉ định mục sẽ phát triển bao nhiêu so với phần còn lại |
flex-shrink | Chỉ định cách mục sẽ thu nhỏ so với phần còn lại |
flex-wrap | Chỉ định xem các mục linh hoạt có nên bọc hay không |
float | Chỉ định xem một phần tử có nên nổi sang trái, phải hay không |
font | Thuộc tính viết tắt cho kiểu phông chữ, biến thể phông chữ, phông chữ-weight, font-size / line-height và các thuộc tính font-family |
@font-face | Quy tắc cho phép các trang web tải xuống và sử dụng phông chữ khác với phông chữ “an toàn cho web” |
font-family | Chỉ định họ phông chữ cho văn bản |
font-feature-settings | Cho phép kiểm soát các tính năng đánh máy nâng cao trong phông chữ OpenType |
@font-feature-values | Cho phép tác giả sử dụng một tên thông thường bằng phông chữ-biến thể-thay thế cho tính năng được kích hoạt khác nhau trong OpenType |
font-kerning | Kiểm soát việc sử dụng thông tin kerning (cách các chữ cái được viết cách nhau) |
font-language-override | Kiểm soát việc sử dụng glyph dành riêng cho ngôn ngữ trong một kiểu chữ |
font-size | Chỉ định kích thước phông chữ của văn bản |
font-size-adjust | Duy trì khả năng đọc của văn bản khi xảy ra dự phòng phông chữ |
font-stretch | Chọn một khuôn mặt bình thường, cô đọng hoặc mở rộng từ họ phông chữ |
font-style | Chỉ định kiểu phông chữ cho văn bản |
font-synthesis | Kiểm soát những kiểu chữ bị thiếu (đậm hoặc nghiêng) có thể được trình duyệt tổng hợp |
font-variant | Chỉ định xem một văn bản có nên được hiển thị bằng phông chữ viết hoa nhỏ hay không |
font-variant-alternates | Kiểm soát việc sử dụng các glyph thay thế được liên kết với các tên thay thế được xác định trong @ font-feature-values |
font-variant-caps | Kiểm soát việc sử dụng các glyph thay thế cho các chữ cái viết hoa |
font-variant-east-asian | Kiểm soát việc sử dụng các glyph thay thế cho các chữ viết Đông Á (ví dụ: tiếng Nhật và tiếng Trung) |
font-variant-ligatures | Kiểm soát các chữ ghép và các dạng ngữ cảnh được sử dụng trong nội dung văn bản của các phần tử mà nó áp dụng |
font-variant-numeric | Kiểm soát việc sử dụng các glyph thay thế cho số, phân số và dấu thứ tự |
font-variant-position | Kiểm soát việc sử dụng các glyph thay thế có kích thước nhỏ hơn được đặt dưới dạng chỉ số trên hoặc chỉ số dưới liên quan đến đường cơ sở của phông chữ |
font-weight | Chỉ định trọng lượng của phông chữ |
gap | Thuộc tính viết tắt cho thuộc tính khoảng cách hàng và khoảng cách cột |
grid | Thuộc tính viết tắt cho các thuộc tính lưới-mẫu-hàng, lưới-mẫu-cột, khu vực lưới-mẫu, lưới-tự động-hàng, lưới-tự động-cột và thuộc tính lưới-tự động dòng |
grid-area | Chỉ định tên cho mục lưới hoặc thuộc tính này là thuộc tính viết tắt cho các thuộc tính lưới-hàng-bắt đầu, lưới-cột-bắt đầu, lưới-hàng-kết thúc và lưới-cột-cuối thuộc tính |
grid-auto-columns | Chỉ định kích thước cột mặc định |
grid-auto-flow | Chỉ định cách các mục được đặt tự động được chèn vào lưới |
grid-auto-rows | Chỉ định kích thước hàng mặc định |
grid-column | Thuộc tính viết tắt cho thuộc tính lưới-cột-bắt đầu và thuộc tính lưới-cột-kết thúc |
grid-column-end | Chỉ định nơi kết thúc mục lưới |
grid-column-gap | Chỉ định kích thước của khoảng cách giữa các cột |
grid-column-start | Chỉ định nơi bắt đầu mục lưới |
grid-gap | Thuộc tính viết tắt cho thuộc tính lưới-hàng-khoảng cách và lưới-cột-khoảng cách |
grid-row | Thuộc tính viết tắt cho thuộc tính lưới-hàng-bắt đầu và thuộc tính lưới-hàng-kết thúc |
grid-row-end | Chỉ định nơi kết thúc mục lưới |
grid-row-gap | Chỉ định kích thước của khoảng cách giữa các hàng |
grid-row-start | Chỉ định nơi bắt đầu mục lưới |
grid-template | Thuộc tính viết tắt cho các thuộc tính lưới-mẫu-hàng, lưới-mẫu-cột và thuộc tính vùng lưới |
grid-template-areas | Chỉ định cách hiển thị các cột và hàng, sử dụng các mục lưới được đặt tên |
grid-template-columns | Chỉ định kích thước của các cột và số lượng cột trong một bố cục lưới |
grid-template-rows | Chỉ định kích thước của các hàng trong bố cục lưới |
hanging-punctuation | Chỉ định liệu một ký tự dấu câu có thể được đặt bên ngoài hộp dòng hay không |
height | Đặt chiều cao của một phần tử |
hyphens | Đặt cách tách các từ để cải thiện bố cục của đoạn văn |
image-rendering | Chỉ định loại thuật toán sử dụng để chia tỷ lệ hình ảnh |
@import | Cho phép bạn nhập một biểu định kiểu vào một biểu định kiểu khác |
isolation | Xác định xem một phần tử có phải tạo nội dung xếp chồng mới hay không |
justify-content | Chỉ định căn chỉnh giữa các mục bên trong một hộp chứa linh hoạt khi các mục đó không sử dụng hết không gian có sẵn |
@keyframes | Chỉ định mã hoạt ảnh |
left | Chỉ định vị trí bên trái của một phần tử được định vị |
letter-spacing | Tăng hoặc giảm khoảng cách giữa các ký tự trong văn bản |
line-break | Chỉ định cách / nếu để ngắt dòng |
line-height | Đặt chiều cao dòng |
list-style | Đặt tất cả các thuộc tính cho một danh sách trong một khai báo |
list-style-image | Chỉ định một hình ảnh làm điểm đánh dấu mục danh sách |
list-style-position | Chỉ định vị trí của các điểm đánh dấu mục danh sách (dấu đầu dòng) |
list-style-type | Chỉ định loại điểm đánh dấu mục danh sách |
margin | Đặt tất cả các thuộc tính ký quỹ trong một khai báo |
margin-bottom | Đặt lề dưới cùng của một phần tử |
margin-left | Đặt lề trái của một phần tử |
margin-right | Đặt lề phải của một phần tử |
margin-top | Đặt lề trên của một phần tử |
mask | Ẩn các phần của một phần tử bằng cách che hoặc cắt một hình ảnh ở những vị trí cụ thể |
mask-clip | Chỉ định vùng mặt nạ |
mask-composite | Đại diện cho một hoạt động tổng hợp được sử dụng trên lớp mặt nạ hiện tại với các lớp mặt nạ bên dưới nó |
mask-image | Chỉ định một hình ảnh được sử dụng làm lớp mặt nạ cho một phần tử |
mask-mode | Chỉ định xem hình ảnh lớp mặt nạ được coi là mặt nạ độ sáng hay mặt nạ alpha |
mask-origin | Chỉ định vị trí gốc (khu vực vị trí mặt nạ) của hình ảnh lớp mặt nạ |
mask-position | Đặt vị trí bắt đầu của hình ảnh lớp mặt nạ (liên quan đến khu vực vị trí mặt nạ) |
mask-repeat | Chỉ định cách lặp lại hình ảnh lớp mặt nạ |
mask-size | Chỉ định kích thước của hình ảnh lớp mặt nạ |
mask-type | Chỉ định xem phần tử SVG <mask> được coi là mặt nạ độ sáng hay mặt nạ alpha |
max-height | Đặt chiều cao tối đa của một phần tử |
max-width | Đặt chiều rộng tối đa của một phần tử |
@media | Đặt quy tắc kiểu cho các loại phương tiện / thiết bị / kích thước khác nhau |
min-height | Đặt chiều cao tối thiểu của một phần tử |
min-width | Đặt chiều rộng tối thiểu của một phần tử |
mix-blend-mode | Chỉ định cách nội dung của phần tử sẽ kết hợp với nền gốc trực tiếp của nó |
object-fit | Chỉ định cách nội dung của phần tử được thay thế sẽ được lắp vào hộp được thiết lập theo chiều cao và chiều rộng đã sử dụng của nó |
object-position | Chỉ định căn chỉnh của phần tử được thay thế bên trong hộp của nó |
opacity | Đặt mức độ mờ cho một phần tử |
order | Đặt thứ tự của mục linh hoạt, liên quan đến phần còn lại |
orphans | Đặt số dòng tối thiểu phải để lại ở cuối trang hoặc cột |
outline | Thuộc tính viết tắt cho các thuộc tính outline-width, outline-style và outline-color |
outline-color | Đặt màu cho đường viền |
outline-offset | Thiết lập một đường viền và vẽ nó ra ngoài rìa đường viền |
outline-style | Đặt kiểu của một đường viền |
outline-width | Đặt chiều rộng của đường viền |
overflow | Chỉ định điều gì sẽ xảy ra nếu nội dung tràn hộp phần tử |
overflow-wrap | Chỉ định xem trình duyệt có thể ngắt dòng với các từ dài hay không, nếu chúng làm tràn vùng chứa |
overflow-x | Chỉ định có cắt các cạnh trái / phải của nội dung hay không, nếu nó làm tràn vùng nội dung của phần tử |
overflow-y | Chỉ định có cắt các cạnh trên / dưới của nội dung hay không, nếu nó làm tràn vùng nội dung của phần tử |
padding | Một thuộc tính viết tắt cho tất cả các thuộc tính padding- * |
padding-bottom | Đặt phần đệm dưới cùng của một phần tử |
padding-left | Đặt phần đệm bên trái của một phần tử |
padding-right | Đặt phần đệm bên phải của một phần tử |
padding-top | Đặt phần đệm trên cùng của một phần tử |
page-break-after | Đặt hành vi ngắt trang sau một phần tử |
page-break-before | Đặt hành vi ngắt trang trước một phần tử |
page-break-inside | Đặt hành vi ngắt trang bên trong một phần tử |
paint-order | Đặt thứ tự cách tô một phần tử hoặc văn bản SVG. |
perspective | Cung cấp cho một phần tử được định vị 3D một số góc nhìn |
perspective-origin | Xác định vị trí mà người dùng đang nhìn vào phần tử được định vị 3D |
pointer-events | Xác định xem một phần tử có phản ứng với các sự kiện con trỏ hay không |
position | Chỉ định loại phương pháp định vị được sử dụng cho một phần tử (tĩnh, tương đối, tuyệt đối hoặc cố định) |
quotes | Đặt loại dấu ngoặc kép cho các trích dẫn được nhúng |
resize | Xác định nếu (và cách thức) một phần tử có thể thay đổi kích thước bởi người dùng |
right | Chỉ định đúng vị trí của một phần tử được định vị |
rotate | Chỉ định sự xoay vòng của một phần tử |
row-gap | Chỉ định khoảng cách giữa các hàng lưới |
scale | Chỉ định kích thước của một phần tử bằng cách tăng hoặc giảm tỷ lệ |
scroll-behavior | Chỉ định xem có nên tạo hoạt ảnh mượt mà vị trí cuộn trong một hộp có thể cuộn hay không, thay vì chuyển thẳng |
tab-size | Chỉ định chiều rộng của một ký tự tab |
table-layout | Xác định thuật toán được sử dụng để sắp xếp các ô, hàng và cột trong bảng |
text-align | Chỉ định căn lề ngang của văn bản |
text-align-last | Mô tả cách dòng cuối cùng của một khối hoặc một dòng ngay trước dấu ngắt dòng bắt buộc được căn chỉnh khi căn chỉnh văn bản là “justify” |
text-combine-upright | Chỉ định sự kết hợp của nhiều ký tự vào khoảng trống của một ký tự |
text-decoration | Chỉ định trang trí được thêm vào văn bản |
text-decoration-color | Chỉ định màu của trang trí văn bản |
text-decoration-line | Chỉ định kiểu dòng trong trang trí văn bản |
text-decoration-style | Chỉ định kiểu của dòng trong trang trí văn bản |
text-decoration-thickness | Chỉ định độ dày của đường trang trí |
text-emphasis | Áp dụng các dấu nhấn mạnh cho văn bản |
text-indent | Chỉ định thụt lề của dòng đầu tiên trong khối văn bản |
text-justify | Chỉ định phương pháp căn chỉnh được sử dụng khi căn chỉnh văn bản là “căn đều” |
text-orientation | Xác định hướng của các ký tự trong một dòng |
text-overflow | Chỉ định điều gì sẽ xảy ra khi văn bản tràn phần tử chứa |
text-shadow | Thêm bóng vào văn bản |
text-transform | Kiểm soát cách viết hoa của văn bản |
text-underline-position | Chỉ định vị trí của gạch dưới được đặt bằng thuộc tính text-decoration |
top | Chỉ định vị trí trên cùng của một phần tử được định vị |
transform | Áp dụng chuyển đổi 2D hoặc 3D cho một phần tử |
transform-origin | Cho phép bạn thay đổi vị trí trên các phần tử đã chuyển đổi |
transform-style | Chỉ định cách các phần tử lồng nhau được hiển thị trong không gian 3D |
transition | Một thuộc tính viết tắt cho tất cả các thuộc tính chuyển đổi- * |
transition-delay | Chỉ định khi nào hiệu ứng chuyển tiếp sẽ bắt đầu |
transition-duration | Chỉ định bao nhiêu giây hoặc mili giây để hoàn thành một hiệu ứng chuyển tiếp |
transition-property | Chỉ định tên của thuộc tính CSS mà hiệu ứng chuyển tiếp dành cho |
transition-timing-function | Chỉ định đường cong tốc độ của hiệu ứng chuyển tiếp |
translate | Chỉ định vị trí của một phần tử |
unicode-bidi | Được sử dụng cùng với thuộc tính hướng để đặt hoặc trả lại xem văn bản có nên được ghi đè để hỗ trợ nhiều ngôn ngữ trong cùng một tài liệu hay không |
user-select | Chỉ định xem văn bản của một phần tử có thể được chọn hay không |
vertical-align | Đặt căn chỉnh theo chiều dọc của một phần tử |
visibility | Chỉ định xem một phần tử có hiển thị hay không |
white-space | Chỉ định cách xử lý khoảng trắng bên trong một phần tử |
widows | Đặt số dòng tối thiểu phải để lại ở đầu trang hoặc cột |
width | Đặt chiều rộng của một phần tử |
word-break | Chỉ định cách ngắt các từ khi đến cuối dòng |
word-spacing | ăng hoặc giảm khoảng cách giữa các từ trong văn bản |
word-wrap | Cho phép ngắt các từ dài, không thể ngắt được và chuyển sang dòng tiếp theo |
writing-mode | chế độ viết Chỉ định xem các dòng văn bản được bố trí theo chiều ngang hay chiều dọc |
z-index | Đặt thứ tự ưu tiên của một phần tử |
Trên đây là một số hướng dẫn nhỏ về tùy biến CSS. Nếu có thắc mắc nay cần tư vấn về những vấn đề thiết kế web của bạn. Hãy liên hệ với VMO Agency Marketing ngay nhé!