Amor de Amistad: Manuales

Home » Posts filed under Manuales

Showing posts with label Manuales. Show all posts

Modificar el diseño del blog: Propiedades y valores

Posted by Mrs Daddy at 11:46 PM

Las propiedades y valores corresponden al CSS de la plantilla.

Para entender un poco más, es necesario leer la entrada anterior.

CSS, siglas de "Cascade Style Sheet", son un conjunto de instrucciones que definen la apariencia de diversos elementos de un documento HTML.

Todas las propiedades necesitan un valor.

En CSS, las declaraciones son así: "propiedad : valor" y están separadas por un punto y coma.

propiedad : valor;
propiedad : valor;

No es necesario que estén en otra línea, pueden estar en una misma línea.

propiedad : valor; propiedad : valor;

Las propiedades y valores son lo que le dan un estilo visual a una estructura.

Puede ser aplicado a un elemento, el cual establecerá el estilo visual de dicho elemento.

En este caso va todo encerrado entre los signos { y }.

Ejemplo:

p {
Propiedad:Valor;
Propiedad:Valor;
}

O puede ser aplicado directo en la estructura con el atributo style:

En este caso va después de style= encerrado entre " y " o ' y '.

Ejemplo:

style="Propiedad:Valor;Propiedad:Valor;"

Las propiedades más utilizadas en una estructura son:

Border, margin, padding, width, height, font, background y color.

Sobre border, margin y padding, pueden leer algo en una entrada anterior, acá:

Algo mas sobre border pueden ir viendo acá:

Mas adelante voy a hacer una entrada mas detallada sobre border.

Propiedades con su valor aceptado en CSS:

Márgenes

Propiedad	Descripción	Valores
margin	Ancho para varios márgenes individuales.	longitud % auto
margin-top margin-right margin-bottom margin-left	Tamaño del margen superior, derecho, inferior e izquierdo.	longitud % auto

Relleno

Propiedad	Descripción	Valores
padding	Tamaños para varios rellenos individuales.	longitud %
padding-top padding-right padding-bottom padding-left	Ancho del relleno superior, derecho, inferior e izquierdo.	longitud %

Dimensiones

Propiedad	Descripción	Valores
width	Ancho.	longitud % auto
min-width	Ancho mínimo.	longitud %
max-width	Ancho máximo.	longitud % none
height	Alto.	longitud % auto
min-height	Alto mínimo.	longitud %
max-height	Alto máximo.	longitud % none
line-height	Altura entre las bases del texto.	normal número longitud %

Fuentes

Propiedad	Descripción	Valores
font	Atajo para establecer el resto de propiedades sobre las fuentes a la vez.	font-style font-variant font-weight font-size font-family line height caption icon menu message-box small-caption status-bar
font-family	Familias de fuentes.	nombre-familia familia-genérica
font-style	Estilo de la fuente.	normal italic oblique
font-variant	Convierte las minúsculas a mayúsculas pero mantienen un tamaño inferior a las mayúsculas.	normal small-caps
font-weight	Intensidad de la fuente.	normal bold bolder lighter 100 200 300 400 500 600 700 800 900
font-size	Tamaño de la fuente.	xx-small x-small small medium large x-large xx-large larger smaller longitud %

Fondo

Propiedad	Descripción	Valores
background	Propiedades individuales relacionadas con el fondo.	background-color background-image background-repeat background-attachment background-position
background-color	Color de fondo.	color transparent
background-image	Imagen de fondo.	URL none
background-repeat	Repetición de la imagen de fondo.	repeat repeat-x repeat-y no -repeat
background-attachment	Desplazamiento de la imagen de fondo.	scroll fixed
background-position	Posición de la imagen de fondo.	% longitud left center right top bottom

La propiedad color

Esta propiedad establece el color con el que se muestra el texto contenido en un elemento. El color de la letra no puede ser transparente, ya que se debe indicar explícitamente un color.

color:valor

Un valor de color es una palabra clave o una especificación numérica RGB

Las 16 palabras clave se toman de la paleta Windows VGA: celeste, negro, azul, fucsia, gris, verde, verde claro, marrón, azul marino, olivo, morado, rojo, plata, turquesa, blanco, y amarillo.

Los colores RGB se dan en una de cuatro maneras:

#rrggbb (por ej., #00cc00)
#rgb (por ej., #0c0)
rgb(x,x,x) donde x es un entero entre 0 y 255 inclusive (por ej., rgb(0,204.0))
rgb(y%,y%,y%) donde y es un número entre 0.0 y 100.0 inclusive (por ej., rgb(0%,80%,0%))

