प्रौद्योगिकी साझेदारी

CSS [व्यावहारिक पाठ्यक्रमः] (2024 नवीनतम संस्करणम्)

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

CSS इत्यस्य परिचयः

CSS इतिझरनाशैलीपत्रिकाः(Cascading Style Sheets इत्यस्य संक्षिप्तनाम) इत्यस्य उपयोगः HTML पृष्ठानां शैलीं सटीकरूपेण नियन्त्रयितुं भवति यत् चित्रात्मकसूचनाः उत्तमरीत्या प्रदर्शयितुं वा शीतलं/मैत्रीपूर्णं अन्तरक्रियाशीलं अनुभवं उत्पादयति

没有必要让所有浏览器都显示得一模一样的，好的浏览器有更好的显示，糟糕的浏览器就只有普通的显示，这才是对用户更负责任的做法。

  • 1

CSS सञ्चिकायाः ​​प्रत्ययः अस्ति .css

टिप्पणी

/* 注释的内容 */

  • 1

शैल्याः योजयितुं त्रयः उपायाः

1. शैली इनलाइन शैल्याः

<span style="color: red">红色文字</span>

  • 1

अत्र चित्रविवरणं सम्मिलितं कुर्वन्तु

2. CSS शैलीचयनकस्य माध्यमेन योजयन्तु

https://blog.csdn.net/weixin_41192489/लेख/विवरण/140226382

3. उत्तराधिकारः

पात्रस्य अन्तः तत्त्वानि पात्रे योजितशैल्याः प्राप्नुयुः

  <div style="color: red">
    <p>我是容器内的元素，并没有直接添加样式，但也会变红！</p>
  </div>

  • 1
  • 2
  • 3
  • पाठशैल्याः विशेषताः सर्वे वंशानुगताः सन्ति । एतेषु विशेषतासु अन्तर्भवन्ति: color, text- इत्यनेन आरभ्य, line इत्यनेन आरभ्य, font- इत्यनेन आरभ्य ।
  • Box, positioning, layout विशेषताः च उत्तराधिकारं प्राप्तुं न शक्यन्ते ।

अन्तिमशैल्याः निर्णयः कः करोति ?

यतो हि तत्त्वेषु शैल्याः बहवः स्रोताः सन्ति, यथा ब्राउजर् पूर्वनिर्धारितशैल्याः, शैली इनलाइनशैल्याः, विभिन्नैः CSS चयनकर्ताभिः योजिताः शैल्याः, मातापितृतत्त्वेभ्यः उत्तराधिकारयुक्ताः शैल्याः च, अन्तिमशैली अनेकशैल्याः मध्ये सर्वाधिकप्राथमिकतायुक्ता भविष्यति शैली।

CSS शैली प्राथमिकता

https://blog.csdn.net/weixin_41192489/लेख/विवरण/139720467

शैल्याः आवश्यकाः मूलभूताः

CSS लम्बाई एकक

https://blog.csdn.net/weixin_41192489/लेख/विवरण/140236423

CSS कार्याणि

https://blog.csdn.net/weixin_41192489/लेख/विवरण/140318834

box model

https://blog.csdn.net/weixin_41192489/लेख/विवरण/102411612

  • ऊर्ध्वता पङ्क्ति-उच्चता च द्वौ अपि पेटीम् उद्घाटयितुं शक्नुवन्ति, परन्तु पृष्ठभूमिचित्रं पेटीम् उद्घाटयितुं न शक्नोति ।

इनलाइन एलिमेण्ट्स् विषये द्रष्टव्यानि वस्तूनि

  • अन्तःरेखातत्त्वानि केवलं आरम्भे अन्ते च आन्तरिकबाह्यमार्जिनं प्रदर्शयितुं शक्नुवन्ति, यथाशक्ति परिहर्तव्यानि, अतः अन्तःरेखातत्त्वानां कृते आन्तरिकबाह्यमार्जिनं न सेट् कुर्वन्तु

  • इनलाइन-तत्त्वानां वेष्टनस्य अनन्तरं सीमानां प्रदर्शनं स्तम्भितं अव्यवस्थितं च भविष्यति, अतः इनलाइन-तत्त्वानां कृते सीमाः न सेट् कुर्वन्तु!

  • यदा भवन्तः inline element मध्ये borders/inner and outer margins योजयितुं प्रवृत्ताः सन्ति तदा तत् inline box मध्ये परिवर्तयन्तु

    display：inline-block

    • 1

