lenguaje CSS
iNTRODUCCIÓN
trata del lenguaje que define cómo se visualizará un documento escrito en código, generalmente en HTML. En otras palabras, permite que los diseñadores web puedan modificar una página sin necesidad de reescribir su código cada vez que lo necesiten, facilitando enormemente su trabajo. El HTML sería la base de la página mientras que el CSS definiría su aspecto final y permitiría una personalización rápida.
Es un lenguaje que se creó, en primera instancia, para evitar que los desarrolladores web tardaran horas escribiendo el código correspondiente a las diferentes fuentes y colores de letra, un proceso extremadamente pesado y repetitivo. Con la aparición del CSS, este trabajo y muchos otros pueden pasar a hacerse en minutos. Actualmente, prácticamente la mayoría de los sitios web emplean el CSS. Esto permite que cualquier persona pueda personalizar una página web sin necesidad de emplear horas incluso en las tareas más simples.
¿QUÉ ES CSS?
CSS son las siglas en inglés para «hojas de estilo en cascada» (Cascading Style Sheets). Básicamente, es un lenguaje que maneja el diseño y presentación de las páginas web, es decir, cómo lucen cuando un usuario las visita. Funciona junto con el lenguaje HTML que se encarga del contenido básico de los sitios.
+INFO
¿Para qué sirve CSS?
Con CSS, se pueden crear reglas para decirle al sitio web cómo se quiere mostrar la información y guardar los comandos para elementos de estilo (como fuentes, colores, tamaños, etc.) separados de los que configuran el contenido.
Además, se pueden crear formatos específicos útiles para comunicar ideas y producir experiencias más agradables, en el aspecto visual, para los usuarios del sitio web.
¿Qué es un selector?
Un selector CSS es la primera parte de una regla CSS. Es un patrón de elementos y otros términos que indican al navegador qué elementos HTML se seleccionan para aplicarles una regla que incluye los valores de las propiedades CSS. El elemento o los elementos seleccionados por el selector se denominan sujeto del selector.
selectores básicos en CSS
Elemento como selector
Selector global
Selector descendente
Selector de ID
Selector de clase
Selector de clase
selectores avanzados en CSS
selector de hijos
Selector adyacente
Selector hermano
Selector de atributos
unidades de medida
Las medidas en CSS se emplean, entre otras, para definir la altura, anchura y márgenes de los elementos y para establecer el tamaño de letra del texto. Todas las medidas se indican como un valor numérico entero o decimal seguido de una unidad de medida (sin ningún espacio en blanco entre el número y la unidad de medida).
CSS divide las unidades de medida en dos grupos: absolutas y relativas. Las medidas relativas definen su valor en relación con otra medida, por lo que para obtener su valor real, se debe realizar alguna operación con el valor indicado. Las unidades absolutas establecen de forma completa el valor de una medida, por lo que su valor real es directamente el valor indicado.
colores en CSS
Los colores en CSS se pueden indicar de cinco formas diferentes: palabras clave, colores del sistema, RGB hexadecimal, RGB numérico y RGB porcentual. Aunque el método más habitual es el del RGB hexadecimal, a continuación se muestran todas las alternativas que ofrece CSS.
Palabras clave
CSS define 17 palabras clave para referirse a los colores básicos. Las palabras se corresponden con el nombre en inglés de cada color:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow
ANCHURA EN CSS
La propiedad CSS que controla la anchura de la caja de los elementos se denomina width.La propiedad width no admite valores negativos y los valores en porcentaje se calculan a partir de la anchura de su elemento padre. El valor inherit indica que la anchura del elemento se hereda de su elemento padre. El valor auto, que es el que se utiliza si no se establece de forma explícita un valor a esta propiedad, indica que el navegador debe calcular automáticamente la anchura del elemento, teniendo en cuenta sus contenidos y el sitio disponible en la página.
ALTURA EN CSS
La propiedad CSS que controla la altura de los elementos se denomina height. Al igual que sucede con width, la propiedad height no admite valores negativos. Si se indica un porcentaje, se toma como referencia la altura del elemento padre. Si el elemento padre no tiene una altura definida explícitamente, se asigna el valor auto a la altura. El valor inherit indica que la altura del elemento se hereda de su elemento padre. El valor auto, que es el que se utiliza si no se establece de forma explícita un valor a esta propiedad, indica que el navegador debe calcular automáticamente la altura del elemento, teniendo en cuenta sus contenidos y el sitio disponible en la página.
BORDES EN CSS
En CSS es posible especificar el aspecto que tendrán los bordes de cualquier elemento HTML, pudiendo incluso, dar diferentes características a zonas particulares del borde, como por ejemplo, el borde superior, el borde izquierdo, el borde derecho o el borde inferior. En primer lugar, border-color establece el color del borde, de la misma forma que lo hicimos en apartados anteriores de colores. En segundo lugar, con border-width podemos establecer la anchura o grosor del borde utilizando tanto palabras clave predefinidas como un tamaño concreto con cualquier tipo de las unidades ya vistas.
TEXTO EN CSS
Texto CSS es el módulo de CSS que define cómo realizar la manipulación de elementos de texto como los saltos de línea, la justificación, la alineación, la gestión de espacios en blanco y las transformaciones de texto.
ENLACES EN CSS
Los estilos más sencillos que se pueden aplicar a los enlaces son los que modifican su tamaño de letra, su color y la decoración del texto del enlace. Utilizando las propiedades text-decoration y font-weight
conclusión
Las CSS constituyen una valiosa herramienta de diseño
Facilitan la tarea de edición y mantenimiento de los sitios en la Web
Facilitan el acceso a la información a todas las personas
Se complementan con otros lenguajes para lograr una mejor comunicación
Permiten estar mejor preparados para los cambios que se producirán
referencias bibliograficas
- https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Selectors
- https://uniwebsidad.com/libros/css/capitulo-3/colores
- https://www.arimetrics.com/glosario-digital/css
- https://www.aluracursos.com/blog/guia-de-unidades-en-css
- https://uniwebsidad.com/libros/css/capitulo-4/anchura-y-altura#google_vignette
- https://uniwebsidad.com/libros/css/capitulo-2/selectores-basicos
- https://uniwebsidad.com/libros/css/capitulo-2/selectores-avanzados#google_vignette
Como su nombre indica, el selector global se trata de un selector que influencia todos los elementos en la hoja de estilo. Este tipo de selector universal puede ser muy útil a la hora de elegir la tipografía general de tu página web, pues con un solo selector puedes cambiar la totalidad de los elementos.
LLos selectores de clase son imprescindibles para diseñar páginas web complejas, ya que permiten disponer de una precisión total al seleccionar los elementos. Además, estos selectores permiten reutilizar los mismos estilos para varios elementos diferentes.
Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento. El selector del siguiente ejemplo selecciona todos los elementos <span> de la página que se encuentren dentro de un elemento <p>
El atributo ID se utiliza comúnmente para enlazar dentro de la página web y viajar a un punto concreto de un elemento usando su identificador. Al igual que en el caso del enlace, el atributo ID puede usarse para identificar partes de un elemento. En su rol de selector o # css selector , el atributo ID nos ayuda a aplicar una decisión de estilo a todo elemento que cuente con dicha identificación. Este selector se reconoce por empezar con el símbolo de numeral o hashtag (#).
En CSS podemos utilizar todos los elementos como selectores. Al usarlos como selector, le aplicamos la regla que queramos a todos los elementos de ese tipo. Por ejemplo, si ponemos p como selector y luego decidimos que tenga una propiedad de color gris, todos los párrafos en la hoja de estilo serán de color gris.
- Abreviado en sus siglas en inglés, Cascading Style Sheets, que significa hojas de estilo en cascada
- Con CSS, los diseñadores y los usuarios pueden crear hojas de estilo que definen cómo aparecen los diferentes elementos, como los encabezados y los enlaces. Estas hojas de estilo se pueden aplicar a cualquier página Web, y nos permite optimizarla para mejorar su posicionamiento.
El atributo class funciona de manera muy similar al atributo ID. Reconocido por empezar con un punto (.clase), este selector se aplicará a todo elemento que contenga el atributo clase determinado. Basta con que al inicio de la hoja de estilo escribas la regla con tu selector de clase y la verás aplicada a todo elemento con dicho atributo. Esto permite aplicar propiedades a más de un tipo de elemento con un solo selector.
CEl selector hermano viene representado por el signo virgulilla (~):
h1 ~ h2 {
color: red; En un selector menos restrictivo que el selector adyacente porque selecciona todos los elementos que son hermanos a otro. En el ejemplo anterior, pondría en rojo tanto Subtítulo como Otro subtítulo.
Se trata de un selector similar al selector descendente, pero muy diferente en su funcionamiento. Se utiliza para seleccionar un elemento que es hijo directo de otro elemento y se indica mediante el "signo de mayor que" (>)
El selector adyacente utiliza el signo + y su sintaxis es: elemento1 + elemento2 { ... } La explicación del comportamiento de este selector no es sencilla, ya que selecciona todos los elementos de tipo elemento2 que cumplan las dos siguientes condiciones: elemento1 y elemento2 deben ser hermanos, por lo que su elemento padre debe ser el mismo.
elemento2 debe aparecer inmediatamente después de elemento1 en el código HTML de la página..
El último tipo de selectores avanzados lo forman los selectores de atributos, que permiten seleccionar elementos HTML en función de sus atributos y/o valores de esos atributos.
Los selectores básicos en CSS son una parte importante en el diseño de una página web porque determinan a qué elementos y atributos se les aplicará una regla.
Los selectores son la primera parte de una regla CSS y determinan a qué se le aplicará dicha regla. Existen varios selectores básicos en CSS: el elemento como selector, el selector de ID, el selector de clase y el selector global.
¿para qué sirven?
Los selectores CSS avanzados (combinadores CSS) permiten realizar tareas más específicas e incluso contabilizar o seleccionar elementos por su posición.
lenguaje CSS
Shelsi Díaz
Created on February 13, 2024
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Geniaflix Presentation
View
Vintage Mosaic Presentation
View
Shadow Presentation
View
Newspaper Presentation
View
Zen Presentation
View
Audio tutorial
View
Pechakucha Presentation
Explore all templates
Transcript
lenguaje CSS
iNTRODUCCIÓN
trata del lenguaje que define cómo se visualizará un documento escrito en código, generalmente en HTML. En otras palabras, permite que los diseñadores web puedan modificar una página sin necesidad de reescribir su código cada vez que lo necesiten, facilitando enormemente su trabajo. El HTML sería la base de la página mientras que el CSS definiría su aspecto final y permitiría una personalización rápida. Es un lenguaje que se creó, en primera instancia, para evitar que los desarrolladores web tardaran horas escribiendo el código correspondiente a las diferentes fuentes y colores de letra, un proceso extremadamente pesado y repetitivo. Con la aparición del CSS, este trabajo y muchos otros pueden pasar a hacerse en minutos. Actualmente, prácticamente la mayoría de los sitios web emplean el CSS. Esto permite que cualquier persona pueda personalizar una página web sin necesidad de emplear horas incluso en las tareas más simples.
¿QUÉ ES CSS?
CSS son las siglas en inglés para «hojas de estilo en cascada» (Cascading Style Sheets). Básicamente, es un lenguaje que maneja el diseño y presentación de las páginas web, es decir, cómo lucen cuando un usuario las visita. Funciona junto con el lenguaje HTML que se encarga del contenido básico de los sitios.
+INFO
¿Para qué sirve CSS?
Con CSS, se pueden crear reglas para decirle al sitio web cómo se quiere mostrar la información y guardar los comandos para elementos de estilo (como fuentes, colores, tamaños, etc.) separados de los que configuran el contenido. Además, se pueden crear formatos específicos útiles para comunicar ideas y producir experiencias más agradables, en el aspecto visual, para los usuarios del sitio web.
¿Qué es un selector?
Un selector CSS es la primera parte de una regla CSS. Es un patrón de elementos y otros términos que indican al navegador qué elementos HTML se seleccionan para aplicarles una regla que incluye los valores de las propiedades CSS. El elemento o los elementos seleccionados por el selector se denominan sujeto del selector.
selectores básicos en CSS
Elemento como selector
Selector global
Selector descendente
Selector de ID
Selector de clase
Selector de clase
selectores avanzados en CSS
selector de hijos
Selector adyacente
Selector hermano
Selector de atributos
unidades de medida
Las medidas en CSS se emplean, entre otras, para definir la altura, anchura y márgenes de los elementos y para establecer el tamaño de letra del texto. Todas las medidas se indican como un valor numérico entero o decimal seguido de una unidad de medida (sin ningún espacio en blanco entre el número y la unidad de medida). CSS divide las unidades de medida en dos grupos: absolutas y relativas. Las medidas relativas definen su valor en relación con otra medida, por lo que para obtener su valor real, se debe realizar alguna operación con el valor indicado. Las unidades absolutas establecen de forma completa el valor de una medida, por lo que su valor real es directamente el valor indicado.
colores en CSS
Los colores en CSS se pueden indicar de cinco formas diferentes: palabras clave, colores del sistema, RGB hexadecimal, RGB numérico y RGB porcentual. Aunque el método más habitual es el del RGB hexadecimal, a continuación se muestran todas las alternativas que ofrece CSS. Palabras clave CSS define 17 palabras clave para referirse a los colores básicos. Las palabras se corresponden con el nombre en inglés de cada color: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow
ANCHURA EN CSS
La propiedad CSS que controla la anchura de la caja de los elementos se denomina width.La propiedad width no admite valores negativos y los valores en porcentaje se calculan a partir de la anchura de su elemento padre. El valor inherit indica que la anchura del elemento se hereda de su elemento padre. El valor auto, que es el que se utiliza si no se establece de forma explícita un valor a esta propiedad, indica que el navegador debe calcular automáticamente la anchura del elemento, teniendo en cuenta sus contenidos y el sitio disponible en la página.
ALTURA EN CSS
La propiedad CSS que controla la altura de los elementos se denomina height. Al igual que sucede con width, la propiedad height no admite valores negativos. Si se indica un porcentaje, se toma como referencia la altura del elemento padre. Si el elemento padre no tiene una altura definida explícitamente, se asigna el valor auto a la altura. El valor inherit indica que la altura del elemento se hereda de su elemento padre. El valor auto, que es el que se utiliza si no se establece de forma explícita un valor a esta propiedad, indica que el navegador debe calcular automáticamente la altura del elemento, teniendo en cuenta sus contenidos y el sitio disponible en la página.
BORDES EN CSS
En CSS es posible especificar el aspecto que tendrán los bordes de cualquier elemento HTML, pudiendo incluso, dar diferentes características a zonas particulares del borde, como por ejemplo, el borde superior, el borde izquierdo, el borde derecho o el borde inferior. En primer lugar, border-color establece el color del borde, de la misma forma que lo hicimos en apartados anteriores de colores. En segundo lugar, con border-width podemos establecer la anchura o grosor del borde utilizando tanto palabras clave predefinidas como un tamaño concreto con cualquier tipo de las unidades ya vistas.
TEXTO EN CSS
Texto CSS es el módulo de CSS que define cómo realizar la manipulación de elementos de texto como los saltos de línea, la justificación, la alineación, la gestión de espacios en blanco y las transformaciones de texto.
ENLACES EN CSS
Los estilos más sencillos que se pueden aplicar a los enlaces son los que modifican su tamaño de letra, su color y la decoración del texto del enlace. Utilizando las propiedades text-decoration y font-weight
conclusión
Las CSS constituyen una valiosa herramienta de diseño Facilitan la tarea de edición y mantenimiento de los sitios en la Web Facilitan el acceso a la información a todas las personas Se complementan con otros lenguajes para lograr una mejor comunicación Permiten estar mejor preparados para los cambios que se producirán
referencias bibliograficas
Como su nombre indica, el selector global se trata de un selector que influencia todos los elementos en la hoja de estilo. Este tipo de selector universal puede ser muy útil a la hora de elegir la tipografía general de tu página web, pues con un solo selector puedes cambiar la totalidad de los elementos.
LLos selectores de clase son imprescindibles para diseñar páginas web complejas, ya que permiten disponer de una precisión total al seleccionar los elementos. Además, estos selectores permiten reutilizar los mismos estilos para varios elementos diferentes.
Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento. El selector del siguiente ejemplo selecciona todos los elementos <span> de la página que se encuentren dentro de un elemento <p>
El atributo ID se utiliza comúnmente para enlazar dentro de la página web y viajar a un punto concreto de un elemento usando su identificador. Al igual que en el caso del enlace, el atributo ID puede usarse para identificar partes de un elemento. En su rol de selector o # css selector , el atributo ID nos ayuda a aplicar una decisión de estilo a todo elemento que cuente con dicha identificación. Este selector se reconoce por empezar con el símbolo de numeral o hashtag (#).
En CSS podemos utilizar todos los elementos como selectores. Al usarlos como selector, le aplicamos la regla que queramos a todos los elementos de ese tipo. Por ejemplo, si ponemos p como selector y luego decidimos que tenga una propiedad de color gris, todos los párrafos en la hoja de estilo serán de color gris.
El atributo class funciona de manera muy similar al atributo ID. Reconocido por empezar con un punto (.clase), este selector se aplicará a todo elemento que contenga el atributo clase determinado. Basta con que al inicio de la hoja de estilo escribas la regla con tu selector de clase y la verás aplicada a todo elemento con dicho atributo. Esto permite aplicar propiedades a más de un tipo de elemento con un solo selector.
CEl selector hermano viene representado por el signo virgulilla (~): h1 ~ h2 { color: red; En un selector menos restrictivo que el selector adyacente porque selecciona todos los elementos que son hermanos a otro. En el ejemplo anterior, pondría en rojo tanto Subtítulo como Otro subtítulo.
Se trata de un selector similar al selector descendente, pero muy diferente en su funcionamiento. Se utiliza para seleccionar un elemento que es hijo directo de otro elemento y se indica mediante el "signo de mayor que" (>)
El selector adyacente utiliza el signo + y su sintaxis es: elemento1 + elemento2 { ... } La explicación del comportamiento de este selector no es sencilla, ya que selecciona todos los elementos de tipo elemento2 que cumplan las dos siguientes condiciones: elemento1 y elemento2 deben ser hermanos, por lo que su elemento padre debe ser el mismo. elemento2 debe aparecer inmediatamente después de elemento1 en el código HTML de la página..
El último tipo de selectores avanzados lo forman los selectores de atributos, que permiten seleccionar elementos HTML en función de sus atributos y/o valores de esos atributos.
Los selectores básicos en CSS son una parte importante en el diseño de una página web porque determinan a qué elementos y atributos se les aplicará una regla. Los selectores son la primera parte de una regla CSS y determinan a qué se le aplicará dicha regla. Existen varios selectores básicos en CSS: el elemento como selector, el selector de ID, el selector de clase y el selector global.
¿para qué sirven?
Los selectores CSS avanzados (combinadores CSS) permiten realizar tareas más específicas e incluso contabilizar o seleccionar elementos por su posición.