Picas Y Fijas Invertido PHP

 Mi compañero es: Dahivid Andres Mateus



Publicadas por No hay comentarios.:

Publicadas por No hay comentarios.:

Capitulo 12 Layout

Capitulo 12 Layout

Layout

El diseño de las paginas web se divide en varios bloques: cabecera, menú,contenidos y pie de página
 Las principales ventajas de diseñar la estructura de las páginas web con CSS en vez de con tablas HTML son las siguientes:

-Mantenimiento: Si se necesita realizar algun cambio en la pagina, es mucho mas facil si se tiene css sin usar tablas, en cambio una pagina con tablas es mas complicada modificarla, y puede causar errores

-Accesibilidad: Los navegadores son mas accesibles con paginas hechas con CSS

-Velocidad de carga: Una pagina al estar hecha con tablas, tiene mas código, y por lo tanto un mayor tiempo de carga, si es con CSS, al no tener tablas hay menos código y por lo tanto su descarga y ejecución es mas rápida

-Semántica: Las tablas de html solo son funcionales si hay datos que solo se pueden entender en filas y columnas.

Centrar una página horizolmante

Cuando se ingresan a paginas teniendo una pantalla de ordenador superior a 1024 x 768 pixeles, provoca que la pagina intente organizar el contenido, provocando una sensacion de vacio , y uqe los textos se vean estiradas.

Para solucionar este problema, se deben crear paginas con una anchura fija adecuada y centarr la pagina con respecto a la ventana del navegador, para ello se usa la propiedad margin, la cual agrupa todos los contenidos de la pagina en un elemento div, y a si mismo este se le agregan unos márgenes laterales automáticos

Página de anchura fija centrada mediante CSSPágina de anchura fija centrada mediante CSS

#contenedor {
  width: 300px;
  margin: 0 auto;
}

<body>
  <div id="contenedor">
    <h1>Lorem ipsum dolor sit amet</h1>
    ...
  </div>
</body>

Centrar una página verticalmente

El objetivo de esto es que el contenido de la pagina siempre quede en el centro para que sea fácil de leer, centrar verticalmente es mas complicado que horizontalmente.
#contenedor {
  width: 300px;
  height: 250px;
  margin: auto;
}

<body>
  <div id="contenedor">
    <h1>Lorem ipsum dolor sit amet</h1>
    ...
  </div>
Pasos necesarios para centrar verticalmente una página web
Se debe asignar una altura y anchura al elemento que encierra todos los contenidso de la pagina
#contenedor {
  width: 500px;
  height: 500px;
}

<body>
  <div id="contenedor">
    <h1>Lorem ipsum dolor sit amet</h1>
    ...
  </div>
</body>
Luego se posiciona de forma abosuluta el contenedor y se le asigna el 50% a la propiedad top y left, asi quedara en el centro, antes estaba en la esquina superior izquierda
#contenedor {
  width: 500px;
  height: 500px;

  position: absolute;
  top: 50%;
  left: 50%;
}


Alturas/anchuras máximas y mínimas

CSS define cuatro propiedades para limitar la anchura, altura minima y maxima de cualquier elemento de la pagina
-max-width: Permite definir la anchura máxima de un elemento
div {
  max-width: 800px;
  width: expression(document.body.clientWidth > 801? "800px": "auto");
}
-min-width: Permite definir la anchura mínima de un elemento
div {
  min-width:800px;
  width: expression(document.body.clientWidth < 801? "800px": "auto" );
}
-max-height: Permite definir la altura máxima de un elemento
div {
  max-height: 300px;
  overflow: hidden;
  height: expression(this.scrollHeight > 301? "300px" : "auto" );
}
-min-height: Permite definir la altura mínima de un elemento
div {
  min-height:300px;
  overflow: hidden;
  height: expression(this.scrollHeight < 301? "300px" : "auto" );
}



















Publicadas por






No hay comentarios.:
  











































Capitulo 11 Formularios












Capitulo 11 Formularios



Estilos Básicos



Padding



