Stylesheet.NET
v1.2.0
stylesheet.net เป็นห้องสมุดข้ามแพลตฟอร์ม. NET ที่ออกแบบมาสำหรับ C#, vb.net และ F# นักพัฒนา ช่วยให้นักพัฒนาสามารถเขียนสไตล์ CSS โดยตรงในรหัสของพวกเขาไม่จำเป็นต้องใช้ไฟล์ชีทสไตล์ภายนอก Stylesheet.net ให้การใช้งานที่เขียนไว้ล่วงหน้าสำหรับคุณสมบัติ CSS ทั้งหมด, at-rules, คำหลักและองค์ประกอบอื่น ๆ , ไม่จำเป็นต้องมีการพึ่งพาเพิ่มเติม
ช่วยให้คุณสามารถส่งออก CSS ที่มีขนาดเล็กและไม่มีการระบุ
Stylesheet.net มีเอกสาร IntelliSense ที่กว้างขวาง
Install-Package Stylesheet.NET -Version 1.2.0
เราสามารถใช้ตรรกะการออกแบบ CSS ต่อไปนี้ภายในรหัส C# ของเราโดยใช้ 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" ) ; มีหลายวิธีในการส่งออก CSS ของคุณจาก 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 จัดเป็นองค์ประกอบหลักหลายอย่างแต่ละรายการมีฟังก์ชั่นเฉพาะสำหรับองค์ประกอบการจัดแต่งทรงผมในความต้องการของคุณ
div , span , h1 , id , class , Attribute ฯลฯ:hover , :focus และองค์ประกอบหลอกเช่น ::before และ ::after รวมองค์ประกอบและคลาสทั้งหมดรวมอยู่ด้วย@keyframes สำหรับภาพเคลื่อนไหว @media สำหรับเค้าโครงตอบสนองและ @import และ @layer สำหรับการรวมสไตล์ภายนอกและอื่น ๆ แสดงถึงตัวเลือกสไตล์องค์ประกอบ HTML ที่คุณต้องการจัดสไตล์เช่น div , span , h1 , id , class , Attribute ฯลฯ มันเป็นที่ตั้งของคุณสมบัติตัวเลือกองค์ประกอบทั้งหมด
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"
}
}คุณสมบัติเกือบทั้งหมดเป็นวัตถุคลาสจริงที่ยอมรับตัวเลือก enum เฉพาะและตัวเลือกเฉพาะของสตริง
แต่ละคุณสมบัติสามารถเขียนได้สี่วิธี
ตัวอย่าง:
Height = new Height ( "10px" ) Height = "10px" Height = new Height ( HeightOptions . Auto ) Height = HeightOptions . Auto ;ตัวเลือก enum คุณสมบัติทั้งหมดเริ่มต้นด้วยชื่อของทรัพย์สินของพวกเขาจากนั้นตามด้วย
Optionsเช่นHeight + Options = HeightOptionsคุณสมบัติทั้งหมดมีตัวเลือก enum ที่แสดงคำหลัก CSS ที่กำหนดไว้ล่วงหน้า
Stylesheet.net ให้การสนับสนุนอย่างกว้างขวางสำหรับ CSS pseudo-classes และองค์ประกอบหลอกช่วยให้คุณสามารถกำหนดรูปแบบสำหรับองค์ประกอบตามสถานะหรือการโต้ตอบของพวกเขา
Pseudos ทั้งหมดเริ่มต้นด้วย องค์ประกอบ จากนั้นจะถูกหลอกโดย ประเภทหลอก
ตัวอย่าง:
ElementHover,ElementAfter,ElementNthChildฯลฯ
ตัวอย่าง
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 คุณสามารถกำหนดข้อความค้นหาสื่อได้สองวิธี:
ผู้สร้างกฎ
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)มาสร้างการสืบค้นสื่อด้วย ตัวสร้างกฎเกณฑ์ :
@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 ทั้งหมดที่นำมาใช้ คุณสามารถห่วงโซ่พวกเขาตามที่คุณต้องการโดยไม่มีความยาว จำกัด
หากคุณไม่ต้องการใช้ ตัวสร้างกฎระเบียบ คุณสามารถใส่กฎ/เงื่อนไข 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 หรือหรือการรวมกันของสิ่งเหล่านี้
@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
@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 @layer at-Rule ใน CSS แนะนำแนวคิดของชั้นน้ำตกช่วยให้นักพัฒนาสามารถกำหนดลำดับความสำคัญของสไตล์ในกรณีที่กฎ CSS หลายตัวอาจใช้กับองค์ประกอบเดียวกัน
stylesheet.net เสนอคุณสมบัติขั้นสูงเช่น:
@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" ) ; @font-face css at-rule ช่วยให้นักพัฒนาสามารถเพิ่มแบบอักษรที่กำหนดเองลงในหน้าเว็บของพวกเขา แบบอักษรเหล่านี้สามารถโหลดได้จากเซิร์ฟเวอร์ระยะไกลหรือแบบอักษรที่ติดตั้งในเครื่องบนอุปกรณ์ของผู้ใช้
stylesheet.net ช่วยให้คุณสามารถเพิ่มแบบอักษรที่กำหนดเองได้สองวิธี
@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 ( ) ; คู่มือนี้ครอบคลุมพื้นฐานของ Stylesheet.net หากต้องการเรียนรู้เพิ่มเติมและค้นพบความสามารถอย่างเต็มที่อย่าลังเลที่จะทดลองและสำรวจคุณสมบัติที่แตกต่างกัน
