Download - Trabajando con css
![Page 1: Trabajando con css](https://reader035.vdocumento.com/reader035/viewer/2022071817/55ad0e441a28ab48678b46bd/html5/thumbnails/1.jpg)
TRABAJANDO CON
Por Joaquin Lara Sierra @joaquinls
![Page 2: Trabajando con css](https://reader035.vdocumento.com/reader035/viewer/2022071817/55ad0e441a28ab48678b46bd/html5/thumbnails/2.jpg)
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.
●
![Page 3: Trabajando con css](https://reader035.vdocumento.com/reader035/viewer/2022071817/55ad0e441a28ab48678b46bd/html5/thumbnails/3.jpg)
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.
![Page 4: Trabajando con css](https://reader035.vdocumento.com/reader035/viewer/2022071817/55ad0e441a28ab48678b46bd/html5/thumbnails/4.jpg)
style="property:value”
![Page 5: Trabajando con css](https://reader035.vdocumento.com/reader035/viewer/2022071817/55ad0e441a28ab48678b46bd/html5/thumbnails/5.jpg)
Formateo de elementos en HTML
![Page 6: Trabajando con css](https://reader035.vdocumento.com/reader035/viewer/2022071817/55ad0e441a28ab48678b46bd/html5/thumbnails/6.jpg)
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 }
![Page 7: Trabajando con css](https://reader035.vdocumento.com/reader035/viewer/2022071817/55ad0e441a28ab48678b46bd/html5/thumbnails/7.jpg)
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>
![Page 8: Trabajando con css](https://reader035.vdocumento.com/reader035/viewer/2022071817/55ad0e441a28ab48678b46bd/html5/thumbnails/8.jpg)
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>
![Page 9: Trabajando con css](https://reader035.vdocumento.com/reader035/viewer/2022071817/55ad0e441a28ab48678b46bd/html5/thumbnails/9.jpg)
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>