Koleksyon ng Mga Artikulo at Mga Template

Nagtatampok ang pahina ng katalogo na ito ng mga kinatawan ng artikulo at isang koleksyon ng pinakamahusay na mga template ng Nickgenom na kinuha mula sa iba't ibang mga kagiliw-giliw na mapagkukunan sa internet

css.webp
Code, Sanggunian

CSS | Mga patok na termino sa website

Azkiya
15 September 2020

Sa pagkakataong ito susubukan naming maunawaan kung ano ang CSS. Madalas naming naririnig ang tungkol sa CSS o mga developer ng website ay magiging pamilyar sa term na ito. Ang Cascading Style Sheets (CSS) ay isang style sheet na wika na ginamit upang ilarawan ang pagtatanghal ng mga dokumento na nakasulat sa isang markup na wika tulad ng HTML. Ang CSS ay ang teknolohiya ng pamagat ng World Wide Web, kasama ang HTML at JavaScript. Ang CSS para sa mga developer ng website ay kilala na kapaki-pakinabang para sa mga istilo ng website, font, kulay, laki, spacing, border, background at anino ay ilan lamang sa mga halimbawa na maaaring ipasadya gamit ang CSS. Gayunpaman, maaaring hindi maunawaan ng ilang tao ang term na ito lalo na para sa mga developer na bago sa mundo ng pag-coding ng website.

Maraming mga sanggunian sa katagang ito ng CSS. Ngunit dito susubukan ng may-akda na bawasan ang term na ito sa iisang yunit upang makapagbigay ito ng madaling pag-unawa para sa kahit na mga bagong developer ng website.

Ang CSS na narinig natin nang maraming beses ay hindi isang isahan na term na iyon lang, nagsisilbi lamang ito bilang isang website styler at iyon lang. Gayunpaman, mayroong isang bilang ng mga term na dapat nating malaman magkasama upang makamit ang isang seryosong pag-unawa sa mga term na ito sa CSS.

naiintindihan namin ang CSS

Ang CSS ay isang code na ginagawang madali para sa mga developer ng website na baguhin ang istilo ng ilan o lahat ng mga web page, matukoy ang layout, lumikha ng mga istilo ng teksto simula sa pagtukoy ng kapal ng teksto, kulay ng teksto, uri ng teksto, ikiling sa iba pang mga elemento, at iba pa . dati maaari lamang itong tukuyin sa pahina ng HTML.

Kasalukuyang CSS

Magpasalamat na nasa bagong edad ka ng CSS ngayon. Ngayon ang oras para sa CSS3 na lumampas sa oras na mas maaga at umunlad nang malaki mula sa nakaraang panahon ng CSS2. Salamat sa CSS3 posible na gumawa ng mga bilugan na sulok at drop-shadow effects na ipakita sa browser. Nag-aalok din ang CSS3 ng isang bagong tool para sa paglalarawan ng mga kulay sa mga dokumento. Ang HSL (Hue-saturation-Lightness) ay ang pinakabagong karagdagan sa HSLA na may kasamang mga Alpha channel upang mabawasan ang opacity.

Ang tagapili ng katangian ay isang malaking hakbang pasulong pagdating sa mga estilo ng tuwid na markup. Sa istilo ng code na ito maaari kang mag-target ng mga tukoy na pangalan ng elemento na naglalaman ng mga katangian na may tukoy na mga halaga. Karamihan ito ay kapaki-pakinabang kapag nagtatrabaho kasama ang markup tulad ng XML kung saan walang mga karaniwang prinsipyo sa disenyo para sa pagmamanipula ng mga node. Ang halimbawa sa ibaba ay isang simpleng ideya :

1. div[attrib^="1"] { /* mga istilo dito */ }

Ang code sa itaas ay bahagi ng CSS selector library. Maaapektuhan nito ang lahat ng elemento ng div na may katangiang attrib na nagtataglay din ng halagang 1. Kung nakalilito pa rin ito tingnan ang halimbawa sa ibaba upang linawin. Sa teorya, dapat gawin ng dalawang tagapili ang parehong aksyon.

1. p[id^="primary"] { /* mga istilo */ }
2. p#primary { /* mga istilo */ }

Ang CSS ngayon ay tumayo nang may malaking pagmamataas bilang nangingibabaw na wika para sa pag-istilo ng aming mga website sa harap.

Mahahalagang termino sa CSS

