Question 1

Cách hiển thị và ẩn menu thả xuống khi di chuột bằng CSS

Accepted Answer

Trả lời: Sử dụng CSS :hover

Nếu bạn chỉ muốn hiển thị và ẩn menu thả xuống khi di chuột, bạn không cần bất kỳ JavaScript nào. Bạn có thể thực hiện việc này đơn giản bằng cách sử dụng thuộc tính CSS display và :hover.

Ví dụ sau đây sẽ chỉ cho bạn cách triển khai menu thả xuống đơn giản bằng CSS.

Ví dụ





Show Hide Dropdown Using CSS



    
        Home
        About
        
            Products ▾
            
                Laptops
                Monitors
                Printers
            
        
        Contact

Question 2

Tạo danh sách tùy chỉnh ul li với hình ảnh?

Accepted Answer

CSS: UL TÙY CHỈNH BULLET BẰNG HÌNH ẢNH

Khi chúng ta viết mã CSS cho trang web hoặc ứng dụng web, thông thường chúng ta cần cung cấp giao diện tùy chỉnh của đạn trong danh sách UL. Các quy tắc CSS tiêu chuẩn cho chúng ta không có nhiều khả năng để làm điều đó. Chúng ta có các quy tắc CSS như:

list-style – xác định tất cả các thuộc tính cho danh sách UL (từng được liệt kê bên dưới)
list-style-location – xác định vị trí của dấu đầu dòng (điểm đánh dấu) – bên trong hoặc bên ngoài danh sách
list-style-type – xác định nếu chúng ta muốn sử dụng hình tròn, hình vuông vv
list-style-image – đó là những gì chúng tôi quan tâm bây giờ

Vì vậy, chỉ có quy tắc CSS liệt kê danh sách phong cách CSS cho chúng ta khả năng xác định kiểu tùy chỉnh của biểu tượng trong danh sách ul. Ưu điểm của phương pháp này là sự dễ dàng, nhưng nhược điểm là thao tác cứng của hình ảnh đó.

Thứ hai, và theo tôi thì tốt hơn, phương pháp là sử dụng phần tử giả CSS CSS :: before. Tôi sẽ chỉ cho bạn cách sử dụng cả hai phương pháp.

Trước hết, chúng ta phải bắt đầu từ việc tạo hình ảnh. Tôi khuyên bạn nên tạo kích thước tối thiểu 64 x 64 px để chắc chắn rằng nó sẽ được thay thế đúng trên tất cả các độ phân giải màn hình và thiết bị. Tôi đã tạo biểu tượng ul tùy chỉnh của mình trong Inkscape và bạn có thể thấy nó bên dưới:

Phương pháp 1: Quy tắc hình ảnh kiểu danh sách CSS

Hãy tạo một số danh sách UL trong HTML:

Ví dụ


Dog
Cat
Monkey
Lion
Dragonfly

Và thêm mã CSS rất đơn giản này

Ví dụ

.custom-list {
    list-style-image: url(‘img/bullet.png’);
}

Các kết quả:

Chúng ta có thể thấy rằng một cái gì đó đã đi thực sự sai! Để chắc chắn chúng tôi có đạn tùy chỉnh, nhưng chúng tôi mong đợi một cái gì đó tốt hơn nhiều, phải không?

Không có khả năng thay đổi kích thước trong hình ảnh danh sách ul tùy chỉnh CSS, để sử dụng hình ảnh lớn hơn và chất lượng tốt hơn nhưng hiển thị tỷ lệ. Vì vậy, bây giờ chúng ta nên thay đổi kích thước hình ảnh và làm cho nó nhỏ, ví dụ 10 x 10 px. Nhưng kết quả là chúng ta có thể gặp rắc rối trên màn hình HD lớn, vd. Siêu HD.

Kết quả với hình ảnh đã thay đổi kích thước thành 10 x 10 px:

Vâng, bây giờ kích thước là chính xác, nhưng chúng ta có thể thấy rằng chất lượng là kém. Theo tôi, hãy kiểm tra xem phương pháp tốt nhất để làm điều đó

Phương pháp 2: CSS3 Phiên bản phần tử giả `::before` giả cho phong cách tùy chỉnh biểu tượng UL

Như trong phương pháp trước, chúng ta có cùng một danh sách:

Ví dụ


Dog
Cat
Monkey
Lion
Dragonfly

Nhưng chúng tôi viết mã CSS tinh vi hơn, thực hiện toàn bộ phép thuật. Hãy nhớ sử dụng ở đây hình ảnh 64 x 64 px lớn của chúng tôi.

Ví dụ

