Chia sẻ qua

Hướng dẫn: Thêm CSS tùy chỉnh vào trang web

  • Bài viết

Không gian làm việc Tạo kiểu cho phép chỉnh sửa một số tính năng chủ đề của trang web, chẳng hạn như phông chữ và màu sắc; tuy nhiên, bạn có thể áp dụng các chủ đề CSS tùy chỉnh của riêng mình.

Bạn có thể tạo chủ đề của riêng mình bằng cách xác định tệp CSS tùy chỉnh và tải tệp đó lên trang web của mình.

Trong hướng dẫn này, bạn sẽ tìm hiểu cách:

  • Tải lên tệp CSS tùy chỉnh
  • Chỉnh sửa CSS trong Visual Studio Code dành cho web

Điều kiện tiên quyết

Lưu ý

Bất kỳ chủ đề tùy chỉnh nào bạn tạo đều phải tương thích với Bootstrap v3.

Thêm CSS tùy chỉnh vào trang web của bạn

Video sau đây hướng dẫn cách áp dụng mã CSS tùy chỉnh cho trang web.

Trong ví dụ này, chúng ta sẽ thêm một số tệp CSS tùy chỉnh để thêm hiệu ứng đổ bóng vào các nút trên trang web của mình. Bạn có thể sử dụng tệp CSS tùy chỉnh của riêng mình hoặc sử dụng mẫu được cung cấp.

  1. Để tạo mẫu, trong trình soạn thảo CSS yêu thích của bạn, hãy tạo tệp chủ đề tùy chỉnh button_shadow.css và lưu lại.

    .button1 {
box-shadow: 0 9px 18px 0 #333333, 0 8px 24px 0 #333333;
 }

  2. Truy cập Power Pages.

  3. Chọn trang web bạn muốn thêm chủ đề tùy chỉnh và chọn Chỉnh sửa.

  4. Mở không gian làm việc Tạo kiểu.

  5. Chọn chủ đề và chọn ... (dấu chấm lửng) rồi chọn Quản lý CSS.

    Mở bảng điều khiển quản lý CSS từ không gian làm việc Tạo kiểu.

  6. Trong phần Tùy chỉnh CSS, hãy chọn Tải lên và chọn tệp CSS tùy chỉnh của bạn. Bạn chỉ có thể tải lên một tệp CSS mỗi lần nhưng có thể tải lên nhiều tệp. Nếu nhiều tệp CSS cập nhật cùng một thuộc tính thì các thuộc tính trong tệp CSS ở cuối danh sách sẽ được áp dụng. Bạn có thể điều chỉnh thứ tự của các tệp CSS tùy chỉnh của mình.

  7. Bạn sẽ thấy ngay kết quả cập nhật trên bảng tùy biến trang.

    Hiệu ứng đổ bóng nút từ tệp CSS đã tải lên.

  8. Bạn có thể tắt hoặc di chuyển thứ tự các tệp CSS tùy chỉnh của mình. Tệp được liệt kê cuối cùng sẽ được ưu tiên hơn các tệp khác.

    Tắt hoặc di chuyển thứ tự của tệp CSS .

  9. Bạn có thể chỉnh sửa trực tiếp tệp CSS bằng cách chọn dấu chấm lửng (...) rồi chọn Chỉnh sửa mã. Bước này sẽ mở trình soạn thảo Visual Code dành cho web . Chọn CTRL-S để lưu thay đổi.

    Chỉnh sửa tệp CSS trong Visual Studio Code dành cho web.

  10. Chọn Đồng bộ hóa trong studio thiết kế để cập nhật CSS và xem các thay đổi.

  11. Chọn Xem trước để xem chủ đề tùy chỉnh trên trang web.

Lưu ý

Để xóa hoàn toàn chủ đề tùy chỉnh, hãy xóa bản ghi tệp web trong ứng dụng Quản lý cổng thông tin.