Học web chuẩn

Ví dụ về thuộc tính html

Thuộc tính class

Định dạng class thông qua thuộc tính trong css

<html>
<head>
<style type="text/css">
div.redColor {color:red;}
p.blueColor {color:blue;}
a.yellowColor {color:yellow;}
</style>
</head>

<body>
<div class="redColor">Thành phần div</div>
<p class="blueColor">Thành phần p</p>
<a class="yellowColor" href="hocwebchuan.com">Thành phần a</a>
</body>
</html>

Thành phần div

Thành phần p

Thành phần a

Định dạng 1 class cho nhiều tag

<html>
<head>
<style type="text/css">
.redColor {color:red;}
</style>
</head>

<body>
<div class="redColor">Thành phần div</div>
<p class="redColor">Thành phần p</p>
<a class="redColor" href="hocwebchuan.com">Thành phần a</a>
</body>
</html>

Thành phần div

Định dạng 2 class trong cùng một tag

<html>
<head>
<style type="text/css">
div.redColor {color:red;}
div.alignR {text-align:right;}
</style>
</head>

<body>
<div class="redColor alignR">Thành phần div</div>
</body>
</html>

Thành phần div

Đầu trang

Thuộc tính id

Định dạng id thông qua thuộc tính trong css

<html>
<head>
<style type="text/css">
div#redColor {color:red;}
p#blueColor {color:blue;}
a#yellowColor {color:yellow;}
</style>
</head>

<body>
<div id="redColor">Thành phần div</div>
<p id="blueColor">Thành phần p</p>
<a id="yellowColor" href="hocwebchuan.com">Thành phần a</a>
</body>
</html>

Thành phần div

Thành phần p

Thành phần a

Kết hợp thuộc tính id và thuộc tính class

<html>
<head>
<style type="text/css">
div#content {text-align:center;}
div.redColor {color:red;}
</style>
</head>

<body>
<div id="content" class="redColor">Thành phần div</div>
</body>
</html>

Thành phần div

Đầu trang

Thuộc tính style

Định dạng style trực tiếp trong thành phần

<html>
<head></head>

<body>
<div style="color: red; font-weight: bold;">Thành phần div</div>
<p style="color: blue;">Thành phần p</p>
<a style="color: yellow" href="hocwebchuan.com">Thành phần a</a>
</body>
</html>

Thành phần div

Thành phần p

Thành phần a

Đầu trang

Thuộc tính title

<html>
<head></head>

<body>
<div title="Học web chuẩn miễn phí">Học web chuẩn</div>
</body>
</html>

di chuyển chuột lên trên chữ để xem text hiển thị.

Học web chuẩn

Đầu trang