Ang mga sumusunod na term ay batay sa artikulong Divya Manian na binago kasama ng iba`t ibang mga mapagkukunan ng kinatawan.

Ang pag-aari ay ang Estilo na inilalapat mo sa tagapili. Sa simpleng mga termino ang pag-aari ay ang bago sa colon sa bawat linya ng CSS. Sa halimbawa sa ibaba, ang salitang width ay isang property.

#box  {
width : 200px; /* ang ari-arian ay "width" (walang colon) */
}

Value ay ang Halaga na maaaring magkaroon ang pag-aari. Sa simpleng mga termino, ang Halaga ay lilitaw kaagad pagkatapos ng colon sa bawat linya ng CSS. Sa halimbawa sa ibaba, ang 200px ay ang value.

#box
width : 200px; /* pagkatapos ng colon, walang semicolon */
}

Keyword ay isang salita na tinukoy sa pagtutukoy ng CSS at samakatuwid ay hindi dapat lumitaw sa mga quote kapag ginamit. Halimbawa: red, solid, dotted. Ang mga keyword ay mga halaga para sa mga pag-aari at medyo tulad ng nakareserba na mga salita para sa mga tukoy na pag-aari. Ang magkakaibang mga pag-aari ay may magkakaibang mga keyword, at pinapayagan ng lahat ng mga pag-aari ang keyword na inherit. Sa halimbawa sa ibaba, ang halagang auto ay ang keyword.

#container {
height: auto; /* Ang "auto" ay isang keyword */
}

Mayroong mga opinyon na sumasang-ayon na ang salitang: !important ay kwalipikado bilang isang keyword, batay sa kung paano makilala ang mga keyword mula sa mga halaga.

Length Units ay Mga Halaga na maaaring ideklara sa mga yunit (hal. 1px, 2%). Functional Notation ay anumang halaga na tinukoy bilang isang function (identifier na sinusundan ng ()). Pangunahing ginamit upang tukuyin ang mga kulay, URI, mga katangian at pagbabago, hal. rgba(0, 0, 0, 0.5), url('im.png'), attr('href'), scale(20).

Identifier ay anumang lumilitaw bilang isang pag-aari, id, class, keyword na value, at at-rule. Sa halimbawa, sa ibaba ay apat na identifiers :

/* "body", "background", "none", and "font-size" are identifiers */
body {
  background: none;
  font-size: 14px;
}
/* "14px" is not an identifier */

Ang salitang body ay isang Identifier o identifier; ang salitang background ay isang identifier din; ang salitang none ay isang identifier; at ang salitang font-size ay isang identifier. Ang huling halaga na 14px ay hindi isang identifier, sapagkat ito ay hindi isang keyword.

Declaration ay isang koleksyon ng mga pangalan at halaga ng pag-aari. Karaniwan itong isang solong linya ng CSS na lilitaw sa pagitan ng mga kulot na brace, alinman sa pagpapaikli o sulat-kamay. Sa halimbawa sa ibaba, ang lahat pagkatapos ng unang kulot na brace, at bago ang huling brace (hindi kasama ang mga komento) ay isang deklarasyon :

body {
  font-family: Arial, sans-serif; /* ang linyang ito ay isang deklarasyon */
  background: red; /* ang linyang ito ay isang deklarasyon */
}

Sa sumusunod na halimbawa, mayroong dalawang mga deklarasyon sa pagitan ng mga {} mga palatandaan :

body {
  font-family: Arial, sans-serif; /* isang deklarasyon */
  color: #555; /* isa pang deklarasyon */
}

Declaration Block ay ang seksyon ng CSS kung saan lilitaw ang mga pares ng pag-aari / halaga. Sa halimbawa sa ibaba, lahat ng matatagpuan sa pagitan ng {} (hindi kasama ang mga komento) ay isang bloke ng deklarasyon :

body {
  font-family: Arial, sans-serif; /* nagsisimula sa linyang ito */
  color: #555;
  font-size: 14px;
  line-height: 20px; /* nagtatapos dito, bago isara ang kulot na brace */
}

Rule or Rule Set ay isang Selector o selector na sinusundan ng isang block ng deklarasyon. Ito ay isang piraso ng CSS kasama ang tagapili, ang {} flag at iba't ibang mga linya na may mga katangian at halaga. Ang code sa halimbawa sa ibaba ay binubuo ng isang hanay ng mga patakaran :

body {
  font-family: Arial, sans-serif;
  color: #555;
  font-size: 14px;
}

#responsive {
clear: both;
color: #000;
background-color: chocolate;
}

Selector ay kung paano mo ideklara kung aling mga elemento ang dapat na istilo. Mas partikular, ang tagapili ay bahagi ng linya ng CSS na pumipili ng elemento ng target na may isang pares ng pag-aari/halaga. Sa halimbawa sa ibaba, ang #container, #box ay isang selector :

/ * ang tagapili ay ang lahat sa unang linya * /
/ * hindi kasama ang pambungad na kulot na brace * /
#container #box {
  width: 200px;
}

Element Type Selector ay isang tagapili na nagta-target ng mga elemento ayon sa mga pangalan ng tag. Ang tagapili sa halimbawa sa ibaba ay isang tagapili ng uri ng elemento, dahil hindi ito gumagamit ng isang class, ID, o iba pang tagapili upang maglapat ng isang naibigay na istilo. Sa halip, direktang target nito ang lahat ng mga elemento ng HTML5 nav :

/ * tumutugma sa isang elemento ng HTML sa pangalan * /
nav {
font-family: Arial, sans-serif;
color: #555;
font-size: 14px;
}

Class Selector ang pinakakaraniwang ginagamit na tagapili. Halimbawa: .style, .pen, .mystyle, at iba pa, upang pumili ng mga elemento na may istilong classname, pen, mystyle, na. Pinapayagan ito para sa higit sa 1 elemento na may parehong pangalan ng klase. Ang pumipili sa halimbawa sa ibaba ay tina-target ang elemento ng pangalan ng klase nito. Kaya't ang anumang elemento na may "navigation" sa klase ay makakatanggap ng inilaan na istilo :

/* tumutugma sa elemento ng HTML sa class="navigation" */
.navigation {
  width: 960px;
  margin: 0 auto;
}

ID Selector ay gagamitin ito nang matipid. Hindi mo magagamit muli ang isang ID sa loob ng parehong pahina at ginagamit lamang ito upang natatanging kilalanin ang isang elemento. Halimbawa :

<div class="text-center gaya" id=ini-idselektor></div>

Ang pumipili sa halimbawa sa ibaba ay nagta-target ng mga elemento ayon sa kanilang ID. Kaya't ang anumang elemento na may navigation na ID ay makakatanggap ng istilong pinag-uusapan :

/* tumutugma sa elemento ng HTML sa id="navigation" */
#navigation {
  width: 960px;
  margin: 0 auto;
}

Universal Selector Ang unibersal na tagapili ay tumutugma sa anumang elemento sa konteksto kung saan ito inilagay sa tagapili. Sa halimbawa sa ibaba, ang * character ay ang unibersal na tagapili :

/* ang asterisk character ay ang unibersal na tagapili */
.navigation ul * {
  width: 100px;
  float: left;
}

Kaya't ang anumang elemento na lilitaw bilang isang hindi naayos na listahan ng mga sangkap ng supling ng listahan sa loob ng isang elemento na mayroong klase na navigation ay makakatanggap ng idineklarang istilo. Pangkalahatan ay hindi inirerekumenda para sa mga kadahilanan sa pagganap.

Attribute Selector ay kung gumagamit ka ng mga katangian maliban sa klase o id upang makilala ang mga elemento sa styleheet, gagamit ka ng Mga Pumipili ng Katangian. Maaari ka ring magsagawa ng isang tugma sa template sa tagapili ng katangian (kaya kung nais mong magsagawa ng isang tugma sa template para sa tagapili gamit ang klase o katangian ng ID, maaari mong gamitin ang katangiang selector). Halimbawa :

<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<style>
a[target] {
background-color: yellow;

}
</style>
<!-- CSS -->
</head>
<body>
<p>Links with the "target" attribute receive a yellow background:</p>
<a href="https://www.google.com">Google Internasional</a>
<!-- yellow background -->
<a href="https://www.google.co.id" target="_blank">Google Indonesia</a>
<a href="https://www.google.org" target="_top">Google Organization</a>
<!-- yellow background -->
</body>
</html>

Mga Pseudo-Classes ay "klase" na inilalapat sa mga elemento batay sa impormasyon na wala sa markup, halimbawa "": unang anak "" o "": huling anak " . Hindi mo maaaring gamitin ang seksyon ng artikulo na ": unang anak " upang piliin ang unang paglitaw ng artikulo, kung ang unang anak ng seksyon ay h1 at hindi artikulo. Gayundin sa ": nth-child ", at" ": last-childpseudo-class ".

Pseudo-Elements ay magkakaibang mga Pseudo-element mula sa Pseudo-Classes na aktwal na lumilikha ng mga elemento sa puno ng dokumento. Ito ang halos unang halimbawa ng CSS na nagbabago ng puno ng dokumento ng HTML. Mainam na dapat mong gamitin ang mga pseudo-element na may :: sa halip na : (ngunit ang karamihan sa mga browser ay tumatanggap ng notasyong : para sa CSS 2.1 na mga pseudo-element) Ang mga pseudo-element ay : ::first-line, ::first-letter, ::before, ::after.

Combinators ay ang pagpili ng mga elemento batay sa kanilang paglitaw na may kaugnayan sa iba pang mga elemento (napili ng mga pagpipilian ng combinator: space,>, +, o ~).

Mayroong apat na magkakaibang mga kombinasyon sa CSS :

  • Pumili ng inapo (space)
  • Pumili ng bata (>)
  • Katabi na pumili ng kapatid (+)
  • Pinili ng pangkalahatang kapatid (~)

Ano ang ibig sabihin ng apat na termino sa itaas :

  • Descendant Combinator Ito ang pinakakaraniwang paggamit, hal. #responsive h1.

  • Child Combinator ay isang tagapili ng bata na pumipili ng lahat ng mga elemento na mga bata ng isang partikular na elemento. Pinipili ng sumusunod na halimbawa ang lahat ng mga elemento ng <p> na mga anak ng isang <div> na elemento :

    div > p {
     background-color: yellow;
    }
  • Adjacent Sibling Combinator ay isang Elemento na direktang katabi ng ibang elemento.

  • General Sibling Combinator ay isang Elemento na katabi, ngunit hindi direkta sa ibang elemento.

  • At-Rules ay Mga Panuntunan na nagsisimula sa character na @, halimbawa:@import, @page, @media, at @font-face.

  • Media Features ay Sa mga query sa media, maaari kang mag-target ng mga istilo depende sa mga tampok sa media. Ang mga tanyag na paggamit ng tampok na media ay min-width at max-width upang makita ang mga iOS device.

  • Vendor-specific Extension ay Eksaktong sinasabi nito. Nagbibigay ang mga ito ng tukoy na pagpapaandar para sa mga tukoy na vendor (hal. Mga browser). Hindi nila kinakailangang kinatawan ang mga tampok na idineklara sa pamantayan.

  • Comment o Statement ay ang wika na nagpapaliwanag ng CSS code na naipon sa ibaba nito. Halimbawa: ang mga komento dito ay nagsasabi tungkol sa 4 na bagay:

    1. Bootstrap v4.3.1 (https://getbootstrap.com/)
    2. Copyright 2011-2019 Ang Mga May-akda ng Bootstrap
    3. Copyright 2011-2019 Twitter, Inc.
    4. Lisensyado sa ilalim ng MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)

Bigyang-pansin ang code na ito :

/*!
  Bootstrap v4.3.1 (https://getbootstrap.com/)
  Copyright 2011-2019 The Bootstrap Authors
  Copyright 2011-2019 Twitter, Inc.
  Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;

Mag-iwan ng komento

1-1 mula sa 1

Tumugon sa talakayang ito

Hindi ka maaaring mag-edit ng mga post o lumikha ng mga tugon: Dapat naka-log in ka bago ka makapag-post.

Salita ng karunungan

" Ang pagsira sa mga gamit ng iyong kaibigan ay hindi isang problema, ngunit ang pagpapalit sa kanila ang problema. "

Sanggunian sa Artikulo :

Koleksyon ng Template ng Website :

We Build

Mga tag post: Bootstrap, Pagbabago, Template 04 Agustus 2021

Blueprint - (Template ng Blueprint)

Mga tag post: Bootstrap, Template 04 Agustus 2021

Above - Template Pendidikan

Mga tag post: Bootstrap, Template 04 Agustus 2021

Portfolio - (Template ng Blueprint)

Mga tag post: HTML5, Template 04 Agustus 2021

Coming Sssoon + Mods

Mga tag post: Bootstrap, Pagbabago, Template 30 Oktober 2020

Mobster + Mods

Mga tag post: Bootstrap, Template 29 Oktober 2020

Material Kit React + Pagbabago

Mga tag post: Pagbabago, React, Template 06 Oktober 2020

SB Admin + Pagbabago

Mga tag post: Bootstrap, Pagbabago, Template 06 Oktober 2020

Space Science + Pagbabago

Mga tag post: HTML5, Pagbabago, Template 01 Oktober 2020

Moderna + Pagbabago

Mga tag post: Bootstrap, Pagbabago, Template 30 September 2020
Tungkol sa
Rss
  • Libreng Mga Artikulo | Koleksyon ng Mga Artikulo at Mga Template https://nickgenom.com/tl/forum Artikel dan Koleksi Template https://nickgenom.com/tl/paksa-ng-paksa/artikel-dan-koleksi-template-2 Rab, 20 Okt 2021 00:11:34 +0000

    apa sih ini?
    Artikel dan Koleksi Template https://nickgenom.com/tl/paksa-ng-paksa/artikel-dan-koleksi-template Sen, 18 Okt 2021 20:10:22 +0000