akoonu Marketing

Kini Awọn iwe Ara Cascading (CSS)?

Ka ni isalẹ fun alaye ni kikun ti bii awọn iwe aṣa cascading ṣe n ṣiṣẹ. A ṣe afihan awọn ohun elo wa ni oke oju-iwe naa ki o rọrun lati wa ati lo. Ti o ba n ka nkan yii nipasẹ imeeli tabi kikọ sii, tẹ nipasẹ si compress rẹ CSS.

Tẹ CSS Uncompress CSS Da awọn esi

Ayafi ti o ba n ṣe idagbasoke awọn aaye nitootọ, o le ma ni oye ni kikun awọn iwe ara cascading (CSS). CSS jẹ ede ara ti a lo lati ṣe apejuwe irisi ati ọna kika iwe ti a kọ sinu HTML or XML. CSS le ṣee lo lati tokasi awọn aza fun awọn eroja oriṣiriṣi bii fonti, awọ, aye, ati ifilelẹ. CSS ngbanilaaye lati ya igbejade ti iwe HTML rẹ kuro ninu akoonu rẹ, jẹ ki o rọrun lati ṣetọju ati ṣe imudojuiwọn ara wiwo oju opo wẹẹbu rẹ.

Ilana Ede CSS

awọn olutayo ni HTML ano ti o fẹ lati ara, ati awọn ohun ini ati iye setumo awọn aza ti o fẹ lati lo si nkan yẹn:

selector {
  property: value;
}

Fun apẹẹrẹ, CSS atẹle yoo ṣe gbogbo rẹ <h1> awọn eroja lori oju-iwe kan ni awọ pupa ati iwọn fonti ti 32px:

CSS

h1 {
  color: red;
  font-size: 32px;
}

o wu

nlọ

O tun le pato CSS fun ID alailẹgbẹ lori eroja kan:

CSS

/* styles for an element with ID "intro" */
#intro {
  font-weight: bold;
  text-align: center;
}

o wu

Intro

Tabi lo kilasi kan kọja awọn eroja lọpọlọpọ:

CSS

/* styles for elements with class "highlight" */
.highlight {
  background-color: yellow;
}

o wu

Mo fẹ saami ọrọ kan ninu aami ipari.

O le fi CSS sinu iwe HTML rẹ ni awọn ọna mẹta:

  1. Opopo CSS, lilo awọn style ikalara lori ohun HTML ano
  2. CSS ti inu, lilo a <style> ano ninu awọn <head> ti HTML iwe rẹ
  3. CSS ita, ni lilo faili .css lọtọ ti o sopọ mọ iwe HTML rẹ nipa lilo awọn <link> ano ninu awọn <head> ti HTML iwe rẹ

Idahun CSS

CSS jẹ iyipada iyalẹnu ati pe o le ṣee lo lati ṣatunṣe ifihan ti awọn eroja ti o da lori ipinnu iboju, nitorinaa o le ni HTML kanna ṣugbọn kọ ọ. idahun si ipinnu ẹrọ:

/* media query for responsive design */
@media (max-width: 768px) {
  p {
    font-size: 14px;
  }
  #intro {
    font-size: 20px;
  }
}

CSS funmorawon

O le rii ninu apẹẹrẹ loke pe asọye wa, ibeere media, ati awọn aza pupọ ti o lo awọn alafo ati awọn ifunni laini lati ṣeto wiwo ti CSS. O jẹ adaṣe nla lati dinku tabi rọpọ CSS rẹ lori aaye rẹ lati dinku awọn iwọn faili ati, lẹhinna, akoko ti o to lati beere ati ṣe aṣa aṣa rẹ. Kii ṣe iye kekere… o le rii diẹ sii ju 50% awọn ifowopamọ lori diẹ ninu awọn apẹẹrẹ loke.

Ọpọlọpọ awọn atunto olupin n funni ni awọn irinṣẹ ti yoo rọpọ CSS laifọwọyi lori fo ati kaṣe faili ti o dinku ki o ko ni lati ṣe pẹlu ọwọ.

Kini SCSS?

Sassy CSS (SCSS) jẹ olupilẹṣẹ CSS kan ti o ṣafikun iṣẹ ṣiṣe afikun ati sintasi si ede CSS. O gbooro awọn agbara ti CSS nipa gbigba lilo awọn oniyipada, awọn alapọpọ, awọn iṣẹ, ati awọn ẹya miiran ti ko si ni CSS boṣewa.

