Cho dù bạn có biết hay không, bạn đang tận dụng lợi thế của CSS ngay khi bạn mở một trình duyệt web. Đó là hệ thống mẫu được sử dụng bởi gần như mọi trang web hiện đại để cung cấp cho các trang bố cục và ngoại hình của họ. Một số bạn có thể nghĩ rằng " Tôi đã tạo ra các trang web trước đây và nó rất dễ dàng, tôi không bao giờ cần bất kỳ CSS nào. ”Và đó là sự thật. Bạn không cần CSS để tạo một trang web đẹp và chức năng, nhưng rất có thể trang web của bạn có thể nhỏ hơn, sạch hơn, nhất quán hơn và đẹp hơn khi bạn chọn CSS ngay từ đầu. Hôm nay chúng tôi sẽ cho bạn thấy những điều cơ bản về những gì CSS có thể làm. Hướng dẫn này sẽ không đưa bạn từ người mới bắt đầu đến Nhà thiết kế web đoạt giải thưởng, nhưng nó sẽ giúp bạn hiểu cách thức hoạt động của CSS và làm thế nào nó có thể giống như bạn rất nhiều thời gian và công sức.

Tổng quan nhanh

CSS (Cascading Style Sheet) có nghĩa là làm một việc: quản lý việc trình bày trang web của bạn. Điều này nghe có vẻ đơn giản nhưng hãy ghi nhớ khi chúng tôi tiếp tục. Một điều quan trọng để lấy đi từ thực tế đó là trình bày KHÔNG phải là công việc của HTML. HTML định nghĩa cấu trúc trang của bạn (tiêu đề là gì, chân trang, v.v.) là gì. CSS lấy cấu trúc đó và thực hiện tất cả công việc liên quan đến cách cấu trúc được trình bày .

The Wrong Way

Để cung cấp cho bạn ý tưởng về CSS được sửa chữa, hãy xem mã HTML này:

 Trang chủ của tôi 
Trang web lớn nhất từ ​​trước tới nay hiện đang được phát triển.


Người ngoài hành tinh đã xâm chiếm quá.


Hiển thị trong trình duyệt của bạn như sau:

Có một số vấn đề tiềm ẩn ở đây. Đối với người mới bắt đầu, nó đặt thông tin phông chữ và màu sắc mỗi khi một tiêu đề hoặc đoạn mới được vẽ. Mỗi mục mới trên trang web sẽ cần định nghĩa phông chữ và màu sắc giống hệt nhau, mặc dù chúng giống nhau cho mỗi dòng tiêu đề và đoạn văn. Số tiền này tải vô số băng thông lãng phí nếu bạn có nhiều mục nhập.

Tiếp theo là vấn đề về khả năng mở rộng. Nếu bạn có 100 mục nhập trên trang tin tức này và bạn quyết định rằng tiêu đề phải có màu đỏ, bạn có rất nhiều công việc trước bạn để thay đổi từng dòng tiêu đề để hiển thị màu mới.

Thứ ba, và đây là một vấn đề của "thủ tục thích hợp", trang này có chứa một số yếu tố được "presentational", không phải "cấu trúc". Các phông chữ, màu sắc và các thẻ linebreak đều liên quan đến cách trang được trình bày và không liên quan gì đến cấu trúc của trang. HTML không phù hợp với bản trình bày, công việc đó là tốt nhất còn lại cho CSS, như chúng tôi sẽ hiển thị bên dưới.

Thiết kế với CSS

Vậy làm thế nào chúng ta có thể loại bỏ tất cả các thẻ phụ? Làm cách nào để chúng tôi có thể giảm kích thước trang trong khi vẫn giữ được màu sắc và bố cục của chúng tôi? Vâng, hình ảnh bạn có thể xác định ở một nơi duy nhất những gì TẤT CẢ các tiêu đề của bạn sẽ giống như (nói, văn bản màu xanh lá cây lớn). Sau đó, bạn không cần phải xác định màu cho từng tiêu đề duy nhất. Điều tương tự cũng áp dụng cho các đoạn văn. Nếu bạn muốn tất cả văn bản đoạn văn phải có màu xanh dương, bạn chỉ cần đặt văn bản đó làm quy tắc CSS cho thẻ “p”. Tất cả các đoạn văn tiếp theo sẽ có văn bản màu xanh, mà không cần phải chỉ định nó mỗi lần.

