IMG-LOGO
×

Tài Liệu Môn Học

Khoá học lập trình HTML/CSS

Nhập Môn HTML

[Video] Giới thiệu về lập trình web - HTML/CSS [Video] Hướng dẫn tạo ra 1 trang web đơn giản nhất - HTML/CSS [Video] Hướng dẫn debug/test/develop trên trình duyệt web -HTML/CSS

Tìm Hiểu Thẻ HTML5

[Video] Formatting Text using Tags - html tags [Video] Creating Hyperlinks and Anchors (phần 1) - html tags [Video] Creating Hyperlinks and Anchors (phần 2) - html tags [Video] Cách dùng thẻ img và map để hiển thị hình ảnh html - HTML/CSS [Video] Tìm hiểu về đường dẫn file (path file) trong HTML/CSS

CSS

[Video] Tìm hiểu thuộc tính trong thẻ html [Video] Giới thiệu CSS & Sử dụng các thuộc tính cơ bản [Video] Hướng dẫn tách biệt CSS và HTML [Video] Xử lý Event trong CSS (:hover, :active, :link, ...) - Lập trinh HTML/CSS

Table & CSS

[Video] Tìm hiểu table trong HTML/CSS - HTML/CSS

Form & CSS

[Video] Thiết kế form trong HTML/CSS/JS [Video] Tìm hiểu tag videos, audio trong HTML/CSS/JS [Video] Bài tập - Thiết kế form gửi email - Lập trình HTML/CSS/JS

Thiết Kế Layout

[Video] Tìm hiểu Frame qua ví dụ quản lý khách sạn HTML/CSS [Video] Hướng dẫn tạo layout bằng thẻ Div căn bản [Video] Hướng dẫn thiết kế layout bằng thẻ div nâng cao (Thiết kế giao diện web gokisoft)




Trang Chủ 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

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

by GokiSoft.com - 20:24 22/01/2022 1,292 Lượt Xem


#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>


Bình luận



Chia sẻ từ lớp học

Tài Liệu Tham Khảo

Đã sao chép!!!