Kết thúc bài này bạn có khả năng:
- Biết cách định dạng văn bản với CSS: inline CSS, embed/internal CSS và external CSS
- Biết cách định nghĩa và sử dụng các selector cơ bản: HTML, class và id
LÝ THUYẾT
CSS là gì?
CSS - Cascading Style Sheets: là ngôn ngữ được dùng để trình bày văn bản viết bằng ngôn ngữ HTML
hay XHTML. Hay nói cách khác CSS là ngôn ngữ tạo style cho trang web.
Bố cục CSS dạng hộp
- Margin: Là khoảng cách xung quanh bên ngoài của phần tử.
- Border: Là đường liền nằm bên ngoài phần đệm.
- Padding: Không gian xung quanh nội dung.
Có 3 loại CSS:
Inline CSS: áp dụng trực tiếp trên một đối tượng nhất định bằng
cách sử dụng thuộc tính style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tìm hiểu CSS inline</title>
</head>
<body>
<h1 style="color:blue;">CSS inline - Đây là dòng tiêu đề</h1>
<p style="color:red;">CSS inline</p>
</body>
</html>
Internal CSS: là đặt CSS ở đầu trang web để áp dụng kiểu dáng cho
toàn bộ trang, khi đó chỉ cần đặt đoạn CSS vào trong cặp thẻ <style>
rồi đặt vào trong phần header của website (giữa <head> và
</head>):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tìm hiểu CSS Embed/Internal</title>
<style> /* internal CSS */
.thuykieu{
color: blue;
font-style: italic;
}
strong{
font-weight: bold;
color: red;
}
</style>
</head>
<body>
<div class="thuykieu">
Đầu lòng hai ả tố nga <br>
<strong>Thúy Kiều</strong> là chị, em là <strong>Thúy Vân</strong> <br>
Mai cốt cách tuyết tinh thần <br>
Mỗi người một vẻ mười phân vẹn mười <br>
</div>
</body>
</html>
External CSS: là cách thuận tiện nhất bởi vì nó được trong một file
.css. Bạn có thể tạo một file CSS với phong cách riêng rồi tải lên. Cách này
sẽ cải thiện được thời gian tải trang trên website của bạn.
Ví dụ:
Tạo file CSS có tên
mystyle.css
.thuykieu{
color: blue;
font-style: italic;
}
strong{
font-size: larger;
font-weight: bold;
color: red;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tìm hiểu CSS External</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<div class="thuykieu">
Đầu lòng hai ả tố nga <br>
<strong>Thúy Kiều</strong> là chị, em là <strong>Thúy Vân</strong> <br>
Mai cốt cách tuyết tinh thần <br>
Mỗi người một vẻ mười phân vẹn mười <br>
</div>
</body>
</html>
Độ ưu tiên:
Nếu có nhiều CSS trên cùng một trang HTML thì độ ưu tiên sẽ là:
- Ưu tiên 1: Inline CSS.
- Ưu tiên 2: External and internal style sheets.
- Ưu tiên 3: Browser default – Mặc định của trình duyệt
- Nếu các kiểu khác nhau được xác định trên cùng mức ưu tiên, kiểu cuối cùng có mức ưu tiên cao nhất.
Bài 1:
Thiết kế trang web trình bài thơ SAO theo yêu cầu và kết quả như
THỰC HIỆN
Bài 2:
Nội dung bài thơ:
ANH HỨA MÃI MÃI CHỈ YÊU EMEm chẳng còn Con gái nữa đâu anhChữ trinh nguyên chẳng kịp dành anh nữaNgười đến trước trao em bao thề hứaCướp mất rồi, em khờ dại còn tin.Em chẳng còn là đứa Con gái vẹn nguyênVẫn vui tươi, mộng mơ nhưng bình yên đã mấtEm sợ – Sợ một ngày sự thậtChẳng giữ nổi anh, anh sẽ hận, sẽ cười.Anh hứa mãi mãi chỉ yêu emEm chẳng còn tự tin lúc bên ngườiCái gia giáo, cái chữ trinh đè thân em trĩu nặngRồi một ngày biết em không còn trong trắngNhư anh vẫn chờ, anh có hết yêu em ?Em vẫn cầu, vẫn nguyện ước bao đêmVẫn sợ lo anh sẽ xa em mãiBởi Con gái khi yêu luôn khờ dạiAnh có yêu nhiều để giữ chặt vòng tay?
Sử dụng external để định bài thơ với các yêu cầu:
- Nội dung các đoạn in nghiêng (dùng thẻ em)
- Chữ anh, em định dạng in đậm, màu nâu
- Đoạn 1 màu đỏ, đoạn 2 màu xanh (green), đoạn 3 màu blue, đoạn 4 màu giống đoạn 1
Bài 1:
- css
- html
em.doan3{
color: blue;
}
strong{
color: brown;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lab 3 | Bài 1, bài thơ SAO</title>
<style>
.doan2{
color: green;
}
strong{
color: brown;
}
</style>
<link rel="stylesheet" href="css/lab3.1.doan3.css">
</head>
<body>
<h2>SAO</h2>
<!-- Đoạn 1 CSS inline style-->
<em style="color: red;">
Một ngôi <strong style="color:brown;">sao</strong> vừa rơi <br>
vụt tắt trên bầu trời <br>
hay là tên người ấy <br>
vụt tắt ở trong tôi? <br> <br>
</em>
<!-- Đoạn 2 CSS nội bộ/embed - Internal nhúng trong html-->
<em class="doan2">
Vẫn thấy trên bầu trời <br>
có muôn vàn <strong> sao</strong> sáng <br>
mà ở trong lòng tôi <br>
như một hành lang vắng <br> <br>
</em>
<!-- Đoạn 3 CSS Extention, bên ngoài-->
<em class="doan3">
Một ngôi <strong>sao</strong> vừa tắt <br>
bầu trời vẫn không buồn <br>
<strong>sao</strong> tên người ấy tắt <br>
trong lòng tôi cô đơn? <br> <br>
</em>
</body>
</html>
Bài 2:
- css
- html
em.doan1{
color: red;
}
strong{
color: brown;
}
em.doan2{
color: green;
}
em.doan3{
color: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lab 3 Bài 2</title>
<link rel="stylesheet" href="css/lab3.2.css">
</head>
<body>
<h2>ANH HỨA MÃI MÃI CHỈ YÊU EM</h2>
<em class="doan1">
<strong>Em</strong> chẳng còn Con gái nữa đâu <strong>anh</strong> <br>
Chữ trinh nguyên chẳng kịp dành <strong>anh</strong> nữa <br>
Người đến trước trao <strong>em</strong> bao thề hứa <br>
Cướp mất rồi, <strong>em</strong> khờ dại còn tin. <br> <br>
</em>
<em class="doan2">
<strong>Em</strong> chẳng còn là đứa Con gái vẹn nguyên <br>
Vẫn vui tươi, mộng mơ nhưng bình yên đã mất <br>
<strong>Em</strong> sợ – Sợ một ngày sự thật <br>
Chẳng giữ nổi <strong>anh, anh</strong> sẽ hận, sẽ cười. <br>
<strong>Anh</strong> hứa mãi mãi chỉ yêu <strong>em</strong> <br> <br>
</em>
<em class="doan3">
<strong>Em</strong> chẳng còn tự tin lúc bên người <br>
Cái gia giáo, cái chữ trinh đè thân <strong>em</strong> trĩu nặng <br>
Rồi một ngày biết <strong>em</strong> không còn trong trắng <br>
Như <strong>anh</strong> vẫn chờ, <strong>anh</strong> có hết yêu <strong>em</strong> ? <br><br>
</em>
<em class="doan1">
<strong>Em</strong> vẫn cầu, vẫn nguyện ước bao đêm <br>
Vẫn sợ lo <strong>anh</strong> sẽ xa <strong>em</strong> mãi <br>
Bởi Con gái khi yêu luôn khờ dại <br>
<strong>Anh</strong> có yêu nhiều để giữ chặt vòng tay? <br>
</em>
</body>
</html>
No comments:
Post a Comment