काः शैल्याः योजयितुं शक्यन्ते ?

सार्वभौमिकशैली

प्रायः प्रत्येकस्मिन् html तत्त्वे शैल्याः योजयितुं शक्यन्ते ।

चौड़ाई ऊर्ध्वता

  • width: पूर्वनिर्धारितं सामग्रीविस्तारः (न तु पेटीविस्तारः)
  • height: पूर्वनिर्धारितं सामग्रीयाः ऊर्ध्वता (न तु पेटीयाः ऊर्ध्वता) ।

निम्नलिखितशैल्याः माध्यमेन भवान् तत्त्वस्य पूर्वनिर्धारितं मानकपेटिकाप्रतिरूपं IEपेटिकाप्रतिरूपं परिवर्तयितुं शक्नोति ।

box-sizing:border-box;

  • 1

अस्मिन् समये

  • विस्तारः - पेटीयाः विस्तारः (वामसीमा + वामगद्दी + सामग्रीविस्तारः + दक्षिणगद्दी + दक्षिणसीमा)
  • height: height of the box (ऊर्ध्वसीमा + उपरि गद्दी + सामग्री ऊर्ध्वता + अधः गद्दी + अधः सीमा)

गद्दी

  • नकारात्मकमूल्यानि समर्थितानि न भवन्ति
  • क्षैतिजं वा लम्बवत् वा प्रतिशतमूल्यं विस्तारस्य सापेक्षतया गण्यते ।
padding: 10px;

  • 1

पैडिंग् : उपरि, अधः, वाम-दक्षिणयोः कृते १०px

padding:10px 5px;

  • 1

उपरि अधः च पैडिंग् १०px भवति

दक्षिणवामयोः पैडिंग् ५px भवति

padding:10px 5px 15px;

  • 1

शीर्षपैडिंग् १०px अस्ति

दक्षिणवामयोः पैडिंग् ५px भवति

अधः गद्दी १५px अस्ति

padding:10px 5px 15px 20px;

  • 1

शीर्षपैडिंग् १०px अस्ति

राइट् पैडिंग् 5px अस्ति

अधः गद्दी १५px अस्ति

वामपैडिंग् २०px अस्ति

सीमा सीमा

सम्बन्धितशैल्याः अपि सन्ति

  • सीमा-गोलसीमा-त्रिज्या
  • सीमा-पूरण सीमा-प्रतिमा
  • रूपरेखारूपरेखा

विवरणं पश्यन्तु https://blog.csdn.net/weixin_41192489/लेख/विवरण/140325106

सीमन्

https://blog.csdn.net/weixin_41192489/लेख/विवरण/115140348

overflowoverflow इति

  • visible [Default value] सर्वाणि अतिरिक्तसामग्रीणि स्क्रॉल-पट्टिकाः कटयित्वा वा योजयित्वा वा प्रदर्शिताः भविष्यन्ति ।
  • hidden: स्क्रॉल-पट्टिकां गोपयन्तु तथा च वस्तु-आकारं अतिक्रम्य सामग्रीं न प्रदर्शयन्तु, परन्तु तदपि स्क्रॉल कर्तुं शक्यते ।
  • auto: यदि सामग्री अतिक्रान्तं न भवति तर्हि स्क्रॉल-पट्टिका न प्रदर्श्यते यदि सामग्री अतिक्रमति तर्हि स्क्रॉल-पट्टिका प्रदर्शिता भविष्यति;
  • scroll: Windows मञ्चे, सामग्री सीमां अतिक्रमयति वा न वा इति न कृत्वा, scroll bars सर्वदा प्रदर्श्यन्ते । Mac platform इत्यस्य अधः auto attribute इत्यस्य समानम् अस्ति ।

