Dưới đây là một số ví dụ CSS đơn giản để chỉ cho bạn cách thực hiện một số thay đổi kiểu cơ bản trên trang web của bạn.

1. Mã CSS cơ bản để định dạng đoạn văn dễ dàng

Tạo kiểu bằng CSS có nghĩa là bạn không phải chỉ định kiểu mỗi khi tạo phần tử. Bạn chỉ có thể nói “tất cả các đoạn văn phải có kiểu dáng cụ thể này” và bạn đã sẵn sàng.

Giả sử bạn muốn mọi đoạn văn (<p>, một trong những thẻ HTML mà mọi người nên biết) lớn hơn bình thường một chút. Và với văn bản màu xám đậm, thay vì màu đen.

Mã CSS cho điều này là:

p { font-size: 120%; color: dimgray; }

Giản dị! Bây giờ, bất cứ khi nào trình duyệt hiển thị một đoạn văn, văn bản sẽ kế thừa kích thước (120 phần trăm bình thường) và màu sắc (“dimgray”).

2. Ví dụ CSS để thay đổi trường hợp ký tự

Bạn muốn tạo chỉ định cho các đoạn văn phải viết hoa nhỏ? Một mẫu CSS cho điều đó sẽ là:

p.smallcaps { font-variant: small-caps; }

Để tạo một đoạn văn hoàn toàn bằng chữ hoa nhỏ, hãy sử dụng một thẻ HTML hơi khác. Đây là những gì nó trông giống như:

<p class="smallcaps">Your paragraph here.</p>

Thêm dấu chấm và tên lớp vào một phần tử chỉ định kiểu con của phần tử đó được xác định bởi một lớp. Bạn có thể làm điều này với văn bản, hình ảnh, liên kết và bất kỳ thứ gì khác.

Nếu bạn muốn thay đổi một tập hợp văn bản thành một trường hợp cụ thể, hãy sử dụng các ví dụ mã CSS sau:

text-transform: uppercase; text-transform: lowercase; text-transform: capitalize;

Cái cuối cùng viết hoa chữ cái đầu tiên của mỗi câu.

3. Dễ dàng thay đổi màu liên kết CSS

Thay đổi kiểu không giới hạn ở các đoạn văn. Có bốn màu khác nhau mà một liên kết có thể được chỉ định: màu tiêu chuẩn của nó, màu đã truy cập, màu di chuột của nó và màu hoạt động của nó (mà nó hiển thị khi bạn nhấp vào nó). Sử dụng mã CSS mẫu này:

a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; }

Với các liên kết, mỗi “a” được theo sau bởi dấu hai chấm, không phải dấu chấm.

Mỗi khai báo đó sẽ thay đổi màu của một liên kết trong một ngữ cảnh cụ thể. Không cần phải thay đổi lớp của một liên kết để làm cho nó thay đổi màu sắc.

4. Loại bỏ các gạch dưới liên kết bằng CSS mẫu này

Trong khi văn bản được gạch chân chỉ ra rõ ràng một liên kết, đôi khi nó trông đẹp hơn nếu loại bỏ phần gạch chân đó. Điều này được thực hiện với thuộc tính “text-decoration”. Ví dụ CSS này cho thấy cách xóa gạch chân trên các liên kết:

a { text-decoration: none; }

Bất kỳ thứ gì có thẻ liên kết (“a”) sẽ không được gạch chân. Bạn muốn gạch dưới nó khi người dùng di chuột qua nó? Chỉ cần thêm:

a:hover { text-decoration: underline; }

Bạn cũng có thể thêm trang trí văn bản này vào các liên kết đang hoạt động để đảm bảo gạch dưới không biến mất khi liên kết được nhấp vào.

5. Tạo nút liên kết bằng mã CSS

Bạn muốn thu hút nhiều sự chú ý hơn đến liên kết của mình? Nút liên kết là một cách tuyệt vời để sử dụng nó. Cái này yêu cầu thêm một vài dòng:

a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; }

Hãy giải thích mã mẫu CSS này.

