Tóm Tắt
CSS là gì?
CSS là viết tắt của Cascading Style Sheets, là một ngôn ngữ phong cách thiết kế được sử dụng nhằm mục đích mục tiêu đơn giản hóa quy trình tạo nên một website. CSS được ra đời vào năm 1996 bởi World Wide Web Consortium ( W3C ) .
CSS là gì
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.
Bạn đang đọc: CSS Là Gì? Ngôn Ngữ CSS Dùng Để Làm Gì?
Cách CSS hoạt động giải trí đó chính là tìm kiếm dựa trên vùng chọn ví dụ điển hình như thẻ HTML, ID, class, v.v. Sau đó, nó sẽ vận dụng những thuộc tính buộc phải đổi khác lên những vùng đã chọn .
CSS rất dễ học và dễ hiểu nhưng nó cung ứng năng lực trấn áp can đảm và mạnh mẽ việc trình diễn tài liệu HTML. Thông thường nhất, CSS được phối hợp với những ngôn ngữ lưu lại 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 website thì CSS là toàn bộ tính thẩm mỹ và nghệ thuật của hàng loạt website đó .
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 thiết kế xây dựng một website. Nếu HTML là những thành phần động cơ của một chiếc xe hơi thì CSS sẽ là mẫu mã và sắc tố của chiếc xe .
Một website hoàn toàn có thể chạy mà không cần CSS, nhưng nó chắc như đinh sẽ không có tình thẩm mỹ và nghệ thuật. CSS làm cho giao diện người dùng của một website tỏa sáng và mang đến thưởng thức người dùng tuyệt vời. Nếu không có CSS, những website sẽ kém bắt mắt hơn và hoàn toàn có thể khó điều hướng hơn nhiều. Ngoài bố cục tổng quan và định dạng, CSS chịu nghĩa vụ và trách nhiệm về màu chữ, kích cỡ hình ảnh, khoảng cách giữa những đoạn và hơn thế nữa .
Đọc thêm: 20+ Nguyên Tắc Và Xu Hướng Thiết Kế UI/UX Nổi Bật
Bố cục và cấu trúc của một đoạn CSS
Bố cục của một đoạn CSS
Bố cục của một đoạn CSS đa phần dựa vào hình hộp với mỗi hộp chiếm những khoảng trống trên website với những 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ẽ gồm có những 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, những 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 những giá trị đã có trong list 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 sau cuối. Các thuộc tính không bị số lượng 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.
Bạn hoàn toàn có thể xem list những thuộc tính của CSS tại CSS Reference của Mozilla .
Ưu điểm của ngôn ngữ CSS là gì?
Ngôn ngữ CSS có 1 số ít ưu điểm như sau :
- Tăng tốc độ tải trang: CSS cho phép bạn sử dụng ít đoạn mã vì vậy tốc độ tải trang sẽ được cải thiện đáng kể. Ngoài ra, bạn còn có thể sử dụng một quy tắc CSS và áp dụng nó cho tất cả các lần xuất hiện của một thẻ nhất định trong tài liệu HTML.
- Cải thiện trải nghiệm người dùng: CSS không chỉ làm cho các trang web dễ nhìn hơn, nó còn giúp các website có định dạng thân thiện với người dùng. Khi các nút và văn bản ở vị trí hợp lý và được sắp đặt tốt, trải nghiệm người dùng sẽ được cải thiện.
- Thời gian phát triển nhanh: Với CSS, bạn có thể áp dụng các quy tắc và kiểu định dạng cụ thể cho nhiều trang bằng một chuỗi mã. Một biểu định kiểu xếp tầng có thể được sao chép trên một số trang web. Ví dụ: nếu bạn có các trang sản phẩm tất cả phải có cùng định dạng, giao diện, thì việc viết quy tắc CSS cho một trang sẽ đủ cho tất cả các trang cùng loại.
- Thay đổi định dạng dễ dàng: Nếu bạn cần thay đổi định dạng của một nhóm trang cụ thể, bạn có thể dễ dàng thực hiện việc này với CSS mà không cần phải sửa từng trang riêng lẻ. Chỉ cần chỉnh sửa biểu định kiểu CSS tương ứng và bạn sẽ thấy các thay đổi được áp dụng cho tất cả các trang đang sử dụng biểu định kiểu đó.
- Khả năng tương thích trên các thiết bị: Thiết kế web đáp ứng là một vấn đề cần được chú trọng. Trong thời đại ngày nay, các trang web phải hiển thị đầy đủ và có thể điều hướng dễ dàng trên tất cả các thiết bị. Cho dù thiết bị di động hay máy tính bảng, máy tính để bàn hay thậm chí là TV thông minh, CSS kết hợp với HTML để tạo ra thiết kế đáp ứng.
CSS thực sự hoạt động như thế nào?
Ngôn ngữ CSS hoạt động như thế nàoKhi trình duyệt hiển thị một tài liệu, nó phải phối hợp nội dung của tài liệu với phong thái mà nó sẽ Open. Nó xử lý tài liệu theo 1 số ít quá trình 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 thuần của những gì xảy ra khi một trình duyệt tải một website và những trình duyệt khác nhau sẽ giải quyết và xử lý quá 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).
3 cách nhúng CSS vào website
Có ba cách nhúng CSS vào website :
- Nhúng CSS trực tiếp CSS vào tài liệu HTML (Inline CSS)
- Nội tuyến (Internal CSS)
- Ngoại tuyến (External CSS)
Hãy cùng tìm hiểu về 3 cách nhúng CSS dưới đây nhé.
Nhúng CSS trực tiếp CSS vào tài liệu HTML (Inline CSS)
Với cách này, tất cả chúng ta đặt mã CSS vào thẳng thuộc tính style của thành phần. Và với cách nhúng trực tiếp, mã CSS sẽ chỉ tác động ảnh hưởng lên chính thành phần đó .
Để chỉ định nhiều quy tắc CSS, tất cả chúng ta hoàn toàn có thể sử dụng dấu chấm phẩy để ngăn cách giữa những rules. Các rules này sẽ được đặt bằng cách sử dụng thuộc tính “ style ” kèm theo tên thuộc tính, giá trị thuộc tính .
Nội tuyến (Internal CSS)
Với cách nhúng nội tuyến, bạn cần dùng thẻ
Source: https://final-blade.com
Category : Kiến thức Internet
