Tài liệu HTML-CSS cơ bản

<!
DOCTYPE html> này là cái bắt buộc cần có

<html> mỗi html chỉ có 1 cặp thẻ html duy nhất
<head> đây là cặp thẻ head nó có dạng phần đầu web
<title> tiltle là cái hiển thị tên vd face youtube
f8 f8 là ví dụ
</title>
<meta charset="utf-8"> đây là thẻ luôn luôn phải có vì thẻ này để hỗ trợ viết
tiếng việt trong body
</head>

<body> phần này viết nội dung trang
xin chào các bạn nhé
</body>
</html>
 Ctrl + / để tạo comment này dùng để ghi nhớ

 Windows: Ctrl + /
 MacOS: Cmd + /
Ví dụ:


1. h1 - h6 head này có nghĩa hiển thị chủ thể to nho vd hiển thị tên đầu bài tô
nhỏ dần từ h1 đến h6 này chèn được nhiều nơi nhé
<h1>VIDEO NÀY SẼ GIÚP BẠN TẬP TRUNG HỌC TRONG 1 TIẾNG</h1>
2. P paragraph này để trèn 1 đoạn văn vào

<p> Chào cậu, không biết việc học của cậu dạo này như thế nào rồi? Tớ mong là
cậu vẫn đang cố gắng hết mình, hướng tới điều mà mình mơ ước </p>
3. img image này để chèn ảnh vào rồi này nó có 2 phần 1 là src và alt thì src
là mình cop nguồn ảnh vào để hiển thị còn khi mà link ảnh bị hư hỏng hết hạn thì
lúc này alt sẽ lên tiếng nó sẽ hiển thị phần được ghi trong alt
<img src="https://static2.yan.vn/YanNews/2167221/202203/khi-chat-blackpink-khi-
solo-tren-bia-tap-chi-vogue-e8fe602a.jpg" alt="ảnh hắc hường">
4. a anchor này thì để tạo ra 1 đường dẫn liên kết sang 1 link khác
<a href="https://www.youtube.com/watch?v=ZxhCpt-3Adg"> Tới đây học nhé </a>
5. ul, li unordered list, list item này là phần tạo 1 danh sách kiểu danh
sách các bài đọc ấy
Ul thì là chủ thể lớn mỗi ul có thêm các li
<ul>

<li> học đi </li>
<li> học nhanh lên </li>
</ul>
6. table đây là phần tạo bảng hang ngang dọc thì nó cũng gồm 2 phần là thead
và tbody thì phần thead thì nó hiển thị cái hang ngang lớn kiểu tên tuổi
Còn phần tbody thì nó thể hiện hangf ngang nhỏ gồm các cá thể kiểu ngô chí cường
2003 này thì nó gồm cái tr và td nói chung thì nó cũng là phân cấp chủ thể xem là
hiểu
<table>
<thead>
<th> Tên </th>
<th> sđt</th>
<th> địa chỉ </th>
</thead>
<tbody>
<tr>
<td> Ngô Chí Cường</td>
<td> 0999999999</td>
<td> Thanh Hóa </td>
</tr>
<tr>
<td>aaaaa</td>
<td>88888888</td>
<td> thiệu hóa </td>
</tr>
</tbody>
</table>
7. input này thì tạo ô vuông ra cho điền ấy còn đổi type thì có thể tạo ra
ô để tick có các kiểu như radio hay checkbox chỉ mình radio là có thể tick chọn 1
trong 3 thì phải
<input name="gender" type="radio">


8. button này tạo ra 1 cái nút thôi

<button>
đăng nhập vào server mới nhé
</button>
9. div
Còn cái này thì nó kiểu để bao quanh 1 chủ thể hơi khó giải thích nhưng cứ hiểu
vậy là đc
Đây là những cái nội dung cần nhớ cơ bản trong phần body của html
Tổng quát ví dụ cụ thể
<!DOCTYPE html>

<html>

<head>
<title>
f8
</title>
<meta charset="utf-8">
</head>

<body>
<div>
<h1>VIDEO NÀY SẼ GIÚP BẠN TẬP TRUNG HỌC TRONG 1
TIẾNG</h1>
<p> Chào cậu, không biết việc học của cậu dạo này như
thế nào rồi? Tớ mong là cậu vẫn đang cố gắng hết mình, hướng tới điều mà mình mơ
ước </p>
<img
src="https://static2.yan.vn/YanNews/2167221/202203/khi-chat-blackpink-khi-solo-
tren-bia-tap-chi-vogue-e8fe602a.jpg" alt="ảnh hắc hường">
<a href="https://www.youtube.com/watch?v=ZxhCpt-3Adg">
Tới đây học nhé </a>
<ul>