Bao gồm tất cả bốn trạng thái liên kết đảm bảo rằng nút không biến mất khi người dùng di chuột qua hoặc nhấp vào nó. Bạn cũng có thể đặt các thông số khác nhau cho các liên kết di chuột và hoạt động, ví dụ: thay đổi nút hoặc màu văn bản.

Màu nền được đặt bằng màu nền và màu văn bản với màu. Padding xác định kích thước của hộp — văn bản được đệm 10px theo chiều dọc và 25px theo chiều ngang.

Căn chỉnh văn bản đảm bảo rằng văn bản được hiển thị ở trung tâm của nút, thay vì lệch sang một bên. Trang trí văn bản, như trong ví dụ cuối cùng, loại bỏ gạch dưới.

Mã CSS “display: inline-block” phức tạp hơn một chút. Tóm lại, nó cho phép bạn thiết lập chiều cao và chiều rộng của đối tượng. Nó cũng đảm bảo rằng nó bắt đầu một dòng mới khi nó được chèn vào.

6. Mã ví dụ CSS để tạo hộp văn bản

Một đoạn văn đơn giản không thú vị lắm. Nếu bạn muốn đánh dấu một phần tử trên trang của mình, bạn có thể muốn thêm đường viền. Dưới đây là cách thực hiện điều đó với một chuỗi mã CSS đơn giản:

p.important { border-style: solid; border-width: 5px; border-color: purple; }

Điều này là đơn giản. Nó tạo ra một đường viền màu tím đặc, rộng năm pixel, xung quanh bất kỳ đoạn văn lớp quan trọng nào. Để tạo một đoạn văn kế thừa các thuộc tính này, chỉ cần khai báo nó như sau:

<p class="important">Your important paragraph here.</p>

Điều này sẽ hoạt động bất kể đoạn văn có lớn đến đâu.

Có nhiều kiểu viền khác nhau mà bạn có thể áp dụng; thay vì “solid”, hãy thử “dotted” hoặc “double”. Trong khi đó, chiều rộng có thể là “mỏng”, “trung bình” hoặc “dày”. Mã CSS thậm chí có thể xác định độ dày của từng đường viền riêng lẻ, như thế này:

border-width: 5px 8px 3px 9px;

Điều đó dẫn đến đường viền trên cùng là năm pixel, đường viền bên phải là tám pixel, đường viền dưới cùng là ba pixel và kích thước đường viền bên trái là chín pixel.

7. Phần tử căn giữa với mã CSS cơ bản

Đối với một tác vụ thông thường, việc căn giữa các phần tử bằng mã CSS đáng ngạc nhiên là không trực quan. Tuy nhiên, khi bạn đã thực hiện một vài lần, nó sẽ trở nên dễ dàng hơn nhiều. Bạn có một số cách khác nhau để căn giữa mọi thứ.

Đối với phần tử khối (thường là hình ảnh), hãy sử dụng thuộc tính margin:

.center { display: block; margin: auto; }

Điều này đảm bảo rằng phần tử được hiển thị dưới dạng một khối và lề ở mỗi bên được đặt tự động. Nếu bạn muốn căn giữa tất cả các hình ảnh trên một trang nhất định, bạn thậm chí có thể thêm “margin: auto” vào thẻ img:

img { margin: auto; }

Để tìm hiểu lý do tại sao nó hoạt động theo cách này, hãy xem phần giải thích mô hình hộp CSS tại W3C .

Nhưng nếu bạn muốn căn giữa văn bản bằng CSS thì sao? Sử dụng CSS mẫu này:

.centertext { text-align: center; }

Bạn muốn sử dụng lớp “centertext” để căn giữa văn bản trong một đoạn văn? Chỉ cần thêm lớp đó vào thẻ <p>:

<p class="centertext">This text will be centered.</p>

8. Ví dụ CSS để điều chỉnh đệm

