CURSO DE CSS

PROGRAMAS A UTILIZAR
  1. Visual Studio Code Es un editor de codigo fuente desarrollado por Microsoft. Utilizaremos este programa por que es más ligero y tiene mas opciones a diferencia de otros
REQUISITOS BÁSICOS
CONCEPTOS BÁSICOS
CSS (Cascading Style Sheets => Hojas de estilos en cascada). Es un lenguaje de estilos que es utilizado en el diseño web.
CSS se utiliza para la apariencia de una pagina web. Gracias a este lenguaje podemos dar un mejor diseño a nuestra pagina.
OJO CSS NO ES UN LENGUAJE DE PROGRAMACION
QUE ES CSS
CSS (en inglés Cascading Style Sheets) es lo que se denomina lenguaje de hojas de estilo en cascada y se usa para estilizar elementos escritos en un lenguaje de marcado como HTML. CSS separa el contenido de la representación visual del sitio.
CSS fue desarrollado por W3C (World Wide Web Consortium) en 1996 por una razón muy sencilla. HTML no fue diseñado para tener etiquetas que ayuden a formatear la página. Está hecho solo para escribir el marcado para el sitio.
ESTILOS AVANZADOS
                
                    /* variables */
                    :root {
                        --fondo-texto-negro: rgb(9, 51, 85);
                        --fondo-texto-blanco: #eff3f5;                       
                    }

                    /* sirve para dar el efecto de desplazamiento del scroll */
                    html{
                        scroll-behavior: smooth;
                    }

                    /* TARGET dar estilos segun ID en la URL */
                    section:target h5 {
                        background: blue;
                    }

                    /* impedir la seleccion del contenido */
                    .icono_menu {
                        user-select: none;
                    }

                    /* para posicionar una imagen fill|contain|cover|none|scale-down */
                    img{
                        object-fit: cover;
                    }

                    /* ayudar a mejorar los espacios(M-P) cuando tenemos link al mismo documento */
                    .contacto {
                        scroll-margin-top: 8ex;
                    }

                    /* modificar scroll */
                    .parrafo::-webkit-scrollbar {
                        width: 10px;
                    }
                    .parrafo::-webkit-scrollbar-thumb {
                        background: rgb(1, 70, 97, 0.1);
                        border-radius: 20px;
                    }
                    .parrafo::-webkit-scrollbar-thumb:hover {
                        background: rgb(1, 70, 97,0.7);
                    }

                    /* Evitar que un elemento subyacente se desplace */
                    .menu-ul {
                        overflow: auto;
                        overscroll-behavior: contain; /* none auto */
                    }
MEDIA QUERY CSS
            
                @media screen and (max-width:767px){    
                    /*
                
                    */
                }
TRANSICIONES
            
                /* ESPECIFICO */
                .hijo:hover{
                    background: skyblue;
                    width: 500px;
                }
                .hijo{
                    height: 100px;
                    width: 150px;
                    background: red;
                
                    /* SECUENCIA DE TRANSICIONES */
                    transition-property: background,width;
                    transition-duration: 2s;
                    /* LINEAR EASE EASE-IN EASE-OUT EASE-IN-OUT */
                    transition-timing-function: linear;
                    transition-delay: 3s;/*DEMORA*/
                                
                }

                /* NO ESPECIFICO */
                .hijo2{
                    height: 100px;
                    width: 150px;
                    background: yellowgreen;
                    /* transition: width ease 2s; */
                    transition: all 2s ease 1s;
                }
                .hijo2:hover{
                    color:white;
                    background: black;
                    width: 500px;                
                    border-radius: 20px;
                }
ANIMACIONES
            
                .padre5{
                    height: 100px;
                    width: 150px;
                    background: blue;
                    color:white;
                    animation-name: ejemplo;
                    animation-duration: 5s;
                    animation-delay: 0.5s;/*TARDAR*/
                    animation-iteration-count: 3;/*REPETIR*/
                }
                @keyframes ejemplo{
                    0%{background: green;}
                    25%{background: red;}
                    50%{background: yellow;}
                    75%{width: 100%;font-size:50px;}
                    100%{background: black;}
                }
SOMBRAS
            
                /* SOMBRAS DE CAJAS */
                .hijo3{
                    background: rgba(0,100,200,0.8);
                    /* R B OPACIDAD COLOR */
                    box-shadow: 0px 0px 2px blue,
                                4px 4px 2px green,
                                10px 10px 5px black;
                    }


                /* SOMBRAS DE TEXTO */
                .hijo4{
                    text-shadow: 0 0 2px #B0A501,
                    1px 1px 2px #093B35,
                    3px 3px 4px #07A774;
                }