Stylesheet.NET

أنماط ورقة

STYLESHEET.NET هي مكتبة .NET عبر منصة مصممة لمطوري C# و VB.NET و F#. يمكّن المطورين من كتابة أنماط CSS مباشرة في الكود الخاص بهم ، مما يلغي الحاجة إلى ملفات أوراق الأنماط الخارجية. يوفر STYLESHEET.NET تطبيقات مكتوبة مسبقًا لجميع خصائص CSS ، وحدات AT ، والكلمات الرئيسية ، والعناصر الأخرى ، مما يلغي الحاجة إلى تبعيات إضافية.

يسمح لك بتصدير كل من CSS المصغرة وغير المحددة.

الأنماط. NET لديها وثائق Intellisense واسعة النطاق.

 Install-Package Stylesheet.NET -Version 1.2.0

بداية سريعة

يمكننا تنفيذ منطق تصميم CSS التالي ضمن رمز C# الخاص بنا باستخدام 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 ;
}
}

ج#

  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" ) ; 

تصدير CSS

هناك عدة طرق لتصدير CSS الخاص بك من ورقة الأنماط .

ج#

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

الوثائق

يتم تنظيم StylSheet.net في عدة مكونات أساسية ، كل منها يوفر وظائف محددة لعناصر التصميم في متطلباتك.

• العناصر: تمثل محددات نمط HTML Elements التي تريد نمطها ، مثل div ، span ، h1 ، id ، class ، Attribute وما إلى ذلك.
• Pseudos: توفير التصميم على أساس حالات العناصر أو التفاعلات ، بما في ذلك الفئات الزائفة الشائعة مثل :hover ، :focus ، والعناصر الزائفة مثل ::before و ::after . يتم تضمين جميع العناصر والكاذب الفئة .
• AT-Rules: السماح بتحديد الأنماط المخصصة أو السلوك باستخدام توجيهات مثل @keyframes للرسوم المتحركة ، @media للتخطيطات المستجيبة و @import و @layer لتضمين الأنماط الخارجية ، وغيرها.

عنصر

يمثل محدد نمط العنصر HTML الذي تريد نمطه ، مثل div ، span ، h1 ، id ، class ، Attribute ، إلخ. ويضم جميع خصائص محدد العناصر.

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;
}

ج#

  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 أيضًا إضافة خصائص مخصصة.

ج#

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

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

جميع الخصائص تقريبًا هي في الواقع كائنات فئة تقبل ضمنيًا خيارات السلسلة وخيارات التعداد المحددة.

يمكن كتابة كل خاصية بأربع طرق.

مثال:

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

تبدأ جميع خيارات تعداد الخصائص باسم ممتلكاتهم ثم يتبعها Options . على سبيل المثال ، Height + Options = HeightOptions .

جميع الخصائص لها خيارات التعداد التي تمثل الكلمات الرئيسية المحددة مسبقًا.

الزائفة

يوفر StylSheet.net دعمًا واسع النطاق للفئات الزائفة CSS والعناصر الزائفة ، مما يتيح لك تحديد الأنماط للعناصر القائمة على حالتها أو تفاعلها.

تبدأ جميع pseudos بعنصر ثم folowed بواسطة نوع الزائفة .

مثال: ElementHover ، ElementAfter ، ElementNthChild إلخ.

مثال

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;
}

ج#

  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 بتحديد الأنماط المخصصة أو السلوك باستخدام توجيهات مثل @keyframes للرسوم المتحركة ، @media للتخطيطات المستجيبة و @import و @layer لتضمين الأنماط الخارجية ، وغيرها.

استفسارات وسائل الإعلام

استفسارات الوسائط هي مكون أساسي لتصميم الويب المستجيب. إنها تتيح إنشاء تخطيطات ديناميكية تتكيف مع أحجام المنافذ المختلفة ، مما يضمن تجربة مستخدم مثالية عبر مختلف الأجهزة.

