[Video] Tìm hiểu về CSS trong HTML/CSS - Khóa học HTML/CSS - C2110I

#events.html

Name: Học Lập Trình Từ A - Z (HTML/CSS/JS - Bootstrap/JQuery - AngularJS - PHP/Laravel - Java v.v)
Address: Số 8, Tôn Thất Thuyết, Mỹ Đình, Từ Liêm, Hà Nội, Nam Từ Liêm, Hà Nội, 100000
Telephone: 0762103668
Price range: $$$

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Events in HTML</title>

	<style type="text/css">
		a {
			text-decoration: none;
			margin: 50px;
		}

		a:hover {
			background-color: yellow;
		}

		a:active {
			background-color: green;
		}

		p:first-letter {
			font-size: 155px;
		}
	</style>
</head>
<body>
	<a href="#vidu-1">Vi du 1</a>

	<a href="#vidu-2">Vi du 2</a>

	<a href="#vidu-3">Vi du 3</a>

	<p>OKOKOK</p>
</body>
</html>

#readme.txt

Nội dung kiến thức:
- CSS
	- Cách triển khai
	- Tìm hiểu selector trong CSS
	- Tính chất kế thừa trong CSS
- Tìm hiểu 1 số thành phần CSS căn bản
- Chữa bài tập

#vidu.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>CSS Tutorial</title>
	<!-- Trong phan html -> comment dc viet nhu nay ctrl + / -->
	<style type="text/css">
		/*Trong css -> comment dc viet nhu nay*/
		/*Viet nhung noi dung css vao day*/
		/*Khi viet CSS -> selector -> thanh phan su dung trong css*/
		/*Phan 1: Thanh phan css chung cho tat cac cac the*/
		/* dau '*' co y nghia -> app dung css cho tat cac cac the trong tai lieu html */
		* {
			font-size: 20px;
		}

		/*Phan 2: tag -> de thiet lap css*/
		body {
			background-color: #baecf7;
		}

		h1 {
			color: red;
			background-color: yellow;
			font-size: 35px;
		}

		li {
			color: green;
		}

		/* Bai toan dat ra: ul > li (tat ca the li co the cha la ul) -> color: green */
		/* ol > li (tat ca cac the li co the cha la ol) -> color: red */
		/* Muc thiet ke css cho the theo do sau */
		ul li {
			color: green;
		}

		ol li {
			color: red;
		}

		/* PHAN 3: Thiet ke CSS theo class name */
		/*.li-style-1 {
			font-size: 18px;
			background-color: grey;
			color: white;
		}*/

		.li-style-2 {
			font-size: 22px;
			background-color: yellow;
		}

		/* Thiet ke CSS: ket hop ten the tag + class name */
		li.li-style-1 {
			font-size: 18px;
			background-color: grey;
			color: white;
		}

		p.li-style-1 {
			font-size: 26px;
			background-color: pink;
			color: blue;
		}

		/* Thiet ke css = deep (do sau the) + tag + class name */
		ul li.li-style-1 {
			font-size: 18px;
			background-color: grey;
			color: white;
		}

		ol li.li-style-1 {
			font-size: 26px;
			background-color: #dcf2f7;
			color: red;
		}

		/* Phan 4: Tim hieu thiet ke css bang ID */
		#h1-id {
			font-size: 55px;
		}

		/* Do uu tien khi thiet ke css */
		/* (*) > (tag) > (class name) > (id) */
		#id01 {
			color: black;
		}

		.c01 {
			color: green;
		}

		* {
			color: red;
		}

		p {
			color: blue;
		}

		/* Xe muc do uu tien khi thiet ke css theo (*) | (tag) | (class name) | (id) */
		/* CSS no se an theo thiet ke cuoi cung */
		.c02 {
			font-size: 55px;
			color: red;
		}

		.c02 {
			font-size: 20px;
		}

		/* Thanh phan uu tien cao nhat -> important! -> dat trong bat ky loai nao (*, tag, class name, id) */
		.c03 {
			font-size: 55px !important;
			color: red;
		}

		.c03 {
			font-size: 20px;
		}

		#id03 {
			font-size: 100px;
		}

		/* PHAN FINAL: To hop css -> chi co vs class name */
		.c04 {
			font-size: 66px;
			color:  green;
		}

		.bg-yellow {
			background-color: yellow;
			color: red;
		}
	</style>
