[SKAN MŪZIKA]
DAGS LOIDS: Tātad, uzņemsim vēl vienu video, lai runātu par vēl vienu
valodu.
Šoreiz parunāsim par CSS.
Tātad CSS, kas ir saīsinājums no Cascading Style Sheets, ir vēl viena
valoda, ko lietojam, veidojot vietnes.
Padomājiet par to šādi.
Ja HTML ir tas, ko mēs izmantojam, lai sakārtotu saturu, ko vēlamies
ievietot savā lapā, CSS ir rīks, ko parasti izmantojam, lai pielāgotu
mūsu vietņu izskatu un lietotāja pieredzi, mijiedarbojoties ar mūsu
vietni.
Līdzīgi kā HTML, CSS nav programmēšanas valoda.
Tai nav loģikas.
Tai nav mainīgo.
Tai nav nekādu ar plūsmu saistītu lietu, ko dara C valoda.
Tā ir stila valoda.
Un tās sintakse ir diezgan vienkārša, un tajā ir tikai aprakstīts, kā
mūsu lapas elementos ir jāmaina noteikti HTML elementi.
Šajā nolūkā, ja vēl neesat skatījušies mūsu videoklipu par HTML vai
vispār nepārzināt HTML, vispirms varat apskatīt to, jo šī diskusija
par CSS būs atkarīga no noteiktām zināšanām par HTML.
Tātad, šeit ir patiešām vienkārša CSS stila lapa.
Pat ja jūs nekad iepriekš neesat programmējuši ar CSS, esmu
pārliecināts, ka varat precīzi saprast, ko dara šī stila lapa.
Ko tā dara?
Tā attiecas uz mūsu tīmekļa lapas pamattekstu, visu, kas atrodas
starp pamatteksta tagiem mūsu HTML lapā, un iestata zilu šīs lapas
fona krāsu.
Tā ir ļoti vienkārša stila lapa.
Patiesībā tā ir ļoti cilvēkiem draudzīga valoda, CSS.
Tātad, pat ja jūs to nekad iepriekš neesat izmantojuši, jūs,
iespējams, varētu uzminēt, ko tā izdarīja.
Faktiski, ja mēs ielādētu lapu, kurā šī stila lapa ir kaut kā
iegulta, mūsu lapas fona krāsa būtu zila, nevis standarta balta.
Tātad, kā mēs veidojam stila lapas?
Pirmkārt, mums ir jāidentificē atlasītājs.
Pēdējā piemērā šis atlasītājs bija rumpis.
Tad mums ir atvērtas figūriekavas, un mēs sāksim definēt šī
atlasītāja stila lapu.
Figūriekavās mums ir tikai galveno vērtību pāru saraksts.
Iepriekšējais vērtību pāris bija - zila fona krāsa, semikols, bet mēs
varētu darīt vairāk un vairāk šādu.
Uz šo tagu, atlasītāja rumpi, var attiekties vairākas lietas.
Katrs no tiem ir atdalīts ar semikolu, un mēs katru no tiem saucam
par deklarāciju, CSS deklarāciju.
Kad esam pabeiguši ar visu stilu, ko vēlamies pielietot konkrētajam
tagam, mums tikai ir nepieciešams aizvērt figūriekavas, lai pabeigtu
stila lapu, un tā esam pabeiguši stila lapas definēšanu konkrētajam
atlasītājam.
Kādi ir daži izplatītākie CSS rekvizīti?
Nu, varbūt jūs vēlaties kaut kam uzlikt apmales.
Tātad jūs varat teikt, apmale, tā būtu jūsu atslēga, un tad jūsu
vērtības būtu - kādu stilu, krāsu un platumu vēlaties.
Tātad stils varētu būt: nepārtraukta līnija, punktlīnija, pārtraukta
līnija, izliekta līnija, kas būtu viļņveida līnija.
Varbūt vēlaties, lai tā būtu zila, melna vai zaļa.
Varbūt vēlaties, lai tā būtu 1 vai 2 vai 10 pikseļu plata.
Jūs varat norādīt visas šīs lietas.
Varbūt vēlaties iestatīt savas lapas fona krāsu noteiktā veidā.
Mēs to jau redzējām, iestatot rumpja fonu zilā krāsā.
Tad jūs varat izmantot atslēgas vārdu, tāpēc CSS ir noteiktas krāsas,
kas tajā ir iebūvētas - zila, zaļa, melna, ļoti vienkāršas krāsas,
kuras mēs zinām.
Bet jūs varat arī norādīt jebkuru hex spektra krāsu, kuru vēlaties.
Atcerieties, ka krāsas var identificēt pēc trīs hex skaitļu kopas no
0 līdz 255, rg un b, sarkanā, zaļā un zilā komponenta.
Un tāpēc mēs varam norādīt jebkuru vēlamo krāsu, nevis izmantot zilu,
zaļu vai melnu. Izmantojot tēmturi un pēc tam sešus hex ciparus, dos
mums sešu ciparu krāsu.
Tātad tā ir fona krāsa.
Mums ir arī priekšplāna krāsa, kas parasti ir jūsu lapas teksts.
Un jūs varētu to izdarīt līdzīgi, izmantojot atslēgas vārdu un vai
hex sešus ciparus.
Tātad augšpusē jūs varat norādīt jebkuru vēlamo krāsu savas lapas
tekstam uz noteiktas fona krāsas.
Varat arī mainīt un apstrādāt fontu un veidu, kā teksts tiek
atveidots lapā.
Tātad jūs varat mainīt fonta lielumu.
Varat izmantot atslēgvārdus, piemēram, extra, extra small vai xx
small, vai medium, large utt.
Varat izmantot fiksētos punktus, 10 punktus, 12 punktus un tā tālāk.
Varat izmantot procentus, 80%, 20%, kur 100% ir noklusējuma fonta
lielums, kas parasti ir apmēram 11 vai 12 punkti.
Vai pat varat to balstīt uz nesen izmantoto fonta lielumu.
Ja jūs tikko uzrakstījāt kaut ko un vēlaties, lai tas būtu mazāks,
bet precīzi nezināt, kādu izmēru vēlaties, tad varat vienkārši teikt
- font size smaller.
Un tā pamatā būs tieši augšā esošā fonta lielums.
Un jūs varat iegūt mazāku vai lielāku.
Tāpēc ir daudz dažādu veidu, kā norādīt fonta lielumu.
Varat arī norādīt, kādu fontu saimi vēlaties.
Ja jums ir noteikts nosaukums, CSS valodā — mēs par to šeit
nerunāsim — varat definēt ļoti konkrētu fontu un iegult to savā lapā.
Varat arī izmantot vispārīgus nosaukumus.
Ir daudz tīmeklim drošu fontu, kas ir iepriekš definēti CSS valodā.
Un, ja pēdējo 20 gadu laikā esat Microsoft Office lietotāji,
iespējams, jau esat iepazinušies ar daudziem šiem tīmeklim drošiem
fontiem, piemēram, Times New Roman, Arial, Courier New, Georgia,
Tahoma, Verdana un tā tālāk.
Tie visi tiek uzskatīti par tīmeklim drošiem fontiem.
Un patiesībā daļa no iemesla, kāpēc tie radās, bija izmantot tīmekļa
izveidošanai — katrai lapai bija piekļuve šim noklusējuma fontu
kopumam ar dažādiem serifiem, un visam šim fontu saturam, kurā mēs
neiedziļināsimies, bet tie parasti ir ir pieejams jūsu CSS, pat ja
fontus nedefinējat citādi.
Visbeidzot, varat līdzināt tekstu. Tā vietā, lai pēc noklusējuma tas
būtu līdzināts pa kreisi, jūs varētu līdzināt to pa labi vai arī to
centrēt vai taisnot, lai tas pieskartos abām malām.
Šīs ir visas iespējas, ko varat izmantot, lai mainītu teksta izskatu
un to, kā tas tiek parādīts jūsu lapā.
Jūsu atlasītājiem nav jābūt tikai tagiem.
Iepriekš mēs redzējām rumpja taga atlasītāju, un tagu atlasītājs
izskatās tieši tā.
Jūs piešķirat tagam nosaukumu un pēc tam definējat šī taga stila lapu.
Bet jūs varat arī darīt kaut ko, ko sauc par ID atlasītāju.
ID atlasītājs izskatās diezgan līdzīgi.
Taču ievērojiet, ka tagad es neizmantoju HTML tagu, bet šajā gadījumā
izmantoju #unique jeb tēmturis unique.
Ja atceraties mūsu videoklipu par HTML, mēs runājām par to, kā tagiem
var būt atribūti.
Un viens atribūts, kas attiecas uz gandrīz visiem HTML tagiem, bet
mēs par to nerunājām, ir kaut kas, ko sauc par ID tagu.
Tātad šis konkrētais CSS attieksies tikai uz HTML tagu, kuram ir ļoti
konkrēts ID, kuru esat piešķiruši nosaukumu.
Tātad, ja jūsu kodā, kaut kur HTML datnē ir tags un jūs norādāt - ID
ir vienāds ar unique - kā šī taga atribūtu,, šī konkrētā stila lapa
tiks pielietota tikai šim tagam ar ID unique.
Varat arī veikt darbību, ko sauc par klases atlasītāju.
Tātad papildus ID atribūtiem varat pievienot arī klases atribūtu HTML
tagiem.
Un, kad izmantojat klases atribūtu, to var pielietot vairākiem tagiem.
Tātad, ja jums ir vairākas līdzīgas lietas, iespējams, vēlaties
teikt: atveriet tagu bla-bla-bla, klase ir vienāda ar students.
Un tad šī konkrētā stila lapa attiektos uz katru tagu, kur klase ir
students.
Šajā gadījumā mēs iestatītu fona krāsu uz dzeltenu, un mēs iestatītu
necaurredzamību - kas ir tags, par kuru mēs nerunājām, bet tas tikai
attiecas uz to, cik lielā mērā kaut kas ir caurspīdīgs - šajā
gadījumā uz 70%.
Ir divas stila lapu rakstīšanas iespējas.
Varat tās ierakstīt tieši savā HTML, ievietojot stila lapas starp
stila tagiem.
Un šie stila tagi ievietosies jūsu tīmekļa lapas galvenajos tagos.
Iespējams, vēlamākais veids, kā to izdarīt, ir uzrakstīt atsevišķu
.css datni un pēc tam sasaistīt to ar savu dokumentu, izmantojot
saišu tagus.
Saišu tagi atkal atšķiras no hipersaitēm, ja atceraties mūsu HTML
videoklipu.
Un saišu tagi ir veids, kā mēs ievelkam atsevišķas datnes.
Tas ir līdzīgs #include tīmekļa programmēšanai.
Tāpēc apskatīsim table.HTML.
Ja atceraties no mūsu HTML video, es parādīju ļoti vienkāršas
reizināšanas tabulas piemēru, kas izskatījās diezgan neglīta, un,
iespējams, ir kāds veids, kā to uzlabot ar CSS, lai tā vairāk
izskatītos pēc reizināšanas tabulas vai kaut kā tāda, kas ir salīmēts
kopā bez faktiska dalījuma starp rindām un kolonnām.
Tāpēc pāriesim pie CS50 IDE un apskatīsim, kā CSS var kaut kā uzlabot
to, ar ko mēs sākām iepriekš, un padarīt to daudz labāku.
Tātad mēs tagad esam CS50 IDE, un, ja nepazīstat, mēs šajā tabulā
parādīsim to HTML lapu.
Table.HTML būtībā tikai definē saturu — tai vajadzēja būt četri reiz
četri reizināšanas tabulai.
Tas ir diezgan vienkārši.
Un mēs domājam, ka tā izskatītos diezgan sakarīga.
Bet patiesībā, kad mēs priekšskatām šo lapu, mēs redzam, ka tā ir
neglīta, vai ne?
Skaidrs, ka šeit ir rindas un kolonnas.
Ir sava veida atdalīšana.
Bet tā nav jēgpilna atdalīšana.
Patiesībā mēs šeit nesaņemam gana daudz informācijas.
Un starp rindām un kolonnām nav atdalīšanas horizontālo vai vertikālo
noteikumu ziņā.
Mēs, iespējams, varētu to mazliet uzlabot.
Tāpēc mēģināsim.
Tāpēc es aizvēršu šo cilni šeit.
Un es aizvēršu savu table.HTML, un man šeit ir cita versija, ko sauc
par table2.HTML.
Mēs to atvērsim.
Lapas rumpis ir gandrīz tāds pats, bet es esmu nedaudz mainījis
augšdaļu.
Un es atritināšu uz šejieni.
Ņemiet vērā, ka šoreiz es izmantoju iegultos stila tagus.
Esmu atvēris stila tagu un tagad definēju CSS stila lapu tieši tajā.
Man ir stila lapa, kurā teikts: tabula.
Tas ir mans tagu atlasītājs.
Es neizmantoju punktu vai tēmturi, ko es būtu darījis, ja izmantotu
ID vai klases atlasītāju.
Man šeit ir tagu atlasītājs — tabula.
Šis stils attieksies uz katru tabulas tagu.
Acīmredzot es vēlos savā tabulā ievietot vienu pikseļu platu, kārtīgu
zilu rāmi.
Izklausās, ka tas, iespējams, labos situāciju, vai ne?
Mums viss izskatīsies daudz labāk.
Tātad tas ir labi.
Stilistiski es tikko šeit ievietoju savu stila lapu.
Tas noteikti ir pieņemams veids, kā to izdarīt.
Apskatīsim, kā tas izskatās.
Tāpēc es atgriezīšos šeit un apskatīšu savu table2.HTML.
Nu, tas nav gluži tas, ko es gribēju, bet tas ir tieši tas, ko mēs
lūdzām.
Mēs teicām, ka šis stils tiks piemērots mūsu tabulai.
Mūsu tabulai tagad ir viena pikseļa plata, kārtīgs zils rāmis.
Mēs faktiski netiekam pie tabulas šūnām.
Mēs tikai tiekam līdz tabulai.
Tātad CSS nostrādāja.
Mūsu tabulai tā ir pielietojusi stila lapu.
Bet nedarīja gluži to, ko gribējām.
Kā mēs varam likt tai darīt to, ko mēs vēlamies?
Apskatīsim vēl vienu versiju table3.HTML.
Tāpēc es vienkārši aizvēršu šīs cilnes.
Es atgriezīšos šeit savā datņu kokā un atvēršu table3.HTML.
Atkal, sākumā tas izskatīsies diezgan līdzīgi.
Taču ievērojiet, ka šoreiz tā vietā, lai izmantotu tieši tur iegultu
stila lapu, es izveidošu saiti stila lapā, izmantojot saites tagu.
Tāpēc es acīmredzot veidoju saiti stila lapā, ko sauc par tables.CSS,
un šis - rel vienāds ar stylesheet - nozīmē tikai to, kas ir šī datne
attiecībā pret to, ko es daru, tā ir stila lapa, ko es izmantoju
savai tīmekļa vietnei.
Tātad, ja es patiešām vēlos redzēt, ko es daru ar CSS, man ir jāatver
arī datne table.CSS.
Tāpēc mēs atgriezīsimies šeit vēlreiz pie mūsu datņu koka.
Ir table.CSS.
Mēs to atvērsim.
Tagad mēs redzam nedaudz no CSS.
Kā redzams, man šeit notiek pāris lietas.
Acīmredzot es vēlos ap savu tabulu novilkt piecus pikseļus platu,
kārtīgu sarkanu rāmi.
Mēs jau zinām, ka tas notiks tikai pa perimetru.
Mēs to redzējām table2.HTML.
Ar katru rindu es acīmredzot vēlos norādīt, ka rindas augstums ir 50
pikseļi.
Tāpēc katrai rindai atcerieties, ka to dara tr tags, es veidoju to 50
pikseļu augstu.
Visbeidzot, man ir šāds komentārs.
Un šādi mēs komentējam CSS valodā.
Tas ir ļoti līdzīgs Seize Block komentāru sintaksei - slīpsvītra,
zvaigzne.
Viss teksts, ko vēlaties.
Tomēr CSS valodā nav slīpsvītru.
Īsiem iekļautiem komentāriem mums ir jāizmanto šis konkrētais formāts.
Šķiet, ka savos td tagos daru daudzas lietas.
Atcerieties td tagus vai tabulas datus, kas patiesībā ir tikai
kolonnas mūsu rindu iekšpusē, un ir skaidrs, ka katrai manas tabulas
datu daļai es vēlos iestatīt fona krāsu melnu, baltu, priekšplāna
krāsu.
Tātad šis būs manas lapas teksts.
Es vēlos lielu fontu, 22 punktu fontu, un es vēlos, lai tas būtu no
fontu saimes Georgia.
Tāpēc man nebūs noklusējuma fonta.
Es norādīšu Georgia, kas ir viens no tiem tīmeklim drošiem fontiem,
ko esam redzējuši iepriekš.
Es vēlos, lai mans teksts tiktu centrēts, lodziņa vidū. Es nevēlos,
lai tas būtu līdzināts pa kreisi vai pa labi.
Un es vēlos, lai manas kolonnas platums arī būtu 50 pikseļi.
Apskatīsim, kā tas izskatās, un noskaidrosim, vai tas ir uzlabojums.
Tāpēc es došos uz table3.HTML, kas, atcerieties, ietver table.CSS kā
saiti, un mēs to priekšskatīsim.
Tā ir daudz labāk, vai ne?
Tā faktiski sāk izskatīties vairāk pēc reizināšanas tabula.
Man ap tabulu ir sarkans rāmis, bet tagad esmu arī norādījis, ka
katra rinda ir 50 pikseļu plata vai 50 pikseļus augsta —
atvainojiet — katra kolonna ir 50 pikseļu plata.
Katras kolonnas datiem - tikai datiem - ir melns fons.
Tāpēc tur ir šīs baltās līnijas.
Tā kā atstarpe starp visām šīm šūnām, tā pati par sevi nav robeža, es
tikai aizpildu šūnas, kas faktiski veido tabulas rāmi, kas acīmredzot
pastāvēja visu laiku, tās bija tikai plānas, baltas līnijas.
Tagad tās ir redzamas.
Tagad tās parādās ekrānā.
Un tāpēc šī ir ļoti vienkārša stila lapa, ko esmu pielietojis, un
tagad mana tabula izskatās vairāk kā četri reiz četri reizināšanas
tabula, nevis vienkārši juceklis, kurā viss ir skaidrs - rindas un
kolonnas, bet nav īpaši labi sakārtots.
Mēs tiešām tikai pavirši pieskaramies tam, ko varat darīt ar CSS.
Par laimi CSS dokumentācija ir diezgan vienkārša.
Jūs izmantosit vairākus tās atribūtus diezgan bieži.
Tos, par kuriem mēs runājām iepriekš šajā videoklipā.
Ir vairāki, kurus, iespējams, neizmantosit vispār.
Un tas arī ir labi.
Bet tikai ziniet, ka tur ir daudz dokumentācijas.
Tātad, pat ja mēs neaptvērām visu, jūs noteikti nepaliksit vieni.
Bet ar CSS ir patiešām jautri eksperimentēt.
Un es ļoti iesaku jums paspēlēties ar savām tīmekļa lapām un
noskaidrot, ko jūs varat mainīt to izskatā un sajūtās, lai uzlabotu
jūsu lapas apmeklēšanas pieredzi.
Es esmu Dags Loids.
Šis ir CS50.