By GokiSoft.com|
19:55 08/04/2022|
Học HTML5 - CSS3
[Source Code] Tìm hiểu CSS trong HTML/CSS
#readme.txt
Nội dung kiến thức học:
- CSS
- Ví dụ -> ứng dụng CSS trong thực tiễn
#vidu.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS tutorial</title>
<style type="text/css">
/** * -> Thiet ke CSS ap dung cho tat ca tags */
* {
color: green;
}
body {
background-color: #a8c3f0;
}
/** tag css -> co muc uu tien cao hon * css */
h1 {
color: red;
}
li {
color: black;
}
/* ul > li -> color: blue; ol > li -> color: orange; */
ul li {
color: blue;
}
ol li {
color: orange;
}
/* ul > li > Phan tu 1 -> font-size: 20px; ul > li > phan tu 2 -> font-size: 30px; */
.item1 {
font-size: 20px !important;
}
.item1 {
font-size: 10px;
}
.item2 {
font-size: 30px;
}
.active {
background-color: yellow;
font-size: 60px;
}
#title1 {
font-size: 50px;
color: blue;
}
#title2 {
font-size: 60px;
}
/* Muc do uu tien trong thiet: * -> tags (body, h1, li) -> class name -> id */
/* TH thiet ke css cung loai -> uu tien thang code sau */
/* Thuoc tinh co muc do uu tien cao nhat: !important; */
</style>
</head>
<body>
<h1 id="title1">Item 1</h1>
<ul>
<li class="item1 active">Vi du 1</li>
<li class="item1">Vi du 2</li>
<li class="item1">Vi du 3</li>
<li class="item1">Vi du 4</li>
<li class="item1">Vi du 5</li>
</ul>
<h1 id="title2">Item 2</h1>
<ol>
<li>Vi du 1</li>
<li>Vi du 2</li>
<li>Vi du 3</li>
<li>Vi du 4</li>
<li>Vi du 5</li>
</ol>
<h1>Item 3</h1>
<ul>
<li class="item2">Vi du 1</li>
<li class="item2 active">Vi du 2</li>
<li class="item2">Vi du 3</li>
<li class="item2">Vi du 4</li>
<li class="item2">Vi du 5</li>
</ul>
</body>
</html>#vidu2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS tutorial</title>
<style type="text/css">
.container {
text-align: justify;
text-decoration: none;
text-transform: capitalize;
text-indent: 30px;
/*word-spacing: 30px;*/
font-style: italic;
border: solid orange 2px;
/*border-left: solid orange 5px;*/
/*border-right: dotted blue 2px;*/
/*padding-right: 50px;
padding-left: 10px;
padding-top: 30px;
padding-bottom: 80px;*/
/*padding: 10px 50px;*/
padding: 10px;
/*margin-top: 50px;
margin-left: 20px;
margin-right: 80px;
margin-bottom: 10px;*/
margin: 10px;
cursor: pointer;
}
.container:hover {
background-color: yellow;
}
.container:active {
background-color: green;
}
li {
cursor: pointer;
}
li:hover {
color: blue;
background-color: orange;
}
li:active {
color: red;
}
ul {
background-color: #aeddf2;
display: flex;
list-style-type: none;
}
ul li {
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
Tính từ 16h ngày 07/4 đến 16h ngày 08/4, trên Hệ thống Quốc gia quản lý ca bệnh COVID-19 ghi nhận 39.334 ca nhiễm mới, trong đó 1 ca nhập cảnh và 39.333 ca ghi nhận trong nước (giảm 6.551 ca so với ngày trước đó) tại 62 tỉnh, thành phố (có 27.889 ca trong cộng đồng). Tính từ 16h ngày 07/4 đến 16h ngày 08/4, trên Hệ thống Quốc gia quản lý ca bệnh COVID-19 ghi nhận 39.334 ca nhiễm mới, trong đó 1 ca nhập cảnh và 39.333 ca ghi nhận trong nước (giảm 6.551 ca so với ngày trước đó) tại 62 tỉnh, thành phố (có 27.889 ca trong cộng đồng). Tính từ 16h ngày 07/4 đến 16h ngày 08/4, trên Hệ thống Quốc gia quản lý ca bệnh COVID-19 ghi nhận 39.334 ca nhiễm mới, trong đó 1 ca nhập cảnh và 39.333 ca ghi nhận trong nước (giảm 6.551 ca so với ngày trước đó) tại 62 tỉnh, thành phố (có 27.889 ca trong cộng đồng). Tính từ 16h ngày 07/4 đến 16h ngày 08/4, trên Hệ thống Quốc gia quản lý ca bệnh COVID-19 ghi nhận 39.334 ca nhiễm mới, trong đó 1 ca nhập cảnh và 39.333 ca ghi nhận trong nước (giảm 6.551 ca so với ngày trước đó) tại 62 tỉnh, thành phố (có 27.889 ca trong cộng đồng).
</div>
<ul>
<li>TRANG CHU</li>
<li>SAN PHAM</li>
<li>TIN TUC</li>
<li>LIEN HE</li>
<li>GIOI THIEU</li>
</ul>
</body>
</html>
Phản hồi từ học viên
5
(Dựa trên đánh giá ngày hôm nay)
