Beranda>Kode sumber .NET>Kategori lainnya
Unduh

Stylesheet.net

Stylesheet.net adalah perpustakaan .NET cross-platform yang dirancang untuk pengembang C#, VB.NET, dan F#. Ini memungkinkan pengembang untuk menulis gaya CSS secara langsung dalam kode mereka, menghilangkan kebutuhan untuk file stylesheet eksternal. Stylesheet.net menyediakan implementasi pra-tertulis untuk semua properti CSS, at-aturan, kata kunci, dan elemen lainnya, menghilangkan kebutuhan akan dependensi tambahan.

Ini memungkinkan Anda untuk mengekspor CSS yang terpini dan tidak berkin -.

Stylesheet.net memiliki dokumentasi intelisense yang luas. 

 Install-Package Stylesheet.NET -Version 1.2.0

Awal yang cepat

Kami dapat mengimplementasikan logika gaya CSS berikut dalam kode C# kami menggunakan stylesheet.net .

CSS 
 @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 ;
}
}
C# 
  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" ) ;

Ekspor CSS

Ada beberapa cara untuk mengekspor CSS Anda dari stylesheet.net .

C# 
  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 ) ;

Dokumentasi

Stylesheet.net diatur ke dalam beberapa komponen inti, masing -masing menyediakan fungsionalitas spesifik untuk elemen penataan dalam kebutuhan Anda.

  • Elemen: Mewakili pemilih gaya elemen HTML yang ingin Anda gaya, seperti div , span , h1 , id , class , Attribute dll.
  • Pseudos: Berikan gaya berdasarkan keadaan elemen atau interaksi, termasuk kelas semu seperti :hover , :focus , dan elemen semu seperti ::before dan ::after . Semua elemen dan pseudo kelas disertakan .
  • At-aturan: memungkinkan untuk mendefinisikan gaya atau perilaku khusus menggunakan arahan seperti @keyframes untuk animasi, @media untuk tata letak responsif dan @import dan @layer untuk memasukkan gaya eksternal, dan lainnya.

Elemen

Mewakili pemilih gaya elemen HTML yang ingin Anda gaya, seperti div , span , h1 , id , class , Attribute dll. Ini menampung semua properti pemilih elemen.

CSS 
 div {
    height : 10 px ;
    width : 10 px ;
    position : absolute;
    top : 16 px ;
    right : 13 px ;
    background-color : # F16842 ;
    border-radius : 5 px ;
    display : block;
}
C# 
  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 juga memungkinkan Anda untuk menambahkan properti khusus.

C# 
 CSSSheet sheet = new CSSSheet ( )
  {
   [ "div" ] = new Element ( )
   {
      Height = "10px" ,
      //Width = "10px",

      [ "width" ] = "10px" ,
      [ "my_custom_property" ] = "some css values"
   }
  }

Hampir semua properti sebenarnya adalah objek kelas yang secara implisit menerima string dan opsi enum spesifik mereka.

Setiap properti dapat ditulis dengan empat cara.

Contoh: 

 Height = new Height ( "10px" )
 Height = "10px"
 Height = new Height ( HeightOptions . Auto )
 Height = HeightOptions . Auto ;

Semua opsi enum properti dimulai dengan nama properti mereka kemudian diikuti oleh Options . EG Height + Options = HeightOptions .

Semua properti memiliki opsi enum yang mewakili kata kunci CSS yang telah ditentukan sebelumnya.

Semu

Stylesheet.net memberikan dukungan luas untuk kelas pseudo CSS dan elemen semu, memungkinkan Anda untuk mendefinisikan gaya untuk elemen berdasarkan keadaan atau interaksi mereka.

Semua semu dimulai dengan elemen kemudian diikuti oleh jenis semu .

Contoh: ElementHover , ElementAfter , ElementNthChild dll.

Contoh

CSS 
 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;
}
C# 
  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-aturan

At-aturan memungkinkan untuk mendefinisikan gaya atau perilaku khusus menggunakan arahan seperti @keyframes untuk animasi, @media untuk tata letak responsif dan @import dan @layer untuk memasukkan gaya eksternal, dan lainnya.

Kueri media

Kueri media adalah komponen penting dari desain web yang responsif. Mereka memungkinkan pembuatan tata letak dinamis yang beradaptasi dengan berbagai ukuran viewport, memastikan pengalaman pengguna yang optimal di berbagai perangkat.

Di stylesheet.net Anda dapat mendefinisikan kueri media dalam dua cara:

  1. Pembangun at-aturan

    Pembuat At-aturan membantu Anda mendefinisikan aturan khusus menggunakan pola rantai kode.

    Implicity pembangun at-aturan dikonversi menjadi string, jadi Anda tidak perlu melemparkan atau mengonversi ke string. 

     string condition = new AtRule ( ) . Screen . And . MinWidth ( "0px" ) . And . MaxWidth ( "319px" ) ;

