• Trang chủ
  • Sản phẩm – Dịch vụ
    • Tạo ứng dụng di động
      • AppTeng Go
    • Smart ERP Go
      • Lite Smart ERP Go
      • Medium Smart ERP Go
    • Tạo QR Code
      • QR Code Go Free
  • Bảng giá
  • Bảng điều khiển
    • Đăng nhập
      • Tạo ứng dụng di động
      • Smart ERP Go
        • Lite ERP Go
        • Medium ERP Go
      • Tạo QR Code
        • QR Code Go Free
        • QR Code Pos – Res
        • QR Pos – Pro
      • Smart CRM / ERP
        • Smart CRM / ERP Go
      • Giáo dục
        • Edu Go Free
      • Giám sát
        • Monitor
    • Đăng ký
      • Tạo ứng dụng di động
      • Smart ERP Go
        • Lite Smart ERP Go
        • Medium ERP Go
      • Tạo QR Code
        • QR Code Go Free
        • QR Pos – Res
        • QR Pos – Pro
      • Smart CRM / ERP Go
        • Lite CRM / ERP Go
      • Giáo dục
        • Edo Go Free
      • Giám sát
        • Monitor
  • Kiến thức chung
  • Trang chủ
  • Sản phẩm – Dịch vụ
    • Tạo ứng dụng di động
      • AppTeng Go
    • Smart ERP Go
      • Lite Smart ERP Go
      • Medium Smart ERP Go
    • Tạo QR Code
      • QR Code Go Free
  • Bảng giá
  • Bảng điều khiển
    • Đăng nhập
      • Tạo ứng dụng di động
      • Smart ERP Go
        • Lite ERP Go
        • Medium ERP Go
      • Tạo QR Code
        • QR Code Go Free
        • QR Code Pos – Res
        • QR Pos – Pro
      • Smart CRM / ERP
        • Smart CRM / ERP Go
      • Giáo dục
        • Edu Go Free
      • Giám sát
        • Monitor
    • Đăng ký
      • Tạo ứng dụng di động
      • Smart ERP Go
        • Lite Smart ERP Go
        • Medium ERP Go
      • Tạo QR Code
        • QR Code Go Free
        • QR Pos – Res
        • QR Pos – Pro
      • Smart CRM / ERP Go
        • Lite CRM / ERP Go
      • Giáo dục
        • Edo Go Free
      • Giám sát
        • Monitor
  • Kiến thức chung
Trang chủ/Hướng dẫn/Nền tảng Tạo ứng dụng di động/Tuỳ chỉnh và Nâng cao/Sử dụng HTML trong ứng dụng/Hướng dẫn 11: Dàn trang – Layout (CSS)

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

247 lượt truy cập 0

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. <p style=”font-size:20px;”>Đây là kích thước Font chữ 20px</p>
  2.  
  3. <p style=”font-family:courier;”>Đây là kiểu Font chữ Courier</p>
  4.  
  5. <p style=”font-size:20px; font-family:courier;”>Đây là kiểu Font chữ Courier với kích thước Font là 20px</p>

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. <html>
  2.  
  3. <head>
  4.  
  5. <title>Chào mừng bạn đã đến với AppTeng</title>
  6.  
  7. <style type=“text/css”>
  8. h1 {font-size: 30px; font-family: arial;}
  9. h2 {font-size: 15px; font-family: courier;}
  10. p {font-size: 8px; font-family: “times new roman”;}
  11. </style>
  12. </head>
  13.  
  14. <body>
  15.  
  16. <h1>My first CSS page</h1>
  17. <h2>AppTeng – nền tảng tạo ứng dụng di động</h2>
  18. <p>Liên hệ với chúng tôi theo số 0914.799.931 </p>
  19.  
  20. </body>
  21.  
  22. </html>

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ẻ <style type=”text/css”> để khai báo với Module Mã nguồn đang viết code CSS.

