Please enable JavaScript.
Coggle requires JavaScript to display documents.
CSS (CASCADING STYLE SHEETS) - Coggle Diagram
CSS (CASCADING STYLE SHEETS)
FUNCION DE CSS
Su función es simple: le dice a un sitio web el estilo en que mostrará los contenidos. Además, permite guardar los elementos que conforman el diseño separado del contenido mismo. De esta manera, CSS es el diseño que define el aspecto de una página o su parte estética ya que es independiente, es factible crear plantillas o formatos para plasmar las ideas de diseño, entonces podemos afirmar que CSS sirve para:
Realizar cambios a la apariencia de una web sin alterar su contenido; Tener el control en el diseño de documentos HTML;
Ahorrar tiempo en el diseño y personalización de una web;
CSS permite que la página tenga un mejor rendimiento.
https://www.nextu.com/blog/que-es-css-rc22/
TABLAS
caption-side. Sirve para posicionar el título sobre la tabla CSS.
table-layout. Funciona para dar formato a las celdas, filas y columnas.
border-collapse. Se utiliza para seleccionar el modelo de los bordes.
border-spacing. Sirve para indicar el espaciado entre los bordes de celdas adyacentes.
empty-cells. Se usa para dar visibilidad a los bordes de celdas sin contenido.
Una vez que conoces lo básico sobre las tablas CSS, es tiempo de construir la tuya. A continuación, te compartimos los pasos. Tabla simple: La primera etiqueta es <table> </ table>. Es esta etiqueta la que se usa para indicar el principio y el fin de una tabla. Esta etiqueta es de bloque, por lo que debe ser colocada fuera de un párrafo.
Código HTML
<p>Este es un párrafo previo a la tabla.</p>
<table>
<!-- Aquí se escribirá el contenido de la tabla-->
</table>
<p>Este es un párrafo al final de la tabla.</p>
https://blog.hubspot.es/website/tablas-css-
https://www.um.es/docencia/barzana/DAWEB/HTML-CSS-Caracteristicas-avanzadas.pdf
Las tablas CSS son elementos de un sitio web que sirven como base de datos para la organización de información diversa. Sus propiedades son más extensas que las tablas HTML y pueden tener un nivel de diseño y estilo más avanzado para ser atractivas a la vista. Las tablas CSS se componen de propiedades que permiten controlar el estilo de los títulos, el tamaño de las celdas, filas y columnas, así como el espaciado entre los bordes.
Entre las propiedades más utilizadas encuentran
en las siguientes:
¿QUE ES CSS?
CCS es el formato recomendado para las páginas escritas en formato HTML en base a los estándares de "Cascading Style Sheets" (hojas de estilo en cascada), publicado por el World Wide Web Consortium (W3C).
El uso de este estándar Web nos ahorra tiempo, da consistencia y facilita en gran medida la escritura de páginas Web, en este libro vamos a aprender a utilizar las hojas de estilo en cascada (estilos CSS) para crear páginas Web más flexibles y ligeras, controlando su aspecto gráfico con mayor precisión y con mayor facilidad para la corrección de errores.
Primer contacto
Para comenzar haremos cosas muy simples y rápidas, comenzaremos a ver algunos ejemplos y haremos algunos ejercicios prácticos. Más adelante tendremos un capítulo en el que se analizará la situación que llevó a la W3C a crear este patrón y después de varios capítulos nos tomaremos este tema con más seriedad y haremos docenas de ejercicios prácticos.
Alicia Durango
IT Campus Academy, 2015
https://scholar.google.es/scholar?hl=es&as_sdt=0%2C5&q=CSS&oq=#d=gs_qabs&t=1690788125262&u=%23p%3DmczWPGogJ60J
BARRAS DE NAVEGACIÓN
Una Barra de Navegación requiere de HTML estándar como base. Una Barra de Navegación es básicamente una lista de enlaces, por lo tanto, usar etiquetas <ul> y <li> tiene un gran sentido. En el siguiente ejemplo, vamos a crear una barra de navegación a partir de una lista HTML estándar
<ul>
<li><a href="iniico.html">Inicio</a></li>
<li><a href="quienes-somos.html">Quienes Somos</a></li>
<li><a href="noticias.html">Noticias</a></li>
<li><a href="contacto.html">Contacto</a></li>
https://www.exasoluciones.com/inicio/tutoriales/css/barras-de-navegacion-css#:~:text=Una%20Barra%20de%20Navegaci%C3%B3n%20implica,li%3E%20tiene%20un%20gran%20sentido
.
</ul>
SINTAXIS
La sintaxis de las definiciones CSS consta de dos partes: un selector y una declaración. He aquí un ejemplo:
h1 (color: green)
h1 -> Selector
color: green —> Declaración
En este ejemplo, el selector h1 dice que el estilo se aplica a los elementos h1 y la definición dice que el color del texto de estos elementos debe ser de color verde ("green").
La declaración se encierra entre llaves ((...)) y puede contener varias definiciones. Cada definición consta de un par propiedad/valor, donde el valor de la propiedad está separado por el carácter (:). Puede verse de una manera más gráfica de la siguiente manera:
selector (propiedad: valor)
El siguiente ejemplo le permite probar de inmediato lo indicado:
<html>
<head>
<style type="text/css">
h1 fcolor: green]
</style>
</head>
<body>
<h1> Esta cabecera es de color verde. </h1>
</body>
</html>
Alicia Durango
IT Campus Academy, 2015
https://scholar.google.es/scholar?hl=es&as_sdt=0%2C5&q=CSS&oq=#d=gs_qabs&t=1690788125262&u=%23p%3DmczWPGogJ60J
SELECTORES
El selector es normalmente el nombre de un elemento HTML pero también puede ser un selector de clase, un ID de selector o un selector o. de contexto (estos conceptos se aclararán más adelante). Si el valor que queremos dar a la propiedad tiene más de una palabra Buscar en este libro Buscar la puede poner entre comillas, como se muestra a continuación:
<html>
<head> <
sytle type="text/css">
p {font-family: "Comic Sans MS"} Publicado porf IT Campus Academy
</style>
</head>
</body>
</p>
</html>
Dentro de llaves ((...)) puede poner múltiples definiciones separadas por el carácter ”;" (punto y coma). El siguiente ejemplo define tres propiedades para el elemento <p>, que son la alineación, el color de texto y la fuente.
Alicia Durango
IT Campus Academy, 2015
https://scholar.google.es/scholar?hl=es&as_sdt=0%2C5&q=CSS&oq=#d=gs_qabs&t=1690788125262&u=%23p%3DmczWPGogJ60J
COMENTARIOS
Los comentarios son usados para añadir notas explicatorias o prevenir que el navegador interprete partes de la hoja de estilos. Los comentarios se pueden colocar en cualquier espacio en blanco que se permita en la hoja de estilos. La sintaxis de comentarios /
/ es usada para comentarios de una o múltiples líneas. No hay otra forma de especificar comentarios en hojas de estilos externas. Sin embargo, cuando se usa el elemento <style>, se puede usar <!-- --> para ocultar CSS para navegadores antiguos, aunque no es recomendable. Como en la mayoría de los lenguajes de programación que usan la sintaxis de comentarios /
/ estos no pueden ser anidados. En otras palabras, la primera instancia de
/ que siga a una instancia de /
cerrará el comentario..
https://developer.mozilla.org/es/docs/Web/CSS/Comments
ENLACE
Los enlaces se pueden convertir en hermosos elementos gracias a las propiedades CSS, y en esta lección aprenderemos a controlar y personalizar la apariencia de enlaces, además será la perfecta ocasión para conocer los tipos de enlaces existen y cómo trabajarlos. Recordemos que los enlaces de HTML por defecto se marcan en otro color y quedan subrayados; mediante CSS podemos modificar y controlar muchos aspectos como: color de texto, de fondo, tamaño y familia tipográfica, rellenos, bordes, márgenes, etc. es tan simple como apuntar dicho enlace y establecer las propiedades y sus valores
https://desarrolladoresweb.org/css/estilos-para-enlaces-css/
AGREAGAR CSS
Este es posiblemente el mejor método para enlazar CSS en HTML. Un sitio web suele constar de muchas páginas, por lo que tiene sentido guardar las instrucciones de diseño en un archivo separado. Esto permite una separación limpia entre el contenido y el diseño y facilita el mantenimiento. El archivo exportado está simplemente vinculado al documento HTML. Se guarda la hoja de estilos externa con la extensión .css y luego se utiliza una etiqueta de enlace para incluirla en el archivo HTML. En el siguiente ejemplo, el archivo CSS se llama stylesheet.css.
https://www.ionos.es/digitalguide/paginas-web/diseno-web/css-en-html/
l
DEFINICIÓN
•Los estilos aplicados directamente sobre un elemento HTML incluyen únicamente la sección de declaraciones, ya que el elemento seleccionado es sobre el que estamos actuando con el atributo style.
•Hasta la especificación CSS 2.1 había hace años poco más de 100 propiedades definidas, mientras que en CSS3 hace tiempo que se excedieron con creces las 200, aunque como adelantamos esta especificación se mantiene viva.
Cabrera, L. V. (2013). I
ntroducción a CSS. Recuperado de:
https://www.cs.us.es/cursos/bd/temas/BD-Tema-10.pdf
.