</head>
<body>
	<p class="c01" id="id01">
		Noi dung test
	</p>

	<p class="c02" id="id02">
		Noi dung test
	</p>

	<p class="c03" id="id03">
		Noi dung test
	</p>

	<p class="c04 bg-yellow" id="id04">
		Noi dung test
	</p>
	<!-- Y nghia cua ID (idenity) -> gia tri cua ID se la duy nhat cho tung the -->
	<h1 id="h1-id">Noi dung 1</h1>
	<ul>
		<!-- Yeu cau: 3 the li nay thiet ke css font-size: 18px, background-color: grey -->
		<li class="li-style-1">Vi du 1</li>
		<li class="li-style-1">Vi du 2</li>
		<li class="li-style-1">Vi du 3</li>
		<!-- Yeu cau: 3 the li nay thiet ke css font-size: 22px, background-color: yellow -->
		<li class="li-style-2">Vi du 4</li>
		<li class="li-style-2">Vi du 5</li>
		<li class="li-style-2">Vi du 6</li>
	</ul>
	<h1>Noi dung 2</h1>
	<ul>
		<li class="li-style-1">Vi du 1</li>
		<li class="li-style-1">Vi du 2</li>
		<li class="li-style-1">Vi du 3</li>
		<li class="li-style-1">Vi du 4</li>
		<li class="li-style-1">Vi du 5</li>
		<li class="li-style-1">Vi du 6</li>
	</ul>
	<h1>Noi dung 3</h1>
	<ol>
		<li class="li-style-1">Vi du 1</li>
		<li class="li-style-1">Vi du 2</li>
		<li class="li-style-1">Vi du 3</li>
		<li class="li-style-1">Vi du 4</li>
		<li class="li-style-1">Vi du 5</li>
		<li class="li-style-1">Vi du 6</li>
	</ol>
	<p class="li-style-1">Test ABC</p>
</body>
</html>

#vidu2.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>CSS tutorial</title>

	<style type="text/css">
		.content {
			text-align: justify;
			text-decoration: none;
			text-transform: lowercase;
			text-indent: 100px;
			/*word-spacing: 50px;*/
			font-style: italic;
			font-weight: bold;

			/*border-left: dotted grey 5px;
			border-right: dashed red 15px;
			border-top: solid green 10px;
			border-bottom: solid grey 5px;*/

			border: solid grey 3px;

			margin-top: 100px;
			margin-left: 200px;
			margin-right: 50px;
			margin-bottom: 10px;

			/*margin: 100px;*/
			padding-top: 50px;
			padding-right: 100px;
			padding-left: 200px;
			padding-bottom: 30px;

			/*padding: 10px;*/
		}

		a {
			text-decoration: none;
			font-size: 55px;
		}

		/*@font-face {
	      font-family: utm-hanzel;
	      src: url(https://gokisoft.com/themes/theme03/fonts/UTM Hanzel.ttf);
	    }

	    * {
	    	font-family: utm-hanzel !important;
	    }*/
	</style>
</head>
<body>
<!-- <a href="https://gokisoft.com">Chuyen sang web hoc</a> -->

<div class="content">
Với người hâm mộ, thất bại trước Thái Lan ở bán kết AFF Cup 2020 thật khó nuốt trôi, bởi chúng ta đã quá quen với cụm từ "bá chủ Đông Nam Á" sau chức vô địch năm 2018, huy chương vàng SEA Games 2019, cũng như việc là đại diện duy nhất của khu vực có mặt ở vòng loại cuối của World Cup 2022.

Nhưng với giới chuyên môn, thất bại lần này phần nào đã được dự báo trước sau những trục trặc về nhân sự cũng như lối chơi trong suốt một thời gian dài.

Lỗi của thầy Park?

Sau trận thắng Malaysia 3-0, trang fanpage của một cơ quan báo chí lớn đã đăng tấm hình dạng meme ghép giữa con cá chình và cái ao làng, ngụ ý nói đội tuyển Việt Nam hiện nay là "out trình" (tức có đẳng cấp vượt trội) theo cách nói của giới trẻ.

Nhưng thật ra, trận thắng ấy đã khiến nhiều người bị huyễn hoặc, bởi lý do là đối thủ của chúng ta đã suy yếu rất nhiều so với chính họ, chưa kể còn có vài cầu thủ vắng mặt vì mắc COVID-19.

Trong khi đó, những điểm yếu của đội tuyển Việt Nam đã bị báo chí Indonesia chỉ rõ. Trước trận đấu quyết định giữa hai đội ở bảng B, tờ Suara của Indonesia nhận định rằng đội tuyển Việt Nam yếu kém ở 2 cánh cũng như vị trí thủ môn.

Khi đó, không ít cổ động viên Việt Nam đã cười cợt nhận định trên, và ngay cả huấn luyện viên Park Hang-seo cũng tỏ vẻ không đồng tình, giống như khi ông không vui trước những lời phản biện của bầu Hiển trước đây.

Song đến 2 lượt trận bán kết với Thái Lan, những điểm yếu đó đã được bộc lộ rõ nét, không chỉ qua pha trượt chân của hậu vệ phải Hồng Duy, mà còn qua khả năng đóng góp vào lối chơi của cặp hậu vệ biên đang khoác áo Hoàng Anh Gia Lai (người kia là Văn Thanh).

Trên thực tế, Văn Hậu và Trọng Hoàng mới là sự lựa chọn tốt nhất ở hai bên hành lang. Hồng Duy và Văn Thanh có mùa giải thăng hoa cùng Hoàng Anh Gia Lai cách đây nửa năm. Họ có thể chơi tốt trước các đối thủ yếu như Lào hay Campuchia. Nhưng trước các đối thủ đẳng cấp hơn như ở vòng loại World Cup 2022 hay ở bán kết AFF Cup, bộ đôi của HAGL bộc lộ rõ hạn chế cả ở khâu phòng ngự lẫn tấn công. 
<br/>
ok
</div>
</body>
</html>

Phản hồi từ học viên

5

(Dựa trên đánh giá ngày hôm nay)