secccion css

Esta sección nos mostrará el secreto de cada vista web a la hora de ponerle un estilo que le da los colores, las posiciones respectivas y la apariencia definitiva que tiene cada elemento de ella. Es aquí donde entra el CSS, quien es exactamente el lenguaje encargado de realizar todo esto a través de diferentes funciones que podemos crear manualmente. Estas se denominan clases y van siempre asignadas a uno o varios elementos a la vez. Cada una de estas contiene los estilos respectivos. 


        .clase{
        }
        
        body{
        }


        #clase{
        }

        <div class="clase">
        <body>
        <div id='clase'>

  • Como se ve en las líneas anteriores, existen no solo una sino varias formas de dar estilos a muchos elementos. En primer lugar está la creación de una clase. Estas son las más comunes, ya que pueden ser creadas manualmente desde un archivo CSS con cualquier nombre, pero poniendo antes un punto adelante del nombre como identificador de que es una clase. Para proseguir con el ejemplo, donde nombre debe ser aplicado a través del atributo class a un elemento, en este caso un div, para así llevar dentro de sí el nombre de clase creada.

  • La segunda manera consiste en poner el nombre de la etiqueta directamente para establecer los estilos exactos. Esto se puede usar como alternativa cuando no se desea establecer más de una clase a un elemento en sí, como lo serían: body, div, h1, img, card, etc.

  • La tercera manera es un poco diferente a las anteriores, ya que como tal aquí esta puede ser usada para aplicar estilos a elementos a través de id o identificadores. Estos son agregados para saber cuál elemento en específico se le tiene que agregar los estilos que se le darán. Esto teniendo primero como asignación el carácter # antes del nombre del identificador, ya a diferencia del atributo class que es para poner un nombre de clase. En el caso de los id, en el elemento se debe poner el atributo id para seguido poner dentro el nombre del identificador del elemento. 

    • 
        
        .clases{
         margin-left: 10px;
         margin-right: 10px;
         margin-top: 10px;
         font-size: 16px;
         font-family: Arial;
         width: 200px;
         height: 100px;
         position: relative;
         color: #000;
         background-color: #fff;
         }

  • margin-left:

    Nos permite deslizar cualquier elemento a la derecha agregando espacio a su izquierda.

  • margin-right:

    Este, a diferencia de margin-left, es todo lo contrario: nos permite deslizar los elementos a la izquierda agregando espacio a su derecha.

  • margin-top:

    Esta nos permite deslizar los elementos hacia abajo agregando espacio arriba de estos.

  • font-size:

    Esta nos permite agrandar el tamaño de ciertos elementos específicos como lo son los h1 o los p. También puede aplicarse a otros como lo son las img.

  • font-family:

    Exclusiva de los h1, p y otras de tipo string, permite cambiar directamente la apariencia de un párrafo o título a una fuente tipográfica diferente, cambiando así el estilo visual con el que se miran estos. Ejemplos de fuentes son: Arial; Verdana; Tahoma; Helvetica; Georgia; 'Times New Roman'; 'Trebuchet MS'; 'Courier New'.

  • width:

    Esta propiedad nos permite dar una expansión más al ancho de un elemento. Es crucial a la hora de cubrir espacios determinados para un gran ajuste en lo visual.

  • height:

    A diferencia de width que se encarga del ancho, este juega un papel diferente al dar una altura específica a cada componente que sea de un tamaño minúsculo.

  • position:

    Este atributo nos permite establecer una posición determinada dentro del HTML a cada parte de este a través de variaciones del mismo, cada una con su respectiva función sobre lo que actúa: fixed, absolute, static, relative y sticky.

    • fixed:

      Permite dejar el elemento fijo en la pantalla; sin importar si bajamos hacia abajo o no, seguirá ahí.

    • absolute:

      Permitirá sacar al elemento del flujo de la página, permitiéndonos posicionarlo donde sea, ya sea con left o right.

    • static:

      Dejará al elemento en su posición exacta según como lo tenga el HTML.

    • relative:

      El elemento permanecerá en el flujo normal de la página, pero podrá ser movido con left o right.

    • sticky:

      Una combinación de fixed y relative. Permitirá que el elemento permanezca en su lugar, pero después si pasas de su contenedor se pegará arriba.

  • color:

    Este nos permite aplicar distintos colores ya sea a elementos como textos o párrafos. Esto a través de distintas paletas de colores que nos ofrece el atributo para decorar de manera eficiente, permitiendo así que la página tenga un estilo vivo y eficiente.

  • background-color:

    Al igual que el atributo anterior, este nos permite poner color a ciertas partes de un elemento, pero en este caso no colorea textos y párrafos; en su lugar colorea solo el fondo del elemento en específico, como por ejemplo un body.

  • background:

    En el caso de este atributo ocurre algo muy diferente, ya que representa en sí la versión completa de otros atributos como lo son background-color o background-image (la cual se encarga de mostrar imágenes de fondo). Background posee todas las funciones en su solo uso: poner colores, mostrar imágenes de fondo, crear degradados, dar repetición a ciertas cosas o ajustar tamaños, entre muchas cosas más. Todo esto en un solo atributo mejorado y completo.

    • Unidades de medida más comunes:

    hasta aqui es el final de esta larga seccion explicativa a sido un honor detallar todo acerca del css mas que todo en la parte de como crear cada clase y los atributos que son de suma importancia a la hora de husarse en el html mismo para garantizar una excelente visualzion al usuario.