Chúng ta sẽ quay lại với OnlineGDB để thảo luận về CSS đang sử dụng trong website trên web hosting của chúng ta.
Chúng ta cần thảo luận qua về CSS Class.Đôi khi có thể có một nhóm HTML elements mà bạn muốn định dạng theo một cách nhất định. Ví dụ: giả sử bạn đang tạo một trang web bao gồm một số bài đánh giá phim, ngoài các nội dung khác. Toàn bộ nội dung của mỗi bài đánh giá được gói trong thẻ <div>. Ví dụ bạn muốn tất cả các bài đánh giá có màu nền khác biệt, bạn sẽ tạo một class review với background-color khác biệt đại khái như sau:
div.review {
background-color: #E6EBF5;
}
Giống như bạn đang nói rằng: tất cả nội dung trong thẻ <div> của class review sẽ có màu nền là #E6EBF5.
Sau đó trong phần <body> của trang HTML, bạn chỉ việc "gọi" class review, tương tự thế này
<div class="review">
<h2>Tôi thấy hoa vàng trên cỏ xanh</h2>
<p class="summary">Tôi thấy hoa vàng trên cỏ xanh là phim điện ảnh được chuyển thể từ tiểu thuyết cùng tên của nhà văn Nguyễn Nhật Ánh. </p>
<p>Phim là một câu chuyện đầy cảm xúc về quê hương, về gia đình...</p>
</div>
Chúng ta có thể thử trên OnlineGDB như sau:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Đất Việt Lập Trình</title>
<style>
div.review {
background-color: #E6EBF5;
}
</style>
</head>
<body>
<div class="review">
<h2>Tôi thấy hoa vàng trên cỏ xanh</h2>
<p class="summary">Tôi thấy hoa vàng trên cỏ xanh là phim điện ảnh được chuyển thể từ tiểu thuyết cùng tên của nhà văn Nguyễn Nhật Ánh. </p>
<p>Phim là một câu chuyện đầy cảm xúc về quê hương, về gia đình...</p>
</div>
</body>
</html>
Bấm Run để thực thi mã HTML
Ví dụ trên là một ví dụ đơn giản cho CSS class. Tên class, ví dụ review luôn có dấu chấm "." đặt trước, ví dụ .review
Ta thử tạo thêm một class red_text như sau
.red-text {
color: red;
}
Sau đó ta sẽ gọi nó trong phần <body>, ví dụ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Đất Việt Lập Trình</title>
<style>
div.review {
background-color: #E6EBF5;
}
.red-text {
color: red;
}
</style>
</head>
<body>
<div class="review">
<h2>Tôi thấy hoa vàng trên cỏ xanh</h2>
<p>Tôi thấy hoa vàng trên cỏ xanh là phim điện ảnh được chuyển thể từ tiểu thuyết cùng tên của nhà văn Nguyễn Nhật Ánh. </p>
<p class="red-text">Phim là một câu chuyện đầy cảm xúc về quê hương, về gia đình...</p>
</div>
</body>
</html>
Bấm Run để thực thi HTML
Tóm lại, ta nhớ thêm dấu chấm "." vào trước tên của class. Nếu muốn định dạng cho chỉ một phần tử cụ thể, ví dụ div thì ta viết tên phần tử đó, tiếp theo là dấu chấm ".", tiếp theo là tên lớp.
div.reviewNếu muốn định dạng chung chung, ta chỉ cần viết dấu chấm ".", theo sau là tên lớp
.content
Nếu chúng ta muốn định dạng cho mọi phần tử, chúng ta sử dụng dấu sao "*", ví dụ:
* {
border: 1px solid red;
}
Ngoài ra, :before và :after được sử dụng để áp dụng các thuộc tính css NGAY trước hoặc sau nội dung TRONG phần tử phù hợp.
Bây giờ chúng ta quay lại với webpage của chúng ta.
Trước hết, chúng ta nên hình dung hay "vẽ ra" hình dáng ban đầu của trang web. Đại khái sẽ thế này
Theo thời gian, khi màn hình lớn hơn và rộng hơn trở nên phổ biến hơn, tiêu chuẩn này đã chuyển sang chiều rộng lớn hơn, chẳng hạn như 1280 pixel và hiện phổ biến nhất là 1920 pixel (1920 x 1080 px) cho độ phân giải Full HD.
Chúng ta tạm thời coi như chiều rộng sẽ đâu đó khoảng 1000px-1280px. Bây giờ chúng ta sẽ đặt một hình ảnh chiều ngang khoảng 500px - 550px nằm về bên trái của trang web.
Chúng ta sẽ thử với mã đơn giản sau
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Đất Việt Lập Trình</title>
<style>
</style>
</head>
<body>
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7c/HoiAnOldQuarter.jpg" width="500" height="400" alt="Hoi An">
</div>
</body>
</html>
Kết quả thực thi
Nhìn "có vẻ" ổn, nhưng nếu bây giờ chúng ta thêm Tiêu đề, miêu tả, List...làm sao để những thứ còn lại "nằm" qua bên phải? Chúng ta thử với tiêu đề
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Đất Việt Lập Trình</title>
<style>
</style>
</head>
<body>
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7c/HoiAnOldQuarter.jpg" width="500" height="400" alt="Hoi An">
</div>
<div>
<h2>HỘI AN</h2>
</div>
</body>
</html>
Kết quả thực thi, tiêu đề Hội An đã nhảy xuống dưới hình ảnh!
Bây giờ chúng ta sẽ cần CSS "ra tay". Trước hết chúng ta sẽ thiết lập một chiều ngang cố định cho trang web => Chia làm 2 => Một nửa là hình ảnh=> Một nửa còn lại là chi tiết, bao gồm tiêu đề, lời giới thiệu, tiêu đề phụ và 2 list.
Ta sẽ tạo một class để cố định chiều ngang cho trang web, ta đặt tên class là about-us. Đây là mã sau khi thêm about-us class.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Đất Việt Lập Trình</title>
<style>
.about-us {
margin: 30px auto;
width: 1140px;
}
</style>
</head>
<body>
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7c/HoiAnOldQuarter.jpg" width="500" height="400" alt="Hoi An">
</div>
<div>
<h2>HỘI AN</h2>
</div>
</body>
</html>
Chúng ta chưa làm gì, nhưng tạm hình dung thế này: mọi phần tử HTML nếu khai báo class="about-us" sẽ có margin là 30px và chiều ngang là 1140px.
Thuộc tính CSS float sẽ giúp chúng ta "đặt" một phần tử nằm bên phải hay bên trái. Bây giờ chúng ta sẽ cho hình ảnh (image) nằm bên trái và các chi tiết khác (detail) nằm bên phải.
Vì cả image và detail đều đồng thời "nằm trong" class about-us nên chúng ta sẽ có mã như sau
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Đất Việt Lập Trình</title>
<style>
.about-us {
margin: 30px auto;
width: 1140px;
}
.about-us .image {
float: left;
width: 520px;
}
.about-us .detail {
float: right;
width: 560px;
}
</style>
</head>
<body>
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7c/HoiAnOldQuarter.jpg" width="500" height="400" alt="Hoi An">
</div>
<div>
<h2>HỘI AN</h2>
</div>
</body>
</html>
Chúng ta sẽ "áp dụng" các class phù hợp trong phần <body>. Chúng ta sẽ sử dụng thẻ <section> cho class about-us vì mọi phần tử trong trang sẽ cùng chia sẻ một chiều ngang cố định là 1140px.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Đất Việt Lập Trình</title>
<style>
.about-us {
margin: 30px auto;
width: 1140px;
}
.about-us .image {
float: left;
width: 520px;
}
.about-us .detail {
float: right;
width: 560px;
}
</style>
</head>
<body>
<section class="about-us">
<div class="image">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7c/HoiAnOldQuarter.jpg" width="500" height="400" alt="Hoi An">
</div>
<div class="detail">
<h2>HỘI AN</h2>
</div>
</section>
</body>
</html>
Bấm Run để thực thi
Tiêu đề HỘI AN đã "yên vị" bên phải.
Chúng ta sẽ thêm phần Lời giới thiệu bên dưới Tiêu đề. Vì Lời giới thiệu nằm dưới tiêu đề nên chúng ta sẽ sử dụng thẻ <p>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Đất Việt Lập Trình</title>
<style>
.about-us {
margin: 30px auto;
width: 1140px;
}
.about-us .image {
float: left;
width: 520px;
}
.about-us .detail {
float: right;
width: 560px;
}
</style>
</head>
<body>
<section class="about-us">
<div class="image">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7c/HoiAnOldQuarter.jpg" width="500" height="400" alt="Hoi An">
</div>
<div class="detail">
<h2>HỘI AN</h2>
<p>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>
</div>
</section>
</body>
</html>
Bấm Run để thực thi
Tới đây, chúng ta cần tạo một <section> mới nằm trong block <div class="detail"> vì nội dung phần còn lại độc lập với tiêu đề và lời giới thiệu.
Ta sẽ thêm tiêu đề phụ như sau
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Đất Việt Lập Trình</title>
<style>
.about-us {
margin: 30px auto;
width: 1140px;
}
.about-us .image {
float: left;
width: 520px;
}
.about-us .detail {
float: right;
width: 560px;
}
</style>
</head>
<body>
<section class="about-us">
<div class="image">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7c/HoiAnOldQuarter.jpg" width="500" height="400" alt="Hoi An">
</div>
<div class="detail">
<h2>HỘI AN</h2>
<p>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>
</section>
</div>
</section>
</body>
</html>
Bấm Run để thực thi
Phần cuối cùng là List. Để tách làm 2 phần như phác thảo, chúng ta qui định width: 50%; cho phần tử li.
Đại khái chúng ta sẽ nói rằng: phần tử li sẽ có width: 50%; và nó thuộc class choose-list, class choose-list sẽ thuộc class detail, class detail thuộc class about-us.
.about-us .detail .choose-list li
Đây là mã HTML cho đến lúc này
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Đất Việt Lập Trình</title>
<style>
.about-us {
margin: 30px auto;
width: 1140px;
}
.about-us .image {
float: left;
width: 520px;
}
.about-us .detail {
float: right;
width: 560px;
}
.about-us .detail .choose-list li {
float: left;
width: 50%;
}
</style>
</head>
<body>
<section class="about-us">
<div class="image">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7c/HoiAnOldQuarter.jpg" width="500" height="400" alt="Hoi An">
</div>
<div class="detail">
<h2>HỘI AN</h2>
<p>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> Cao Lầu</li>
<li> Mì Quảng</li>
<li> Bánh mì</li>
<li> Hoành Thánh</li>
<li> Chè bắp</li>
<li> Bánh tráng đập</li>
<li> Bánh bao</li>
<li> Bánh Vạc </li>
</ul>
</section>
</div>
</section>
</body>
</html>
Bấm Run để thực thi, phác họa của trang web đã hoàn tất, mặc dù còn nhiều "mắm muối" cần thêm vào, nhưng về bản chất trang web đã ổn
Không có nhận xét nào:
Đăng nhận xét