Diseño web con css

Diseño web con CSS Instituto Superior de Electrónica Gamma

¿Qué es CSS? ,[object Object],[object Object],[object Object]

Ventajas de CSS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

El proceso de desarrollo con CSS ,[object Object],[object Object],[object Object],[object Object]

¿ Cómo funciona CSS? Parte II

Sintaxis básica de CSS ,[object Object],A qué etiqueta o etiquetas HTML se aplicará la propiedad (ej., “body”) El atributo CSS al que se le desea asignar un valor (ej. , “background-color”) El valor de la propiedad (ej. “#FF0000 que es el valor para “rojo”)

¿ Dónde se escribe el código CSS? ,[object Object],[object Object],[object Object],[object Object]

1. Escribir CSS en línea: el atributo style ,[object Object],<html> <head> <title>Ejemplo</title> </head> <body style="background-color: #FF0000;"> <p>Esta es una página con fondo rojo</p> </body> </html>

2. Interno: la etiqueta style ,[object Object],<html> <head> <title>Ejemplo</title> <style type="text/css"> body {background-color: #FF0000;} </style> </head> <body> <p>Esta es una página con fondo rojo</p> </body> </html>

3. Externo: enlace a una hoja de estilos ,[object Object],<html> <head> <title>Mi documento</title> <link rel="stylesheet" type="text/css" href="style/style.css" /> </head> <body> ...

3. Externo: ventajas de usar una hoja de estilos externa ,[object Object]

Selectores Parte III selector {atributo:valor;}

Tipos de selectores ,[object Object],[object Object],[object Object]

Selectores simples ,[object Object],body {background-color:#FF0000;} h1 { font-color: #000000; font-size: 20px; } p { color: red; display: block; background-color: black; }

Selectores de clases ,[object Object],[object Object],[object Object],[object Object],[object Object],.miClase { font-color: #000000; } <p class=“miClase”> Hola!!! </p> <H1 class=“miClase”> Historia de Chile </p> estilos.css index.html

Selectores de ID ,[object Object],[object Object],[object Object],[object Object],#cabeza { border: 1px dotted #0000FF; } <div id=“cabeza” > Instituto GAMMA </p> estilos.css index.html

Atributos para fuentes Parte IV

Atributos para fuentes ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Atributos para el texto Parte V

Atributos para el texto ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Color ,[object Object],[object Object],[object Object],[object Object]

Background ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Listas ,[object Object],[object Object],[object Object]

Atributos para cajas Parte VIII

Posicionamiento CSS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Float ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Tablas ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Cursores y estilo ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Diseño web con css

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (19)

En vedette

En vedette (15)

Similaire à Diseño web con css

Similaire à Diseño web con css (20)

Plus de Capacitacion web

Plus de Capacitacion web (6)

Diseño web con css