ऑटो तथा स्क्रॉल इत्येतयोः ओवरफ्लो वैल्यू युक्ताः कंटेनराः रोलिंग् कंटेनर्स् (स्क्रॉल बार युक्ताः कंटेनराः) सन्ति स्क्रॉलपात्रस्य अधः गद्दी श्वेतम्।

पारदर्शितास्पष्टता

विशेषतामूल्यं 0.0 (पूर्णतया पारदर्शकं) तः 1.0 (पूर्णतया अपारदर्शकं) पर्यन्तं भवति यदि 0 तः 1 पर्यन्तं परिधिसीमाम् अतिक्रमति तर्हि अन्तिमगणितं मूल्यं सीमामूल्यं भवति ।

    opacity: -1;    /* 解析为 0, 完全透明 */
    opacity: 2;     /* 解析为 1, 完全不透明 */

  • 1
  • 2

पृष्ठभूमि पृष्ठभूमि

https://blog.csdn.net/weixin_41192489/लेख/विवरण/140301618

छायापेटी-छाया

छाया पेटीया: आकारं न परिवर्तयिष्यति तथा च तस्य भ्रातृतत्त्वानां विन्यासं न प्रभावितं करिष्यति तथा च उत्तमप्रभावं प्राप्तुं त्रिविमप्रभावं च वर्धयितुं बहुविधसीमाछाया: सेट् कर्तुं शक्नुवन्ति ।

box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色（默认值为color的颜色值）  内/外阴影

  • 1
  • क्षैतिज-अवक्षेपः : दक्षिणतः सकारात्मकं मूल्यं, वामतः ऋणात्मकं मूल्यम् ।
  • ऊर्ध्वाधर-अवक्षेपः : सकारात्मकमूल्यानि अधः ऋणात्मकानि मूल्यानि ऊर्ध्वं च ।
  • धुंधलास्तरः : नकारात्मकः न भवितुम् अर्हति
  • आन्तरिक/बाह्यछाया - इन्सेट् आन्तरिकछाया अस्ति, न तु बाह्यछाया इति लिखिता
box-shadow: 15px 21px 48px -2px #666;

  • 1

अत्र चित्रविवरणं सम्मिलितं कुर्वन्तु
सामान्यतया प्रयुक्ताः छायाः

box-shadow: 0 2px 6px 0 rgba(0,0,0,.4);

  • 1

अत्र चित्रविवरणं सम्मिलितं कुर्वन्तु

अधिकं प्रयोगं पश्यन्तु
https://developer.mozilla.org/zh-CN/docs/Web/CSS/बॉक्स-छाया

  • [व्यावहारिकम्] इनपुट् बॉक्सस्य स्वचालितपूरणस्य पृष्ठभूमिवर्णस्य अधिलेखनम्

    input:-webkit-autofill {
    -webkit-box-shadow: inset 0 0 0 1000px #fff;
    background-color: transparent;
}

    • 1
    • 2
    • 3
    • 4

  • [व्यावहारिकम्] बैच्स् मध्ये बटनप्रेस् रङ्गं परिवर्तयन्तु

    button:active {
    box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .1);
}

    • 1
    • 2
    • 3

  • 【वास्तविक युद्ध】मास्किंग इफेक्ट् इत्यस्य आरम्भकस्य मार्गदर्शकः

    .guide {
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .75);
    border-radius: 50%;
}

    • 1
    • 2
    • 3
    • 4

क्लिप क्लिप-पथ

https://blog.csdn.net/weixin_41192489/लेख/विवरण/121341551

परिवर्तनपरिवर्तनम्

https://blog.csdn.net/weixin_41192489/लेख/विवरण/140314866

zoomzoom इति

Firefox ब्राउजर् तस्य समर्थनं न करोति अस्य निम्नलिखितविशेषतामूल्यानि भवितुम् अर्हन्ति ।

  • प्रतिशतं मूल्यम्।zoom:50%, मूलप्रमाणस्य अर्धभागं यावत् संकोचनं सूचयति ।
  • संख्यात्मकं मूल्यम् ।zoom:0.5, मूलप्रमाणस्य अर्धभागं यावत् संकोचनं सूचयति ।
  • normalकीवर्ड।zoom:normalतुल्यम्zoom:1, इति पूर्वनिर्धारितं मूल्यम् ।
  • resetकीवर्ड।zoom:reset , यत् सूचयति यत् यदा उपयोक्ता दस्तावेजं जूम् कर्तुं Ctrl तथा − अथवा Ctrl तथा + नुदति तदा तदनुसारं तत्त्वानि न्यूनीकृतानि वा विस्तारितानि वा न भविष्यन्ति । परन्तु अस्य कीवर्डस्य संगतता दुर्बलं भवति, केवलं सफारी ब्राउजर् द्वारा समर्थितम् अस्ति ।

