Partage de technologie

Sélecteurs CSS, propriétés communes, modèle de boîte et positionnement

2024-07-12

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

CSS

Sélecteur

Sélecteur CSS : sélectionnez la balise correspondante dans la page (document) et définissez le style

sélecteur de caractères génériques
  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>
sélecteur de base

Les sélecteurs de base sont divisés en sélecteurs de balises, sélecteurs de classe et sélecteurs d'ID.

sélecteur de balises
  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>
sélecteur de classe

Au ... début

  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>
Sélecteur d'identifiant

Commençant par #, l'identifiant est unique

  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. ​
Priorité du sélecteur de base

Sélecteur d'ID &gt; Sélecteur de classe &gt; Sélecteur de balises

Sélecteur de groupe
  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>
​
sélecteur dérivé

Également appelés sélecteurs contextuels

Divisé en sélecteurs descendants, sélecteurs descendants et sélecteurs frères et sœurs adjacents

sélecteur de descendants

Notez l'utilisation des espaces

  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. ​
sélecteur de descendants

REMARQUE : utilisez le symbole &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. ​
sélecteur de frère voisin

Notez l'utilisation du signe +

Les styles agissent sur ces derniers

  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>
​
sélecteur d'attribut
  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>
pseudo-classe d'ancrage

Définissez le style de chaque état du lien hypertexte (état non visité, état visité, état du lien hypertexte survolé par la souris, état enfoncé avec la souris)

  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>

Propriétés communes

priorité de style
  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>
Propriétés CSS couramment utilisées

1.Attributs de police

Nom de la propriété

famille de polices (police)

taille de police (taille)

style de police (style)

---- style standard normal

---- italique italique

---- inclinaison oblique

---- hérite du style de police hérité de la classe parent

poids de la police (police en gras)

----style standard normal

----gras gras

---- plus gras est plus épais

----le briquet est plus fin

2.Attributs du texte

Nom de la propriété

espacement des lettres (espacement des lettres)

décoration de texte (décoration soulignée)

text-align (alignement du texte)

retrait de texte (retrait du texte)

hauteur de ligne (hauteur de ligne)

3.Contexte

Nom de la propriété

Couleur de l'arrière plan

image de fond

Répétition du fond

4. Frontière

Nom de la propriété

Bordure du bas

solide (ligne continue)

pointillé(ligne pointillée)

double (double ligne continue)

  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>

modèle de boîte

rembourrage
  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>
marges
  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>
Centrer horizontalement
  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

positionnement relatif

Positionnement relatif : conserver la position d'origine et se déplacer par rapport à la position d'origine

  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>
positionnement absolu

Positionnement absolu : ne conservez pas la position d'origine, recherchez l'élément parent, déterminez si l'élément parent a un attribut de position, si c'est le cas, positionnez-le en fonction de l'élément parent, sinon, continuez à rechercher l'élément parent jusqu'au corps

  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>

Positionnement fixe
  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>

Profil personnel

Il se consacre à la recherche technologique depuis plus de trente ans, maîtrise divers langages tels que java, linux, javascript, php, css, etc., et a apporté de nombreuses contributions dans le domaine de l'open source. une station de documentation pour les développeurs pour partager certains problèmes de développement technologique pour référence future.

mes coordonnées

Mail