Ở ví dụ trên, các tiêu đề của Module sẽ dử dụng đồng nhất font chữ Arial với kích cỡ 30px, còn phụ đề sẽ áp dụng font chữ Courier, kích cỡ 15px và toàn bộ các đoạn chữ sẽ sử dụng loại font Times New Roman, kích cỡ 8px.

CSS còn có những chức năng gì?

CSS còn có có nhiều chức năng ngoài việc định dạng loại font và kích cỡ chữ. Ví dụ bạn có thể thêm màu sắc và nền. Đây là một vài ví dụ khác:

  1. <body style=“background-image: url(‘https://appteng.com/favicon.ico’);“>
  2.  
  3. <h1 style=“background-color: blue;“>Tiêu đề trên nền màu xanh</h1>
  4.  
  5. <p style=“color:green;“>Green text</p>
  6. </body>

 

 

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

Hãy thực hành những gì bạn vừa học bằng cách thêm CSS vào Module Mã nguồn.

Ngoài font chữ, kích cỡ chữ, màu sắc và nền, CSS còn có những gì?

Ngoài những gì bạn đã biết ở trên, CSS còn có thể được sử dụng để kiểm soát, thiết lập và trình bày trong Module Mã nguồn (như lề – margins, phần tử trôi nổi – float, so hàng – alignment, chiều rộng – width, chiều cao – height ).
Xác định các phần tử khác nhau bằng CSS bạn có thể bố trí các trang Web của bạn một cách trang nhã và chính xác.

Ví dụ 3:

  1. <p style=“padding:25px;border:1px solid red;“>Chào mừng bạn đã đến với AppTeng</p>

 

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

 

Với thuộc tính float có thể trôi nổi dạt qua trái hoặc phải. Ví dụ sau sẽ cho bạn hình dung như thế nào:

Ví dụ 4:

  1. <img style=“float: left;“ src=“https://appteng.com/favicon.ico” alt=“AppTeng logo” />Nền tảng AppTeng là phần mềm chạy trên môi trường web, dùng để tạo các ứng dụng di động theo các Module có sẵn, có thể tuỳ biến theo chức năng sử dụng.

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

 

 

Ở ví dụ trên bạn nhận thấy đoạn chữ đã chừa ra một khoảng trống bên trái để cho vị trí của hình ảnh.

Với thuộc tính position, bạn có thể đặt một phần tử ở bất cứ nơi nào mình muốn trong Module Mã nguồn một cách chính xác:

Ví dụ 5:

  1. <img src=“http://appteng.com/favicon.ico” alt=“AppTeng logo” style=“position:absolute;bottom:50px;right:10px;“ />

 

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

Ví dụ trên, hình ảnh được đặt ở ví trí cách đáy màn hình 50 pixels, và cách lề phải 10 pixels, dĩ nhiên bạn có thể đặt ở bất cứ vị trí nào mình muốn.

Thật tuyệt, nhưng thực hiện có dễ dàng không?

Bạn không thể học CSS trong 10 phút. Và như chúng tôi đã nói ở trên, đây chỉ là hướng dẫn khái quát, nếu bạn muốn học CSS, bạn có thể xem các hướng dẫn học CSS cơ bản sau này.

Còn bây giờ, bạn hãy tập trung vào học code HTML và tiếp tục xem tiếp các hướng dẫn khác.

Bài viết này có giúp ích gì cho bạn không ?

Có  Không
Cùng chuyên mục
  • Cách ẩn link Youtube Video trong ứng dụng
  • Hướng dẫn 1: Bắt đầu với HTML trong Module Mã nguồn
  • Hướng dẫn 2: HTML là gì?
  • Hướng dẫn 3: Phần tử và thẻ (elements, tags)
  • Hướng dẫn 4: Module Mã nguồn – lần đầu làm chuyện “ấy”
  • Hướng dẫn 5: Một số phần tử cần biết
Có thể bạn quan tâm
  • Tạo Chứng chỉ Phân phối iOS (iOS Distribution Certificate)
  • Hướng dẫn các bước Xuất bản ứng dụng Android
  • Module Thương mại điện tử
  • Làm thế nào để thay đổi icon hình ảnh của Module
  • Làm thế nào để tạo File .IPA cho ứng dụng iOS ?
Danh mục hướng dẫn
  • Nền tảng Edu Go (Miễn phí cho Trường học – Cơ sở giáo dục 5
    • Thiết lập hệ thống Trường học 2
    • Câu hỏi thường gặp 1
    • Bắt đầu 1
    • Các vấn đề khác 1
  • Nền tảng Tạo ứng dụng di động 7
    • Làm thế nào ? 3
    • Bắt đầu 7
    • Các bước tạo ứng dụng di động 6
    • Giao diện ứng dụng 13
      • Tuỳ chỉnh giao diện với CSS 22
    • Các Module ứng dụng 61
    • Xuất bản ứng dụng Android 4
    • Xuất bản ứng dụng iOS 17
    • Tuỳ chỉnh và Nâng cao 28
      • Sử dụng HTML trong ứng dụng 14
    • Kiếm tiền với AdMob 5
    • Ứng dụng Android và các vấn đề đã biết 1
    • Ứng dụng iOS và các vấn đề đã biết 2
    • Gỡ lỗi 2
    • Dành cho Nhà phát triển 4
      • Tài liệu API 1
    • Các vấn đề khác 9
  • Chương trình Đại lý AppTeng 18
    • Bắt đầu 14
    • Hướng dẫn thực hiện 3
    • Câu hỏi thường gặp của Chương trình đại lý 10
  • Kiến thức chung 3
  • Nền tảng Email Go (Email Marketing 23
    • Khái Niệm, Thuật Ngữ 10
    • Thiết lập Hệ thống Email Marketing trên nền tảng Email Go của bạn 5
    • Tạo tài nguyên Hệ thống 2
    • Chiến Dịch Email Marketing 2
    • API KEY 1
    • Phí Dịch vụ 1
    • Các vấn đề chung 2
  • Nền tảng File Go 2
    • Bắt đầu 2
  • Lite Marketing 5
    • Thực hiện 1
    • Khái niệm, Thuật ngữ 3
    • Bắt đầu 1
  • Nền tảng Ad BioLink 1
    • Khái niệm, Thuật ngữ 1
  • Nền tảng QR Pos – Res 2
    • Bắt đầu 1
    • Thực hiện 1
  • Nền tảng Tạo Website Cửa hàng – Comment – Chat Bot tự động trên Facebook – Instagram 19
    • Khái niệm, Thuật ngữ 6
    • Cửa hàng Thương mại điện tử 12
    • Bắt đầu 1
  • Nền tảng Quản trị Nhân sự HRM Go 1
    • Bắt đầu 1
  • Nền tảng GetFund – Góp vốn đầu tư 1
  • Nền tảng Thương mại điện tử – Shop 4
    • Bắt đầu 1
    • Kinh doanh bán hàng 3
  • Nền tảng WebPro – Tạo nhanh Website 3
    • Bắt đầu 2
    • Các bước tạo Website 1
  • Email dành cho Doanh nghiệp 5

  Hướng dẫn 10: Tìm hiểu thêm về bảng – table

Hướng dẫn 12: Chèn liên kết tới các Module khác cho hình ảnh.  

AppTeng Việt Nam
Giới thiệu
Danh sách phát hành
Tin tức
Chính sách Cộng tác viên
Chính sách Đại lý
Chính sách bảo mật
Điều khoản sử dụng
Chính sách và Quy tắc hoàn lại tiền
  • Chính sách bảo mật
  • Điều khoản sử dụng
  • © 2014 - 2022 AppTeng - phát triển và Vận hành.