Chủ đề nâng cao CSS là gì?

Trong hướng dẫn này, tôi sẽ nói về ba kỹ thuật CSS3 nâng cao

Xem bản trình diễn

Đây là một trang demo duy nhất của tất cả mã tôi sẽ sử dụng trong hướng dẫn này. Nó được xem tốt nhất trên các trình duyệt WebKit (như Google Chrome và Apple Safari) để bạn có thể thấy các thuộc tính hoạt ảnh CSS3

ul:first-child li:nth-child(odd)

1. Bộ chọn nâng cao

Một trong những tính năng quan trọng nhất nhưng ít được thổi phồng của CSS3 là bộ chọn nâng cao mới. Tôi chắc rằng tôi không cần phải nói cho bạn biết lý do tại sao có thể nhắm mục tiêu các phần tử HTML cụ thể mà không phải sử dụng thuộc tính ID lại là một điều tốt. Theo truyền thống, bộ chọn CSS luôn được. ID (

ul:first-child li:nth-child(odd)

ul:first-child li:nth-child(odd)

ul:first-child li:nth-child(odd)

ul:first-child li:nth-child(odd)

Vấn đề với công thức này là gần như mọi phần tử cần phải có một cái móc. Điều này có nghĩa là để hiểu cụ thể những gì bạn đang chọn, phần tử cần phải có ID (nếu đó chỉ là một phần tử) hoặc một lớp (nếu đó là một nhóm phần tử) để trình duyệt biết bạn đang nói về cái gì. Khi bạn bắt đầu làm việc với các bố cục rất phức tạp, số lượng ID và lớp bạn cần thêm vào đánh dấu của mình bắt đầu làm bạn (và các trang web của bạn) chậm lại

Nhập CSS3. Với nhiều lớp giả mới để lựa chọn, đánh dấu và thời gian phản hồi trang của bạn sẽ cảm ơn bạn. Để chứng minh một số bộ chọn mới này, tôi đã đánh dấu một ví dụ đơn giản. hai danh sách không có thứ tự

   
 
First Line
 
Second Line
 
Third Line
 
Fourth Line
 
Fifth Line
 
Sixth Line
 
 
 
First Line
 
Second Line
 
Third Line
 
Fourth Line
 
Fifth Line
 
Sixth Line
 
   

Khối mã sau đây là một số CSS cơ bản chỉ dành cho hình ảnh

Tất cả những gì tôi đã làm là đặt lại lề và phần đệm của mọi thành phần bằng cách sử dụng bộ chọn chung (

ul:first-child li:nth-child(odd)

Bây giờ là lúc để viết bộ chọn nâng cao đầu tiên của chúng tôi. (Đừng sợ. ) Phần đầu tiên của bộ chọn của chúng tôi chỉ nói chọn

ul:first-child li:nth-child(odd)

ul:first-child li:nth-child(odd)

Sau đó, nó tiếp tục chọn các mục danh sách lẻ (thứ nhất, thứ ba, thứ năm, v.v.) trong danh sách không có thứ tự đầu tiên. Như bạn có thể thấy, bằng cách sử dụng kết hợp các lớp giả và bộ chọn phần tử HTML, chúng tôi đã quản lý để chỉ chọn danh sách đầu tiên trong hai danh sách không có thứ tự giống hệt nhau

ul:first-child li:nth-child(odd)

Một cách khác để thực hiện việc này được hiển thị bên dưới, cách này thực hiện tương tự ngoại trừ lần này thực hiện bằng cách chọn

ul:first-child li:nth-child(odd)

ul:first-of-type li:nth-child(odd) 

Khi bạn tiến xa hơn trong việc sử dụng bộ chọn CSS, bạn sẽ thấy rằng có nhiều cách để thực hiện cùng một việc và việc quyết định sử dụng cách nào là tùy thuộc vào bạn. Với danh sách không có thứ tự đầu tiên được chọn, chúng tôi có thể tạo kiểu cho các mục danh sách lẻ (chúng tôi sẽ cung cấp cho chúng một màu nền khác với các mục danh sách khác)

ul:first-child li:nth-child(odd) { background-color: #d2fffe; border: 1px solid #000; }

Tuy nhiên, đó không phải là cách duy nhất để sử dụng

ul:first-of-type li:nth-child(odd) 

Chúng ta cũng có thể sử dụng nó để định kiểu các phần tử riêng lẻ dựa trên vị trí của chúng. Khối mã bên dưới cung cấp cho mục danh sách thứ 5 của danh sách không có thứ tự đầu tiên trên trang web của chúng tôi có nền màu hồng

body > ul:first-child li:nth-child(5) { background: #ffd2d2; }

Xin lưu ý rằng một trong các phần tử đầu vào (_______13_______2) có thuộc tính Boolean là

ul:first-of-type li:nth-child(odd) 

ul:first-of-type li:nth-child(odd) 

 
 Name:  
 Email:  
 
 Message:  
 
 

Khối mã sau đây chỉ là một số kiểu cơ bản cho biểu mẫu web của chúng tôi. Điều này sẽ làm là loại bỏ một số kiểu dáng mặc định trên biểu mẫu và làm nổi các nhãn ở bên trái và các đầu vào ở bên phải

form { clear: both; width: 95%; } form p { margin-bottom: 15px; clear: both; overflow: hidden; } form label { float: left; } form input, form textarea { width: 70%; float: right; border: 1px solid #000; } form textarea { height: 50px; }

Bây giờ chúng ta sẽ tận dụng thuộc tính

ul:first-of-type li:nth-child(odd) 

ul:first-of-type li:nth-child(odd) 

input:disabled { background: #e7e7e7; }

Tiếp theo, chúng ta có một bộ chọn trông có vẻ phức tạp, nhưng nó thực sự khá đơn giản. Bằng cách sử dụng lớp giả

ul:first-of-type li:nth-child(odd) 

ul:first-of-type li:nth-child(odd) 

ul:first-of-type li:nth-child(odd) 

Về cơ bản, điều này sẽ làm là nhắm mục tiêu tất cả các trường biểu mẫu không phải là vùng văn bản

form p *:not(textarea):not(label) { height: 20px; }

Trong thực tế, sẽ hiệu quả hơn nếu sử dụng

ul:first-child li:nth-child(odd) { background-color: #d2fffe; border: 1px solid #000; }

ul:first-of-type li:nth-child(odd) 

Chúng tôi đã đề cập rất nhiều, nhưng chúng tôi vẫn còn hai kỹ thuật nữa để xem xét. Hãy bắt đầu với những

2. Ảnh động

Hoạt hình trên web từ lâu đã là lãnh địa của Flash và JavaScript. Giờ đây, với CSS3, bạn có thể thực hiện các loại hoạt ảnh tương tự chỉ với một vài dòng mã. Để trình bày các kỹ thuật hoạt hình, hãy thêm một phần khác vào đánh dấu của chúng tôi. một div đơn giản không có lớp hoặc ID, và bên trong nó, một

ul:first-child li:nth-child(odd) { background-color: #d2fffe; border: 1px solid #000; }

* { margin: 0; padding: 0; } ul { list-style-type: none; margin: 2%; border: 1px solid #ccc; padding: 5px; width: 44%; float: left; } ul li { margin-bottom: 5px; padding: 2px; }

Vì đó là div đầu tiên của chúng tôi, chúng tôi có thể sử dụng lớp giả

ul:first-child li:nth-child(odd) { background-color: #d2fffe; border: 1px solid #000; }

ul:first-child li:nth-child(odd) { background-color: #d2fffe; border: 1px solid #000; }

* { margin: 0; padding: 0; } ul { list-style-type: none; margin: 2%; border: 1px solid #ccc; padding: 5px; width: 44%; float: left; } ul li { margin-bottom: 5px; padding: 2px; }

ul:first-child li:nth-child(odd) { background-color: #d2fffe; border: 1px solid #000; }

* { margin: 0; padding: 0; } ul { list-style-type: none; margin: 2%; border: 1px solid #ccc; padding: 5px; width: 44%; float: left; } ul li { margin-bottom: 5px; padding: 2px; }

Tôi đang sử dụng ba thuộc tính để xác định hai hoạt ảnh cho hộp (

ul:first-child li:nth-child(odd) { background-color: #d2fffe; border: 1px solid #000; }

ul:first-child li:nth-child(odd) { background-color: #d2fffe; border: 1px solid #000; }

ul:first-child li:nth-child(odd) { background-color: #d2fffe; border: 1px solid #000; }

Thuộc tính

ul:first-child li:nth-child(odd) { background-color: #d2fffe; border: 1px solid #000; }

body > ul:first-child li:nth-child(5) { background: #ffd2d2; }

Hãy khắc phục điều đó bằng cách khai báo các thuộc tính

ul:first-child li:nth-child(odd)

* { margin: 0; padding: 0; } ul { list-style-type: none; margin: 2%; border: 1px solid #ccc; padding: 5px; width: 44%; float: left; } ul li { margin-bottom: 5px; padding: 2px; }

Bây giờ, khi bạn di chuột qua hộp màu xanh của chúng tôi, nền và đường viền sẽ thay đổi và lớn dần. Đó là nó

Chúng tôi không phải thêm bất kỳ mã nào khác, hoạt ảnh sẽ tự động chạy. Chúng ta vẫn chưa hoàn thành, hãy thêm một hoạt ảnh ví dụ nữa vào phần đánh dấu

* { margin: 0; padding: 0; } ul { list-style-type: none; margin: 2%; border: 1px solid #ccc; padding: 5px; width: 44%; float: left; } ul li { margin-bottom: 5px; padding: 2px; }

Tôi đã sử dụng một chút Javascript nội tuyến để khi div được nhấp vào, nó sẽ tự xoay quanh 360 độ (trong sản xuất, bạn sẽ muốn thực hiện việc này một cách kín đáo bằng cách sử dụng các phương thức chọn JavaScript DOM — nhưng điều đó nằm ngoài phạm vi của hướng dẫn này

Tiếp theo đối với CSS, chúng tôi sẽ sử dụng lớp giả

body > ul:first-child li:nth-child(5) { background: #ffd2d2; }

* { margin: 0; padding: 0; } ul { list-style-type: none; margin: 2%; border: 1px solid #ccc; padding: 5px; width: 44%; float: left; } ul li { margin-bottom: 5px; padding: 2px; }

Những điều cần lưu ý về khối mã CSS ở trên là thuộc tính nền sử dụng thuộc tính

body > ul:first-child li:nth-child(5) { background: #ffd2d2; }

body > ul:first-child li:nth-child(5) { background: #ffd2d2; }

3. Truy vấn phương tiện truyền thông

Kỹ thuật CSS3 nâng cao thứ ba và cũng là kỹ thuật cuối cùng mà tôi sẽ thảo luận là truy vấn phương tiện. Họ là ai?

Ưu điểm của điều này là chúng tôi có thể tạo các quy tắc mới về cách hiển thị trang web tùy thuộc vào tình huống của người dùng của chúng tôi. Ví dụ: nếu chiều rộng khung nhìn của họ mỏng hơn 800 pixel, chúng tôi có thể điều chỉnh bố cục cho phù hợp, mang lại cho chúng tôi bố cục thực sự uyển chuyển và linh hoạt. Vì vậy, làm thế nào để chúng ta làm điều đó?

Dễ dàng

* { margin: 0; padding: 0; } ul { list-style-type: none; margin: 2%; border: 1px solid #ccc; padding: 5px; width: 44%; float: left; } ul li { margin-bottom: 5px; padding: 2px; }

Nếu bạn mở bản trình diễn trong trình duyệt web hỗ trợ truy vấn phương tiện, bạn sẽ thấy rằng khi bạn giảm kích thước của trình duyệt, các hộp sẽ thay đổi kích thước, điều này thật tuyệt

Tuy nhiên, sẽ không tuyệt sao nếu khi chiều rộng của trình duyệt giảm xuống, hai danh sách ngừng trôi? . Và CSS cho điều đó như sau

* { margin: 0; padding: 0; } ul { list-style-type: none; margin: 2%; border: 1px solid #ccc; padding: 5px; width: 44%; float: left; } ul li { margin-bottom: 5px; padding: 2px; }

Trong khối mã sau, chúng tôi sẽ làm cho div đầu tiên biến mất nếu chế độ xem nhỏ hơn 800px

* { margin: 0; padding: 0; } ul { list-style-type: none; margin: 2%; border: 1px solid #ccc; padding: 5px; width: 44%; float: left; } ul li { margin-bottom: 5px; padding: 2px; }

Bây giờ khi trình duyệt giảm xuống 800px, hộp màu xanh sẽ biến mất. Chúng tôi thậm chí có thể có nhiều quy tắc

body > ul:first-child li:nth-child(5) { background: #ffd2d2; }

Chúng ta sẽ làm gì khác nếu chiều rộng của trình duyệt bị giảm xuống còn 600px?

* { margin: 0; padding: 0; } ul { list-style-type: none; margin: 2%; border: 1px solid #ccc; padding: 5px; width: 44%; float: left; } ul li { margin-bottom: 5px; padding: 2px; }

Bây giờ, khi bạn thu nhỏ trình duyệt hơn một chút (dưới 600px) — giống như phép thuật — danh sách không có thứ tự thứ hai sẽ biến mất. Đây là một số kiểu khi chiều rộng giảm xuống 400px

ul:first-child li:nth-child(odd)

Tôi hy vọng bạn nhìn thấy tiềm năng của các truy vấn phương tiện, đặc biệt là với số lượng ngày càng tăng của cách mọi người xem trang web (chẳng hạn như thông qua thiết bị di động)

kết thúc

Bây giờ bạn đã biết ba kỹ thuật CSS3 nâng cao. Hãy tự cho mình một cái vỗ nhẹ vào lưng, bạn xứng đáng với điều đó

Điều quan trọng cần lưu ý là mặc dù bộ chọn và truy vấn phương tiện sẽ hoạt động trong hầu hết các trình duyệt hiện đại (Firefox, Safari, Chrome), hoạt hình sẽ chỉ hoạt động trên các trình duyệt dựa trên Webkit như Safari và Chrome

Đọc thêm

• Bộ chọn (thông số W3C)
• CSS Animation (blog của WebKit)
• Truy vấn phương tiện (thông số W3C)
• Truy vấn phương tiện CSS & Sử dụng không gian có sẵn
• 10 thử nghiệm và trình diễn CSS3 thú vị
• Hộp đèn CSS3 ngữ nghĩa
• Ví dụ về CSS3 trong tự nhiên

Nội dung liên quan

• Cách tạo Inset Typography với CSS3
• Ví dụ về CSS3 trong tự nhiên

• Chuyển đổi PSD/HTML. Bố cục web CSS3 thanh lịch và đơn giản
• Các nhà thiết kế web có nên biết HTML và CSS không?
• 100 mẹo và thủ thuật CSS cực kỳ hữu ích
• Lịch sử đặt lại CSS
• Hướng dẫn Toàn diện về Đặt lại CSS
• Kiểu chữ CSS. Kỹ thuật và Thực tiễn Tốt nhất
• 10 Trình tạo Gradient CSS Tốt nhất
• Hướng dẫn về Màu CSS trong Thiết kế Web
• Ebook này sẽ dạy bạn tất cả về CSS Animations

• Dịch vụ thiết kế website
• Cơ quan thiết kế web
• Giá thiết kế web
• Một trang web nên có giá bao nhiêu vào năm 2022?
• Dịch vụ thiết kế blog từng đoạt giải thưởng. Nâng cấp Blog của bạn
• Xây dựng trang web của bạn với một công ty thiết kế web tùy chỉnh đáng tin cậy
• Dịch vụ phát triển trang web thương mại điện tử
• Đại lý thiết kế web B2B
• Thiết kế web dựa trên cơ sở dữ liệu

• Thiết kế web cho công ty khai quật. 5 mẹo hàng đầu (Có ví dụ. )
• 5 mẹo thiết kế web cho người cài đặt hàng rào
• 5 mẹo thiết kế web đơn giản và thành công cho các nhà bán lẻ phụ tùng ô tô
• Lời khuyên cho thiết kế trang web y tế
• Thiết kế trang web y tế từ một cơ quan giành giải thưởng
• Top 10 mẹo thiết kế web hiệu quả cho trung tâm dịch vụ ô tô
• Thiết Kế Web Năng Lượng Tái Tạo. Mẹo cho một trang web tỏa sáng
• Dịch Vụ Thiết Kế Website Bảo Hiểm
• 5 mẹo thiết kế web cho các phòng khám hiếm muộn

Trang web của bạn SEO như thế nào?

Sử dụng công cụ miễn phí của chúng tôi để tính điểm của bạn trong vòng chưa đầy 60 giây