» » ESTILOS BASICOS CSS- LISTAS IMAGENES, OTROS
martes, 12 de julio de 2016

20:17
Antes de que se generalizara el uso de CSS, los diseñadores de páginas web utilizaban etiquetas HTML especiales para modificar el aspecto de los elementos de la página. El siguiente ejemplo muestra una página HTML con estilos definidos sin utilizar CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Ejemplo de estilos sin CSS</title>
</head>

<body>
  <h1><font color="red" face="Arial" size="5">Titular de la página</font></h1>
  <p><font color="gray" face="Verdana" size="2">Un párrafo de texto no muy largo.</font></p>
</body>
</html>
El ejemplo anterior utiliza la etiqueta <font> con sus atributos color, face y size para definir el color, el tipo y el tamaño de letra de cada elemento de la página.
El problema de utilizar este método para definir el aspecto de los elementos se puede ver claramente con el siguiente ejemplo: si la página tuviera 50 elementos diferentes, habría que insertar 50 etiquetas <font>. Si el sitio web entero se compone de 10.000 páginas diferentes, habría que definir 500.000 etiquetas <font>. Como cada etiqueta <font> tiene tres atributos, habría que definir 1.5 millones de atributos.
Como el diseño de los sitios web está en constante evolución, es habitual modificar cada cierto tiempo el aspecto de las páginas del sitio. Siguiendo con el ejemplo anterior, cambiar el aspecto del sitio requeriría modificar 500.000 etiquetas y 1.5 millones de atributos.
La solución que propone CSS es mucho mejor, como se puede ver en el siguiente ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de estilos con CSS</title>
<style type="text/css">
  h1 { color: red;  font-family: Arial;   font-size: large;  }
  p  { color: gray; font-family: Verdana; font-size: medium; }
</style>
</head>

<body>
  <h1>Titular de la página</h1>
  <p>Un párrafo de texto no muy largo.</p>
</body>
</html>
CSS permite separar los contenidos de la página y la información sobre su aspecto. En el ejemplo anterior, dentro de la propia página HTML se crea una zona especial en la que se incluye toda la información relacionada con los estilos de la página.
Utilizando CSS, se pueden establecer los mismos estilos con menos esfuerzo y sin ensuciar el código HTML de los contenidos con etiquetas <font>. Como se verá más adelante, la etiqueta <style> crea una zona especial donde se incluyen todas las reglas CSS que se aplican en la página.
En el ejemplo anterior, dentro de la zona de CSS se indica que todas las etiquetas <h1> de la página se deben ver de color rojo, con un tipo de letra Arial y con un tamaño de letra grande. Además, las etiquetas <p> de la página se deben ver de color gris, con un tipo de letra Verdana y con un tamaño de letra medio.
Definir los estilos de esta forma ahorra miles de etiquetas y millones de atributos respecto a la solución anterior, pero sigue sin ser una solución ideal. Como los estilos CSS sólo se aplican en la página que los incluye, si queremos que las 10.000 páginas diferentes del sitio tengan el mismo aspecto, se deberían copiar 10.000 veces esas mismas reglas CSS. Más adelante se explica la solución que propone CSS para evitar este problema.

Fuente de Información:


http://librosweb.es/libro/css/capitulo_1/funcionamiento_basico_de_css.html
Estilo de las listas
Es posible definir el tipo de las listas con CSS. Por ejemplo: 
ul {list-style-type:square;}
ol {list-style-type:upper-roman;}
El parámetro list-style-type puede tener, entre otros, los siguientes valores:
  • disc (por defecto)
  • none
  • circle
  • square
  • decimal
  • upper-roman
  • lower-roman
  • upper-alpha
  • lower-alpha
Como puedes ver, aunque denominados de otra forma, coinciden con los definidos en la sección de las listas vistas en HTML. 

Estilo Imágenes: Control del tamaño desde CSS o desde HTML

Hemos visto cómo controlar el tamaño de la imagen desde el propio código HTML, incluyendo en la etiqueta de imagen los atributos width y height.
Con el código CSS también podemos controlar el tamaño de las imágenes mediante las propiedades width (ancho) y height (alto) las cuales veremos a continuación. Estas propiedades nos permiten mostrar la imagen con cualquier anchura y altura, independientemente de su altura o anchura real.
No obstante si utilizamos anchuras y alturas con distintas proporciones a las reales, la imagen puede quedar distorsionada, con un desagradable resultado estético.
Sin embargo controlar el tamañó de la imagen con CSS puede que en ocasiones no resulte 
práctico, ya que puede ser que cada imagen de la página tenga un tamaño distinto, lo que nos obliga a crear un selector distinto para cada imagen en el código CSS, lo cual implica que en el código HTML deberíamos poner un atributo de clase distinto para cada imagen; todo esto puede sobrecargar demasiado el código.

