masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

HTML+CSS Mudah untuk bermula dengan pengetahuan asas tentang CSS

Sekarang kita mula menerangkan pengetahuan asas css:

Sebelum bercakap tentang pengetahuan asas, kita perlu tahu cara menulis komen dalam css

/*Kandungan komen*/

Fon: fon

Apakah operasi yang kami ada pada fon:

Warna warna fon Saiz saiz fon Font gaya fon-keluarga Italic gaya fon font-berat garis bawah teks-hiasan ketinggian garis

Mari kita jelaskan melalui contoh: 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		body{
			font-size: 20px;	  /*字体大小*/
			color: red;			  /*字体颜色*/
			font-weight: bold;	  /*字体粗细*/
			font-style: oblique;   
			/*italic:斜体。对于没有斜体变量的特殊字体，将应用 oblique
			  normal:默认值。正常的字体
			  oblique倾斜的字体 
			*/
			text-decoration:none;   /*none         :　 默认值。无装饰 
									  blink        :　 闪烁 
									  underline    :　 下划线 
									  line-through :　 贯穿线 
									  overline     :　 上划线 
									*/
			font-family:隶书;		/*什么样的字体。宋体，隶书等*/

		}
	</style>
</head>
<body>
		中华名族伟大复兴
</body>
</html>

Teks teks

Penjajaran teks penjajaran teks

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		body{
			text-align:center;
		}
	</style>
</head>
<body>
		中华名族伟大复兴
</body>
</html>

Latar belakang

Latar belakang warna latar belakang-warna imej latar belakang imej latar belakang

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		body{
			background-color:red;
			background-image:url("1.jpg");
		}
	</style>
</head>
<body>
		中华名族伟大复兴
</body>
</html>

Saiz

lebar lebar Tinggi ketinggian 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		div{
			background-color: red;
			width: 100px;
			height:100px;
		}


	</style>
</head>
<body>
		<div></div>

</body>
</html>

margin dan padding

atribut trengkas margin menetapkan semua margin dalam satu sifat pernyataan. Atribut ini boleh mempunyai 1 hingga 4 nilai. <<>

Margin: 10px 5px 15px 20px

Jarak atas ialah 10px

>

Jidar bawah ialah; 15px

Jidar kiri ialah 20px

sifat trengkas padding menetapkan semua sifat padding dalam satu pernyataan. Atribut ini boleh mempunyai 1 hingga 4 nilai.

padding: 10px 5px 15px 20px; 🎜>

sempadan sempadan

Tetapkan ketebalan dan warna jidar

sempadan:1px merah pepejal; 1 piksel, dan garisan berwarna merah

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">

		*{
			margin: 0px;
			padding: 0px;
		}

		div{
			margin-left:50px;
			margin-top:50px;
			background-color:#ccc;
			width:150px;
			height:150px;
			border:1px solid red;
		}


	</style>
</head>
<body>
		<div>测试</div>

</body>
</html>

Selepas berjalan seperti ini, perkataan berada dalam Bagaimana untuk mengalihkan teks di sudut kiri atas div ke tengah Ia sebenarnya sangat mudah

Hanya tambahkan dua gaya pada css div

text-align: center;

line-height: 150px;

Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ font-size: 20px; /*字体大小*/ color: red; /*字体颜色*/ font-weight: bold; /*字体粗细*/ font-style: oblique; /*italic:斜体。对于没有斜体变量的特殊字体，将应用 oblique normal:默认值。正常的字体 oblique倾斜的字体 */ text-decoration:none; /*none :　 默认值。无装饰 blink :　 闪烁 underline :　 下划线 line-through :　 贯穿线 overline :　 上划线 */ font-family:隶书; /*什么样的字体。宋体，隶书等*/ } </style> </head> <body> 中华名族伟大复兴 </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492332 permainan