Teknologian jakaminen

CSS-valitsimet, yleiset ominaisuudet, laatikon malli ja sijoittelu

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

CSS

Valitsin

CSS-valitsin: valitse vastaava tagi sivulla (asiakirjassa) ja aseta tyyli

jokerimerkkivalitsin
  1. //*：通配符选择器，选择页面中所有的标签
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             *{
  8.                 color: red;
  9.             }
  10.         </style>
  11.     </head>
  12.     <body>
  13.         <h1>一级标签</h1>
  14.         <h2>二级标签</h2>       
  15.         <p>用良心做教育</p>
  16.         <p>做真实的自己</p>   
  17.         <span>匠心育人</span>
  18.         <span>初心至善</span>
  19.     </body>
  20. </html>
perusvalitsin

Perusvalitsimet on jaettu tunnistevalitsimiin, luokkavalitsimiin ja tunnusvalitsimiin.

tunnisteen valitsin
  1. <html>
  2.     <head>
  3.         <meta charset="UTF-8">
  4.         <title></title>
  5.     </head>
  6.     <style type="text/css">
  7.         p{
  8.             color: #FF0000;
  9.         }
  10.     </style>
  11.     <body>
  12.         <h1>一级标签</h1>
  13.         <p>用良心做教育</p>
  14.         <span>匠心育人</span>
  15.     </body>
  16. </html>
luokan valitsin

...alkuun

  1. <html>
  2.     <head>
  3.         <meta charset="UTF-8">
  4.         <title></title>
  5.         <style type="text/css">
  6.             .myclass{
  7.                 color: #FF0000;
  8.             }
  9.         </style>
  10.     </head>
  11.     <body>
  12.         <h1 class="myclass">一级标签</h1>
  13.         <h2>二级标签</h2>
  14.     </body>
  15. </html>
ID-valitsin

Alkaen #, tunnus on ainutlaatuinen

  1. <html>
  2.     <head>
  3.         <meta charset="UTF-8">
  4.         <title></title>
  5.     </head>
  6.     <style type="text/css">
  7.         #myid{
  8.             color: #FF0000;
  9.         }
  10.     </style>
  11.     <body>
  12.         <h1 id="myid">一级标签</h1>
  13.         <h2>二级标签</h2>
  14.     </body>
  15. </html>
  16. ​
Perusvalitsimen prioriteetti

Tunnusvalitsin &gt; Luokan valitsin &gt; Tunnisteen valitsin

Ryhmän valitsin
  1. <html>
  2.     <head>
  3.         <meta charset="UTF-8">
  4.         <title></title>
  5.     </head>
  6.     <style type="text/css">
  7.             h1,h3,h5,p{color: red;}
  8.         </style>
  9.     <body>
  10.         <h1>一级标签</h1>
  11.         <h2>二级标签</h2>
  12.         <h3>三级标签</h3>
  13.         <h4>四级标签</h4>
  14.         <h5>五级标签</h5>
  15.         <h6>六级标签</h6>
  16.         <p>用良心做教育</p>
  17.         <p>做真实的自己</p>
  18.     </body>
  19. </html>
​
johdettu valitsin

Tunnetaan myös kontekstuaalisina valitsimina

Jaettu jälkeläisten valitsimiin, jälkeläisten valitsimiin ja viereisiin sisarusvalitsimiin

jälkeläisten valitsin

Huomaa välilyöntien käyttö

  1. <html>
  2.     <head>
  3.         <meta charset="UTF-8">
  4.         <title></title>
  5.     </head>
  6.     <style type="text/css">
  7.             ul a{
  8.                 color: red;
  9.             }
  10.         </style>
  11.     <body>
  12.         <ul>
  13.             <li>
  14.                 <a href="#">超链接1</a>
  15.             </li>
  16.             <li>
  17.                 <a href="#">超链接2</a>
  18.             </li>
  19.             <li>
  20.                 <a href="#">超链接3</a>
  21.             </li>
  22.         </ul>
  23.         
  24.         <ul>
  25.             <li>
  26.                 <a href="#">超链接4</a>
  27.             </li>
  28.             <li>
  29.                 <a href="#">超链接5</a>
  30.             </li>
  31.             <li>
  32.                 <a href="#">超链接6</a>
  33.             </li>
  34.         </ul>
  35.         
  36.         <a href="#">超链接7</a>
  37.         <a href="#">超链接8</a>
  38.         <a href="#">超链接9</a>
  39.     </body>
  40. </html>
  41. ​
