Các trình duyệt web và trang web được yêu thích với CSS bên ngoài, vì các trang web chứa nhiều thuộc tính và lớp khác nhau được cho là sẽ được cập nhật và điều tương tự sẽ được phản ánh trong tất cả các trang còn lại trong tương lai
Email sử dụng CSS nội tuyến, chúng dành riêng cho một mẫu email cụ thể. Do đó, tốt hơn hết là giữ chúng Nội tuyến hoặc Nội bộ
CSS nội bộ hoặc nội tuyến trong email?
Giả sử, một người đang tham gia xây dựng mẫu email được cho là sẽ được sử dụng cho nhiều chiến dịch email hoặc ứng dụng khách. Trong trường hợp đó, mã sẽ được chỉnh sửa thường xuyên cho một số điều kiện nhất định và đặc biệt là khi khung được thực hiện trong CSS. Ở đây, thứ tốt nhất có thể được sử dụng là CSS nội bộ vì nó mang lại sự dễ dàng khi chỉnh sửa mã
Tuy nhiên, nếu mẫu email dành cho chiến dịch một lần thì CSS nội tuyến chắc chắn sẽ là một lựa chọn lý tưởng. Nếu bạn là nhà phát triển web mong muốn viết mã trong email, thì bạn chắc chắn có thể chọn Internal CSS và sau đó sử dụng công cụ nội tuyến cho cùng
Tại sao nội tuyến?
Mã hóa email bao gồm CSS và HTML. Các kiểu nội tuyến di chuyển CSS và các hướng dẫn định dạng được liên kết từ khối bên của email sang phần nội dung của HTML. Hầu hết các ứng dụng email ngày nay thích CSS là nội tuyến. Và, hầu hết các ESP như Mailchimp hoặc Campaign Monitor sẽ nội tuyến CSS trước và sau khi được nội tuyến, nó sẽ phân phối cho người đăng ký
Mặc dù phương pháp tốt nhất để mã hóa email có thể khác nhau nhưng số lượng cơ bản thiết kế chính của email vẫn chưa được sửa đổi. Trong vài năm gần đây, chúng ta đã chứng kiến nhiều sự chuyển đổi trong các phiên bản của Hotmail, Google và Yahoo.
Để có được tính nhất quán của thiết kế trên các môi trường email khác nhau, CSS ở dạng nội tuyến là tùy chọn tốt nhất mà người dùng có thể chọn. Nếu bạn đang tìm kiếm sự hỗ trợ tốt nhất trong Gmail và Outlook 2007, Inline CSS hóa ra là lựa chọn tốt nhất
Hơn nữa, CSS nội tuyến an toàn nhất khi đảm bảo hiển thị tính tương thích trên các ứng dụng email khác nhau. Một trong những lợi thế lớn nhất do kiểu nội tuyến mang lại là ứng dụng trực tiếp của nó vào các phần tử HTML. Nó được áp dụng trực tiếp cho các phần tử HTML trong mỗi dòng của HTML
Muốn tìm hiểu cách ghi đè các kiểu nội tuyến bằng CSS và một số thủ thuật để nâng cao trải nghiệm viết mã Email của bạn ???
CSS nội tuyến là khi bạn viết kiểu cho phần đồ họa đã nói ở cùng một dòng khi bạn viết mã trong. Đây là một phương pháp tốt để mọi người sử dụng khi họ chỉ đang cố gắng thay đổi thứ gì đó theo một kiểu cụ thể của div. Điều chính mà chúng ta phải nghĩ đến khi tạo CSS nội tuyến là bất cứ điều gì chúng ta thay đổi, nó sẽ làm hỏng CSS trên các biểu định kiểu mà bạn đã tạo. Đây rất có thể là một việc làm tồi tệ bởi vì khi bạn bắt đầu tạo một thứ khác cần có các tính năng giống như kiểu mới mà bạn đã tạo nội tuyến. ví dụ: nếu tôi định tạo một đoạn cần có văn bản màu xanh và sau đó chúng tôi tạo một đoạn khác cần có văn bản màu đỏ nhưng sau đó chúng tôi cần một đoạn khác cần có văn bản màu xanh và chúng tôi đã thực hiện tất cả nội dung này. Điều này trở thành một vấn đề lớn đối với chúng tôi bởi vì khi chúng tôi làm cho đoạn thứ hai có màu xanh lam, chúng tôi cần đặt các kiểu nội tuyến trong mỗi lần. vì vậy sẽ hiệu quả hơn rất nhiều khi đơn giản tạo một lớp mới cho một đoạn màu xanh và một đoạn màu đỏ. ví dụ đây là kiểu nội tuyến cho đoạn màu xanh [hãy nhớ rằng thẻ phải kết thúc bằng
Đây là kết quả của mã này
Điều này sẽ làm cho văn bản đó trở thành màu xanh và đó là những gì chúng tôi muốn có nhưng nếu sau đó ở dòng tiếp theo, chúng tôi sẽ thực hiện điều này
[ nhớ là thẻ phải kết thúc bằng
Đây là kết quả của việc này
Điều này sẽ đơn giản làm cho văn bản chuyển sang màu đỏ. Ở dòng tiếp theo, chúng ta có thể đơn giản sao chép và dán đoạn màu xanh nhưng nếu chúng ta phải làm cho đoạn văn bản màu xanh ở nửa trang khoảng 500 dòng mã thì chúng ta sẽ không nhớ mã ở đâu.
CSS nội bộ
Internal CSS is when you use the tags at the top of the HTML document [or PHP]. This is again not the proper practice that we should be using when coding web sites for clients. This is because we are making the files larger than they should be. Reasons why we would use Internal CSS is if we are going to try a style on something really quick but we have no real reason to place it on our style sheets. In the future you might end up using it on a different page of your web and when that happens you will not be able to use it as it is not linked to that page as a style sheet. At this point we will need to move it into a style sheet and make sure it is all linked. A good and simple example will be again a paragraph that we have made for that page that just needs to be blue and another needs to be red. For example:
màu xanh da trời{
màu phông chữ. màu xanh da trời;
}
màu đỏ{
màu phông chữ. màu đỏ;
}
hello blue [các bạn nhớ là thẻ phải kết thúc bằng
hello red [nhớ là thẻ phải kết thúc bằng
Đây là kết quả
Như bạn có thể thấy tất cả điều này sẽ hoạt động tốt nhưng nếu tôi tạo một trang web khác thì đơn giản là tôi sẽ phải đặt trang này trên một biểu định kiểu thay vì đặt nó trên cùng một trang HTML [hoặc PHP]
CSS bên ngoài
Đây là khi chúng tôi đặt tất cả CSS của mình trên biểu định kiểu CSS bên ngoài. Đây là phương pháp hay nhất đối với chúng tôi với tư cách là lập trình viên vì chúng tôi có thể đặt tất cả CSS bên ngoài và không phải lo lắng về việc nó không hoạt động trên các trang khác nhau. Chúng ta có thể đơn giản liên kết tất cả các Biểu định kiểu bằng một dòng html đơn giản giống như
đây là một liên kết đơn giản đến biểu định kiểu CSS của tôi đã nhập bootstrap vào trang web của tôi và cho phép tôi tạo một trang web có kích thước lại mọi thứ để phù hợp với kích thước của màn hình mà họ đang xem trên đó. Vì vậy, các biểu định kiểu bên ngoài là nơi bạn muốn đến nếu bạn đang phát triển web. Đây là một ví dụ mã hóa về kiểu dáng CSS bên ngoài
[Trong biểu định kiểu CSS của tôi]
màu xanh da trời{
màu phông chữ. màu xanh da trời;
}
màu đỏ{
màu phông chữ. màu đỏ;
}
[Và bây giờ trên trang html của tôi, tất cả những gì tôi phải đặt trên đó]
hello blue
[các bạn nhớ là thẻ
phải kết thúc bằng
nhưng mình không làm được trên Word nên phải cho các bạn xem thế này. ]hello red
[nhớ là thẻ
phải kết thúc bằng
nhưng mình không làm được cái này trên Word báo nên phải cho các bạn xem thế này. ]Đây là kết quả
Như bạn có thể thấy từ đoạn mã tôi đã nhập, tôi chỉ phải viết tổng cộng khoảng 5-6 dòng mã vì tôi đã tạo một biểu định kiểu bên ngoài. Điều này sẽ làm cho mã của chúng ta trông đơn giản hơn rất nhiều và giữ cho mã của chúng ta gọn gàng hơn