Hướng dẫn why do we use css? - tại sao chúng ta sử dụng css?

Ngay cả khi bạn không phải là một lập trình viên, bạn có thể nghe nói về HTML. Nó là ngôn ngữ đánh dấu cơ bản nhất và nó đã xuất hiện từ những năm 1990. Những gì bạn có thể không quen thuộc là CSS. Nó là một yếu tố của lập trình mà Lừa cũng quan trọng và cùng với HTML và JavaScript, CSS là một trong ba nền tảng chính của công nghệ cho web. Nhưng CSS là gì, nó hoạt động như thế nào và tại sao nó lại quan trọng như vậy? Đọc và tìm hiểu.

[CTA ID = Khăn 1690 ″ vid = Khăn 0 ″]

CSS là gì?

CSS là viết tắt của các bảng phong cách xếp tầng. Nói tóm lại, CSS là một ngôn ngữ thiết kế làm cho một trang web trông hấp dẫn hơn chỉ là những đoạn văn bản đơn giản hoặc không gây mệt mỏi. Trong khi HTML xác định phần lớn nội dung văn bản, CSS xác định cấu trúc thị giác, bố cục và tính thẩm mỹ. HTML là ngôn ngữ đánh dấu và CSS là ngôn ngữ biểu định kiểu. Hãy nghĩ về việc nhìn và cảm nhận khi bạn nghĩ CSS.

CSS hoạt động như thế nào với HTML?

Nếu HTML là các thành phần động cơ của một chiếc xe hơi, CSS sẽ là phong cách cơ thể và công việc sơn. Một trang web có thể chạy mà không cần CSS, nhưng nó chắc chắn không đẹp. CSS làm cho mặt trước của một trang web tỏa sáng và nó tạo ra trải nghiệm người dùng tuyệt vời. Nếu không có CSS, các trang web sẽ ít làm hài lòng mắt và có khả năng 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 cho màu phông chữ và hơn thế nữa.

Tại sao CSS lại quan trọng như vậy?

Để minh họa tầm quan trọng của CSS, ở đây, một ví dụ về một trang trên trang web DevMountain có và không có CSS, một loại hướng dẫn CSS trực quan, nếu bạn muốn.

Dưới đây là một phần của trang khóa học DevMountain với CSS:

Và đây là cùng một phần mà không có CSS:

Sự tương phản rõ rệt, phải không? Bạn sẽ nhận thấy khá nhiều sự khác biệt giữa hai người khi nói đến trình bày tổng thể. Với CSS, bạn thấy sự thay đổi về phông chữ, kích thước phông chữ và màu phông chữ. Bạn cũng thấy một sự thay đổi trong định dạng của các nút và có thêm một nền màu xanh phía sau chúng. Mỗi yếu tố này là có thể vì các bảng phong cách xếp tầng. Là một người dùng, cái nào trông hấp dẫn hơn? Nó rất dễ hiểu tại sao CSS lại rất quan trọng.

Những lợi ích của CSS là gì?

Có một số lợi ích của CSS, bao gồm:

1] Tốc độ trang nhanh hơn

Nhiều mã hơn có nghĩa là tốc độ trang chậm hơn. Và CSS cho phép bạn sử dụng ít mã hơn. CSS cho phép bạn 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.

2] Trải nghiệm người dùng tốt hơn

CSS không chỉ làm cho các trang web dễ dàng trên mắt, nó còn cho phép định dạng thân thiện với người dùng. Khi các nút và văn bản ở những nơi logic và được tổ chức tốt, trải nghiệm người dùng sẽ cải thiện.

3] Thời gian phát triển nhanh hơn

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 với một chuỗi mã. Một bảng kiểu xếp tầng có thể được nhân rộng trên một số trang trang web. Ví dụ, nếu bạn có các trang sản phẩm nên có cùng định dạng, nhìn và cảm nhận, viết các quy tắc CSS cho một trang sẽ đủ cho tất cả các trang cùng loại đó.

4] Thay đổi định dạng dễ dàng

Nếu bạn cần thay đổi định dạng của một bộ trang cụ thể, thì nó dễ dàng thực hiện với CSS. Không cần phải sửa chữa mọi trang riêng lẻ. Chỉ cần chỉnh sửa bảng 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 bảng kiểu đó.

5] Khả năng tương thích trên các thiết bị

Các vấn đề thiết kế web đáp ứng. Trong ngày và tuổi ngày hôm nay, các trang web phải được hiển thị đầy đủ và dễ dàng điều hướng trên tất cả các thiết bị. Cho dù di động hay máy tính bảng, máy tính để bàn hoặc thậm chí là TV thông minh, CSS kết hợp với HTML để có thể thiết kế đáp ứng.

Bạn muốn học CSS?

Như bạn có thể thấy, CSS là rất quan trọng khi nói đến việc trình bày tổng thể của một trang web. Và không chỉ vậy, nó làm cho các nhà phát triển cuộc sống dễ dàng hơn rất nhiều khi định dạng. Làm chủ CSS là một phần quan trọng của việc trở thành một tài sản có giá trị và một lập trình viên vững chắc.

[CTA ID = Khăn 1690 ″ vid = Khăn 0 ″]

Bản tóm tắt

Hướng dẫn này xem xét lý do tại sao chúng ta nên sử dụng CSS và tại sao sử dụng CSS để tạo kiểu cho các tài liệu của chúng tôi tốt hơn là sử dụng HTML trình bày.

Thông tin: Tại sao sử dụng CSS?

CSS giúp bạn giữ nội dung thông tin của một tài liệu tách biệt với các chi tiết về cách hiển thị nó. Các chi tiết về cách hiển thị tài liệu được gọi là phong cách của nó. Bạn giữ phong cách tách biệt với nội dung để bạn có thể:

  • Tránh trùng lắp
  • Làm cho bảo trì dễ dàng hơn
  • Sử dụng cùng một nội dung với các phong cách khác nhau cho các mục đích khác nhau

Trang web của bạn có thể có hàng ngàn trang trông giống nhau. Sử dụng CSS, bạn lưu trữ thông tin kiểu trong các tệp phổ biến mà tất cả các trang chia sẻ. Khi người dùng hiển thị một trang web, trình duyệt của người dùng sẽ tải thông tin kiểu cùng với nội dung của trang. Khi người dùng in một trang web, bạn có thể cung cấp thông tin kiểu khác nhau giúp trang in dễ đọc.

Nói chung, bạn sử dụng HTML để mô tả nội dung của tài liệu, không phải phong cách của nó; Bạn sử dụng CSS để chỉ định phong cách của nó, không phải nội dung của nó. Tất nhiên, có những trường hợp ngoại lệ cho quy tắc này, và HTML cũng cung cấp một số cách để chỉ định phong cách. Ví dụ: trong HTML, bạn có thể sử dụng thẻ để tạo văn bản đậm và bạn có thể chỉ định màu nền của một trang trong thẻ của nó. Khi bạn sử dụng CSS, bạn thường tránh sử dụng các tính năng kiểu HTML này để tất cả thông tin kiểu tài liệu của bạn ở một nơi.

Hành động: Tạo một bảng kiểu cho tài liệu HTML

Tạo bảng kiểu

  1. Tạo một tệp văn bản; Tệp này sẽ là bảng kiểu của bạn. Đặt tên cho nó style1.css

  2. Trong tệp CSS của bạn, sao chép và dán một dòng này, sau đó lưu tệp:

    strong { color: red; }
    

Liên kết tài liệu của bạn với bảng kiểu của bạn

  1. Tạo một tệp văn bản khác; Tệp này sẽ là tài liệu HTML của bạn. Đặt tên cho nó bất cứ điều gì bạn thích.

  2. Trong tệp HTML của bạn, sao chép và dán các dòng sau; Dòng tham chiếu bảng kiểu của bạn:

    
     
       
       
       Sample document
       
       
       
         
           Cascading
           Style
           Sheets
         
       
     
    
  3. Lưu tệp và tải nó trong trình duyệt. Bảng kiểu làm cho các chữ cái bên trong các thẻ hiển thị màu đỏ, như thế này:

    Cascading Style Sheetsascading Style Sheets

Tiếp theo là gì?

Bây giờ bạn có một tài liệu mẫu được liên kết với một bảng kiểu riêng biệt, bạn đã sẵn sàng tìm hiểu thêm về cách trình duyệt của bạn kết hợp chúng khi hiển thị tài liệu. Xem các hướng dẫn khác trong phần này để biết thêm thông tin.

Thuộc tính

  • Bài viết này chứa nội dung ban đầu từ các nguồn bên ngoài, bao gồm các nguồn được cấp phép theo giấy phép CC-by-SA.

  • Các phần của nội dung này Bản quyền 2012 Người đóng góp Mozilla.Bài viết này chứa công việc được cấp phép theo giấy phép Creative Commons Attribution-Sharealike v2.5 trở lên.Công việc ban đầu có sẵn tại Mozilla Developer Network: Bài báo

Bài Viết Liên Quan

Chủ Đề