CSS

CSS là gì?

CSS  là tính năng viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử dụng để  tìm và định dạng  lại các phần tử được tạo bằng các ngôn ngữ đánh dấu HTML . Nói ngắn gọn hơn là ngôn ngữ tạo phong cách cho trang web. Bạn có thể hiểu đơn giản rằng, nếu HTML đóng vai trò định dạng các phần tử trên trang web như việc tạo ra các đoạn văn bản, các tiêu đề, bảng,…thì CSS sẽ giúp chúng ta có thể thêm kiểu vào các phần tử HTML đó như đổi bố cục, màu sắc trang, đổi màu chữ, chữ chữ, thay đổi cấu trúc…

CSS được phát triển bởi  W3C  ( World Wide Web Consortium ) vào năm 1996, vì HTML không được thiết kế để gắn thẻ nhằm giúp định dạng trang web.

Hoạt động CSS như thế nào

CSS hoạt động bằng cách chọn các phần tử HTML và áp dụng các quy tắc để thay đổi cách chúng hiển thị trên trang web. Bạn có thể chọn một phần tử, ví dụ như thẻ tiêu đề <h1>, rồi dùng CSS để thay đổi màu sắc, kích thước chữ. Các quy tắc CSS được áp dụng theo nguyên tắc “xếp tầng”, nghĩa là nếu có nhiều quy tắc cho cùng một phần tử, thì quy tắc cụ thể hơn hoặc quy tắc xuất hiện sau sẽ được ưu tiên. CSS cũng cho phép các thuộc tính như màu chữ hoặc kiểu chữ được kế thừa từ phần tử cha sang phần tử con, giúp bạn không cần viết lại cùng một quy tắc cho từng phần tử. Mỗi phần tử HTML được xem như một “hộp” có nội dung, khoảng cách đệm, đường viền, và khoảng cách với các phần tử khác, và bạn có thể sử dụng CSS để kiểm soát tất cả các yếu tố này. Khi trình duyệt tải trang, nó sẽ đọc và áp dụng các quy tắc CSS để tạo nên giao diện trang web đúng như bạn mong muốn.

Bố cục và cấu trúc của CSS lập trình ngôn ngữ

Bố cục một đoạn CSS

Bố cục  CSS  thường dựa trên các hộp hình, trong đó mỗi hộp sử dụng không gian trên trang và có các thuộc tính như:

• Padding (vùng đệm): Bao gồm không gian xung quanh nội dung (ví dụ: xung quanh đoạn văn bản).
• Border (đường viền): Là đường liền kề ngay bên ngoài phần đệm.
• Margin (lề): Là khoảng cách xung quanh bên ngoài của phần tử.

Cấu trúc một đoạn CSS

Tìm hiểu cấu trúc cơ bản của một đoạn CSS bao gồm các phần như sau:

• Phần thứ 1: Vùng chọn { 
• Phần thứ 2: Thuộc tính:
• Phần thứ 3: Giá trị;
• Phần thứ 4: }

• body : Thiết lập phông chữ chữ, màu nền trang và thêm khoảng cách (đệm) cho nội dung.
• h1 : Tiêu đề dạng định dạng với chữ tối màu (#333), chữ kích thước lớn và căn giữa.
• p : Định dạng đoạn văn với màu chữ xám nhạt (#666), tăng kích thước chữ một chút và khoảng cách dòng, đồng thời căn đều nội dung.

Bài viết khác

Web Security

Khái niệm Web Security Web Security là tập hợp các nguyên tắc, biện pháp và công nghệ nhằm bảo vệ website, ứng dụng web và dữ liệu khỏi các hành vi truy cập trái phép, tấn công độc hại hoặc khai thác lỗ hổng. Nó không chỉ bao gồm việc ngăn chặn hacker, mà còn […]

Đọc thêm

Markdown

Markdown là một ngôn ngữ đánh dấu nhẹ (lightweight markup language) dùng để định dạng văn bản thuần túy (plain text), thường được sử dụng trong các tài liệu như README, bài viết blog, tài liệu hướng dẫn, và cả trong GitHub, Stack Overflow, hoặc các trình soạn thảo như VS Code, Obsidian… Markdown được […]

Đọc thêm

CSS

CSS (Cascading Style Sheets – tạm dịch: Tập tin định kiểu tầng) là ngôn ngữ dùng để mô tả cách trình bày (giao diện) của một tài liệu HTML. Nói đơn giản, CSS giúp làm đẹp trang web: chỉnh màu sắc, font chữ, bố cục, khoảng cách, hiệu ứng chuyển động, v.v. CSS được phát […]

Đọc thêm

HTML

HTML (HyperText Markup Language) là ngôn ngữ đánh dấu siêu văn bản, được dùng để xây dựng cấu trúc của một trang web. Nói cách khác, HTML cho trình duyệt biết nội dung nào sẽ hiển thị và hiển thị như thế nào (như tiêu đề, đoạn văn, hình ảnh, liên kết…). Một tài liệu […]

Đọc thêm

Browser

Browser (Web Browser, Trình duyệt web) là phần mềm trên máy tính, điện thoại hoặc thiết bị thông minh, cho phép người dùng truy cập, hiển thị và tương tác với các trang web, tài nguyên Internet. Về bản chất, trình duyệt gửi các yêu cầu (HTTP/HTTPS request) đến máy chủ web, nhận về mã […]

Đọc thêm

Tìm hiểu DNS

DNS là gì? DNS (Domain Name System) là một dịch vụ phân giải tên miền, giúp chuyển đổi các tên miền (ví dụ: www.ducphat.com) thành địa chỉ IP (ví dụ: 93.184.216.34) và ngược lại. Thay vì phải nhớ dãy số IP, chúng ta chỉ cần nhập tên miền, DNS sẽ tìm kiếm địa chỉ IP […]

Đọc thêm