Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • CSS 2º Parte

    Cargado por

    Katze
    9 vistas10 páginas

    Título original

    CSS 2º Parte.pptx

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PPTX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    © All Rights Reserved
    Descargue como PPTX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    9 vistas10 páginas

    CSS 2º Parte

    Cargado por

    Katze

    Copyright:

    © All Rights Reserved
    Descargue como PPTX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 10

    CSS 2º Parte

    2º FPB Daniel Torres Viñolo


    Más Propiedades:
    ● Estilos de texto:
    ○ Alinear texto:
    ■ text-align:center ; ⇒ el texto se queda en el centro
    ■ Text-align:left; ⇒ texto se alinea a la izquierda
    ■ text-align:right; ⇒ texto se alinea a la derecha
    ○ Transformación de texto (Mayúscula/Minúscula):
    ■ text-transform: uppercase; ⇒ texto en mayúscula
    ■ text-transform:lowercase; ⇒ texto minúscula
    ■ text-transform: capitalize; ⇒ la primera letra de cada palabra se pondrá en mayúscula y el resto en
    minúscula.
    ○ Espacio entre letras sobre un texto ⇒ letter-spacing:10px; (pixeles)
    ○ Textos con líneas:
    ■ text-decoration:underline; ⇒ subraya el texto
    ■ text-decoration: overline; ⇒ subraya el texto por encima del texto
    ■ text-decoration: line-through; ⇒ tacha el texto
    Ejercicio estilos de texto

    ● A continuación tendréis que copiar el HTML de la siguiente diapositiva (diapositiva 4), y aplicando los
    estilos vistos, deberá quedar la página como os muestro en la diapositiva 5.

    Para aplicar los estilos, deberéis usar las etiquetas y las clases que ya os doy en el código, NO debéis
    modificar el html, solo debéis escribir dentro de la etiqueta <style></style>
    <!DOCTYPE html>
    <html>
    <head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <style> SOLO TENEMOS QUE ESCRIBIR AQUÍ</style>
    </head>
    <body class="cuerpo">
    <header><h1 class="titulo1">miWeb</h1></header>
    <main class="contenido">
    <h2 class="titulo2">Tipos de selectores</h2>
    <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
    occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div>
    <p class="parrafo">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </div>
    <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
    occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    </main>
    <footer><h3 class="pie">by M60</h3></footer>
    </body>
    </html>
    Resultado Ejercicio estilos de texto:
    BORDES:
    Tenemos diferentes tipos de borde:
    ● Color del borde ⇒ border-color:red;

    ● Grosor del borde ⇒ border-width:2px;


    ● Tipos de borde:
    ○ border-style: dotted; ⇒ Borde con puntitos
    ○ border-style:dashed; ⇒ Borde con rayitas
    ○ border-style:double; ⇒ Borde con doble línea
    ○ border-style:solid; ⇒ Borde con línea simple
    ○ border-style:none; ⇒ Sin borde

    ● Las etiquetas anteriores, pueden unirse de la siguiente forma:


    border: 1px solid red; (primero se pone el grosor, después el tipo de
    línea y por último el color)
    ● Bordes redondeados ⇒ border-radius: (valores):
    ○ border-radius:20px;(ese valor se pone para las 4 esquinas por igual)
    ○ border-radius: 10px 5px 20px 15px; (orden medidas: arriba Izquierda,
    arriba Derecha, Abajo Derecha, Abajo Izquierda)
    ○ border-radius:50% (hacemos un círculo)
    FONDOS
    Los fondos de nuestra página o etiquetas, pueden ser un color o una imagen:

    ● Color de fondo ⇒ background-color: red;


    ● Imagen de fondo: para poner una imagen de fondo, tenemos diferentes propiedades, para
    personalizar la imagen que vamos a insertar:
    ○ Ruta de la imagen ⇒ background-image: url(“ruta de nuestra imagen”);
    ○ Repetir una imagen horizontalmente ⇒ background-repeat: repeat-x;
    ○ Repetir una imagen verticalmente ⇒ background-repeat: repeat-y;
    ○ Para que la imagen no se repita ⇒ background-repeat: no-repeat;
    ○ Posición de la imagen ⇒ background-position: (puede tener valores: top, bottom, center, right, left)
    ○ Tamaño de la imagen:
    ■ Si queremos que la imagen ocupe todo el tamaño de nuestra etiqueta, página, etc ⇒ background-
    size:cover;
    ■ Si queremos que la imagen no ocupe todo el tamaño de nuestra etiqueta, página, etc y mantenga su
    tamaño original⇒ background-size:contain;
    Ejercicio bordes y fondo
    Siguiendo nuestra estructura HTML, debéis crear una pequeña página que tenga:

    - La estructura HTML de todos los ejercicios con: dejaremos el header y footer en blanco y SOLO
    escribiremos en el main y en <style></style>
    - Una imagen principal de fondo que ocupe toda nuestra página
    - Dentro del main, una etiqueta <div></div>, que contenga:
    - Un título <h1></h1>
    - Tres párrafos (3 etiquetas <p></p>), de unas 5-6 líneas cada uno.
    - El <div>, deberá de tener un borde (el que más os guste)

    Nota: En la siguiente diapositiva tenéis un ejemplo de cómo debe de quedar.

    Si no sabéis qué texto insertar, os dejo el siguiente link: https://getlorem.com/es/ en esta página, podéis
    elegir el número de palabras o párrafos que necesitáis y os genera texto en latín.
    HTML ejercicio
    <!DOCTYPE html>
    <html>
    <head>
    <title>Nombre ejercicio</title>
    <meta charset="UTF-8">
    <style></style>
    </head>
    <body>
    <header></header>
    <main>
    <div>
    <h1>Vuestro título</h1>
    <p> texto Lorem ipsum </p>
    <p> texto Lorem ipsum </p>
    <p> texto Lorem ipsum </p>
    </div>
    </main>
    </body>
    </html>
    Resultado bordes y fondo

    También podría gustarte