zoom तथा scale() फंक्शन् इत्येतयोः मध्ये तुलना

  • zoomविशेषतामापनस्य केन्द्रनिर्देशाङ्कः तत्त्वस्य उपरि वामकोणस्य सापेक्षः भवति, तस्य परिवर्तनं कर्तुं न शक्यते ।transformपरिवर्तनं कुर्वन्scale()फंक्शन् स्केलिंग् इत्यस्य पूर्वनिर्धारितः केन्द्रनिर्देशाङ्कः तत्त्वस्य केन्द्रबिन्दुः भवति ।
  • Zoom attribute scaling इत्यनेन वास्तविकसमये तत्त्वेन कब्जितं आकारस्थानं परिवर्तयिष्यति तथा च, zoom attribute scaling इत्यस्य प्रदर्शनं scale() function इत्यस्य अपेक्षया दुष्टतरं भवति ।
  • जूम विशेषतां कस्मिंश्चित् तत्त्वे प्रयोक्तुं झरनासन्दर्भं न निर्मास्यति, नियततत्त्वानां स्थितिं तथा च अतिप्रवाहविशेषणेन निरपेक्षतया स्थितानां तत्त्वानां अतिप्रवाहगोपनं न प्रभावितं करिष्यति, न च निरपेक्षतया स्थितानां तत्त्वानां समाहितखण्डं परिवर्तयिष्यति

मुखौटा मुखौटा

https://blog.csdn.net/weixin_41192489/लेख/विवरण/121158821

ढालप्रवणता

https://blog.csdn.net/weixin_41192489/लेख/विवरण/140316024

विभिन्नप्रकारस्य तत्त्वानां कृते अद्वितीयशैल्याः

पाठ

https://blog.csdn.net/weixin_41192489/लेख/विवरण/140264311

अतिलिङ्क्

छद्मवर्गशैल्याः - निम्नलिखितनियतक्रमेण लिखितव्याः : १.

  • :link "Link": हाइपरलिङ्क् क्लिक् करणात् पूर्वं - href विशेषताभिः सह सर्वेषु हाइपरलिङ्केषु प्रवर्तते (एंकर्स् विहाय) - परित्यक्तुं शक्यते, a टैग् मध्ये संक्षिप्तं कृत्वा
  • :visited "Visited": लिङ्कस्य भ्रमणानन्तरं - तत् परित्यक्तुं शक्यते, a टैग् इत्यत्र संक्षिप्तं कृत्वा
  • :hover "hover": यदा मूषकं लेबले स्थापितं भवति
  • :active "Activate": यदा मूषकः लेबल् क्लिक् करोति परन्तु न मुञ्चति।
    /*让超链接点击之前是红色*/
    a:link{
        color:red;
    }

    /*让超链接点击之后是绿色*/
    a:visited{
        color:orange;
    }

    /*鼠标悬停，放到标签上的时候*/
    a:hover{
        color:green;
    }

    /*鼠标点击链接，但是不松手的时候*/
    a:active{
        color:black;
   }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

चित्र

चित्र फ़िल्टर फ़िल्टर

https://www.runoob.com/cssref/css3-pr-filter.html इति ग्रन्थः

icon

  • font-weight इत्यनेन सह प्रतिक्रियाशीलचिह्नानि कार्यान्वयन्तु
    यदा फ़ॉन्ट् आकारः बृहत्तरः भवति तदा चिह्नस्य फ़ॉन्ट् अधिकविस्तृतः भवति, यदा फ़ॉन्ट् आकारः लघुः भवति तदा चिह्नस्य फ़ॉन्ट् सरलः भवति ।
    https://demo.cssworld.cn/8/5-1.php

  • css icon merging - ClipPath Sprites प्रौद्योगिकी
    https://blog.csdn.net/weixin_41192489/लेख/विवरण/121242735

