Frames y Css

<DOCTYPE HTML PUBLIC>
<HTML>
<HEAD>
....................
</HEAD>
<FRAMESET>
....................
</FRAMESET>
</HTML>
<DOCTYPE HTML PUBLIC>
<HTML>
<HEAD>
<TITLE>Marcos en HTML</TITLE>
</HEAD>
<FRAMESET COLS="25%,75%">
<FRAME SRC="imagen.gif">
<FRAME SRC="imagen.gif">
</FRAMESET>
</HTML>
Atributo Explicación
SRC= Nombre del documento que se quiere colocar dentro del
marco.
NAME= Asigna un nombre a un marco de forma que pueda ser el
destino de enlaces situados en otros marcos.
MARGINWIDTH= Especifica el margen lateral (en pixels).
MARGINHEIGHT Especifica el margen superior e inferior (en pixels).
SCROLLING=(yes, no, auto) Si un documento es más largo que el marco aparecen
unas barras de desplazamiento. Este atributo permite
activar, desactivar o automatizar su aparición.
NORESIZE Evita que el tamaño de los marcos sea alterado.
Marco1.html Marco2.html
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Pagina A</TITLE> <TITLE>Pagina B</TITLE>
</HEAD> </HEAD>
<BODY> <BODY>
<H3> Frame A </H3> <H3> Frame B</H3>
<P> Columna del 50% </P> <P> Columna del 50% </P>
</BODY> </BODY>
</HTML> </HTML>
Marcos.html
<HTML>
<HEAD><TITLE>Marcos </TITLE></HEAD>
<FRAMESET COLS=50%,50%>
<FRAME SRC=“Marco1.html" >
<FRAME SRC=“Marco2.html" >
</FRAMESET>
<NOFRAMES>
<BODY>
Lo siento,su navegador no soporta frames.
Pulse <a href=“Marco1.html>aquí </A>
para acceder a los contenidos de estas páginas.
</BODY>
</NOFRAMES>
</HTML>
Valor Significado
_self Hace que el navegador actualice el marco en el que se
encuentre la pagina.
_parent Hace que el navegador actualice el marco padre del marco
actual.
_top Hace que el navegador actualice toda el área de trabajo del
navegador.
_blank Hace que el navegador abra una ventana nueva en la que
se despliega la pagina.
Marco Este atributo especifica el nombre de un marco en el que
destino debe abrirse un documento (name)
 Propuesta de W3C para separar formato de
contenido
 Aumentan la flexibilidad de los documentos
 CSS tiene su propia sintaxis para la definición de
estilos
◦ Ámbito de la definición del estilo:
 Elemento
 Parte de un documento
 Documento
 Portal
 Ventajas
◦ Ahorro en la transferencia (Se envían una sola vez)
◦ Facilidad de mantenimiento de la imagen de un portal
 Selector {especificación del estilo}
 El selector puede ser un elemento HTML o uno

definido por nosotros (clases)
H1 { font-family: Arial, sans-serif;

font-size: 28pt}
 Importar la hoja de estilos desde un archivo
externo.
 Incluir la definición de estilos en la cabecera del
documento.
 Definir el estilo en el elemento en que se desee
aplicar.
 Ventajas e inconvenientes:
◦ Archivos externos:
 Reutilización del estilo en varios documentos
◦ Cabecera:
 Permite personalizar estilos predefinidos
 Repetición de definiciones para otros documentos
◦ Elemento:
 Asignación de estilo a nivel de carácter
 Repetición de definiciones para otros documentos
 Vinculación del formato al documento HTML
 Creación del archivo .css
 Archivo de texto con las definiciones de los estilos:
<HEAD>
...
<LINK rel=”stylesheet” type=”text/css”
href=”estilo.css”>
...
</HEAD>
 Atributo REL: El enlace es una hoja de estilos
 Atributo TYPE: El archivo es de texto y en sintaxis
CSS
 Atributo HREF: Archivo .css
 Estilos incluidos en el elemeto <STYLE> dentro de <HEAD>
<head>
…
<STYLE type="text/css">

</STYLE>
</head>
 Uso del estilo en línea
 Creación
 El estilo sólo es válido en el elemento en el que está
definido.
 Estilos definidos como valores del atributo STYLE:
<H1 STYLE = “font-family: Arial, sans-serif; font-size: 45pt”>
Texto del encabezado H1
</H1>
...
<DIV STYLE = "background: yellow; font-weight: bold">
<p>Formato de párrafo definido con el estilo</p>
</DIV>
 Estilos para palabras o caracteres:
