html

1.



Distribuir parrafos



Parrafo con 60% de ancho y borde punteado con estilo en linea
abcd abcde abcdef abcdefg
abcd abcde abcdef abcdefg
abcd abcde abcdef abcdefg
abcd abcde abcdef abcdefg
abcd abcde abcdef abcdefg
abcd abcde abcdef abcdefg
abcd abcde abcdef abcdefg
abcd abcde abcdef abcdefg
abcd abcde abcdef abcdefg
abcd abcde abcdef abcdefg
abcd abcde abcdefabcdefg
.
Parrafo con 300 px de ancho, centrado mediante margen auto, relleno 5%, fondo y border doble con estilo en linea
abcd abcde abcdef abcdefg
abcd abcde abcdef abcdefg
abcd abcde abcdef abcdefg
abcd abcde abcdef abcdefg
abcd abcde abcdef abcdefg
abcd abcde abcdef abcdefg
abcd abcde abcdef abcdefg
abcd abcde abcdef abcdefg
abcd abcde abcdef abcdefg
abcd abcde abcdefabcdefg
abcd abcde abcdef abcdefg
.
 




2.



Textos en dreamweaver

h3 {
border: medium solid #360;
color: #FF0;
background-color: #0C0;
}
.clase {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #C30;
border-top-width: thin;
border-right-width: thin;
border-bottom-width:thin;
border-left-width: thin;
border-top-style: none;
border-right-style: none;
border-bottom-style: dotted;
border-left-style: none;
border-top-color: #9C0;
border-right-color: #9C0;
border-bottom-color: #9C0;
border-left-color: #9C0;
}
#idparaestilo {
background-color: #C9F;
letter-spacing: 5px;
color: #FFF;
word-spacing: 10px;
}
#consejo {
font-family: Tahoma,Geneva, sans-serif;
background-color: #FF6;
font-weight: bold;
color: #00F;
text-align: justify;
}



Estilos: Trabajando con textos.


Párrafo sin estilos (no hacemos uso de ninguna CSS): ese párrafo esta en negrita y cursiva. También ha sido indentado para que no llegue a los bordes. Todo esta realizado desde el panel de propiedades en las opciones HTML.


Se aconseja eluso de estilos para el diseño de la página, aunque el HTML permite añadir atributos y otras posibilidades para el diseño la tendencia es que acabe utilizandose exclusivamente para los contenidos.
Estilo en linea (afecta unicamEnte a este elemento, va incorporado en la etiqueta HTML)
Estilo para las etiquetas <h3> (afecta a todas las etiquetas <h3>)
Estilo para la clase .clase (seaplica a cualquier etiqueta cuya clase sea establecida a este tipo). Siempre empieza por un punto.
Esto es un texto en una etiqueta h4 pero le aplicamos la misma clase que al parrafo anterior->.clase
Estilo a un id (se aplica al elemento que este identificado con ese id). En una página cada id debe ser exclusivo de una sola etiqueta (lo que hemos hecho en esta página con un id repetido seríaincorrecto)


Texto en h3
Texto con .clase
Misma id


 




3.



Ejercicios de estilos con hipervinculos

a {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
a:link {
color: #900;
background-color: #9FC;
}
a:visited {
color: #900;
}
a:hover {
background-color: #FF0;
}
a:active {
border: thick solid #990;
font-family:Arial, Helvetica, sans-serif;
font-size: 18px;
margin: 5px;
padding: 5px;
}
body ol li {
list-style-position: inside;
list-style-type: upper-roman;
}
body ul li {
list-style-image: url(../imagenes/left_nav_arrow.gif);
}
body,td,th {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
}
body {
background-image: url(../imagenes/esquina.png);
background-repeat:no-repeat;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}



 
 


Ejercicios sobre estilos (h1)


 



I.E.S. Suárez de Figueroa
Google
Junta de Extremadura

Estilos utilizados para los hipervinculos:

Todos los vinculos estan en Arial 14. (asociamos un estilo a la etiqueta A)...