jälkeläisten valitsin

HUOMAA: Käytä symbolia &gt;

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.     </head>
  7.     <style type="text/css">
  8.             li>a{
  9.                 color: red;
  10.             }
  11.         </style>
  12.     <body>
  13.         <ul>
  14.             <li>
  15.                 <a href="#">超链接1</a>
  16.             </li>
  17.             <li>
  18.                 <a href="#">超链接2</a>
  19.             </li>
  20.             <li>
  21.                 <a href="#">超链接3</a>
  22.             </li>
  23.         </ul>
  24.         
  25.         <ul>
  26.             <li>
  27.                 <a href="#">超链接4</a>
  28.             </li>
  29.             <li>
  30.                 <a href="#">超链接5</a>
  31.             </li>
  32.             <li>
  33.                 <a href="#">超链接6</a>
  34.             </li>
  35.         </ul>
  36.         
  37.         <a href="#">超链接7</a>
  38.         <a href="#">超链接8</a>
  39.         <a href="#">超链接9</a>
  40.     </body>
  41. </html>
  42. ​
naapurin sisaruksen valitsin

Huomaa +-merkin käyttö

Tyylit vaikuttavat jälkimmäiseen

  1. <html>
  2.     <head>
  3.         <meta charset="UTF-8">
  4.         <title></title>
  5.         <style type="text/css">
  6.             a+a{
  7.                 color: red;
  8.             }
  9.         </style>
  10.     </head>
  11.     <body>
  12.         
  13.         <ul>
  14.             <li>
  15.                 <a href="#">超链接1</a>
  16.             </li>
  17.             <li>
  18.                 <a href="#">超链接2</a>
  19.             </li>
  20.             <li>
  21.                 <a href="#">超链接3</a>
  22.             </li>
  23.         </ul>
  24.         
  25.         <ul>
  26.             <li>
  27.                 <a href="#">超链接4</a>
  28.             </li>
  29.             <li>
  30.                 <a href="#">超链接5</a>
  31.             </li>
  32.             <li>
  33.                 <a href="#">超链接6</a>
  34.             </li>
  35.         </ul>
  36.         
  37.         <a href="#">超链接7</a>
  38.         <a href="#">超链接8</a>
  39.         <a href="#">超链接9</a>
  40.     </body>
  41. </html>
​
attribuutin valitsin
  1. <html>
  2. 	<head>
  3. 		<meta charset="UTF-8">
  4. 		<title></title>
  5. 		<style type="text/css">
  6. 			/*
  7. 			 * 属性选择器
  8. 			 * 
  9. 			 * 单个属性的属性选择器：
  10. 			 * 	input[placeholder]{color: red;}
  11. 			 * 
  12. 			 * 单个属性+值的属性选择器：
  13. 			 * 	input[type="text"]{color: red;}
  14. 			 * 
  15. 			 * 多个属性的属性选择器：
  16. 			 * 	input[name][placeholder]{color: red;}
  17. 			 * 
  18. 			 * 多个属性+值的属性选择器：
  19. 			 * 	input[type="text"][placeholder]{color: red;}
  20. 			 * 	input[type="text"][placeholder="请输入账号..."]{color: red;}s
  21. 			 */
  22.  
  23. 		</style>
  24. 	</head>
  25. 	<body>
  26. 		<form action="服务器地址" method="post">
  27. 			
  28. 			账号：<input type="text" name="username" placeholder="请输入账号..."/>
  29. 				<br />
  30. 			密码：<input type="password" name="password" placeholder="请输入密码..."/>
  31. 				<br />
  32. 			确认密码：<input type="password" name="repassword"/>
  33. 				<br />
  34. 			姓名：<input type="text" name="name"/>
  35. 				<br />
  36. 			昵称：<input type="text" name="nickName" placeholder="请输入昵称..."/>
  37. 				<br />
  38. 			性别：
  39. 				<input type="radio" name="sex" value="man" checked="checked"/>男
  40. 				<input type="radio" name="sex" value="woman"/>女
  41. 				<br />
  42. 			爱好：
  43. 				<input type="checkbox" name="hobbies" value="football" checked="checked"/>足球
  44. 				<input type="checkbox" name="hobbies" value="basketball" checked="checked"/>篮球
  45. 				<input type="checkbox" name="hobbies" value="shop"/>购物
  46. 				<br />
  47. 			国籍：
  48. 				<select name="nationality">
  49. 					<option value="001">韩国</option>
  50. 					<option value="002">美国</option>
  51. 					<option value="003" selected="selected">中国</option>
  52. 					<option value="004">日本</option>
  53. 				</select>
  54. 				<br />
  55. 			
  56. 			<input type="submit" value="注册" />
  57. 		</form>
  58. 	</body>
  59. </html>