La mas utilizada es la primera: RGB hexadecimal(#rrggbb)

Pueden ver los distintos colores RGB hexadecimal en esta: tabla de colores.

Las unidades de longitud en CSS

Longitud relativas:

PT (puntos): Valor en puntos.
PX (píxel): Significa pixeles y es un punto de la pantalla.
EM (M): Es una medida tipográfica que equivale al ancho de la letra eme.
% (porcentaje): Si un padre tiene como tamaño de fuente 20px y el hijo posee un tamaño de 50%, este tendrá un tamaño final de 10px.

Se recomienda usar pixeles (px).

Recuerda que no hay que dejar espacios entre el valor de longitud y la unidad de medida.

Ejemplos:

Esto esta mal:

propiedad: 12 px

Esto esta bien:

propiedad: 12px

Leer la siguiente entrada: Tabla de equivalencias css

Si queremos aprender a modificar el diseño del blog, no nos queda otra que leer mucho y hacer distintas pruebas.

En la Web hay muchos manuales sobre HTML y CSS.

O en este blog.

Modificar el diseño del blog: Algo para entenderlo un poco más

Posted by Mrs Daddy at 6:21 PM

Ya en otras entradas anterior vimos que son los: Elementos span y div y Diferencias entre Class e ID

Si no lo vistes, es importante que lo hagas para entender un poco mas los estilos CSS de una página o blog.

Podemos modificar el diseño de nuestro blog, no solo desde el Diseñador de plantillas, también lo podemos hacer manualmente desde Edición de HTML.

Hay muchos casos en los que utilizamos plantillas antiguas o descargadas de otras páginas dedicadas a compartir templates para Blogger.

En esos casos con el Diseñador de plantillas no vamos a poder modificar nuestro diseño.

Lo primero que tenemos que tener en cuenta que el blog tiene una estructura la cual se encuentra dentro de <html> y </html>

Dentro de HTML hay dos partes importantes:

Head o Cabecera: que es el código comprendido entre las etiquetas <head> y </head>.

Body o Cuerpo: que es el código comprendido entre las etiquetas <body> y </body>.

Lo que esta dentro de BODY es lo que el visitante ve en la ventana de su navegador.

Y lo que esta dentro de HEAD no será visible en ningún momento por el visitante, en la ventana de su navegador.

Como verán todo tiene un principio y un final.

Las etiquetas empiezan en < > y terminan en </ >.

Principio < > y final </ >.

O apertura < > y cierre </ >.

Se darán cuenta que la diferencia se encuentra en el final que siempre tiene que tener / para cerrar la etiqueta.

No puede haber un principio sin un fin.

Hay algunos códigos que debemos meter en el encabezado y otros que solo funcionarán en el cuerpo.

La estructura en si es así:

<HTML>
   <HEAD>
      </HEAD>
   <BODY>
      </BODY>
</HTML>

Dentro del cuerpo tenemos distintas etiquetas las cuales tienen que tener una estructura a la que le tenemos que dar un diseño.

El diseño se lo damos mediante estilos CSS, que pueden ir dentro de la etiqueta o llamarlas desde la cabecera.

Ejemplo dentro de una etiqueta con el atributo style:

<div style="Propiedad:Valor;Propiedad:Valor;">Contenido</div>

Ejemplo llamando desde la cabecera mediante atributo clase o id:

<div clase o id="nombre de la clase o id">Contenido</div>

Dentro de la cabecera los estilo CSS van dentro de:

<style type="text/css">
ACÁ EL CONTENIDO CSS
</style>

O con un link externo:

<link href="http://URL DEL ARCHIVO .css" rel="stylesheet" type="text/css">

Y en Blogger vamos a encontrar los estilos dentro de:

<b:skin><![CDATA[
ACÁ EL CONTENIDO CSS
]]></b:skin>

Por eso siempre se recomienda que pongan el estilo CSS arriba de ]]></b:skin>

Cabecera es = a head.

Una estructura es en si, un cuadrado o rectángulo y tiene que tener un estilo para que se vea.

Introducción a CSS.

CSS, siglas de "Cascade Style Sheet", son un conjunto de instrucciones que definen la apariencia de diversos elementos de un documento HTML.

Los atributos id y class:

Los id's se referencian con el prefijo "#" y las clases con "."

Un id debe ser único y una clase puede ser referenciada por muchos elementos, incluso un elemento puede tener 2 clases.

Primero indicamos la etiqueta a la que vamos a aplicar el estilo y después le indicamos el tipo de estilo que va a tomar.

Empieza con un punto (.) o un prefijo (#) dependiendo de que sea una clase o una id.

Seguido del nombre de la etiqueta.

Por último van las propiedades con su valor, todo encerrado entre los signos { y }.

.clase o #id {
Propiedad:Valor;
Propiedad:Valor;
}

Ejemplo:

.menu {
Propiedad:Valor;
Propiedad:Valor;
}

En este caso lo que estamos haciendo es aplicar el estilo sólo a las etiquetas que contengan la clase llamada "menu", no le dará estilo a ninguna otra etiqueta.

Si agregamos los estilos dentro de la etiqueta no es necesario que tengan una clase o id.

Tener en cuenta que no solo le podemos dar estilos a una clase o a una id.

