Tema: Encontrar etiquetas html, class y id's (con expresiones regulares)
Ver Mensaje Individual
  #25 (permalink)  
Antiguo 19/01/2010, 12:56
Avatar de neodani
neodani
 
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 2 meses
Puntos: 20
Respuesta: Encontrar etiquetas html, class y id's (con expresiones regulares)
Buenas,

Vuelvo a la carga, esta vez con algo más sofisticado y útil... espero que me podáis echar una mano con un par de errores. Comparto el código con toda la comunidad! para aquel que quiera echar una mano.

Ejemplo de hoja de estilo y web. En el siguiente POST está el script (aquí no cabía)

web.htm

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
  3. <head>
  4.     <title>Área restringida | Panel de Administración</title>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6.     <meta name="robots" content="noindex,nofollow"/>
  7.     <link rel='stylesheet' href='/css/entrada_login.css' type='text/css' media='all' />
  8.     <!-- Favicon -->
  9.     <link rel="shortcut icon" href="/imagenes/favicon.ico"/>
  10.  
  11. </head>
  12.  
  13. <body class="login">
  14.     <p id="borde-top"><a href="entrada_login.php" title="Panel de Administración ME">ATENCIÓN: Área privada.</a></p>
  15.     
  16.     <!-- Formulario Entrada -->
  17.     <div id="login">
  18.         <h1 title="Panel de Administración ME"></h1>
  19.                     
  20.         <form id="loginform" action="includes/login.php" method="post">
  21.             <p>
  22.                 <label>Nombre de usuario<br />
  23.  
  24.                 <input type="text" name="user" id="user_login" class="input" value="" size="20" tabindex="1" accesskey="1"/></label>
  25.             </p>
  26.             <p>
  27.                 <label>Contraseña<br />
  28.                 <input type="password" name="password" id="user_pass" class="input" value="" size="20" tabindex="2" accesskey="2" /></label>
  29.             </p>
  30.             <p class="forgetmenot"><label><input name="rememberme" type="checkbox" id="rememberme" value="forever" tabindex="90" /> Recordarme</label></p>
  31.  
  32.             <p class="submit">
  33.                 <input type="submit" name="wp-submit" id="wp-submit" value="Iniciar Sesión" tabindex="100" />
  34.             </p>
  35.         </form>
  36.         <p id="nav">
  37.             <a href="#">Área privada.</a>
  38.         </p>
  39.     </div>
  40.  
  41.     </body>
  42. </html>


style.css

Código CSS: 
Ver original
  1. * {
  2.     margin: 0;
  3.     padding: 0; }
  4.  
  5. body {
  6.     border-top-color: #EAF3FA; /* Color barra superior */
  7.     border-top-style: solid;
  8.     border-top-width: 30px;
  9.     color: #333333;
  10.     font-family: "Lucida Grande","Lucida Sans Unicode",Tahoma,Verdana,sans-serif; /*border-top-color:#464646; */
  11.     font-size-adjust: none;
  12.     font-size: 12px;
  13.     font-style: normal;
  14.     font-variant: normal;
  15.     font-weight: normal;
  16.     line-height: normal; }
  17.  
  18. /* PARTE DE ARRIBA (TOP)
  19. ------------------------------------------------- */
  20. #borde-top a {
  21.     color: #0090EF;
  22.     left: 15px;
  23.     position: absolute;
  24.     text-decoration: none;
  25.     top: 7px; }
  26.  
  27. .login #borde-top a:hover { color: #000; }
  28.  
  29. /* TITULO PRINCIPAL (LOGO)
  30. ------------------------------------------------- */
  31. h1 {
  32.     background: url(../imagenes/header/logo-acceso-panel.png) no-repeat;
  33.     display: block;
  34.     height: 40px;
  35.     margin-left: 15px;
  36.     overflow: hidden;
  37.     padding-bottom: 15px;
  38.     text-indent: -9999px;
  39.     width: 320px; }
  40.  
  41. /* FORMULARIO
  42. ------------------------------------------------- */
  43. form {
  44.     -khtml-border-radius: 5px;
  45.     -moz-border-radius: 5px;
  46.     -webkit-border-radius: 5px;
  47.     border-radius: 5px;
  48.     font-weight: bold;
  49.     margin-left: 8px;
  50.     padding: 16px 16px 40px 16px; }
  51.  
  52.     form p { margin-bottom: 24px; }
  53.  
  54. /* Tamaño del recuadro */
  55. #login {
  56.     margin: 7em auto;
  57.     width: 350px; }
  58.  
  59. /* Tamaño de las casillas USER Y PASS */
  60. #user_pass, #user_login {
  61.     font-size: 20px;
  62.     margin-right: 6px;
  63.     padding: 3px;
  64.     width: 97%; }
  65.  
  66. /* Color texto input */
  67. #login form input { color: #555555; }
  68.  
  69. /* Color de fondo LOGIN (azul claro) */
  70. .login form { background-color: #eee; }
  71.  
  72. /* CASILLA >> RECORDARME
  73. ------------------------------------------------- */
  74. form .forgetmenot {
  75.     float: left;
  76.     font-weight: normal;
  77.     margin-bottom: 0;
  78.     margin-left: 2px; }
  79.  
  80. /* BOTON >> INICIAR SESIÓN
  81. ------------------------------------------------- */
  82. #login form .submit input {
  83.     -khtml-border-radius: 3px;
  84.     -moz-border-radius: 3px;
  85.     -webkit-border-radius: 3px;
  86.     background-color: #CEE1EF;
  87.     border-color: #80B5D0;
  88.     border-radius: 3px;
  89.     border-style: solid;
  90.     border-width: 1px;
  91.     border: none;
  92.     color: #224466;
  93.     cursor: pointer;
  94.     float: right;
  95.     font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, sans-serif;
  96.     font-size: 13px;
  97.     margin-top: -6px;
  98.     padding: 3px 5px;
  99.     text-decoration: none; }
  100.  
  101.     #login form .submit input:hover {
  102.         background-color: #9ACBEF;
  103.         border-color: #328AB2;
  104.         color: #FFF; }
  105.  
  106. /* FOOTER FORMULARIO
  107. ------------------------------------------------- */
  108. #nav {
  109.     margin: 0 0 0 8px;
  110.     padding: 16px;
  111.     text-align: center; }
  112.  
  113. .login #nav a { color: #777777;
  114.     color: #777777;
  115.     color: #777777;
  116.  }
  117. #myform form .login input:hover {
  118.         background-color: #9ACBEF;
  119.         border-color: #328AB2;
  120.         color: #FFF; }
  121. /* MENSAJES DE ERROR (FORMULARIO)
  122. ------------------------------------------------- */
  123. #login_error {
  124.     background-color: #FFEBE8;
  125.     border-color: #CC0000;
  126.     border-style: solid;
  127.     border-width: 1px;
  128.     margin: 0 0 13px 8px;
  129.     padding: 8px; }

