Home-theater-designers
CSS pertenece a un triplete de tecnologías web centrales junto con HTML y JavaScript. Con una planificación cuidadosa, CSS contribuye a separar las preocupaciones. Los recursos independientes controlan la estructura de un contenido, su presentación y su comportamiento.
¿puedes agregar ram a macbook pro?
Las hojas de estilo juegan un papel importante en la accesibilidad, escalabilidad e incluso en el rendimiento web. Como autor de contenido o diseñador web, le dan control sobre cómo los dispositivos procesan el contenido. Desde el diseño hasta el tamaño y el color de la fuente, CSS transforma el contenido en páginas atractivas.
¿Qué aspecto tiene CSS?
CSS es un gran lenguaje: ¡hay muchas cosas diferentes para diseñar! Pero su sintaxis es sencilla, con solo unas pocas reglas que aprender.
Los elementos HTML tienen varias propiedades que CSS puede diseñar. los color La propiedad establece el color de primer plano (por ejemplo, texto). El tamaño de la fuente depende del tamaño de fuente propiedad.
Cada propiedad se puede establecer en un valor admitido. La asignación de un valor a una propiedad es una 'declaración'. Generalmente, se ven así:
|_+_|
Por ejemplo:
|_+_|Los valores para diferentes propiedades pueden verse muy diferentes, incluso valores para la misma propiedad. Por ejemplo, aquí hay dos formas más de escribir la declaración anterior:
|_+_|
Cómo se combinan HTML y hojas de estilo
Puede combinar HTML y CSS de diferentes formas, cada una con sus ventajas.
Estilos de escritura en línea
El método más simple es adjuntar declaraciones de estilo directamente a un elemento en el archivo HTML. Puede hacer esto usando el estilo atributo así:
|_+_|
Si bien diseñar elementos en línea como este puede ser conveniente, tiene varios inconvenientes. Para empezar, complica el HTML, lo que dificulta la lectura de un vistazo. También es difícil de mantener: imagine un documento largo en el que queremos establecer el color de cada párrafo. Esto es CSS, pero no 'Hojas de estilo'.
Incrustar estilos en la cabeza
Puede comenzar a ver cómo se ve una hoja de estilo con el segundo mecanismo, incrustación . Con este enfoque, reunimos todas las declaraciones de estilo dentro de un estilo elemento en el cabeza de nuestro documento. Se verá así:
|_+_|Sin embargo, nuestras instrucciones de estilo necesitan un poco más de detalle que antes. Dado que los hemos movido al principio, cada regla ya no está asociada con un elemento. Podríamos haber declarado color rojo , pero ¿qué debería tener ese color?
Aquí es donde entran en juego los selectores de CSS. Nos permiten apuntar a partes específicas de la página y definir su estilo en un solo lugar, utilizando esta sintaxis:
|_+_|Por ejemplo, para aplicar un estilo al texto de los párrafos en azul, podemos especificar lo siguiente:
|_+_|En este ejemplo, el selector es simplemente pag , que coincide con todos los elementos de párrafo de nuestro documento. Todo el texto será de color azul, siempre que esté en El último método para cubrir es vincular. Este es, con mucho, el enfoque más útil y uno por el que debe optar la mayor parte del tiempo. En lugar de incrustar reglas CSS en el estilo elemento directamente en su documento, puede moverlos a un archivo separado. Pegue este código dentro del etiquetas de su archivo HTML para vincular su hoja de estilo externa. Con el método vinculado, estamos aprovechando un poder central de CSS: la separación de preocupaciones. Toda la información semántica, lo que significa el contenido, está contenida en el documento HTML. El estilo, lo que parece, está en un archivo separado, la hoja de estilo. Estos son solo algunos de los beneficios de esta separación: Ha aprendido mucho sobre estilos y hojas de estilo, pero ¿qué pasa con la parte en cascada de CSS? La cascada es lo que decide qué estilos usar cuando hay varias hojas de estilo presentes. Has visto cómo un autor puede especificar estilos para su contenido. Pero otra característica de CSS es que también les da a los lectores y fabricantes de navegadores algo que decir al respecto. Es posible que ya se haya preguntado acerca de los estilos predeterminados. Por ejemplo, ¿cómo H1 ¿El elemento parece grande y en negrita, incluso sin hojas de estilo de autor? Esto es gracias a un conjunto de reglas especiales que componen la hoja de estilo del agente de usuario. Estas reglas son aplicadas inicialmente por su navegador web a cada página que visita. La cascada especifica que se aplica una hoja de estilo de autor después de los estilos de agente de usuario. Si nuestro navegador dice que los encabezados están en negrita pero el autor de la página declara que los encabezados de esta página son claros, entonces terminarán siendo claros. Hay otra fuente de hojas de estilo que le entrega cierto control al lector. Cualquier usuario de la web puede, en teoría, mantener una hoja de estilo de usuario con reglas personalizadas. Estos se encuentran en el medio: las reglas de usuario anularán la configuración predeterminada del navegador, pero serán anuladas por los estilos de autor. Lamentablemente, la compatibilidad con las hojas de estilo de los usuarios nunca se ha generalizado. Puede utilizar hojas de estilo en diferentes contextos, más allá de la pantalla. los media atributo del Enlace El elemento define a qué tipos de medios se aplica la hoja de estilo. Por ejemplo, puede definir un hoja de estilo para imprimir usando marcado como el siguiente: Puede recopilar estilos comunes en una hoja de estilo global y estilos específicos de medios en archivos separados. Incluso hay tipos de medios que se adaptan a las presentaciones auditivas o braille de su contenido. CSS es una herramienta vital para mejorar la accesibilidad. Relacionado: Cómo navegar por la web si es ciego o tiene problemas de visión Sitios como Wikipedia usan CSS para controlar su estilo de impresión, ocultar elementos no deseados y simplificar el diseño. Las hojas de estilo en cascada cubren mucho: la cascada, la herencia, los selectores, las fuentes, los medios, etc. Pero su poder permite la web moderna. Este es un medio que proporciona funciones integradas de reutilización, flexibilidad y accesibilidad. Para ver todo el poder de CSS y cuánto tiene que ofrecer, consulte nuestra hoja de trucos que cubre todas las propiedades esenciales de CSS3. Domina la sintaxis CSS esencial con nuestra hoja de trucos de propiedades CSS3. Bobby es un entusiasta de la tecnología que trabajó como desarrollador de software durante la mayor parte de dos décadas. Es un apasionado de los juegos, trabaja como editor de reseñas en Switch Player Magazine y está inmerso en todos los aspectos de la publicación en línea y el desarrollo web. ¡Únase a nuestro boletín de noticias para obtener consejos técnicos, reseñas, libros electrónicos gratuitos y ofertas exclusivas!Vinculación de una hoja de estilo externa
El poder de CSS
Explicando la cascada
cómo insertar una imagen en una palabra sin mover el texto
Orientación a diferentes medios
CSS hace que HTML se vea bien
anuncios apareciendo en la pantalla de inicio de Android
Cuota Cuota Pío Correo electrónico La hoja de trucos de las propiedades esenciales de CSS3
Sobre el Autor Bobby Jack(58 Artículos publicados) Suscríbete a nuestro boletín