Khi bạn đã bắt đầu tìm hiểu về HTML, có thể bạn sẽ muốn trang trí thêm cho trang web của mình trở nên đẹp hơn. Code CSS chính là thứ bạn đang cần để làm điều đó. CSS cho phép bạn áp dụng các thay đổi trên toàn bộ trang của mình mà không cần dựa vào inline styling.
Dưới đây là một số ví dụ CSS đơn giản để bạn có thể thực hiện một số thay đổi cơ bản trên trang web.
10 ví dụ code CSS dễ học nhất trong 10 phút
1. Định dạng văn bản
Với CSS, bạn không cần phải thay đổi thuộc tính của từng phần tử HTML. CSS có thể áp dụng thuộc tính cho tất cả các tag trong file HTML.
Giả sử bạn muốn mọi đoạn văn trong thẻ <p> lớn hơn bình thường một chút và thay đổi màu chữ thành màu xám đậm thì có thể code CSS như thế này:
p { font-size: 120%; color: dimgray; }
Bất cứ khi nào trình duyệt hiển thị một đoạn văn, văn bản đó sẽ có kích thước (lớn hơn 120 phần trăm so với bình thường) và có màu “dimgray”.
Nếu bạn muốn biết mình có thể sử dụng những màu nào trong CSS thì có thể xem danh sách màu của Mozilla tại đây.
2. Thay đổi thuộc tính chữ
Nếu bạn muốn thu nhỏ chữ viết hoa thì có thể sử dụng đoạn code dưới đây để áp dụng cho các tag <p> trong file HTML.
p.smallcaps { font-variant: small-caps; }
Để áp dụng chỉ 1 tag <p> trong file HTML thì bạn có thể dùng thuộc tính class.
<p class="smallcaps">Your paragraph here.</p>
Thêm dấu chấm và tên class vào trong file CSS. Chỉ có phân tử html sử dụng class đó mới áp dụng được thuộc tính bạn viết trong file CSS mà thôi.
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 code CSS sau:
text-transform: uppercase; text-transform: lowercase; text-transform: capitalize;
Thuộc tính cuối cùng sẽ viết hoa chữ cái đầu tiên của mỗi câu.
3. Thay đổi màu liên kiết
Thay đổi thuộc tính không giới hạn ở các đoạn văn. Có 4 màu khác nhau mà bạn có thể áp dụng cho liên kết: màu tiêu chuẩn, màu đã truy cập, màu khi di chuột vào và màu khi bạn nhấn vào liên kết. Bạn có thể thử đoạn code CSS này để hiểu rõ hơn:
a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; }
Tùy vào ngữ cảnh cụ thể và thao tác của người dùng mà liên kết sẽ đổi màu theo
4. Xóa đường gạch dưới của liên kết
Các liên kết sẽ trở nên đẹp hơn nếu bạn loại bỏ phần gạch trên dưới liên kết bằng cách sử dụng thuộc tính “text-decoration”. Bạn có thể sử dụng đoạn code CSS dưới đây để loại bỏ dấu gạch chân đó:
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 thêm dấu gạch dưới khi người dùng di chuột qua liên kết? Chỉ cần sử dụng:
a:hover { text-decoration: underline; }
Bạn cũng có thể áp dụng thuộc tính này vào các liên kết active để đảm bảo gạch chân không biến mất khi bạn nhấp vào liên kết.
5. Tạo nút liên kết bằng CSS
Bạn muốn liên kết của bạn thu hút nhiều sự chú ý hơn? Vậy thì bạn có thể tạo một nút bấm liên kết bằng code CSS dưới đây:
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; }
Mình sẽ giải thích đoạn code CSS trên.
Đoạn code bao gồm tất cả bốn trạng thái liên kết đảm bảo rằng nút liên kết (button) 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 4 trạng thái của liên kết, ví dụ: thay đổi màu nút hoặc văn bản.
Màu nền được đặt bằng thuộc tính background-color và màu văn bản là color. Padding xác định kích thước của button.
Text-align đảm bảo rằng văn bản được hiển thị ở trung tâm của button, thay vì lệch sang một bên. Mình cũng loại bỏ dấu gạch dưới của liên kết như đã nói ở trên.
“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. Ngoài ra, các items sẽ được xếp cùng nhau trên một dòng.
6. Tạo hộp văn bản
Một đoạn văn đơn giản sẽ không có gì thú vị. Nếu bạn muốn làm nổi bật một phần tử trên trang, bạn có thể thêm đường viền xung quanh đoạn văn bản đó. Ví dụ đoạn code CSS sau:
p.important { border-style: solid; border-width: 5px; border-color: purple; }
Nó sẽ tạo ra một đường viền màu tím, rộng năm pixel, xung quanh bất kỳ đoạn văn nào có class important. Để tạo một đoạn văn được áp dụng thuộc tính trên, bạn chỉ cần code:
<p class="important">Your important paragraph here.</p>
Có nhiều kiểu viền khác nhau mà bạn có thể áp dụng ngoài “solid” như “dotted” hoặc “double”. Trong khi đó, chiều rộng (width) có thể là “thin”, “medium”, hoặc “thick”. Thậm chí, bạn còn có thể xác định độ dày của từng cạnh đường viền:
border-width: 5px 8px 3px 9px;
Đường viền trên cùng là 5 pixel, đường viền bên phải là 8 pixel, đường viền dưới là 3 pixel và đường viền bên trái là 9 pixel.
7. Căn giữa đối tượng
Đối với các tác vụ thông thường, việc căn giữa các phần tử bằng code CSS sẽ không trực quan. Tuy nhiên, bạn sẽ quen khi thực hiện được một vài lần.
Đối với phần tử khối (block element), thường là hình ảnh, bạn có thể sử dụng thuộc tính margin:
.center { display: block; margin: auto; }
Phần tử được hiển thị dưới dạng một khối (block) và lề (margin) ở mỗi bên được đặt tự động. Nếu bạn muốn căn giữa tất cả các ảnh trên một trang nhất định, bạn chỉ cần thêm “margin: auto” vào thẻ img:
img { margin: auto; }
Nhưng nếu bạn muốn căn giữa văn bản bằng CSS thì sao? Hãy sử dụng đoạn code CSS này:
.centertext { text-align: center; }Vậy là bạn chỉ cần thêm class “centertext” vào thẻ để căn giữa văn bản.
<p class="centertext">This text will be centered.</p>
8. Điều chỉnh padding
Padding của một phần tử sẽ chỉ định bao nhiêu không gian ở mỗi bên của phần tử. Ví dụ: nếu bạn thêm 25 pixel padding vào cuối phần tử ảnh, văn bản phía dưới ảnh sẽ bị đẩy xuống 25 pixel. Nhiều phần tử có thể thêm padding chứ không chỉ mỗi hình ảnh.
Giả sử bạn muốn mọi hình ảnh có 20 pixel padding ở hai bên trái và phải và 40 pixel ở trên cùng và dưới cùng. Vậy thì chỉ cần bạn code:
img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; }
Tuy nhiên, có một cách code bằng cách gộp tất cả thông tin trong 1 dòng code CSS duy nhất:img { padding: 40px 25px 40px 25px; }
Thuộc tính padding sẽ hiểu và đặt padding ở trên cùng, bên phải, dưới cùng và bên trái. Nhờ chỉ sử dụng hai giá trị: 40 và 25, bạn hoàn toàn có thể làm cho đoạn code CSS 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. Highlight các hàng trong bảng
CSS làm cho bảng trông đẹp hơn nhiều so vớ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 tự động điều chỉnh kích thước khi hiển thị trên điện thoại. Ví dụ code CSS đơn giản này sẽ 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. Làm trong suốt và làm mờ ảnh
CSS cũng có thể giúp bạn làm những điều thú vị với ảnh. Bạn có thể làm mờ ảnh với đoạn code CSS dưới đây:
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 độ mờ. Vậy nên đối với các trình duyệt cũ hơn, bạn nên thêm thuộc tính “filter”.
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); }
Trên đây là 10 ví dụ code CSS dễ hiểu nhất mà bạn có thể học trong 10 phút. Bạn có thấy dễ hiểu không nào? Ngoài ra, bạn cũng có thể học thêm về 17 ví dụ HTML trong 10 phút tại đây.