Phần đệm của một phần tử chỉ định bao nhiêu không gian ở mỗi bên. Ví dụ: nếu bạn thêm 25 pixel đệm vào cuối hình ảnh, văn bản sau sẽ bị đẩy 25 pixel xuống. Nhiều phần tử có thể có phần đệm, không chỉ hình ảnh.

Giả sử bạn muốn mọi hình ảnh có 20 pixel đệm ở hai bên trái và phải và 40 pixel ở trên cùng và dưới cùng. Cách thực thi mã CSS cơ bản nhất cho việc này là:

img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; }

Tuy nhiên, có một hướng dẫn CSS ngắn hơn, trình bày tất cả thông tin này trong một dòng duy nhất:

img { padding: 40px 25px 40px 25px; }

Điều này đặt các phần đệm trên cùng, bên phải, dưới cùng và bên trái thành số bên phải. Nhờ chỉ sử dụng hai giá trị (40 và 25), bạn có thể làm cho nó ngắn hơn nữa:

img { padding: 40px 25px }

Khi bạn chỉ sử dụng hai giá trị, giá trị đầu tiên được đặt cho trên cùng và dưới cùng, trong khi giá trị thứ hai sẽ ở bên trái và bên phải.

9. Làm nổi bật các hàng trong bảng bằng mã hóa CSS

Mã CSS làm cho các bảng trông đẹp hơn nhiều so với các lưới mặc định. Thêm màu, điều chỉnh đường viền và làm cho bảng của bạn phản hồi với màn hình di động đều dễ dàng. Ví dụ CSS đơn giản này cho bạn thấy cách làm nổi bật các hàng trong bảng khi bạn di chuột qua chúng.

tr:hover { background-color: #ddd; }

Bây giờ bất cứ khi nào bạn di chuột qua một ô trong bảng, hàng đó sẽ thay đổi màu. 

10. Ví dụ CSS để thay đổi hình ảnh giữa trong suốt và mờ đục

Mã CSS cũng có thể giúp bạn làm những điều thú vị với hình ảnh. Đây là một ví dụ CSS để hiển thị hình ảnh ở độ mờ dưới hoàn toàn, vì vậy chúng có vẻ hơi “mờ”. Khi bạn di chuột qua các hình ảnh, chúng được chuyển sang độ mờ hoàn toàn:

img { opacity: 0.5; filter: alpha(opacity=50); }

Thuộc tính “filter” hoạt động tương tự như “opacity”, nhưng Internet Explorer 8 trở về trước không nhận dạng được phép đo độ mờ. Đối với các trình duyệt cũ hơn, bạn nên đưa nó vào.

Bây giờ hình ảnh hơi trong suốt, bạn có thể làm cho chúng mờ hoàn toàn khi di chuột qua:

img:hover { opacity: 1.0; filter: alpha(opacity=100); }

10 Ví dụ về CSS với mã nguồn

Với các ví dụ mã CSS này, bạn sẽ có một ý tưởng tốt hơn về cách hoạt động của CSS. Các mẫu CSS có thể hữu ích, nhưng hiểu được các yếu tố thô là rất quan trọng.

10 ví dụ mã CSS đơn giản đó được tóm tắt lại:

1. Định dạng đoạn văn dễ dàng
2. Thay đổi cách viết hoa chữ cái
3. Thay đổi màu liên kết
4. Xóa gạch chân liên kết
5. Tạo một nút liên kết
6. Tạo một hộp văn bản
7. Căn giữa các phần tử
8. Điều chỉnh đệm
9. Đánh dấu các hàng trong bảng
10. Làm cho hình ảnh mờ đục

Xem lại chúng một lần nữa, bạn sẽ nhận thấy một số mẫu mà bạn có thể áp dụng cho mã trong tương lai. Và đó là khi bạn biết mình đã thực sự bắt đầu trở thành một chuyên gia về CSS. Nhưng nhớ nó có thể là khó khăn. Bạn có thể muốn đánh dấu trang này để tham khảo trong tương lai.

Vân Nguyễn

Dịch từ: https://www.makeuseof.com/tag/simple-css-code-examples/