Publicidad
Trabajando con css
19 de Mar de 2015•0 recomendaciones•765 vistas
0 recomendaciones
Sé el primero en que te guste
ver más
vistas
Total de vistas
0
En Slideshare
0
De embebidos
0
Número de embebidos
0
Descargar para leer sin conexión
Denunciar
Educación
Joaquin Lara SierraSeguir
IT Consultant in Education and Project Management elearningPublicidad
Trabajando con css
- TRABAJANDO CON Por Joaquin Lara Sierra @joaquinls
- Algunos atributos que conocer A la hora de trabajar en html en importante reconocer algunos atributos de algunas etiquetas, por ejemplo: ● Iniciamos con href <a> <a href="http://www.loquesea.com">texto del link</a> <img src="mifoto.jpg" width="100" height="120"> ● Al primer ejemplo le podemos añadir target=”blank” esto con el propósito que abra en otra pestaña. ●
- Style ● Este es otro de los atributos mas usados aunque no se recomienda directamente en html sino definido dentro de la hoja de estilo. Veamos su uso: <body style="background-color:lightgrey"> <h1>Aquí su encabezado tipo 1</h1> <p>Aquí un parrafo sencillo.</p> </body> ● Esto quiere decir que todo lo que esta dentro del cuerpo del documento tendrá un color de fondo gris.
- style="property:value”
- Formateo de elementos en HTML
- Trabajando con CSS ● Cuando se trabaja CSS en HTML este se define dentro del <head>. Miremos como: <!DOCTYPE html> <html> <head> <style> body {background-color:lightgray} h1 {color:blue} p {color:green} </style> </head> <body> <h1>Un titulo</h1> <p>Un párrafo</p> </body> </html> Recuerde la sintaxis: elemento { propiedad :valor; propiedad: valor }
- Otros ejemplo <!DOCTYPE html> <html> <head> <style> H1 { color:blue; font-family:verdana; Font-size:300%; } P { color:red; font-family:courier; Font-size:160%; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
- Atributo Id ● Para definir un estilo especial, para un elemento en especial, primero adicionamos el atributo id al elemento, veamos como: <p id="p01">Esto es diferente</p> <!DOCTYPE html> <html> <head> <style> p#p01 { color: blue;} p#p02 {color:red } </style> </head> <body> <p>Parrafo 1.</p> <p>Parrafo 2.</p> <p id="p02">Parrafo 3.</p> <p id="p01">Parrafo 4.</p> </body> </html>
- Atributo Class ● Para definir un estilo para un tipo especial de elemento, adicione el atributo class para el elemento, veamos como: p.error { color:red; } <!DOCTYPE html> <html> <head> <style> p.intro { background-color:black; color:white; border:1px solid grey; padding:10px; margin:30px; font-size:150%;} </style> </head> <body> <h1>encabezado</h1> <p>Parrafo 1</p> <p>Parrafo 2.</p> <p class="intro">Parrafo 3</p> </body> </html>
Publicidad