NộI Dung

• Các bước
• Câu hỏi và câu trả lời của cộng đồng
• Lời khuyên

Các phần khác

Cascading Style Sheets (CSS) là ngôn ngữ mã hóa tiêu chuẩn để mô tả cách các trang web sẽ xuất hiện trong trình duyệt web. Các trang web thường chứa nhiều cột. Tìm hiểu cách định dạng cột trong CSS để bạn có thể điều chỉnh vị trí, kích thước và giao diện của chúng như mong muốn.

Các bước

1. 

   Cấu trúc HTML của bạn đúng cách để có hiệu suất CSS tối ưu. Bạn muốn có 2 "id" bao quanh mỗi cột, để tránh các vấn đề về bố cục.
   • Đặt tên cho id đầu tiên với mục đích của cột, như "thanh bên". Bạn sẽ đặt tất cả CSS cho nội dung cột ở đây.
   • Đặt tên id thứ hai với mục đích cột cộng với "wrapper", như "sidebar-wrapper". Bạn sẽ đặt tất cả CSS cho bố cục cột ở đây. Id này sẽ bao quanh id khác. (Vì vậy, trong HTML của bạn, bạn sẽ có một cái gì đó giống như div id = 'sidebar-wrapper' bên trong <> ngay sau đó là div id = 'sidebar' (lại trong <>) theo sau là CONTENT và / div bên trong <> (lặp lại hai lần ).

2. 

   
   
   Tìm tên của id cột trong CSS của bạn (như "#sidebar").

3. 

   
   
   Quyết định xem bạn muốn cột xuất hiện ở bên phải hay bên trái.

4. 

   Thêm "float: right; "hoặc" float: left; "vào CSS cho tên id (như" #sidebar {float: right;} ").
   • Nếu bạn muốn có nhiều hơn 2 cột, bạn sẽ cần bắt đầu với cấu trúc 2 cột, sau đó ngắt các cột đó thêm. Ví dụ: nếu bạn muốn 3 cột, bạn sẽ bắt đầu với một cột chính và một cột phụ, sau đó đặt 2 cột bên trong cột chính, với một cột nổi bên phải và một cột nổi bên trái.

Phương pháp 1/2: Thay đổi bố cục cột bằng CSS

1. 

   
   
   Tìm tên của id trình bao bọc cột trong CSS của bạn (như "# sidebar-wrapper").

2. 

   Xác định độ rộng bạn muốn cột. Bạn có thể đặt điều này theo phần trăm hoặc pixel.

3. 

   Thêm "chiều rộng" đó vào id trình bao bọc cột (như "sidebar-wrapper {width: 30%; }’).

4. 

   Xác định "chiều cao" cột mong muốn của bạn và thêm cột đó vào id trình bao bọc cột (như "sidebar-wrapper {height: 100%; }.

Phương pháp 2/2: Thay đổi giao diện cột bằng CSS

1. 

   Xác định kích thước đệm, lề và đường viền bạn muốn ở hai bên của cột.
   • Phần đệm là khoảng trống giữa cạnh của nền cột và văn bản.
   • Lề là khoảng trống sau mép của nền trước khi cột tiếp theo bắt đầu.

2. 

   Thêm phần đệm và lề vào id tên cột (như "#sidebar {padding: 0 5px; lề: 0 5px; viền: 2px chấm #fff; } ", cung cấp cho cột 5 pixel lề và khoảng đệm ở hai bên, nhưng không có ở trên và dưới).

3. 

   Thêm màu mong muốn của bạn vào id tên cột. Ví dụ: đối với nền đen trên văn bản trắng, bạn sẽ sử dụng "#sidebar {background-color # 000; color #fff;}".

4. 

   Chọn các thẻ HTML mà bạn muốn tạo các giao diện đặc biệt và viết CSS của chúng đề cập đến các thẻ cụ thể trong id tên cột. Ví dụ: để chuyển tất cả văn bản được gắn thẻ "h3" thành màu đỏ trong thanh bên, bạn sẽ viết "#sidebar h3 {color # f00;}".

5. 

   Chọn bất kỳ thay đổi phông chữ nào bạn muốn trong cột cụ thể đó và đặt mã đó vào id tên cột (như #sidebar {font-size: 0,8em; }.

6. 

   Thích biết cách định dạng cột trong CSS.

Câu hỏi và câu trả lời của cộng đồng

Làm cách nào để chuẩn bị cho kỳ thi CSS?

Bạn có thể nghiên cứu tất cả các ghi chú của mình và thực hành thêm các vấn đề tương tự như những gì bạn đã làm trên lớp. Bạn cũng có thể yêu cầu giáo sư của mình hướng dẫn học tập và đảm bảo nghiên cứu tất cả các chủ đề được liệt kê trên đó.

Lời khuyên

• Nếu giao diện trang web của bạn thay đổi trong các trình duyệt khác nhau, hãy thêm biểu định kiểu chính vào đầu CSS của bạn. Các biểu định kiểu như vậy sẽ vô hiệu hóa cài đặt mặc định của trình duyệt, vì vậy chúng sẽ không ảnh hưởng đến giao diện trang web của bạn.
• Bỏ qua mô-đun bố cục nhiều cột mới từ CSS3. Chức năng này hiện bị giới hạn và hoàn toàn không được hỗ trợ trong trình duyệt phổ biến nhất, Internet Explorer.
• Luôn đặt đường viền, lề và phần đệm thành "0" trong mỗi thẻ HTML đơn lẻ trên trang web của bạn mà không có cài đặt riêng. Nó sẽ ngăn các ứng dụng trùng lặp có cùng cài đặt.