Trang chủ
Blogspot Tips

Tăng tốc độ tải blog bằng cách sử dụng tối đa CSS

CSS là một trong những thành phần quan trọng phải có trong blog / website dựa trên HTML hoặc XHTML, nếu Html hoạt động như một trình gọi thì CSS là trình biên dịch của layout hiển thị.

Tối đa hóa việc sử dụng CSS
Tối đa hóa việc sử dụng CSS

Tất cả các yếu tố trong blog / trang web được xác định bởi CSS về màu sắc, nền, vị trí, kích thước, loại phông chữ , v.v. Có thể nói, cả hai (Html + CSS) đều liên quan đến nhau.

Nếu chỉ Html sẽ không đủ để hiển thị trang web, CSS là cần thiết để cải thiện sự xuất hiện của Html. Mặt khác, nếu bạn chỉ sử dụng CSS mà không có (Html làm người gọi) thì một trang sẽ không được hiển thị.

Trang tính kiểu xếp tầng (CSS)
Đó là một quy tắc để sắp xếp một số thành phần trong một trang web để nó có cấu trúc và thống nhất hơn. CSS không phải là một ngôn ngữ lập trình. en.wikipedia.org

Những lý do tại sao bạn nên loại bỏ Jquery

Một trường hợp khác với Jquery, là một thư viện javascript chứa một bộ sưu tập các hàm khác nhau 'sẵn sàng sử dụng' để tạo điều kiện thuận lợi cho việc viết mã JavaScript.

Tất nhiên Jquery rất hữu ích nhưng khi so sánh với Trải nghiệm người dùng (UX) của một trang web, sẽ rất tuyệt nếu bạn phải rời bỏ Jquery vì nó có ảnh hưởng xấu đến UX và SEO, từ góc độ UX thì Jquery làm chậm việc tải blog / websites và về mặt SEO, nó cản trở quá trình hiển thị của rô bốt công cụ tìm kiếm.

Mặc dù có nhiều cách để làm cho Jquery không cản trở SEO nhưng đôi khi điều này khiến Jquery không hoạt động hoàn toàn trên một trang web và ảnh hưởng đến UX của web. Không còn câu hỏi nào nữa!

CSS Setara Jquery

Cách tạo một khung nhìn (chức năng / hiệu ứng thú vị) mà không cần Jquery?

Sau khi phát hành CSS3, chúng ta có thể nói rằng CSS gần như tương đương với Jquery để hiển thị các hiệu ứng Show Hide, Pop Up, Smooth Scroll, v.v.

Nhiều người không biết rằng CSS đã vượt quá mong đợi từ những gì ban đầu chỉ thiết lập bố cục, nền, v.v., cho đến nay nó đã trở thành một thành phần đa năng.

Nếu có sự hỗ trợ của HTML như một trình gọi, CSS có thể tạo ra nhiều chức năng và hiệu ứng đặc biệt khác nhau để tối đa hóa sự xuất hiện của blog / trang web của bạn. Tin hay không thì tùy, giao diện và một số chức năng của blog web này chỉ được xây dựng bằng CSS.

Tối đa hóa việc sử dụng CSS

1. Nén CSS

Trước tiên, hãy giảm kích thước CSS trên blog / trang web của bạn bằng cách hợp nhất mọi thứ trong một dòng như ví dụ bên dưới:


div {
  display: table;
  position: relative;
  padding: 20px 0;
}
h1 {
  display: block;
  margin-bottom: 20px;
  font-size: 25px;
}

Kết hợp tất cả các thuộc tính CSS thành một dòng để trở thành:

div {display: table;position: relative;padding: 20px 0}
h1 {display: block;margin-bottom: 20px;font-size: 25px}

Nếu bạn là một chuyên gia hoặc sử dụng thành thạo CSS, bạn có thể kết hợp tất cả các mã trong một dòng như sau:

div {display: table;position: relative;padding: 20px 0} h1 {display: block;margin-bottom: 20px;font-size: 25px}

2. Sử dụng bộ chọn CSS

Phần thứ hai này là chìa khóa để tạo một hàm tùy chỉnh tương đương với Javascript chỉ sử dụng CSS. Trên bài báo W3Schools.com Có khoảng 55 Bộ chọn CSS, nhưng những gì sẽ được giải thích ở đây chỉ là một số Bộ chọn quan trọng hiếm khi được sử dụng nhưng có vai trò quan trọng trong CSS:

div > p

Hoạt động để chọn tất cả các yếu tố <p> mà chỉ là một dẫn xuất trực tiếp của <div>. Khác với viết div p, viết như thế này chọn tất cả các yếu tố <p> tìm thấy trong <div> bất kể nó có phải là đạo hàm trực tiếp hay không

div + p

Được sử dụng để chọn các phần tử <p> được đặt ngay sau mã <div>, sẽ không hoạt động nếu ở giữa <div> và <p> có mã Html khác, ví dụ về các vị trí đủ điều kiện như sau:

<div></div>
<p>Isi_teks_halaman</p> <!-- Elemen <p> tepat berada di bawah <div> -->/pre>


div + p Nó sẽ không hoạt động nếu nó được viết như thế này:



<div></div>
<h2>Contoh_Heading</h2>
<p>Fill_text_page</p>

Sử dụng nó thay thế div ~ p đối với trường hợp trên.

[attribute=value]

Chỉ chọn các phần tử có thuộc tính được xác định trước, ví dụ: Chúng tôi viết mã CSS và html bên dưới:

<style>
p[style='display:block'] {background: #ea6d23}
</style>

<p>Isi_teks_halaman</p>
<p style='display:block'>Kode CSS diatas hanya akan bekerja pada <p> baris ini yang di beri atribut style='display:block'</p><

:checked

Mã này hoạt động cho các loại đầu vào Hộp kiểm và Radio, trong đó nếu đầu vào được nhấp hoặc được chọn thì mã CSS sẽ hoạt động. Ví dụ sẽ được viết trong một bài báo riêng

:focus

Thường được sử dụng cho đầu vào kiểu textbox hoặc textarea có cùng chức năng, cụ thể là khi đầu vào được nhấp (người dùng viết gì đó vào đầu vào) thì mã CSS sẽ hoạt động. các ví dụ cũng sẽ tiếp theo trong một bài báo riêng

:target

Kode ini ditunjukkan untuk link yang tertarget. contoh jagodesan.com/#header, artinya jika link semisal (dengan akhiran #header dan sebagainya) di klik makan kode CSS akan aktif

:first-of-type

Dành cho các phần tử con đầu tiên cùng loại, ví dụ:

<style>
p:first-of-type {background: #ea6d23}
</style>

<div>
  <p>CSS diatas hanya akan berfungsi pada bagian ini yang merupakan elemen turunan pertama dari jenisnya, jika kode CSS diubah menjadi p:last-of-type maka kode CSS hanya aktif pada <p> paragraf ketiga atau elemen terakhir.</p>
  <p>Contoh paragraf kedua</p>
  <p>Contoh paragraf ketiga</p>
</div>

Với số vốn của một số bộ chọn ở trên, chúng tôi sẽ thực hiện các hướng dẫn khác nhau về cách tạo các chức năng web thú vị chỉ với CSS. Trong phần tiếp theo, chúng tôi sẽ viết một bài hướng dẫn sử dụng CSS Selectors để tạo ra các hàm hoặc hiệu ứng thú vị với các giải thích chi tiết hơn.

Truy cập Bypass Google Account APK để tải file APK nhé