Sine bạn chưa quen với html ở đây có ba ví dụ sẵn sàng để sử dụng CSS cùng với html. Bạn có thể chỉ cần đặt chúng vào một tệp, lưu nó và mở nó lên với trình duyệt bạn chọn:
Cái này trực tiếp nhúng kiểu CSS của bạn vào thẻ / phần tử của bạn. Nói chung đây không phải là một cách tiếp cận hay, bởi vì bạn phải luôn tách nội dung / html khỏi thiết kế.
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hi, I'm bold!</title>
</head>
<body>
<p style="font-weight:bold;">Hi, I'm very bold!</p>
</body>
</html>
Cách tiếp theo là một cách tiếp cận tổng quát hơn và hoạt động trên tất cả các thẻ "p" (viết tắt của đoạn văn) trong tài liệu của bạn và phần bổ sung làm cho chúng LỚN. Btw. Google sử dụng phương pháp này trong tìm kiếm của mình:
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hi, I'm bold!</title>
<style type="text/css">
p {
font-weight:bold;
font-size:26px;
}
</style>
</head>
<body>
<p>Hi, I'm very bold and HUGE!</p>
</body>
</html>
Bạn có thể sẽ mất vài ngày để chơi xung quanh với các ví dụ đầu tiên, tuy nhiên đây là ví dụ cuối cùng. Cuối cùng, bạn hoàn toàn tách biệt thiết kế (css) và nội dung (html) với nhau trong hai tệp khác nhau. stackoverflow có cách tiếp cận này.
Trong một tệp, bạn đặt tất cả CSS (gọi nó là 'hello_world.css'):
p {
font-weight:bold;
font-size:26px;
}
Trong một tệp khác, bạn nên đặt html (gọi nó là 'hello_world.html'):
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hi, I'm bold!</title>
<link rel="stylesheet" type="text/css" href="hello_world.css" />
</head>
<body>
<p>Hi, I'm very bold and HUGE!</p>
</body>
</html>
Hy vọng điều này sẽ giúp một chút. Đến các yếu tố cụ thể địa chỉ trong tài liệu của bạn và không phải tất cả thẻ bạn nên làm cho mình làm quen với class
, id
và name
các thuộc tính. Chúc vui vẻ!