Làm cách nào để thêm một lớp CSS bằng CSS?

Một trong những nhu cầu phổ biến nhất khi chỉnh sửa chủ đề WordPress là thêm có chọn lọc các lớp tùy chỉnh vào các phần tử của bạn để điều chỉnh khía cạnh của chúng một cách nhất quán

cái gì là. lớp học?

Một lớp là một tập hợp các thuộc tính mở rộng kiểu dáng phần tử

Các phần tử HTML có thể được xác định bởi nhiều thuộc tính nhưng khi nói đến CSS, nó thường thuộc về ID và LỚP. Một ID xác định MỘT và chỉ MỘT phần tử trên trang (chẳng hạn như #header, #footer, #content, v.v.) trong khi một lớp có thể được thêm vào một hoặc nhiều phần tử trên mỗi trang (. tiêu đề,. vật dụng,. liên kết ở cuối trang)

Tại sao các lớp học rất hữu ích?

Trong thiết kế web, việc chia sẻ cùng một phong cách trên nhiều yếu tố là rất phổ biến để có một phong cách nhất quán trên trang web của bạn và đây là nơi các lớp học có thể giúp bạn

Việc gán cùng một lớp cho nhiều thành phần trên trang sẽ chia sẻ kiểu lớp trên các thành phần đó đồng thời cung cấp cho bạn khả năng kiểm soát các thuộc tính của lớp từ một điểm duy nhất, nghĩa là nếu bạn thay đổi một trong các thuộc tính của lớp thì điều này sẽ mở rộng cho tất cả các thành phần chia sẻ

Làm thế nào để thêm một lớp học?

Trong một thế giới không có CSS ​​Hero để làm điều này, bạn nên thêm các lớp vào nội dung của mình theo cách thủ công, trong trường hợp xấu nhất, bạn nên tìm hiểu kỹ các tệp chủ đề của mình, tìm mã chịu trách nhiệm hiển thị phần tử mà bạn sẵn sàng thêm lớp vào và . Rủi ro

Làm thế nào để thêm một lớp học?

Với CSS Hero, bạn có thể dễ dàng thêm các lớp vào thành phần mà không cần phải chạm vào bất kỳ tệp chủ đề nào hoặc thêm mã lạ vào nội dung của mình. Ngoài ra, bạn có thể kiểm soát tất cả các lớp của mình ngay từ giao diện CSS Hero. Làm sao?

Kể từ CSS Hero 3, chúng tôi đã bỏ CSS và sử dụng LESSCSS để hỗ trợ plugin của chúng tôi. Từ quan điểm kỹ thuật, LESS là một bộ tiền xử lý CSS, về cơ bản nó có tất cả các tính năng của CSS cộng với một số tính năng hữu ích như biến, quy tắc CSS lồng nhau và tất nhiên là các lớp. Về mặt kỹ thuật, với LESS, bạn có thể thực hiện loại thủ thuật này

.myClass{border:3px solid red;}
.myElement{.myClass();}

Điều này về cơ bản có nghĩa là chúng tôi đang mở rộng. phong cách myElement với. myClass 😍. Đạt được kết quả tương tự theo cách truyền thống sẽ yêu cầu bạn xử lý HTML và chỉnh sửa. myElement như sau

...

Một ví dụ đơn giản

Bây giờ hãy xem cách bạn có thể làm điều này với CSS Hero. Đây là một ví dụ thực tế, trên trang mẫu này, chúng tôi có 5 widget nằm ở hai hàng khác nhau. Ví dụ này là trên Divi và theo mặc định, CSS Hero trên Divi cung cấp các chỉnh sửa cụ thể theo hàng, mục tiêu của chúng tôi là chia sẻ cùng một kiểu trên các tiện ích ở cả hai hàng

Trước hết, hãy chọn thành phần chúng tôi muốn chỉnh sửa, trong trường hợp của chúng tôi là Nội dung mờ

Hãy cố gắng làm cho các Blurb đó đẹp hơn với màu nền, một số phần đệm và bóng tối tinh tế

Giờ đây, chúng tôi đã đồng ý với giao diện của những phần làm mờ đó, chúng tôi lưu trữ tất cả các chỉnh sửa mà chúng tôi đã áp dụng vào Đoạn mã mới bằng cách sử dụng phím tắt Cung cấp đoạn mã trong CSS Hero

Hãy chọn tên cho đoạn trích của chúng ta và cuối cùng thêm một nhóm danh mục, nếu không được cung cấp, đoạn mã sẽ được tải vào thư mục Đoạn trích của tôi có sẵn trong bảng điều khiển đoạn trích

Chúng ta đã hoàn tất, mywidgets hiện đã có trong bảng Snippets của chúng ta, chúng ta có thể tiếp tục và áp dụng nó

Để áp dụng nó, chúng ta có thể chọn chọn một phần tử, đi tới bảng Snippets và áp dụng đoạn mã hoặc chỉ cần nhấp chuột phải vào một phần tử trên trang, chọn ngữ cảnh mà chúng ta muốn áp dụng đoạn mã và bắt đầu

Và Voila

Bây giờ, điều thú vị là những yếu tố đó đang chia sẻ cùng một đoạn mã, do đó chúng tôi có thể cung cấp các chỉnh sửa bổ sung từ cùng một vị trí, bằng cách nào? . Giả sử chúng ta muốn thay đổi màu bóng từ xám sang đỏ vì một lý do kỳ lạ nào đó

Để sửa đổi đoạn mã, hãy đi tới bảng Đoạn mã, chọn đoạn mã bạn muốn chỉnh sửa và nhấp vào Sửa đổi đoạn mã

Bây giờ, chúng tôi đang ở chế độ Chỉnh sửa đoạn mã và chúng tôi có thể cung cấp các chỉnh sửa cho đoạn mã đã chọn, cả thông qua giao diện WYSIWYG hoặc bằng cách sửa đổi mã đoạn mã, ở đây chúng tôi đang thay đổi màu của hộp bóng. Sau khi hoàn tất, hãy nhấn Cập nhật đoạn mã và bạn đã hoàn tất, tất cả các thành phần chia sẻ đoạn mã đó sẽ được cập nhật

Thả Kraken, nhập Đoạn trích tham số

Đoạn trích rất mạnh mẽ, thực sự mạnh mẽ. Giờ đây, bạn đã tự tin hơn một chút với CSS Hero Snippets, đã đến lúc bắt tay vào sử dụng Parametric Snippets. Huh?

Đây là ví dụ điển hình của Đoạn mã tham số

.myTitles(@tint:orange){
color:@tint;
[...]
}

Điều này về cơ bản sẽ tạo kiểu cho tất cả các phần tử chia sẻ. myTitles với thuộc tính màu khớp với tham số @tint mà theo mặc định được đặt thành màu cam. Vì vậy, áp dụng đoạn mã này cho một phần tử như sau

h1{.myTitles();}

Đơn giản là sẽ làm cho tất cả h1s của bạn có màu cam. Không có gì đặc biệt, nhưng nếu chúng tôi cung cấp đoạn mã đó với một tham số thì mọi thứ sẽ thay đổi

h1{.myTitles(blue);}

sẽ làm cho h1s có màu xanh. Bây giờ đó là một ví dụ khá đơn giản, hãy xem một cái gì đó gần với một ví dụ thực tế hơn

.myTitles(@tint:orange,@size:32px){
  color:@tint;
  font-size:@size;
  line-height:@size*1.2;
  padding:@size*1.5;
  margin-bottom:@size;
}

Đoạn mã này sẽ cực kỳ hữu ích để tạo kiểu nhất quán cho tất cả các tiêu đề của bạn bằng cách đặt cho chúng một màu mặc định và tạo kiểu cho tất cả các khoảng cách và số đo theo giá trị @size

Suy nghĩ cuối cùng

Đoạn mã có thể tăng tốc đáng kể quy trình làm việc của bạn khi chỉnh sửa các trang phức tạp với nhiều kiểu lặp lại, việc quản lý tất cả các kiểu phổ biến từ một điểm duy nhất có thể giúp tiết kiệm thời gian rất nhiều trong trường hợp này. Tạo một đoạn mã mới thật dễ dàng, bạn có thể chọn lưu trữ một số phần tử đã chỉnh sửa dưới dạng đoạn mã bằng nút Tạo đoạn mã hoặc tạo một đoạn mã mới từ đầu bằng cách sử dụng tính năng Thêm đoạn mã mới được phát hành trong CSS Hero 3. 4

Tôi có thể thêm lớp vào phần tử bằng CSS không?

Làm cách nào để nhập lớp CSS trong HTML?