Sử Dụng CSS và Đa Phương Tiện Để Làm Đẹp Giao Diện Web

Kiến Thức Cơ Bản Về CSS

1. Bộ Chọn (Selector) CSS

Bộ chọn CSS giúp xác định phần tử HTML nào sẽ được áp dụng kiểu dáng. Các loại thông dụng:

  • Bộ chọn phần tử: Chọn tất cả phần tử cùng loại, ví dụ p chọn mọi đoạn văn.
  • Bộ chọn lớp: Chọn phần tử có class nhất định, ví dụ .classname.
  • Bộ chọn ID: Chọn phần tử có ID cụ thể, ví dụ #idname.

2. Thuộc Tính CSS

Các thuộc tính cơ bản để định dạng:

  • color: Màu chữ.
  • font-size: Cỡ chữ.
  • background-color: Màu nền.
  • border: Đường viền.
  • margin và padding: Khoảng cách bên ngoài và bên trong.

3. Mô Hình Hộp (Box Model)

Mô hình hộp mô tả cách tính chiều rộng và chiều cao của phần tử, bao gồm:

  • Content: Vùng nội dung.
  • Padding: Khoảng đệm quanh nội dung.
  • Border: Đường viền bao quanh.
  • Margin: Khoảng cách bên ngoài.

Làm Đẹp Liên Kết (Link) Với CSS

1. Các Trạng Thái Liên Kết

Bốn trạng thái của liên kết có thể được tùy chỉnh riêng:

  • :link: Liên kết chưa được truy cập.
  • :visited: Liên kết đã truy cập.
  • :hover: Khi chuột di qua.
  • :active: Khi đang nhấp chuột.

2. Các Kỹ Thuật Trang Trí Liên Kết

  • Màu sắc: Dùng color.
  • Icon phông chữ: Sử dụng thư viện như Font Awesome.
  • Hiệu ứng nền: Dùng background-color hoặc background-image.
  • Hiệu ứng động: Dùng transition và transform.
  • Con trỏ chuột: Dùng cursor.
  • Đường viền: Dùng border.

Mẹo CSS3

1. Thuộc Tính CSS3

CSS3 bổ sung nhiều thuộc tính để tạo hiệu ứng phong phú:

  • border-radius: Bo góc.
  • box-shadow: Đổ bóng cho khối.
  • text-shadow: Đổ bóng chữ.
  • transition: Chuyển đổi mượt.
  • animation: Tạo hoạt ảnh.

2. Thiết Kế Đáp Ứng (Responsive)

Đảm bảo giao diện hiển thị tốt trên mọi thiết bị:

  • Media Query: Áp dụng CSS khác nhau dựa trên kích thước màn hình.
  • Bố cục linh hoạt: Dùng Flexbox hoặc Grid.

3. Truy Vấn Đa Phương Tiện

@media (max-width: 600px) {
  /* CSS cho màn hình nhỏ hơn 600px */
}

Ứng Dụng Đa Phương Tiện

1. Kiểu Ảnh

Dùng width, height, object-fit để điều chỉnh kích thước và cách ảnh hiển thị.

2. Video và Âm Thanh

Sử dụng thẻ <video> và <audio> HTML5, kết hợp CSS để tạo kiểu.

3. Nền

Dùng background-image, background-size, background-position, background-repeat để kiểm soát ảnh nền.

Ví Dụ Mã Nguồn

Bảng có sọc màu:

