Hướng dẫn 11: Dàn trang – Layout (CSS)

Tại Module mã nguồn, bạn cũng có thể tạo các Trang chủ Layout nhờ CSS.

Layout – dàn trang là cách bạn sắp xếp, bố trí các phần tử trên ứng dụng di động như hình ảnh, chữ, tiêu đề … theo ý riêng của bạn.

Tôi phải thực hiện như thế nào?

Để thực hiện công việc này bạn sẽ sử dụng Cascading Style Sheets (CSS). Trong hướng dẫn này, bạn sẽ được giới thiệu khái quát về CSS. Tuy nhiên bạn có thể học CSS từ cơ bản ở một phần hướng dẫn khác. Vì vậy hãy xem đây là một lời giới thiệu ngắn gọn để bạn làm quen với CSS.

CSS là một người bạn song hành cùng với HTML. Trong việc viết code bạn có thể xem như: HTML chịu trách nhiệm phần xây dựng cơ bản (cấu trúc khung sườn), trong khi đó CSS sẽ phụ trách phần trang trí (layout).

Ví dụ: bạn có thể xác định kích cỡ chữ và loại font

Ví dụ 1:

  1. Đây là kích thước Font chữ 20px

  2.  
  3. Đây là kiểu Font chữ Courier

  4.  
  5. Đây là kiểu Font chữ Courier với kích thước Font là 20px

Thực tế trên ứng dụng của bạn sẽ như sau:

 

Trong ví dụ trên, chúng tôi sử dụng thuộc tính style để xác định loại font chữ được sử dụng ( font-family) và kích cỡ font chữ  (font-size). Chú ý, ở đoạn văn thứ 3, chúng tôi sử dụng dấu ; để phân biệt 2 thuộc tính : loại font chữ ( font-family) và kích cỡ font chữ (font-size).

Vậy phải mất rất nhiều thời gian?

Một trong những chức năng thông minh của CSS là quản lý Layout của bạn từ theo phương pháp trung tâm. Thay vì sử dụng thuộc tính style ở mỗi thẻ, bạn có thể khai báo Layout toàn trang Module Mã nguồn trong ứng dụng của bạn:

Ví dụ 2:

  1.  
  2.  
  3. </span><span class="pln">Chào mừng bạn đã đến với AppTeng</span><span class="tag">
  4.  
  5. type=“text/css”>
  6. h1 {font-size: 30px; font-family: arial;}
  7. h2 {font-size: 15px; font-family: courier;}
  8. p {font-size: 8px; font-family: “times new roman”;}
  9.  
  10.  

  11. My first CSS page


  12. AppTeng – nền tảng tạo ứng dụng di động

  13. Liên hệ với chúng tôi theo số 0869.155.886

  14.  
  15.  

Thực tế trên ứng dụng của bạn sẽ như sau:

Ở ví dụ trên, CSS được chèn vào phần head và áp dụng cho toàn bộ Module Mã nguồn. Để thực hiện điều đó bạn chỉ cần sử dụng thẻ