Bài 3 - Định Dạng Màu Sắc Và Văn Bản Trong CSS
Có thể bạn quan tâm
Đị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ử HTMLVí 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; }fShare
Từ khóa » Bôi đậm Chữ Trong Css
-
Thuộc Tính In đậm Trong CSS Và Cách Sử Dụng - Blog | Got It AI
-
In đậm Chữ Trong Css
-
Thuộc Tính Font | CSS - Học Web Chuẩn
-
Các Thuộc Tính định Dạng FONT CHỮ Trong CSS - Web Cơ Bản
-
Thuộc Tính Font-size Font-style Font-weight Font-variant
-
Các Thuộc Tính Định Dạng Font Chữ Trong Css
-
Làm Thế Nào để Kết Hợp Chữ In đậm Và In Nghiêng Trong CSS?
-
Cách Tạo Chữ đậm Trong CSS – WordPress - THEMEVI
-
Thuộc Tính Font-weight Trong CSS - Quách Quỳnh
-
Sử Dụng Font Trong CSS | Lê Vũ Nguyên Dạy Học Lập Trình
-
Định Dạng Font Trong CSS, Font-family, Weight, Style ... - Hoclaptrinh
-
Thuộc Tính Font Trong CSS - Thủ Thuật
-
W3.CSS Text - W3Schools
-
2.2. Sắp Xếp Và Căn Chỉnh Văn Bản - Lập Trình Tân Binh