SlideShare una empresa de Scribd logo
1 de 20
CSS
Janet Alejandra Beltran Vizcarra
QUE ES CSS
 CSS es un lenguaje utilizado en la
presentación de documentos HTML. Un
documento HTML viene siendo
coloquialmente “una página web”. Entonces
podemos decir que el lenguaje CSS sirve para
organizar la presentación y aspecto de una
página web. Este lenguaje es principalmente
utilizado por parte de los navegadores web de
internet y por los programadores web
informáticos para elegir multitud de opciones
de presentación como colores, tipos y
tamaños de letra, etc.
¿Qué puedo hacer con CSS?
CSS es un lenguaje de estilo que define la
presentación de los documentos HTML. Por
ejemplo, CSS abarca cuestiones relativas a
fuentes, colores, márgenes, líneas, altura,
anchura, imágenes de fondo, posicionamiento
avanzado y muchos otros temas
¿Cómo utilizarla?
Una hoja de estilo externa es sencillamente un
fichero de texto con la extensión .css. Como
cualquier otro fichero, puedes colocar la hoja
de estilo en el servidor web o en el disco duro.
Por ejemplo, digamos que tu hoja de estilo se
llama style.css y está localizada en una
carpeta que se llama style. Esta situación se
puede ilustrar de la siguiente manera:
 Con la siguiente linea podemos enlazar
nuestra pagina .css a nuestra pagina .html
 <link rel="stylesheet" type="text/css“
href="stile.css" />
Como utilizarlo
 Todo lo de nuestro diseño lo pondremos en
