Đối với việc học một ngôn ngữ lập trình nào đó thì việc thực hành dựa trên những kiến thức bạn đã biết là một điều hết sức cần thiết. Do đó vài viết này mình sẽ đưa ra những hướng dẫn, ví dụ cụ thể việc sử dụng CSS trong quá trình phát triển web. Nào chúng ta hãy cùng nhau đi vào tìm hiểu nhé!
Tóm Tắt
Các Ví Dụ CSS Cơ Bản Dành Cho Bạn Mới
Cách Disable Text Selection CSS
Vì một lý nào đó bạn không muốn người dùng có thể sao chép nội dung văn bản trên trang web của mình thì chúng có thể sử dụng thuộc tính user-select: none; trong CSS. Và để hiểu rõ hơn bạn xem ví dụ sau đây nhé:
See the Pen khong cho phep text-select by haycuoilennao19 (@haycuoilennao19) on CodePen.
Nguồn
Cách Align Placeholder Text CSS3
Chúng ta có thể sử dụng thuộc tính quen thuộc là text-align để căn chỉnh vị trí placeholder trong ô input. Nhưng theo mình nghĩ thì ở đây việc quan trọng là phải làm sao có thể gọi được đúng ô input mà mình mong muốn bằng CSS để thiết lập style cho nó. Và cách gọi sẽ như sau nhé:
input[type="email"]::placeholder: Chọnplaceholdercủa ô input loại email.input[type="text"]::placeholder: Chọnplaceholdercủa ô input loại chữ thông thường.input[type="tel"]::placeholder: Chọnplaceholdercủa ô input loại điện thoại.
Với các loại ô input khác bạn cứ gọi theo cách trên và chỉ thay thế giá trị type là được nhé! Và bây giờ chúng ta hãy xem ví dụ dưới đây nhé:
See the Pen Căn chỉnh vị trí placeholder by haycuoilennao19 (@haycuoilennao19) on CodePen.
Nguồn
Cách List Style Image Position
Thông thường khi bạn sử dụng thẻ ul, li để tạo danh sách thì chúng ta sẽ có dấu mặc định là chấm tròn. Để dễ hình dung bạn xem ví dụ dưới đây nhé:
See the Pen vi du về danh sách by haycuoilennao19 (@haycuoilennao19) on CodePen.
Bây giờ chúng ta sẽ thay thể những dấu chấm tròn mặc định bằng hình ảnh thông qua việc sử dụng CSS thông qua vi dụ dưới đây nhé:
See the Pen thiet ke style cho the danh sach by haycuoilennao19 (@haycuoilennao19) on CodePen.
Nguồn
Cách Tạo CSS Drop Cap
Thông thường khi bạn đọc báo thì sẽ thấy ký tự đầu tiên của nội dung thường được viết lớn hơn cũng như mang màu sắc khác so với các chữ còn lại nhằm thu hút sự chú ý của người đọc cũng như làm cho bài viết được nổi bật hơn. Phần này chúng ta sẽ đi vào tìm hiểu cách thiết kế style như vậy thông qua CSS nhé.
Việc qua trọng trong cách này là chúng ta sẽ sử dụng ::first-letter để lấy ký tự đầu tiên trong văn bản. Ví dụ khi bạn muốn lấy ký tự đầu tiên trong thẻ <p> thì ta sẽ gọi p::first-letter. Và để dễ hình dung hơn bạn xem ví dụ sau đây nhé:
See the Pen thiet lap style cho ky tu dau tien by haycuoilennao19 (@haycuoilennao19) on CodePen.
Nguồn
Cách Sử Dụng nth-child Selector CSS
Khi bạn muốn gọi một đối tượng con bằng cách xác định vị trí của nó thì ta có thể sử dụng công thức tổng quát là:
:nth-child(Vị trí phần tử){
(Thiết lập style CSS)
} Và để hiểu rõ hơn thì bạn xem ví dụ sau nhé:
See the Pen chon phan tu con xac dinh by haycuoilennao19 (@haycuoilennao19) on CodePen.
Ngoài ra nếu bạn muốn thiết lập style dựa theo vị trí chẵn hay lẻ thì ta có thể sử dụng cách gọi như sau:
- Vị trí chẵn:
nth-child(even) - Vị trí lẻ:
nth-child(odd)
Và để hiểu rõ hơn bạn xem ví dụ sau nhé:
See the Pen thiet lap style cho vi tri chan by haycuoilennao19 (@haycuoilennao19) on CodePen.
Nguồn
Cách Tạo Thumbnail Image CSS
Thumbnail là một hình ảnh thu nhỏ để đại diện cho một hình ảnh với kích thước lớn trong website giúp giảm thời gian tải cho trang web. Bây giờ chúng ta sẽ đi vào tạo một thumbnail bằng hai thuộc tính cơ bản border, padding trong CSS nhé:
See the Pen thumbnail cho hinh anh by haycuoilennao19 (@haycuoilennao19) on CodePen.
Tiếp theo chúng ta sẽ tạo hiệu ứng hover giúp làm nó nổi bật hơn thông qua ví dụ dưới đây nhé:
See the Pen heiu ung hover cho thumbnail by haycuoilennao19 (@haycuoilennao19) on CodePen.
Nguồn
Cách Tạo Blurry Text Bằng CSS
Trong phần này chúng ta sẽ đi vào tìm hiểu cách tạo blurry text bằng thuộc tính text-shadow trong CSS. Để hiểu rõ hơn bạn xem ví dụ dưới đây nhé:
See the Pen cách tạo blurry text by haycuoilennao19 (@haycuoilennao19) on CodePen.
Ngoài ra bạn cũng có thể sử dụng thuộc tính filter để tạo hiệu ứng trên như ví dụ dưới đây nhé:
See the Pen tao blurry text voi filter by haycuoilennao19 (@haycuoilennao19) on CodePen.
Nguồn
Cách Tạo Animation Filled Text CSS
Phần này mình sẽ giới thiệu đến bạn cách làm hiệu ứng chuyển động cho chữ trong trang web giúp thu hút sự chú ý của người dùng hơn bằng việc kết hợp một số thuộc tính CSS như là background-clip, background-position, background-image... Để hiểu rõ hơn bạn xem ví dụ sau đây nhé!
See the Pen hiệu ứng chuyển động cho chữ by haycuoilennao19 (@haycuoilennao19) on CodePen.
Nguồn
Cách Thiết Kế hr Style CSS
Phần ví dụ này chúng ta sẽ đi vào ví dụ về thiết kế style cho thẻ hr nhé!
See the Pen thiet ke style hr by haycuoilennao19 (@haycuoilennao19) on CodePen.
Nguồn
Cách Remove Textbox Border CSS
Nhiều khi chúng ta muốn loại bỏ những border của ô input và không hiển thị outline khi người dùng focus vào nó thì chúng ta có thể làm như đoạn mã bên dưới đây nhé:
See the Pen loai bo border trong o input by haycuoilennao19 (@haycuoilennao19) on CodePen.
Nguồn
Bài viết liên quan:
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những ví dụ học html css và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!