<li> học đi </li>
<li> học nhanh lên </li>
</ul>
<table>
<thead>
<th> Tên </th>
<th> sđt</th>
<th> địa chỉ </th>
</thead>
<tbody>
<tr>
<td> Ngô Chí Cường</td>
<td> 0999999999</td>
<td> Thanh Hóa </td>
</tr>
<tr>
<td>aaaaa</td>
<td>88888888</td>
<td> thiệu hóa </td>
</tr>
</tbody>
</table>


<button>
đăng nhập vào server mới nhé
</button>
</div>

</body>
</html>
Attribute trong html thì đây được con như cái chú thích ( thuộc tính) khi m để con
trỏ chuột vào 1 chủ thể nó sẽ hiện lên cái chú thích chỗ con trõ chuột ấy
Có 3 cách sử dụng css strong html đó là internal external Inline
Internal: sử dụng 1 cặp thẻ style đặt trong file html và viết css ở trong cặp thẻ style đó
<style>
h1 {
color:red; font-size: 20px;
}

</style>
External : sử dụng 1 file css bên ngoài và sử dụng 1 thẻ link để dẫn đến file css đó
<link rel="stylesheet" href="main.css">
Inline: sử dụng 1 attribute style trong thẻ mở của html và viết các thuộc tính css vào
Selector Ví dụ Mô tả
.class .intro Chọn tất cả các thẻ có class=“intro”
Chọn tất cả các thẻ có cả name1 và name2 được đặt trong thuộc tính class của
.class1.class2 .name1.name2
nó
.class1 .class2 .name1 .name2 Chọn tất cả các thẻ có class=“name2” là con của một phần tử có class=“name1”
* * Chọn tất cả các thẻ
element h2 Chọn tất cả các thẻ h2
element.class div.box Chọn tất cả thẻ div có class=“box”
element, element div, h2 Chọn tất cả thẻ div và h2
element element div p Chọn tất cả thẻ p trong thẻ div
element >
div > p Chọn tất cả thẻ p là con trực tiếp của thẻ div
element
element +
div + p Chọn thẻ p đứng liền kề sau thẻ div
element
element ~
div ~ p Chọn tất cả thẻ p đứng sau thẻ div
element
/* Lựa chọn toàn bộ các thẻ */

*{
/* `font-style: italic` là chữ nghiêng */
font-style: italic;
}
/* Lựa chọn toàn bộ các thẻ p */

p{
/* `text-decoration: underline` là chữ gạch chân */
text-decoration: underline;
}
/* Lựa chọn toàn bộ các thẻ có class-1 */

.class-1 {
color: red;
}
/* Lựa chọn toàn bộ thẻ đồng thời có cả class-2 và class-3 */

.class-2.class-3 {
color: green;
}
/* Lựa chọn thẻ có class-5 là con của thẻ class-4 */

.class-4 .class-5 {
color: violet;
}
/* Lựa chọn toàn bộ các thẻ p có class-6 */

p.class-6 {
color: blue;
}
/* Lựa chọn toàn bộ các thẻ h3, h4 */

h3, h4 {
color: brown;
}
/* Lựa chọn toàn bộ thẻ li là con của class list */

.list li {
color: deepskyblue;
}
/* Lựa chọn toàn bộ thẻ li là con trực tiếp của thẻ có class list */
.list > li {
color: fuchsia;
}
/* Lựa chọn 1 thẻ p đứng liền kề sau class-9 */

.class-9 + p {
color: goldenrod;
}
/* Lựa chọn toàn bộ thẻ p đứng sau class-10 */

.class-10 ~ p {
color: limegreen;
}
Độ ưu tiên trong CSS
1. Internal, External? Cái nào mới hơn cái đó sẽ được áp dụng
2. Inline - 1000
3. #id - 100
4. .class - 10
5. tag - 1
6. Equal specificity? Vd nếu 2 thuộc tính giống nhau thì sẽ ưu tiên cái mới hơn hoặc có thể cộng dồn
điểm dựa trên điểm ở trên
7. Universal selector: cái này kiểu phổ cập chung cho toàn css nó kiểu thẻ * áp dụng cho toàn bộ mọi thứ
cái này thì điểm chỉ có 0 thôi nên dễ bị oánh
and inherited: kiểu kế thừa cha con này cũng 0 nên dễ bị oánh.
Đơn vị trong css

