Hướng dẫn dấu trong css

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

Mục lục

  • Vì sao nên sử dụng CSS?
  • Một số hướng dẫn CSS căn bản
    • Cú pháp CSS
    • Nhúng CSS vào một trang HTML 
      • External CSS
      • Internal CSS
      • Inline CSS 
    • Các CSS Selector cơ bản
      • CSS Selector cho phần tử [CSS element Selector]
      • CSS Selector cho id [CSS id Selector]
      • CSS Selector cho lớp [CSS class Selector]
      • CSS Selector tổng quát [CSS Universal Selector]
      • CSS Selector cho nhóm [The CSS Grouping Selector]

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

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

Trong ví dụ trên, p là một bộ chọn, trỏ đến thẻ

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ẻ sau đây trong phần của trang HTML: 
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ẻ ở phần của trang HTML. 

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

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. 

Chủ Đề