Quảng cáo

Xem chi tiết tại đây

Thư mục

Ảnh ngẫu nhiên

Anh1.png Daohamnguyenham_2.jpg Daohamnguyenham_1.jpg Scan0002.jpg BDTeasy.bmp Because_I_love_you.mp3 Caravan_Of_Life.mp3 GTLN_GTNN_ON_THI_DH.swf IMG_20121118_093222.jpg Scan0001.jpg 1346477936195692_574_574.jpg 1346477246326261_574_574.jpg Ban_do_Tu_duy.mp3 Phong_su_HS_Tien.flv LichsuVN.jpg
Gốc > Lập trình (Bài viết) > HTML, CSS, JavaScript >

Đơn vị chiều dài và đơn vị màu sắc trong CSS.

Trong CSS2 hỗ trợ các loại đơn vị là đơn vị đo chiều dài và đơn vị đo góc, thời gian, cường độ âm thanh và màu sắc. Tuy nhiên, sử dụng phổ biến nhất vẫn là đơn vị đo chiều dài và màu sắc. Hãy ghi nhớ các đơn vị này, sẽ rất hữu ích cho bạn khi xây dựng một website.

Đơn vị chiều dài.

CSS chia đơn vị chiều dài ra làm hai loại: tương đốituyệt đối, tuy nhiên tôi sẽ gộp chung lại để giới thiệu với các bạn, còn việc phân biệt chúng sẽ dành cho các bạn.

Bảng thống kê các đơn vị chiều dài trong CSS
Giá trị Mô tả
% Giá trị tỷ lệ phần trăm so với giá trị khác ,theo định nghĩa cho mỗi phần tử. Thường thì giá trị phần trăm là tương đối so với kích thước font chữ của phần tử ,nhưng nó có thể là chiều rộng của trang.
in inches (1 inch = 2.54 cm)
cm centimetres
mm millimetres
em 1 em tương đương kích thước font hiện hành, nếu font hiện hành có kích cỡ 14px thì 1 em = 14 px. Đây là một đơn vị rất hữu ích trong việc hiển thị trang web.
ex 1 ex bằng chiều cao của chữ x in thường của font hiện hành. Do đó, đơn vị này không những phụ thuộc trên kích cỡ font chữ mà còn phụ thuộc loại font chữ vì cùng 1 cỡ 14px nhưng chiều cao chữ x của font Times và font Tohama là khác nhau.
pt Point (1 pt = 1/72 inch)
pc Pica (1 pc = 12 pt)
px Pixels (điểm ảnh trên màn hình máy tính)

Đơn vị màu sắc.

Có nhiều cách để thiết lập chỉ thị màu sắc cho một đối tượng trong CSS, tuy nhiên chúng cho kết quả như nhau, việc sử dụng cách nào là tùy ở bạn. Cho dù bạn dùng cách nào hãy luôn nhớ rằng các trình duyệt chỉ hỗ trợ hệ màu RGB, nghĩa là hệ gồm 3 màu cơ bản (red, green, và blue) khác với hệ màu CMYK thường dùng trong in ấn.

Bảng thống kê các đơn vị màu sắc trong CSS
Giá trị Mô tả Ví dụ Trình duyệt
Hexadecimal Mã màu RGB dạng hệ thập lục #RRGGBB , có giá trị từ 0 đến FF.
p {
background-color:#ff0000;
}
Tất cả
RGB Màu RGB với 3 giá trị rgb(red, green, blue), có giá trị từ 0 đến 255 hoặc từ 0% đến 100%.
p {
background-color:rgb(255,0,0);
}
p {
background-color:rgb(100%,0%,0%);
}
Tất cả
RGBA Là hệ màu mở rộng của RGB rgba(red, green, blue, alpha), trong đó alpha biểu thị cho độ trong suốt của màu sắc, có giá trị từ 0.0 đến 1.0.
p {
background-color: rgba(255,0,0,0.5);
}
IE9+, Firefox, Chrome, Safari, Opera 10+
HSL Hệ màu phối hợp dạng hình trụ hsl(hue, saturation, lightness), trong đó hue có giá trị từ 0 đến 360, saturation và lightness có giá trị từ 0% đến 100%.
p {
background-color:hsl(120,65%,75%);
}
IE9+, Firefox, Chrome, Safari, Opera 10+
HSLA Là hệ màu mở rộng của HSL hsla(hue, saturation, lightness, alpha), trong đó alpha có giá trị từ 0.0 đến 1.0.
p {
background-color:hsla(120,65%,75%,0.5);
}
IE9+, Firefox, Chrome, Safari, Opera 10+
Color-name Tên màu tiếng Anh gồm 17 màu tiêu chuẩn aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow và được mở rộng thêm 130 màu khác.
p {
background-color: red;
}
Tất cả

Nhắn tin cho tác giả
Nguyễn Thiên Tứ @ 14:18 15/12/2013
Số lượt xem: 2266
Số lượt thích: 0 người
Avatar

Đơn vị chiều dài và đơn vị màu sắc trong CSS.

Avatar

ĐVT xin chào

 
Gửi ý kiến