Đơn vị cố định px
Đơn vị bất định
% này dựa theo phần trăm của body
Rem phụ thuộc thẻ html
Em phụ thuộc thẻ gần nó nhất có font-size
Vw này phụ thuộc vào chiều của html
Vh tương tự vw
Nhớ là 100% là 16px
Thẻ margin tạo ra khoảng chống ngoài ý muốn hai bên nếu muốn khắc phục dùng * selector cho thẻ
margin và padding
Một số hàm trong css
Var
:root {
--heading-color: #333333;
--text-color: #404040;
}
h1{
color: var(--heading-color);
}
p{
color: var(--text-color);
}
Rgb đây là hàm chọn màu phù hợp
}
.box {
width: calc(120px + 20px);
height: 70px;
background: rgb(86, 107, 105);
}
Calc đây là hàm tính toán cộng trừ nhân chia
Ví dụ ở trên luôn
Attr: đây là hàm nhằm mục đích không phải thay đổi link 2 lần khi mày muốn lôi cái link đó lên
a::after{
content: " (" attr(href)")";
}
Rgba này là màu trong suốt nhé nó gồm 4 ô 3 ô bảng màu và 1 ô chọn tỉ lệ trong suốt từ 0 đến 1
background-image: linear-gradient(0, rgba(255, 0, 0, 0.5), rgba(145, 145, 0,

0.5)),
còn với linear-gradient thì này nó là cái dải màu kiểu dải màu từ trắng đe4én xanh các kiểu nói chung là
vậy
Pseudo classes
:root này thì khó giải thích tự xem vd ở trên
:hover: này thì lướt qua thì thuộc tính sẽ hoạt động vd t cho hover màu cam vào heading thì khi lướt qua
chạm vào heading nó sáng lên
h1:hover{
color:aquamarine;
}
:active này thì t phải click vào nó mới sáng
h1:active{
color:aquamarine;
:first-child hai thằng cuối này thì nó na ná nhau khi trong 1 tập con vd list trong ul thì t muốn chọn con
đầu và con cuối thì phải sử dụng nó
:last-child
Pseudo elements
::before
::after
::first-letter cái này thì chọn cho chữ cái đầu
::first-line cái này chọn cho dòng đầu
::selection cái này là khi mày bôi chuột vào thì nó hiện những cái thuộc tính mà đã xác định cho nó vd
như là màu rồi phông các kiểu
h1::selection{
color: red;

}
Sau chú thích nhiều hơn
Padding này thì nó như 1 miếng đệm đội thêm cho cái khung ấy
.box{

width: 40px;
height: 40px;
}
.box1{
background-color:red;
}
.box2{
background-color:aqua;
}
.box3{
background-color:black;
padding-left: 20px;
}
Border này nó là đường viền khá giống với cái padding những này nó ko làm tăng mà tạo ra 1 cái viền vd
viền cho khung ảnh viền cho khung chữ nó có nhhieeuf định dạng nữa nên thoải mái.
.box1{
background-color:red;
border-top-width:2px;
border-color:blueviolet;
border-style:solid;
border-left-width:0;
border-bottom-width:0;
border-right-width:0;
}
Viết tắt chỗ box2
.box2{
background-color:aqua;
border: 10px solid red;
Margin thì nó là lôi khối ra chứ không làm dầy khối kiểu như m dich chuyển vẫn giữ nguyên kích thước
ấy
.box3{
background-color:black;
padding-left: 20px;
margin: 20px;
}
Cuối cùng box sizing dùng để căn chỉnh cho chuẩn khi m add cái border và padding vào nói chung căn
chỉnh
.box4{
width: 100px;
height: 100px;
padding: 10px;
border: 2px solid red;
background-color: blue;
box-sizing: border-box;
}
Background thì nó có nhiều background image để gắn ảnh size để chỉnh nói chug tìm là ra
Nói đến thằng background-size thì nó lại có 2 loại là contain và cover thì thằng contain thì nó sẽ cố lấy
cái phần dài hơn kiểu nói sao nhỉ hơi khó nói chạy code là biết
Background orgin thì nó có 3 loại border padding content-box
Background- position đây là lệnh căn chỉnh ảnh nhé không nhớ có thể xem lại những nếu liệt kê kiểu
20px 30px thì nó hiểu là x y theo trục
background-position: 30px 50px;
.heading{
width: 100%;
height: 100vh;
background-image: linear-gradient(0, rgba(255, 0, 0, 0.5), rgba(145, 145, 0,
0.5)),
url(https://cellphones.com.vn/sforum/wp-content/uploads/2018/11/2-9.png);
background-repeat: no-repeat;
background-size: cover;
background-position: 30px 50px;
cách viết tắt
background: url(https://img.nhandan.com.vn/Files/Images/2020/07/26/nhat_cay-
1595747664059.jpg) no-repeat center / contain;
CSS position relative này sẽ di chuyển đè lên đc các phần khác quan trọng là nó sẽ lấy
gốc là vị trí ban đầu cũng có các chức năng khác như top bottom left right
h1{
position: relative;
right: 40px;
}

Absolute dùng để di chuyển phần tử con trong phần tử cha phần tử cha lấy gốc là
position relative làm gốc để di chuyển
.heading{
width: 100%;
height: 100vh;
background-color: red;
position: relative;
}
h1{
position: relative;
right: 40px;
}
.heading-child{
width: 50px;
height: 50px;
background-color: violet;
position: absolute;
top: 0;
right: 20px;
}
CSS position fixed

Này để tạo ra 1 thanh di chuyển so với cửa sổ trình duyệt chứ ko phụ thuộc cha con như thằng
absolute
h1{
height: 1000px;
}

.school{
width: 100%;
height: 42px;
background-color: black;
position: fixed;
top: 0;

}
Cái cuối là sticky này thì ít phần mềm hỗ trợ nên không khuyến khích dùng nếu muốn có thể xem vid
h1 {
margin-top: 40px;
padding: 0 16px;
color: I#fff;
background-color: O#333;
position: sticky;
position: -webkit-sticky;
top: 0;
một vài trick cơ bản dùng trong css

cách để căn giữa chữ thì có thể sử dụng nhiều cách sau:
thứ nhất là dùng cái text-align nhớ là lệnh này cỏ thể để trong thẻ cha thay vì gọi con ra vì nó
có tính kế thừa
.school{
height: 100px;
background-color: orange;

}
h1{
text-align: center;
line-height: 100px;

}
Có thể để ntn:
.school{
height: 100px;
background-color: orange;
text-align: center;
line-height: 100px;

}
Cách khác để căn giữa sử dụng:

.school{
height: 100px;
display: flex;

}
h1{
margin: auto;
}
Cách margin: auto; này thì có thể căn nhiều loại cách đều nhau
Đến cách tiếp để căn đó vẫn dùng flex nhưng thêm cái align-items
.school{
height: 100px;
display: flex;
align-items: center ;
justify-content: center;

}
Này thì center thì nó sẽ cho sát nhau các chủ thể
Như thế này
Còn muốn đổi cso thể đổi cái justify-content thành around hoặc between
Đối với trục y cùng chiều thì âm ngược chiều thi dung vd còn với x thì ngược lại
Cách để đưa ảnh khác khi ảnh gốc bị lỗi link vào cái này t cũng chưa làm đc nên cứ ghi ra kiến
thức bổ ích học ko thừa dùng 1 cái thôi nhé này t tổng hợp cả 2 cái lại với nhau
<style>
div {
width: 200px;
height: 200px;
background-image:
url('https://image.thanhnien.aaavn/w1024/Uploaded/2022/cjhwpdhnw/2022_03_02/
ronaldo-afp-9748.jpg'), url('/img/placeholder-1-1.png');
background-repeat: no-repeat;
background-size: 100%;
}
</style>
</head>
<body>
<div>

</div>
</body>
</html>
Những thành phần của 1 trang web

1. Header này là đầu trang nhé
Cái thanh đen đen nhé

2. Navigation ( điều hướng của trang)
Có thể nhìn ở trên kiểu home hay band hay tour ở trên nhé
3. Breadcrumb
Nó kiểu thanh chỉ cho mình biết đang nằm ở đâu ấy
Đay là vd nhé
4. Sidebar
Nó kiểu dạng thư mục menu thường nằm bên trái hoặc phải ấy
Cái thanh bên trái nhé
5. slider
Kiểu cái slide ấy nó tự động chạy các slide như trên pp ấy nhé
6. footer(kiểu chân trang nó nằm ở dưới đa phần để link face các
kiểu)
7. content thành phần này là thành phần nội dung nhé
8. banner kiểu cái hình ảnh quảng cáo ấy nhé
Cách làm phần header phần này luyện nhiều cho quen tay các kĩ thuật tầm 4-5 lần là ok nếu quên xem
vid header ấy nhé
Navigation
*{
padding: 0;
margin: 0;
}
html{
font-family: Arial, Helvetica, sans-serif;
}
#main {
}
#header {
height: 46px;
}
#nav, .subnav{
list-style-type: none;
}
#nav > li{
display: inline-block;
}
#nav li{

position: relative;
}
#nav > li > a{
color: #fff;
text-transform: uppercase;
}
#nav li a{
display: block;
padding:0 16px;
line-height: 46px;
text-decoration: none;
}
#nav li:hover .subnav{
display: block;
}
#nav > li:hover > a{
color: black;
background-color: #ccc;
}
#nav .subnav{
display: none;
position: absolute;
background-color: #fff;
top: 100%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
min-width: 160px;
}
#nav .subnav a{
color: black;
padding: 0 12px;
line-height: 38px;
}
#nav .subnav li:hover a{
color: black;
/* có thể viết gộp lại nhé làm nhuyễn thì xem lại đoạn phút thứ 1o */
}
#slider {

}
#content {
#footer {
Sự khác nhau của display inline, block và inline-block

