IMG-LOGO
Trang Chủ Chủ Đề [Share Code] Tìm hiểu CSS - HTML - Lập trình HTML/CSS/JS
× 1) [Share Code] Tìm hiểu khái niệm domain (dns) + hosting/server + thẻ căn bản html + css - Lession 1 2) [Share Code] - Hướng dẫn tạo form gửi mail html5/css - Javascript 3) [Share Code] Hướng dẫn thiết kế Layout bằng HTML5/CSS - Tạo layout website HTML5/CSS 4) [Share Code] Tạo website đầu tiên - HelloWorld - Lập trình HTML/CSS/JS 5) Big first letter - css 6. [Share Code] Tìm hiểu CSS - HTML - Lập trình HTML/CSS/JS 7) [Share Code] Hướng dẫn tìm hiểu tags căn bản trong HTML/CSS - Lập trình HTML/CSS/JS 8) [Share Code] Hướng dẫn thiết kế layout HTML/CSS - Lập trình HTML/CSS/JS 9) [Share Code] Bài tập - Thiết kế form gửi email - Lập trình HTML/CSS/JS

[Share Code] Tìm hiểu CSS - HTML - Lập trình HTML/CSS/JS

by TRẦN VĂN ĐIỆP - 14:46 09/10/2020 1,152 Lượt Xem

#style.css


body {
	background-image: url('https://media.ed.edmunds-media.com/rolls-royce/phantom/2018/oem/2018_rolls-royce_phantom_sedan_base_fq_oem_2_1600.jpg');
	background-repeat: no-repeat;
	background-size: cover;
}

.text-red {
	color: red !important;
}

h1, ul {
	color: white;
	text-align: center;
	text-transform: capitalize;
	text-decoration: underline;
}

h1:hover {
	background-color: red;
}

h1:active {
	background-color: yellow;
}

img {
	width: 250px; 
	min-width: 500px; 
	max-width: 1000px;
}

ul {
	color: yellow;
	font-size: 20px
}

.text-white {
	color: white;
}

#li_abc {
	text-transform: uppercase;
	text-decoration: underline;
}

p {
	color: white;
	text-align: justify;
	width: 400px;
	/*margin-left: 20%;*/
	margin: 10%;
	padding: 50px;
	padding-left: 100px;
	border: solid blue 5px;
	text-indent: 100px;
	word-spacing: 5px;
}
/*tag => class => id*/


#test.html


<!DOCTYPE html>
<html>
<head>
	<title>CSS Tutorial</title>
	<style type="text/css">
		body {
			background-image: url('https://media.ed.edmunds-media.com/rolls-royce/phantom/2018/oem/2018_rolls-royce_phantom_sedan_base_fq_oem_2_1600.jpg');
			background-repeat: no-repeat;
			background-size: cover;
		}

		.text-red {
			color: red !important;
		}

		h1 {
			color: white;
			text-align: center;
			text-transform: capitalize;
			text-decoration: underline;
		}

		img {
			width: 250px; 
			min-width: 500px; 
			max-width: 1000px;
		}

		ul {
			color: yellow;
			font-size: 20px
		}

		.text-white {
			color: white;
		}

		#li_abc {
			text-transform: uppercase;
			text-decoration: underline;
		}
		/*tag => class => id*/
	</style>
</head>
<body>
	<h1>Welcome to learn HTML5/CSS3</h1>
	<h1 class="text-red">ABC</h1>
	<ul>
		<li class="text-white">Vi du 1</li>
		<li>Vi du 2</li>
		<li class="text-white text-red">Vi du 3</li>
		<li id="li_abc">Vi du 4</li>
		<li>Vi du 5</li>
	</ul>
	<img src="https://tinbanxe.vn/uploads/news/2020_04/rolls-royce/phantom/danh-gia-xe-rolls-royce-phantom-ve-dau-xe.jpg">
</body>
</html>


#test1.html


<!DOCTYPE html>
<html>
<head>
	<title>CSS Tutorial</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>Welcome to learn HTML5/CSS3 - sdjkksdfkdshfdksj</h1>
	<h1 class="text-red">ABC</h1>
	<p>
		As you can see from the examples above, it might be a good idea to create a proper random function to use for all random integer purposes.

This JavaScript function always returns a random number between min (included) and max (excluded):

As you can see from the examples above, it might be a good idea to create a proper random function to use for all random integer purposes.

This JavaScript function always returns a random number between min (included) and max (excluded):

As you can see from the examples above, it might be a good idea to create a proper random function to use for all random integer purposes.

This JavaScript function always returns a random number between min (included) and max (excluded):

	</p>
	<!-- <h1 class="text-red">ABC</h1>
	<h1 class="text-red">ABC</h1>
	<h1 class="text-red">ABC</h1>
	<h1 class="text-red">ABC</h1>
	<h1 class="text-red">ABC</h1>
	<h1 class="text-red">ABC</h1>
	<h1 class="text-red">ABC</h1>
	<h1 class="text-red">ABC</h1>
	<h1 class="text-red">ABC</h1>
	<h1 class="text-red">ABC</h1>
	<h1 class="text-red">ABC</h1> -->
	<ul>
		<li class="text-white">Vi du 1</li>
		<li>Vi du 2</li>
		<li class="text-white text-red">Vi du 3</li>
		<li id="li_abc">Vi du 4</li>
		<li>Vi du 5</li>
	</ul>
	<img src="https://www.autocar.co.uk/sites/autocar.co.uk/files/1-rolls-royce-phantom-2018-review-otr-front.jpg">

<!-- <script type="text/javascript">
	var colorList = ['red', 'blue', 'yellow', 'green', 'black', 'pink'];

	setInterval(function() {
		var tags = document.getElementsByTagName('h1')
		for (var i = tags.length - 1; i >= 0; i--) {
			rad = Math.floor(Math.random() * colorList.length);
			tags[i].style.backgroundColor = colorList[rad]
		}
	}, 50)
</script> -->
</body>
</html>


#vidu.html


<!DOCTYPE html>
<html>
<head>
	<title>HTML Tutorial</title>
</head>
<body>
	<a href="https://gokisoft.com" target="_blank">gokisoft.com</a>
	<br/>
	<a href="tel:0967025996">Goi Dien</a>
	<br/>
	<a href="mailto:[email protected]">Gui Mail</a>
</body>
</html>


Theo dõi cập nhật nội dung học trên Youtube


Bình luận



Chia sẻ từ lớp học

Danh Sách Bài Học

Quick Quizzz!!!

User ImageUser ImageUser Image
User ImageUser ImageUser Image
User ImageUser ImageUser Image
User ImageUser ImageUser Image
User ImageUser ImageUser Image
User Image
User ImageUser ImageUser Image
>> Hiển Thị Quizzz
Đã sao chép!!!