Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Tutorial CSS Paso A Paso

    Încărcat de

    patriciajimenezd
    55 vizualizări11 pagini

    Titlu original

    TUTORIAL CSS PASO A PASO

    Drepturi de autor

    © © All Rights Reserved

    Formate disponibile

    PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    55 vizualizări11 pagini

    Tutorial CSS Paso A Paso

    Încărcat de

    patriciajimenezd

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 11

    CETIS 100

    PROGRAMACIÓN
    GRUPOS: 4H, 4I
    TUTORIAL PARA INCORPORAR CSS A NUESTRAS PÁGINAS HTML PASO A PASO
    DOCENTE. A. PATRICIA JIMÉNEZ DELGADO

    Contenido (parte 1)

    I. Formato de texto
    II. Formato de fondo (body)
    III. Contenedores o cajas
    IV. Formato de listas
    V. Formato en tablas

    1 FORMATO DE TEXTO

    ¿Cómo puedo mejorar el formato del texto con CSS?

    Tamaño

    Hay 2 formas de dimensionar el tamaño de fuente

    1. Tamaño absoluto  se especifica con pixels, pulgadas o milímetros


    2. Tamaño relativo  se especifica con porcentajes

    Ejemplo de tamaño de fuente ABSOLUTO


    OJO! Recuerda que el código que estoy explicando aquí es CSS, puede ir dentro de la
    cabecera <HEAD> de html, dentro de una etiqueta <STYLE> que le dice al navegador
    que es parte de la hoja de estilo (CSS). También podemos establecer los tamaños en
    centímetros o milímetros. Cambiando "px" (pixels) por "cm" o "mm". Sin embargo, estas
    unidades son menos adecuadas para las pantallas.

    Ejemplo de tamaño RELATIVO

    Este es el método recomendado porque el texto se adapta más fácilmente a las


    preferencias de todos los visitantes.

    Existen varias formar de especificar un valor relativo. Puedes escribir el tamaño en


    palabras, así:

     xx-small: diminuto ;
     x-small : muy pequeño ;
     small : pequeño ;
     medium : mediano ;
     large : grande ;
     x-large : muy grande ;
     xx-large : enorme.
    Puedes probar a utilizar estos valores en tu código CSS:
    Sin embargo, esta técnica tiene un inconveniente: solo hay siete tamaños
    disponibles (porque solo hay siete nombres). Afortunadamente, existen otras
    opciones. Mi técnica favorita es especificar el tamaño en "em".

     Si escribes 1em, el texto tiene un tamaño normal.


     Si quieres que el texto sea más grande, puedes introducir un valor superior
    a 1, como 1.3em.
     Si quieres que el texto sea más pequeño, puedes introducir un valor inferior
    a 1, como 0.8em.
    Atención: los números decimales se escriben con punto, no con coma. Por ejemplo, debes
    escribir « 1.4em » , no « 1,4em ».

    Bueno, hasta aquí abordamos el tema sobre el tamaño de fuente, vayamos ahora con ….

    2 TIPO DE FUENTE

    La propiedad CSS que nos permite especificar la fuente a utilizar es font-family.


    Tienes que escribir el nombre de la fuente así:

    El navegador intentará usar primero la font1. Si no la tiene, lo intentará con la font2.


    Si no la tiene, lo intentará con la font3, y así sucesivamente. Obviamente,
    reemplazamos la palabra “font” o “fuente” por el nombre de la fuente que queremos
    utilizar.

    Esta es una lista de fuentes que funcionan bien en la mayoría de los navegadores:

     Arial ;
     Arial Black ;
     Comic Sans MS ;
     Courier New ;
     Georgia ;
     Impact ;
     Times New Roman ;
     Trebuchet MS ;
     Verdana.
    Más adelante aprenderemos cómo insertar otras fuentes, de tal forma que los
    navegadores las descarguen automáticamente si no las tienen instaladas.

    3 ALINEACIÓN

    El lenguaje CSS te permite establecer todas las alineaciones de texto conocidas:


    izquierda, centrado, derecha y justificado.

    Es bastante sencillo. Utilizas la propiedad text-align y especificas la alineación


    deseada:

     left: el texto se alineará a la izquierda (este es el ajuste predeterminado).

     center: el texto aparecerá centrado.

     right: el texto se alineará a la derecha.

     justify: el texto aparecerá justificado. Justificar el texto hace que se ocupe todo
    el ancho posible sin dejar ningún espacio en blanco al final de las líneas. Los
    artículos de periódicos, por ejemplo, siempre se justifican.
    Echemos un vistazo a los diferentes tipos de alineación en este ejemplo:
    Continuemos viendo las propiedades CSS existentes. Ahora vamos a ver las propiedades
    directa o indirectamente relacionadas con el color. Vamos a ver entre otras cosas:
     cómo cambiar el color del texto;
     cómo añadir un color o una imagen de fondo;
     cómo añadir sombras;
     cómo variar los niveles de transparencia

    Especificar el nombre del color

    La manera más sencilla y más cómoda de elegir un color es escribir su nombre.


    El único problema con este método es que sólo hay dieciséis colores llamados «estándar».
    Aunque hay otros colores informales, no molestaré enseñándolos ya que no funcionan
    necesariamente de la misma manera en todos los navegadores.
    La siguiente figura muestra los dieciséis colores que puedes usar simplemente escribiendo
    su nombre.
    Color de fondo
    Imágenes de fondo
    En los siguientes ejemplos, voy a cambiar la imagen de fondo de la página. Sin embargo,
    igual que para el color de fondo, no olvides que la imagen de fondo no se aplica
    necesariamente a toda la página. También puedes poner una imagen de fondo detrás de
    los títulos, párrafos, etc.

    Aplicar una imagen de fondo.


    La propiedad usada para especificar una imagen de fondo es background-image. Como
    valor, tienes que especificar url("nombreimagen1.png"). Por ejemplo:

    body

    background-image: url("snow.png");

    }
    Transparencia
    ¡CSS te permite muy fácilmente variar los niveles de transparencia de los elementos! Para
    hacer esto, usaremos las características CSS3: la propiedad opacity y la notación
    RGBA.

    La propiedad de opacidad
    Esta sencilla propiedad de opacity se usa para especificar el nivel de opacidad (lo
    contrario a transparencia).

     Con un valor de 1, el elemento será completamente opaco; este es el


    comportamiento por defecto.
     Con un valor de 0, el elemento será completamente transparente.
    Así que tienes que elegir un valor entre 0 y 1. Con un valor de 0,6, tu elemento será un 60
    % opaco... ¡y serás capaz de ver a través de él!

    Aquí tienes cómo se puede usar:

    opacity: 0.6;

    }
    Aquí tienes un ejemplo que te dará una idea de transparencia. Puedes ver el resultado en
    la siguiente figura.

    body

    {
    background: url("snow.png");

    background-color: black;

    color: white;

    opacity: 0.3;

    Un párrafo transparente
    Ten en cuenta que la transparencia funciona en todos los navegadores, incluyendo
    Internet Explorer de IE9 en adelante.
    Si aplicas la propiedad de opacidad a un elemento de la página, todo el contenido
    de este elemento se hará transparente (incluso imágenes, otros bloques dentro,
    etc.

    Bordes estándar
    CSS te ofrece una amplia selección de bordes para decorar tu página. Muchas
    propiedades CSS te permiten cambiar la apariencia de tus bordes:border-width,border-
    color,border-style…

    Intento usar directamente la superpropiedadborderque incluye todas estas propiedades.


    ¿Recuerdas la superpropiedadbackground? Funciona con el mismo principio: vamos a
    poder combinar varios valores.

    Para elborde, puedes usar hasta tres valores para cambiar la apariencia del borde:

     La anchura: especifica la anchura de tu borde. Introduce un valor en


    píxeles (como2px).
     El color: es el color de tu borde. Como hemos aprendido, usa un nombre
    de color (negro,rojo, etc.) o un valor hexadecimal ( #FF0000) o un valor
    RGB ( rgb(198, 212, 37)).
    El tipo de borde: hay varias opiniones disponibles. Tu borde puede ser una única línea
    sólida, una línea de puntos o una línea discontinua. Aquí están los valores disponibles:
    none: sin borde (por defecto); solid: una sola línea sólida; dotted: una línea de puntos;
    dashed: una línea discontinua; double: con doble borde; groove: una línea estriada; ridge:
    una línea con crestas; inset: inset global efecto 3D; outset: outset global efecto 3D.

     El tipo de borde: hay varias opiniones disponibles. Tu borde puede ser una
    única línea sólida, una línea de puntos o una línea discontinua. Aquí están
    los valores disponibles:
    o none: sin borde (por defecto);
    o solid: una sola línea sólida;
    o dotted: una línea de puntos;
    o dashed: una línea discontinua;
    o double: con doble borde;
    o groove: una línea estriada;
    o ridge: una línea con crestas;
    o inset: inset global efecto 3D;
    o outset: outset global efecto 3D.
    Para obtener un borde azul, una línea discontinua de 3 píxeles de grueso introduciré:

    h1

    border: 3px blue dashed;

    }
    La siguiente figura muestra los diferentes estilos de bordes que puedes usar.

    Varios estilos
    de borde
    En la parte superior, a la derecha, a la izquierda, en la parte inferior...
    ¿Quién dijo que tenías que aplicar el mismo borde a los cuatro lados de tu elemento?
    Nada, si quieres poner bordes diferentes dependiendo del lado (arriba, abajo, derecha o
    izquierda), puedes hacerlo sin problema. En este caso, tienes que usar estas cuatro
    propiedades:

     border-top:
    borde superior;
     border-bottom: borde inferior;
     border-left: borde izquierdo;
     border-right: borde derecho;
    Hay equivalentes para modificar cada detalle del borde si tú quieres:border-top-
    widthpara cambiar el grosor del borde superior,border-top-colorpara el color
    superior etc.
    Son también superpropiedades que funcionan comoborder, pero se aplica a un solo lado.

    Para añadir un borde a la izquierda o derecha de los párrafos, solo tenemos que
    introducir:

    border-left: 2px solid black;


    border-right: 2px solid black;

    }
    Puedes cambiar los bordes de cualquier elemento de la página. Lo hemos puesto
    en párrafos, pero también puedes cambiar el borde de imágenes, textos
    importantes como<strong>etc.
    Bordes redondeados
    Los bordes redondeados son un poco como los webmasters del Holy Grain que
    han estado esperando desde el milenio anterior (o eso parece). ¡Desde la llegada
    de CSS3, ahora es posible crearlos fácilmente!

    La propiedadborder-radiusnos permitirá fácilmente redondear las esquinas de


    cualquier elemento. Simplemente especifica el tamaño («importancia») del radio
    en píxeles:

    border-radius: 10px;

    }
    El radio se ve especialmente si el elemento tiene bordes, como se muestra en la
    figura siguiente.

    Bordes redondeados
    ... o si tiene un color de fondo, como en la figura siguiente.

    Un fondo con esquinas redondeadas

    Para terminar, les sugiero consulten este sitio:


    https://www.diegocmartin.com/modelo-de-cajas-y-posicionamiento-css/

    Donde organizan la información con apartados donde se cuenta con 3 pestañas:


    1. html
    2. css
    3. el resultado de ambos códigos

    S-ar putea să vă placă și