https://sukhacnhau.com/cong-nghe/su-khac-nhau-giua-display-inline-block-va-inline-block/
Header cơ bản thế coi như là xong rồi. Để làm cái nút tìm kiếm bên phải thì phải sử dụng float: right
Tải về bộ theme trên themify rồi link vào sau đó tạo thêm các class coi hình ảnh ở dưới để hiểu rõ hơn
<li>
<a href="">More
<i class="nav-arrow-down ti-arrow-circle-down"></i>
</a>
<ul class="subnav">
<li><a href="">Merchandise</a></li>
<li><a href="">Extras</a></li>
<li><a href="">Media</a></li>
</ul>
</li>
</ul>
<div class="search-btn">
<i class="search-icon ti-search"></i>
</div>
Này bên html còn bên css ở dưới đây nhé
#nav .nav-arrow-down{
font-size: 14px;
}
#header .search-btn{
float: right;
padding: 0 21px;
}
#header .search-icon{
color: #fff;
font-size: 14px;
line-height: 46px;
}
#header .search-btn:hover{
background-color: #f44336;
cursor: pointer;
}
Full code phần header đây nhé đọc và ngẫm lại nhé:
 Bên index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lam web mau tren web 3</title>
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="stylesheet" href="./assets/css/font/themify-icons/themify-
icons.css">
</head>
<body>
<div id="main">
<div id="header">
<ul id="nav">
<li><a href="">Home</a></li>
<li><a href="">Band</a></li>
<li><a href="">Tour</a></li>
<li><a href="">Contact</a></li>
<li>
<a href="">More
<i class="nav-arrow-down ti-arrow-circle-down"></i>
</a>
<ul class="subnav">
<li><a href="">Merchandise</a></li>
<li><a href="">Extras</a></li>
<li><a href="">Media</a></li>
</ul>
</li>
</ul>
<div class="search-btn">
<i class="search-icon ti-search"></i>
</div>
</div>

