Những kiến thức học CSS cơ bản bạn cần biết

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!

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.
Cú pháp CSS cơ bản
Cú pháp CSS cơ bản

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ị centimetdiv {margin-bottom: 2cm;}
mmĐơn vị milimetp {word-spcacing: .15in;}
pcĐơn vị picap {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ị pointbody {body-size: 18pt;}
pxĐơn vị thể hiện điểm ảnh hiển thị trên màn hìnhp [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ạngCú phápVí dụ
Hex Code#RRGGBBp{color:#FF0000;}
Short Hex Code#RGBp{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àuaqua, 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.

Bảng 216 màu Safe Color cho trình duyệt
Bảng 216 màu Safe Color cho trình duyệ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ínhChức năng
Font-familyCó chức năng thay đổi bề mặt font
Font-styleCó chức năng tạo font chữ chếch hoặc chữ nghiêng
Font-variantCó chức năng tạo chữ hoa nhỏ
Font-weightCó chức năng giảm độ đậm của font chữ
Font-sizeDù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.

Hiệu ứng hình ảnh vô cùng quan trọng trong Website
Hiệu ứng hình ảnh vô cùng quan trọng trong Website

Để 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ínhChức năng
BorderCó chức năng thiết lập độ rộng của các viền bao quanh hình ảnh trên Website
WidthCó chức năng thiết lập độ rộng của hình ảnh trên Website
HeightCó chức năng thiết lập chiều cao của hình ảnh
OpacityCó 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!

Nếu bạn quan tâm, hãy xem các vị trí đang tuyển dụng của Got It tại: bit.ly/gotit-hanoi và đọc thêm về quy trình tuyển dụng tại đây.

https://vn.got-it.ai/blog/wp-content/uploads/2021/04/1_QAG9RXQyyMAY7i9OYo84FA.png
Got It Vietnam
February 07, 2021
Share this post to:
Tags:
CSS
0 Comments
Inline Feedbacks
View all comments
Các bài viết liên quan
CSS là gì? Kinh nghiệm giúp bạn tự học CSS tại nhà không nên bỏ qua!

CSS là gì? Kinh nghiệm giúp bạn tự học CSS tại nhà không nên bỏ qua!

Tự học CSS là một quy trình không có điểm dừng, vì thế những người mới bắt đầu sẽ dễ bị rối trong thư viện kiến thức về CSS. Vậy tự học CSS nên bắt đầu với những điều gì? Cùng tìm hiểu nhé! Mục lụcCSS là gì?Bạn nên chuẩn bị gì trước khi tự […]
CSS là gì? Tìm hiểu về chú thích trong CSS

CSS là gì? Tìm hiểu về chú thích trong CSS

Chú thích trong CSS thường được sử dụng để giải thích các đoạn mã trong CSS. Nó rất hữu ích khi bạn hoặc người khác đọc lại các đoạn mã đã viết ra. Bài viết dưới đây sẽ cung cấp tới bạn những thông tin cơ bản về CSS nói chung và tìm hiểu về […]
8 lưu ý khi thực hiện cách viết CSS tiêu chuẩn

8 lưu ý khi thực hiện cách viết CSS tiêu chuẩn

Để người dùng có những trải nghiệm tốt nhất, các developer luôn cần phải tìm hiểu và biết cách tối ưu hóa tốc độ xử lý dữ liệu website thông qua cách viết CSS tốt nhất. Bên cạnh đó, các yếu tố cơ bản như HTML, Javascript cũng như các hình ảnh cũng cần được […]
Thuộc tính in đậm trong CSS và cách sử dụng

Thuộc tính in đậm trong CSS và cách sử dụng

Có rất nhiều cách khác nhau để in đậm một đoạn text trên trang web. Ngoài việc sử dụng thẻ bold hoặc strong, bạn có thể sử dụng thẻ in đậm trong CSS. Thuộc tính in đậm của CSS giúp bạn có nhiều lựa chọn hơn so với HTML. Hãy cùng tìm hiểu về thẻ […]
Những kiến thức học CSS cơ bản bạn cần biết

Những kiến thức học CSS cơ bản bạn cần biết

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ụcCú pháp của CSS cơ bảnTìm hiểu về đơn […]
Cách sử dụng CSS trong HTML và thuộc của tính CSS

Cách sử dụng CSS trong HTML và thuộc của tính CSS

CSS là ngôn ngữ tạo phong cách cho trang web. Biết cách sử dụng CSS trong HTML, ta có thể định dạng ra các phần tử HTML thật đặc biệt và chuyên nghiệp. Bài viết sau đây sẽ giúp bạn hiểu hơn về CSS cũng như cách sử dụng nó. Mục lụcKhái niệm về CSSLý […]