Awọn anfani SCSS

  • Imudara imudara: Pẹlu lilo awọn oniyipada, o le fipamọ awọn iye si aaye kan ki o tun lo wọn jakejado iwe aṣa rẹ, jẹ ki o rọrun lati ṣetọju ati mu awọn aṣa rẹ dojuiwọn.
  • Eto to dara julọ: Pẹlu awọn alapọpọ, o le ṣe akojọpọ ati tun lo awọn eto ti awọn aza, jẹ ki iwe aṣa rẹ jẹ iṣeto diẹ sii ati rọrun lati ka.
  • Iṣẹ ṣiṣe ti o pọ si: SCSS pẹlu ọpọlọpọ awọn ẹya ti ko si ni CSS boṣewa, gẹgẹbi awọn iṣẹ, awọn ẹya iṣakoso (fun apẹẹrẹ boya/miran), ati awọn iṣẹ ṣiṣe iṣiro. Eleyi gba fun diẹ ìmúdàgba ati expressive iselona.
  • Iṣe ti o dara julọ: Awọn faili SCSS ti wa ni akojọpọ sinu CSS, eyiti o le mu iṣẹ dara si nipa idinku iye koodu ti o nilo lati ṣe atunwo nipasẹ ẹrọ aṣawakiri.

Awọn alailanfani SCSS

  • Ẹkọ ẹkọ: SCSS ni sintasi ti o yatọ lati CSS boṣewa, ati pe iwọ yoo nilo lati kọ ẹkọ sintasi tuntun yii ṣaaju ki o to le lo daradara.
  • Idiju afikun: Botilẹjẹpe SCSS le jẹ ki iwe aṣa rẹ jẹ iṣeto diẹ sii ati rọrun lati ṣetọju, o tun le ṣafihan idiju afikun si koodu koodu rẹ, paapaa ti o ko ba faramọ awọn ẹya tuntun ati sintasi.
  • Irinṣẹ: Lati lo SCSS, iwọ yoo nilo alakojọ lati tumọ koodu SCSS rẹ si CSS. Eyi nilo iṣeto ni afikun ati irinṣẹ irinṣẹ, eyiti o le jẹ idena si titẹsi fun diẹ ninu awọn olupilẹṣẹ.

Ni apẹẹrẹ yii ni isalẹ, koodu SCSS ṣe lilo awọn oniyipada lati tọju awọn iye ($primary-color ati $font-size) ti o le tun lo jakejado stylesheet. Koodu CSS ti o jẹ ipilẹṣẹ lati koodu SCSS yii jẹ deede, ṣugbọn ko pẹlu awọn oniyipada. Dipo, awọn iye ti awọn oniyipada ni a lo taara ni CSS.

$primary-color: blue;
$font-size: 16px;

body {
  font-size: $font-size;
  color: $primary-color;

  h1 {
    font-size: 2em;
    color: $primary-color;
  }
}

Ẹya miiran ti SCSS ti o ṣe afihan ni apẹẹrẹ yii jẹ awọn ara itẹle. Ninu koodu SCSS, awọn h1 aza ti wa ni iteeye laarin awọn body aza, eyi ti o jẹ ko ṣee ṣe ni boṣewa CSS. Nigbati koodu SCSS ba ti wa ni akojọpọ, awọn aza ti itẹ-ẹiyẹ naa yoo gbooro si awọn aṣa lọtọ ni koodu CSS.

Lapapọ, SCSS n pese ọpọlọpọ awọn anfani lori boṣewa CSS, ṣugbọn o ṣe pataki lati gbero awọn iṣowo-pipa ati yan irinṣẹ to tọ fun iṣẹ akanṣe rẹ ti o da lori awọn iwulo ati awọn ihamọ rẹ.

Douglas Karr

Douglas Karr jẹ CMO ti Ṣii awọn oye ati oludasile ti Martech Zone. Douglas ti ṣe iranlọwọ fun awọn dosinni ti awọn ibẹrẹ MarTech aṣeyọri, ti ṣe iranlọwọ ni aisimi ti o ju $ 5 bilionu ni awọn ohun-ini Martech ati awọn idoko-owo, ati tẹsiwaju lati ṣe iranlọwọ fun awọn ile-iṣẹ ni imuse ati adaṣe awọn tita ati awọn ilana titaja wọn. Douglas jẹ iyipada oni nọmba agbaye ti a mọye ati alamọja MarTech ati agbọrọsọ. Douglas tun jẹ onkọwe ti a tẹjade ti itọsọna Dummie ati iwe itọsọna iṣowo kan.

Ìwé jẹmọ

Pada si bọtini oke
Close

Ti ṣe awari Adblock

Martech Zone ni anfani lati pese akoonu yii fun ọ laisi idiyele nitori a ṣe monetize aaye wa nipasẹ wiwọle ipolowo, awọn ọna asopọ alafaramo, ati awọn onigbọwọ. A yoo ni riri ti o ba yọ ohun idena ipolowo rẹ bi o ṣe nwo aaye wa.