CSS Trick: Những Lợi Ích Mà CSS Đem Lại Cho Website
CSS (Cascading Style Sheets) đã thay đổi cơ bản World Wide Web. Trước đây, các hướng dẫn hiển thị cho bố cục, kiểu chữ, v.v. phải được lập trình cẩn thận thành tài liệu HTML của trang web, nhưng giờ đây, ngôn ngữ bảng định kiểu có thể thực hiện điều đó trong một khoảng thời gian ngắn hơn nhiều và đã biến phương pháp không linh hoạt trước đó thành một thứ. của quá khứ. Các phần tử HTML hướng về hiển thị đã được coi là lỗi thời kể từ khi HTML5 xuất hiện – nội dung và bản trình bày hiện được xử lý riêng biệt.
CSS đang được phát triển đều đặn như là ‘ tiêu chuẩn”, mở ra nhiều khả năng thiết kế linh hoạt và phức tạp, nhưng đổi lại, nó ngày càng trở nên phức tạp hơn để giữ một cái nhìn tổng quan. Tại đây bạn sẽ tìm thấy những thủ thuật css thú vị và hữu ích nhất, bao gồm các đoạn CSS tương ứng.
100 Thủ thuật CSS giúp bạn làm đẹp Website
Tạo Numbering headings
Nếu bạn đã thêm các tiêu đề và tiêu đề phụ khác nhau trong tài liệu HTML của mình và đánh số chúng trước đó, có thể bạn đã thực hiện việc này theo cách thủ công hoặc bằng cách sử dụng tập lệnh. Nhưng thay vào đó, bạn có thể chỉ cần sử dụng CSS và để ngôn ngữ bảng định kiểu thực hiện việc đếm. Thủ thuật CSS cũ này, được hỗ trợ bởi tất cả các trình duyệt hiện tại, có thể được sử dụng với đoạn mã CSS sau:
#Heading { counter-reset: heading; } h1:before { content: counter(heading)") "; counter-increment: heading; } h1 { counter-reset: subheading; } h2:before { content: counter(heading)"." counter(subheading)") "; counter-increment: subheading; } body{ font-family: courier new; }
Ẩn các yếu tố theo cách thân thiện với SEO
Cố gắng ẩn nội dung của tài liệu HTML bằng các lệnh như display: none; hoặc khả năng hiển thị: bị ẩn , không hoạt động tốt với các công cụ tìm kiếm . Mặc dù việc sử dụng quá nhiều không được khuyến khích, nhưng đoạn mã sau cung cấp một cách tuyệt vời để giải quyết hai yếu tố này một cách khéo léo:
.hidden { position: absolute; top: -9999px; left: -9999px; }
Tạo text shadows
Shading can be produced in texts using graphic programs, but this requires the necessary know-how as well as preventing the content from being legible for search engines. Ever since version 3 of the style sheet language, there have been several CSS effects which lead to attractive results when combined together and do not alter the underlying text elements. The following CSS tip demonstrates the shading option from the style sheet language:
p { font-size: 50pt; font-family: sans-serif; text-shadow: 10px 11px 18px rgba(300, 180, 100, 1), -10px -11px 18px red; }
Với sự trợ giúp của mã này, các phần tử <p> cũng có thể được xác định để chúng có hai bóng. Con số này có thể được tăng lên, nhưng hãy đảm bảo rằng bạn luôn sử dụng dấu phẩy để phân tách. Hai phần thông tin đầu tiên xác định vị trí của bóng – đầu tiên là tọa độ X và sau đó là tọa độ Y. Phần thông tin thứ ba xác định kích thước. Ở vị trí cuối cùng, bạn có thể chỉ định màu của bóng, bằng chỉ báo RGBA ( 300, 180, 100, 1 ) như ở hàng đầu tiên hoặc tuyệt đối như ở hàng thứ hai ( đỏ ). Ví dụ cho thấy nó trông như thế nào sau khi được áp dụng:
Thay đổi các phần tử trang web bằng bộ lọc CSS
CSS không chỉ là một giải pháp thay thế tốt cho Photoshop khi nói đến việc tạo bóng; ngôn ngữ bảng định kiểu cũng đi kèm với các hiệu ứng bộ lọc hữu ích , tương tự như của các chương trình chỉnh sửa hình ảnh.
Đây là cách đồ họa, hình nền, văn bản và video có thể được điều chỉnh một cách sáng tạo bằng cách tăng độ sáng, thay đổi độ tương phản hoặc sử dụng thang độ xám. Các tùy chọn bộ lọc có sẵn trong hầu hết các trình duyệt hiện đại (ngoại trừ Internet Explorer). Bạn có thể xem cú pháp của các hiệu ứng CSS này trong ví dụ về bộ lọc thang độ xám:
.grayscale { -webkit-filter: grayscale(1); filter: grayscale(1); }
Bộ lọc được chỉ định (thang độ xám trong trường hợp này), được hiển thị trong ngoặc đơn và đứng sau giá trị cụ thể, xác định độ mạnh của bộ lọc – trong ví dụ này, giá trị (1) tương ứng với 100%.
Các tính năng bổ sung có thể hữu ích:
Lọc
|
Sự mô tả
|
Giá trị
|
mờ (VALUE)
|
Tiêu điểm mềm
|
Bán kính tính bằng pixel
|
độ sáng (VALUE)
|
độ sáng
|
Tiêu chuẩn: 1, sáng:> 1, tối: <1
|
độ tương phản (VALUE)
|
Tương phản
|
Chuẩn: 1, tăng:> 1, giảm: <1
|
đảo ngược (VALUE)
|
Đảo ngược màu sắc
|
Giá trị 1: đảo ngược hoàn toàn
|
độ mờ (VALUE)
|
Độ mờ
|
Giá trị lớn nhất: 1 (phần tử hoàn toàn biến mất)
|
bão hòa (VALUE)
|
Sättigung
|
Chuẩn: 1, tăng:> 1, giảm: <1
|
nâu đỏ (VALUE)
|
Màu nâu đỏ
|
Giá trị tối đa: 1 (tương ứng với tông màu Sepia là 100%)
|
Điều chỉnh tối ưu chú thích hình ảnh
Không có bất kỳ quy tắc cụ thể nào cần tuân thủ khi nói đến các đoạn văn bản mô tả được đặt bên dưới hình ảnh. Căn giữa chú thích trông đẹp hơn khi mô tả không dài hơn một dòng; nếu không nó có thể trông luộm thuộm.
Mặt khác, việc sử dụng căn lề trái cho phụ đề ngắn cũng không được khuyến khích. Giải pháp là cung cấp thông tin riêng biệt trong phần tử vùng chứa <figure> cũng như trong phần tử <figcaption> vì cả hai đều được sử dụng làm tiêu chuẩn khi nói đến chú thích hình ảnh. Đây là đoạn CSS tương ứng:
figure { text-align: center; } figcaption { display: inline-block; text-align: left; }
Thủ thuật CSS này khiến chú thích hình ảnh được căn trái theo định nghĩa, nhưng nó thực sự được hiển thị ở trung tâm do thông tin khối nội tuyến , có hiệu lực khi đoạn văn bản không bao phủ hết chiều dài của hình ảnh.
Nhấn mạnh chữ cái đầu tiên trong đoạn trích
Với sự trợ giúp của các lớp giả, có thể nhấn mạnh các phần tử HTML cụ thể đơn lẻ, chẳng hạn như chữ cái đầu tiên của đoạn văn. Với :: chữ cái đầu tiên, bạn có thể dễ dàng thực hiện lệnh này, lệnh này thường thấy trong các câu chuyện, đặc biệt là truyện cổ tích:
p{ font-family: "bookman old style" } p:first-child::first-letter{ font-family: "papyrus"; font-size: 25px font-weight: bold }
Trong đoạn mã cụ thể này, họ phông chữ được sử dụng là Papyrus (cho chữ cái đầu tiên) và Bookman Old Style (cho phần còn lại của văn bản). Kết quả là:
Sử dụng hiệu ứng thị sai
Nhiều trang web hiện đại được xây dựng dựa trên hiệu ứng thị sai, mà khách truy cập sẽ kích hoạt khi cuộn. Đây là nơi nền di chuyển với tốc độ chậm hơn so với nền trước và do đó tạo ra hiệu ứng 3D. Hiệu quả đạt được khi sử dụng JavaScript hoặc jQuery. Thủ thuật CSS3 sau đây cho thấy cách bạn có thể kết hợp cuộn thị sai vào trang web của mình chỉ bằng cách sử dụng ngôn ngữ bảng định kiểu:
p { width: 100%; margin: auto; font-size: 50px; transform: scale(.5); font-family: courier new; font-weght: bold; } div { background-image: url("URL DES HINTERGRUNDBILDES"); background-attachment: fixed; transform: scale(1.25);} body { height: 100%; overflow: scroll; }
Sử dụng tham số background-image: url , bạn có thể chỉ định URL của hình nền. Các giá trị được sử dụng ở đây liên quan đến kiểu chữ và kích thước phần tử có thể được định cấu hình riêng.
Đánh dấu các trường biểu mẫu bắt buộc
Bạn có thể tối ưu hóa các biểu mẫu được nhúng trong trang web của mình bằng cách sử dụng : bắt buộc và : tùy chọn . Cả hai lớp giả đều cho phép màu sắc cho biết trường biểu mẫu nào phải được điền và trường nào là tối ưu. Đoạn mã CSS tương ứng trông giống như sau:
:required { border: 1px solid red; } :optional { border: 1px solid black; }
Trong trường hợp này, các trường bắt buộc có đường viền màu đỏ trong khi các trường tùy chọn được hiển thị bằng khung đen trơn:
Tạo dấu đầu dòng có hình tam giác
Nếu bạn có danh sách không có thứ tự trong tài liệu HTML của mình, bạn không phải lúc nào cũng cần sử dụng các dấu đầu dòng tròn tiêu chuẩn. Với thủ thuật CSS sau đây, bạn có thể dễ dàng tạo các dấu đầu dòng hình tam giác:
ul { margin: 0.75em 0; padding: 0 1em; list-style: none; } li:before { content: ""; border-color: transparent #111; border-style: solid; border-width: 0.35em 0 0.35em 0.45em; display: block; height: 0; width: 0; left: -1em; top: 0.9em; position: relative; }
Kết quả sẽ như thế này:
Kết
Như vậy trong bài viết này chúng tôi đã giúp bạn hiểu hơn những lợi ích mà CSS mang lại. Chúc các bạn có thể tận làm đẹp trang web với CSS này nhé. Nếu bạn tham khảo mọi bài viết trên https://thietkewebcantho89.com/, hoặc https://thietkewebcantho89.com/thu-thuat-css/ bạn nhé
