Stylesheet.NET
v1.2.0
Stylesheet.net est une bibliothèque .NET multiplateforme conçue pour les développeurs C #, VB.NET et F #. Il permet aux développeurs d'écrire des styles CSS directement dans leur code, éliminant le besoin de fichiers de feuille de style externe. StylesHeet.net fournit des implémentations pré-écrites pour toutes les propriétés CSS, les rubriques, les mots clés et les autres éléments, éliminant le besoin de dépendances supplémentaires.
Il vous permet d'exporter des CSS minifiés et non mandifiés.
Stylesheet.net a de vastes documents Intellisense.
Install-Package Stylesheet.NET -Version 1.2.0
Nous pouvons implémenter la logique de style CSS suivante dans notre code C # à l'aide de Stylesheet.net .
@charset "UTF-8" ;
@font-face {
font-family : 'lilitaone-regular' ;
src : url ( 'font/lilitaone-regular.ttf' );
}
: root {
all : unset;
--color : blue;
}
. head . account {
height : 40 px !important ;
width : 40 px !important ;
position : absolute;
top : 12 px ;
left : 15 px ;
border-radius : 20 px ;
border : 2 px # 837A78 solid;
display : flex;
justify-content : center;
align-items : center;
-webkit-animation : flash;
-moz-animation : flash;
animation : flash;
}
# dot : hover {
height : 10 px ;
width : 10 px ;
position : absolute;
top : 16 px ;
right : 13 px ;
background-color : # F16842 ;
border-radius : 5 px ;
display : block;
}
@Keyframes flash{
0% , 50% , to {
opacity : 1 ;
}
55% {
opacity : 0.5;
}
25% , 75% {
opacity : 0;
}
}
@media ( min-width : 0 px ) and ( max-width : 319 px ){
a [ target = "_blank" ]{
position : absolute;
top : 20 px ;
left : 0 ;
z-index : 99 ;
}
} using StylesheetNET ;
CSSSheet sheet1 = new CSSSheet ( )
{
Charset = "UTF-8" ,
Root = new Root ( )
{
All = AllOptions . Unset ,
[ "--color" ] = "blue"
} ,
[ ".head .account" ] = new Element ( )
{
//Also u can write them this way too
//Height = new Height("10px"),
//Height = new Height(HeightOptions.Auto)
//Height = HeightOptions.Auto;
Height = "40px !important" ,
Width = "40px !important" ,
Position = PositionOptions . Absolute ,
Top = "12px" ,
Left = "15px" ,
BorderRadius = "20px" ,
Border = "2px #837A78 solid" ,
Display = DisplayOptions . Flex ,
JustifyContent = JustifyContentOptions . Center ,
AlignItems = AlignItemsOptions . Center ,
Animation = "flash"
} ,
[ "#dot" ] = new ElementHover ( )
{
Height = "10px" ,
Width = "10px" ,
Position = PositionOptions . Absolute ,
Top = "16px" ,
Right = "13px" ,
BackgroundColor = "#F16842" ,
BorderRadius = "5px" ,
Display = DisplayOptions . Block
} ,
[ AtRuleType . MediaQuery ] = new MediaQuery ( new AtRule ( ) . MinWidth ( "0px" ) . And . MaxWidth ( "319px" ) )
{
[ "a[target= " _blank " ]" ] = new Element ( )
{
Position = PositionOptions . Absolute ,
Top = "20px" ,
Left = "0" ,
ZIndex = "99"
}
} ,
[ AtRuleType . Keyframes ] = new Keyframes ( "flash" )
{
[ "0%, 50%, to" ] = new Keyframe ( )
{
Opacity = "1"
} ,
[ "55%" ] = new Keyframe ( )
{
Opacity = "0.5"
} ,
[ "25%, 75%" ] = new Keyframe ( )
{
Opacity = "0"
}
}
} ;
sheet . AddFontFace ( "lilitaone-regular" , "font/lilitaone-regular.ttf" ) ; Il existe plusieurs façons d'exporter votre CSS à partir de Stylesheet.net .
string unminified_css = sheet1 ;
//or
string unminified_css = sheet1 . ToString ( ) ;
string minified_css = sheet1 . ToString ( true ) ;
//or
string unminified_css = sheet1 . GenerateCss ( ) ;
string minified_css = sheet1 . GenerateCss ( true ) ; Stylesheet.net est organisé en plusieurs composants de base, chacun fournissant des fonctionnalités spécifiques pour les éléments de style dans vos exigences.
div , span , h1 , id , class , Attribute , etc.:hover , :focus et pseudo-éléments comme ::before et ::after . Tous les pseudos d'élément et de classe sont inclus .@keyframes pour les animations, @media pour les dispositions réactives et @import et @layer pour inclure des styles externes, et autres. Représente le sélecteur de style d'élément HTML que vous souhaitez styliser, tels que div , span , h1 , id , class , Attribute , etc. Il abrite toutes les propriétés du sélecteur d'éléments.
div {
height : 10 px ;
width : 10 px ;
position : absolute;
top : 16 px ;
right : 13 px ;
background-color : # F16842 ;
border-radius : 5 px ;
display : block;
} CSSSheet sheet = new CSSSheet ( )
{
[ "div" ] = new Element ( )
{
Height = "10px" ,
Width = "10px" ,
Position = PositionOptions . Absolute ,
Top = "16px" ,
Right = "13px" ,
BackgroundColor = "#F16842" ,
BorderRadius = "5px" ,
Display = DisplayOptions . Block
}
}StyleySheet.net vous permet également d'ajouter des propriétés personnalisées.
CSSSheet sheet = new CSSSheet ( )
{
[ "div" ] = new Element ( )
{
Height = "10px" ,
//Width = "10px",
[ "width" ] = "10px" ,
[ "my_custom_property" ] = "some css values"
}
}Presque toutes les propriétés sont en fait des objets de classe qui acceptent implicitement la chaîne et les options d'énumération spécifiques.
Chaque propriété peut être écrite de quatre manières.
Exemple:
Height = new Height ( "10px" ) Height = "10px" Height = new Height ( HeightOptions . Auto ) Height = HeightOptions . Auto ;Toutes les options d'énumération de propriété commencent par le nom de leur propriété, puis suivant par
Options. Par exemple,Height + Options = HeightOptions.Toutes les propriétés ont des options d'énumération qui représentent les mots clés CSS prédéfinis.
Stylesheet.net fournit un support approfondi pour les pseudo-classes CSS et les pseudo-éléments, vous permettant de définir des styles pour les éléments en fonction de leur état ou de leur interaction.
Tous les pseudos commencent par l'élément puis suivi par le type de pseudo .
Exemple:
ElementHover,ElementAfter,ElementNthChild, etc.
Exemple
div : hover {
color : red;
}
p :: after {
content : "Some contents" ;
width : 50 px ;
height : 75 px ;
}
. list : nth-child ( 3 ){
background-color : blue;
}
. text : not (. sup , p ){
text-align
: right;
} CSSSheet sheet1 = new CSSSheet ( )
{
[ "div" ] = new ElementHover ( )
{
Color = "red"
} ,
[ "p" ] = new ElementAfter ( )
{
Content = " " Some contents " " ,
Width = "50px" ,
Height = "75px"
} ,
[ ".list" ] = new ElementNthChild ( 3 )
{
BackgroundColor = "blue"
} ,
[ ".text" ] = new ElementNot ( ".sup, p" )
{
TextAlign = TextAlignOptions . Right
}
} ; Les rubriques permettent de définir des styles ou des comportements personnalisés à l'aide de directives comme @keyframes pour les animations, @media pour les dispositions réactives et @import et @layer pour inclure des styles externes, et autres.
Les requêtes multimédias sont un composant essentiel de la conception Web réactive. Ils permettent la création de dispositions dynamiques qui s'adaptent à différentes tailles de fenêtre, garantissant une expérience utilisateur optimale sur divers appareils.
Dans Stylesheet.net, vous pouvez définir la requête multimédia de deux manières:
Constructeur en règle
AT-Rule Builder vous aide à définir des règles personnalisées à l'aide du modèle de chaîne de code.
L'impliance du constructeur de règles se convertit en chaîne, vous n'avez donc pas besoin de lancer ou de vous convertir en chaîne.
string condition = new AtRule ( ) . Screen . And . MinWidth ( "0px" ) . And . MaxWidth ( "319px" ) ;
//Will give you:
// screen and (min-width: 0px) and (max-width: 319px)Créons une requête multimédia avec un constructeur de règles :
@media only screen and ( max-width : 600 px ){
div {
width : 100 % ;
height : 100 % ;
display : grid;
}
} CSSSheet sheet1 = new CSSSheet ( )
{
[ AtRuleType . MediaQuery ] = new MediaQuery ( new AtRule ( ) . Only . Screen . And . MaxWidth ( "600px" ) )
{
[ "div" ] = new Element ( )
{
Width = "100%" ,
Height = "100%" ,
Display = DisplayOptions . Grid
}
}
} ;AT-Rule Builder a toutes les règles CSS mises en œuvre. Vous pouvez les enchaîner comme vous le souhaitez sans limite de longueur.
Si vous ne souhaitez pas utiliser le constructeur de règles , vous pouvez simplement mettre vos propres règles / conditions CSS en tant que chaîne.
@media only screen and ( max-width : 600 px ){
div {
width : 100 % ;
height : 100 % ;
display : grid;
}
} CSSSheet sheet1 = new CSSSheet ( )
{
[ AtRuleType . MediaQuery ] = new MediaQuery ( "only screen and (max-width: 600px)" )
{
[ "div" ] = new Element ( )
{
Width = "100%" ,
Height = "100%" ,
Display = DisplayOptions . Grid
}
}
} ;N'ajoutez pas
@mediacar la bibliothèque l'ajoute pour vous.
Le @keyframes CSS AT-RULE permet aux développeurs de créer des animations complexes en définissant des styles pour des points spécifiques dans la séquence d'animation.
Stylesheet.net divise cela en deux, Keyframes et Keyframe .
Un objet Keyframes est class qui contient des waypoints. Un waypoint est un seul objet Keyframe .
Une keyframe dans une autre main est un seul waypoint. Un waypoint peut être de toute valeur pour percent ou from et to ou une combinaison de celles-ci.
@Keyframes flash{
0% , 50% , to {
opacity : 1 ;
}
55% {
opacity : 0.5;
}
25% , 75% {
opacity : 0;
}
} CSSSheet sheet1 = new CSSSheet ( )
{
[ AtRuleType . Keyframes ] = new Keyframes ( "flash" )
{
[ "0%, 50%, to" ] = new Keyframe ( )
{
Opacity = "1"
} ,
[ "55%" ] = new Keyframe ( )
{
Opacity = "0.5"
} ,
[ "25%, 75%" ] = new Keyframe ( )
{
Opacity = "0"
}
}
} ; Le @import AT-Rule dans CSS permet l'inclusion de styles des feuilles de style externes dans la feuille de style actuelle.
Le style peut être importé de local ou URL.
@import 'path/file.css' ;
@import url ( 'someurl/file.css' ) ;
. head {
height : 40 px !important ;
width : 40 px !important ;
} CSSSheet sheet1 = new CSSSheet ( ) ;
sheet1 [ ".head" ] = new Element ( )
{
Height = "40px !important" ,
Width = "40px !important" ,
} ;
Import from_Path = new Import ( "path/file.css" ) ;
sheet1 . Import ( from_Path ) ;
Import from_url = new Import ( new Url ( "someurl/file.css" ) ) ;
sheet1 . Import ( from_url ) ;Vous pouvez supprimer une importation ou effacer toutes les importations.
sheet . RemoveImport ( import_to_remove ) ; //remove an import
sheet . ClearImport ( ) ; //remove all imports Le Rule @layer dans CSS présente le concept de couches en cascade, permettant aux développeurs de définir l'ordre de priorité pour les styles dans les cas où plusieurs règles CSS pourraient s'appliquer au même élément.
Stylesheet.net offre des fonctionnalités avancées comme:
@layer layer1 {
@layer layer2 {
. head {
display : flex;
}
}
. head {
height : 100 % ;
width : 100 % ;
}
}
@layer layer3 {
. head {
display : block;
}
}
. head {
height : 40 px !important ;
width : 40 px !important ;
} CSSSheet sheet1 = new CSSSheet ( ) ;
sheet1 [ ".head" ] = new Element ( )
{
Height = "40px !important" ,
Width = "40px !important" ,
} ;
Layer layer1 = new Layer ( )
{
[ ".head" ] = new Element ( )
{
Height = "100%" ,
Width = "100%" ,
}
} ;
Layer layer2 = new Layer ( )
{
[ ".head" ] = new Element ( )
{
Display = DisplayOptions . Flex
}
} ;
Layer layer3 = new Layer ( )
{
[ ".head" ] = new Element ( )
{
Display = DisplayOptions . Block
}
} ;
layer1 . AddLayer ( "layer2" , layer2 ) ; //nest layer2 in layer1
sheet1 . AddLayer ( "layer1" , layer1 ) ; //add layer1 to sheet1
sheet1 . AddLayer ( "layer3" , layer3 ) ; //add layer3 to sheet1Vous pouvez supprimer une couche ou effacer toutes les calques d'une feuille ou d'une couche. Vous pouvez supprimer une couche par sa couche sous-jacente ou par son nom de calque.
layer1 . RemoveLayer ( "layer2" ) ;
sheet . RemoveLayer ( "layer1" ) ;
sheet . RemoveLayer ( "layer3" ) ; Le @font-face CSS AT-RULE permet aux développeurs d'ajouter des polices personnalisées dans leurs pages Web. Ces polices peuvent être chargées à partir d'un serveur distant ou d'une police installée localement sur l'appareil de l'utilisateur.
Stylesheet.net vous permet d'ajouter des polices personnalisées de deux manières.
@font-face {
font-family : "lilitaone-regular" ;
src : url ( 'font/lilitaone-regular.ttf' );
}
@font-face {
font-family : "NoyhR-Black" ;
src : url ( "font/Noyh R Bold/NoyhR-Black.ttf" ) format ( "truetype" );
}
. head {
height : 40 px !important ;
width : 40 px !important ;
} CSSSheet sheet1 = new CSSSheet ( ) ;
sheet1 [ ".head" ] = new Element ( )
{
Height = "40px !important" ,
Width = "40px !important" ,
} ;
sheet1 . AddFontFace ( "lilitaone-regular" , "font/lilitaone-regular.ttf" ) ;
Dictionary < string , string > _font = new Dictionary < string , string > ( )
{
{ "font-family" , " " NoyhR-Black " " } ,
{ "src" , "url( " font/Noyh R Bold/NoyhR-Black.ttf " ) format( " truetype " )" }
} ;
sheet1 . AddFontFace ( _font ) ;Vous pouvez supprimer une police par FontFamily ou vous pouvez tout effacer.
sheet1 . RemoveFontFace ( "lilitaone-regular" ) ;
sheet1 . ClearFontFace ( ) ; Ce guide couvre les bases de Stylesheet.net . Pour en savoir plus et découvrir ses capacités complètes, n'hésitez pas à expérimenter et à explorer ses différentes caractéristiques.