tr:nth-child(even) { background-color: #f9f9f9; }
tr:hover { background-color: #f1f1f1; }

Danh sách tùy chỉnh:

ul {
  list-style: none;
  padding-left: 0;
}
ul li::before {
  content: "• ";
  color: red;
  font-weight: bold;
}

Thanh điều hướng đơn giản:

<div class="container">
  <div class="title">Menu Dịch Vụ</div>
  <div id="menu">
    <a href="#">Liên kết 1</a>
    <a href="#">Liên kết 2</a>
    <a href="#">Liên kết 3</a>
    <a href="#">Liên kết 4</a>
    <a href="#">Liên kết 5</a>
  </div>
</div>
<style>
  .container { text-align: center; width: 400px; margin: 0 auto; }
  .title { font-size: 24px; font-weight: bold; margin-bottom: 20px; }
  #menu { background-color: aqua; overflow: hidden; background-image: url('img/2b7f56076b403d6e17b0ba77cbd107e.jpg'); }
  #menu a { float: left; display: block; color: red; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; font-weight: 700; }
  #menu a:hover { background-color: lightblue; font-size: 20px; background-image: url('img/b61dd120dd180f08d8011c359be1c9a.jpg'); }
  #menu a:active { background-color: green; color: white; font-size: 15px; }
</style>

Danh sách có hình nền:

<div>
  <h3>Công ty chuyển phát</h3>
  <ol>
    <li>Bưu điện</li>
    <li>SF Express</li>
    <li>JD Express</li>
    <li>YTO Express</li>
    <li>Yunda Express</li>
    <li>ZTO Express</li>
    <li>STO Express</li>
    <li>Best Express</li>
  </ol>
</div>
<style>
  li { padding-left: 50px; background: url('img/f32b382e58418802be4b002a642f111.jpg') no-repeat; }
</style>

Danh sách với kiểu marker khác nhau:

<ol class="c">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ol>
<ol class="b">
  <li>w</li>
  <li>e</li>
  <li>r</li>
</ol>
<ol class="a">
  <li>x</li>
  <li>y</li>
  <li>z</li>
</ol>
<style>
  li { width: 100px; border: 2px solid black; }
  .c { list-style-type: square; list-style-image: url('img/48bf57b3d26f51eb2b5313c6d093d89.jpg'); list-style-position: outside; padding-left: 100px; }
  .b { list-style-type: circle; list-style-image: url('img/62e2b08462c174332f6f988752be844.jpg'); list-style-position: inside; }
  .a { list-style-type: decimal; list-style-image: url('img/ed965daa1d8e4a3c8c3c288899812a5.jpg'); }
</style>

Bảng có khoảng cách ô:

<table>
  <tr><th>Môn học</th><th>Tín chỉ</th><th>Hình thức</th></tr>
  <tr><td>Cơ sở dữ liệu</td><td>4.0</td><td>Thi viết</td></tr>
  <tr><td>Java</td><td>4.0</td><td>Thực hành</td></tr>
</table>
<table class="one">
  <tr><td>Dữ liệu lớn</td><td>IoT</td></tr>
  <tr><td>Điện toán đám mây</td><td>AI</td></tr>
</table>
<table class="two">
  <tr><td>Dữ liệu lớn</td><td>IoT</td></tr>
  <tr><td>Điện toán đám mây</td><td>AI</td></tr>
</table>
<style>
  table { border-collapse: separate; }
  table, td, th { border: 1px solid black; }
  .one { border-collapse: separate; border-spacing: 10px; }
  .two { border-collapse: separate; border-spacing: 10px 30px; }
</style>

Bảng có tiêu đề và ẩn ô trống:

<table class="cap">
  <caption><h2>Lịch trực</h2></caption>
  <tr><th>Thời gian</th><th>Người trực</th></tr>
  <tr><td>8-12</td><td>Nguyễn Văn A</td></tr>
  <tr><td>14-17</td><td>Trần Thị B</td></tr>
  <tr><td>9-22</td><td>Lê Văn C</td></tr>
</table>
<table class="emp">
  <tr><td>Có nội dung</td><td>Không nội dung</td></tr>
  <tr><td>Có nội dung</td><td></td></tr>
  <tr><td>Có nội dung</td><td>Có nội dung</td></tr>
</table>
<style>
  .cap { caption-side: top; }
  table, th, td { border: 1px solid black; }
  .emp { border-collapse: separate; empty-cells: hide; }
</style>

Nhúng đa phương tiện:

<embed src="video.mp4" type="">
<embed src="nhac.mp3">
<audio src="chuong.mp3"></audio>
<video src="video.mp4"></video>

Thẻ: css selector box-model link-styling CSS3

Đăng vào ngày 2 tháng 8 lúc 10:22

Thẻ Phổ Biến

©2026 Thành phố Cuồng loạn