Home-theater-designers
Khi bạn đã bắt đầu tìm hiểu về HTML, có thể bạn sẽ quan tâm đến việc thêm nhiều cú đấm trực quan hơn vào các trang web của mình. CSS là cách tốt nhất để 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 kiểu nội tuyến.
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 một 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 (
, 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.
Có liên quan: Bảng lừa đảo HTML
Mã CSS cho điều này là:
p { font-size: 120%; color: dimgray; }Đơn giản! 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').
Nếu bạn tò mò về những màu văn bản thuần túy nào bạn có thể sử dụng, hãy xem phần này Danh sách màu CSS từ Mozilla.
2. Ví dụ CSS để thay đổi ký tự chữ hoa
Bạn muốn tạo chỉ định cho các đoạn văn phải được 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ư:
Your paragraph here.
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, 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 dưới 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 kiểu 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 chân 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 bạn? Nút liên kết là một cách tuyệt vời để thực hiện 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ụ trước, loại bỏ gạch dưới.
cách thay đổi dpi trong gimp
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 chắc chắn, 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:
Your important paragraph here.
Đ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ư sau:
border-width: 5px 8px 3px 9px;Điều đó dẫn đến đườ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à kích thước đường viền bên trái là 9 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 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
nhãn:
This text will be centered.
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, bên dưới 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. Đánh dấu 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 sắc, đ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. Để xem một số điều thú vị khác mà bạn có thể làm, hãy xem Trang W3C trên các bảng CSS lạ mắt .
10. Ví dụ về 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. 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:
- Định dạng đoạn văn dễ dàng
- Thay đổi kiểu chữ cái
- Thay đổi màu liên kết
- Xóa gạch chân liên kết
- Tạo một nút liên kết
- Tạo một hộp văn bản
- Căn giữa các phần tử
- Điều chỉnh đệm
- Đánh dấu các hàng trong bảng
- 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.
Đăng lại Đăng lại tiếng riu ríu E-mail Bảng gian lận thuộc tính CSS3 thiết yếuNắm vững cú pháp CSS cần thiết với bảng gian lận thuộc tính CSS3 của chúng tôi.
Đọc tiếp Chủ đề liên quan- Lập trình
- Thiết kế web
- CSS
- Viết kịch bản
Phó tổng biên tập về Bảo mật, Linux, Tự làm, Lập trình và Giải thích về Công nghệ, và Nhà sản xuất Podcast Thực sự Hữu ích, có nhiều kinh nghiệm trong lĩnh vực hỗ trợ máy tính để bàn và phần mềm. Một người đóng góp cho tạp chí Định dạng Linux, Christian là một người mày mò Raspberry Pi, người yêu thích Lego và người hâm mộ trò chơi cổ điển.
Xem thêm từ Christian CawleyTheo dõi bản tin của chúng tôi
Tham gia bản tin của chúng tôi để biết các mẹo công nghệ, đánh giá, sách điện tử miễn phí và các ưu đãi độc quyền!
Bấm vào đây để đăng ký