Chúng ta cần tách riêng hai phần HTML và CSS.
Trước hết chúng ta cần xóa file index.html trên web hosting. Tại trang File Manager của 000webhost, chúng ta chọn file index.html, sau đó bấm biểu tượng Delete và xóa file index.html khỏi hosting.
Tiếp theo chúng ta chỉ cần tách toàn bộ nội dung bên trong cặp thẻ <style></style> đem qua một file mới, chúng tôi đặt tên là datviet.css, bạn hoàn toàn có thể đặt bất cứ tên gì, thông thường sẽ là style.css. Đây là nội dung file datviet.css
/* Reset */
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
body {
color: #666;
font-family: Helvetica,sans-serif;
font-size: 15px;
line-height: 1.6;
}
.clearfix {
zoom: 1;
}
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
}
/* Layout */
.about-us {
margin: 30px auto;
width: 1140px;
}
.about-us .image {
float: left;
width: 520px;
}
.about-us .detail {
float: right;
width: 560px;
}
.about-us .detail h2 {
color: #333;
font-size: 36px;
margin-bottom: 42px;
position: relative;
}
/* Line cho h2 */
.about-us .detail h2:after {
background-color: #516cfe;
bottom: -6px;
content: "";
display: block;
left: 0;
height: 3px;
width: 60px;
position: absolute;
}
.about-us .detail .info-text {
margin-bottom: 22px;
}
.about-us .detail h3 {
color: #333;
font-size: 22px;
}
.about-us .detail .choose-list {
padding: 14px 0 0 20px;
}
.about-us .detail .choose-list li {
float: left;
width: 50%;
}
.about-us .detail .choose-list li i {
color: #4fa2fb;
font-size: 10px;
padding-right: 5px;
}
Sau đó, chúng ta thêm dòng sau vào file index.html, ngay trước thẻ </head>
<link rel="stylesheet" href="css/datviet.css">
Lưu ý: css/datviet.css là đường dẫn tới file datviet.css. Nếu trong thu mục gốc trên hosting bạn đã đặt tên thư mục dự tính chứa các file css khác với chúng tôi thì bạn cần đổi cho phù hợp. Ví dụ, trong phần trước bạn tạo hai thư mục là hinh_anh và dinh_dang thì đường dẫn của bạn trong trường hợp này sẽ là dinh_dang/datviet.css
Đây là nội dung của file index.html hiện nay
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Đất Việt Lập Trình</title>
<link rel="stylesheet" href="css/datviet.css">
</head>
<body>
<section class="about-us clearfix">
<div class="image">
<img src="/images/hoi-an-8104131_640.jpg" width="500" height="400" alt="Hoi An">
</div>
<div class="detail">
<h2>HỘI AN</h2>
<p class="info-text">Hội An, một thành phố cổ ở Việt Nam, nổi tiếng với văn hóa ẩm thực phong phú và đa dạng. Dưới đây là một số món ăn nổi bật ở Hội An mà bạn nên thử:</p>
<section>
<h3>Các Món Nên Thử</h3>
<ul class="choose-list">
<li><i class="fas fa-check"></i> Cao Lầu</li>
<li><i class="fas fa-check"></i> Mì Quảng</li>
<li><i class="fas fa-check"></i> Bánh mì</li>
<li><i class="fas fa-check"></i> Hoành Thánh</li>
<li><i class="fas fa-check"></i> Chè bắp</li>
<li><i class="fas fa-check"></i> Bánh tráng đập</li>
<li><i class="fas fa-check"></i> Bánh bao</li>
<li><i class="fas fa-check"></i> Bánh Vạc </li>
</ul>
</section>
</div>
</section>
</body>
</html>
Chúng ta sẽ quay lại web hosting để tải hai file datviet.css và index.html lên.
Chúng ta sẽ upload file index.html vào thư mục gốc public_html và file datviet.css vào thư mục css
Chạy thử website của chúng ta
Chúng ta đã sử dụng External CSS. Hiện nay website của chúng ta đã "đâu vào đó", file index.html nằm trong thư mục gốc, file datviet.css nằm trong thư mục css và hình ảnh nằm trong thư mục images.
Chúng ta sẽ phân tích file .css trong phần sau.
Không có nhận xét nào:
Đăng nhận xét