Compartilhamento de tecnologia

Seletores CSS, propriedades comuns, modelo de caixa e posicionamento

2024-07-12

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

CSS

Seletor

Seletor CSS: selecione a tag correspondente na página (documento) e defina o estilo

seletor curinga
  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>
seletor básico

Os seletores básicos são divididos em seletores de tags, seletores de classe e seletores de ID.

seletor de tags
  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>
seletor de classe

Para ... começando

  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>
Seletor de ID

Começando com #, o id é único

  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. ​
Prioridade básica do seletor

Seletor de ID &gt; Seletor de Classe &gt; Seletor de Tag

Seletor 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>
​
seletor derivado

Também conhecidos como seletores contextuais

Dividido em seletores descendentes, seletores descendentes e seletores irmãos adjacentes

seletor descendente

Observe o uso de espaços

  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. ​
seletor descendente

NOTA: Use o 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. ​
seletor de irmão vizinho

Observe o uso do sinal +

Os estilos atuam sobre o ú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>
​
seletor 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>
pseudoclasse âncora

Defina o estilo de cada estado do hiperlink (estado não visitado, estado visitado, estado do hiperlink ao passar o mouse, estado pressionado pelo 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>

Propriedades comuns

prioridade 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>
Propriedades CSS comumente usadas

1. Atributos de fonte

Nome da propriedade

família de fontes (fonte)

tamanho da fonte (tamanho)

estilo de fonte (estilo)

---- estilo padrão normal

---- itálico itálico

---- inclinação oblíqua

---- herdar o estilo da fonte herdado da classe pai

peso da fonte (fonte em negrito)

---- estilo padrão normal

---- negrito negrito

----mais ousado é mais grosso

----mais leve é ​​mais fino

2. Atributos de texto

Nome da propriedade

espaçamento entre letras (espaçamento entre letras)

decoração de texto (decoração sublinhada)

alinhamento de texto (alinhamento de texto)

recuo de texto (recuo de texto)

altura da linha (altura da linha)

3. Plano de fundo

Nome da propriedade

cor de fundo

imagem de fundo

fundo de repetição

4. Fronteira

Nome da propriedade

borda-inferior

sólido (linha sólida)

tracejado(linha tracejada)

duplo (linha sólida dupla)

  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 caixa

preenchimento
  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>
margens
  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>
Centralizar 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>

posição

posicionamento relativo

Posicionamento relativo: mantenha a posição original e mova-se em relação à posição 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>
posicionamento absoluto

Posicionamento absoluto: não retenha a posição original, pesquise o elemento pai, determine se o elemento pai possui um atributo de posição, em caso afirmativo, posicione-o de acordo com o elemento pai, caso contrário, continue pesquisando o elemento pai até o corpo

  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>

Posicionamento fixo
  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 pessoal

Ele se dedica à pesquisa de tecnologia há mais de trinta anos e é proficiente em diversas linguagens como java, linux, javascript, php, css, etc., e fez muitas contribuições no campo de código aberto. uma estação de documentação do desenvolvedor para compartilhar alguns problemas no desenvolvimento de tecnologia para referência futura.

minhas informações de contato

Correspondência