Come formatear una página web con CSS

CSS en general - Cuerpo página - Texto - Bordes - Enlaces - Sintaxis

Limitarnonos a los conceptos fundamentales, dejando de lado la abundancia de normas de detalle y complejas que rigen su comportamiento. El uso de un tipo de software Adobe Dreamweaver nos puede ayudar por muchas de estas reglas.

Resumen de las funciones de CSS
Las hojas de estilo página HTML incluyen información tanto para la propia página y de los elementos que están contenidos en el mismo. Una hoja de estilo se puede escribir directamente entre la etiqueta <head> ..... </ head> o vinculados a la página. con el siguiente código,de la conexión, por insertar siempre entre <head> ..... </ head>

<link href="css/stilenuovo.css" rel="stylesheet" type="text/css" />

Traducido eso significa que el enlace se refiere a una hoja de estilo rel = "sylesheet 'con un tipo de archivo de texto que contiene CSS =" text / css " nombrado stilenuovo.css que reside en el subdirectório css bajo la carpeta raíz del sitio web.

Cómo escribir comandos en una CSS

nombre_elemento { comando_1 ; comando_2; .......... comando_n }

El nombre del elemento es una etiqueta HTML que desea formatear,
el nombre de una clase que se denomina a continuación en una etiqueta,
el nombre de un DIV

Se verán en detalle algunos de los posibles contenidos en el párrafo 'Sintaxis'

Propiedades que puede utilizar para la disposición del BODY (cuerpo de la página)

