Đơn vị đo trong CSS

CSS có một số đơn vị khác nhau để thể hiện độ dài, kích thước.

Nhiều thuộc tính CSS nhận các giá trị kích thước, chẳng hạn như width, height, margin, padding, font-size

Đơn vị kích thước này gắn liền với số đo nhất định, chẳng hạn như 10px, 2em

Ví dụ

Đặt các giá trị độ dài khác nhau, sử dụng px (pixel):

h1 {
	font-size: 60px;
}
p {
	font-size: 25px;
	line-height: 50px;
}
div {
	min-width: 50%;
}

Lưu ý:

Khoảng trắng không được xuất hiện giữa số và đơn vị. Tuy nhiên, nếu giá trị là 0, đơn vị có thể được bỏ qua.

Đối với một số thuộc tính CSS, độ dài âm được phép.

Có hai loại đơn vị độ dài: tuyệt đốitương đối.

Độ dài tuyệt đối

Các đơn vị độ dài tuyệt đối là cố định và độ dài được biểu thị bằng bất kỳ đơn vị nào trong số này sẽ xuất hiện chính xác như kích thước đó.

Đơn vị độ dài tuyệt đối không được khuyến khích sử dụng trên màn hình, vì kích thước màn hình thay đổi rất nhiều. Tuy nhiên, chúng có thể được sử dụng nếu phương tiện đầu ra được biết, chẳng hạn như cho bố cục in.

Đơn vị Mô tả
cm centimeters
mm millimeters
in inches (1in = 96px = 2.54cm)
px * pixels (1px = 1/96th of 1in)
pt points (1pt = 1/72 of 1in)
pc picas (1pc = 12 pt)

* Điểm ảnh (px) có liên quan đến thiết bị xem. Đối với các thiết bị dpi thấp, 1px là một pixel thiết bị (chấm) của màn hình. Đối với máy in và màn hình có độ phân giải cao, 1px ngụ ý nhiều pixel thiết bị.

Độ dài tương đối

Đơn vị độ dài tương đối chỉ định độ dài liên quan đến một thuộc tính độ dài đối tượng khác. Các đơn vị độ dài tương đối mở rộng quy mô tốt hơn giữa các phương tiện kết xuất khác nhau.

Đơn vị Mô tả
em Liên quan đến kích thước phông chữ của phần tử (2em có nghĩa là gấp 2 lần kích thước phông chữ hiện tại)
ex Liên quan đến x-height của phông chữ hiện tại (hiếm khi được sử dụng)
ch Tương đối với chiều rộng của ký tự “0” (không, ký tự Unicode U+0030) trong phông chữ của phần tử.
Trong trường hợp không thể hoặc không thực tế để xác định số đo của “0”, nó phải được giả định là rộng 0,5em x cao 1em.
rem Liên quan đến kích thước phông chữ của phần tử gốc
vw Tương đối với 1% chiều rộng của viewport *
100vw = 100% chiều rộng viewport
vh Tương đối với 1% chiều cao của viewport *
vmin Tương đối với 1% kích thước nhỏ hơn của viewport *
vmax Tương đối với 1% kích thước lớn hơn của viewport *
% Liên quan đến phần tử mẹ

* Viewport = kích thước cửa sổ trình duyệt. Nếu khung nhìn rộng 50cm, 1vw = 0,5cm.

Mẹo: Các đơn vị emrem rất thiết thực trong việc tạo bố cục có thể mở rộng hoàn hảo!

Các tính năng mặc định của trang web

Các trang web được Đại Phố thiết kế luôn mặc định các tính năng sau:

  • Mã nguồn được tối ưu với các công cụ tìm kiếm.
  • Trang web hỗ trợ thiết bị di động, tương thích với mọi thiết bị: điện thoại, máy tính bảng, máy tính và laptop. Sử dụng công nghệ HTML5, CSS3 Mobile Responsive.
  • Dễ dàng thay đổi theo phong cách riêng của bạn.
  • Dễ dàng thêm bớt số lượng các trang, và chỉnh sửa nội hiển thị trên website tùy ý
  • Phần quản trị rõ ràng, trực quan, dễ sử dụng với cả những người không chuyên về IT.

Quản lí nội dung: có thể dễ dàng thêm, xóa, sửa các thông tin trên website

  • Thông tin sản phẩm và dịch vụ của công ty
  • Thông tin dự án, đối tác Giới thiệu – Liên hệ
  • Thông tin giới thiệu, thông tin liên hệ
  • Tin tức
  • Hình ảnh trên website, sửa các tag alt, descriotion, caption
  • Hình ảnh và caption trên Slideshow
Xin vui lòng liên hệ với chúng tôi nếu cần thêm thông tin