Trong phần này mình sẽ hướng dẫn cho các bạn Cách Kết Hợp Thuộc Tính HTML&CSS Để Tạo Một Khối Tin giống như trang kenh14.vn, ngoài việc áp dụng một số thuộc tính trong phần bài trước thì mình trình bày thêm một số thuộc tính sau:
article: đây là thẻ đóng khối, là một thẻ chính thức của HTML5, thông báo cho biết đây là bài báo. Thường các thẻ article bọc cho các bài báo.
div: cũng giống article, nhưng mang tính cách chung hơn, nó có thể được dùng bọc cho tất cả các khối video, ảnh, đủ mọi thứ.
Thuộc tính độ rộng: width:300px; heigh:200px. Để biết độ rộng của một khối bao nhiêu, bạn có thể sử dụng phần mềm FastStone Capture để đo. Nhưng để đo chính xác, trước khi đo bạn cần phải ấn tổ phím Ctrl+0 để cho trang trở về định đạng cũ.
Thuộc tính chống tràn: overflow:hidden; đối với thuộc tính này trong file CSS, cái gì tràn vượt quá kích cỡ mà chúng ta đã đo và định sãn thì sẽ ẩn đi. Đối với thuộc tính này nó có thể làm ẩn luôn cả chữ mà bị tràn ra khỏi khối đã định sẵn. vì vậy chúng ta có thể sử dụng thuộc tính khác.
Trường hợp chúng ta sử dụng file ảnh bị tràn ra so với khối chữ mà chúng ta sử dụng thuộc tính chống tràn overflow:hidden; mà nó ẩn luôn cả chữ, thì chúng ta có thể sử dụng thuộc tính img {with:300px}, nhằm chỉ chống tràn hình ảnh.
Thuộc tính bỏ gạch chân: text-decoration:none; Nếu muốn lấy lại gạch chân ta sẽ sử dụng thuộc tính text-decoration:underline = tương đương thẻ U. Mình gắn đâu thì nó bỏ gạch chân đấy.
Dưới đây là bài thực hành kết hợp mẫu mà các bạn có thể tham khảo. Ở đây chúng ta sẽ phải tạo 2 file, một là file HTML, hai là file CSS. Mong rằng qua hướng dẫn này sẽ giúp ích cho các bạn có thể thực hành tập thiết kế 1 khối tin cơ bản theo kẽnh.vn. Nếu có bất cứ câu hỏi nào cần giải thích, hãy comment xuống bên dưới mình sẽ giúp các bạn giải đáp. Các bước chúng ta sẽ thực hiện như sau:
Trong File HTML Chúng Ta Sẽ Trình Bày Như Sau:
Trong File CSS Chúng Ta Sẽ Trình Bày Như Sau để ứng với file HTML:
>>> Hướng Dẫn Cài Đặt Sublime Tex
>>> Các Thể HTML Cơ Bản Nhất
>>> Các Thuộc Tính CSS Cơ Bản
>>> Cách Phối Hợp HTML Với CSS Để Tạo Một Khối Tin
>>> Một Số Thuộc Tính CSS Nâng Cao
 |
| Hình ảnh khối tin đã được tạo giống như trong hình. |
article: đây là thẻ đóng khối, là một thẻ chính thức của HTML5, thông báo cho biết đây là bài báo. Thường các thẻ article bọc cho các bài báo.
div: cũng giống article, nhưng mang tính cách chung hơn, nó có thể được dùng bọc cho tất cả các khối video, ảnh, đủ mọi thứ.
Thuộc tính độ rộng: width:300px; heigh:200px. Để biết độ rộng của một khối bao nhiêu, bạn có thể sử dụng phần mềm FastStone Capture để đo. Nhưng để đo chính xác, trước khi đo bạn cần phải ấn tổ phím Ctrl+0 để cho trang trở về định đạng cũ.
Thuộc tính chống tràn: overflow:hidden; đối với thuộc tính này trong file CSS, cái gì tràn vượt quá kích cỡ mà chúng ta đã đo và định sãn thì sẽ ẩn đi. Đối với thuộc tính này nó có thể làm ẩn luôn cả chữ mà bị tràn ra khỏi khối đã định sẵn. vì vậy chúng ta có thể sử dụng thuộc tính khác.
Trường hợp chúng ta sử dụng file ảnh bị tràn ra so với khối chữ mà chúng ta sử dụng thuộc tính chống tràn overflow:hidden; mà nó ẩn luôn cả chữ, thì chúng ta có thể sử dụng thuộc tính img {with:300px}, nhằm chỉ chống tràn hình ảnh.
Thuộc tính bỏ gạch chân: text-decoration:none; Nếu muốn lấy lại gạch chân ta sẽ sử dụng thuộc tính text-decoration:underline = tương đương thẻ U. Mình gắn đâu thì nó bỏ gạch chân đấy.
Dưới đây là bài thực hành kết hợp mẫu mà các bạn có thể tham khảo. Ở đây chúng ta sẽ phải tạo 2 file, một là file HTML, hai là file CSS. Mong rằng qua hướng dẫn này sẽ giúp ích cho các bạn có thể thực hành tập thiết kế 1 khối tin cơ bản theo kẽnh.vn. Nếu có bất cứ câu hỏi nào cần giải thích, hãy comment xuống bên dưới mình sẽ giúp các bạn giải đáp. Các bước chúng ta sẽ thực hiện như sau:
 |
| Khối tin được áp dụng thiết kế như hình trên. |
Trong File HTML Chúng Ta Sẽ Trình Bày Như Sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Thực Tập Khối Tin Kênh 14</title>
<link rel="stylesheet" href="1.css">
</head>
<body>
<article>
<img src="1.jpg" alt="quán ốc đặc biệt tại HN">
<div>
<a href="#">Quán ốc đặc biệt ở Hà Nội: Suốt 20 năm chủ và nhân viên không nói với khách một lời</a>
<p>Giữa lòng Hà Nội ồn ào huyên náo, có 1 quán ốc đặc biệt mà giữa người bán và kẻ mua 20 năm qua không nói với nhau một lời nào. Ấy thế mà thực khách vẫn nườm nượp tới đây, nhâm nhi hương vị ốc luộc đặc trưng mỗi khi rảnh ...</p>
</div>
</article>
</body>
</html>
Trong File CSS Chúng Ta Sẽ Trình Bày Như Sau để ứng với file HTML:
article{DANH SÁCH BÀI TRONG SERIE
width: 422px;
height: 458px;
border:1px solid #A70E1A;
background: url(2.png);
}
img{
width: 422px;
border-bottom:1px solid #A70E1A;
}
a{
text-decoration: none;
font-size: 24px;
color: #222;
font-family:arial;
font-weight: bold;
}
p{
margin: 0px;
padding-top:10px;
font-size: 13px;
color:#444;
font-family: arial;
line-height: 20px;
}
div{
padding:10px;
}
>>> Hướng Dẫn Cài Đặt Sublime Tex
>>> Các Thể HTML Cơ Bản Nhất
>>> Các Thuộc Tính CSS Cơ Bản
>>> Cách Phối Hợp HTML Với CSS Để Tạo Một Khối Tin
>>> Một Số Thuộc Tính CSS Nâng Cao
0 Comments