<body>
<h1>Encabezado con estilo definido para H1</h1>
Formato predeterminado para <SPAN STYLE = "background=
yellow; font-weight= bold">body</SPAN>
</body>
 Las clases permiten la definición de estilos
para ser aplicados a elementos diferentes.
 Sintaxis de definición:
.nombreClase {Definición del estilo}
 Sintaxis de uso:
<etiqueta CLASS = “nombreClase”> …
</etiqueta>
 Es posible asociar un estilo para un identificador.
 Similar a las clases, pero menos utilizado.
<head>
<link rel="stylesheet" style="text/css" href="estilo1.css">
<STYLE type = "text/css">

</STYLE>
</head>
<body>
<p ID = "PalabrasClave">Palabras clave: Bases de datos,
Programación web, Generación dinámica de contenidos,
PHP</p>
</body>
</html>
 Basta con poner el prefijo del contexto:
TD B {color: blue; font-size: x-large}

UL B {color: red}
 Permite aplicar las mismas reglas a varios selectores:
H1, H2, H3 {font-family: Arial, sans-serif; color: blue}

H1 {font-size: 200%}
Nombre del atributo Posibles valores Ejemplos
color: #009900;
valor RGB o nombre de
color
color
color: red;
xx-small | x-small | small
| medium | large | x-large | font-size:12pt;
font-size xx-large
font-size: x-large;
Unidades de CSS
serif | sans-serif |
font-family:arial,helvetica;
cursive | fantasy |
font-family monospace
font-size: fantasy;
Todas las fuentes habituales
normal | bold | bolder |
font-weight:bold;
lighter | 100 | 200 | 300 |
font-weight
400 | 500 | 600 | 700 | 800 |
font-weight: 200;
900
font-style:normal;
font-style normal | italic | oblique
font-style: italic;
line-height: 12px;
line-height normal y unidades CSS
line-height: normal;
none | [ underline || text-decoration: none;
text-decoration
overline || line-through text-decoration:
] underline;
text-align: right;
left | right | center |
text-align
justify
text-align: center;
text-indent: 10px;
text-indent Unidades CSS
text-indent: 2in;
text-transform: none;
capitalize | uppercase |
text-transform
lowercase | none text-transform:
capitalize;
background-color: green;
Un color, con su nombre o
Background-color
su valor RGB
background-color: #000055;
background-image:
url(mármol.gif) ;
El nombre de la imagen con
Background-image
su camino relativo o absoluto
background-image:
url(http://www.x.com/fondo.gif)
margin-left: 1cm;
Margin-left Unidades CSS
margin-left: 0,5in;
margin-right: 5%;
Margin-right Unidades CSS
margin-right: 1in;
margin-top: 0px;
Margin-top Unidades CSS
margin-top: 10px;
margin-bottom: 0pt;
Margin-bottom Unidades CSS
margin-top: 1px;
padding-left: 0.5in;
Padding-left Unidades CSS
padding-left: 1px;
padding-right: 0.5cm;
Padding-right Unidades CSS
padding-right: 1pt;
padding-top: 10pt;
Padding-top Unidades CSS
padding-top: 5px;
padding-right: 0.5cm;
Padding-bottom Unidades CSS
padding-right: 1pt;
color RGB y nombre de border-color: red;
Border-color
color border-color: #ffccff;
none | dotted | solid | border-style: solid;
Border-style double | groove | ridge
| inset | outset border-style: double;
border-width: 10px;
border-width Unidades CSS
border-width: 0.5in;
 El elemento <A> tiene 4 pseudoclases asociadas:
link, visited, active, hover
 Usadas con hipervínculos:

◦ A:link. Selector para enlace no visitado
◦ A:visited. Selector para enlace visitado
◦ A:active. Selector para enlace que está siendo pulsado
◦ A:hover. Selector para enlace por el que está pasando el ratón
 Suelen incorporar la propiedad text-decoration:none

a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #234465;
}
a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #00405B;
}
a:hover {
…
}
a:active {
…
}

Frames y Css

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Frames y Css

Caricato da

Copyright:

Formati disponibili

<DOCTYPE HTML PUBLIC>

 El selector puede ser un elemento HTML o uno

H1 { font-family: Arial, sans-serif;

TD B {color: blue; font-size: x-large}

 Permite aplicar las mismas reglas a varios selectores:

H1, H2, H3 {font-family: Arial, sans-serif; color: blue}

 Usadas con hipervínculos:

 Suelen incorporar la propiedad text-decoration:none

Potrebbero piacerti anche