CSS được dạy tốt nhất bằng ví dụ. Hãy bắt đầu bằng cách xác định chính xác các quy tắc được mô tả ở trên - tất cả tiêu đề phải có màu xanh lục và tất cả các đoạn văn phải có màu xanh dương. Sử dụng trình soạn thảo văn bản mà bạn chọn, bắt đầu một tệp mới có tên style.css và thêm văn bản sau:

 h1 {color: green;} p {color: blue;}

Điều này xác định tất cả các thẻ h1 có văn bản màu xanh lá cây và tất cả các thẻ p có văn bản màu xanh lam.

Tất cả những gì chúng ta cần làm bây giờ là kết nối nó với HTML với thẻ liên kết, và sau đó loại bỏ tất cả các thẻ font vô dụng khỏi HTML. Khi hoàn thành, nó sẽ giống như thế này:

 Trang chủ của tôi 
Trang web lớn nhất từ ​​trước tới nay hiện đang được phát triển.
Người ngoài hành tinh đã xâm chiếm quá.

Khá sạch hơn một chút, huh? Chúng tôi đã giảm kích thước tổng thể của trang web của mình và chỉ với 2 mục nhập trong “blog” của chúng tôi.

CSS cho bố cục

Chắc chắn, nó có thể làm cho phông chữ của bạn nhất quán, nhưng điều đó một mình chắc chắn là không đủ để làm cho CSS công cụ hoàn chỉnh để trình bày trang web. Để làm điều đó, nó phải có khả năng ảnh hưởng đến cách bố trí trang web của bạn, cho phép bạn kiểm soát không chỉ mọi thứ trông như thế nào mà chúng ở đâu. Toàn bộ sức mạnh của CSS trên bố cục trang web nằm ngoài phạm vi của hướng dẫn này, vì vậy chúng tôi sẽ giới thiệu khái niệm này thông qua một kịch bản chung duy nhất - thanh bên điều hướng.

Tạo một cái gì đó như thế này là đáng kinh ngạc trong CSS. Quay lại tệp style.css của bạn và thêm phần sau:

 #sidebar {width: 100px; chiều cao: 200px; border-style: solid; float: trái; lề phải: 15px; }

Lưu ý # ở đầu thanh bên tên. Tóm lại - điều này cho CSS biết rằng chúng tôi đang làm việc với một tên mục duy nhất mới mà chúng tôi đã tạo, thay vì một thẻ được tích hợp sẵn như h1 hoặc p . Lời giải thích dài liên quan đến sự khác biệt giữa một id và một lớp, và được giải thích chi tiết ở đây.

Bạn sẽ có thể thấy một số bit quan trọng ở đây. Đầu tiên chúng ta tạo một ID mới có tên là sidebar, cho nó một chiều cao và chiều rộng cụ thể, một đường viền chắc chắn, và xác định rằng nó phải có một lề 15px ở phía bên phải. Chúng tôi đã yêu cầu nó trôi nổi ở phía bên trái của màn hình, với các yếu tố trang khác (như văn bản của bạn) chảy xung quanh nó. Bạn có thể kích hoạt phần tử này bằng cách thêm thẻ thanh bên vào phần nội dung của HTML của bạn, giống như thế này.

  • Mục 1
  • Mục 2
  • Mục 3

Và bây giờ khi bạn mở trang của bạn, có thanh bên mới của bạn!

Phần kết luận

Rõ ràng chúng tôi mới chỉ bắt đầu làm xước bề mặt các khả năng của CSS, nhưng hy vọng rõ ràng là những nguyên tắc cơ bản này có thể được áp dụng nhiều hơn những gì chúng tôi đã làm ở đây. Các thao tác văn bản có thể được sử dụng để định dạng văn bản theo vô số cách và bằng cách sửa đổi khái niệm thanh bên, bạn có thể tạo các biến thể vô hạn của bố cục trang web. Để nghiên cứu sâu hơn, tác giả này đề xuất phần CSS của W3Schools.com.

Tín dụng hình ảnh: geirarne