03. CSS (Cascading Style Sheet)

 Las hojas de estilo sirven para dar formato a una página web manteniendo separado el contenido del formato. Con HTML damos contenido y con CSS formato. 

CSS es un lenguaje basado en reglas, que determinarán el estilo que determinará a un elemento o grupo de elementos. Hay tres opciones para CSS:

1.Estilos en Línea: el estilo se añade directamente a la etiqueta de apertura del elemento HTML. El efecto que queremos aplicar sólo afecta sobre dicho elemento en particular.

2. <style></style>: se crea dentro de la etiqueta head y afecta a todos los elementos de esa categoría (h2, p, ul, ol, etc.) del archivo HTML.

3.Archivo .CSS: creamos un archivo de tipo .css para definir el estilo de la página.

Sintaxis CSS

Se pueden escribir varias declaraciones en una línea, separadas por punto y coma, pero resulta más claro escribir una por línea.

Los comentarios se inician con los dos caracteres /*, y se cierran con los dos caracteres */, pueden abarcar varias líneas. Por ejemplo /* esto es un comentario */

Ejercicio1: Abre alguna de las prácticas que hemos realizado con html, y da formatos css con los tres métodos posibles: en línea, con la etiqueta <style> y creando un archivo css. Parámetros:

• h1 color verde, alineado al centro, tamaño de la fuente 20px, tipo de letra Arial. 
• p color blueviolet, alineado izquierda, tamaño fuente 12px, tipo de letra Thimes New Roman.
• ul: color rojo
• ol: color violeta.

SELECTORES CSS:

Definen sobre qué elementos se aplicará un conjunto de reglas css.

TIPOS DE SELECTORES BÁSICOS:

ESTILOS PARA CSS:

1.Selector de clase: selecciona todos los elementos que tienen el atributo de class especificado.

Sintasis: .classname Ejemplo: .index seleccionará cualquier elemento que tenga la clase "index".

Ejemplo: Borde de imágenes .Afecta al elemento html en el que inserte dicho estilo, para ello hay que escribir dentro de la etiqueta html  <img  src="img\ballenas1.jpeg" class="img1">

    .img1 {

    width: 200;
    border-width: 8px;
    border-color: rgb(238, 14, 14);
    border-style: dotted;
    border-radius: 50%;
}

2. Selector de elemento o de tipo: 

Selecciona todos los elementos que coinciden con el nombre del elemento especificado. 

Ejemplo: Color de fondo, h1, h2, encabezados. 

Ejemplo: Pie de página

footer{

      position: fixed;

      bottom: 0;

      width: 100%;

      height: 20px;

      padding-bottom: 16px;

      background: rgb(50, 228, 169);

      border-top: 2px solid #f00;

      z-index:2000;

         

          }

3.# id se utiliza sólo para un elemento específico

#titulo-enlaces{

       color: black;

      }

#table-index {

      width: 380px;

      border: 2px;

      border-style: outset;

      border-color: black;

      background-color:rgb(50, 228, 169);

      font-size: 24px;

        }

4. Selector universal: se aplica a todos los elementos de la página.

*{
    background-color: rgb(20, 20, 49);
}

Con esto obtendríamos que se aplique ese color a toda la página web.

HTML Y CSS

Crea una hoja de estilos CSS para aplicar formato al sitio web que comprende todas tus primeras prácticas. Estilos de borde de imágenes, color de fondo, estilos para los encabezados, etc.

Completa tu página index.html con una imagen creada con inteligencia artificial en la que aparezca un estudiante que se parezca a ti trabajando con html y css en un ordenador.

Nuevo: al pinchar sobre la imagen se debe abrir en una pestaña nueva la imagen en grande!!

Además, escribe una introducción sobre todo lo que has aprendido hasta ahora, explicando algunas de las principales ETIQUETAS HTML y los TIPOS DE SELECTORES CSS.

ACTUALIZA TODO EN TU HOSTING 

Y ASEGÚRATE QUE TIENES BIEN EL ENLACE EN TU BLOG!!