CSS | Mga patok na termino sa website

Ang pahinang ito ay naglalarawan nang detalyado tungkol sa nais mong malaman

| English | | Filipino | | Indonesia | | Malay | | Thai | | Vietnamese |
0 mga oras na nakita

CSS | Mga patok na termino sa website

inilathala noong : 15 September 2020

Sa pagkakataong ito susubukan naming maunawaan kung ano ang CSS. Madalas naming marinig 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 pangunahing teknolohiya 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 ilang halimbawa lamang 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 mga pag-coding ng mga website.

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

Ang CSS na madalas nating marinig ay hindi isang solong term na lahat, mayroon lamang itong pagpapaandar sa istilo ng website at iyon lang. Gayunpaman, may sapat na mga term na dapat nating malaman magkasama upang maabot ang isang seryosong pag-unawa sa term na ito ng CSS.

CSS na naiintindihan namin

Ang CSS ay code na ginagawang madali para sa mga developer ng website na baguhin ang mga istilo sa maramihang o lahat ng mga web page, tukuyin ang mga layout, lumikha ng mga istilo ng teksto mula sa pagtukoy ng kapal ng teksto, kulay ng teksto, uri ng teksto, mga italiko sa iba pang mga elemento, atbp. dating tinukoy lamang sa pahina HTML.

Kasalukuyang CSS

Magpasalamat na nasa bagong edad ka ng CSS ngayon. Ngayon na ang oras para sa CSS3 na lumampas sa malayong hinaharap at lubos na nabuo mula sa nakaraang panahon ng CSS2. Salamat sa CSS3 posible na gumawa ng mga bilugan na sulok at ang drop-shadow na epekto ay maaaring ipakita sa browser. Nag-aalok din ang CSS3 ng mga bagong tool para sa paglalarawan ng mga kulay sa mga dokumento. Ang HSL (Hue-saturation-Lightness) ay ang pinakabagong karagdagan sa HSLA na nagsasama ng isang Alpha channel upang mabawasan ang opacity.

Ang tagapili ng katangian ay isang malaking hakbang pasulong pagdating sa mga estilo ng tuwid na markup. Sa ganitong istilo ng pag-coding 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 pamantayang prinsipyo ng 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 bagay.

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

CSS saat ini telah berdiri dengan sangat bangga sebagai bahasa dominan untuk mengatur gaya situs web front-end kita.

Mahalagang mga tuntunin sa CSS

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

Property ay ang Estilo na inilalapat mo sa tagapili. Sa mga simpleng term ng isang pag-aari ay kung ano ang lilitaw bago ang colon sa bawat linya ng CSS. Sa halimbawa sa ibaba, ang salitang "lapad" ay isang pag-aari.

  • #box {
    width : 200px; /* ang pag-aari ay "lapad" (walang mga colon) */
    }

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

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

Keyword ay isang salita na tinukoy sa pagtutukoy ng CSS at samakatuwid ay hindi dapat lilitaw sa mga marka ng panipi kapag ginamit. Halimbawa: pula, solid, tuldok. 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 "mana". Sa halimbawa sa ibaba, ang halagang "awtomatiko" ay isang keyword.

  • #container {
    height: auto; /* "auto" adalah sebuah keyword */
    }

May mga sumasang-ayon na ang salitang :! Mahalaga ay kwalipikado bilang isang keyword, batay sa kung paano ito nakikilala mula sa halaga.

Length Units ay isang Halaga na maaaring ideklara sa mga yunit (halimbawa: 1px, 2%).

Functional Notation ay ang anumang Halaga na tinukoy bilang isang pagpapaandar (identifier na sinusundan ng ()). Pangunahing ginamit upang tukuyin ang mga kulay, URI, mga katangian at pagbabago: halimbawa: rgba (0, 0, 0, 0.5), url ('im.png'), attr ('href'), scale (20).

Identifier ay anumang lumilitaw bilang isang pag-aari, id, klase, halaga ng keyword, at at-panuntunan. Sa halimbawa, sa ibaba ay apat na mga pagkakakilanlan:

  • /* "body", "background", "none", at "font-size" ialah identifiers */
    body {
    background: none;
    font-size: 14px;
    }
    /* "14px" ay hindi isang pagkakakilanlan */

Ang salitang "katawan" ay isang identifier o identifier; ang salitang "background" ay isang identifier din; ang salitang "wala" ay isang pagkakakilanlan; at ang salitang "font-size" ay isang identifier. Ang huling halagang "14px" ay hindi isang pagkakakilanlan, dahil hindi ito isang keyword.

Declaration ay ang hanay ng mga pangalan at halaga ng pag-aari. Karaniwan isang solong linya ng CSS na lumilitaw sa pagitan ng mga kulot na bracket, alinman sa pagpapaikli o sulat-kamay. Sa halimbawa sa ibaba, lahat pagkatapos ng unang 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 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 {} mga marka (hindi kasama ang mga komento) ay isang block ng deklarasyon:

  • body {
    font-family: Arial, sans-serif; /* simula sa linyang ito */
    color: #555;
    font-size: 14px;
    line-height: 20px; /* magtapos dito, bago i-brace ang kulot */
    }