Hay otras etiquetas ya establecidas que no son clases ni id`s. (ver algunos ejemplos)

Las propiedades más utilizadas en una estructura son:

Font, border, margin, padding, width, height, color y background.

Les recomiendo leer también:

Guía de referencia CSS

Regla del reloj:

Tabla de equivalencias css

Tabla de Colores

Diferencias entre border, margin y padding

No se aprende diseño en unos minutos, pero con algo hay que empezar.
Siempre es recomendable saber lo que hacemos y que es lo que hace el código que ponemos y si es posible como esta hecho.

Diferencias entre Class e ID

Posted by Mrs Daddy at 8:03 PM

Leer también Elementos span y div.

La principal diferencia entre utilizar un identificador o una clase para definir un estilo es que mediante un ID estamos identificando algún elemento de la página de forma única y por tanto sólo lo podemos utilizarlo con ese elemento. Esto se suele hacer porque luego posiblemente querremos realizar alguna acción sobre ese elemento.

Mientras que con una clase estamos definiendo un estilo genérico que luego podremos utilizar sobre cualquier elemento del HTML.

Class:

Los class se definen utilizando el signo "." seguido por el nombre del identificador y luego las propiedades del estilo.

Mediante la definición de 'clases' se establecen estilos que pueden aplicarse a cualquier selector HTML o elemento de la página.

El estilo definido en una clase no está vinculado a una etiqueta o elemento concreto sino a una 'clase', y esta clase se puede anudar a cualquier etiqueta HTML o grupo de ellas.

Por ejemplo:

.Piepagina {
font-size:small;
}

La clase "piepagina" (definida en la cabecera de la pagina o en archivo externo) puede usarse con cualquier elemento, y visualizara con tipo de letra pequeña el texto al que afecte:

<p class="Piepagina">
<h1 class="Piepagina">
<div class="Piepagina">
<span class="Piepagina">

La clase así definida puede usarse en cualquier elemento o selector: en el primer caso, afectaría al texto dentro del párrafo; en el segundo, a la cabecera h1; en el tercero, a todo el bloque div (cualquiera que fueran las etiquetas que incluya); y en el cuarto, al bloque span.

Solo una clase se puede especificar a la vez para cada etiqueta HTML.

P.miclase.miotraclase

Sería inválido.

Pero si pueden establecerse clases separadas.

Una misma etiqueta HTML puede tener diferentes "clases", permitiendo que un mismo elemento ofrezca diferentes estilos:

h1.roja {font:15px; color:red;}

h1.verde {font:15x; color:green;}

h1.azul {font:15x; color: blue;}

Y usar una clase u otra en la Página así:

<h1 class="roja">Este es un encabezamiento rojo</h1>
...
<h1 class="azul">Este es azul </h1>
...
<h1 class="verde">Y este .... verde</h1>

Cuando aplicamos una sintaxis del estilo elementohtml.clase esa regla de estilo solo se aplicará a ese elemento html que tenga asignada esta clase.

Selector ID:

Los ID se definen utilizando el signo "#" seguido por el nombre del identificador y luego las propiedades del estilo.

Mediante el atributo id podemos establecer una identidad única para un único elemento de la página.

La sintaxis html sería por ejemplo, donde especificamos la identidad "menu" para ese único párrafo.

Al elemento html pueden asignarsele estilos a través del selector id:

#menu {estilos ...}

o bien

p#menu {estilos ...}

Los selectores contextuales pueden buscar tipos de elementos, atributos CLASS, atributos ID o combinaciones de éstos:

DIV P { font: small sans-serif }
.rojizo H1 { color: red }
#x78y CODE { background: blue }
DIV.notaalmargen H1 { font-size: large }

El primer selector corresponde a todos los elementos 'P' que tengan a un 'DIV' entre sus ascendientes.
El segundo selector corresponde a todos los elementos 'H1' que tengan un ascendiente de clase 'rojizo'.
El tercer selector corresponde a todos los elementos 'CODE' que sean descendientes del elemento de 'ID=x78y'.
El cuarto selector corresponde a todos los elementos 'H1' que tengan un ascendiente 'DIV' de clase 'notaalmargen'.

Los selectores contextuales también se pueden agrupar con una coma:

H1 B, H2 B, H1 EM, H2 EM { color: red }

Que es equivalente a:

H1 B { color: red }
H2 B { color: red }
H1 EM { color: red }
H2 EM { color: red }

Vía:

Manual xhtml-css

Posted by Mrs Daddy at 10:29 AM

Muy buen manual para los primeros pasos.

El creador es Belén Albeza de la página Demasiada Cafeína.

Descargar

La propiedad white-space

Posted by Mrs Daddy at 7:32 AM

Una buena propiedad poco utilizada.

white-space: valor
Valores permitidos: normal | pre | nowrap | pre-wrap | pre-line
Definición: La propiedad white-space establece el tratamiento de los espacios en blanco.

normal: los espacios en blanco sobrantes y los saltos de línea se eliminan. No obstante, el texto se muestra en tantas líneas como sea necesario para que sus contenidos no se salgan del elemento contenedor.

Ejemplo:

[white-space: normal] Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vestibulum dictum. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos hymenaeos.