आस्तरण

होवर इत्यत्र पङ्क्तयः प्रकाशयन्तु
/*鼠标悬停时，让当前行显示#868686这种灰色*/
table tr:hover{
      background: #868686;
}

  • 1
  • 2
  • 3
  • 4
वर्णपङ्क्तयः क्रमेण

दत्तांशपङ्क्तयः मध्ये क्रमेण वर्णाः उपयोक्तुः पठनक्लान्तिं न्यूनीकर्तुं शक्नुवन्ति ।

table tr:nth-child(odd){
   background:#fff
}
table tr:nth-child(even){
   background:blue
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

स्क्रॉल करें

मूषकस्य कर्सरः

मूल्यम्‌वर्णेतु
urlकस्टम कर्सर URL।
मूलभूतम्‌पूर्वनिर्धारित कर्सर (प्रायः बाणः) २.
ऑटो मूलभूतम्‌। ब्राउजर् द्वारा सेट् कृतं कर्सरम् ।
क्रॉसहेयर इतिकर्सरः क्रॉस्हेयररूपेण दृश्यते ।
सूचकः [सामान्यतया प्रयुक्तः] ।कर्सरः लिङ्कं (हस्तः) सूचयन् सूचकरूपेण प्रस्तुतः भवति ।
चलनम्एतत् कर्सरं वस्तु चालयितुं शक्यते इति सूचयति ।
ई-आकारःअयं कर्सरः सूचयति यत् आयताकारपेटिकायाः ​​धारं दक्षिणतः (पूर्वं) गन्तुं शक्यते ।
ने-आकारःअयं कर्सरः सूचयति यत् आयताकारपेटिकायाः ​​धारं उपरि दक्षिणतः (North/East) च गन्तुं शक्यते ।
nw-आकारःअयं कर्सरः सूचयति यत् आयताकारपेटिकायाः ​​धारं उपरि वामभागे (North/West) गन्तुं शक्यते ।
n-आकारःएषः कर्सरः आयताकारपेटिकायाः ​​धारं उपरि (उत्तरं) स्थापयितुं शक्यते इति सूचयति ।
से-आकारःअयं कर्सरः सूचयति यत् आयताकारपेटिकायाः ​​धारं अधः दक्षिणतः (दक्षिण/पूर्वं) च गन्तुं शक्यते ।
sw-आकारःअयं कर्सरः सूचयति यत् आयतस्य धारं अधः वामभागे (दक्षिण/पश्चिमे) गन्तुं शक्यते ।
s-आकारःअयं कर्सरः आयताकारपेटिकायाः ​​धारं अधः (दक्षिणं) गन्तुं शक्यते इति सूचयति ।
w-आकारःअयं कर्सरः आयताकारपेटिकायाः ​​धारं वामभागे (पश्चिमे) गन्तुं शक्यते इति सूचयति ।
पाठएषः कर्सरः पाठं सूचयति ।
प्रतीक्षतुएषः कर्सरः कार्यक्रमः व्यस्तः इति सूचयति (प्रायः घड़ी अथवा वालुकघटिका) ।
साहाय्यम्‌एषः कर्सरः उपलब्धसहायतां (प्रायः प्रश्नचिह्नं वा गुब्बारेण वा) सूचयति ।

कर्सर

कर्सर वर्ण कैरेट्-रंग
इनपुट् बॉक्स इन्सर्शन कर्सरस्य वर्णं सेट् कुर्वन्तु (IE तथा Edge ब्राउजर् इत्यनेन अद्यापि समर्थितं नास्ति)

input {
    caret-color: red;
}

  • 1
  • 2
  • 3

सम्बन्धितशैल्याः दर्शयन्तु गोपयन्तु च

यदा तत्त्वानि गोपयितुं शक्नुवन्ति निम्नलिखितशैल्याः नास्ति तदा तत्त्वानि प्रदर्शितानि भवन्ति (केचन केवलं झरना आच्छादितत्वात् न दृश्यन्ते):

  • display: none [सामान्यतया प्रयुक्ताः] गुप्ततत्त्वानि, स्थानं न गृह्णन्ति, संसाधनं लोडं करिष्यन्ति, DOM च सुलभं भवति (html टैग् मध्ये गुप्तं योजयित्वा टैगस्य प्रदर्शनं कोऽपि नास्ति इति परिवर्तयिष्यति)
  • visibility: hidden गुप्ततत्त्वानि स्थानं गृह्णन्ति, संसाधनाः लोड् भविष्यन्ति, DOM च सुलभः अस्ति
    • यदि मातापितृतत्त्वं visibility:hidden सेट् करोति तर्हि बालतत्त्वानि अपि अदृश्यानि (विरासतां) भविष्यन्ति ।
    • यदि visibility:visible इति बालतत्त्वे सेट् भवति तर्हि बालतत्त्वं पुनः प्रदर्शितं भविष्यति ।
  • opacity: 0 तत्त्वं अदृश्यं, स्थानं गृह्णाति, क्लिक् कर्तुं वा चयनं वा कर्तुं शक्यते ।
  • clip: rect(0 0 0 0) तत्त्वं अदृश्यं, क्लिक् कर्तुं न शक्यते, स्थानं न गृह्णाति, परन्तु कीबोर्ड-प्रवेशः अस्ति
  • नकारात्मकं z-सूचकाङ्कमूल्यानि तत्त्वं गोपयन्ति, तत्त्वं अदृश्यं भवति, क्लिक् कर्तुं न शक्यते, परन्तु तत् स्थानं गृह्णाति, कीबोर्डतः च अभिगम्यते ।
    .lower {
　position: relative;
　z-index: -1;
}

    • 1
    • 2
    • 3
    • 4

पदनिर्भरशैल्याः

पृष्ठे कस्यचित् तत्त्वस्य स्थानं बहुशैल्याः निर्धारितं भवति, यथा स्थितिनिर्धारणं, प्रदर्शनं, प्लवमानं, मार्जिनम् इत्यादयः ।

यदा स्थितिः, प्रदर्शनं, प्लवकं च एकस्मिन् समये विद्यते तदा अधोलिङ्के वर्णिततर्कस्य अनुसारं तत्त्वस्य अन्तिमप्रदर्शनप्रभावः निर्धारितः भविष्यति ।

https://blog.csdn.net/weixin_41192489/लेख/विवरण/119009647

स्थितिः स्थितिः

https://blog.csdn.net/weixin_41192489/लेख/विवरण/140242430

विन्यासप्रदर्शनम्

https://blog.csdn.net/weixin_41192489/लेख/विवरण/140250775

सीमन्

https://blog.csdn.net/weixin_41192489/लेख/विवरण/115140348

संरेखणम्

https://blog.csdn.net/weixin_41192489/लेख/विवरण/140255028

झरना झरना z-सूचकाङ्क

https://blog.csdn.net/weixin_41192489/लेख/विवरण/140297366

अन्तरक्रिया सम्बन्धी शैलियाँ

चिकनी स्क्रॉल स्क्रॉल-व्यवहार: चिकनी

https://blog.csdn.net/weixin_41192489/लेख/विवरण/121365831

खिंचाव आकार परिवर्तन

https://blog.csdn.net/weixin_41192489/लेख/विवरण/121396794

उपकरण अनुकूलन सम्बन्धी शैलियाँ

मीडिया पूछताछ @media

https://blog.csdn.net/weixin_41192489/लेख/विवरण/126028971

[व्यावहारिकम्] चल-टर्मिनल-अनुकूलन-समाधानम् (त्रि-प्रकारम्) .

https://blog.csdn.net/weixin_41192489/लेख/विवरण/120999355

कस्टम् CSS शैल्याः (CSS चराः/कस्टम् गुणाः)

https://blog.csdn.net/weixin_41192489/लेख/विवरण/140317369

CSS लेखनस्य दक्षतायां सुधारं कुर्वन्तु

CSS पूर्वसंसाधकः

CSS पूर्वसंसाधकः एकः विशेषः प्रोग्रामिंगभाषा अस्ति यस्य उपयोगः CSS मध्ये केचन प्रोग्रामिंगविशेषताः योजयितुं भवति (CSS स्वयं प्रोग्रामिंगभाषा नास्ति) । ब्राउजर-सङ्गति-समस्यानां विचारस्य आवश्यकता नास्ति यतोहि CSS-पूर्व-संसाधकः अन्ततः मानक-CSS-शैल्याः संकलनं निर्गच्छति च । भवान् CSS पूर्वसंसाधके चराः, सरलतार्किकनिर्णयः, कार्याणि च इत्यादीनां मूलभूतप्रोग्रामिंगकौशलानाम् उपयोगं कर्तुं शक्नोति ।

मुख्यधारा CSS पूर्वसंसाधकेषु Sass (Scss), Less तथा Stylus च सन्ति ।
(SASS इत्यस्य नामकरणं SCSS इति 3.0 संस्करणात् आरभ्य कृतम् अस्ति)

CSS रूपरेखा

CSS कोडिंग् रूढिः

  • ब्राउजर् पूर्वनिर्धारितशैल्याः पुनः सेट् कुर्वन्तु
  • शैल्याः उपयोगं परिहरितुं प्रयतध्वम्
  • एककाः केवलं तदा एव लोपयितुं शक्यन्ते यदा विशेषतामूल्यं शून्यं भवति
  • मूल्यं प्रायः समसङ्ख्या भवति, यथा 5px इत्यस्य स्थाने 6px (विशेषतः रेखायाः ऊर्ध्वता, फ़ॉन्ट् आकारः च, येन तेषां भेदः 2 इत्यनेन विभज्यते इति सुनिश्चितं भवति, येन फ़ॉन्ट् रेखायां केन्द्रितः भवति)
  • वर्गनाम शब्दार्थात्मकं भवेत्, येन भवान् एकदृष्ट्या एव चिन्तयितुं शक्नोति यत् वर्गनाम कस्मिन् तत्त्वे कार्यं करोति/वर्गनाम्ना प्राप्तः शैलीप्रभावः ।
/* 给左侧的盒子定义的样式 */
.leftBox{
}
/* 给内部为菜单的盒子定义的样式 */
.menuBox{
}
/* 将子元素排列为一行的样式 */
.row{
   display:flex
}
/* 设置颜色为红色 */
.red{
  color:red
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

अनुशंसितपाठशैल्याः

  • font-size इत्यस्य उपयोगं कुर्वन्तु: medium;
  • पाठपात्रस्य अन्तः पाठः, सापेक्षिकैककानां उपयोगेन - प्रतिशतं वा em
  • पाठमार्जिनस्य कृते em इत्यस्य उपयोगं एककरूपेण कुर्वन्तु

उच्च प्रदर्शन एनिमेशन

CSS उच्च-प्रदर्शन-एनिमेशनस्य त्रयः तत्त्वानि निरपेक्ष-स्थापनं, अस्पष्टता-विशेषणं, परिवर्तन-विशेषणं च निर्दिशन्ति । अतः प्रथमं transform एट्रिब्यूट् इत्यस्य उपयोगेन स एव एनिमेशन इफेक्ट् प्राप्तः भवति । यथा, एलिमेण्ट् मूवमेण्ट् एनिमेशन्स् इत्यनेन मार्जिन एट्रिब्यूट् इत्यस्य अपेक्षया transform एट्रिब्यूट् इत्यस्य उपयोगः करणीयः ।

व्यक्तिगत प्रोफाइल

सः ३० वर्षाणाम् अधिकं कालात् प्रौद्योगिक्याः शोधकार्यं कर्तुं समर्पितः अस्ति, तथा च जावा, लिनक्स, जावास्क्रिप्ट्, php, css इत्यादिषु विविधभाषासु प्रवीणः अस्ति, मुक्तस्रोतक्षेत्रे सः बहु योगदानं कृतवान् अस्ति विकासक दस्तावेजीकरणस्थानकं भविष्ये सन्दर्भार्थं प्रौद्योगिकीविकासे केचन विषयाः साझां कर्तुं सर्वे तत् पश्यन्तु

मम सम्पर्कसूचना

मेल