Mục lục nội dung
- Độ ưu tiên trong CSS
- Các bộ chọn mới trong CSS3
- CSS3 bo tròn góc và màu sắc rgba
- Hiệu ứng chuyển động với transition
- Phép biến đổi với transform
- Hoạt cảnh với animation
- Tiền tố trình duyệt trong CSS3
- Các thẻ mới trong HTML5
- Các điều khiển biểu mẫu mới trong HTML5
Giới thiệu khóa học
Khóa học này giúp bạn nắm bắt các tính năng mới của HTML5 và CSS3, hiểu được cách áp dụng chúng vào thực tế và các tình huống sử dụng phổ biến.
1. Độ ưu tiên trong CSS
Độ ưu tiên CSS (còn gọi là specificity) xác định xem quy tắc CSS nào sẽ được áp dụng khi có nhiều quy tắc cùng tác động lên một phần tử. Khi các quy tắc có cùng độ ưu tiên, quy tắc được viết sau cùng sẽ ghi đè lên các quy tắc trước đó.
Các cấp độ độ ưu tiên
Có thể phân loại các cách áp dụng CSS thành các cấp độ và tính toán độ ưu tiên theo cấp độ:
- !important - Thêm vào giá trị thuộc tính, độ ưu tiên là 10000
- Style inline - Ví dụ: style="", độ ưu tiên là 1000
- Bộ chọn ID - Ví dụ: #container, độ ưu tiên là 100
- Class, pseudo-class và bộ chọn thuộc tính - Ví dụ: .menu, :hover, độ ưu tiên là 10
- Thẻ HTML và pseudo-element - Ví dụ: div, p, ::before, độ ưu tiên là 1
- Bộ chọn tổng quát (*), con (>), liền kề (+), anh em (~) - Độ ưu tiên là 0
Ví dụ tính toán độ ưu tiên
Ví dụ 1:
<style type="text/css">
p{
color: green !important;
}
</style>
......
<p style="color:purple">Đoạn văn bản này</p>
<!--
Quy tắc đầu có độ ưu tiên 10000+1=10001
Quy tắc inline có độ ưu tiên 1000
Kết quả: màu chữ là green
-->
Ví dụ 2:
<style type="text/css">
#main .content h3{
color: green;
}
#main .wrapper h3{
color: purple;
}
</style>
......
<div id="main">
<div class="wrapper">
<h3>Tiêu đề h3</h3>
</div>
</div>
<!--
Quy tắc thứ nhất: 100+10+1 = 111
Quy tắc thứ hai: 100+10+1 = 111 (cùng độ ưu tiên, viết sau nên được áp dụng)
Kết quả: màu chữ là purple
-->
2. Các bộ chọn mới trong CSS3
Các pseudo-class cho phần tử con:
- E:nth-child(n) - Chọn phần tử E là con thứ n của phần tử cha
- E:first-child - Chọn phần tử E là con đầu tiên
- E:last-child - Chọn phần tử E là con cuối cùng
- E > F - Chọn các phần tư F là con trực tiếp của E
- E ~ F - Chọn các phần tử F nằm sau E (cùng cha)
- E + F - Chọn phần tử F ngay liền kề sau E
Ví dụ sử dụng nth-child:
<style type="text/css">
.items span:nth-child(3){
background-color: orange;
}
</style>
......
<div class="items">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<!-- Phần tử thứ 3 sẽ có nền màu cam -->
Các bộ chọn thuộc tính:
- E[attr] - Chọn phần tử có thuộc tính attr
- E[attr='value'] - Chọn phần tử có thuộc tính attr với giá trị chính xác là "value"
- E[attr^='value'] - Chọn phần tử có thuộc tính attr, giá trị bắt đầu bằng "value"
- E[attr$='value'] - Chọn phần tử có thuộc tính attr, giá trị kết thúc bằng "value"
- E[attr*='value'] - Chọn phần tử có thuộc tính attr, giá trị chứa "value"
Ví dụ bộ chọn thuộc tính:
<style type="text/css">
a[href^="https"]{
color: green;
}
a[href$=".pdf"]{
color: red;
}
</style>
......
<a href="https://example.com">Liên kết HTTPS</a>
<a href="document.pdf">Tải PDF</a>
3. CSS3 bo tròn góc và màu sắc rgba
Bo tròn góc (border-radius)
Thuộc tính border-radius cho phép tạo các góc bo tròn cho phần tử:
/* Bo tròn góc trên trái */
border-top-left-radius: 40px 80px;
/* Đặt cả 4 góc khác nhau */
border-radius: 20px 40px 80px 120px;
/* Bo tròn cả 4 góc giống nhau - tạo hình tròn */
border-radius: 50%;
Định dạng màu rgba
rgba cho phép định nghĩa màu sắc kèm theo độ trong suốt:
.container{
/* opacity áp dụng cho toàn bộ phần tử */
opacity: 0.3;
/* Tương thích với IE cũ */
filter: alpha(opacity=30);
}
/* rgba: R (đỏ), G (xanh lục), B (xanh lam), A (độ trong suốt 0-1) */
.overlay{
background-color: rgba(0, 0, 0, 0.5);
}
4. Hiệu ứng chuyển động với transition
Transition cho phép tạo hiệu ứng chuyển đổi mượt mà khi thuộc tính CSS thay đổi:
- transition-property - Xác định thuộc tính cần chuyển đổi (width, height, background-color...)
- transition-duration - Thời gian chuyển đổi (1s, 500ms...)
- transition-timing-function - Hàm chuyển động: linear (đều), ease (giảm tốc), ease-in, ease-out...
- transition-delay - Độ trễ trước khi bắt đầu chuyển đổi
- transition - Viết tắt cho cả 4 thuộc tính trên
Ví dụ:
.card{
transition: all 0.3s ease-in-out;
}
.card:hover{
transform: scale(1.05);
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
5. Phép biến đổi với transform
Transform cho phép xoay, co giãn, dịch chuyển và nghiêng phần tử:
- translate(x, y) - Dịch chuyển theo trục X và Y
- scale(x, y) - Co giãn theo trục X và Y
- rotate(deg) - Xoay theo độ
- skew(x-angle, y-angle) - Nghiêng theo trục
- perspective - Thiết lập khoảng cách quan sát 3D
- transform-style - flat | preserve-3d - Hiển thị không gian 3D
- translateX, translateY, translateZ - Dịch chuyển 3D
- rotateX, rotateY, rotateZ - Xoay 3D
- transform-origin - Xác định tâm biến đổi
- backface-visibility - Ẩn/hiện mặt sau của phần tử
Ví dụ: Hiệu ứng lật thẻ
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Hiệu ứng lật thẻ</title>
<style type="text/css">
.flip-card{
width: 300px;
height: 200px;
margin: 100px auto 0;
transform-style: preserve-3d;
position: relative;
}
.flip-card .front{
width: 300px;
height: 200px;
position: absolute;
background-color: skyblue;
left: 0;
top: 0;
transform: perspective(800px) rotateY(0deg);
backface-visibility: hidden;
transition: all 0.5s ease;
}
.flip-card .back{
width: 300px;
height: 200px;
text-align: center;
line-height: 200px;
background-color: tomato;
position: absolute;
left: 0;
top: 0;
transform: rotateY(180deg);
backface-visibility: hidden;
transition: all 0.5s ease;
}
.flip-card:hover .front{
transform: perspective(800px) rotateY(180deg);
}
.flip-card:hover .back{
transform: perspective(800px) rotateY(0deg);
}
</style>
</head>
<body>
<div class="flip-card">
<div class="front">Mặt trước</div>
<div class="back">Mặt sau</div>
</div>
</body>
</html>
6. Hoạt cảnh với animation
Animation cho phép tạo các hoạt cảnh phức tạp hơn transition:
- @keyframes - Định nghĩa các khung hình chính
- animation-name - Tên animation
- animation-duration - Thời gian thực hiện
- animation-timing-function - Hàm thời gian: linear, ease, steps(n)
- animation-delay - Độ trễ
- animation-iteration-count - Số lần lặp: n hoặc infinite
- animation-direction - Hướng: normal, alternate
- animation-play-state - Trạng thái: paused, running
- animation-fill-mode - Trạng thái trước/sau: none, forwards, backwards, both
Ví dụ: Hoạt cảnh nhân vật đi bộ
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Hoạt cảnh đi bộ</title>
<style type="text/css">
.sprite-container{
width: 150px;
height: 200px;
border: 1px solid #ddd;
margin: 50px auto 0;
position: relative;
overflow: hidden;
}
.sprite-container img{
display: block;
width: 1200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
animation: walk 1s steps(8) infinite;
}
@keyframes walk{
from{
left: 0px;
}
to{
left: -1200px;
}
}
</style>
</head>
<body>
<div class="sprite-container"><img src="images/character.png"></div>
</body>
</html>
7. Tiền tố trình duyệt trong CSS3
Để đảm bảo CSS3 tương thích với các trình duyệt khác nhau, cần thêm tiền tố:
- -ms- - Microsoft Internet Explorer, Edge
- -moz- - Mozilla Firefox
- -o- - Opera
- -webkit- - Chrome, Safari, Edge (phiên bản cũ)
Ví dụ:
.rotate-element
{
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
Tự động thêm tiền tố với Autoprefixer
Có thể sử dụng plugin Autoprefixer để tự động thêm tiền tố. Cài đặt qua Package Control trong Sublime Text.
Cấu hình phím tắt (Preferences → Key Bindings - User):
{ "keys": ["ctrl+shift+x"], "command": "autoprefixer" }
Cấu hình tùy chọn (Preferences → package setting → AutoPrefixer → Setting - User):
{
"browsers": ["last 10 versions"],
"cascade": true,
"remove": true
}
Thiết lập "last 10 versions" để hỗ trợ 10 phiên bản mới nhất của mỗi trình duyệt. Tùy chọn "cascade" giúp căn chỉnh đẹp mã CSS, "remove" xóa các tiền tố không cần thiết.
8. Các thẻ mới trong HTML5
Thẻ ngữ nghĩa mới
- <header> - Phần đầu trang, tiêu đề
- <nav> - Thanh điều hướng
- <article> - Bài viết độc lập
- <section> - Phần nội dung trong bài viết
- <aside> - Thanh bên
- <footer> - Phần chân trang
Thẻ media
- <audio> - Chèn âm thanh
- <video> - Chèn video
Tương thích với trình duyệt cũ:
Để IE9 và các trình duyệt cũ nhận diện các thẻ HTML5 mới, thêm script sau vào phần <head>:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
9. Các điều khiển biểu mẫu mới trong HTML5
HTML5 bổ sung nhiều loại input mới:
<label>Địa chỉ web:</label><input type="url" name="website" required><br><br>
<label>Email:</label><input type="email" name="email" required><br><br>
<label>Ngày:</label><input type="date" name="birthday"><br><br>
<label>Giờ:</label><input type="time" name="appt"><br><br>
<label>Tuần:</label><input type="week" name="week"><br><br>
<label>Số lượng:</label><input type="number" name="quantity"> <br><br>
<label>Phạm vi:</label><input type="range" name="volume"><br><br>
<label>Điện thoại:</label><input type="tel" name="phone"><br><br>
<label>Màu sắc:</label><input type="color" name="favcolor"><br><br>
<label>Tìm kiếm:</label><input type="search" name="keyword"><br><br>
Các thuộc tính mới cho form
- placeholder - Hiển thị văn bản gợi ý trong ô nhập liệu
- autofocus - Tự động đặt con trỏ vào ô nhập liệu
- autocomplete - Bật/tắt gợi ý tự động
- required - Bắt buộc nhập liệu
- pattern - Định dạng mẫu (regex)