Bài 3 - Định dạng màu sắc và văn bản trong CSS

Định dạng màu sắc và văn bản là một trong những thuộc tính được sử dụng nhiều nhất trong CSS. Nắm vững kiến thức về màu sắc và cách phối màu sẽ giúp cho trang web của chúng ta trở nên đồng bộ và đẹp hơn rất nhiều.

 Các hệ màu trong CSS

CSS sử dụng các hệ màu sau:

• RGB: là hệ màu với 3 channel Reg, Green, Blue
• RGBA: là hệ màu với 4 channel Reg, Green, Blue và Alpha
• HEXA Decimal: là hệ màu sử dụng hệ số thập lục phân
• HSL: là hệ màu với 3 channel Hue, Saturation, Lightness
• HSLA: là hệ màu với 4 channel Hue, Saturation, Lightness vaf Alpha

Trong đó channel Alpha là channel giúp cho màu sắc trở nên trong suốt hơn (có thể nhìn thấy được phần tử bên dưới). Channel alpha có giá trị từ 0 - 1

Các thuộc tính định dạng màu sắc trong CSS

background-color: được sử dụng để chỉ định màu nền cho một phần tử HTML
Ví dụ: Chỉ định màu nền cho phần tử có id="sidebar"

#sidebar {background-color:red}

background-image: được sử dụng để chỉ định 1 ảnh làm ảnh nền

Ví dụ: Chỉ định ảnh nền cho toàn bộ trang web

body {
background-image: url("paper.gif");
}

background-repeat: lặp lại ảnh nền phủ kín vùng chứa với các giá trị

• repeat-x: Chỉ lặp lại ảnh theo phương ngang.
• repeat-y: Chỉ lặp lại ảnh theo phương dọc.
• repeat: Lặp lại ảnh theo cả 2 phương, đây là giá trị mặc định.
• no-repeat: Không lặp lại ảnh.

background-attachment: cho phép bạn xác định tính cố định của ảnh nền so với với nội dung trang web. Thuộc tính background attachment có các giá trị sau:

• scroll: Ảnh nền sẽ cuộn cùng nội dung trang web, đây là giá trị mặc định.
• fixed: Cố định ảnh nền so với nội dung trang web. Khi áp dụng giá trị này, ảnh nền sẽ đứng yên khi bạn đang cuộn trang web.

background-position: chỉ định ví trí đặt ảnh nền. Thuộc tính background-position có các giá trị sau

• left top
• left center
• left bottom
• right top
• right center
• right bottom
• center top
• center center
• center bottom

Ví dụ: background-position:bottom left sẽ định vị ảnh nền ở góc phía dưới bên trái

•  x% y%

Ví dụ: background-position:20% 30% sẽ định vị ảnh nền 20% từ trái qua và 30% từ trên xuống.

•  xpos ypos

Ví dụ: background-position:5px 2px sẽ định vị ảnh nền 5px từ trái qua và 2px từ trên xuống.

background: là thuộc tính giúp rút gọn các thuộc tính background trong một khai báo duy nhất.

Cú pháp:
background:<background-color> | <background-image> | <background-repeat>|<background-attachment> | <background-position>
Ví dụ: Với các thuộc tính sau:

background-color:blue;
background-image: url(logo.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left top;

Chúng ta có thể viết gọn lại thành

background: blue url(logo.png) no-repeat fixed left top;

Định dạng văn bản

font-family: định nghĩa một danh sách ưu tiên các font sẽ được dùng để hiển thị một phẩn tử trên trang web (đối với tên font có nhiều hơn một từ phải được đặt trong dấu “”)

Có hai loại tên font được dùng để chỉ định trong font-family

• Family-names: Tên cụ thể của một font. Ví dụ: Arial, Verdana, Tohama,…
• Generic families: Tên của một họ gồm nhiều font. Ví dụ: sans-serif, serif,…

font-style: thường được sử dụng để chị định kiểu chữ in nghiêng

• normal: hiển thị text theo kiểu in thường
• Italic: hiển thị text theo kiểu in nghiêng
• oblique: hiển thị text theo kiểu in xiên
• font-size: chỉ định kích thước văn bản
• xx-small | x-small | small | medium | large | x-large | xx-large
• smaller | larger
• Length (px, pt, em…): chỉ định font-size bằng giá trị cố định
• %: chỉ định font-size theo tỉ lệ % so với font-size của phần tử cha

Ví dụ:

body {
  font-size:20px
}
h1 {
  font-size:3em
}

font-weight: mô tả cách thức thể hiện của font chữ là ở dạng bình thường (normal) hay in đậm (bold)

• normal
• bold
• bolder
• lighter
• 100, 200, 300, 400 (normal), 500, 600, 700 (bold), 800, 900

Ví dụ: p {font-weight:700}

• font-variant: được dùng để chọn giữa chế độ bình thường và small-caps của một font chữ.

Ví dụ: h1 {font-variant:small-caps}

font: là thuộc tính giúp rút gọn các thuộc tính font trong một khai báo duy nhất.

Cú pháp: font : <font-style> | < font-variant> | <font-weight> | <font-size> |< font-family>
Ví dụ:

h1 {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial,verdana,sans-serif;
}

có thể viết gọn lại thành:

h1 {
font: italic bold 30px arial,verdana,sans-serif;
}