css en html
START
CONCEPTO
CSS
CSS (Cascading Style Sheets) es un lenguaje utilizado para definir la presentación de documentos HTML (o XML). Permite controlar el diseño, la apariencia y el formato de una página web.
APLICACION EN
PAGINAS WEB
- Dar estilo a elementos HTML
- Posicionamiento de elementos en una página web.
COMO SE UTILIZAN
CON HTML
Se utiliza mediante la inclusión de reglas de estilo dentro de un documento HTML, ya sea mediante etiquetas <style> en el <head> o mediante archivos externos de CSS enlazados con la etiqueta <link>.
QUE ETIQUETAS PUEDEN
UTILIZAR ATRIBUTOS CSS
- <h1 style="color: blue;">Encabezado 1</h1>
- <p style="font-size: 18px;">Este es un párrafo con tamaño de fuente 18px.</p>
- <div style="background-color: #f0f0f0; padding: 10px;">Div con fondo gris claro y relleno de 10px.</div> - <a href="#" style="text-decoration: none; color: green;">Enlace sin subrayado y color verde</a>
- <img src="imagen.jpg" style="width: 200px; height: 150px; border-radius: 50%;">Imagen con ancho y alto definidos y bordes redondeados.
- <ul style="list-style-type: circle;">
<li>Elemento 1</li>
<li>Elemento 2</li>
</ul>- <table style="border-collapse: collapse;">
<tr>
<td style="border: 1px solid black;">Celda 1</td>
<td style="border: 1px solid black;">Celda 2</td>
</tr>
</table> - <form style="margin: 20px;">
<input type="text" style="width: 200px;">
<input type="submit" style="background-color: blue; color: white;">
</form> - <span style="font-weight: bold;">Texto en negrita</span> - <button style="border: 1px solid black; background-color: yellow;">Botón con borde negro y fondo amarillo</button>
RELACION DE
CSS Y JAVASCRIPT
JavaScript se utiliza a menudo para manipular el contenido HTML y los estilos CSS dinámicamente, por ejemplo, cambiando estilos en respuesta a eventos del usuario.
- Separación de la estructura y la presentación.- Flexibilidad para estilizar múltiples páginas con una sola hoja de estilos. - Eficiencia en el rendimiento, ya que los estilos se aplican de manera uniforme a múltiples elementos.
DESVENTAJAS
- Curva de aprendizaje para dominar completamente todas las características.- Problemas de compatibilidad entre navegadores.
- Dificultad para mantener hojas de estilo grandes en proyectos complejos.
VENTAJAS
REFERENCIA
https://blog.hubspot.es/website/que-es-css#:~:text=CSS%20permite%20separar%20el%20contenido,la%20actualizaci%C3%B3n%20de%20los%20estilos.
CSS EN HTML
Isaac González
Created on April 16, 2024
Valeria Aglaed Absalón Hernández
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Vintage Photo Album
View
Nature Presentation
View
Halloween Presentation
View
Tarot Presentation
View
Vaporwave presentation
View
Women's Presentation
View
Geniaflix Presentation
Explore all templates
Transcript
css en html
START
CONCEPTO
CSS
CSS (Cascading Style Sheets) es un lenguaje utilizado para definir la presentación de documentos HTML (o XML). Permite controlar el diseño, la apariencia y el formato de una página web.
APLICACION EN
PAGINAS WEB
COMO SE UTILIZAN
CON HTML
Se utiliza mediante la inclusión de reglas de estilo dentro de un documento HTML, ya sea mediante etiquetas <style> en el <head> o mediante archivos externos de CSS enlazados con la etiqueta <link>.
QUE ETIQUETAS PUEDEN
UTILIZAR ATRIBUTOS CSS
- <h1 style="color: blue;">Encabezado 1</h1> - <p style="font-size: 18px;">Este es un párrafo con tamaño de fuente 18px.</p> - <div style="background-color: #f0f0f0; padding: 10px;">Div con fondo gris claro y relleno de 10px.</div> - <a href="#" style="text-decoration: none; color: green;">Enlace sin subrayado y color verde</a> - <img src="imagen.jpg" style="width: 200px; height: 150px; border-radius: 50%;">Imagen con ancho y alto definidos y bordes redondeados.
- <ul style="list-style-type: circle;"> <li>Elemento 1</li> <li>Elemento 2</li> </ul>- <table style="border-collapse: collapse;"> <tr> <td style="border: 1px solid black;">Celda 1</td> <td style="border: 1px solid black;">Celda 2</td> </tr> </table> - <form style="margin: 20px;"> <input type="text" style="width: 200px;"> <input type="submit" style="background-color: blue; color: white;"> </form> - <span style="font-weight: bold;">Texto en negrita</span> - <button style="border: 1px solid black; background-color: yellow;">Botón con borde negro y fondo amarillo</button>
RELACION DE
CSS Y JAVASCRIPT
JavaScript se utiliza a menudo para manipular el contenido HTML y los estilos CSS dinámicamente, por ejemplo, cambiando estilos en respuesta a eventos del usuario.
- Separación de la estructura y la presentación.- Flexibilidad para estilizar múltiples páginas con una sola hoja de estilos. - Eficiencia en el rendimiento, ya que los estilos se aplican de manera uniforme a múltiples elementos.
DESVENTAJAS
- Curva de aprendizaje para dominar completamente todas las características.- Problemas de compatibilidad entre navegadores. - Dificultad para mantener hojas de estilo grandes en proyectos complejos.
VENTAJAS
REFERENCIA
https://blog.hubspot.es/website/que-es-css#:~:text=CSS%20permite%20separar%20el%20contenido,la%20actualizaci%C3%B3n%20de%20los%20estilos.