في STYLESHEET.NET ، يمكنك تحديد استعلام الوسائط بطريقتين:

1. باني القسمة

   يساعدك At-Rule Builder في تحديد القواعد المخصصة باستخدام نمط سلسلة التعليمات البرمجية.

   يتحول At-Rule Builder الضمني إلى سلسلة ، لذلك لا تحتاج إلى إلقاء أو تحويل السلسلة.

    string condition = new AtRule ( ) . Screen . And . MinWidth ( "0px" ) . And . MaxWidth ( "319px" ) ;
   
   //Will give you:
   // screen and (min-width: 0px) and (max-width: 319px)

   دعنا ننشئ استعلامًا للوسائط باستخدام منشئ القسمة :

   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 جميع قواعد CSS. يمكنك سلسلة ما تريد مع عدم وجود حد.

2. CSS مخصصة

إذا كنت لا ترغب في استخدام منشئ At-Rule ، فيمكنك ببساطة وضع قواعد/شروط CSS الخاصة بك كسلسلة.

CSS

 @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
        }
    }

} ;

لا تضيف @media حيث تضيف المكتبة ذلك لك.

إطارات المفاتيح

يمكّن @keyframes css at-rule المطورين من إنشاء رسوم متحركة معقدة من خلال تحديد أنماط لنقاط محددة ضمن تسلسل الرسوم المتحركة.

STYLESHEET.NET يقسم هذا إلى قسمين ، Keyframes و Keyframe .

كائن Keyframes هو class تحمل نقاط الطريق. نقطة الطريق هي كائن Keyframe واحد.

keyframe في ناحية أخرى هو نقطة طريق واحدة. يمكن أن تكون نقطة الطريق ذات قيمة percent أو from أو to أو مزيج من هذه.

CSS

 @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"
        }
    }
} ; 

يستورد

يتيح @import at-Rule في CSS تضمين أنماط من أوراق الأنماط الخارجية إلى ورقة الأنماط الحالية.

يمكن استيراد النمط من عنوان URL المحلي أو عناوين URL.

CSS

 @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 ) ;

يمكنك إزالة استيراد أو مسح جميع الواردات.

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

طبقات

يقدم at- @layer في CSS مفهوم طبقات تتالي ، مما يسمح للمطورين بتحديد ترتيب الأسبقية للأنماط في الحالات التي قد تنطبق فيها قواعد CSS المتعددة على نفس العنصر.

يوفر STYLESHEED.NET ميزات متقدمة مثل:

• الطبقات المتداخلة: يمكن ترتيب الطبقات بشكل هرمي ، مما يسمح بتصميم وحدات ومنظمة.
• التحميل الشرطي: يمكن تحميل الطبقات بشكل انتقائي بناءً على قواعد أو شروط محددة ، وتعزيز الأداء وقدرات التصميم الديناميكي.

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 ;
}

ج#

 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

يمكنك إزالة طبقة أو مسح جميع الطبقات في ورقة أو طبقة. يمكنك إزالة طبقة من الطبقة الأساسية أو باسم طبقتها.

ج#

 layer1 . RemoveLayer ( "layer2" ) ;

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

خط

يتيح Rule CSS @font-face للمطورين إضافة خطوط مخصصة إلى صفحات الويب الخاصة بهم. يمكن تحميل هذه الخطوط إما من خادم بعيد أو خط مثبت محليًا على جهاز المستخدم.

يتيح لك STYLESHEET.NET إضافة خطوط مخصصة بطريقتين.

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 ;
}

ج#

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

يمكنك إزالة Fontface بواسطة Fontfamily أو يمكنك مسح كل شيء.

ج#

 sheet1 . RemoveFontFace ( "lilitaone-regular" ) ;

 sheet1 . ClearFontFace ( ) ; 

وأكثر

يغطي هذا الدليل أساسيات ورقة الأنماط . لمعرفة المزيد واكتشاف قدراتها الكاملة ، لا تتردد في التجربة واستكشاف ميزاتها المختلفة.