Los campos de  texto en los formularios por defecto no llevan ningún espacio de relleno, por lo que el texto ingresado queda junto a los bordes, con esta propiedad el texto se mueve un poco y deja de estar junto al borde







Mejorando el aspecto de los formularios gracias al padding




form.elegante input {
  padding: .2em;
}















border-collapse





Fusiona de forma automatica los bordes de las celdas que son adyacentes, mienstras que el modelo separate, lo que hace es forzar las celdas para que muestren sus cuatro bordes, se usa preferiblemente el modelo collapse ya que resulta mas atractivo









Labels alineadas y formateadas



Los elementos <input> y <label> de los formularios son elementos en línea, por lo que el aspecto que muestran los formularios por defecto



Aspecto por defecto que muestran los formularios




<form>
<fieldset>
  <legend>Alta en el servicio</legend>

  <label for="nombre">Nombre</label>
  <input type="text" id="nombre" />

  <label for="apellidos">Apellidos</label>
  <input type="text" id="apellidos" size="50" />

  <label for="dni">DNI</label>
  <input type="text" id="dni" size="10" maxlength="9" />

  <label for="contrasena">Contraseña</label>
  <input type="password" id="contrasena" />

  <input class="btn" type="submit" value="Darme de alta" />
</fieldset>
</form>


Mostrando las etiquetas label encima de los campos del formulario







En primer lugar, se muestran los elementos <label> como elementos de bloque, para que añadan una separación para cada campo del formulario. Además, se añade un margen superior para no mostrar juntas todas las filas del formulario:




label {
  display: block;
  margin: .5em 0 0 0;
}





El botón del formulario también se muestra como un elemento de bloque y se le añade un margen para darle el aspecto final deseado:




.btn {
  display: block;
  margin: 1em 0;
}







El siguiente es el esquema de alineación de etiquetas label y campos de formulario



Esquema de la técnica de alineación de etiquetas label y campos de formulario






<form>
  <fieldset>
  <legend>Alta en el servicio</legend>

  <div>
    <label for="nombre">Nombre</label>
    <input type="text" id="nombre" />
  </div>

  <div>
    <label for="apellidos">Apellidos</label>
    <input type="text" id="apellidos" size="35" />
  </div>
  ...
</fieldset>
</form>






div {
  margin: .4em 0;
}
div label {
  width: 25%;
  float: left;
}























Estilos Avanzados



Formulario en varias columnas























Los formularios que son muy largos ocupan mucho espacio, por lo que se puede dividir en dos columnas para mejorar el espacio.

    Ejemplo de formulario a dos columnas


form fieldset {
  float: left;
  width: 48%;
}

<form>
  <fieldset>
    ...
  </fieldset>

  ...
</form>







Resaltar campo seleccionada































Se usa la pseudo-clase: focus, la cual aplica estilos especiales al elemento en el momento que tiene el foco de atención del usuario.

Ejemplo de pseudo-clase :focus










input:focus {
  border: 2px solid #000;
  background: #F3F3F3;
}


























Publicadas por






No hay comentarios.:
  


































          

        

          

        

          

        










Capitulo 10 Tablas












Capitulo 10 Tablas



Estilos Básicos



Cuando se aplican bordes a las celdas de una tabla, el que viene por defecto es el siguiente:







Aspecto por defecto de los bordes de una tabla








.normal {
  width: 250px;
  border: 1px solid #000;
}
.normal th, .normal td {
  border: 1px solid #000;
}

<table class="normal" summary="Tabla genérica">
  <tr>
    <th scope="col">A</th>
    <th scope="col">B</th>
    <th scope="col">C</th>
    <th scope="col">D</th>
    <th scope="col">E</th>
  </tr>
  ...
</table>









border-collapse





Fusiona de forma automatica los bordes de las celdas que son adyacentes, mienstras que el modelo separate, lo que hace es forzar las celdas para que muestren sus cuatro bordes, se usa preferiblemente el modelo collapse ya que resulta mas atractivo



Ejemplo de propiedad border-collapse


.normal {
  width: 250px;
  border: 1px solid #000;
  border-collapse: collapse;
}
.normal th, .normal td {
  border: 1px solid #000;
}