Rule or Rule Set ay isang tagapili na sinusundan ng isang bloke ng mga deklarasyon. Ito ay isang solong piraso ng CSS kabilang ang mga tagapili, {} marka 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 ilalapat ang istilo. Partikular, ang tagapili ay ang bahagi ng linya ng CSS na pumipili kung anong mga elemento ng target ang may mga pares ng pag-aari / halaga. Sa halimbawa sa ibaba, ang "#container #box" ay isang tagapili:

  • /* the selector is everything on the first line */
    /* excluding the opening curly brace */
    #container #box {
    width: 200px;
    }

Element Type Selector ay isang tagapili na tina-target ang elemento na may pangalan ng tag. Ang tagapili sa halimbawa sa ibaba ay isang tagapili ng uri ng elemento, dahil hindi ito gumagamit ng isang klase, ID, o iba pang tagapili upang mag-apply ng isang naibigay na istilo. Sa halip, direkta nitong tina-target 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 mga tagapili. Halimbawa: .style, .pen, .mystyle, at iba pa, upang pumili ng mga elemento na may istilong classname, panulat, mystyle, iyon. Pinapayagan ito para sa higit sa 1 elemento na may parehong pangalan ng klase. Ang pumipili sa halimbawa sa ibaba ay nagta-target ng mga elemento sa pamamagitan ng kanilang mga pangalan sa klase. Kaya't ang bawat elemento na may "nabigasyon" na klase ay makakatanggap ng inilaan na istilo:

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

ID Selector ay gamitin ito ng matipid. Hindi mo maaaring magamit muli ang mga ID sa loob ng parehong pahina at ginagamit lamang ang mga ito upang natatanging kilalanin ang mga elemento. Halimbawa:

Ang pumipili sa halimbawa sa ibaba ay nagta-target ng mga elemento ayon sa kanilang ID. Kaya't ang anumang mga elemento na may "nabigasyon" ng ID ay makakatanggap ng inilaan na istilo:

  • /* 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 isang unibersal na tagapili:

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

Kaya, ang anumang mga elemento na lilitaw bilang mga inapo ng isang hindi naayos na elemento ng listahan sa loob ng mga elemento na mayroong klase na "nabigasyon" ay makakatanggap ng idineklarang istilo. Ang mga piling pandaigdigan sa pangkalahatan ay pinanghihinaan ng loob dahil sa mga kadahilanan sa pagganap.

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

Pseudo-Classes ay isang klase na inilalapat sa isang elemento batay sa impormasyon na wala sa markup, halimbawa :first-child o :last-child. Hindi mo magagamit ang seksyon ng artikulo :first-child sa pipili ng unang paglitaw ng artikulo, kung ang unang anak ng isang seksyon ay h1 at hindi isang artikulo. Pati na rin ang :nth-child, at :last-childpseudo-class.

Pseudo-Elements ang mga elementong Pseudo ay naiiba 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 isang puno ng dokumento ng HTML. Mainam na dapat mong gamitin ang mga pseudo-element kasama “::” hindi “:” (ngunit ang karamihan sa mga browser ay tumatanggap ng notasyon “:” sa pseudo-elemen CSS 2.1). Pseudo-elemento ito ay: ::first-line, ::first-letter, ::before, ::after.

Combinators ay ang pagpili ng mga elemento batay sa mga kaganapan na may kaugnayan sa iba pang mga elemento (napili ng pagpili ng kombinador: space, >, +, atau ~).

Mayroong apat na magkakaibang mga combinator sa CSS :

  • Descendant selector (space)
  • Child selector (>)
  • Adjacent sibling selector (+)
  • General sibling selector (~)

Ano ang ibig sabihin ng apat na termino sa itaas :

  • Descendant Combinator Ito ang pinakakaraniwang gamit, ex. #responsive h1.
  • Child Combinator ang pipili ng bata ay pipiliin ang lahat ng mga elemento na mga bata ng isang partikular na elemento. Pinipili ng sumusunod na halimbawa ang lahat >pdiv<:> div > p {
    background-color: yellow;
    }

Adjacent Sibling Combinator ay isang Elemento na direktang katabi ng ibang elemento.

General Sibling Combinator ay isang katabing Elemento, ngunit hindi direkta sa ibang elemento.

At-Rules ay ang Panuntunan na nagsisimula sa @karakter, halimbawa: @import, @page, @media, at @font-face.

Media Features is With media queries, you can target styles depending on the features of the media. Popular uses of the media feature are min-width and max-width to detect iOS devices.

Vendor-specific Extension is Exactly what it says. They provide specific functionality for specific vendors (i.e. browsers). They do not always represent the features declared in the standard.

Comment atau Statement is the language that is the explanation of the CSS code that is compiled under it. Example: the comments here say about 4 things:

  • 1. Bootstrap v4.3.1 (https://getbootstrap.com/)
  • 2. Copyright 2011-2019 The Bootstrap Authors
  • 3. Copyright 2011-2019 Twitter, Inc.
  • 4. Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)

Perhatikan kode ini :

/*!
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;

Tags:

Magkomento