Home
Blogger

Tối Ưu Hóa Tốc Độ Tải Trang Bằng Cách Tối Đa Hóa Việc Sử Dụng 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 có chức năng như một bộ xương thì CSS là bộ da bao bọc bộ xương đó.
Tất cả các yếu tố trên blog / website đều được CSS xác định về màu sắc, nền, vị trí, kích thước, loại phông chữ , v.v. Có thể nói rằng cả hai (Html ​​+ CSS) đều có liên quan đến nhau.

 

Nếu chỉ Html thì không đủ để hiển thị một trang web, CSS là cần thiết để cải thiện sự xuất hiện của Html. Ngược lại, nếu bạn chỉ sử dụng CSS mà không có (Html ​​làm trình gọi), một trang sẽ không được hiển thị.
Cascading Style Sheet (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.

Lý do tại sao bạn nên rời khỏi 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 'sẵn sàng để sử dụng' khác nhau để 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 khỏi Jquery vì nó có ảnh hưởng xấu đến UX và SEO, về mặt UX Jquery làm chậm quá trình tải blog / trang web và về mặt SEO cản trở quá trình hiển thị bởi tìm kiếm robot enggine.
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 Jquery!

Jquery tương đương CSS

Làm cách nào để tạo giao diện (chức năng / hiệu ứng thú vị) mà không cần Jquery?

Sau khi phát hành CSS3, có thể nói 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ừ ban đầu chỉ quản lý bố cục, hình nền, v.v., cho đến nay nó đã trở thành một thành phần đa năng.


Nếu được xử lý đúng cách với sự trợ giúp 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, sự xuất hiện và một số chức năng của web blog này chỉ được xây dựng bằng CSS .

Vậy bạn sẽ làm sao?


Đây là những gì sẽ được thảo luận và chúng tôi sẽ giải thích như thế nào trong bài viết này và trong các bài viết sau.

 

Cách Tối Đa Hóa CSS

1. Nén CSS


Trước tiên, hãy giảm kích thước của CSS trên blog / websie của bạn bằng cách kết hợp 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;
}

Hợp nhất tất cả CSS thành một dòng:

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 thành thạo trong việc sử dụng CSS, bạn có thể kết hợp tất 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 đặc biệt tương đương với Javascript chỉ sử dụng CSS. Trong bài viết của 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 ít được sử dụng nhưng có vai trò quan trọng trong CSS:
  • div > p
    Phục vụ để 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ông giống như viết div p , viết như thế này chọn tất cả các phần tử <p> chứa trong <div>bất kể đó có phải là phái sinh trực tiếp hay không, vui lòng xem ví dụ trên trang này
  • div + p
    Được sử dụng để chọn các phần tử <p> được đặt ngay sau mã <div>, nó sẽ không hoạt động nếu nó ở giữa <div> và <p> có một mã Html khác, ví dụ về các vị trí đáp ứng các yêu cầu như sau: 

    <div></div>
    <p>Điền vào văn bản trang</p> <!-- Thành phần <p> ngay bên dưới <div> -->
  • div + p
    Sẽ không hoạt động nếu nó được viết như thế này: 
    <div></div>
    <h2>Ví dụ về Heading</h2>
    <p>Điền vào văn bản trang</p>
  • [attribute=value]
    Chỉ chọn các phần tử có thuộc tính được chỉ định, 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>Điền vào văn bản trang</p>
    <p style='display:block'>Mã CSS ở trên sẽ chỉ hoạt động trên </p> hàng này là thuộc tính style='display:block' </p>
  • :checked
    Mã này hoạt động cho đầu vào kiểu Hộp kiểm hoặc Radio, trong đó nếu đầu vào được nhấp hoặc chọn, mã CSS sẽ hoạt động. Một 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 vào (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ẽ theo sau một bài viết riêng
  • :target
    Mã này được hiển thị cho các liên kết được nhắm mục tiêu. thí dụ quangsangit.com/#header, có nghĩa là nếu một liên kết chẳng hạn như (với hậu tố #header, v.v.) được nhấp vào, mã CSS sẽ hoạt động
  • :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 ở trên sẽ chỉ hoạt động trong phần này, phần tử dẫn xuất đầu tiên của loại nó, nếu mã CSS được thay đổi thành
    p:last-of-type thì mã CSS chỉ hoạt động trên </p> đoạn thứ ba hoặc phần tử cuối cùng.</p>
     <p>Ví dụ đoạn thứ 2</p>
     <p>Ví dụ đoạn thứ 3</p>
    </div>

Với số vốn của một số bộ chọn ở trên, chúng tôi sẽ tạo ra nhiều hướng dẫn khác nhau để tạo các chức năng web thú vị chỉ với CSS. Trong bài 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 phần giải thích chi tiết hơn.

Post a Comment

© ‧ Quang Sáng Blog. All rights reserved. | Protected By DMCA.

 Developed by Jago Desain