Tại sao chúng tôi sử dụng CSS thay vì HTML?

Khi Web ngày càng phổ biến vào những năm 90, ý định áp dụng một thiết kế cụ thể cho một trang web cũng tăng theo. Các nhà phát triển web dựa vào các thẻ HTML cụ thể để nâng cao trang web

• p{ color: red;}

  7 đã xác định phông chữ cho toàn bộ tài liệu HTML

• p{ color: red;}

  8 đã xác định kiểu chữ, màu sắc và kích thước cho văn bản chứa trong đó

• p{ color: red;}

  9 căn giữa theo chiều ngang tất cả nội dung của nó

• p{ color: red;}

  0 đã tăng kích thước của văn bản

• p{ color: red;}

  0 văn bản hiển thị có gạch ngang

Một số thuộc tính HTML cũng có thể được sử dụng

• p{ color: red;}

  1 đã xác định màu nền trên phần tử

• p{ color: red;}

  2 đã xác định màu văn bản
• một số thuộc tính

  p{ color: red;}

  3 có thể được sử dụng để thêm khoảng trống ở bất kỳ phía nào của phần tử

Tại sao tránh bảng

Nhưng trên hết, để tạo các cột, căn chỉnh trực quan các phần tử và nói chung là định vị các phần tử tương đối với nhau, các nhà phát triển Web đã sử dụng phần tử

p{ color: red;}

4 để thiết kế trang web của họ vì nó cung cấp một lưới trực quan một cách tự nhiên.

 colspan="2">Tagline
     colspan="3">Copyright 2015

  

    

      
Logo
      







Left menu
Main content
Right sidebar

Cách tiếp cận này là cồng kềnh vì nhiều lý do

• Các bảng HTML dài dòng. họ yêu cầu rất nhiều mã soạn sẵn
• đánh dấu là sai về mặt ngữ nghĩa. bảng nên được sử dụng cho dữ liệu đa chiều
• thay đổi bố cục cần thiết để thay đổi đánh dấu. nếu chúng tôi muốn di chuyển cột bên trái sang bên phải, chúng tôi phải sửa đổi cấu trúc HTML
• các bảng dễ bị lỗi cú pháp. các hàng và ô cần được sắp xếp và lồng vào nhau theo một cách cụ thể để hợp lệ
• đánh dấu là không thể đọc được. các bảng được lồng trong các bảng để cung cấp các cột bổ sung trong các cột

Đó là lý do tại sao việc sử dụng bảng cho mục đích bố cục dần dần bị loại bỏ và thay vào đó CSS ​​được sử dụng

CSS là gì

CSS là viết tắt của Cascading Style Sheets. Mục đích của nó là tạo kiểu cho các ngôn ngữ đánh dấu (như HTML hoặc XML). Do đó, CSS tự nó vô giá trị, trừ khi được liên kết với tài liệu HTML

CSS làm cho tài liệu HTML trở nên sống động, bằng cách chọn phông chữ, áp dụng màu sắc, xác định lề, định vị các thành phần, tạo hiệu ứng tương tác, v.v.

CSS hoạt động như thế nào

Cách thức hoạt động của CSS là chọn một phần tử HTML (như một đoạn văn), chọn một thuộc tính để thay đổi (như màu sắc) và áp dụng một giá trị nhất định (như màu đỏ)

p{ color: red;}

Từ "Phong cách" có thể lừa dối. Bạn có thể nghĩ rằng CSS chỉ được sử dụng để thay đổi màu sắc, kích thước và phông chữ của văn bản. Nhưng CSS có thể xác định bố cục của tài liệu HTML, bằng cách xác định chiều cao, chiều rộng, lề trong và lề ngoài, vị trí, cột…

Tôi viết CSS ở đâu?

CSS như một thuộc tính

Bạn có thể viết CSS trực tiếp trên phần tử HTML bằng cách sử dụng thuộc tính

p{ color: red;}

5

________số 8

CSS in the

Bạn có thể sử dụng thẻ

p{ color: red;}

6 trong

p{ color: red;}

7 của tài liệu HTML của mình

p{ color: red;}

1

CSS trong một tệp riêng biệt

Bạn có thể viết CSS của mình trong một tệp riêng có phần mở rộng

p{ color: red;}

8, sau đó liên kết nó với HTML của bạn bằng cách sử dụng thẻ HTML

p{ color: red;}

9

p{ color: red;}

p{ color: red;}

5

Chính tài liệu HTML đã “gọi” tệp CSS, trong trường hợp này là tệp có tên

 style="color: red;">This text is important.

0 nằm trong cùng thư mục với tệp HTML

Phương pháp thứ 3 này sử dụng một tệp CSS riêng biệt được ưu tiên

Tại sao không tạo kiểu trực tiếp trong HTML?

Bởi vì chúng tôi muốn tách nội dung (HTML) khỏi bản trình bày (CSS) của nó

Nếu bạn muốn hình dung mục đích của sự khác biệt này, hãy hướng tới CSS Zen Garden tuyệt vời. mỗi thiết kế sử dụng cùng một HTML nhưng CSS khác nhau mỗi lần

Nó làm cho bảo trì dễ dàng hơn là tốt. cùng một tệp CSS có thể được sử dụng cho toàn bộ trang web. Nó cung cấp sự linh hoạt. tập trung vào nội dung ở một bên, kiểu dáng ở bên kia. Mục đích SEO, mối quan tâm khác nhau

Tại sao CSS được sử dụng thay vì HTML?

Ưu điểm của CSS so với HTML là gì?

CSS được sử dụng cho mục đích gì?

Tạo kiểu bằng HTML hay CSS tốt hơn?