<div id="slider">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
 Bên style.css:
*{
padding: 0;
margin: 0;
}
html{
font-family: Arial, Helvetica, sans-serif;
}
#main {
}
#header{
height: 46px;
position: fixed;
top: 0;
left: 0;
right: 0;
}
#nav{
}
#nav li {
position: relative;
}
#nav .subnav{
position: absolute;
background-color: #fff;
top: 100%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
min-width: 160px;
display: none;
}
#nav .subnav a{
color: #333;
padding: 0 16px;
line-height: 38px;
}
#nav li a{
text-decoration: none;
line-height: 46px;
padding: 0 16px;
display: block;
}
#nav > li:hover > a{
color: black;
}
#nav .subnav li:hover a{
color: black;
}
#nav > li{
}
#nav, .subnav{
list-style-type: none;
}
#nav li:hover .subnav{
display: block;
}
#nav > li > a{
color: #fff;
text-transform: uppercase;
}
#nav .nav-arrow-down{
font-size: 14px;
}
#header .search-btn{
float: right;
padding: 0 21px;
}
#header .search-icon{
color: #fff;
font-size: 14px;
line-height: 46px;
}
#header .search-btn:hover{
background-color: #f44336;
cursor: pointer;
}
#slider {
margin-top: 46px;
}
#content {
}
#footer {
Làm với slider

