Học CSS cơ bản bao gồm nhiều vấn đề như: cú pháp, màu sắc, font, hình ảnh… Liệu bạn đã nắm được những kiến thức cơ bản này chưa? Bài viết dưới đây sẽ giúp bạn nắm được một số vấn đề nền tảng nhất!
Mục lục
Cú pháp của CSS cơ bản
Để có thể tạo được CSS, bạn cần biết đến Style Rule – cấu trúc của một CSS. Các rule này sẽ được trình duyệt thông dịch và áp dụng với các phần tử tương ứng đã được viết ra trên tài liệu trước đó. Một Style Rule bao gồm 3 phần như sau:
- Selector: Là một thẻ HTML mà bạn áp dụng style cho CSS. Ví dụ như: thẻ p, thẻ div, thẻ span…
- Property: Đây là một thuộc tính của HTML. Trong CSS thì tất cả các thuộc tính của HTML đều được chuyển thành CSS property như: border, color…
- Value: Là giá trị được gán cho property CSS.
Tìm hiểu về đơn vị CSS
Đơn vị trong CSS đóng vai trò quan trọng để lập trình viên có thể xác định được phần tử này sẽ nằm ở khu vực nào, hay hình ảnh này phải hiển thị ở vị trí nào. Đơn vị trong CSS được chia làm nhiều loại như: đơn vị %, cm, in, mm… Cụ thể như sau:
| Đơn vị | Mô tả đơn vị | Ví dụ |
| cm | Đơn vị centimet | div {margin-bottom: 2cm;} |
| mm | Đơn vị milimet | p {word-spcacing: .15in;} |
| pc | Đơn vị pica | p {font-size: 20pc;} |
| % | Đơn vị % tham chiếu tỷ lệ dựa vào kích thước với phần tử mẹ | p {font-size 16pt; line-height: 125%;} |
| pt | Đơn vị point | body {body-size: 18pt;} |
| px | Đơn vị thể hiện điểm ảnh hiển thị trên màn hình | p [padding: 25px;} |
Màu sắc (Color) trong CSS
Để có thể hiển thị màu sắc trên Web thì lập trình viên cần sử dụng các giá trị màu để xác định. Các màu sắc trên Website có thể là màu nền, màu viền, màu phần tử hoặc màu cận cảnh… Các màu hiển thị được trên Web là sự kết hợp với ba màu Red (đỏ), Green (xanh lá) và Blue (xanh da trời).
Một số cách để xác định màu trong CSS
| Định dạng | Cú pháp | Ví dụ |
| Hex Code | #RRGGBB | p{color:#FF0000;} |
| Short Hex Code | #RGB | p{color:#6A7;} |
| RGB (dạng %) | tgb(rrr%,ggg%,bbb%) | p{color:.rgb(50%,50%,50%);} |
| RGB (tuyệt đối) | rgb(rrr,ggg,bbb) | p{color:rgb(0,0,266);} |
| Tên màu | aqua, black, etc. | p{color:teal;} |
Safe Color cho trình duyệt
Safe Color là bảng gồm 216 màu cho trình duyệt. Các màu này sẽ đảm bảo cho máy tính hiển thị màu một cách chính xác nhất.
Định dạng Font trong CSS
Để tạo font cho các phần tử hoặc trang HTML, bạn cần phải sử dụng các thuộc tính sau:
| Thuộc tính | Chức năng |
| Font-family | Có chức năng thay đổi bề mặt font |
| Font-style | Có chức năng tạo font chữ chếch hoặc chữ nghiêng |
| Font-variant | Có chức năng tạo chữ hoa nhỏ |
| Font-weight | Có chức năng giảm độ đậm của font chữ |
| Font-size | Dùng để xác định kích cỡ font |
Hiệu ứng hình ảnh
Đối với bất kỳ một Webpage nào, hình ảnh cũng đóng vai trò rất quan trọng. Song không phải lúc nào chúng ta cũng nên chèn nhiều ảnh trên một trang Web. Nên tiết chế và trang trí các hình đẹp, hợp lý sẽ làm cho Website của bạn trở nên ấn tượng hơn.
Để làm được điều đó, CSS có một số thuộc tính hỗ trợ hình ảnh trên Website như sau:
| Thuộc tính | Chức năng |
| Border | Có chức năng thiết lập độ rộng của các viền bao quanh hình ảnh trên Website |
| Width | Có chức năng thiết lập độ rộng của hình ảnh trên Website |
| Height | Có chức năng thiết lập chiều cao của hình ảnh |
| Opacity | Có chức năng thiết lập độ trong suốt của hình ảnh |
Trên đây là một số kiến thức học CSS cơ bản mà bạn nên biết trong quá trình bắt đầu với ngôn ngữ này. Hy vọng bài viết đã giúp bạn có thêm nhiều kiến thức hữu ích. Chúc bạn thành công!