ankkuri pseudoluokka

Aseta hyperlinkin kunkin tilan tyyli (käymätön tila, vierailtu tila, hiiren osoitin hyperlinkin päällä, hiirellä painettu tila)

  1. <html>
  2. 	<head>
  3. 		<meta charset="UTF-8">
  4. 		<title></title>
  5. 		<style type="text/css">
  6. 			a:link {color: #FFCCFF}		/* 未访问的链接 */
  7. 			a:visited {color: #FF0000}	/* 已访问的链接 */
  8. 			a:hover {color: #66FF66}	/* 鼠标移动到链接上 */
  9. 			a:active {color: #33FFFF}	/* 选定的链接 */
  10. 		</style>
  11. 	</head>
  12. 	<body>
  13. 		
  14. 		<a href="http://www.163.com">跳转页面</a>
  15. 		
  16. 	</body>
  17. </html>

Yhteisiä ominaisuuksia

tyyli etusijalla
  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<!--
  7. 			样式的优先级别：
  8. 				行内样式 > 内/外部样式
  9. 			
  10. 			注意：内外部样式要看加载顺序
  11.         -->
  12. 		
  13. 		<!--外部样式表-->
  14. 		<link rel="stylesheet" type="text/css" href="../../css/new_file.css"/>
  15. 		
  16. 		<!--内部样式表-->
  17. 		<style type="text/css">
  18. 			h1{color: red;}
  19. 		</style>
  20. 	</head>
  21. 	<body>
  22. 		<!--行内样式表-->
  23. 		<h1 style="color: blue;">我好像在哪儿见过你</h1>
  24. 		
  25. 	</body>
  26. </html>
Yleisesti käytetyt CSS-ominaisuudet

1.Fontin määritteet

Kiinteistön nimi

font-family(fontti)

font-size (koko)

font-style (tyyli)

---- normaali vakiotyyli

---- kursiivi kursiivi

---- vino kallistus

---- perii pääluokasta perityn kirjasintyylin

font-weight (fontti lihavoitu)

----normaali vakiotyyli

----Lihavoitu lihavoitu

----rohkeampi on paksumpaa

---- kevyempi on ohuempi

2. Tekstin attribuutit

Kiinteistön nimi

kirjainväli (kirjainväli)

tekstikoristelu (alleviivaus koristelu)

tekstin tasaus (tekstin tasaus)

tekstin sisennys (tekstin sisennys)

rivin korkeus (linjan korkeus)

3. Tausta

Kiinteistön nimi

taustaväri

taustakuva

taustatoisto

4. Reuna

Kiinteistön nimi

raja-ala

kiinteä (yhtenäinen viiva)

katkoviiva (katkoviiva)

kaksinkertainen (tuplaviiva)

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 	</head>
  7. 	<body>
  8. 	</body>
  9. </html>
  10. <!DOCTYPE html>
  11. <html>
  12. 	<head>
  13. 		<meta charset="UTF-8">
  14. 		<title></title>
  15. 		<style type="text/css">
  16. 			
  17. 			p{
  18. 				font-family: "微软雅黑";/*设置字体*/
  19. 				font-size: 50px;/*设置字体大小*/
  20. 				font-style: italic;/*设置字体样式*/
  21. 				font-weight: bold;/*设置字体粗细*/
  22. 				
  23. 				letter-spacing: 10px;/*设置文本间隔*/
  24. 				text-decoration: underline;/*设置文本划线*/
  25. 				text-align: center;/*设置对齐方式*/
  26. 				background-color: red;/*设置背景颜色*/
  27. 				color: white;/*设置字体颜色*/
  28. 				
  29. 				border: orange 5px solid;/*设置边框：颜色，粗细，实线*/
  30. 			}
  31. 			
  32. 			a:link {color: #000000}		/* 未访问的链接 */
  33. 			a:visited {color: #000000}	/* 已访问的链接 */
  34. 			a:hover {color: #3366FF}	/* 鼠标移动到链接上 */
  35. 			a:active {color: #3366FF}	/* 选定的链接 */
  36. 			
  37. 			a{
  38. 				text-decoration: none;/*去除划线*/
  39. 			}
  40. 			
  41. 			button{
  42. 				width: 500px;
  43. 				height: 500px;
  44. 				background-image: url(../../img/01.jpg);/*设置背景图片*/
  45. 				background-repeat:repeat-y;/*设置平铺方式*/
  46. 			}
  47. 			
  48. 			img{
  49. 				border-radius: 50%;/*倒圆角*/
  50. 			}
  51. 			
  52. 		</style>
  53. 	</head>
  54. 	<body>
  55. 		
  56. 		<p>我好像在哪儿见过你</p>
  57. 		
  58. 		<a href="#">地图</a>
  59. 		<br />
  60. 		
  61. 		<button>普通按钮</button>
  62. 		<br />
  63. 		
  64. 		<img src="../../img/01.jpg" width="100px" height="100px" />
  65. 	</body>
  66. </html>

laatikko malli

pehmuste
  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 	</head>
  7. 	<style type="text/css">
  8. 		div{
  9. 			width: 200px;
  10. 			height: 200px;
  11. 			border: orange 1px solid;
  12. 			
  13. 			padding: 50px;/*设置上下左右内边距*/
  14. 			padding-top: 50px;/*设置上内边距*/
  15. 			padding-bottom: 50px;/*设置下内边距*/
  16. 			padding-left: 50px;/*设置左内边距*/
  17. 			padding-right: 50px;/*设置右内边距*/
  18. 			
  19. 			/*
  20. 			 * 注意1：内边距可能会把盒子撑变形
  21. 			 * 注意2：IE老版本不支持内边距
  22. 			 * 经验：能不用内边距就不用
  23. 			 */
  24. 		}
  25. 	</style>
  26. 	<body>
  27. 		<div>
  28. 			<span>我好像在哪儿见过你</span>
  29. 		</div>
  30. 	</body>
  31. </html>
marginaalit
  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 	</head>
  7. 	<style type="text/css">
  8. 		div{
  9. 			width: 200px;
  10. 			height: 200px;
  11. 			border: orange 1px solid;
  12. 			
  13. 			margin-top: 50px;/*设置上外边距*/
  14. 			margin-bottom: 50px;/*设置下外边距*/
  15. 			margin-left: 50px;/*设置左外边距*/
  16. 			margin-right: 50px;/*设置右外边距*/
  17. 			margin: 50px;/*设置上下左右外边距*/
  18. 		
  19. 		}
  20. 	</style>
  21. 	<body>
  22. 		<div>
  23. 			<span>我好像在哪儿见过你</span>
  24. 		</div>
  25. 	</body>
  26. </html>
Keskitä vaakasuoraan
  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 	</head>
  7. 	<style type="text/css">
  8. 		div{
  9. 			width: 200px;
  10. 			height: 200px;
  11. 			border: orange 1px solid;
  12. 			
  13. 			margin: 0 auto;/*水平居中*/
  14. 		}
  15. 	</style>
  16. 	<body>
  17. 		<div>
  18. 			<span>我好像在哪儿见过你</span>
  19. 		</div>
  20. 	</body>
  21. </html>

asema

suhteellinen sijainti

Suhteellinen sijainti: säilytä alkuperäinen asento ja siirry suhteessa alkuperäiseen asentoon

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 	</head>
  7. 	<style type="text/css">
  8. 		#manager{
  9. 			border: orange 1px solid;
  10. 			margin-top: 50px;
  11. 		}
  12. 		#box01{
  13. 			width: 100px;
  14. 				height: 100px;
  15. 				border: red 1px solid;
  16. 		}
  17. 		#box02{
  18. 				width: 100px;
  19. 				height: 100px;
  20. 				border: green 1px solid;
  21. 				
  22. 				position: relative;/*相对定位：保留原有位置，相对于原来的位置进行位移*/
  23. 				top: 50px;
  24. 				left: 50px;
  25. 			}
  26. 			
  27. 			#box03{
  28. 				width: 100px;
  29. 				height: 100px;
  30. 				border: blue 1px solid;
  31. 			}
  32. 	</style>
  33. 	<body>
  34. 		<div id="manager">
  35. 			<div id="box01"></div>
  36. 			<div id="box02"></div>
  37. 			<div id="box03"></div>
  38. 		</div>
  39. 	</body>
  40. </html>
absoluuttinen paikannus

Absoluuttinen sijoittelu: Älä säilytä alkuperäistä sijaintia, hae yläelementistä, selvitä onko pääelementillä position attribuutti, jos on, sijoita se pääelementin mukaan, jos ei, jatka yläelementin hakua, kunnes body

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 	</head>
  7. 	<style type="text/css">
  8. 		#manager{
  9. 			border: orange 1px solid;
  10. 			margin-top: 50px;
  11. 		}
  12. 		#box01{
  13. 			width: 100px;
  14. 				height: 100px;
  15. 				border: red 1px solid;
  16. 		}
  17. 		#box02{
  18. 				width: 100px;
  19. 				height: 100px;
  20. 				border: green 1px solid;
  21. 				
  22. 				position: absolute;/*绝对定位：不保留原有位置，向上找寻父级元素，判断父级元素中是否有position属性，如果有就按照父级元素进行位置，如果没有就继续向上找寻父级元素，直到body为止*/
  23. 				top: 50px;
  24. 				left: 50px;
  25. 			}
  26. 			
  27. 			#box03{
  28. 				width: 100px;
  29. 				height: 100px;
  30. 				border: blue 1px solid;
  31. 			}
  32. 	</style>
  33. 	<body>
  34. 		<div id="manager">
  35. 			<div id="box01"></div>
  36. 			<div id="box02"></div>
  37. 			<div id="box03"></div>
  38. 		</div>
  39. 	</body>
  40. </html>

