Trucos CSS, Atico+piso para verano en Portonovo

Trucos CSS gratuitos

Manual de hojas de estilo CSS

Ejemplo con dos selectores
<html> <head> <title> Ejemplo </title>
<STYLE>
.fuentes
{font: bold 18px red}
.fondobeige
{background-color:beige;width:300}
</STYLE>
</head> <body>
<center>
<P class="fondobeige fuentes">
Este texto tiene dos selectores</br>
Los selectores son:
fondobeige y fuentes
</P>
</body> </html>

En Hojas de estilo se suelen emplear
principalmente <DIV> y <SPAN>
<DIV>
fuerza un salto de linea
y se puede definir en todo
o parte de un elemento.
<SPAN>
Se ejecuta en el elemento
y no tiene salto de linea
Ambas etiquetas se pueden
comportan de forma distinta
en la misma seleccion

En lugar de <DIV> y <SPAN>
se pueden otra etiquetas, pero hay
veces en que en que solo se pueden
emplear <DIV> y <SPAN>
Ejemplo:
<DIV style="border: ridge 12px red;
background-color: yellow;
color: purple;
margin: 5px;
padding: 2px;
overflow: auto;
overflow-y: hidden;
width: 200;">
<B> AQUI VA EL TEXTO</B></DIV>
Resultado:
AQUI VA EL TEXTO

Atributos de interlineado.
Altura entre líneas de texto:
LINE-HEIGHT: <tamaño>
LINE-HEIGHT: 2em;
Ejemplo:
<div style="line-height: 1.5em">
LINEA PRIMERA<BR>
LINEA SEGUNDA<BR>
</div>
Espaciado entre letras:
LETTER-SPACING: 5px;
LETTER-SPACING: -0.1em;
LETTER-SPACING: normal;
Ejemplo:
<span style="letter-spacing: 1.5em">
UNA DOS TRES
</span>
Espaciado entre palabras. word-spacing: 5px;
word-spacing: -0.2em;
word-spacing: normal;
Ejemplo:
<div style="word-spacing: 1.5em">

UNA DOS TRES
</div>

Formas de activaciones:
<STYLE>
P {font: bold 16px Arial}
.ayuda {font: bold 16px Arial}
p.noayuda
{font: bold 16px Arial}
</STYLE>
<p> Texto </p>
<div class="ayuda"> Texto </div>
<p class="noayuda"> Texto </p>
<STYLE>
h1 {font: bold 16px Arial}
#ayuda {font: bold 16px Arial}
h1.noayuda {font: bold 16px Arial}
<*STYLE>
<h1> Texto </h1>
<p class="ayuda"> Texto </p>
<h1 id="noayuda"> Texto </h1>

Se pueden activar
desde cualquier etiqueta
<p id="ayuda">
<p class="ayuda">
<div id="ayuda">
<span class="ayuda">
<td id="ayuda">
<td class="ayuda">
<table id="ayuda">
<table class="ayuda">

Se puede evitar algunas líneas
de código usando la propiedad
FONT de la siguiente manera:
<HTML><HEAD>
<TITLE>Ejemplo</TITLE>
<STYLE">
H1 { font: 30px Arial black,Tahoma }
P { font: italic 18px Arial, Sans-Serif }
</STYLE></HEAD>
<BODY bgcolor="#FFFFFF">
<H1>Encabezado</H1>
<P>Algún párrafo</P>
</BODY> </HTML> Ejemplo
Resultado;

Encabezado

Algún párrafo

Subrayado de texto

div {text-decoration: none;}
div {text-decoration: overline;}
div {text-decoration: underline;}
div {text-decoration: line-through}
i {text-decoration: none;}
b {text-decoration: overline}
i {text-decoration: underline}
h3 {text-decoration: line-through}

text-decoration: underline

text-decoration: overline

text-decoration: line-through

text-decoration: underline overline
Codigo:
<div style="color: maroon;
font: bold 18px Arial;
text-decoration: underline overline">
text-decoration: underline overline</div>
<STYLE>
div {color: maroon;
font: bold 18px Arial;
text-decoration: underline;}
</STYLE>
o
<div style="color: maroon;
font: bold 18px Arial;
text-decoration: underline">
text-decoration: underline
</div>

Enlaces con CSS
Ejemplos de estilo en enlaces Enlace normal
Pasa el raton por encima de
un enlace para ver el resultado
Enlace visitado
<html><head>
<title> Codigo de enlace visitado</title>
<STYLE">
A:active {color: purple;}
A:link
{color:#0000cc;
font-size: 22px;
text-decoration: underline overline}
A:visited {color:#ff0000;
font-size: 18px;
text-decoration:none;}
A:hover {
cursor: wait;
color:#005500;
font-size: x-large
font-weight: bold;
border: solid brown;
text-decoration: underline overline; }
</STYLE>
</HEAD> <BODY>
<a href="http://www.paraverano.es">
Enlace normal</a>
<br>
Pasa el raton por encima de
<br>
un enlace para ver el resultado <br>
<A href="enlaces.html">
Enlace visitado
</a><br>
</BODY></HTML>

