Ví dụ CSS trong phần trước là "cực kỳ đơn giản". Chúng ta thử thêm một ví dụ "không đơn giản lắm" cho kết quả như sau.
Đây là mã HTML và CSS:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Đất Việt Lập Trình</title>
<style>
/* 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;
}
</style>
</head>
<body>
<section class="about-us clearfix">
<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 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>
Sử dụng OnlineGDB, thực thi
Các phiên bản của CSS
- CSS1 được công bố bởi W3C vào 12/1996. Miêu tả ngôn ngữ CSS cũng như mô hình định dạng đơn giản đầu tiên cho tất cả các thẻ HTML.
- CSS2 được công bố vào 5/1998, được phát triển dựa trên CSS1. Bổ sung sự hỗ trợ tới một số thiết bị (như máy in, …), các thiết bị về âm thanh, các bảng, …
- CSS3 được công bố vào 6/1999. Trong phiên bản này, CSS được phân chia thành các Module nhỏ và từng Module chịu trách nhiệm cho một tính năng cụ thể nào đó
Cú pháp của CSS
Trước khi bàn chi tiết, chúng ta tạm hình dung thế này.
HTML được tạo chỉ để miêu tả nội dung của một trang web. Các thẻ HTML nói chung chỉ nhằm hiển thị văn bản với cỡ chữ to hay nhỏ, hình ảnh...CSS sẽ "chế biến" các thẻ đó tùy theo ý đồ của người tạo webpage. Ví dụ với thẻ H1, chúng ta có thể cho thêm màu sắc xanh, đỏ, tím, vàng...Đặt văn bản qua bên phải, bên trái hoặc chính giữa trang web...Tức là, trong cú pháp của CSS, ta sẽ có "thẻ gốc", ví dụ H1, sau đó ta sẽ có "mắm muối" là CSS, đại khái sẽ thế này
Thẻ H1 => Màu đỏ => Canh qua phải => Font chữ Arial.
Nói cách khác đây là cú pháp CSS :
selector { property: value }
Trong đó:
- Selector: selector là một thẻ HTML mà tại đó một bạn áp dụng một style cho nó. Đó có thể là bất kỳ một thẻ HTML nào, như thẻ div, thẻ span, thẻ p...
- Property: (thuộc tính) Là property của một kiểu thuộc tính của thẻ HTML. Nói một cách đơn giản thì tất cả các thuộc tính trong HTML được chuyển đổi thành các CSS property. Đó có thể là color, border....
- Value: Là các giá trị được gán cho các property. Ví dụ, color có thể có các giá trị là red #F1F1F1...
Như ví dụ trên, H1 là selector, color là property, red là value. Mỗi cặp property:value ngăn cách nhau bởi dấu chấm phẩy.
Trong ví dụ đầu tiên của phần trước, chúng ta đã thấy điều này
h1 {
color: white;
text-align: center;
}
Không có nhận xét nào:
Đăng nhận xét