CSS është një gjuhë zyrtare që përdoret për të përshkruar pamjen e një dokumenti të krijuar duke përdorur një gjuhë shënjimi (HTML, XHTML, XML). Emri vjen nga anglishtja Cascading Style Sheets, që do të thotë "fletë stili kaskadë".

Pse të përdorni CSS

Qëllimi i CSS është të ndajë atë që përcakton pamjen faqe, nga përmbajtja e saj. Nëse dokumenti është krijuar me duke përdorur HTML, pastaj përcakton jo vetëm çdo element, por edhe mënyrën e paraqitjes së tij (ngjyra, fonti, pozicioni i bllokut etj.). Nëse fletët e stilit kaskadë janë të lidhura, atëherë HTML përshkruan vetëm rendin e objekteve. Dhe CSS është përgjegjëse për të gjitha pronat e tyre. Në HTML, mjafton të përshkruani një klasë pa renditur të gjitha stilet çdo herë.

Një teknologji e tillë:

• ofron zhvillim relativisht të thjeshtë dhe të shpejtë, sepse sapo të krijohet dizajni mund të aplikohet në shumë faqe;
• rrit fleksibilitetin dhe lehtësinë e redaktimit - mjafton të bëni ndryshime në CSS në mënyrë që dizajni të ndryshojë kudo;
• e bën kodin më të thjeshtë duke reduktuar përsëritjen e elementeve. Është më e lehtë për t'u lexuar për programuesit dhe robotët e kërkimit;
• përshpejton kohën e ngarkimit, sepse CSS mund të ruhet në cache në hapjen e parë, dhe vetëm struktura dhe të dhënat lexohen në ato pasuese;
• rrit numrin zgjidhje vizuale për të paraqitur përmbajtjen;
• ofron mundësinë për të aplikuar lehtësisht stile të ndryshme në të njëjtin dokument (për shembull, krijoni një version të përshtatur për pajisje celulare ose stile të veçanta për personat me shikim të dëmtuar).

Kjo do të thotë, tabelat kaskadë shërbejnë jo vetëm për të mishëruar dizajnin, por gjithashtu ndryshojnë rrënjësisht qasjen ndaj ndërtimit të sitit, duke thjeshtuar punën e zhvilluesve dhe duke siguruar fleksibilitet të zbatimit. Për këtë është CSS.

Zhvillimi i CSS

Nevoja për zhvillimin e CSS u njoh nga W3C në vitet 1990. Në vitin 1996, standardi CSS1 u miratua, duke ju lejuar të ndryshoni cilësimet e fontit, ngjyrën, atributet e tekstit, rreshtimet dhe dhëmbëzimet. Në 1998, CSS2 u lëshua, duke shtuar aftësinë për t'u përdorur faqosja e bllokut, tabela zanore, përmbajtje e krijuar, indekse, media e faqes. Versioni CSS3 rriti ndjeshëm mundësitë e stileve: u bë krijimi i aksesueshëm elementet e animuar pa Përdorimi i JavaScript, kishte mbështetje për anti-aliasing, hije, gradient, etj. Specifikimi u nda në module, secila prej të cilave filloi të zhvillohej veçmas. Modulet CSS4 janë zhvilluar që nga viti 2011. Mundësitë janë ende të përshkruara në versionet draft.

Struktura gjuhësore

CSS mund të karakterizohet me fjalë të thjeshta si një grup rregullash që përshkruajnë se si duhet të duket një element.

Një rregull përbëhet nga një përzgjedhës dhe një bllok deklarimi.

Përzgjedhës

Përzgjedhësi tregon se cili element do të aplikohet i përshkruar në Karakteristikat e CSS stil. Zgjedhësi mund të jetë çdo etiketë që është e formatuar (madhësia, ngjyra, etj.). Nëse keni nevojë të vendosni stile të ndryshme për një etiketë ose të aplikoni një stil për elementë të ndryshëm, përdoren klasa dhe një hyrje si "Tag.Class (vetia: vlera;)". Emri i klasës specifikohet me shkronja latine dhe mund të përmbajë një nënvizon ose vizë. Nëse nuk specifikoni një etiketë, por filloni hyrjen me ".Class", atëherë mund të përdorni rregullin për çdo etiketë. Nëse renditni disa klasa për një etiketë, të gjitha stilet e përshkruara do të aplikohen në të. Identifikuesi specifikon një emër unik për elementin që do të stilohet ose skriptohet. Regjistroni "#Identifier (vetia: vlera;)". Emri i identifikuesit përbëhet nga shkronja Alfabeti latin, vizat dhe vijat e poshtme lejohen. Për të aplikuar një identifikues në një etiketë specifike, specifikoni emrin e tij, pastaj pa një hapësirë ​​dhe pas shenjës së paundit, emrin e identifikuesit.