bên style.css
#slider {
position: relative;
margin-top: 46px;
padding-top: 50%;
/* làm ntn ý là chiều cao bằng 50% chiều rộng của chính nó tương tự với các %
khác cần nhớ in sâu*/
background: url('/assets/css/img/slider/slider1.jpg') top center / cover no-
repeat;
}
#slider .text-content{
position: absolute;
bottom: 47px;
color: #fff;
width: 100%;
/* left: 50%;
transform: translateX(-50%); đây là 1 cách căn giữa khác ngoài ra còn dùng
left: 0 right: 0 */
text-align: center;
}
#slider .text-heading{
font-weight: 500;
font-size: 20px;
margin-bottom: 25px;
}
#slider .text-description{
font-size: 15px;
/* margin-top: 25px; */
}
Bên index.html
<div id="slider">
<div class="text-content">
<h2 class="text-heading">New York</h2>
<div class="text-description">The atmosphere in New York is
lorem ipsum.</div>
</div>
</div>
Các câu lệnh nên nhớ

transform: scale(1.1);
này để làm zoom ảnh khi hover vào
opacity: 0.6;
để làm giảm hoặc tăng độ trong suốt của ảnh
pseudo elements after này để thêm 1 kí tự hay nội dung gì sau 1 chủ thể
căn ảnh trái phải thì dùng background-pos..

còn nếu để cho ảnh nó đè lên to hơn thì dùng cái absolute kết hợp top right left bottom 0 nhé
https://css-tricks.com/zooming-background-images/
zoom background img

Tài liệu HTML-CSS cơ bản

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tài liệu HTML-CSS cơ bản

Uploaded by

Copyright:

Available Formats

<!

DOCTYPE html> này là cái bắt buộc cần có

 Ctrl + / để tạo comment này dùng để ghi nhớ

2. P paragraph này để trèn 1 đoạn văn vào

<input name="gender" type="radio">

8. button này tạo ra 1 cái nút thôi

Tổng quát ví dụ cụ thể

Có 3 cách sử dụng css strong html đó là internal external Inline

<link rel="stylesheet" href="main.css">

/* Lựa chọn toàn bộ các thẻ */

/* Lựa chọn toàn bộ các thẻ p */

/* Lựa chọn toàn bộ các thẻ có class-1 */

/* Lựa chọn toàn bộ thẻ đồng thời có cả class-2 và class-3 */

/* Lựa chọn thẻ có class-5 là con của thẻ class-4 */

/* Lựa chọn toàn bộ các thẻ p có class-6 */

/* Lựa chọn toàn bộ các thẻ h3, h4 */

/* Lựa chọn toàn bộ thẻ li là con của class list */

/* Lựa chọn 1 thẻ p đứng liền kề sau class-9 */

/* Lựa chọn toàn bộ thẻ p đứng sau class-10 */

Đơn vị trong css

Đơn vị bất định

% này dựa theo phần trăm của body

Rem phụ thuộc thẻ html

Em phụ thuộc thẻ gần nó nhất có font-size

Vw này phụ thuộc vào chiều của html

Nhớ là 100% là 16px

Một số hàm trong css

Rgb đây là hàm chọn màu phù hợp

Calc đây là hàm tính toán cộng trừ nhân chia

background-image: linear-gradient(0, rgba(255, 0, 0, 0.5), rgba(145, 145, 0,

::first-letter cái này thì chọn cho chữ cái đầu

::first-line cái này chọn cho dòng đầu

Sau chú thích nhiều hơn

Background orgin thì nó có 3 loại border padding content-box

background-position: 30px 50px;

cách viết tắt

CSS position fixed

một vài trick cơ bản dùng trong css

Cách khác để căn giữa sử dụng:

Những thành phần của 1 trang web

Cái thanh đen đen nhé

Sự khác nhau của display inline, block và inline-block

Này bên html còn bên css ở dưới đây nhé

Làm với slider

Các câu lệnh nên nhớ

căn ảnh trái phải thì dùng background-pos..

You might also like