Compartir tecnología

Selectores CSS, propiedades comunes, modelo de caja y posicionamiento.

2024-07-12

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

CSS

Selector

Selector de CSS: seleccione la etiqueta correspondiente en la página (documento) y establezca el estilo

selector comodín
  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>
selector básico

Los selectores básicos se dividen en selectores de etiquetas, selectores de clases y selectores de ID.

selector de etiquetas
  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>
selector de clase

Comenzando

  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>
selector de identificación

Comenzando con #, la identificación es única

  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. ​
Prioridad del selector básico

Selector de ID &gt; Selector de clase &gt; Selector de etiquetas

selector de grupo
  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>
​
selector derivado

También conocidos como selectores contextuales.

Dividido en selectores descendientes, selectores descendientes y selectores de hermanos adyacentes

selector de descendientes

Tenga en cuenta el uso de espacios

  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. ​
selector de descendientes

NOTA: Utilice el símbolo &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. ​
selector de hermano vecino

Tenga en cuenta el uso del signo +

Los estilos actúan sobre este último.

  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>
​
selector de atributos
  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>
pseudoclase de anclaje

Establezca el estilo de cada estado del hipervínculo (estado no visitado, estado visitado, estado del hipervínculo al pasar el mouse, estado presionado con el mouse)

  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>

Propiedades comunes

prioridad de estilo
  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>
Propiedades CSS de uso común

1.Atributos de fuente

Nombre de la propiedad

familia de fuentes (fuente)

tamaño de fuente (tamaño)

estilo de fuente (estilo)

---- estilo estándar normal

---- cursiva cursiva

---- inclinación oblicua

---- heredar el estilo de fuente heredado de la clase principal

peso de fuente (fuente en negrita)

----estilo estándar normal

----negrita negrita

----más negrita es más gruesa

----más ligero es más delgado

2.Atributos de texto

Nombre de la propiedad

espaciado entre letras (espaciado entre letras)

decoración de texto (decoración subrayada)

alineación de texto (alineación de texto)

sangría de texto (sangría de texto)

altura de línea (altura de línea)

3.Antecedentes

Nombre de la propiedad

color de fondo

imagen de fondo

repetición de fondo

4. Frontera

Nombre de la propiedad

borde inferior

sólido (línea continua)

discontinuo (línea discontinua)

doble (doble línea continua)

  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>

modelo de caja

relleno
  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>
márgenes
  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>
Centrar horizontalmente
  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>

posición

posicionamiento relativo

Posicionamiento relativo: conserva la posición original y se mueve en relación con la posición original

  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>
posicionamiento absoluto

Posicionamiento absoluto: no conserve la posición original, busque el elemento principal, determine si el elemento principal tiene un atributo de posición, si es así, colóquelo de acuerdo con el elemento principal, si no, continúe buscando el elemento principal hasta el cuerpo

  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>

Posicionamiento fijo
  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>

Perfil personal

Se ha dedicado a la investigación de tecnología durante más de 30 años y domina varios lenguajes como java, linux, javascript, php, css, etc. Ha realizado muchas contribuciones en el campo del código abierto. Estación de documentación para desarrolladores para compartir algunos problemas en el desarrollo de tecnología para referencia futura.

Mi informacion de contacto

Correo