Technologieaustausch

CSS-Selektoren, allgemeine Eigenschaften, Boxmodell und Positionierung

2024-07-12

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

CSS

Wähler

CSS-Selektor: Wählen Sie das entsprechende Tag auf der Seite (Dokument) aus und legen Sie den Stil fest

Wildcard-Selektor
  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>
Basisselektor

Grundlegende Selektoren sind in Tag-Selektoren, Klassen-Selektoren und ID-Selektoren unterteilt.

Tag-Selektor
  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>
Klassenselektor

Zu ... Anfang

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

Die ID beginnt mit # und ist eindeutig

  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. ​
Grundlegende Auswahlpriorität

ID-Auswahl &gt; Klassenauswahl &gt; Tag-Auswahl

Gruppenauswahl
  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>
​
abgeleiteter Selektor

Auch als Kontextselektoren bekannt

Unterteilt in Nachkommenselektoren, Nachkommenselektoren und benachbarte Geschwisterselektoren

Nachkommenselektor

Beachten Sie die Verwendung von Leerzeichen

  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. ​
Nachkommenselektor

HINWEIS: Verwenden Sie das Symbol &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. ​
Nachbar-Geschwister-Selektor

Beachten Sie die Verwendung des +-Zeichens

Stile wirken auf Letzteres

  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>
​
Attributselektor
  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>
Anker-Pseudoklasse

Legen Sie den Stil für jeden Status des Hyperlinks fest (nicht besuchter Status, besuchter Status, Status des Hyperlinks mit der Maus darüber, Status mit gedrückter Maus).

  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>

Gemeinsame Eigenschaften

Stil Priorität
  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>
Häufig verwendete CSS-Eigenschaften

1.Schriftattribute

Name des Anwesens

Schriftfamilie(Schriftart)

Schriftgröße (Größe)

Schriftstil (Stil)

---- normaler Standardstil

---- kursiv kursiv

---- schräge Neigung

---- erbt den von der übergeordneten Klasse geerbten Schriftstil

Schriftstärke (Fettschrift)

----normaler Standardstil

----fett fett

----fetter ist dicker

----leichter ist dünner

2.Textattribute

Name des Anwesens

Buchstabenabstand (Buchstabenabstand)

Textdekoration (Unterstreichungsdekoration)

text-align (Textausrichtung)

text-indent (Texteinzug)

Zeilenhöhe (Zeilenhöhe)

3.Hintergrund

Name des Anwesens

Hintergrundfarbe

Hintergrundbild

Hintergrund Wiederholung

4. Grenze

Name des Anwesens

Rahmen unten

durchgezogen (durchgezogene Linie)

gestrichelt (gestrichelte Linie)

doppelt (doppelte durchgezogene Linie)

  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>

Boxmodell

Polsterung
  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>
Ränder
  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>
Horizontal zentrieren
  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>

Position

relative Positionierung

Relative Positionierung: Behalten Sie die ursprüngliche Position bei und verschieben Sie sie relativ zur ursprünglichen Position

  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>
absolute Positionierung

Absolute Positionierung: Behalten Sie die ursprüngliche Position nicht bei, suchen Sie nach dem übergeordneten Element und bestimmen Sie, ob das übergeordnete Element ein Positionsattribut hat. Wenn ja, positionieren Sie es entsprechend dem übergeordneten Element. Wenn nicht, suchen Sie weiter nach dem übergeordneten Element bis zum Körper

  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>

Feste Positionierung
  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>

Persönliches Profil

Er widmet sich seit mehr als dreißig Jahren der Technologieforschung und beherrscht verschiedene Sprachen wie Java, Linux, Javascript, PHP, CSS usw. und hat viele Beiträge im Open-Source-Bereich geleistet eine Entwicklerdokumentationsstation, um einige Themen in der Technologieentwicklung als zukünftige Referenz zu teilen

meine Kontaktdaten

Post