Salida que produce ahora mismo

Código: 
<pre>HTML<br/>Array
(
    [0] => html
    [1] => body
    [2] => p
    [3] => a
    [4] => div
    [5] => h1
    [6] => form
    [8] => label
    [9] => br
    [10] => input
)
ID<br/>Array
(
    [0] => borde-top
    [1] => login
    [2] => loginform
    [3] => user_login
    [4] => user_pass
    [5] => rememberme
    [6] => wp-submit
    [7] => nav
)
<br/>CLASS<br/>Array
(
    [0] => login
    [1] => forgetmenot
    [2] => submit
)
</pre><br/><br/> <strong>TAGS HTML</strong> <br/><br/>

body {
	border-top-color: #EAF3FA; /* Color barra superior */
	border-top-style: solid;
	border-top-width: 30px;
	color: #333333;
	font-family: "Lucida Grande","Lucida Sans Unicode",Tahoma,Verdana,sans-serif; /*border-top-color:#464646; */
	font-size-adjust: none;
	font-size: 12px;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	line-height: normal; }
#borde-top a {
	color: #0090EF;
	left: 15px;
	position: absolute;
	text-decoration: none;
	top: 7px; }

.login #borde-top a:hover { color: #000; }

	form p { margin-bottom: 24px; }
#login form input { color: #555555; }
#login form .submit input {
	-khtml-border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	background-color: #CEE1EF;
	border-color: #80B5D0;
	border-radius: 3px;
	border-style: solid;
	border-width: 1px;
	border: none;
	color: #224466;
	cursor: pointer;
	float: right;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, sans-serif;
	font-size: 13px;
	margin-top: -6px;
	padding: 3px 5px;
	text-decoration: none; }

	#login form .submit input:hover {
		background-color: #9ACBEF;
		border-color: #328AB2;
		color: #FFF; }
#myform form .login input:hover {
		background-color: #9ACBEF;
		border-color: #328AB2;
		color: #FFF; }
#borde-top a {
	color: #0090EF;
	left: 15px;
	position: absolute;
	text-decoration: none;
	top: 7px; }

.login #borde-top a:hover { color: #000; }
#nav {
	margin: 0 0 0 8px;
	padding: 16px;
	text-align: center; }

.login #nav a { color: #777777;
	color: #777777;
	color: #777777;
 }
h1 {
	background: url(../imagenes/header/logo-acceso-panel.png) no-repeat;
	display: block;
	height: 40px;
	margin-left: 15px;
	overflow: hidden;
	padding-bottom: 15px;
	text-indent: -9999px;
	width: 320px; }
form {
	-khtml-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	font-weight: bold;
	margin-left: 8px;
	padding: 16px 16px 40px 16px; }

	form p { margin-bottom: 24px; }
#login form input { color: #555555; }
.login form { background-color: #eee; }
#login form input { color: #555555; }
#login form .submit input {
	-khtml-border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	background-color: #CEE1EF;
	border-color: #80B5D0;
	border-radius: 3px;
	border-style: solid;
	border-width: 1px;
	border: none;
	color: #224466;
	cursor: pointer;
	float: right;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, sans-serif;
	font-size: 13px;
	margin-top: -6px;
	padding: 3px 5px;
	text-decoration: none; }

	#login form .submit input:hover {
		background-color: #9ACBEF;
		border-color: #328AB2;
		color: #FFF; }
#myform form .login input:hover {
		background-color: #9ACBEF;
		border-color: #328AB2;
		color: #FFF; }<br/><br/> 

<strong>TAGS ID</strong> <br/><br/>borde-toploginloginformuser_loginuser_passremembermewp-submitnav<br/><br/> 

<strong>TAGS CLASS</strong> <br/><br/>loginforgetmenotsubmit