En estos casos es mucho más simple utilizar en el cödigo HTML los atributos width y height para cada imagen, tal como se explica en la página 5.1. Insertar imágenes del manual de HTML.
Sin embargo si tenemos una serie de imágenes, todas del mismo tamaño, (por ejemplo un album de fotos familiar), sí que puede ser más conveniente utilizar el código CSS.

Estilo de Texto:
CSS define numerosas propiedades para modificar la apariencia del texto. A pesar de que no dispone de tantas posibilidades como los lenguajes y programas específicos para crear documentos impresos, CSS permite aplicar estilos complejos y muy variados al texto de las páginas web.
La propiedad básica que define CSS relacionada con la tipografía se denomina color y se utiliza para establecer el color de la letra.
Propiedad
color
Valores
color | inherit
Se aplica a
Todos los elementos
Valor inicial
Depende del navegador
Descripción
Establece el color de letra utilizado para el texto
Aunque el color por defecto del texto depende del navegador, todos los navegadores principales utilizan el color negro. Para establecer el color de letra de un texto, se puede utilizar cualquiera de las cinco formas que incluye CSS para definir un color.
A continuación se muestran varias reglas CSS que establecen el color del texto de diferentes formas:
h1 { color: #369; }
p  { color: black; }
a, span { color: #B1251E; }
div { color: rgb(71, 98, 176); }
Como el valor de la propiedad color se hereda, normalmente se establece la propiedad color en el elemento body para establecer el color de letra de todos los elementos de la página:
body { color: #777; }
En el ejemplo anterior, todos los elementos de la página muestran el mismo color de letra salvo que establezcan de forma explícita otro color. La única excepción de este comportamiento son los enlaces que se crean con la etiqueta <a>. Aunque el color de la letra se hereda de los elementos padre a los elementos hijo, con los enlaces no sucede lo mismo, por lo que es necesario indicar su color de forma explícita:
/* Establece el mismo color a todos los elementos de
   la página salvo los enlaces */
body { color: #777; }
 
/* Establece el mismo color a todos los elementos de
   la página, incluyendo los enlaces */
body, a { color: #777; }
La otra propiedad básica que define CSS relacionada con la tipografía se denomina font-family y se utiliza para indicar el tipo de letra con el que se muestra el texto.
Propiedad
font-family
Valores
(( nombre_familia | familia_generica ) (,nombre_familia | familia_generica)* ) | inherit
Se aplica a
Todos los elementos
Valor inicial
Depende del navegador
Descripción
Establece el tipo de letra utilizado para el texto
El tipo de letra del texto se puede indicar de dos formas diferentes:
  • Mediante el nombre de una familia tipográfica: en otras palabras, mediante el nombre del tipo de letra, como por ejemplo "Arial", "Verdana", "Garamond", etc.
  • Mediante el nombre genérico de una familia tipográfica: los nombres genéricos no se refieren a ninguna fuente en concreto, sino que hacen referencia al estilo del tipo de letra. Las familias genéricas definidas son serif (tipo de letra similar a Times New Roman), sans-serif (tipo Arial), cursive (tipo Comic Sans), fantasy (tipo Impact) y monospace (tipo Courier New).


Estilo Tablas:
Cuando se aplican bordes a las celdas de una tabla, el aspecto por defecto con el que se muestra en un navegador es el siguiente:

Figura 10.1 Aspecto por defecto de los bordes de una tabla

El código HTML y CSS del ejemplo anterior se muestra a continuación:
.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>
El estándar CSS 2.1 define dos modelos diferentes para el tratamiento de los bordes de las celdas. La propiedad que permite seleccionar el modelo de bordes es border-collapse:
Propiedad
border-collapse
Valores
collapse | separate | inherit
Se aplica a
Todas las tablas
Valor inicial
separate
Descripción
Define el mecanismo de fusión de los bordes de las celdas adyacentes de una tabla
El modelo collapse fusiona de forma automática los bordes de las celdas adyacentes, mientras que el modelo separate fuerza a que cada celda muestre sus cuatro bordes. Por defecto, los navegadores utilizan el modelo separate, tal y como se puede comprobar en el ejemplo anterior.
En general, los diseñadores prefieren el modelo collapse porque estéticamente resulta más atractivo y más parecido a las tablas de datos tradicionales. El ejemplo anterior se puede rehacer para mostrar la tabla con bordes sencillos y sin separación entre celdas:

Figura 10.2 Ejemplo de propiedad border-collapse

El código CSS completo del ejemplo anterior se muestra a continuación:
.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>
Aunque parece sencillo, el mecanismo que utiliza el modelo collapse es muy complejo, ya que cuando los bordes que se fusionan no son exactamente iguales, debe tener en cuenta la anchura de cada borde, su estilo y el tipo de celda que contiene el borde (columna, fila, grupo de filas, grupo de columnas) para determinar la prioridad de cada borde.
Si se opta por el modelo separate (que es el que se aplica si no se indica lo contrario) se puede utilizar la propiedad border-spacing para controlar la separación entre los bordes de cada celda.
Propiedad
border-spacing
Valores
unidad de medida unidad de medida? | inherit
Se aplica a
Todas las tablas
Valor inicial
0
Descripción
Establece la separación entre los bordes de las celdas adyacentes de una tabla
Si solamente se indica como valor una medida, se asigna ese valor como separación horizontal y vertical. Si se indican dos medidas, la primera es la separación horizontal y la segunda es la separación vertical entre celdas.
La propiedad border-spacing sólo controla la separación entre celdas y por tanto, no se puede utilizar para modificar el tipo de modelo de bordes que se utiliza. En concreto, si se establece un valor igual a 0 para la separación entre los bordes de las celdas, el resultado es muy diferente al modelo collapse:

Figura 10.3 Ejemplo de propiedad border-spacing
En la tabla del ejemplo anterior, se ha establecido la propiedad border-spacing: 0, por lo que el navegador no introduce ninguna separación entre los bordes de las celdas. Además, como no se ha establecido de forma explícita ningún modelo de bordes, el navegador utiliza el modelo separate.
El resultado es que border-spacing: 0 muestra los bordes con una anchura doble, ya que en realidad se trata de dos bordes iguales sin separación entre ellos. Por tanto, las diferencias visuales con el modelo border-collapse: collapse son muy evidentes.
FONDO BORDE TEXTO ESPACIADO ALINEACIÓN CSS
Los Márgenes de bloque son el espacio comprendido entre el bloque y el borde de la ventana activa del navegador. Se controla con el atributo margin.
Los Bordes de bloque, sin aplicar estilos, no son visibles, y es como un cuadro imaginario que envuelve todo el contenido del bloque. Su atributo de control es border.
Espaciado interno del bloque es la distancia entre el borde del bloque y su contenido. Es el atributo padding (en inglés significa algo así como "acolchado")
El Estilo y color de los bordes, son evidentes: son las líneas que delimitan el bloque, que pueden dibujarse de varias formas en cuanto a tipo de trazo, grosor y color. Estos dos atributos también pueden actuar sobre los bordes de otros elementos contenidos dentro de un bloque, como formularios, tablas, gráficos, etc.
El Color del fondo se controla con las mismas instrucciones que las de la página HTML: background. Los parámetros de color, al igual que en HTML, se pueden escribir con su nombre (en inglés) o con la notación RGB en hexadecimal.
El Tamaño son las dimensiones del bloque. Si no se indican dimensiones, por defecto, el bloque ocupará todo el ancho de la ventana, y de alto lo que su contenido precise. Se utilizan dos atributos para controlarlo: width para el ancho y height para el alto.

Estilo del texto

Veamos los parámetros disponibles para dar estilo al texto. Como ya sabes, las unidades de medida aplicables a todos ellos son varias, pero para mayor claridad, en todos los ejemplos utilizaremos solamente el píxel: px. Sea por ejemplo la siguiente página:
 
<HTML>
<HEAD><TITLE>Estilos</TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="estilo.css">
</HEAD>
<BODY>
 
Texto fuera de párrafo.<BR>
Segunda línea fuera de párrafo.
 
<P>texto de párrafo. <BR> segunda línea de párrafo.</P>
 
</BODY>
</HTML>
 



Fuente de Información: http://librosweb.es/libro/css/capitulo_10.html
                                  https://www.uv.es/jac/guia/estilo2.htm#punto6
                                      http://aprende-web.net/css/css5_1.php
                                  http://librosweb.es/libro/css/capitulo_6.html
                                  https://www.uv.es/jac/guia/estilo2.htm
Publicado por en 20:17
Etiquetas:

0 comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)