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

model quan hệ trong go-pg

1. Giới thiệu Go-pg sử dụng công nghệ ORM (tức Object-relation mapping) giúp ánh xạ bảng cơ sở dữ liệu vào trong struct Điều đấy có nghĩa là với mỗi struct trong golang có thể dùng làm đại diện để truy vấn đến bảng trong postgresql và trả ra đối tượng struct với giá trị […]

Đọc thêm

GORM

1. ORM là gì? Trước hết để hiểu được thư viện Gorm chúng ta cần tìm hiểu về ORM, một công cụ quan trọng và thường xuyên được áp dụng trong quản trị cơ sở dữ liệu. ORM là tên viết tắt của cụm từ “Object Relational Mapping” đây là tên gọi chỉ việc ánh […]

Đọc thêm

REST API với Golang, Gin, MinIO và Docker

Đầu tiên, chúng ta sẽ viết một đoạn mã nhỏ bằng chữ Hello World. Bước 1: Tạo thư mục để chứa mã nguồn của dự án Todo App mkdir go-rest-api Bước 2: Khởi tạo Go Modules go mod init TodoApp go get -u github.com/gin-gonic/gin Bước 3: Tạo tệp main.go và viết đầu tiên chương trình […]

Đọc thêm

REST API cơ bản trong Golang

Cấu trúc project Chúng ta hãy tạo cấu trúc thư mục như hình bên dưới, project này có tên GolangRestApi, có thể clone về với đường link sau: Github Sau khi clone về, đổi tên project thành GolangRestApi. Vào GOPATH, copy vào thư mục src: Code Rest Api Golang entities/user.go Khai báo cấu trúc của […]

Đọc thêm

Golang

Golang là gì? Go hay còn gọi là Golang là ngôn ngữ lập trình mã nguồn mở, được thiết kế tại Google bởi Robert Griesemer, Rob Pike, and Ken Thompson. Go có cú pháp giống với C và tất nhiên nó là ngôn ngữ lập trình biên dịch (compiled programming language) Cú pháp của ngôn […]

Đọc thêm

Elasticsearch

Elasticsearch là gì? Elasticsearch là một search engine (công cụ tìm kiếm) rất mạnh mẽ. Elasticsearch cũng có thể coi là một document oriented database, nó chứa dữ liệu giống như một database và thực hiện tìm kiếm trên những dữ liệu đó. Đại khái là thay vì bạn tìm kiếm trên file, trên các […]

Đọc thêm