CSS: Thuộc tính COLOR
Thuộc tính color trong CSS dùng để tô màu cho chữ. Bạn lên web thấy chữ màu xanh, màu đỏ, màu vàng… đó là do người ta sử dụng thuộc tính color của CSS. Giờ chúng ta sẽ tìm hiểu cách sử dụng color trong CSS
Chức năng:
Tô màu, thiết lập màu cho text- chữ
Cấu trúc:
color: value;
Với value có thể là: mã màu, tên màu sắc hoặc sử dụng hệ màu RGB , inherit
- Sử dụng mã màu:
Mã màu thì bạn có thể 1 vài mã co bản. ví dụ như: # 000000 : màu đen; #FFFFFF: màu trắng. Thường thi không ai nhớ được mã màu đâu. Để lấy mã màu, chúng ta thường sử dụng Photoshop để lấy hoặc các web cung cấp mã màu Ví dụ sử dụng mã màu
p { color: #222; }
Xem demo
- Sử dụng tên màu sắc
Một vài tên màu sắc cần nhớ là: red – màu đỏ, black – màu đen,… nói chung nó lên tên tiếng anh.
p { color: green; }
Xem demo
- Sử dụng hệ màu RGB
Hệ màu RGB chúng ta có thể dùng Photoshop để lấy. Không ai nhớ được đâu
p { color: rgb(255,255,0); }
Xem demo
- Sử dụng inherit
. Inherit là thừa kế - nghĩa là nó sẽ lấy màu của thẻ html cha của nó
p { color: inherit ;}
Xem demo
Trong 4 cách trên sử dụng Color ở trên, bạn chỉ cần sử dụng 1 kiểu bạn ưu thích là được. Chú ý khi sử dụng thuộc tính color : chọn màu chữ tương phản với màu nền của web. Ví dụ: nên web màu trắng thì cọn chữ màu đen,… như thế làm cho người dùng dễ đọc Bảng tên màu và mã màu tham khảo
Color Name | Hex Value | Swatch |
---|---|---|
aliceblue | #F0F8FF | |
antiquewhite | #FAEBD7 | |
aqua | #00FFFF | |
aquamarine | #7FFFD4 | |
azure | #F0FFFF | |
beige | #F5F5DC | |
bisque | #FFE4C4 | |
black | #000000 | |
blanchedalmond | #FFEBCD | |
blue | #0000FF | |
blueviolet | #8A2BE2 | |
brown | #A52A2A | |
burlywood | #DEB887 | |
cadetblue | #5F9EA0 | |
chartreuse | #7FFF00 | |
chocolate | #D2691E | |
coral | #FF7F50 | |
cornflowerblue | #6495ED | |
cornsilk | #FFF8DC | |
crimson | #DC143C | |
cyan | #00FFFF | |
darkblue | #00008B | |
darkcyan | #008B8B | |
darkgoldenrod | #B8860B | |
darkgray | #A9A9A9 | |
darkgrey | #A9A9A9 | |
darkgreen | #006400 | |
darkkhaki | #BDB76B | |
darkmagenta | #8B008B | |
darkolivegreen | #556B2F | |
darkorange | #FF8C00 | |
darkorchid | #9932CC | |
darkred | #8B0000 | |
darksalmon | #E9967A | |
darkseagreen | #8FBC8F | |
darkslateblue | #483D8B | |
darkslategray | #2F4F4F | |
darkslategrey | #2F4F4F | |
darkturquoise | #00CED1 | |
darkviolet | #9400D3 | |
deeppink | #FF1493 | |
deepskyblue | #00BFFF | |
dimgray | #696969 | |
dimgrey | #696969 | |
dodgerblue | #1E90FF | |
firebrick | #B22222 | |
floralwhite | #FFFAF0 | |
forestgreen | #228B22 | |
fuchsia | #FF00FF | |
gainsboro | #DCDCDC | |
ghostwhite | #F8F8FF | |
gold | #FFD700 | |
goldenrod | #DAA520 | |
gray | #808080 | |
grey | #808080 | |
green | #008000 | |
greenyellow | #ADFF2F | |
honeydew | #F0FFF0 | |
hotpink | #FF69B4 | |
indianred | #CD5C5C | |
indigo | #4B0082 | |
ivory | #FFFFF0 | |
khaki | #F0E68C | |
lavender | #E6E6FA | |
lavenderblush | #FFF0F5 | |
lawngreen | #7CFC00 | |
lemonchiffon | #FFFACD | |
lightblue | #ADD8E6 | |
lightcoral | #F08080 | |
lightcyan | #E0FFFF | |
lightgoldenrodyellow | #FAFAD2 | |
lightgray | #D3D3D3 | |
lightgrey | #D3D3D3 | |
lightgreen | #90EE90 |
Color Name | Hex Value | Swatch |
---|---|---|
lightpink | #FFB6C1 | |
lightsalmon | #FFA07A | |
lightseagreen | #20B2AA | |
lightskyblue | #87CEFA | |
lightslategray | #778899 | |
lightslategrey | #778899 | |
lightsteelblue | #B0C4DE | |
lightyellow | #FFFFE0 | |
lime | #00FF00 | |
limegreen | #32CD32 | |
linen | #FAF0E6 | |
magenta | #FF00FF | |
maroon | #800000 | |
mediumaquamarine | #66CDAA | |
mediumblue | #0000CD | |
mediumorchid | #BA55D3 | |
mediumpurple | #9370D8 | |
mediumseagreen | #3CB371 | |
mediumslateblue | #7B68EE | |
mediumspringgreen | #00FA9A | |
mediumturquoise | #48D1CC | |
mediumvioletred | #C71585 | |
midnightblue | #191970 | |
mintcream | #F5FFFA | |
mistyrose | #FFE4E1 | |
moccasin | #FFE4B5 | |
navajowhite | #FFDEAD | |
navy | #000080 | |
oldlace | #FDF5E6 | |
olive | #808000 | |
olivedrab | #6B8E23 | |
orange | #FFA500 | |
orangered | #FF4500 | |
orchid | #DA70D6 | |
palegoldenrod | #EEE8AA | |
palegreen | #98FB98 | |
paleturquoise | #AFEEEE | |
palevioletred | #D87093 | |
papayawhip | #FFEFD5 | |
peachpuff | #FFDAB9 | |
peru | #CD853F | |
pink | #FFC0CB | |
plum | #DDA0DD | |
powderblue | #B0E0E6 | |
purple | #800080 | |
red | #FF0000 | |
rosybrown | #BC8F8F | |
royalblue | #4169E1 | |
saddlebrown | #8B4513 | |
salmon | #FA8072 | |
sandybrown | #F4A460 | |
seagreen | #2E8B57 | |
seashell | #FFF5EE | |
sienna | #A0522D | |
silver | #C0C0C0 | |
skyblue | #87CEEB | |
slateblue | #6A5ACD | |
slategray | #708090 | |
slategrey | #708090 | |
snow | #FFFAFA | |
springgreen | #00FF7F | |
steelblue | #4682B4 | |
tan | #D2B48C | |
teal | #008080 | |
thistle | #D8BFD8 | |
tomato | #FF6347 | |
turquoise | #40E0D0 | |
violet | #EE82EE | |
wheat | #F5DEB3 | |
white | #FFFFFF | |
whitesmoke | #F5F5F5 | |
yellow | #FFFF00 | |
yellowgreen | #9ACD32 |
Xem thêm những bài khác
- Hướng dẫn chi tiết các bước làm một website
- Lựa chọn công nghệ, phần mềm cần cài đặt để làm website
- Hướng dẫn cài đặt Xampp chi tiết bằng hình ảnh
- Hướng dẫn cài đặt Drupal chi tiết trên localhost
- Giới thiệu thành phần, cấu trúc của 1 trang web
- Hướng dẫn cài đặt theme, module trong site Drupal
- Khái niệm cần biết khi xây dựng web drupal
- Một số module thường dùng trong drupal
- Hướng dẫn tạo chuyên mục trong drupal
- Xóa dấu tiếng việt trong đường dẫn web drupal
- Tên miền là gì?
- Làm thế nào để đăng ký tên miền: đơn giản, nhanh chóng ?
- Tên miền giá rẻ: những thông tin cần biết
- Website là gì?
- Kiến thức cần biết để làm 1 website
- Hướng dẫn sử dụng Hook trong drupal cho người mới bắt đầu
- Hướng dẫn sử dụng hook_form_alter trong drupal
- Hướng dẫn chi tiết cách tạo module trong drupal
- Kinh nghiệm lựa chọn đối tác thiết kế web cho doanh nghiệp
- Thế nào là một thiết kế website tốt?
- Những vấn đề cần biết trước khi dự định thiết kế web
- Những câu hỏi cần đặt ra với đối tác thiết kế web cho bạn
- Chi phí thiết kế web, giá làm web hết bao nhiêu?
Bình luận