<table class="normal" summary="Tabla genérica">
  <tr>
    <th scope="col">A</th>
    <th scope="col">B</th>
    <th scope="col">C</th>
    <th scope="col">D</th>
    <th scope="col">E</th>
  </tr>
  ...
</table>







border-spacing

















Esta se aplica a todas las tablas, esta propiedad controla la separacion de celdas,no se puede utilizar para modificar el tipo de bordes que se utilizan













Ejemplo de propiedad border-spacing







Estilos Avanzados



empty-cells























Esta propiedad sirve para ocultar las celdas que esten vacias

Ejemplo de propiedad empty-cells

Internet Explorer no soporta la propiedad empty-cells







caption-side





Esta propiedad establece la posición del titulo de la tabla, el valor bottom indica que el titulo se debe mostrar debajo



Ejemplo de propiedad caption-side














Publicadas por






No hay comentarios.:
  











































Capitulo 9 Listas












Capitulo 9 Listas







Viñetas personalizadas







En primer lugar, el valor none permite mostrar una lista en la que sus elementos no contienen viñetas, números o letras. Se trata de un valor muy utilizado, ya que es imprescindible para los menús de navegación creados con listas, como se verá más adelante.



El resto de valores de la propiedad list-style-type se dividen en tres tipos: gráficos, numéricos y alfabéticos.




    

  • Los valores gráficos son disc, circle y square y muestran como viñeta un círculo relleno, un círculo vacío y un cuadrado relleno respectivamente.
    • 



    

  • Los valores numéricos están formados por decimal, decimal-leading-zero, lower-roman, upper-roman, armenian y georgian.
    • 



    

  • Por último, los valores alfanuméricos se controlan mediante lower-latin, lower-alpha, upper-latin, upper-alpha y lower-greek.
    • 












Ejemplo de propiedad list-style-type




<ul style="list-style-type: square">
  <li>list-style-type: square</li>
  <li>Elemento</li>
  <li>Elemento</li>
</ul>

<ol style="list-style-type: lower-roman">
  <li>list-style-type: lower-roman</li>
  <li>Elemento</li>
  <li>Elemento</li>
</ol>

<ol style="list-style-type: decimal-leading-zero; padding-left: 2em;">
  <li>list-style-type: decimal-leading-zero</li>
  <li>Elemento</li>
  <li>Elemento</li>
</ol>
















Publicadas por






No hay comentarios.:
  










































Capitulo 8 Imágenes












Capitulo 8 Imágenes





Estilos Básicos





Altura y anchura





Se puede modificar la altura con height y la anchura con width




#destacada {
  width: 120px;
  height: 250px;
}







<img id="destacada" src="imagen.png" />





Borrar el borde





Aveces cuando una imagen hace parte de un enlace, los navegadores muestran un borde grueso alrededor, para eliminar esto, usamos el siguiente codigo:


img {
  border: none;
}



.





Estilos Avanzados



Sombra









El inconveniente con este método es que la sombra siempre esta apuntando hacia la misma direccion


.dropshadow {
  float:left;
  clear:left;
  background: url(imagenes/shadowAlpha.png) no-repeat bottom right !important;
  background: url(imagenes/shadow.gif) no-repeat bottom right;
  margin: 10px 0 10px 10px !important;
  margin: 10px 0 10px 5px;
  padding: 0px;
}
.innerbox {
  position:relative;
  bottom:6px;
  right: 6px;
  border: 1px solid #999999;
  padding:4px;
  margin: 0px 0px 0px 0px;
}

<div class="dropshadow">
<div class="innerbox">
  <img src="imagenes/imagen.png" alt="Imagen genérica" />
</div>
</div>

<div class="dropshadow">
<div class="innerbox">
  <h4>Párrafo de texto</h4>
  <p>Esta técnica no sólo permite añadir sombra a las imágenes, sino a cualquier elemento.</p>
</div>
</div>




























Publicadas por






No hay comentarios.:
  


































        

      









Suscribirse a:
Entradas (Atom)