sábado, 12 de octubre de 2024

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. 

Fundamentos básicos de CSS - (Cascading Style Sheets o Hojas de Estilo en Cascada)







W E B D E D E S A R R O L L A D O R E S D E M O Z I L L A C O N T O D O

T I P O D E I N F O R M A C I Ó N Y R E C U R S O S :https://developer.mozilla.org/es/docs/Web/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.

- Crea un nuevo archivo con Visual Studio Code que llames style.css y comienza con los siguientes selectores:

Selector de tipo que afecta al body con color de fondo y tamaño de letra
Selectores de clase que afecta a las imágenes que llevan esa clase
En el documento html esa imagen deberá llevar el siguiente atributo:

Y en el encabezado "head" de todos los documentos html que queramos que les afecte esa hoja de estilos vamos a poner:

PRACTICA DISTINTOS TIPOS DE BORDES CON DIFERENTES PROPIEDADES PARA CADA UNA DE LAS IMÁGENES DE LA TABLA. CREA UN SELECTOR DE CLASE PARA CADA UNA DE LAS IMÁGENES Y PERSONALIZA EN LA HOJA DE ESTILOS.

Estilos de borde predefinidos
  • solid: Borde sólido y continuo.
  • dashed: Borde con líneas discontinuas.
  • dotted: Borde de puntos.
  • double: Borde de doble línea continua.
  • groove: Borde con un efecto de ranura 3D.
  • ridge: Borde con un efecto de cresta 3D.
  • inset: Borde con un efecto de hundimiento 3D.
  • outset: Borde con un efecto de relieve 3D.
  • none: Sin borde (valor por defecto). 


EJEMPLOS 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!!



 En la página index, añade también un pie <footer> con tu nombre y fecha:

<html>

<head></head>
<body></body>


<footer>
    Sonia Fer.Lab <br>
    Octubre 2025
</footer>

</html>




at
Labels: