CSS là gì ? Các thuộc tính cơ bản khi sử dụng CSS

Shape Image
Shape Image
CSS là gì ? Các thuộc tính cơ bản khi sử dụng CSS

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. 

Tại sao CSS lại quan trọng ?

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.

Tầm quan trọng của CSS
Tầm quan trọng của CSS
  • Giúp tạo những đoạn code dễ đọc hơn
  • Dễ dàng thay đổi
  • Tiết kiệm được nhiều thời gian
  • Trang tải nhanh hơn
  • Chỉnh sửa dễ dàng

Các thuộc tính cơ bản của CSS ?

accent-colorChỉ định màu cho nhấp chuột giao diện người dùng
align-contentChỉ định căn chỉnh giữa các dòng bên trong box chứa linh hoạt
align-itemsChỉ định căn chỉnh cho các mục bên trong box chứa linh hoạt
align-selfChỉ đị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)
animationThuộc tính viết tắt cho tất cả các thuộc tính animation- *
animation-delayChỉ định thời gian trễ để bắt đầu animation
animation-directionChỉ đị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-durationChỉ định thời lượng hoạt ảnh sẽ hoàn thành một chu kỳ
animation-fill-modeChỉ đị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-countChỉ định số lần một hoạt ảnh sẽ được phát
animation-nameChỉ định tên cho hoạt ảnh @keyframes
animation-play-stateChỉ định hoạt ảnh đang chạy hay bị tạm dừng
animation-timing-functionChỉ định đường cong tốc độ của hoạt ảnh
aspect-ratioChỉ định tỷ lệ co ưa thích của một phần tử
backdrop-filterXác định hiệu ứng đồ họa cho khu vực phía sau một phần tử
backface-visibilityXá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
backgroundThuộ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-modeChỉ định chế độ hòa trộn của mỗi lớp nền (màu / hình ảnh)
background-clipXá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-colorChỉ định màu nền của một phần tử
background-imageChỉ định một hoặc nhiều hình nền cho một phần tử
background-originChỉ định vị trí gốc của hình nền
background-positionChỉ định vị trí của hình nền
background-position-xChỉ định vị trí của hình nền trên trục x
background-position-yChỉ đị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-sizeChỉ định kích thước của hình nền
borderThuộ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-bottomThuộ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-radiusXác định bán kính của đường viền góc dưới bên trái
border-bottom-right-radiusXá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-imageThuộc tính viết tắt cho tất cả các thuộc tính border-image- *
border-image-outsetChỉ đị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-repeatChỉ đị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-sliceChỉ định cách cắt hình ảnh đường viền
border-image-sourceChỉ định đường dẫn đến hình ảnh được sử dụng làm đường viền
border-image-widthChỉ định chiều rộng của hình ảnh đường viền
border-leftThuộ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-radiusThuộc tính viết tắt cho thuộc tính bốn đường viền – * – radius
border-rightMộ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-topThuộ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-radiusXác định bán kính của đường viền góc trên bên trái
border-top-right-radiusXá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-shadowGắn một hoặc nhiều bóng vào một phần tử
box-sizingXá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-afterChỉ đị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-beforeChỉ đị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-insideChỉ đị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-sideChỉ định vị trí của chú thích bảng
caret-colorChỉ đị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
@charsetChỉ định mã hóa ký tự được sử dụng trong biểu định kiểu
clearChỉ định điều gì sẽ xảy ra với phần tử bên cạnh phần tử nổi
clipCắt một phần tử được định vị tuyệt đối
colorĐặt màu cho văn bản
column-countChỉ định số cột mà một phần tử sẽ được chia thành
column-fillChỉ định cách điền vào các cột, cân bằng hay không
column-gapChỉ định khoảng cách giữa các cột
column-ruleThuộc tính viết tắt cho tất cả các thuộc tính column-rule- *
column-rule-colorChỉ định màu của quy tắc giữa các cột
column-rule-styleChỉ định kiểu của quy tắc giữa các cột
column-rule-widthChỉ định chiều rộng của quy tắc giữa các cột
column-spanChỉ định số lượng cột mà một phần tử sẽ trải qua
column-widthChỉ định chiều rộng cột
columnsThuộ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-incrementTăng hoặc giảm giá trị của một hoặc nhiều bộ đếm CSS
counter-resetTạo hoặc đặt lại một hoặc nhiều bộ đếm CSS
cursorChỉ định con trỏ chuột được hiển thị khi trỏ qua một phần tử
directionChỉ định hướng văn bản / hướng viết
displayChỉ định cách một phần tử HTML nhất định sẽ được hiển thị
empty-cellsChỉ định có hay không hiển thị đường viền và nền trên các ô trống trong bảng
filterXá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ị
flexMộ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-basisChỉ định độ dài ban đầu của một mục linh hoạt
flex-directionChỉ định hướng của các mục linh hoạt
flex-flowThuộc tính viết tắt cho hướng uốn và thuộc tính bọc uốn
flex-growChỉ định mục sẽ phát triển bao nhiêu so với phần còn lại
flex-shrinkChỉ định cách mục sẽ thu nhỏ so với phần còn lại
flex-wrapChỉ định xem các mục linh hoạt có nên bọc hay không
floatChỉ định xem một phần tử có nên nổi sang trái, phải hay không
fontThuộ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-faceQuy 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-familyChỉ định họ phông chữ cho văn bản
font-feature-settingsCho 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-valuesCho 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-kerningKiể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-overrideKiểm soát việc sử dụng glyph dành riêng cho ngôn ngữ trong một kiểu chữ
font-sizeChỉ định kích thước phông chữ của văn bản
font-size-adjustDuy trì khả năng đọc của văn bản khi xảy ra dự phòng phông chữ
font-stretchChọn một khuôn mặt bình thường, cô đọng hoặc mở rộng từ họ phông chữ
font-styleChỉ định kiểu phông chữ cho văn bản
font-synthesisKiể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-variantChỉ đị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-alternatesKiể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-capsKiể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-asianKiể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-ligaturesKiể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-numericKiể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-positionKiể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-weightChỉ định trọng lượng của phông chữ
gapThuộ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
gridThuộ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-areaChỉ đị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-columnsChỉ định kích thước cột mặc định
grid-auto-flowChỉ định cách các mục được đặt tự động được chèn vào lưới
grid-auto-rowsChỉ định kích thước hàng mặc định
grid-columnThuộ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-endChỉ định nơi kết thúc mục lưới
grid-column-gapChỉ định kích thước của khoảng cách giữa các cột
grid-column-startChỉ định nơi bắt đầu mục lưới
grid-gapThuộ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-rowThuộ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-endChỉ định nơi kết thúc mục lưới
grid-row-gapChỉ định kích thước của khoảng cách giữa các hàng
grid-row-startChỉ định nơi bắt đầu mục lưới
grid-templateThuộ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-areasChỉ đị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-columnsChỉ đị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-rowsChỉ định kích thước của các hàng trong bố cục lưới
hanging-punctuationChỉ đị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-renderingChỉ định loại thuật toán sử dụng để chia tỷ lệ hình ảnh
@importCho phép bạn nhập một biểu định kiểu vào một biểu định kiểu khác
isolationXá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-contentChỉ đị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
@keyframesChỉ định mã hoạt ảnh
leftChỉ định vị trí bên trái của một phần tử được định vị
letter-spacingTăng hoặc giảm khoảng cách giữa các ký tự trong văn bản
line-breakChỉ đị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-imageChỉ định một hình ảnh làm điểm đánh dấu mục danh sách
list-style-positionChỉ định vị trí của các điểm đánh dấu mục danh sách (dấu đầu dòng)
list-style-typeChỉ đị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-clipChỉ đị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-imageChỉ định một hình ảnh được sử dụng làm lớp mặt nạ cho một phần tử
mask-modeChỉ định xem hình ảnh lớp mặt nạ được coi là mặt nạ độ sáng hay mặt nạ alpha
mask-originChỉ đị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-repeatChỉ định cách lặp lại hình ảnh lớp mặt nạ
mask-sizeChỉ định kích thước của hình ảnh lớp mặt nạ
mask-typeChỉ đị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-modeChỉ đị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-fitChỉ đị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-positionChỉ đị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
outlineThuộ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-offsetThiế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
overflowChỉ định điều gì sẽ xảy ra nếu nội dung tràn hộp phần tử
overflow-wrapChỉ đị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-xChỉ đị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-yChỉ đị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ử
paddingMộ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.
perspectiveCung cấp cho một phần tử được định vị 3D một số góc nhìn
perspective-originXác định vị trí mà người dùng đang nhìn vào phần tử được định vị 3D
pointer-eventsXác định xem một phần tử có phản ứng với các sự kiện con trỏ hay không
positionChỉ đị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
resizeXá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
rightChỉ định đúng vị trí của một phần tử được định vị
rotateChỉ định sự xoay vòng của một phần tử
row-gapChỉ định khoảng cách giữa các hàng lưới
scaleChỉ đị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-behaviorChỉ đị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-sizeChỉ định chiều rộng của một ký tự tab
table-layoutXá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-alignChỉ định căn lề ngang của văn bản
text-align-lastMô 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-uprightChỉ đị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-decorationChỉ định trang trí được thêm vào văn bản
text-decoration-colorChỉ định màu của trang trí văn bản
text-decoration-lineChỉ định kiểu dòng trong trang trí văn bản
text-decoration-styleChỉ định kiểu của dòng trong trang trí văn bản
text-decoration-thicknessChỉ đị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-indentChỉ định thụt lề của dòng đầu tiên trong khối văn bản
text-justifyChỉ đị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-orientationXác định hướng của các ký tự trong một dòng
text-overflowChỉ định điều gì sẽ xảy ra khi văn bản tràn phần tử chứa
text-shadowThêm bóng vào văn bản
text-transformKiểm soát cách viết hoa của văn bản
text-underline-positionChỉ định vị trí của gạch dưới được đặt bằng thuộc tính text-decoration
topChỉ đị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-originCho phép bạn thay đổi vị trí trên các phần tử đã chuyển đổi
transform-styleChỉ định cách các phần tử lồng nhau được hiển thị trong không gian 3D
transitionMột thuộc tính viết tắt cho tất cả các thuộc tính chuyển đổi- *
transition-delayChỉ định khi nào hiệu ứng chuyển tiếp sẽ bắt đầu
transition-durationChỉ đị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-propertyChỉ định tên của thuộc tính CSS mà hiệu ứng chuyển tiếp dành cho
transition-timing-functionChỉ định đường cong tốc độ của hiệu ứng chuyển tiếp
translateChỉ đị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-selectChỉ đị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ử
visibilityChỉ định xem một phần tử có hiển thị hay không
white-spaceChỉ đị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-breakChỉ đị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-wrapCho 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-modechế độ 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ử
Tùy biến CSS Cơ bản (Source: https://www.w3schools.com/cssref/css3_browsersupport.php)

Kết luận 

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é!

5/5 - (1 bình chọn)

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *