Hướng dẫn cơ bản về CSS cho người mới bắt đầu

• Báo cáo Việc làm và mức lương ngành công nghệ thông tin năm 2024
• Review học lập trình nhúng avr có gì tốt? Tìm hiểu từ A-Z cho người mới
• Nên học lập trình nhúng từ đâu dành cho người mới
• Tìm hiểu về công việc của Kỹ sư lập trình nhúng chuyên nghiệp
• Thị trường lập trình nhúng việc làm trong năm 2024 như thế nào?

Cascading Style Sheets, hay thường được gọi là CSS mang lại phong cách cho các trang web của bạn bằng cách tương tác với các phần tử HTML. Mặt khác, HTML được sử dụng để cấu trúc một tài liệu web, trong đó CSS ​​có ích trong khi chỉ định kiểu tài liệu của bạn, đó là mọi thứ từ bố cục trang đến màu sắc, phông chữ.

1. CSS là gì?

Cascading Style Sheets (CSS) xử lý phần giao diện của trang web. Nó được sử dụng để thay đổi phong cách của tài liệu, chẳng hạn như màu sắc, bố cục và kích thước của văn bản. CSS rất dễ học và dễ hiểu, đồng thời nó cung cấp khả năng kiểm soát mạnh mẽ đối với việc trình bày tài liệu HTML . Trong hướng dẫn này, bạn sẽ tìm hiểu một số hàm CSS nâng cao hơn.

CSS xử lý một phần giao diện của trang web. Sử dụng CSS, bạn có thể kiểm soát màu sắc của văn bản, kiểu phông chữ, khoảng cách giữa các đoạn văn, cách các cột được đặt kích thước và bố cục, hình ảnh hoặc màu nền nào được sử dụng, thiết kế bố cục, các biến thể hiển thị cho các thiết bị và kích thước màn hình khác nhau cũng như hàng loạt các hiệu ứng khác.

Cách CSS hoạt động đó chính là tìm kiếm dựa trên vùng chọn chẳng hạn như thẻ HTML, ID, class, v.v. Sau đó, nó sẽ áp dụng những thuộc tính buộc phải thay đổi lên các vùng đã chọn. 

CSS rất dễ học và dễ hiểu nhưng nó cung cấp khả năng kiểm soát mạnh mẽ việc trình bày tài liệu HTML. Thông thường nhất, CSS được kết hợp với các ngôn ngữ đánh dấu HTML hoặc XHTML.

HTML và CSS có mối quan hệ gắn bó mật thiết với nhau. Nếu HTML là nền tảng của một trang web thì CSS là tất cả tính thẩm mỹ của toàn bộ trang web đó.

>>> Xem thêm: FUNiX – Học lấy bằng đại học trực tuyến giá trị ngang bằng đại học chính quy

2. Mối quan hệ của CSS và HTML

Như đã đề cập, CSS và HTML có mối quan hệ mật thiết trong việc xây dựng một website. Nếu HTML là các thành phần động cơ của một chiếc xe hơi thì CSS sẽ là kiểu dáng và màu sắc của chiếc xe. 

Một trang web có thể chạy mà không cần CSS, nhưng nó chắc chắn sẽ không có tình thẩm mỹ. CSS làm cho giao diện người dùng của một trang web tỏa sáng và mang đến trải nghiệm người dùng tuyệt vời. Nếu không có CSS, các trang web sẽ kém bắt mắt hơn và có thể khó điều hướng hơn nhiều. Ngoài bố cục và định dạng, CSS chịu trách nhiệm về màu chữ, kích thước hình ảnh, khoảng cách giữa các đoạn và hơn thế nữa.

>>> ĐỌC THÊM: HTML (Hyper Text Markup Language) là gì? HTML được sử dụng làm gì?

3. Bố cục của một đoạn CSS

Bố cục của một đoạn CSS chủ yếu dựa vào hình hộp với mỗi hộp chiếm những khoảng trống trên trang web với các thuộc tính chính như:

• Padding: Là các không gian xung quanh nội dung (ví dụ: không gian xung quanh đoạn văn bản).
• Border: Là các đường nằm ngoài phần đệm.
• Margin: Là khoảng cách bao quanh phía ngoài của phần tử.
• Cấu trúc của một đoạn CSS

Thông thường, một đoạn CSS sẽ bao gồm các phần:

• Vùng chọn {thuộc tính: giá trị; thuộc tính: giá trị;….. }

Đoạn CSS sẽ được khai báo bằng vùng chọn, các thuộc tính, giá trị nằm trong dấu ngoặc nhọn. Mỗi thuộc tính là một giá trị riêng ở dạng số, hoặc chính là tên của các giá trị đã có trong danh sách của CSS. 

Quy tắc khai báo đó chính là: thuộc tính và giá trị cần cách nhau bằng dấu hai chấm, mỗi dòng khai báo thuộc tính cần có dấu chấm phẩy cuối cùng. Các thuộc tính không bị giới hạn ở một vùng chọn. 

Trong đó:

• Bộ chọn (Selector): mẫu để chọn phần tử HTML mà bạn muốn định nghĩa phong cách. Bạn có thể áp dụng các selector cho các trường hợp sau:
• Tất cả những phần tử được định dạng theo một dạng cụ thể nào đó, ví dụ phần tử tiêu đề h2.
• Thuộc tính id, class của phần tử.
• Các phần tử có mối liên quan với các phần tử khác trong hệ thống cây phân cấp tài liệu.
• Khai báo (Declaration): Khối khai báo có thể chứa một hoặc nhiều khai báo và chúng được phân tách với nhau bằng dấu chấm phẩy. Mỗi khai báo lại bao gồm tên & giá trị đặc tính CSS, dược phân tách với nhau bằng dấu phẩy. Quy tắc khai báo CSS là chúng luôn phải kết thúc bằng dấu chấm phẩy, và khối khai báo phải nằm trong các dấu ngoặc móc.
• Thuộc tính (Properties): Thuộc tính là các cách thức mà bạn có thể tạo kiểu cho một phần tử HTML. Vì vậy, với CSS, bạn chỉ cần lựa chọn thuộc tính mà bạn muốn tác động nhất trong bộ quy tắc bạn đã tạo ra.
• Giá trị thuộc tính: Được nằm ở bên phải của thuộc tính. Việc lựa chọn một thuộc tính trong số đó phụ thuộc vào số lần xuất hiện của thuộc tính. 

4. Cách CSS hoạt động như thế nào?

Khi trình duyệt hiển thị một tài liệu, nó phải kết hợp nội dung của tài liệu với kiểu cách mà nó sẽ xuất hiện. Nó xử lý tài liệu theo một số giai đoạn mà Glints sẽ liệt kê bên dưới. Hãy nhớ rằng đây là một phiên bản rất đơn giản của những gì xảy ra khi một trình duyệt tải một trang web và các trình duyệt khác nhau sẽ xử lý quy trình theo những cách khác nhau. 

• Bước 1: Trình duyệt tải HTML (ví dụ: nhận nó từ mạng).
• Bước 2: Trình duyệt chuyển đổi HTML thành DOM (Document Object Model – Mô hình đối tượng tài liệu). DOM đại diện cho tài liệu trong bộ nhớ của máy tính.
• Bước 3: Trình duyệt tìm nạp hầu hết các tài nguyên được liên kết với tài liệu HTML, chẳng hạn như hình ảnh nhúng, video và thậm chí cả CSS được liên kết. Sau đó, JavaScript được xử lý trong quá trình này.
• Bước 4: Trình duyệt phân tích cú pháp CSS đã tìm nạp và sắp xếp các quy tắc khác nhau theo loại bộ chọn của chúng thành các “nhóm” khác nhau. Ví dụ: phần tử, lớp, ID, v.v. Dựa trên các bộ chọn mà nó tìm thấy, nó sẽ tìm ra các quy tắc nên được áp dụng cho các nút nào trong DOM và đính kèm kiểu cho chúng theo yêu cầu (bước trung gian này được gọi là cây kết xuất).
• Bước 5: Cây kết xuất được đặt trong cấu trúc mà nó sẽ xuất hiện sau khi các quy tắc đã được áp dụng cho nó.
• Bước 6: Hình ảnh hiển thị trực quan của trang được đưa ra màn hình (giai đoạn này được gọi là painting).

Để biết thêm thông tin khóa học  ngôn ngữ lập trình, vui lòng click đường link dưới đây. Tương lai ở trong tầm tay bạn hãy nắm bắt từ hôm nay:

5 Điểm đáng chú ý tại khóa học lập trình trực tuyến FPT – FUNiX

Từ A-Z chương trình học FUNiX – Mô hình đào tạo lập trình trực tuyến số 1 Việt Nam

Lý do phổ biến khiến học viên nước ngoài chọn FUNiX

Lưu ý để học blockchain trực tuyến hiệu quả cao tại FUNiX’

FUNiX – Học lấy bằng đại học trực tuyến giá trị ngang bằng đại học chính quy

Nguyễn Cúc