Significado:
A:active: /*Enlace activo*/
A:visited: /*Enlace visitado*/
A:link /*Significa un enlace normal*/
A:hover: /*Marca texto al pasar el raton*/
color:#0000cc;/*Color azul del enlace*/
color: purple; /*Color del enlace activo*/
font-size: 22px /*Tamaño de letra del enlace*/
cursor:wait; /*Pone el cursor en reloj de arena*/
font-size: x-large;/*Letra con tamaño X grande*/
font-weight: bold; /* texto del enlace en negrita*/
border:solid 6px brown; Borde solido 6px marron
text-decoration: underline overline;
/*Subrayado por arriba y por abajo*/
text-decoration: overline underline;
/*Subrayado por arriba y por abajo*/
text-decoration: none;
Quita el subrayado de arriba y de abajo*/

Transformaciones en mayúsculas y minúsculas.
TEXT-TRANSFORM: UPPERCASE;
Todo texto en mayúsculas.
TEXT-TRANSFORM: LOWERCASE;
Todo el texto en minúsculas.
TEXT-TRANSFORM: NONE:
Sin transformación (predeterminado)
TEXT-TRANSFORM: CAPITALIZE;
La primera letra de cada
palabra se pone en mayúsculas.
Ejemplo con CAPITALIZE ;
y activacion del cursor del raton
<SPAN style=" font-size: 100%;
text-transform: capitalize;
color: purple;
cursor: move;">
</SPAN>
El resultado es:
Pasa el raton sobre estas letras
para ver el cambio del puntero

En html se emplea
align="left"
align="right"
align="center"
En CSS se utiliza
text-align: left;
text-align: right;
text-align: center;
text-align: justify.
<div text-align: justify>
El parametro JUSTIFY iguala
el largo de las líneas de un texto,
espaciando convenientemente las
palabras para que ajusten.
Ejemplos:

<div align: left>
<div align: right>
<div align: center>
<div align: middle>
<div align: absmiddle>
<div text-align: left>
<div text-align: right>
<div text-align: center>
<div text-align: middle>
<div text-align: absmiddle>

La posicion en las cajas (tablas)
POSITION: ABSOLUTE;
La posición del elemento no
depende de ninguna otra etiqueta.
POSITION: FIXED;
Al igual que el anterior la posición
es absoluta, pero el elemento se
queda fijo al desplazar el documento.
POSITION: RELATIVE;
Normalmente lo predeterminado.
POSITION: STATIC;
Al igual que el anterior la posición
es relativa, pero el elemento
no se puede redimensionar
Es conveniente emplear
siempre la posición a ABSOLUTE.
Los atributos que les acompañan son:
TOP: <porcentaje>
LEFT: <porcentaje>
RIGHT: <porcentaje>
BOTTOM: <porcentaje>

<HTML><HEAD>
<TITLE>EJEMPLO</TITLE>
<STYLE">
#caja
{ position: absolute;
border:dashed 3px green; }
</STYLE></HEAD>
<body bgcolor="#ffffff">
<div id="caja">
AQUI VA EL TEXTO DE LA CAJA
</div> </body></html>

Z-INDEX
A veces hay varias capas
unas por encima de otras y
hay que especificar cuáles
están por encima de otras.
Para definirlas se usa z-index: numero;
Donde numero; es un número cualquiera,
y la capa con mayor z-index numero;
aparecerá por encima de la
capa con menor z-index numero;
Ejemplos:
z-index: 1; z-index: 2; z-index: 2;

Clases de de punteros (cursores)

Debes pasar el puntero por encima

Cursor - MOVE
<div style="cursor:move">
Cursor - MOVE</div>

Cursor - WAIT
<div style="cursor:wait">
Cursor - WAIT</div>

Cursor - HAND
<div style="cursor:hand">
Cursor - HAND</div>

Cursor - HELP
<div style="cursor:help">
Cursor - HELP</div>

Cursor - TEXT
<div style="cursor:text">
Cursor - TEXT</div>

Cursor - CROSSHAIR
<div style="cursor:crosshair">
Cursor - CROSSHAIR</div>

Al curso de CSS

Curso de ingles

Verbos latinos

Verbos ingleses

Gramatica inglesa

A tutores gratuitos

Aticos para verano

Curso de Windows

Programas y juegos