nuestra pagina de .css
Como utilizarlo
Digamos que queremos un bonito color rojo
como fondo de nuestra página web:
Usando HTML podríamos haberlo conseguido
así:
<body bgcolor="#FF0000">
Con CSS el mismo resultado puede lograrse
así:
body {background-color: #FF0000;}
PROPIEDADES DE CSS
La propiedad color describe el color de primer
plano de un elemento.
h1 { color: #ff0000; }
 La propiedad CSS background-image se usa para
insertar una imagen de fondo.
 Repetir la imagen de fondo [background-repeat]
 Background repeat: repeat-x La imagen se repite
en el eje horizontal
 background-repeat: repeat-yLa imagen se repite
en el eje vertical
 background-repeat: repeatLa imagen se repite en
el eje horizontal y vertical
 background-repeat: no-repeatLa imagen no se
repite
FUENTES
 La propiedad font-style define la fuente
elegida bien con el valor normal, el
valoritalic o el valor oblique. En el ejemplo
que sigue, todos los encabezados marcados
con <h2> aparecerán en cursiva.
 h1 {font-family: arial, verdana, sans-serif;} h2
{font-family: "Times New Roman", serif; font-
style: italic;}
Ejemplo de font-style
 La propiedad font-weight describe qué
intensidad o "peso" en negrita debería tener la
fuente. Toda fuente puede tener los
valores normal o bold. Algunos navegadores
soportan, incluso, el uso de números entre
100 y 900 (de cien en cien) para describir el
peso de dicha fuente.
 El tamaño de la fuente se establece por medio
de la propiedad font-size.
 La propiedad CSS text-align es el equivalente al
atributo align usado en versiones anteriores de
HTML.
 Los valores posibles de esta propiedad
son:left(texto alineado a la izquierda)
 right (texto alineado a la derecha)
o center (texto con alineación centrada).
 Además, el valor justify(alineación justificada)
alargará cada línea de forma que los márgenes
izquierdo y derecho estén justificados. Esta tipo
de presentación la habrás visto, por ejemplo, en
periódicos y revistas.
ejemplo
 th { text-align: right; }
 td { text-align: center; }
 p { text-align: justify; }
 La propiedad text-decoration permite añadir
diferentes "decoraciones" o "efectos" al texto.
Por ejemplo, se puede subrayar el texto,
tacharlo o ponerle un subrayado superior. En
el ejemplo siguiente, el
elemento <h1>aparecerá subrayado, el
elemento <h2> aparecerá con un subrayado
por encima del texto y el
elemento <h3> tendrá el texto tachado.
 h1 { text-decoration: underline; } h2 { text-
decoration: overline; } h3 { text-decoration:
line-through; }

Más contenido relacionado

Destacado (19)

Guía Básica de CSS
Guía Básica de CSSGuía Básica de CSS
Guía Básica de CSS
 
Css (cascading style sheets)
Css (cascading style sheets)Css (cascading style sheets)
Css (cascading style sheets)
 
Tema 3 - Introducción a HTML
Tema 3 - Introducción a HTMLTema 3 - Introducción a HTML
Tema 3 - Introducción a HTML
 
Css
CssCss
Css
 
Tema 7 - Introducción a html con css
Tema 7 - Introducción a html con cssTema 7 - Introducción a html con css
Tema 7 - Introducción a html con css
 
html y css
html y csshtml y css
html y css
 
Terminología Web
Terminología WebTerminología Web
Terminología Web
 
DEBER HOJA DE ESTILO (CSS) blog blogger blogspot
DEBER HOJA DE ESTILO (CSS) blog blogger blogspotDEBER HOJA DE ESTILO (CSS) blog blogger blogspot
DEBER HOJA DE ESTILO (CSS) blog blogger blogspot
 
CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?
 
Maquetación web
Maquetación webMaquetación web
Maquetación web
 
Manual Celta 2015 da Chevrolet
Manual Celta 2015 da ChevroletManual Celta 2015 da Chevrolet
Manual Celta 2015 da Chevrolet
 
Lenguaje HTML
Lenguaje HTMLLenguaje HTML
Lenguaje HTML
 
Introducción a HTML y CSS
Introducción a HTML y CSSIntroducción a HTML y CSS
Introducción a HTML y CSS
 
LENGUAJE HTML
LENGUAJE HTMLLENGUAJE HTML
LENGUAJE HTML
 
Html
HtmlHtml
Html
 
HTML ¿qué es y para que sirve?
HTML ¿qué es y para que sirve?HTML ¿qué es y para que sirve?
HTML ¿qué es y para que sirve?
 
Maquetado con HTML y CSS
Maquetado con HTML y CSSMaquetado con HTML y CSS
Maquetado con HTML y CSS
 
Curso HTML y CSS, parte 1
Curso HTML y CSS, parte 1Curso HTML y CSS, parte 1
Curso HTML y CSS, parte 1
 
Las 4 habilidades del lenguaje.
Las 4 habilidades del lenguaje.Las 4 habilidades del lenguaje.
Las 4 habilidades del lenguaje.
 

Similar a Css (20)

Introdu css clase1
Introdu css clase1Introdu css clase1
Introdu css clase1
 
Hojas de estilo CSS
Hojas de estilo CSSHojas de estilo CSS
Hojas de estilo CSS
 
TAREA DEL CSS
TAREA DEL CSSTAREA DEL CSS
TAREA DEL CSS
 
Lección 5 texto diapo
Lección 5 texto diapoLección 5 texto diapo
Lección 5 texto diapo
 
Capitulo 6 - Texto
Capitulo 6 - TextoCapitulo 6 - Texto
Capitulo 6 - Texto
 
Resumen
ResumenResumen
Resumen
 
Gordo
GordoGordo
Gordo
 
Hojas de Estilo en cascada, CSS
Hojas de Estilo en cascada, CSSHojas de Estilo en cascada, CSS
Hojas de Estilo en cascada, CSS
 
Manual de css hojas de estilo
Manual de css hojas de estiloManual de css hojas de estilo
Manual de css hojas de estilo
 
Curso HTML 5 & jQuery - Leccion 9
Curso HTML 5 & jQuery - Leccion 9Curso HTML 5 & jQuery - Leccion 9
Curso HTML 5 & jQuery - Leccion 9
 
programacion
programacionprogramacion
programacion
 
Ccs.sandromtz_4101
Ccs.sandromtz_4101Ccs.sandromtz_4101
Ccs.sandromtz_4101
 
Manual de css......jpg
Manual de css......jpgManual de css......jpg
Manual de css......jpg
 
CSS
CSSCSS
CSS
 
Css
CssCss
Css
 
Guia de css para principiantes
Guia de css para principiantesGuia de css para principiantes
Guia de css para principiantes
 
Presentación-HTML5-okkk.pdf
Presentación-HTML5-okkk.pdfPresentación-HTML5-okkk.pdf
Presentación-HTML5-okkk.pdf
 
Presenpabo
PresenpaboPresenpabo
Presenpabo
 
hojas de_estilo_css
 hojas de_estilo_css hojas de_estilo_css
hojas de_estilo_css
 
HTML
HTMLHTML
HTML
 

Último

Las redes sociales en el mercado digital
Las redes sociales en el mercado digitalLas redes sociales en el mercado digital
Las redes sociales en el mercado digitalNayaniJulietaRamosRa
 
02. Mr. Spencer (T.L. Sawn).pdf.libro de un señor
02. Mr. Spencer (T.L. Sawn).pdf.libro de un señor02. Mr. Spencer (T.L. Sawn).pdf.libro de un señor
02. Mr. Spencer (T.L. Sawn).pdf.libro de un señorkkte210207
 
TIPOS DE LA PSICOPATOLOGÍA DE LA PERCEPCIÓN.pdf
TIPOS DE LA PSICOPATOLOGÍA DE LA PERCEPCIÓN.pdfTIPOS DE LA PSICOPATOLOGÍA DE LA PERCEPCIÓN.pdf
TIPOS DE LA PSICOPATOLOGÍA DE LA PERCEPCIÓN.pdfLUZMARIAAYALALOPEZ
 
PPT-HISTORIA-6°-ABC.pptxjjjjjjjjjjjjjjjjjjjjjj
PPT-HISTORIA-6°-ABC.pptxjjjjjjjjjjjjjjjjjjjjjjPPT-HISTORIA-6°-ABC.pptxjjjjjjjjjjjjjjjjjjjjjj
PPT-HISTORIA-6°-ABC.pptxjjjjjjjjjjjjjjjjjjjjjjNachisRamos
 
Unidad V. Disoluciones quimica de las disoluciones
Unidad V. Disoluciones quimica de las disolucionesUnidad V. Disoluciones quimica de las disoluciones
Unidad V. Disoluciones quimica de las disolucioneschorantina325
 
12 Clasificacion de las Computadoras.pdf
12 Clasificacion de las Computadoras.pdf12 Clasificacion de las Computadoras.pdf
12 Clasificacion de las Computadoras.pdfedwinmelgarschlink2
 
Guia para el registro en el sitio slideshare.pdf
Guia para el registro en el sitio slideshare.pdfGuia para el registro en el sitio slideshare.pdf
Guia para el registro en el sitio slideshare.pdflauradbernals
 

Último (7)

Las redes sociales en el mercado digital
Las redes sociales en el mercado digitalLas redes sociales en el mercado digital
Las redes sociales en el mercado digital
 
02. Mr. Spencer (T.L. Sawn).pdf.libro de un señor
02. Mr. Spencer (T.L. Sawn).pdf.libro de un señor02. Mr. Spencer (T.L. Sawn).pdf.libro de un señor
02. Mr. Spencer (T.L. Sawn).pdf.libro de un señor
 
TIPOS DE LA PSICOPATOLOGÍA DE LA PERCEPCIÓN.pdf
TIPOS DE LA PSICOPATOLOGÍA DE LA PERCEPCIÓN.pdfTIPOS DE LA PSICOPATOLOGÍA DE LA PERCEPCIÓN.pdf
TIPOS DE LA PSICOPATOLOGÍA DE LA PERCEPCIÓN.pdf
 
PPT-HISTORIA-6°-ABC.pptxjjjjjjjjjjjjjjjjjjjjjj
PPT-HISTORIA-6°-ABC.pptxjjjjjjjjjjjjjjjjjjjjjjPPT-HISTORIA-6°-ABC.pptxjjjjjjjjjjjjjjjjjjjjjj
PPT-HISTORIA-6°-ABC.pptxjjjjjjjjjjjjjjjjjjjjjj
 
Unidad V. Disoluciones quimica de las disoluciones
Unidad V. Disoluciones quimica de las disolucionesUnidad V. Disoluciones quimica de las disoluciones
Unidad V. Disoluciones quimica de las disoluciones
 
12 Clasificacion de las Computadoras.pdf
12 Clasificacion de las Computadoras.pdf12 Clasificacion de las Computadoras.pdf
12 Clasificacion de las Computadoras.pdf
 
Guia para el registro en el sitio slideshare.pdf
Guia para el registro en el sitio slideshare.pdfGuia para el registro en el sitio slideshare.pdf
Guia para el registro en el sitio slideshare.pdf
 

Css

  • 2. QUE ES CSS  CSS es un lenguaje utilizado en la presentación de documentos HTML. Un documento HTML viene siendo coloquialmente “una página web”. Entonces podemos decir que el lenguaje CSS sirve para organizar la presentación y aspecto de una página web. Este lenguaje es principalmente utilizado por parte de los navegadores web de internet y por los programadores web informáticos para elegir multitud de opciones de presentación como colores, tipos y tamaños de letra, etc.
  • 3. ¿Qué puedo hacer con CSS? CSS es un lenguaje de estilo que define la presentación de los documentos HTML. Por ejemplo, CSS abarca cuestiones relativas a fuentes, colores, márgenes, líneas, altura, anchura, imágenes de fondo, posicionamiento avanzado y muchos otros temas
  • 4. ¿Cómo utilizarla? Una hoja de estilo externa es sencillamente un fichero de texto con la extensión .css. Como cualquier otro fichero, puedes colocar la hoja de estilo en el servidor web o en el disco duro. Por ejemplo, digamos que tu hoja de estilo se llama style.css y está localizada en una carpeta que se llama style. Esta situación se puede ilustrar de la siguiente manera:
  • 5.
  • 6.  Con la siguiente linea podemos enlazar nuestra pagina .css a nuestra pagina .html  <link rel="stylesheet" type="text/css“ href="stile.css" />
  • 7. Como utilizarlo  Todo lo de nuestro diseño lo pondremos en nuestra pagina de .css
  • 8. Como utilizarlo Digamos que queremos un bonito color rojo como fondo de nuestra página web: Usando HTML podríamos haberlo conseguido así: <body bgcolor="#FF0000"> Con CSS el mismo resultado puede lograrse así: body {background-color: #FF0000;}
  • 9. PROPIEDADES DE CSS La propiedad color describe el color de primer plano de un elemento. h1 { color: #ff0000; }
  • 10.  La propiedad CSS background-image se usa para insertar una imagen de fondo.  Repetir la imagen de fondo [background-repeat]  Background repeat: repeat-x La imagen se repite en el eje horizontal  background-repeat: repeat-yLa imagen se repite en el eje vertical  background-repeat: repeatLa imagen se repite en el eje horizontal y vertical  background-repeat: no-repeatLa imagen no se repite
  • 11.
  • 12. FUENTES  La propiedad font-style define la fuente elegida bien con el valor normal, el valoritalic o el valor oblique. En el ejemplo que sigue, todos los encabezados marcados con <h2> aparecerán en cursiva.  h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif; font- style: italic;}
  • 14.  La propiedad font-weight describe qué intensidad o "peso" en negrita debería tener la fuente. Toda fuente puede tener los valores normal o bold. Algunos navegadores soportan, incluso, el uso de números entre 100 y 900 (de cien en cien) para describir el peso de dicha fuente.
  • 15.
  • 16.  El tamaño de la fuente se establece por medio de la propiedad font-size.
  • 17.  La propiedad CSS text-align es el equivalente al atributo align usado en versiones anteriores de HTML.  Los valores posibles de esta propiedad son:left(texto alineado a la izquierda)  right (texto alineado a la derecha) o center (texto con alineación centrada).  Además, el valor justify(alineación justificada) alargará cada línea de forma que los márgenes izquierdo y derecho estén justificados. Esta tipo de presentación la habrás visto, por ejemplo, en periódicos y revistas.
  • 18. ejemplo  th { text-align: right; }  td { text-align: center; }  p { text-align: justify; }
  • 19.  La propiedad text-decoration permite añadir diferentes "decoraciones" o "efectos" al texto. Por ejemplo, se puede subrayar el texto, tacharlo o ponerle un subrayado superior. En el ejemplo siguiente, el elemento <h1>aparecerá subrayado, el elemento <h2> aparecerá con un subrayado por encima del texto y el elemento <h3> tendrá el texto tachado.
  • 20.  h1 { text-decoration: underline; } h2 { text- decoration: overline; } h3 { text-decoration: line-through; }