width : auto (anchura automática)
height :auto (Altura automática)
min-width: 0 (anchura mínima)
max-width: 0 (anchura mássima)
min-height: 0 (Altura mínima)
max-heigth: 0 (Altezza massima
margin: 0 (Márgenes. Pueden también ser puestos uno por uno, quando se quieran cada lado diferentes left - top - right - bottom )
El color gris claro es la pantalla, y la pagina se centra de modo automatico

top: 0 px

left:0px

right:0px

bottom:0 px

Después de sujetar el borde (en este caso con fondo de color gris claro, ponemos un 'padding' (acolchado) el color más oscuro

padding: n (Puede ser puesto de forma individual, de izquierda - arriba - derecha - abajo cuando se quiere diferentes)

	padding top

padding left		padding right

	padding bottom

El color gris claro es la pantalla, el gris mas escuro es el acolchado y la pagina se centra de modo automatico: Ahora fijamos la posición de la página el la pantalla que tendrá el espacio desde el que se han quitado los márgenes y los acholchados (con el fondo más oscuro)

position: static (posición del cuerpo por definición es estática )

	padding top

padding left	Appoggia a sinistra	padding right

	padding bottom

	Izq	Drc	ninguna ambos
Float (apoyo)	# left	right #	none

Clear (limpieza)	left	right	none	both
overflow-x	visible	mayor tamaño x es visible
overflow-y	visible	mayor tamaño y es visible
Visibility	visible	Visibilidad = visible
z-index	auto	Orden de los elementos
opacity	1	opacidad 0 = transparente 1 = opaco

Propiedades de las líneas del texto

color: COLOR tomado de la paleta de colores
font-family: fuente. Es 'Arial, Cambria, Times New Roman' y muchos demás
font-style: ES: estilo normal,italic,oblique
font-variant: ES: normal, small-caps
font-weight: Es. 'bold (negrita), normal y muchos demás
font-size: tamaño del caracte
line:height: altura (distancia) de las lineas
text-align: alineamiento ES normal, justify, left, right
text-decoration: decoración del texto ES: none (ninguna), underline (subrayada)
text-indent: margen adicionál
text-shadow (sombreado)
h-shadow: sombra horizontal
v-shadow: sombra vertical
blur: desenfoque

También hay comandos para ajustar las sombras del texto, separar las letras, y otros comandos que son muchos y complejos, por lo que se recomienda el uso de un editor que tiene una función de diseñador CSS que permite fijar la característica individual y ver prácticamente el efecto de cada comando. Por lo tanto, es preferible utilizar editores como Microsoft FrontPage o Adobe Dreamweaver u otros que tengan esas funciones.

Propiedades relacionadas a los bordes de una celda o de un DIV o de una tabla

border-color: COLOR tomado de la paleta de colores
border-top-color: color del borde superior
border-right-color: color del borde a derecha
border-bottom-color: color del borde inferior
border-left-color: color del borde aizquierda

border-width: ANCHO (espesor) del borde (lado)
border-top-width: ANCHO del borde superior
border-right-width: ANCHO del borde a derecha
border-bottom-width: ANCHO del borde inferior
border-left-width: ANCHO del borde a la izquierda

border-radius: RAYO de los rincones
border-top-left-radius: RAYO del rincón superior a la izquierda
border-top-right-radius:RAYO del rincón superior a la derecha
border-bottom-right-radius:RAYO del rincón abajo a derecha
border-bottom-left-radius: RAYO del rincón abajo a izquierda

border-style: ESTILO del borde
border-top-style: ESTILO del borde superior
border-right-style: ESTILO del borde a la derecha
border-bottom-style: ESTILO del borde inferior
border-left-style: ESTILO del borde a la izquiedaa

El estilo que se asignará a al borde puede ser:

dotted :     con puntos
dashed:    con guiones
solid: continuo
double:     doble
groove: acanalado

ridge:       crestado
inset :      puesto al lado interior
outset :   puesto al lado externo

Propiedades referentes a las conexiones de hipertexto

Ejemplo propiedades del vínculo se escribe a: link y contiene el color del texto y la decoración (subrayado, etc.)
a:link { color: #000066; text-decoration: none; }

Ejemplo propiedades del vínculo todavía visitado se escribe a:visited
a:visited { text-decoration: none; color: #006600; }

Ejemplo propiedades del vínculo mientras el mouse está pasando se escribe a:hover
a:hover { text-decoration: none; color: #006600; }

Ejemplo propiedades del vínculo mientras está activo se escribe a:active
a:active { text-decoration: none; color: #000000; }

se pueden asignar también otras características del vínculos , como el tipo y el tamaño del carácter, la sombra del texto y más

Sintaxis: cómo escribir un archivo CSS

No se debería escribir el estilo de una página directamente entre <head>...</head> a menos que no se debe cambiar una característica en lugar de una dada en la CSS enlazada a la página. o si el modélo de la página aparece pocas veces el sitio.
Por lo general es mejor escribir un CSS en un archivo separado y vincularlo con el siguiente código, la inserción de la conexión entre las etiquetas <head>...</head>

< link href="css/stilenuovo.css" rel="stylesheet" type="text/css" />

acemos un nuevo archivo con nuestro editor. La primera línea de escritura será

@charset "utf-8";
/* este CSS refiere a la pagina nnnn */

y en la segunda línea se poner la información en la hoja de estilos entre los símbolos / * ....... * / por lo que este texto no debe ser procesado por el intérprete del browser.

En una hoja de estilo podemo poner elementos para modificar el contenido de singulos elementos de pàgina, con usar

a) Una CLASE - Por ejemplo, hacemos una clase que nosotros llamamos 'justifica' En le código de CSS vamos a escribir este nombre precedido por un punto - precisamente para mostrar que se trata de una clase y abrimos un paréntesis {. Después de este símbolo ponemos la secuencia de instrucciones, y finalmente cerramos con el siímbolo }:

La clase se puede llamar en una etiqueta, en un DIV, una celda, o en otro elemento, como veremos a continuación:

.justifica { font-family: Arial; font-size: medium; text-align: justify; }

lo mismo también se puede escribir en más visible en varias líneas. La sintaxis de cada instrucción es comando: contenido ;

.giustifica {
font-family: Arial;
font-size: medium;
text-align: justify;
}

.nombre de clase {
tipo de carácter : Arial;
tamaño: medium;
allineamiento del texto: justify ;
}

b) Un elemento identificado con un nombre. Mientras que la clase se puede atribuir a cualquier elemento, en este caso el formato afecta sólo el elemento que tiene ese nombre. Por ejemplo, considere un elemento que llamamos "corpo" precedido por un signo de libra, y abrimos un paréntesis {. Después de esta llave ponemos la secuencia de instrucciones y al fin de todo ponemos paréntesiscerrar }:

#corpo {
margin: 0px auto;
border: 0px solid rgb(0, 0, 0);
width: 980px;
height:640px;
text-align: left;
padding: 0px;
position: relative;
}

#nombree de elemento {
margen : 0px auto;
borde: linea continua negra;
anchura: : 980 pixels;
altura: : 980 pixels;
alineamiento del texto: left ;
acolchado: 0 pixels ;
posición: relativa en comparación con su contenedor externo;
}

Estas son las características más comunes. Sin embargo, los elementos de pàgina pueden ser editados con mucho: puede introducir bordes redondeados, imágenes o colores de fondo demasiado matizadas, y mucho más. Para ello se sugiere emplear un editor especializado que el ayude proveendo la lista de todos los comandos posibles que se pueden elegir de acuerdo a sus necesidades, mientras que el ´codigo se esta escribiendo.
Mi opinión mejor es por Dreamweaver de Adobe que para mí es el mejor y el más fácil de usar.

NOTA 1: los estilos CSS se pueden modificar en cada línea. POR EJEMPLO tomamos un TAG <p> .......</p

Para modificar algo entre <p> y </p> se puede escribir <p style=" comando: valor; comando 1: valor ; ........ comando n : valor n; " recordando que por cada comando se ponen los dos puntos y el punto y coma al final. Se puede también usar una clase que ya tenemos en el CSS conexo a la página

<p class="nombre de clase"> .......</p

El comando se aplica a todo lo que se encuentra ente el TAG. Uds pueden y tratar de editar las etiquetas (TAGS) a su gusto, porque la mayoría de los contenidos se pueden cambiar uno por uno de esta manera, como hemos dicho de la anterior, por ejemplo:

<span class="..."> ..... </span>
<td class="..."> ...<td>
<table class="..."> .... <table>
<body class="...">.....</body>
<div class="..."> .... </div>
<ul class="..."> ..... </ul>

y muchos otros más

NOTA 2: Se puede hacer un archivo CSS que contiene todos los elementos de todas las páginas del sitio , y conectarle a todas, incluso si las páginas no son iguales y no contienen todos los elementos del archivo CSS.