Định dạng màu trong css


Tự học html css javascript 28/11/2018 4

Định dạng màu chữ, đường kẻ, màu nền. Các bảng mã màu: RGB, RGBA, HEX trong css

Màu sắc trong CSS

Trong css, màu được sử dụng theo tên hoặc theo mã màu. Gồm các loại sau:

  1. Tên màu: red (màu đỏ), green(màu xanh lá cây), blue (xanh lam)
  2. Mã màu RGB: rgb(255, 0, 0) - màu đỏ, rgb(0, 128, 0) - xanh lá cây, rgb(0, 0, 255) - xanh lam
  3. Mã màu hex: #ff0000 - màu đỏ,#008000 - xanh lá cây,#0000ff - xanh lam
  4. Mã màu RGBA: rgb(255, 0, 0, 0.8) - màu đỏ, trong suốt 80%

Thông thường chúng ta hay sử dụng mã màu hex. Một số bản template thiết kế bằng các phần mềm đồ họa khác thì có thể dùng màu RGB để đồng nhất màu. 

Bảng mã màu

Dưới đây là bảng mã màu cơ bản trong css

Tên màu Mã HEX Màu
AliceBlue
#F0F8FF
 
Black #000000  
White #ffffff  
Red #ff0000  
Blue #0000ff  
Green #008000  
Yellow #ffff00  
Tomato
#FF6347
 
SlateGray #708090  

Để xem các mã màu khi thiết kế các bạn có thể dùng trình duyệt chrome, tạo một màu nào đó cho đối tượng, ví dụ: black, sau đó trên màn hình => click phải chuột => kiểm tra => tìm tab style để xem và điều chỉnh các thuộc tính css, mã màu.

Tạo màu nền (background color)

Để tạo màu nền cho một đối tượng chúng ta dùng mã backgroud-color: {mã màu} trong đó mã màu đã giới thiệu các loại ở trên.

Ví dụ 1: Tạo thẻ h1 có màu nền là màu đỏ

Thẻ h1 màu đỏ

<h1 style="background-color: red">Thẻ h1 màu đỏ</h1>

Ví dụ 2: Tạo 1 đoạn văn bản có màu nền là màu Tomato (sử dụng mã màu hex)

Đoạn văn bản có màu nền Tomato (sử dụng mà màu hex)

<p style="background-color: #FF6347">Đoạn văn bản có màu nền Tomato (sử dụng mã màu hex)</p>

Màu chữ (text color)

Để tạo màu chữ, bạn sử dụng mã css cho thuộc tính color

Ví dụ 3: Đoạn văn bản màu nền Tomato, màu chữ trắng

Đoạn văn bản màu nền Tomato, màu chữ trắng

<p style="background-color: tomato; color: white">Đoạn văn bản màu nền Tomato, màu chữ trắng</p>

Màu đường kẻ (border color)

Cú pháp: border: {độ dày đường kẻ} {kiểu đường kẻ} {màu đường kẻ};

- Độ dày tính bằng pixel
- Kiểu đường kẻ: solid (đặc), dotted (chấm chấm), ...
- Màu đường kẻ: white, #fff, ... vv

Ví dụ 4: Tạo một khung có đường kẻ dày 1px, đặc, màu đỏ

Khung đường kẻ màu đỏ

<div style="border: 1px solid red">Khung đường kẻ màu đỏ</div>

 


Bài cùng chuyên mục:


  • Định dạng màu trong css
  • Tìm hiểu css trong html
  • Tạo bảng (table) trong html
  • Thẻ chèn video - audio vào trong trang html
  • Các thẻ phân chia khu vực - div span - thông tin address - trích dẫn blockquote - định dạng pre trong html
  • Tạo biểu mẫu - form nhập liệu trong html
  • Các thẻ căn lề - thay đổi nền trang - chèn ảnh - siêu liên kết - khối văn bản trong html
  • Các thẻ định dạng kiểu chữ và văn bản trong html
  • Các thẻ cơ bản trong HTML
  • Giới thiệu ngôn ngữ HTML


  • Bình Luận(0)

    
    • Videos
    • Cài đặt XAMPP

    • PHP HELLO WORLD

    • PHP - nhập xuất dữ liệu

    
    tự học css