Hướng dẫn CSS căn bản dành cho người mới bắt đầu

Trong bài viết dưới đây, bạn sẽ được tìm hiểu về vai trò của CSS trong thiết kế website và một số hướng dẫn CSS cơ bản dành cho người mới tiếp cận với ngôn ngữ này. Đặc biệt, nếu bạn có định hướng trở thành lập trình viên frontend thì việc học CSS là vô cùng cần thiết.

Hướng dẫn CSS căn bản dành cho người mới bắt đầu
Hướng dẫn CSS căn bản dành cho người mới bắt đầu

Vì sao nên sử dụng CSS?

CSS (Cascading Style Sheet) là ngôn ngữ được sử dụng để thiết kế một tệp HTML. Nó mô tả cách mà các phần tử HTML được hiển thị trên màn hình, trên giấy hoặc trên các phương tiện khác. CSS tạo nên “phong cách” cho các phần tử trên website nhờ việc thêm màu sắc, hiệu ứng, thay đổi bố  cục, kích thước và kiểu chữ,…. để tạo nên một giao diện bắt mắt, khoa học. 

CSS giúp lập trình viên tiết kiệm được rất nhiều công sức và thời gian cho việc lập trình nhờ khả năng kiểm soát bố cục của nhiều trang web cùng một lúc. 

Một số hướng dẫn CSS căn bản

Cú pháp CSS

Cú pháp của CSS gồm một bộ chọn và một khối khai báo. Bộ chọn trỏ vào phần tử HTML mà bạn muốn tạo kiểu. 

Cú pháp CSS
Cú pháp CSS

Khối khai báo chứa ít nhất một khai báo được phân tách bởi các dấu chấm phẩy. Trong mỗi khai báo sẽ có một tên thuộc tính CSS và một giá trị, được phân tách với nhau bằng một dấu hai chấm. Các khai báo được bao quanh bởi các dấu ngoặc nhọn.  

Ví dụ với cú pháp CSS
Ví dụ với cú pháp CSS

Trong ví dụ trên, p là một bộ chọn, trỏ đến thẻ <p> trong HTML. Màu sắc là một thuộc tính, màu đỏ là giá trị thuộc tính đó. Text-align là một thuộc tính và center là giá trị thuộc tính đó. 

Nhúng CSS vào một trang HTML 

Có 3 cách để nhúng CSS vào HTML:

External CSS

Với cách này, bạn có thể dễ dàng thay đổi giao diện của cả trang web chỉ nhờ việc thay đổi duy nhất một tệp. Bạn chỉ cần: 

  • Tạo một tập tin có tên bất kỳ với đuôi là .css (ví dụ mystyle.css). Cách này có thể được viết trong mọi trình soạn thảo văn bản, miễn là bạn để tên tệp có đuôi .css là được. 
  • Sử dụng cú pháp thẻ <link> sau đây trong phần <head> của trang HTML: 
External CSS
External CSS

Internal CSS

Cách thức này được áp dụng trong trường hợp một trang HTML có một kiểu cách duy nhất. Nó được xác định trong thẻ <style> ở phần <head> của trang HTML. 

Internal CSS
Internal CSS

Inline CSS 

Inline CSS được sử dụng để thiết kế một kiểu cách riêng cho từng phần tử độc lập, được xác định trong thuộc tính style của phần tử liên quan. Tuy nhiên, cách thức này có thể khiến nội dung trên trang của bạn bị xáo trộn. Vậy nên, bạn hãy hạn chế sử dụng cách thức này. 

Inline CSS
Inline CSS

Các CSS Selector cơ bản

CSS Selector (bộ chọn CSS) có nhiệm vụ tìm kiếm hoặc chọn ra các phần tử HTML mà bạn muốn tạo kiểu. Ta có thể phân chia các bộ chọn trong CSS thành 5 loại: bộ chọn đơn giản (Simple selector), bộ chọn kết hợp (Combinator selector), bộ chọn lớp giả (Pseudo-class selector), bộ chọn phần tử giả (Pseudo-elements selector) và bộ chọn thuộc tính (Attribute selector). 

Bài viết này chỉ đề cập đến các selector cơ bản nhất trong CSS. 

CSS Selector cho phần tử (CSS element Selector)

Selector này cho phép chọn các phần tử HTML dựa theo tên của chúng. 

<img src="https://vn.got-it.ai/blog/wp-content/uploads/2021/02/huong-dan-css-6-1024×97.jpg" alt="Toàn bộ phần tử

Toàn bộ phần tử <p> trên trang được căn giữa với văn bản có màu đỏ

CSS Selector cho id (CSS id Selector)

Bộ chọn này sử dụng thuộc tính id của một phần tử HTML bất kỳ để chọn ra phần tử cụ thể. Do id của một phần tử là duy nhất trong trang đó, nên Selector id chỉ được sử dụng để chọn 1 phần tử duy nhất. 

Muốn áp dụng bộ chọn này, bạn viết ký tự # kèm theo id của phần tử. Lưu ý rằng, tên id của phần tử không thể bắt đầu bằng một con số.

Ví dụ với bộ chọn id trong CSS
Ví dụ với bộ chọn id trong CSS

CSS Selector cho lớp (CSS class Selector)

Bộ chọn lớp chọn ra các phần tử HTML với 1 thuộc tính lớp cụ thể. Để chọn những phần tử này, bạn viết ký tự dấu chấm kèm theo tên lớp đó. 

Mọi phần tử HTML có lớp là center sẽ được căn giữa
Mọi phần tử HTML có lớp là center sẽ được căn giữa

Ngoài ra, bạn cũng được phép chỉ định rằng chỉ các phần tử HTML cụ thể mới bị ảnh hưởng bởi 1 lớp. Các phần tử HTML còn có thể tham chiếu đến nhiều lớp khác nhau. 

CSS Selector tổng quát (CSS Universal Selector)

Bộ chọn tổng quát của CSS cho phép chọn toàn bộ phần tử HTML trên trang. 

Tạo kiểu cho toàn bộ phần tử HTML trên trang với CSS Universal Selector
Tạo kiểu cho toàn bộ phần tử HTML trên trang với CSS Universal Selector

CSS Selector cho nhóm (The CSS Grouping Selector)

Bộ chọn này có thể chọn tất cả phần tử HTML có cùng một định nghĩa kiểu cách. Việc sử dụng CSS Grouping Selector có thể giảm thiểu độ dài cho mã. 

Các phần tử h1, h2 và p có cùng một định nghĩa kiểu cách
Các phần tử h1, h2 và p có cùng một định nghĩa kiểu cách

Bạn dùng dấu phẩy để phân tách các bộ chọn. 

Khi mới tiếp cận với CSS, trên đây sẽ là các thông tin đầu tiên mà bạn cần quan tâm về ngôn ngữ này. Bạn hãy tham khảo hướng dẫn CSS cơ bản và ghi nhớ thật kỹ để áp dụng cho việc thiết kế website một cách hiệu quả hơn nhé. 

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.

branding
branding
February 06, 2021
0
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ý […]