Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
10 Ví Dụ CSS Cơ Bản Dành Cho Bạn Mới Lập Trình

10 Ví Dụ CSS Cơ Bản Dành Cho Bạn Mới Lập Trình


Ngày 24 Tháng 1 Năm 2021

Đố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é!

Các Ví Dụ CSS Cơ Bản Dành Cho Bạn Mới

Trước khi đi vào ví dụ thì mình có một số chú ý sau là để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x hay nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Nếu file là SCSS thì bạn có thể chuyển sang CSS ở đây nhé : SCSS to CSS. Nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha.

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ọn placeholder của ô input loại email.
  • input[type="text"]::placeholder: Chọn placeholder của ô input loại chữ thông thường.
  • input[type="tel"]::placeholder: Chọn placeholder củ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

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ữu ích dành cho việc phát triển, thiết kế web 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ẻ!