Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientado a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
En este artículo, aprenderemos sobre los estilos en línea de Primer CSS. Los estilos en línea de Primer CSS se utilizan para dar CSS en línea para diseñar cualquier elemento.
Sintaxis:
<div style="INLINE_STYLING" >
Content
</div>
Ejemplo 1: En este ejemplo, estableceremos la altura y el ancho de una imagen usando estilos en línea.
HTML
<!DOCTYPE html> <html> <head> <meta name="viewport" content= "width = device-width, initial-scale = 1"> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@16.3.0/dist/primer.css"> </head> <body> <h1 style="color:green;"> GeeksforGeeks </h1> <h3>Primer CSS Inline Styles</h3> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220217090847/download3.png" width=400px height=400px> </body> </html>
Producción:
Ejemplo 2: en este ejemplo, hemos proporcionado diferentes estilos en línea a las diferentes etiquetas.
HTML
<!DOCTYPE html> <html> <head> <meta name="viewport" content= "width = device-width, initial-scale = 1"> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@16.3.0/dist/primer.css"> </head> <body> <h1 style="color:green;"> GeeksforGeeks </h1> <h3>Primer CSS Inline Styles</h3> <p style="text-align: center;"> I am centered Paragraph </p> <span style="color:red;"> I am a span tag </span> <h2 style="font-family:cursive;"> I am a cursive heading </h2> <p style="font-style: oblique;"> I am oblique Paragraph </p> </body> </html>
Producción:
Referencia: https://primer.style/css/principles#inline-styles
Publicación traducida automáticamente
Artículo escrito por akshitsaxenaa09 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA