Empezar
¡Estoy listo, Karen!
Alatorre Ramos Maria deJesús
Conceptos basicos de css
Mi tarea no se hace sola, Karen...
índice
¿Qué es una pagina web?
¿Para que se usa el estandar CSS?
¿Como usar CSS?
¿ Qué es el estandar CSS?
EJEMPLO
Tipos de CSS
¿Qué significa CSS?
GRACIAS
Estructura de CSS
. . .
¿Qué es una pagina web?
Una página web es un documento electrónico que se puede acceder a través de Internet. Consiste en información digital, como texto, imágenes, videos, enlaces, entre otros elementos, que están diseñados y organizados visualmente para que los usuarios puedan interactuar con ellos a través de un navegador web, como Chrome. En cuanto a su estructura básica, una página web suele estar escrita en lenguajes de marcado como HTML (HyperText Markup Language) para definir la estructura y el contenido, CSS (Cascading Style Sheets) para el diseño y la presentación visual, y JavaScript para la interactividad y funcionalidad.
. . .
rr
¿Qué es el estandar CSS?
El Cascading Style Sheets( hoja de estilo en cascada) es un lenguaje de programación que permite crear páginas web atractivas escrito en un lenguaje de marcado como puede ser HTML. Fue desarrollado por W3C en 1996.
Meow
Se trata de un lenguaje para el manejo del diseño, cambios, mejoras, presentación y personalización de páginas web. El concepto de "cascada" en CSS se refiere a la forma en que se aplican y priorizan los estilos,esta capacidad de cascada permite una gran flexibilidad en el diseño y la personalización de páginas web.
Meow
¿Que significa CSS?
Las siglas CSS corresponden a “Cascading Style Sheets”, cuyo significado es:
Cascading: Los estilos aplicados a los elementos de una página web se propagan de manera descendente a los elementos contenidos en ellos.
Style: Mediante las indicaciones CSS lo que hacemos es aplicar estilos visuales a los diferentes elementos de las páginas web.
Sheets: Cuando se generan los estilos de una página web se añaden en ficheros aparte u hojas con la extensión “.css”
¿Para que se usa el estandar CSS?
Con CSS, puedes definir el color, la fuente, el tamaño, el espaciado y la disposición de los elementos en una página web. También puedes crear diseños que se adaptan a diferentes tamaños de pantalla, lo que es crucial para la experiencia del usuario en dispositivos móviles , lo que facilita la creación de sitios web con un diseño consistente y flexible. De esta manera, HTML es la estructura de la web y CSS el diseño que define el aspecto de una página o su parte estética.
Tipos de CSS
CSS Interno
CSS lineal
CSS externo
Se define dentro de la sección <style> en el documento HTML, generalmente en la sección <head>. Los estilos definidos de esta manera afectan a todo el documento HTML. Por ejemplo: html <head> <style> p { color: blue; } </style> </head>
Se utiliza el atributo "style" dentro de una etiqueta HTML para aplicar estilos directamente a un elemento específico. Por ejemplo, <p style="color: red;">Este es un párrafo rojo</p>. Este enfoque es útil para estilos únicos que no se aplicarán a otros elementos.
Se almacena en un archivo separado con extensión .css y luego se vincula al documento HTML utilizando la etiqueta <link>. Esto permite reutilizar los estilos en múltiples páginas. Por ejemplo: En el archivo styles.css: css p { color: green; } En el archivo HTML: html <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head>
Estructura del Estandar CSS
Un archivo CSS consta de reglas de estilo que se aplican a elementos HTML específicos. La estructura general de una regla de estilo es la siguiente: css selector { propiedad: valor; propiedad: valor; /* Otras propiedades y valores */ } - Selector: Indica a qué elemento o elementos HTML se aplicarán los estilos. - Propiedad: Es la característica del estilo que se quiere modificar, como color, tamaño, margen, etc. - Valor: Es el valor que se le asigna a la propiedad, como "red" para color, "12px" para tamaño de fuente, etc.
Por ejemplo: css p { color: blue; font-size: 16px; } En este caso, el selector es "p", lo que significa que los estilos se aplicarán a todos los párrafos del documento HTML. Las propiedades "color" y "font-size" se están modificando con los valores "blue" y "16px"
¿Como usar CSS?
Para usar CSS, se pueden seguir estos pasos básicos: 1. Crear un archivo CSS: Abre un editor de texto como Notepad, Sublime Text, Visual Studio Code, u otro similar, y guarda el archivo con una extensión .css, por ejemplo, "styles.css". 2. Vincular el archivo CSS a tu documento HTML: En el archivo HTML, dentro de la sección <head>, agrega la siguiente línea para vincular el archivo CSS que creaste: html <link rel="stylesheet" type="text/css" href="styles.css"> Asegúrate de que la ruta en el atributo "href" coincida con la ubicación de tu archivo CSS. 3. Agregar reglas de estilo: En tu archivo CSS, puedes agregar reglas de estilo para personalizar la apariencia de los elementos HTML. Por ejemplo: css p { color: blue; font-size: 16px; } 4. Guardar y visualizar: Guarda tanto el archivo HTML como el archivo CSS en la misma carpeta y ábrelo en un navegador web para ver los estilos aplicados.
EJEMPLO DE USAR CSS
h1 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif } ul.navbar li { backround: white; margin: 0.5em 0; padding 0.3em; border-right: 1em solid black } ul.navbar a { text-decoration: none } a:link { color: blue } a:visited { color:purple } address { margin-top: 1em; padding-top: 1em; border-top: thin dotted } </style> </head>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Index</title>
<style type="text/css">
body {
padding-left:11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: black;
background-color: #A3B9EA}
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
GRACIAS
Eso fue todo de mi parte
Conceptos Basicos de CSS
Mari Alatorre
Created on April 19, 2024
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Corporate Christmas Presentation
View
Snow Presentation
View
Nature Presentation
View
Halloween Presentation
View
Tarot Presentation
View
Winter Presentation
View
Vaporwave presentation
Explore all templates
Transcript
Empezar
¡Estoy listo, Karen!
Alatorre Ramos Maria deJesús
Conceptos basicos de css
Mi tarea no se hace sola, Karen...
índice
¿Qué es una pagina web?
¿Para que se usa el estandar CSS?
¿Como usar CSS?
¿ Qué es el estandar CSS?
EJEMPLO
Tipos de CSS
¿Qué significa CSS?
GRACIAS
Estructura de CSS
. . .
¿Qué es una pagina web?
Una página web es un documento electrónico que se puede acceder a través de Internet. Consiste en información digital, como texto, imágenes, videos, enlaces, entre otros elementos, que están diseñados y organizados visualmente para que los usuarios puedan interactuar con ellos a través de un navegador web, como Chrome. En cuanto a su estructura básica, una página web suele estar escrita en lenguajes de marcado como HTML (HyperText Markup Language) para definir la estructura y el contenido, CSS (Cascading Style Sheets) para el diseño y la presentación visual, y JavaScript para la interactividad y funcionalidad.
. . .
rr
¿Qué es el estandar CSS?
El Cascading Style Sheets( hoja de estilo en cascada) es un lenguaje de programación que permite crear páginas web atractivas escrito en un lenguaje de marcado como puede ser HTML. Fue desarrollado por W3C en 1996.
Meow
Se trata de un lenguaje para el manejo del diseño, cambios, mejoras, presentación y personalización de páginas web. El concepto de "cascada" en CSS se refiere a la forma en que se aplican y priorizan los estilos,esta capacidad de cascada permite una gran flexibilidad en el diseño y la personalización de páginas web.
Meow
¿Que significa CSS?
Las siglas CSS corresponden a “Cascading Style Sheets”, cuyo significado es: Cascading: Los estilos aplicados a los elementos de una página web se propagan de manera descendente a los elementos contenidos en ellos. Style: Mediante las indicaciones CSS lo que hacemos es aplicar estilos visuales a los diferentes elementos de las páginas web. Sheets: Cuando se generan los estilos de una página web se añaden en ficheros aparte u hojas con la extensión “.css”
¿Para que se usa el estandar CSS?
Con CSS, puedes definir el color, la fuente, el tamaño, el espaciado y la disposición de los elementos en una página web. También puedes crear diseños que se adaptan a diferentes tamaños de pantalla, lo que es crucial para la experiencia del usuario en dispositivos móviles , lo que facilita la creación de sitios web con un diseño consistente y flexible. De esta manera, HTML es la estructura de la web y CSS el diseño que define el aspecto de una página o su parte estética.
Tipos de CSS
CSS Interno
CSS lineal
CSS externo
Se define dentro de la sección <style> en el documento HTML, generalmente en la sección <head>. Los estilos definidos de esta manera afectan a todo el documento HTML. Por ejemplo: html <head> <style> p { color: blue; } </style> </head>
Se utiliza el atributo "style" dentro de una etiqueta HTML para aplicar estilos directamente a un elemento específico. Por ejemplo, <p style="color: red;">Este es un párrafo rojo</p>. Este enfoque es útil para estilos únicos que no se aplicarán a otros elementos.
Se almacena en un archivo separado con extensión .css y luego se vincula al documento HTML utilizando la etiqueta <link>. Esto permite reutilizar los estilos en múltiples páginas. Por ejemplo: En el archivo styles.css: css p { color: green; } En el archivo HTML: html <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head>
Estructura del Estandar CSS
Un archivo CSS consta de reglas de estilo que se aplican a elementos HTML específicos. La estructura general de una regla de estilo es la siguiente: css selector { propiedad: valor; propiedad: valor; /* Otras propiedades y valores */ } - Selector: Indica a qué elemento o elementos HTML se aplicarán los estilos. - Propiedad: Es la característica del estilo que se quiere modificar, como color, tamaño, margen, etc. - Valor: Es el valor que se le asigna a la propiedad, como "red" para color, "12px" para tamaño de fuente, etc.
Por ejemplo: css p { color: blue; font-size: 16px; } En este caso, el selector es "p", lo que significa que los estilos se aplicarán a todos los párrafos del documento HTML. Las propiedades "color" y "font-size" se están modificando con los valores "blue" y "16px"
¿Como usar CSS?
Para usar CSS, se pueden seguir estos pasos básicos: 1. Crear un archivo CSS: Abre un editor de texto como Notepad, Sublime Text, Visual Studio Code, u otro similar, y guarda el archivo con una extensión .css, por ejemplo, "styles.css". 2. Vincular el archivo CSS a tu documento HTML: En el archivo HTML, dentro de la sección <head>, agrega la siguiente línea para vincular el archivo CSS que creaste: html <link rel="stylesheet" type="text/css" href="styles.css"> Asegúrate de que la ruta en el atributo "href" coincida con la ubicación de tu archivo CSS. 3. Agregar reglas de estilo: En tu archivo CSS, puedes agregar reglas de estilo para personalizar la apariencia de los elementos HTML. Por ejemplo: css p { color: blue; font-size: 16px; } 4. Guardar y visualizar: Guarda tanto el archivo HTML como el archivo CSS en la misma carpeta y ábrelo en un navegador web para ver los estilos aplicados.
EJEMPLO DE USAR CSS
h1 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif } ul.navbar li { backround: white; margin: 0.5em 0; padding 0.3em; border-right: 1em solid black } ul.navbar a { text-decoration: none } a:link { color: blue } a:visited { color:purple } address { margin-top: 1em; padding-top: 1em; border-top: thin dotted } </style> </head>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Index</title> <style type="text/css"> body { padding-left:11em; font-family: Georgia, "Times New Roman", Times, serif; color: black; background-color: #A3B9EA} ul.navbar { list-style-type: none; padding: 0; margin: 0; position: absolute; top: 2em; left: 1em; width: 9em }
GRACIAS
Eso fue todo de mi parte