By GokiSoft.com| 20:24 22/01/2022|
Học HTML5 - CSS3

[Video] Hướng dẫn tìm hiểu CSS - Khóa học lập trình HTML/CSS/JS


#vidu.html


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

	<style type="text/css">
		/* Luu y: Viec thiet ke css -> su dung cac thanh phan sau: tag, class name, id -> Su to hop cua cac thanh phan tag, class name, id */

		/* Phan 1: Bieu dien CSS thong qua ten the body, h1, ul, li, .v.v */
		body {
			background-color: #bcf4f7
		}

		/* Kha nang tai su dung css -> tat ca cac the h1 -> deu nhan css nhu ben duoi */
		h1 {
			color: red !important;
			background-color: yellow;
		}

		li {
			color: blue;
			font-size: 18px;
		}

		/* Phan 2: Thiet ke css cho tat ca cac the */
		/* Su dung thiet ke css bang '*' -> Muc do uu tien cua * thap nhat */
		* {
			font-size: 26px;
			color: green;
		}

		/* Phan 3:  Thiet ke css theo class name */
		.sem2-css {
			color: orange;
			font-size: 29px;
		}

		.sem3-css {
			color: red;
			font-size: 32px;
		}

		/* Phan 4: Thiet ke css theo id cua tag */
		#title-sem3 {
			color: #30b1b8;
			font-size: 42px;
		}

		/* Luu y: do uu tien thiet ke css (* -> tag name (body, h1, li) -> class name (sem2-css, sem3-css) -> id (title-sem3)) -> Nhung truc tiep -> important */
		/* Thu tu uu tien CSS
			1. *
			2. tag name (body, h1, li)
			3. class name (sem2-css, sem3-css)
			4. id (title-sem3)
			5. Nhung truc tiep
			6. !important
		*/

		/* Phan 5: Ghi de css */
		/* Muc 1: ghi de theo muc do uu tien */
		/* Trong TH thiet css cung loai (style) */
		h2 {
			color: red;
		}

		h2 {
			color: blue;
			font-size: 22px;
		}
		/* TH nay -> uu tien css viet sau cung (tag, class name, id) */
		.item2 {
			color: green;
			font-size: 33px;
		}

		.item2 {
			color: black;
			font-size: 36px;
		}

		/* Phan 6: Thiet to hop css (tag, class name, id) */
		li {
			color: red;
			font-size: 22px;
		}

		/* Thiet ke css cho the li -> parent (ul) */
		ul li {
			color: green;
			font-size: 30px;
		}

		/* Thiet ke css cho the li -> parent (ol) */
		ol li {
			color: black;
			font-size: 26px;
		}

		/* Thiet ke css cho the li -> parent (ul & classname: group1) */
		ul.group1 li {
			font-size: 50px;
		}

		div.group2 li {
			font-size: 60px;
		}
	</style>
</head>	
<body>
<!-- Phan 1: Muc tim hieu thiet ke css -->
<h1>Danh sach mon hoc SEM1</h1>
<ul>
	<li>Lap trinh C</li>
	<li>HTML/CSS/JS</li>
	<li>Bootstrap/jQuery</li>
	<li>AngularJS</li>
	<li>SQL Server</li>
	<li>PHP/Laravel</li>
</ul>

<h1>Danh sach mon hoc SEM2</h1>
<ul>
	<li class="sem2-css">Java I</li>
	<li class="sem2-css">Java II</li>
	<li class="sem2-css">XML/JSON</li>
	<li class="sem2-css">C#</li>
</ul>

<!-- id: identify -> dinh danh -> gia tri trong id -> duy nhat -->
<!-- id: hieu nom no nhu CMTND -->
<h1 id="title-sem3">Danh sach mon hoc SEM3</h1>
<ul>
	<li class="sem3-css">Winform</li>
	<li class="sem3-css">ASP</li>
	<li class="sem3-css">Web Service</li>
	<li class="sem3-css">eProject</li>
</ul>

<p>Vi du</p>
<!-- Phan 2: Su dung tim hieu ghi de (override) css -->
<h2 class="item2">Vi du 1</h2>
<h2 class="item2">Vi du 2</h2>
<h2 class="item2">Vi du 3</h2>
<h2>Vi du 4</h2>
<h2>Vi du 5</h2>

<!-- Phan 3: Su dung tim hieu thiet ke css to hop (tag, class name, id) -->
<h1>Su dung tim hieu thiet ke css to hop (tag, class name, id)</h1>
<ul class="group1">
	<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>
</ul>

<ul class="group2">
	<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>
</ul>

<div class="group2">
	<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>
</div>

<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>
</body>
</html>


#vidu2.html


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

	<style type="text/css">
		.content {
			color: blue;
			/* left, right, center, justify */
			text-align: justify;
			text-decoration: none;
			text-indent: 30px;
			text-transform: capitalize;
			/*word-spacing: 10px;*/
			font-size: 20px;
			font-weight: bold;
			font-style: italic;
			border: solid green 3px;
			/*border-left: solid red 3px;
			border-right: dotted orange 3px;*/
			margin: 20px;
			margin-top: 50px;
			margin-left: 100px;
			margin-right: 200px;
			padding: 20px;
			padding-top: 50px;
			padding-left: 200px;
			padding-right: 80px;
			padding-bottom: 100px;
		}

		label:hover {
			color: red;
		}

		label:active {
			color: blue;
		}
	</style>
</head>
<body>
<div class="content">
	Tại hội nghị, Bộ trưởng Bùi Thanh Sơn đã trình bày những kết quả và dấu ấn nổi bật của Việt Nam hai năm vừa qua tại HĐBA LHQ, nhấn mạnh đây là thành tựu lớn của công tác đối ngoại, khẳng định vị thế và tầm vóc mới của Việt Nam trên trường quốc tế. Bộ trưởng Bùi Thanh Sơn cho biết, Việt Nam bắt đầu nhiệm kỳ Ủy viên không thường trực HĐBA LHQ từ năm 2020 trong bối cảnh thế giới và khu vực có những thuận lợi đan xen với thách thức, khó khăn, có những diễn biến vượt ngoài dự báo thông thường. Trong bối cảnh như vậy, với nỗ lực của tất cả các nước thành viên HĐBA và các quốc gia thành viên LHQ, HĐBA tiếp tục khẳng định là cơ quan quan trọng hàng đầu, không thể thay thế của LHQ trong gìn giữ hòa bình (GGHB), an ninh quốc tế.
</div>
<label>Vi du 1</label>
<label>Vi du 2</label>
<label>Vi du 3</label>
</body>
</html>


Tags:

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

5

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