Kiinteä asento
  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 	</head>
  7. 	<style type="text/css">
  8. 		div{
  9. 			position: fixed;/*固定定位*/
  10. 			top: 80%;
  11. 			right: 20%;
  12. 		}
  13. 	</style>
  14. 	<body>
  15. 		
  16. 		<a name="top"></a><!--下锚点-->
  17. 		
  18. 		<div>
  19. 			<a href="#top">置顶</a>
  20. 		</div>
  21. 		
  22. 		<!--导航栏-->
  23. 		<a href="#new01">法治</a>
  24. 		<a href="#new02">国际</a>
  25. 		<a href="#new03">娱乐</a>
  26. 		
  27. 		<a name="new01"></a><!--下锚点-->
  28. 		<h1>法治新闻</h1>
  29. 		<h1>法治新闻</h1>
  30. 		<h1>法治新闻</h1>
  31. 		<h1>法治新闻</h1>
  32. 		<a name="new02"></a><!--下锚点-->
  33. 		<h1>国际新闻</h1>
  34. 		<h1>国际新闻</h1>
  35. 		<h1>国际新闻</h1>
  36. 		<h1>国际新闻</h1>
  37. 		<h1>国际新闻</h1>
  38. 		<h1>国际新闻</h1>
  39. 		<a name="new03"></a><!--下锚点-->
  40. 		<h1>娱乐新闻</h1>
  41. 		<h1>娱乐新闻</h1>
  42. 		<h1>娱乐新闻</h1>
  43. 		<h1>娱乐新闻</h1>
  44. 		<h1>娱乐新闻</h1>
  45. 		<h1>娱乐新闻</h1>
  46. 		<h1>娱乐新闻</h1>
  47. 		<h1>娱乐新闻</h1>	
  48. 	</body>
  49. </html>

Henkilökohtainen profiili

Hän on omistautunut teknologian tutkimukselle yli kolmenkymmenen vuoden ajan ja hallitsee useita kieliä, kuten java, linux, javascript, php, css jne., ja hän on tehnyt monia panoksia avoimen lähdekoodin alalla Kehittäjän dokumentaatioasema, jossa voit jakaa joitakin teknologian kehityksen ongelmia tulevaa käyttöä varten

yhteystietoni

Mail