HOJAS DE ESTILOS...- CSS #nombre_id {propiedades} XSL less} css . html > html title title style...

13
HOJAS DE ESTILOS Andrés Felipe Parra Ceballos

Transcript of HOJAS DE ESTILOS...- CSS #nombre_id {propiedades} XSL less} css . html > html title title style...

Page 1: HOJAS DE ESTILOS...- CSS #nombre_id {propiedades} XSL less} css . html > html title title style color: yellow; font-size: background-color: / style body red ; < >Lorem ipsum

HOJAS DE ESTILOSAndrés Felipe Parra Ceballos

Page 2: HOJAS DE ESTILOS...- CSS #nombre_id {propiedades} XSL less} css . html > html title title style color: yellow; font-size: background-color: / style body red ; < >Lorem ipsum

¿QUÉ SON LAS HOJAS DE ESTILOS?

Son conjuntos de instrucciones, a

veces en forma de archivo anexo,

que se asocian a los archivos de

texto y se ocupan de los aspectos de

formato y de presentación de los

contenidos.

Page 3: HOJAS DE ESTILOS...- CSS #nombre_id {propiedades} XSL less} css . html > html title title style color: yellow; font-size: background-color: / style body red ; < >Lorem ipsum

LENGUAJES

Page 4: HOJAS DE ESTILOS...- CSS #nombre_id {propiedades} XSL less} css . html > html title title style color: yellow; font-size: background-color: / style body red ; < >Lorem ipsum

¿ QUE ES CSS?

• Son las siglas de hojas de estilos en cascadas o en ingles Cascading Style

Sheets

Page 5: HOJAS DE ESTILOS...- CSS #nombre_id {propiedades} XSL less} css . html > html title title style color: yellow; font-size: background-color: / style body red ; < >Lorem ipsum

¿COMO ENLAZARLO A HTML?

Page 6: HOJAS DE ESTILOS...- CSS #nombre_id {propiedades} XSL less} css . html > html title title style color: yellow; font-size: background-color: / style body red ; < >Lorem ipsum

INTERNAS

Page 7: HOJAS DE ESTILOS...- CSS #nombre_id {propiedades} XSL less} css . html > html title title style color: yellow; font-size: background-color: / style body red ; < >Lorem ipsum

EXTERNAS

Page 8: HOJAS DE ESTILOS...- CSS #nombre_id {propiedades} XSL less} css . html > html title title style color: yellow; font-size: background-color: / style body red ; < >Lorem ipsum

EN LINEA

Page 9: HOJAS DE ESTILOS...- CSS #nombre_id {propiedades} XSL less} css . html > html title title style color: yellow; font-size: background-color: / style body red ; < >Lorem ipsum

¿COMO UTILIZAR CSS?

Page 10: HOJAS DE ESTILOS...- CSS #nombre_id {propiedades} XSL less} css . html > html title title style color: yellow; font-size: background-color: / style body red ; < >Lorem ipsum

TIPOS DE SELECTORES

• DE ETIQUETA:

Se utiliza para darleun estilo a unaetiqueta HTML enespecifico.

Ejemplo:

p{color:red}

DE CLASE:Permite establecerun formato de estiloa diferenteselementos de lapagina web.

Ejemplo:.nombre_cualquiera{propiedades}

DE IDEspecifica el formato de un elemento en concreto.

Ejemplo:#nombre_id{propiedades}

Page 11: HOJAS DE ESTILOS...- CSS #nombre_id {propiedades} XSL less} css . html > html title title style color: yellow; font-size: background-color: / style body red ; < >Lorem ipsum

TIPOS DE SELECTORES

• DE GRUPO

Para darle formato avarias etiquetas

EJEMPLO

H2,h1,p {Propiedades}

UNIVERSAL

Para todos loselementos

EJEMPLO*{propiedades}

Page 12: HOJAS DE ESTILOS...- CSS #nombre_id {propiedades} XSL less} css . html > html title title style color: yellow; font-size: background-color: / style body red ; < >Lorem ipsum

RELACIONAR CON HTML

• DE CLASE:

-HTML<P class=“NombreDeClase”>Esto es un párrafo</P>

-CSS.NombreDeClase{Propiedades}

Page 13: HOJAS DE ESTILOS...- CSS #nombre_id {propiedades} XSL less} css . html > html title title style color: yellow; font-size: background-color: / style body red ; < >Lorem ipsum

RELACIONAR CON HTML

• DE ID

- HTML<P id=“nombre_id”>Esto es un párrafo</P>

- CSS#nombre_id {propiedades}