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; }

Css

  • 1.
  • 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 hacercon 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 hojade 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:
  • 6.
     Con lasiguiente linea podemos enlazar nuestra pagina .css a nuestra pagina .html  <link rel="stylesheet" type="text/css“ href="stile.css" />
  • 7.
    Como utilizarlo  Todolo de nuestro diseño lo pondremos en nuestra pagina de .css
  • 8.
    Como utilizarlo Digamos quequeremos 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 Lapropiedad color describe el color de primer plano de un elemento. h1 { color: #ff0000; }
  • 10.
     La propiedadCSS 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
  • 12.
    FUENTES  La propiedadfont-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;}
  • 13.
  • 14.
     La propiedadfont-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.
  • 16.
     El tamañode la fuente se establece por medio de la propiedad font-size.
  • 17.
     La propiedadCSS 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 propiedadtext-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; }