//Will give you:
// screen and (min-width: 0px) and (max-width: 319px)

    Mari Buat Permintaan Media Dengan Pembangun At-aturan :

    CSS 
     @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 memiliki semua aturan CSS yang diterapkan. Anda dapat menggerogoti mereka seperti yang Anda inginkan tanpa batas panjangnya.

  1. CSS khusus

Jika Anda tidak ingin menggunakan pembangun at-aturan , Anda dapat dengan cukup menempatkan aturan/ketentuan CSS Anda sendiri sebagai string.

CSS 
 @media only screen and ( max-width : 600 px ){
  div {
        width : 100 % ;
        height : 100 % ;
        display : grid;
    }
}
C# 
 CSSSheet sheet1 = new CSSSheet ( )
{

    [ AtRuleType . MediaQuery ] = new MediaQuery ( "only screen and (max-width: 600px)" )
    {
        [ "div" ] = new Element ( )
        {
            Width = "100%" ,
            Height = "100%" ,
            Display = DisplayOptions . Grid
        }
    }

} ;

Jangan tambahkan @media saat perpustakaan menambahkan itu untuk Anda.

Kunci Kunci

At-aturan @keyframes CSS memberdayakan pengembang untuk membuat animasi yang kompleks dengan mendefinisikan gaya untuk poin spesifik dalam urutan animasi.

Stylesheet.net membagi ini menjadi dua, Keyframes dan Keyframe .

Objek Keyframes adalah class yang memiliki titik arah. Waypoint adalah objek Keyframe tunggal.

keyframe di sisi lain adalah titik arah tunggal. Titik arah dapat memiliki nilai apa pun yang merupakan percent atau from dan to atau kombinasi dari ini.

CSS 
 @Keyframes flash{
0% , 50% , to   {
        opacity : 1 ;

}
55%   {
        opacity : 0.5;

}
25% , 75%   {
        opacity : 0;

}
}
C# 
 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"
        }
    }
} ;

Impor

@import at-aturan di CSS memungkinkan dimasukkannya gaya dari stylesheet eksternal ke dalam stylesheet saat ini.

Gaya dapat diimpor dari lokal atau URL.

CSS 
 @import 'path/file.css' ;
@import url ( 'someurl/file.css' ) ;

. head {
        height : 40 px !important ;
        width : 40 px !important ;
}
C# 
 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 ) ;

Anda dapat menghapus impor atau menghapus semua impor. 

 sheet . RemoveImport ( import_to_remove ) ; //remove an import
sheet . ClearImport ( ) ; //remove all imports

Lapisan

@layer at-aturan di CSS memperkenalkan konsep lapisan kaskade, memungkinkan pengembang untuk menentukan urutan prioritas untuk gaya dalam kasus di mana beberapa aturan CSS mungkin berlaku untuk elemen yang sama.

Stylesheet.net menawarkan fitur canggih seperti:

  • Lapisan bersarang: Lapisan dapat diatur secara hierarkis, memungkinkan gaya modular dan terorganisir.
  • Pemuatan bersyarat: Lapisan dapat dimuat secara selektif berdasarkan aturan atau kondisi tertentu, meningkatkan kinerja dan kemampuan gaya dinamis.
CSS 
 @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 ;
}
C# 
 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 sheet1

Anda dapat menghapus lapisan atau menghapus semua lapisan dalam lembar atau lapisan. Anda dapat menghapus lapisan dengan lapisan yang mendasarinya atau dengan nama lapisannya.

C# 
 layer1 . RemoveLayer ( "layer2" ) ;

sheet . RemoveLayer ( "layer1" ) ;
sheet . RemoveLayer ( "layer3" ) ;

Fontface

At-aturan CSS @font-face memungkinkan pengembang untuk menambahkan font khusus ke halaman web mereka. Font ini dapat dimuat dari server jarak jauh atau font yang diinstal secara lokal pada perangkat pengguna.

Stylesheet.net memungkinkan Anda untuk menambahkan font khusus dalam dua cara.

CSS 
 @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 ;
}
C# 
 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 ) ;

Anda dapat menghapus fontface dengan fontFamily atau Anda dapat menghapus semuanya.

C# 
 sheet1 . RemoveFontFace ( "lilitaone-regular" ) ;

 sheet1 . ClearFontFace ( ) ;

Dan lebih banyak lagi

Panduan ini mencakup dasar -dasar stylesheet.net . Untuk mempelajari lebih lanjut dan menemukan kemampuan penuhnya, jangan ragu untuk bereksperimen dan mengeksplorasi berbagai fiturnya.

Memperluas
Informasi Tambahan
Aplikasi Terkait
Direkomendasikan untuk Anda
Informasi Terkait Semua