.custom-list {
    list-style: none;
    padding-left: 0;
}
.custom-list li {
    position: relative;
    padding-left: 20px;
}
.custom-list li:before {
    content: ”;
    width: 10px;
    height: 10px;
    position: absolute;
    background-image: url(‘img/bullet.png’);
    background-size: cover;
    background-position: center;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

Các kết quả:

CSS3 tùy chỉnh danh sách đạn với paraelement

Và như chúng ta có thể thấy trên hình ảnh trên – chúng ta có những biểu tượng tùy chỉnh với chất lượng tốt. Và chúng ta có thể thực hiện bất kỳ thao tác nào theo ý muốn, bởi vì biểu tượng là các yếu tố hoàn toàn độc lập mà chúng ta có thể tạo kiểu theo cách chúng ta muốn.

Điều quan trọng trong mã CSS là gì:

Xóa phần đệm bên trái cho danh sách UL.
Thêm phần đệm bên trái trong phần tử LI. Chúng tôi phải cung cấp không gian trong mỗi yếu tố của danh sách.
Thêm vào vị trí phần tử LI: tương đối, cần thiết để đặt đúng vị trí của :: trước dấu đầu dòng phần tử giả.
Tạo phần tử li :: trước phần tử giả:
Thêm thuộc tính nội dung khác – chỉ với thuộc tính này, nó sẽ xuất hiện.
Thêm một số kích thước, trong ví dụ của tôi 10 × 10 px.
Đặt vị trí thành tuyệt đối – chúng ta phải căn giữa đúng vị trí trong phần tử LI.
Đặt hình nền với các chi tiết cần thiết như vị trí hoặc kích thước.
Đặt vị trí phần tử giả theo quy tắc trái / đỉnh và biến đổi.
KẾT THÚC

Question 3

Làm sao để thay đổi kích thước hình ảnh bằng CSS?

Accepted Answer

Thuộc tính hình ảnh thay đổi kích thước được sử dụng trong web đáp ứng trong đó hình ảnh được thay đổi kích thước tự động để phù hợp với thùng chứa div.Thuộc tính độ rộng tối đa trong CSS được sử dụng để tạo thay đổi kích thước thuộc tính hình ảnh.Thuộc tính thay đổi kích thước sẽ không hoạt động nếu chiều rộng và chiều cao của hình ảnh được xác định trong HTML.

Ví dụ

img {
       max-width: 100%;
       height: auto;
}

Chiều rộng cũng có thể được sử dụng thay vì chiều rộng tối đa nếu muốn.Điều quan trọng là sử dụng height: auto để ghi đè bất kỳ chiều cao = thuộc tính nào có thể có trên ảnh.
Các thuộc tính CSS chiều rộng tối đa và chiều cao tối đa hoạt động rất tốt, nhưng không hỗ trợ nhiều trình duyệt.

Ví dụ


 
     
        cell padding

Một cách sử dụng phổ biến là đặt chiều rộng tối đa: 100%;chiều cao: tự động;vì vậy hình ảnh lớn không vượt quá chiều rộng container của chúng.Một cách khác là sử dụng thuộc tính phù hợp với đối tượng, điều này sẽ phù hợp với hình ảnh, mà không thay đổi tỷ lệ.

Ví dụ


 
     
        cell padding

Question 4

Hướng dẫn cách làm nổi bật nền của hàng trong bảng luân phiên bằng CSS

Accepted Answer

Trả lời: Sử dụng CSS ":nth-child" selector

Bạn có thể sử dụng bộ chọn CSS3 :nth-child để đánh dấu nền của hàng bảng thay thế để tạo bảng sọc vằn. Các pseudo-class :nth-child(N) chấp nhận một đối số N, đó có thể là một từ khóa, một số, hoặc một biểu thức số có dạng xn+y ở đó x và y là các số nguyên (ví dụ 1n, 2n, 3n, 2n+1, 3n-2, ...). Hãy thử ví dụ sau để xem nó hoạt động như thế nào:

Ví dụ





Coloring Alternate Table Row Using CSS



    
        
            Row
            First Name
            Last Name
            Email
        
        
            1
            John
            Carter
            johncarter@mail.com
        
        
            2
            Peter
            Parker
            peterparker@mail.com
        
        
            3
            John
            Rambo
            johnrambo@mail.com
        
        
            4
            Harry
            Potter
            harrypotter@mail.com

Question 5

Độ dài tối đa của tiêu đề và thẻ mô tả trong HTML cho SEO là bao nhiêu

Accepted Answer

Độ dài thẻ tiêu đề HTML

Không có quy tắc cứng và nhanh nào liên quan đến độ dài của thẻ tiêu đề và thẻ mô tả (meta description). Tuy nhiên, độ dài đề xuất của tiêu đề nằm trong khoảng từ 65 đến 70 ký tự bao gồm cả khoảng trắng, vì nhiều hơn độ dài này có thể bị cắt bớt trong kết quả tìm kiếm. Vì vậy, hãy cố gắng giữ độ dài tiêu đề là 65 ký tự bao gồm cả khoảng trắng để hiển thị tốt nhất có thể. Tổng cộng bạn có thể tăng tối đa 70 ký tự, nhưng cố gắng không vượt quá con số này. Bạn có thể sử dụng Công cụ tạo thẻ Meta Title & Meta Description tốt cho SEO để tạo thẻ tiêu đề của mình.

Mẹo: Google gần đây đã tăng độ dài của tiêu đề trong các trang kết quả của công cụ tìm kiếm (SERP) từ 50-60 ký tự lên khoảng 70 ký tự, với điều kiện độ dài của nội dung thẻ tiêu đề không được vượt quá 600 pixel.

Độ dài thẻ mô tả (meta description) HTML

Độ dài đề xuất của mô tả (meta description) nằm trong khoảng từ 150 đến 160 ký tự bao gồm cả khoảng trắng. Bạn thậm chí có thể sử dụng ít ký tự hơn và nó hoạt động tốt nếu mô tả của bạn trông hấp dẫn và đọc tốt hơn nhưng đừng cố tạo mô tả dài dòng không có nhiều ý nghĩa hoặc mô tả có hơn 160 ký tự. Bạn có thể sử dụng Công cụ tạo thẻ Meta Title & Meta Description tốt cho SEO để tạo thẻ mô tả meta.

Ghi chú: Việc tạo tiêu đề và mô tả trang (hoặc "đoạn trích") của Google cho kết quả tìm kiếm là hoàn toàn tự động và có tính đến cả nội dung của trang cũng như các tham chiếu đến trang đó xuất hiện trên web.

Tầm quan trọng của thẻ tiêu đề trong SEO

Tiêu đề cung cấp cho người dùng cái nhìn sâu sắc về nội dung có sẵn trên một trang web. Đây thường là phần thông tin chính được sử dụng để quyết định nhấp vào kết quả nào trong các Trang kết quả của Công cụ Tìm kiếm (SERP).

Đó là lý do tại sao thẻ </code>được coi là yếu tố quan trọng nhất đối với Tối ưu hóa Công cụ Tìm kiếm (SEO), vì vậy hãy đảm bảo mỗi trang trên trang web của bạn có một tiêu đề mô tả và duy nhất.</p> <p>Dưới đây là một số mẹo để tạo tiêu đề của các trang web:</p> <ul> <li>Giữ cho tiêu đề của bạn ngắn gọn và mang tính mô tả có liên quan đến nội dung các trang của bạn.</li> <li>Tránh nhồi nhét từ khóa tức là lặp lại các từ hoặc cụm từ giống nhau nhiều lần.</li> <li>Tránh các tiêu đề lặp lại. Tạo tiêu đề duy nhất cho mỗi trang trong trang web của bạn.</li> </ul> <div class="color-box"> <div class="shadow"> <div class="info-tab tip-icon" title="Lời khuyên hữu ích"><i></i></div> <div class="tip-box"> <p><strong>Mẹo: </strong>Bắt đầu mọi từ chính trong tiêu đề bằng một chữ cái viết hoa; nó sẽ làm cho tiêu đề của bạn đáng chú ý hơn và có thể cải thiện cơ hội được nhấp trong kết quả tìm kiếm.</p> </div> </div> </div> <h2 id="mcetoc_1f5qsj6fc7"><br />Tầm quan trọng của Thẻ mô tả (meta description) trong SEO</h2> <p>Các thẻ <code><meta></code>mô tả được sử dụng để cung cấp một bản tóm tắt ngắn gọn và mô tả nội dung trang web. Công cụ tìm kiếm thường sử dụng mô tả meta của một trang trong các đoạn kết quả tìm kiếm xuất hiện bên dưới tiêu đề trang. Mô tả meta phù hợp có thể giúp cải thiện tỷ lệ nhấp vào trang web của bạn.</p> <p>Dưới đây là một số mẹo để tạo mô tả meta cho các trang web:</p> <ul> <li>Đảm bảo rằng mọi trang trên trang web của bạn đều có mô tả meta.</li> <li>Tạo mô tả ngắn gọn và chất lượng cao mô tả chính xác trang của bạn.</li> <li>Đảm bảo mỗi trang trên trang web của bạn có một mô tả meta khác nhau.</li> </ul> <div class="color-box"> <div class="shadow"> <div class="info-tab note-icon" title="Ghi chú quan trọng"><i></i></div> <div class="note-box"> <p><strong>Ghi chú:</strong> Mặc dù thẻ mô tả meta không có giá trị SEO, nhưng vẫn sử dụng các từ khóa có liên quan trong mô tả meta của bạn có thể giúp tăng cơ hội được nhấp khi trang của bạn xuất hiện trong kết quả tìm kiếm.</p> </div> </div> </div>

Question 6

Cách xóa khoảng trắng thừa bên dưới hình ảnh bằng CSS

Accepted Answer

Trả lời: Sử dụng thuộc tính CSS display

Nếu bạn cố gắng đặt một hình ảnh bên trong một phần tử

có đường viền, bạn sẽ thấy thêm một khoảng trắng (khoảng 3px) ở cuối hình ảnh. Điều này xảy ra bởi vì hình ảnh là một phần tử cấp nội tuyến nên trình duyệt sẽ thêm một số khoảng trắng dưới đường cơ sở để điều chỉnh các phần tử nội tuyến khác.

Cách dễ nhất để loại bỏ vấn đề này là thay đổi giá trị mặc định display của hình ảnh từ nội dòng thành khối, tức là áp dụng kiểu display: block;trên hình ảnh, như được hiển thị bên dưới:

Ví dụ





Remove White Space Below Images

Cách hiển thị và ẩn menu thả xuống khi di chuột bằng CSS

Trả lời: Sử dụng CSS :hover

Ví dụ

Câu hỏi liên quan