• 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/Giao diện ứng dụng/Tuỳ chỉnh giao diện với CSS/Tuỳ chỉnh nâng cao CSS/SCSS tại Bước 2: Màu sắc ?

Tuỳ chỉnh nâng cao CSS/SCSS tại Bước 2: Màu sắc ?

93 lượt truy cập 0

Tất cả các tuỳ chỉnh nâng cao CSS/SCSS cần yêu cầu kỹ năng hiểu biết về CSS ở mức tối thiểu. Chúng tôi cũng cố gắng có nhiều bài viết hướng dẫn tại chuyên mục: Tuỳ chỉnh giao diện với CSS để bạn có thể học nhanh hoặc đơn giản chỉ cần Sao chép và Dán vào ứng dụng.

Hướng dẫn dưới đây giúp bạn tuỳ chỉnh nâng cao tại bước 2: Màu sắc. Cho phép bạn tùy chỉnh ứng dụng của bạn hoàn hảo hơn với CSS / SCSS.

Bạn cần đi tới TAB Màu sắc, kéo xuống dưới cùng để mở Tuỳ chọn CSS/SCSS như hình ảnh dưới đây:

CSS là gì?

CSS là một ngôn ngữ lập trình (đơn giản nhất) để định dạng và hình thành một trang. Nó là viết tắt của Cascading Style Sheet và xác định cách các yếu tố HTML5 được hiển thị. Bạn có thể tham khảo thêm về CSS tại đây. 

SCSS là gì?

SCSS là một superset của CSS3. Cung cấp nhiều lựa chọn hơn CSS bằng cách sử dụng quy tắc lồng nhau, các biến, mixins, selector thừa kế, và nhiều hơn nữa.

Ví dụ dưới đây cho bạn thấy hai cách sử dụng CSS và SCSS:

Với CSS:

#body {
margin: 0;
border: 1px solid red;
}
#body p {
font-size: 13px;
font-weight: bold;
color: yellow;
}
#body h {
text-transform: capitalize;
}

Với SCSS:

$colorYellow: yellow;
#body {
margin: 0;
border: 1px solid $colorYellow;
p {
color: $colorYellow;
font: {
size: 13px;
weight: bold;
}
}
h {
text-transform;
}
}

Sự khác biệt giữa CSS và SCSS là gì?

1. Nếu bạn nhìn vào đoạn code trên bạn có thể thấy có một biến 
$colorYellow: yellow;Và biến này được CSS gọi trong chính nó như một giá trị của thuộc tính “color”, hãy xem:

color: $colorYellow;

Như vậy bạn có thể gọi một biến trong CSS của bạn, và sau đó bạn sẽ chỉ làm việc trên các giá trị của biến này để thay đổi giá trị của tất cả các tuỳ chọn sử dụng biến này. Sự khác biệt với CSS cũ là bạn sẽ phải thay đổi giá trị các tuỳ chọn cho mỗi bộ chọn chứ không phải là thay đổi nó một lần cho tất cả các bộ chọn.

2. Nếu bạn so sánh hai đoạn code trên, cả hai đều có 3 selectors, hai trong số đó là selector phụ của selector chính. Trong SCSS những selector phụ có thể được lồng trong các selector chính. Nó làm cho code dễ đọc, viết và duy trì. Vì vậy, nếu bạn viết trong CSS là:

#body {
margin: 0;
}
#body p {
font-size: 12px;
}

thì trong SCSS bạn sẽ viết là:

#body {
margin: 0;
p {
color: $colorYellow;
font-size: 12px;
}
}

3. Bạn có thể nhận thấy có sự giống nhau khi các đoạn code phân chia thành các selector chính và selector phụ. Ví dụ, trong SCSS

font-weighttrở thành selector phụ của selector chính “font” trong CSS:

#body p {
font-size: 13px;
font-weight: bold;
}

trong SCSS:

#body p {
font {
size: 13px;
weight: bold;
}
}

Related Articles

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
  • Tuỳ chỉnh nút Menu cho các giao diện.
  • Tuỳ chỉnh chiều cao tuỳ chọn Hình ảnh trong Module Tuỳ chỉnh
  • Xoá bỏ nút điều hướng trong các mẫu giao diện số 3 – số 4 – số 5
  • Tuỳ chỉnh giao diện cho Mẫu số 18
  • Chuyển đổi hiển thị trong Module Catalog
  • Làm thế nào để tuỳ chỉnh vị trí tiêu đề Module ?
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

  Làm thế nào để ẩn Module từ Menu ứng dụng của bạn ?

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.