TTLab Academy Blogs
CSS là gì? Vai trò quan trọng của CSS trong phát triển Web
23/01/2024
Mục lục
Có thể bạn chưa biết CSS "không phải là một ngôn ngữ lập trình", nhưng CSS lại đóng vai trò quan trọng trong việc xây dựng website. Vậy CSS là gì? Tại sao CSS lại đóng vai trò quan trọng trong việc xây dựng Website. Bài viết sau đây của Tokyo Tech Lab Academy sẽ giải đáp cho bạn tất tần tật về CSS, các bạn hãy cùng theo dõi bài viết này nhé.
I. CSS là gì?
CSS là viết tắt của cụm từ "Cascading Style Sheets" là một dạng ngôn ngữ được sử dụng để điều chỉnh, định dạng lại các phần tử được tạo ra bởi ngôn ngữ đánh dấu siêu dữ liệu HTML (viết tắt của cụm từ HyperText Markup Language) trên trang web. Hay hiểu một cách đơn giản CSS được sử dụng để định dạng kiểu dáng giao diện của một trang web như: Màu sắc, kích thước, khoảng cách, font chữ, bố cục và hiệu ứng…
II. Vai trò của CSS trong thiết kế Website?
CSS là một phần quan trọng trong việc phát triển tạo ra website vì nó cung cấp cho các nhà phát triển web nhiều lợi ích quan trọng như:
Kiểm soát thiết kế và bố cục: CSS cung cấp khả năng cho phép các nhà phát triển web kiểm soát và tùy chỉnh các thuộc tính như: font chữ, màu sắc, kích thước, bố cục.. của trang web
Tối ưu hóa hiệu suất: CSS có thể giúp tối ưu hóa hiệu suất của trang web, giảm thời gian tải trang và tăng trải nghiệm người dùng.
Tăng khả năng bảo trì: CSS giúp trang web dễ dàng bảo trì hơn, vì CSS có thể tách biệt các định dạng styles thiết kế bố cục ra khỏi phần nội dung (HTML) của trang web bằng việc tạo ra một file CSS riêng biệt. Điều này giúp các nhà phát triển website dễ dàng cập nhật thay đổi giao diện mà không ảnh hưởng đến nội dung.
Responsive: CSS hỗ trợ xây dựng trang web thích ứng với các kích thước thiết bị màn hình khác nhau từ máy tính để bàn (PC), máy tính bảng (Tablet) đến điện thoại di động (Mobile) thông qua việc sử dụng kỹ thuật thiết kế responsive.
Tương thích với các trình duyệt: CSS giúp tạo ra trang web tương thích với các trình duyệt khác nhau, đảm bảo rằng trang web hiển thị đồng nhất trên nhiều nền tảng.
III. Cấu trúc của CSS
Cấu trúc của CSS được chia thành ba phần chính:
-
Selector: Chọn các phần tử HTML mà bạn muốn định dạng.
-
Properties: Các thuộc tính CSS mà bạn muốn áp dụng cho các phần tử HTML đã chọn.
-
Values: Giá trị của các thuộc tính CSS.
1. Selector (Bộ chọn)
Selector là một biểu thức được sử dụng để chọn các phần tử HTML mà bạn muốn định dạng. Có nhiều loại selector khác nhau, chẳng hạn như:
-
Selector theo tên phần tử: Chọn tất cả các phần tử có cùng tên.
-
Selector theo ID: Chọn phần tử có ID cụ thể.
-
Selector theo class: Chọn tất cả các phần tử có class cụ thể.
-
Selector theo mối quan hệ: Chọn các phần tử dựa trên mối quan hệ của chúng với các phần tử khác.
2. Properties (Thuộc tính)
Properties là các thuộc tính CSS mà bạn muốn áp dụng cho các phần tử HTML đã chọn. Có rất nhiều thuộc tính CSS khác nhau, chẳng hạn như:
-
Thuộc tính color (màu sắc): Thay đổi màu sắc của văn bản, nền, v.v.
-
Thuộc tính size (kích thước): Thay đổi kích thước của văn bản, hình ảnh, v.v.
-
Thuộc tính Position (vị trí): Xác định vị trí của các phần tử HTML trên trang web.
-
Thuộc tính font: Thay đổi font chữ của văn bản.
3. Values(Giá trị)
Values là giá trị của các thuộc tính CSS. Giá trị của các thuộc tính CSS cũng có nhiều loại khác nhau như:
-
Giá trị Number (số): Giá trị số nguyên, số thập phân, v.v.
-
Giá trị String (chuỗi): Chuỗi ký tự.
-
Giá trị Color (màu sắc): Tên màu, mã hex, giá trị RGB, v.v.
IV. Hướng dẫn cách nhúng CSS vào website
Để CSS có thể thực thi hoạt động trên trang web bạn cần phải nhúng CSS vào website thông 3 cách sau:
Inline CSS – Nhúng Css trực tiếp vào phần tử HTML thông qua thuộc tính <style>
Với cách nhúng inline Css, chúng ta đặt mã CSS trực tiếp vào phần tử HTML thông qua thuộc tính <style>, với phương pháp nhúng này, đoạn mã CSS được nhúng chỉ có thể áp dụng cho chính phần tử HTML được nhúng đó.
Internal CSS – Sử dụng thẻ <style> đặt trong phần <head> của file HTML để viết các thuộc tính CSS cho trang web
External CSS – Tạo lập một file.css riêng biệt và nhúng file CSS đó vào phần đầu <head> của file HTML thông qua cặp thẻ <link> để kết nối giữa chúng
Với External CSS, chúng ta viết các thuộc tính định dạng CSS trong tập tin CSS riêng biệt đã được tạo trước đó. Và sử dụng thẻ <link rel="stylesheet" href=’ten-file-css"> trong phần Head (<head></head>) của các tập tin HTML để nhúng tập tin CSS vào trang web.
V. Một Số Các Thuộc Tính Cơ Bản Về CSS
| Thuộc tính về Màu sắc và Nền | Thuộc tính về Văn bản |
|
|
| Thuộc tính về Định dạng văn bản | Thuộc tính về Box Model |
|
|
|
Thuộc tính về Định dạng hình ảnh |
Thuộc tính về hiển thị và bố cục |
|
|
Các đơn vị trong CSS
CSS hỗ trợ nhiều đơn vị để xác định kích thước, khoảng cách cho các phần tử trang web. Một số đơn vị phổ biến:
- Đơn vị tuyệt đối
-
Px: pixel (điểm ảnh)
-
In: inch (inch)
-
Cm: centimeter (centimet)
-
Mm: millimeter (milimet)
- Đơn vị tương đối
-
%: phần trăm
-
Em: tương ứng với kích thước font hiện tại
-
Rem: tương ứng với font size của thẻ html
-
Vw/vh: tương ứng chiều rộng/cao của cửa sổ trình duyệt
- Một số đặc biệt
-
Auto: trình duyệt tự động tính toán kích thước phù hợp
-
Inherit: kế thừa giá trị thuộc tính từ phần tử cha
VI. Kết luận
Như vậy, thông qua bài viết này Tokyo Tech Lab Academy đã giải thích cho bạn Css là gì? Cũng như tầm quan trọng và cách ứng dụng của CSS trong việc xây dựng website. Hy vọng nội dung trên sẽ mang lại những thông tin giá trị, hữu ích cho bạn. Đừng quên theo dõi TTLab Academy để có thêm những kiến thức hay về công nghệ thông tin nhé.
Bài viết cùng chủ đề:
▶ Full Stack Developer là gì? Cần học gì để trở thành lập trình viên Full Stack?
▶ Back End Developer là gì? Công việc của một lập trình BackEnd?
▶ Front End Developer là gì? Trở thành lập trình Front End cần kiến thức gì?
▶ JavaScript là gì? Giới Thiệu Cơ Bản Về Ngôn Ngữ JavaScript
© 2023 Tokyo Tech Lab Academy. All Rights Reserved.
