[Bài 2] Background và text trong CSS – Tìm hiểu CSS cùng BIT

Bạn đang ở bài 2 trong 6 bài của serie Học Css cơ bản.

Background và text trong CSS được dùng như thế nào?

Ở bài trước chúng ta đã cùng nhau tìm hiểu một số định nghĩa cơ bản về  CSS, cũng như cách viết một CSS đơn giản và nhúng chúng vào trong HMTL ra sao.

Tiếp tục trong series này chúng ta sẽ lần lượt tìm hiểu chi tiết từng thành phần cơ bản trong CSS. Trong bài thứ hai này chúng ta sẽ tìm hiểu về background và text.

Background là gì?

Background là nền của một phần tử nào đó trong tài liệu HTML ví dụ như body, div, p,… Background có thể là một màu sắc hoặc một hình ảnh.

Vậy background có những thuộc tính gì?

background-color: thuộc tính màu nền có thể nhận giá trị mã hex, rgb(a), tên màu.

Ví dụ:

  • background-color: #FF00FF,
  • background-color: rgb(23,55,22),
  • background-color: red,…

background-image: thuộc tính hình nền nó sẽ nhận giá trị là đường dẫn hình ảnh hoặc có thể truyền chuỗi hình ảnh base64.

Ví dụ: background-image: url(‘demo.jpg’)

background-repeat: thuộc tính lặp dành cho hình nền nó sẽ thiết lập cho hình nền của chúng ta có được phép lặp lại hay không và lặp theo chiều nào.

Ví dụ:

  • background-repeat: repeat;
  • background-repeat: repeat-x;
  • background-repeat: repeat-y;

background-position: thuộc tính xác định vị trí sẽ hiển thị của hình ảnh được dùng làm hình nền.

Ví dụ: background-position:100px 200px;

background-attachment: thuộc tính điều khiển hình ảnh khi di chuyển website bằng thanh scrollbar, hiểu đơn giản nó sẽ khiến hình nền cố định hay không cố định khi nội dung website được di chuyển.

Ví dụ:

  • background-attachment: fixed;
  • background-attachment:scroll;

background: đây là thuộc tính rút gọn cho tất cả các thuộc tính trên và nhiệm vụ của bạn sẽ truyền từng giá trị cho background theo một thứ tự: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] .

Ví dụ: background: #00FF00 url(‘smiley.gif’) no-repeat fixed center;

Text là gì?

Text là nội dung văn bản bên trong các thẻ HTML bao gồm chữ, số và những kí tự đặc biệt. Những thuộc tính liên quan đến text bao gồm font, color và định dạng text.

Vậy text có những thuộc tính gì?

Một vài thuộc tính mà bạn cần quan tâm khi CSS cho text gồm: color, direction, letter-spacing, word-spacing, text-indent, text-align, text-decoration, text-transform, white-spacing, text-shadow.

Color: là một thuộc tính quan trọng nên được sử dụng trong rất nhiều trường hợp chứ không riêng text. Nó có thể áp dụng cho background(bài 2), border, những hiệu ứng liên quan đến màu sắc.

Kiểu tham số truyền vào color cũng rất đa dạng vì vậy bạn có thể dùng nhiều cách để gán một màu nào đó cho color. Những cách đó bao gồm:

  • Mã hex:
    • Chuẩn: #RRGGBB(Red-Green-Blue). Ví dụ: p { color : #FF0000 }
    • Rút gọn: #RGB. Ví dụ: p { color : #FFF }
  • RGB:
    • Phần trăm: rgb(r%, g%, b%). Ví dụ: p { color: rgb(20%, 50%, 50%) }
    • Giá trị: rgb(r, g, b). Ví dụ: p { color: rgb(255, 15, 10) }
  • Từ khóa: aqua, black, white. Ví dụ: p { color: black }

Direction: thuộc tính này chỉ đơn giản nó sẽ xác định chiều hiển thị của từng dòng văn bản là từ trái sang phải (ltf: left to right) hay từ phải sang trái(rtl: right to left.

  • Ví dụ: direction: rtl, direction: ltr

Letter-spacing: sẽ qui định khoảng cách của từng ký tự và giá trị của nó sẽ bao gồm: normal, length, initial, inherit.

  • Ví dụ: letter-spacing: 5px;

Word-spacing: còn đây là thuộc tính sẽ qui định khoảng cách của từng từ trong một đoạn văn bản và giá trị của nó cũng tương tự như letter-spacing.

  • Ví dụ: word-spacing: 15px;

Text-align: xác định vị trí canh lề của đoạn văn bản. Các giá trị của text-align gồm: left, center, right, justify(canh đều) và mặc định là initial.

  • Ví dụ: text-align: left;

Text-decoration: hiểu nôm na nó sẽ đánh dấu những nội dung văn bản quan trọng bằng cách gạch dưới(underline), gạch giữa(line-through), gạch trên(overline) hoặc none để loại bỏ gạch dưới khi dùng cho thẻ anchor <a>.

  • Ví dụ: text-decoration: underline;

Text-transform: qui định cách thức hiển thị đoạn văn bản viết hoa, viết thường. Giá trị của nó gồm: in hoa (uppercase), in thường (lowercase), viết hoa chữ cái đầu tiên mỗi từ (capitalize).

  • Ví dụ: text-transform: uppercase;

Kết luận:

Vậy là bài thứ hai trong series CSS căn bản đã xong, qua bài này thì bạn đã có thể áp dụng CSS cho background và text rồi đấy. Mọi ý kiến đóng góp hoặc thảo luận mọi người vui lòng bình luận ở phía dưới nhé.
Cảm ơn các bạn đã đọc!

[Bài 2] Background và text trong CSS – Tìm hiểu CSS cùng BIT
5 (100%) 2 votes

Bình luận

Hãy trở thành người đầu tiên bình luận!

Thông báo
avatar
wpDiscuz