Blloku i reklamave

Blloku i deklarimit përbëhet nga çifte "pronë: vlera" (hyrja ndiqet gjithmonë me dy pika), të vendosura në mbajtëse kaçurrelë. Regjistrimet përfundojnë me një pikëpresje. CSS është i pandjeshëm ndaj skedave, hapësirave dhe rasteve. Zgjedhja e metodës së regjistrimit (kolona e futur ose thjesht në linjë) është në diskrecionin e zhvilluesit. Nëse për një përzgjedhës shkruhen kuptime të ndryshme për një pronë të vetme, atëherë hyrja më e ulët ka përparësi.

Lidhja CSS

CSS mund të lidhet me HTML në disa mënyra:

• brenda etiketës me atributin style. Nuk ka nevojë të specifikoni një përzgjedhës;
• shtoni etiketë

  Shembull teksti

  Nëse në dhjetor pjesë e tërëështë e barabartë me zero, atëherë lejohet të mos shkruhet. Shkrimi .7 dhe 0.7 është ekuivalent.

  Interesi

  Shënimi i përqindjes zakonisht përdoret në rastet kur duhet të ndryshoni vlerën në lidhje me elementi prind ose kur dimensionet varen nga kushtet e jashtme. Për shembull, një gjerësi e tabelës prej 100% do të thotë se do të përshtatet me madhësinë e dritares së shfletuesit dhe do të ndryshojë me gjerësinë e dritares (Shembulli 6-3).

  Shembulli 6.3. Rekord në përqindje

  HTML5 CSS 2.1 IE Cr Op Sa Fx

  Përmbajtja e tabelës

  Përqindjet nuk duhet të jenë numra të plotë, lejohen thyesat dhjetore, si p.sh. 56.8%.

  Dimensionet

  Për të vendosur përmasat elemente të ndryshme, CSS përdor njësi absolute dhe relative. Njësitë absolute janë të pavarura nga pajisja dalëse, ndërsa njësitë relative përcaktojnë madhësinë e një elementi në lidhje me një vlerë tjetër madhësie.

  Njësitë relative

  Njësitë relative zakonisht përdoret për të punuar me tekst, ose kur duhet të llogaritni përqindjen midis elementeve. Në tabelë. 6.1 liston njësitë kryesore relative.

  Njësia em është një vlerë e ndryshueshme që varet nga madhësia e shkronjave të elementit aktual (madhësia vendoset nëpërmjet fletës së stilit). veti e madhësisë së shkronjave). Çdo shfletues ka një madhësi teksti të integruar që zbatohet kur kjo madhësi nuk është caktuar në mënyrë eksplicite. Prandaj, fillimisht 1em e barabartë me madhësinë fontin e paracaktuar të shfletuesit ose madhësinë e shkronjave të elementit prind. Shënimi i përqindjes është identik me em, në kuptimin që vlerat 1em dhe 100% janë të barabarta.

  Njësia ex përcaktohet si lartësia e karakterit "x" në shkronja të vogla. ex i nënshtrohet të njëjtave rregulla si em , domethënë, është i lidhur me madhësinë e paracaktuar të shkronjave të shfletuesit ose me madhësinë e shkronjave të elementit prind.

  Një piksel është një pikë elementare e shfaqur nga një monitor ose një tjetër pajisje të ngjashme psh smartphone. Madhësia e pikselit varet nga rezolucioni i pajisjes dhe i saj specifikimet. Shembulli 6-4 tregon përdorimin e pikselave dhe ems për të vendosur madhësinë e shkronjave.

  Shembulli 6.4. Përdorimi i njësive relative

  HTML5 CSS 2.1 IE Cr Op Sa Fx

  Titulli 30 piksel

  Madhësia e tekstit 1,5 em

  Rezultati i këtij shembulli është paraqitur më poshtë (Figura 6.1).

  Oriz. 6.1. Madhësia e tekstit në njësi të ndryshme

  Njësi absolute

  Njësitë absolute përdoren më rrallë se ato relative dhe zakonisht kur punohet me tekst. Në tabelë. 6.2 liston njësitë kryesore absolute.

  Ndoshta njësia më e zakonshme është pika, e cila përdoret për të treguar madhësinë e shkronjave. Megjithëse jemi mësuar të masim gjithçka në milimetra dhe njësi të ngjashme, pika është ndoshta e vetmja njësi e sistemi metrik matje, e cila përdoret kudo. Dhe të gjitha faleminderit redaktorët e tekstit dhe sistemet e publikimit. Shembulli 6.5 tregon përdorimin e pikave dhe milimetrave.

  Shembulli 6.5. Përdorimi i njësive absolute

  HTML5 CSS 2.1 IE Cr Op Sa Fx

  Titulli me 24 pikë

  Zhvendos tekstin djathtas me 30 milimetra

  Rezultati i përdorimit të njësive absolute është paraqitur më poshtë (Figura 6.2).

  

  Oriz. 6.2. Madhësia e tekstit në njësi të ndryshme

  Kur vendosni përmasat, sigurohuni që të specifikoni njësi matëse, si p.sh. gjerësia: 30 px. Përndryshe, shfletuesi nuk do të jetë në gjendje të tregojë rezultatin e dëshiruar, sepse nuk e kupton se çfarë madhësie ju nevojitet. Njësitë nuk shtohen vetëm kur vlerë zero(diferenca: 0).

  Ngjyrë

  Stilet mund të vendosen në tre mënyra: vlerë heksadecimal, me emër dhe në format RGB.

  Sipas vlerës heksadecimal

  Numrat heksadecimal përdoren për të specifikuar ngjyrat. Sistemi heksadecimal, ndryshe nga sistemi dhjetor, bazohet, siç nënkupton edhe emri i tij, në numrin 16. Numrat do të jenë si më poshtë: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A. , B, C , D, E, F. Numrat nga 10 në 15 zëvendësohen me shkronja latine. Numrat më të mëdhenj se 15 inç sistemi heksadecimal formohet nga bashkimi i dy numrave në një. Për shembull, numri 255 in sistemi dhjetor korrespondon me numrin FF në heksadecimal. Për të shmangur konfuzionin në përcaktimin e sistemit të numrave, më parë numër heksadecimal vendosni simbolin hash #, për shembull #666999. Secila nga tre ngjyrat - e kuqe, jeshile dhe blu - mund të marrë vlera nga 00 në FF. Kështu, emërtimi i ngjyrës ndahet në tre komponentë #rrggbb, ku dy karakteret e para shënojnë përbërësin e kuq të ngjyrës, dy të mesit shënojnë komponentin jeshil dhe dy të fundit tregojnë komponentin blu. Lejohet përdorimi i formës së shkurtuar të formës #rgb, ku çdo karakter duhet të dyfishohet (#rrggbb). Për shembull, hyrja #fe0 trajtohet si #ffee00.

  me emër

  Shfletuesit mbështesin disa ngjyra me emër. Në tabelë. 6.3 tregon emrat, kodin heksadecimal dhe përshkrimin.

  Tab. 6.3. Emrat e ngjyrave

  Emri	Ngjyrë	Kodi	Përshkrim
  të bardhë		#fffff ose #fff	E bardha
  argjendi		#c0c0c0	Gri
  gri		#808080	Gri e errët
  e zezë		#000000 ose #000	E zeza
  ngjyrë gështenjë		#800000	E kuqe e erret
  e kuqe		#ff0000 ose #f00	E kuqe
  portokalli		#ffa500	portokalli
  e verdhe		#ffff00 ose #ff0	E verdhe
  ulliri		#808000	Ulliri
  gëlqere		#00ff00 ose #0f0	jeshile e hapur
  jeshile		#008000	E gjelbër
  ujore		#00ffff ose #0ff	Blu
  blu		#0000ff ose #00f	Blu
  marina		#000080	BLU e erret
  ngjyrë kafe		#008080	BLU jeshile
  fuchsia		#ff00ff ose #f0f	Rozë
  vjollcë		#800080	Vjollcë

  Me RGB

  Ju mund të përcaktoni një ngjyrë duke përdorur vlerat e kuqe, jeshile dhe blu në terma dhjetorë. Vlera e secilës prej tre ngjyrave mund të marrë vlera nga 0 në 255. Ju gjithashtu mund të vendosni ngjyrën si përqindje. Së pari, specifikohet fjala kyçe rgb, dhe më pas në kllapa, të ndara me presje, specifikohen përbërësit e ngjyrave, për shembull, rgb(255, 0, 0) ose rgb(100%, 20%, 20%).

  Shembulli 6.6 paraqet mënyra të ndryshme vendosja e ngjyrave për elementët e faqes së internetit.

  Shembulli 6.6. Paraqitja e ngjyrave

  HTML5 CSS 2.1 IE Cr Op Sa Fx

  Lorem ipsum dolor sit amet

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

  Rezultati i këtij shembulli është paraqitur në Fig. 6.3.

  

  Adresat

  Adresat (URI, Identifikuesit Uniform të Burimeve, Identifikuesi Uniform i Burimeve) përdoren për të specifikuar shtegun drejt një skedari, për shembull, për të instaluar foto sfondi Në faqe. Për këtë, përdoret fjala kyçe url(), relative ose adresë absolute dosje. Në këtë rast, adresa mund të specifikohet në një ose opsionale citate të dyfishta(shembulli 6.7).

  Shembulli 6.7. Adresa e skedarit grafik

  HTML5 CSS 2.1 IE Cr Op Sa Fx

  Kujdes, faqja e kërkuar nuk u gjet!

  Në këtë shembull, zgjedhësi i trupit përdor një adresë absolute për skedar grafik, dhe në përzgjedhësin div është relative.

  Fjalë kyçe

  Fjalët kyçe përdoren në mënyrë aktive si vlera, të cilat përcaktojnë rezultatin e dëshiruar të vetive të stilit. Fjalë kyçe shkruar pa thonjëza.

  Djathtas: P (lidhja e tekstit: djathtas; )
  E gabuar: P (lidhja e tekstit: "e drejtë"; )

  Pyetje për të kontrolluar

  1. Cili rresht përmban gabimin?

  1. madhësia e shkronjave: 20 px
  2. madhësia e shkronjave: 0
  3. madhësia e shkronjave: 1.5em
  4. madhësia e shkronjave: 5 mm
  5. madhësia e shkronjave: 300 ex

  2. Cila shprehje është shkruar saktë?

  1. ngjyra: #fco
  2. gjerësia: "auto"
  3. madhësia e shkronjave: blu
  4. sfond: e kuqe
  5. kufiri: asnjë

  3. Çfarë madhësie në pikë do të ketë teksti

  Shembull teksti

  nëse stili i mëposhtëm është vendosur në faqe?

  BODY (madhësia e shkronjave: 24 pt; )
  P (madhësia e shkronjave: 50%; )
  SPAN (madhësia e shkronjave: 1.5em; )

  4. Anya dëshiron të instalojë ngjyrë vjollce sfondi i faqes në internet. Cila është vlera më e mirë për pronën e sfondit?

  1. #cbd1e8
  2. rgb(121, 232, 47)
  3. #b6b7be
  4. rgb(205%, 85%, 53%)

  5. Çfarë nuk shkon me stilin e mëposhtëm?

  img (lundrues: majtas; gjerësia e kufirit: 3; shfaqja: blloku)

  1. Mungon pikëpresja në fund të hyrjes.
  2. Asnjë njësi nuk u specifikua për pronën me gjerësi kufiri.
  3. Vlerat e majta dhe të bllokut shkruhen pa thonjëza.
  4. vetitë me gjerësi kufiri nuk ekziston.
  5. Vlera e bllokut e vetive të ekranit nuk lejohet në imazhe.

  Përgjigjet

  1.madhësia e shkronjave: 1.5em

  5. Njësitë e pronës me gjerësi kufiri nuk janë të përcaktuara.

  Ne u liruam libër i ri"Marketingu i përmbajtjes në në rrjetet sociale: Si të futeni në kokën e abonentëve dhe të bini në dashuri me markën tuaj.

  Abonohu

  

  CSS është një gjuhë për formimin e pamjes së një dokumenti të krijuar me një gjuhë shënjimi. CSS zakonisht përdoret si një mjet për të përshkruar faqet e internetit që janë shkruar më parë në XHTML dhe .

  Për më tepër, CSS mund të përdoret me dokumente të tjera si XML, më të përdorurat janë dokumentet XUL dhe SVG.

  Për të kuptuar se çfarë është CSS, le të shohim një shembull të thjeshtë. Kur një punonjës i redaksisë së një gazete ose reviste bën paraqitjen e botimit, ai bën shënime, sipas të cilave më pas zhvillohet pamja e materialit të përfunduar. Për shembull: "theksoni titullin me të kuqe", "indent", "rrisni distancën midis tyre blloqe informacioni" etj. Kur punoni me sajte, nuk mund të shkruani shënime të tilla në gjuhë të thjeshtë, shfletuesi nuk do të jetë në gjendje t'i lexojë ato. Në mënyrë që ai të marrë parasysh shenjat, ju duhet t'i shkruani ato në CSS.

  Si funksionon CSS

  Parimi i funksionimit bazohet në faktin se CSS gjen një të caktuar Elementi HTML(header) dhe përcakton për të pronë specifike(ngjyrë) për t'i dhënë një vlerë (e kuqe). Është shkruar kështu:

  

  CSS përdoret për të marrë vendime stilistike, si dhe për paraqitjen e dokumenteve Lloji HTML: detyrat e lartësisë, kolonave, vendosja e elementeve etj.

  Si dhe ku të shkruani CSS

  • CSS mund të shkruhet si një atribut direkt në HTML.

  

  • Etiketa mund të aplikohet