Stylesheet.NET
v1.2.0
Stylesheet.net ist eine plattformübergreifende .NET-Bibliothek, die für C #-, VB.NET- und F# -entwickler entwickelt wurde. Es ermöglicht Entwicklern, CSS -Stile direkt in ihren Code zu schreiben, wodurch die Notwendigkeit externer Stylesheet -Dateien beseitigt wird. Stylesheet.net bietet vorgeschriebene Implementierungen für alle CSS-Eigenschaften, -Artum, Schlüsselwörter und andere Elemente und beseitigt die Notwendigkeit zusätzlicher Abhängigkeiten.
Es ermöglicht Ihnen, sowohl minifizierte als auch nicht minifizierte CSS zu exportieren.
Stylesheet.net verfügt über umfangreiche IntelliSense -Dokumentationen.
Install-Package Stylesheet.NET -Version 1.2.0
Wir können die folgende CSS -Styling -Logik in unserem C# -Code mit stilesheet.net implementieren.
@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" ) ; Es gibt verschiedene Möglichkeiten, Ihr CSS von stylesheet.net zu exportieren.
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 ist in mehreren Kernkomponenten organisiert und bietet jeweils spezifische Funktionen für das Stylingelemente in Ihren Anforderungen.
div , span , h1 , id , class , Attribute usw.:hover :focus und Pseudo-Elemente wie ::before und ::after . Alle Element- und Klassenpseudos sind enthalten .@keyframes für Animationen, @media für Responsive Layouts und @import und @layer für die Einbeziehung externer Stile und andere. Repräsentiert den HTML -Elementstil -Selektor, den Sie stylen möchten, wie z. B. div , span , h1 , id , class , Attribute usw. Es beherbergt alle Eigenschaften der Element Selector.
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
}
}Mit Styleetheet.net können Sie auch benutzerdefinierte Eigenschaften hinzufügen.
CSSSheet sheet = new CSSSheet ( )
{
[ "div" ] = new Element ( )
{
Height = "10px" ,
//Width = "10px",
[ "width" ] = "10px" ,
[ "my_custom_property" ] = "some css values"
}
}Fast alle Eigenschaften sind tatsächlich Klassenobjekte, die implizit String und ihre spezifischen Enumoptionen akzeptieren.
Jede Eigenschaft kann auf vier Arten geschrieben werden.
Beispiel:
Height = new Height ( "10px" ) Height = "10px" Height = new Height ( HeightOptions . Auto ) Height = HeightOptions . Auto ;Alle Optionen für Immobilienumzusagen beginnen mit dem Namen ihrer Eigenschaft und folgen dann nach
Options. ZBHeight + Options = HeightOptions.Alle Eigenschaften haben Enum -Optionen, die die vordefinierten CSS -Schlüsselwörter darstellen.
Stylesheet.net bietet umfassende Unterstützung für CSS-Pseudoklassen und Pseudo-Elemente, mit denen Sie Stile für Elemente auf der Grundlage ihres Zustands oder ihrer Interaktion definieren können.
Alle Pseudos beginnen mit dem Element, das dann vom Pseudo -Typ aufgenommen wird.
Beispiel:
ElementHover,ElementAfter,ElementNthChildusw.
Beispiel
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
}
} ; AT-RULES ermöglicht das Definieren von benutzerdefinierten Stilen oder Verhaltensweisen anhand von Direktiven wie @keyframes für Animationen, @media für reaktionsschnelle Layouts und @import und @layer für die Einbeziehung externer Stile und andere.
Medienabfragen sind ein wesentlicher Bestandteil des reaktionsschnellen Webdesigns. Sie ermöglichen die Erstellung von dynamischen Layouts, die sich an verschiedene Ansichtsfenster anpassen, und gewährleisten eine optimale Benutzererfahrung auf verschiedenen Geräten.
In Stylesheet.net können Sie Medienabfrage auf zwei Arten definieren:
AT-RULE BUILDER
AT-RULE Builder hilft Ihnen dabei, benutzerdefinierte Regeln mithilfe des Codekettenmusters zu definieren.
AT-RULE Builder Implictical konvertiert in String, sodass Sie nicht in die String wirken oder konvertieren müssen.
string condition = new AtRule ( ) . Screen . And . MinWidth ( "0px" ) . And . MaxWidth ( "319px" ) ;
//Will give you:
// screen and (min-width: 0px) and (max-width: 319px)Lassen Sie uns Medienabfrage mit AT-RULE Builder erstellen:
@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 hat alle CSS-Regeln implementiert. Sie können sie so ketten, wie Sie möchten, ohne Länge.
Wenn Sie den AT-Rule-Builder nicht verwenden möchten, können Sie einfach Ihre eigenen CSS-Regeln/-bedingungen als Zeichenfolge einsetzen.
@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
}
}
} ;Fügen Sie
@medianicht hinzu, da die Bibliothek das für Sie hinzufügt.
Die @keyframes CSS AT-Rule ermöglicht es Entwicklern, komplexe Animationen zu erstellen, indem sie Stile für bestimmte Punkte innerhalb der Animationssequenz definieren.
StyleSheet.net unterteilt dies in zwei, Keyframes und Keyframe .
Ein Keyframes -Objekt ist class , die Wegpunkte enthält. Ein Wegpunkt ist ein einzelnes Keyframe -Objekt.
Ein keyframe auf der anderen Seite ist ein einziger Wegpunkt. Ein Wegpunkt kann von jedem Wert von percent oder from und to oder zu einer Kombination von diesen sein.
@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"
}
}
} ; Die @import AT-Rule in CSS ermöglicht die Einbeziehung von Stilen aus externen Stylesheets in das aktuelle Stylesheet.
Der Stil kann aus lokaler oder URL importiert werden.
@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 ) ;Sie können einen Import entfernen oder alle Importe löschen.
sheet . RemoveImport ( import_to_remove ) ; //remove an import
sheet . ClearImport ( ) ; //remove all imports Das @layer AT-RULE in CSS führt das Konzept der Kaskadenschichten ein und ermöglicht es Entwicklern, die Vorrangsreihenfolge für Stile in Fällen zu definieren, in denen mehrere CSS-Regeln für dasselbe Element gelten können.
Stylesheet.net bietet erweiterte Funktionen wie:
@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 sheet1Sie können eine Schicht entfernen oder alle Schichten in einem Blatt oder einer Ebene löschen. Sie können eine Schicht durch ihre darunter liegende Ebene oder durch ihren Ebenennamen entfernen.
layer1 . RemoveLayer ( "layer2" ) ;
sheet . RemoveLayer ( "layer1" ) ;
sheet . RemoveLayer ( "layer3" ) ; Mit dem @font-face CSS AT-RULE können Entwickler ihre Webseiten benutzerdefinierte Schriftarten hinzufügen. Diese Schriftarten können entweder aus einem Remote -Server oder einer lokal installierten Schriftart auf dem Gerät des Benutzers geladen werden.
Mit Stylesheet.net können Sie benutzerdefinierte Schriftarten auf zwei Arten hinzufügen.
@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 ) ;Sie können eine Schriftart per Schriftfamilie entfernen oder alle klären.
sheet1 . RemoveFontFace ( "lilitaone-regular" ) ;
sheet1 . ClearFontFace ( ) ; Dieser Leitfaden deckt die Grundlagen von Stylesheet.net ab. Um mehr zu erfahren und seine vollständigen Fähigkeiten zu entdecken, können Sie gerne experimentieren und seine unterschiedlichen Merkmale erkunden.
