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
7 đã xác định phông chữ cho toàn bộ tài liệu HTMLp{ 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ảnp{ color: red;}
0 văn bản hiển thị có gạch ngangp{ color: red;}
Một số thuộc tính HTML cũng có thể được sử dụng
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ảnp{ color: red;}
- một số thuộc tính
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ửp{ color: red;}
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.
Logo
Tagline
Copyright 2015
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ố 8CSS 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ìnhp{ color: red;}
1CSS 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;}
9p{ color: red;}
p{ color: red;}
5Chính tài liệu HTML đã “gọi” tệp CSS, trong trường hợp này là tệp có tên
This text is important.
0 nằm trong cùng thư mục với tệp HTMLPhươ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