Mēs esam izskatījuši daudzas metodes, kā veidot lapas elementus, piemēram, teksta informāciju, saites, attēlus, virsrakstus, taču ar to visu vēl nepietiek. Savos rakstos es bieži izmantoju HTML elementus, piemēram, tabulas, jo vairumā gadījumu tie Tie palīdz sakārtot svarīgu informāciju un atvieglo tās pasniegšanu.
Šajā rakstā es jūs iepazīstināšu ar HTML tabulu veidošanas sarežģītībām, un jūs uzzināsit jaunus CSS rekvizītus, kas izstrādāti šo mērķu sasniegšanai.
Hiperteksta iezīmēšanas valoda HTML ir nodrošinājusi mums daudz iespēju saistīt CSS stilus ar desmit unikāliem tagiem, kas paredzēti darbam ar tabulām, iesaku tos atkārtot pirms tālākas izpētes:
Tag
Apraksts
Nosaka tabulas saturu.
Definē tabulas nosaukumu.
Definē tabulas galvenes šūnu.
Definē tabulas rindu.
Definē tabulas datu šūnu.
Izmanto, lai tabulā ietvertu grupas galveni (tabulas galvene).
Izmanto, lai saturētu tabulas "ķermeni".
Izmanto, lai saturētu tabulas “kājeni”.
Definē norādītos kolonnas rekvizītus katrai taga kolonnai
) apakšējo polsterējumu iestatām uz 19 pikseļiem. Ceru, ka nepāra skaitļi jūs netraucē :)
Mūsu piemēra rezultāts:
Telpa starp šūnām
Pēc iepriekš aplūkotā piemēra jūs, iespējams, pamanījāt, ka mums joprojām ir atstarpe starp visām tabulas šūnām. Apskatīsim, kā noņemt atstarpi starp tabulas šūnām vai palielināt to.
Lai iestatītu attālumu starp blakus esošo šūnu apmalēm, ir jāizmanto CSS rekvizīts border-spacing.
Mainot atstarpi starp tabulām
apmales atstarpe: 30 pikseļi 10 pikseļi;
1
2
3
2
3
apmales atstarpe: 0;
1
2
3
2
3
apmales atstarpe: 0,2 em;
1
2
3
2
3
Šajā piemērā mēs:
peldēt: pa kreisi). Ja esat palaidis garām peldošo elementu tēmu, vienmēr varat atgriezties pie tās šajā apmācībā - "".
Turklāt mēs iestatījām tabulu labo malu uz 30 pikseļiem un iestatām tabulu vertikālo izlīdzināšanu (elementa augšdaļa ir izlīdzināta ar augstākā elementa augšdaļu). Šajā rakstā mēs atgriezīsimies pie šī īpašuma detalizētas apskates.
) – drosmīgs stils.
Tabulas šūnām (galvenes un datu šūnām) mēs iestatījām 1 pikseļu viengabala apmali ar #F50 hex krāsu un iestatām 19 pikseļu polsterējumu no visām pusēm.
Pirmajam galdiņam ar klasi .vispirms mēs iestatām atstarpi starp tabulas šūnām (apmales atstarpes rekvizīts) uz 30 pikseļi 10 pikseļi otrajai tabulai ar klasi .otrais vienāds ar nulli, trešajām tabulām ar klasi .trešais vienāds ar 0,2 em.
Lūdzu, ņemiet vērā, ka, ja apmales atstarpes rekvizītā ir norādīta tikai viena garuma vērtība, tas norāda intervālus gan horizontāli, gan vertikāli, un, ja ir norādītas divas garuma vērtības, tad pirmā nosaka horizontālo attālumu, bet otrā vertikāli. . Attālumu starp blakus esošo šūnu robežām var norādīt CSS vienībās (px, cm, em utt.). Negatīvās vērtības nav atļautas.
Mūsu piemēra rezultāts:
Rādīt apmales ap tabulas šūnām
Tu vari teikt: - tātad, mēs noņēmām atstarpi starp šūnām, izmantojot apmales atstarpes rekvizītu ar vērtību 0 , bet kāpēc mūsu šūnu robežas tagad krustojas?
Dubultās apmales rodas tāpēc, ka vienas šūnas apakšējā robeža tiek pievienota tās šūnas augšējai robežai, kas atrodas zem tās, līdzīga situācija rodas šūnu malās un tas ir loģiski no tabulas attēlojuma viedokļa, bet par laimi, ir veids, kā pateikt pārlūkprogrammai, ka mēs nevēlamies redzēt tik vaļīgu šūnu apmaļu darbību.
Lai to izdarītu, jums ir jāizmanto CSS rekvizīts border-collapse. Savādi, bet rekvizīta apmales-collapse izmantošana ar sakukšanas vērtību ir labākais veids, kā noņemt atstarpi starp šūnām, starp tām neveidojot dubultas apmales.
Salīdzināsim apmaļu uzvedību, izmantojot apmales atstarpes rekvizītu ar vērtību 0 un border-collapse rekvizītu ar sakļautības vērtību:
Piemērs apmaļu parādīšanai ap tabulas šūnām
apmales atstarpe: 0;
1
2
3
2
3
border-collapse: sabrukums;
1
2
3
2
3
Šajā piemērā mēs:
Mēs padarījām savas tabulas peldošas un pārvietojām tās pa kreisi (peldām: pa kreisi), iestatījām to ārējo malu labajā pusē uz 30 pikseļiem.
Iestatiet tabulas nosaukumu (tag
) – drosmīgs stils.
Tabulas šūnām (galvenes un datu šūnām) mēs iestatījām 5 pikseļu viengabala apmali ar sešstūra krāsu #F50 un iestatījām fiksētu platumu 50 pikseļus un 75 pikseļu augstumu.
Pirmajam galdiņam ar klasi .vispirms mēs iestatām atstarpi starp tabulas šūnām uz nulli (robežas atstarpe : 0 ;), bet otrajai tabulai ar klasi .otrais iestatiet border-collapse rekvizītu uz sakļaut , kas, ja iespējams, sakļauj šūnu robežas vienā.
Mūsu piemēra rezultāts:
Tukšu šūnu uzvedība
Varat izmantot CSS, lai iestatītu, vai ir jāparāda tabulas tukšo šūnu apmales un foni. Šo darbību kontrolē rekvizīts tukšas šūnas, kas pēc noklusējuma, kā jūs, iespējams, pamanījāt iepriekšējos piemēros, parāda tukšas šūnas.
Pāriesim pie piemēra:
Tukšu tabulas šūnu parādīšanas piemērs
tukšas šūnas: parādīt;
1
2
3
2
☺
3
☺
tukšas šūnas: slēpt;
1
2
3
2
☺
3
☺
Lai saprastu, kā darbojas tukšo šūnu rekvizīts no šī piemēra, ir ļoti vienkārši, ja tas ir iestatīts uz hide , tad tukšās šūnas un fons tajās tiks paslēptas, ja iestatīts rādīt (noklusējums), tad tās tiks parādītas.
Tabulas galvenes atrašanās vieta
Apskatīsim vēl vienu vienkāršu tabulu veidošanas rekvizītu - caption-side , kas nosaka tabulas galvenes pozīciju (virs vai zem tabulas). Pēc noklusējuma parakstu puses rekvizīts ir iestatīts uz augšu , kas novieto parakstu virs tabulas. Lai zem tabulas ievietotu nosaukumu, jums ir jāizmanto rekvizīts ar vērtību apakšā .
Apskatīsim šī īpašuma izmantošanas piemēru:
Parakstu puses rekvizīta izmantošanas piemērs
Virs tabulas virsraksts
Vārds
Cena
Zivis
350 rubļi
Gaļa
250 rubļi
Virsraksts zem tabulas
Vārds
Cena
Zivis
350 rubļi
Gaļa
250 rubļi
Šajā piemērā mēs izveidojām divas klases, kas kontrolē tabulas galvenes pozīciju. Pirmā klase ( .topCaption) novieto virs tā tabulas nosaukumu, mēs to pielietojām pirmajai tabulai, bet otrajai klasei ( .bottomCaption) ievieto tabulas nosaukumu zem tā, mēs to piemērojām otrajai tabulai. Klase .topCaption ir noklusējuma paraksta rekvizīta vērtība, un tas ir izveidots demonstrācijas nolūkos.
Mūsu piemēra rezultāts:
Horizontālā un vertikālā izlīdzināšana
Vairumā gadījumu, strādājot ar tabulām, jums būs jāpielāgo satura līdzinājums galvenē un datu šūnās. Teksta līdzināšanas rekvizīts tiek izmantots horizontālai līdzināšanai, līdzīgi kā jebkura teksta informācija. Mēs apspriedām šī īpašuma izmantošanu tekstam iepriekš rakstā “”.
Lai iestatītu satura izlīdzināšanu šūnās, ir jāizmanto īpaši atslēgvārdi ar teksta līdzināšanas rekvizītu. Apskatīsim atslēgvārdu izmantošanu šim īpašumam nākamajā piemērā.
Horizontālās izlīdzināšanas piemērs tabulā
Nozīme
Apraksts
pa kreisi
Izlīdzina šūnas tekstu pa kreisi. Šī ir noklusējuma vērtība (ja teksta virziens ir no kreisās uz labo).
pa labi
Izlīdzina šūnas tekstu pa labi. Šī ir noklusējuma vērtība (ja teksta virziens ir no labās puses uz kreiso).
centrs
Izlīdzina šūnas tekstu centrā.
attaisnot
Izstiepj līnijas tā, lai katra rinda būtu vienāda platuma (izstiepj šūnas tekstu, lai tas atbilstu tās platumam).
Šajā piemērā mēs izveidojām četras klases, kas norāda dažādus horizontālos līdzinājumus šūnās un piemēro tos tabulas rindām. Vērtība šūnā atbilst teksta līdzināšanas rekvizīta vērtībai
Mūsu piemēra rezultāts:
Papildus horizontālajai līdzināšanai tabulas šūnās varat definēt arī vertikālo līdzinājumu, izmantojot vertikālās līdzināšanas rekvizītu.
Lūdzu, ņemiet vērā, ka, strādājot ar tabulas šūnām, tiek lietotas tikai šādas šī īpašuma vērtības*:
*
- Tabulas šūnai lietotās vērtības Sub , super , text-top , text-bottom , garums un % vērtības darbosies tā, it kā izmantotu bāzes vērtību.
Apskatīsim lietošanas piemēru:
Vertikālās izlīdzināšanas piemērs tabulā
Nozīme
Apraksts
bāzes līnija
Izlīdzina šūnas bāzes līniju ar vecāku bāzes līniju. Šī ir noklusējuma vērtība.
tops
Izlīdzina šūnas saturu vertikāli līdz augšējai malai.
vidū
Izlīdzina šūnas saturu vertikāli vidū.
apakšā
Izlīdzina šūnas saturu vertikāli gar apakšējo malu.
Šajā piemērā mēs izveidojām četras klases, kas norāda dažādus vertikālos līdzinājumus šūnās un piemēro tos tabulas rindām. Vērtība šūnā atbilst vertikālās līdzināšanas rekvizīta vērtībai, kas tika lietota šai rindai.
CSS pēc noklusējuma izmanto algoritmu, lai pārlūkprogramma automātiski sakārtotu tabulas izkārtojumu. Šajā gadījumā kolonnas platumu nosaka šūnas visplašākais neplīstošais saturs. Šis algoritms dažos gadījumos var būt lēns, jo pārlūkprogrammai pirms galīgā izkārtojuma noteikšanas ir jāizlasa viss tabulas saturs.
Lai mainītu pārlūkprogrammas tabulas izkārtojuma veidu ar automātiski ieslēgts fiksēts, jums ir jāizmanto CSS rekvizītu tabulas izkārtojums ar fiksētu vērtību.
Šajā gadījumā ir atkarīgs tikai horizontālais novietojums par tabulas platumu un kolonnu platumu, nevis uz šūnu saturu. Pārlūkprogramma sāk rādīt tabulu uzreiz pēc pirmās rindas saņemšanas. Rezultātā fiksēts algoritms ļauj izveidot šādas tabulas izkārtojumu ātrāk nekā izmantojot automātisko opciju. Strādājot ar lielām tabulām, varat izmantot fiksētu algoritmu, lai uzlabotu veiktspēju.
Apskatīsim šī īpašuma izmantošanu, izmantojot šādu piemēru:
Mēs jau daļēji esam pieskārušies tabulas rindu un kolonnu veidošanas metodēm rakstā “”. Šajā rakstā mēs apskatījām grupas pseidoklases izmantošanu, kas ļauj mainīt rindu stilus tabulās, izmantojot vērtības pat (godīgi) Un nepāra (nepāra), vai pēc pamatskolas matemātiskā formula.
Apskatīsim iepriekš aplūkotās metodes un izpētīsim jaunus veidus, kā veidot tabulas rindas un kolonnas. Pāriesim pie piemēriem.
Pseidoklase:nth-child izmantošanas piemērs ar tabulām
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
Šajā piemērā mēs:
Mūsu piemēra rezultāts:
Pāriesim pie nākamā piemēra, kurā apskatīsim tabulas rindu veidošanas iespējas.
Tabulu rindu veidošanas piemērs
apkalpošana
Cena
Summa
15 000
1
1 000
2
2 000
3
3 000
4
4 000
5
5 000
Šajā piemērā mēs:
Mēs iestatījām tabulas platumu uz 100% no vecākelementa platuma un iestatījām galvenes un datu šūnu viengabalainu apmali 1 pikseļu platumā.
Iestatījums elementam (tabulas "kājene") fona krāsa - koraļļi, elementam ("tabulas galvene") iestatiet fona krāsu Sudrabs.
Elementiem
, kas atrodas elementa iekšpusē
(tabulas pamatteksts) iestatiet fona krāsu, kas jāmaina, virzot kursoru (pseidoklase :hover) c balts pēc krāsas haki(visa rinda ir izcelta).
Mūsu piemēra rezultāts:
Rīsi. 153 Rindu veidošanas piemērs tabulās
Nākamajā piemērā aplūkota stūru noapaļošanas lietošana tabulas šūnām (īpašumam).
Šūnu stūru noapaļošanas piemērs
1
2
3
4
5
Šajā piemērā mēs:
Mēs centrējām tabulu ar ārējām piemalēm, iestatījām galvenes šūnu platumu un augstumu uz 50 pikseļiem un norādījām caurspīdīgs apmale 5 pikseļi.
Mēs noskaidrojām, ka, virzot kursoru (pseidoklase :hover) uz galvenes šūnas, tā saņem fonu zils krāsas, apelsīns teksta krāsa, apmale apelsīns krāsas 5 pikseļi un noapaļošanas rādiuss 100%.
caurspīdīga robeža ir nepieciešams, lai rezervētu vietu robežai, kas tiks parādīta, ja tas netiks izdarīts, tabula “lēks”.
Mūsu piemēra rezultāts:
Šis piemērs attiecas uz HTML elementu izmantošanu
Un
un to stilizācija.
Tabulas kolonnu izcelšanas piemērs
Pieteikums Nr.
apkalpošana
cena, berzēt.
Kopā
1
Dziedāšana
6 000
6 000
2
mazgāšana
2 000
2 000
3
Tīrīšana
1 000
1 000
4
Urdošs
1 500
1 500
5
Lasīšana
3 000
3 000
Šajā piemērā mēs:
Mūsu piemēra rezultāts:
Nu, pēdējais piemērs, kas ir diezgan grūti saprotams un prasa padziļinātas zināšanas CSS, jo tas skar turpmākās tēmas, kuras plānots detalizēti pētīt šajā kursā.
Iepriekšējā piemērā mēs sapratām, ka HTML elements
Varat lietot tikai vienu CSS rekvizītu - fona krāsu (background-color), bet jūs nevarat tieši iestatīt fona krāsu, virzot kursoru uz šī elementa (:hover pseidoklasi). Šajā piemērā apskatīsim, kā izcelt tabulas kolonnu, izmantojot tikai CSS.
Piemērs tabulas kolonnu un rindu izcelšanai, novietojot kursoru
Pieteikums Nr.
apkalpošana
cena, berzēt.
Kopā
1
Dziedāšana
6 000
6 000
2
mazgāšana
2 000
2 000
3
Tīrīšana
1 000
1 000
4
Urdošs
1 500
1 500
5
Lasīšana
3 000
3 000
Šajā piemērā mēs:
Mēs iestatījām, ka tabula aizņem 100% no vecākelementa, tabulas šūnas aizņem 25% no vecākelementa, un tām ir cieta 1 pikseļa zaļa apmale, galvenes un datu šūnu augstums ir 45 pikseļi. Mēs noņēmām atstarpi starp šūnām, izmantojot rekvizītu border-collapse ar vērtību
.
Un tā, izmantojot pseidoelementu :: pēc tam, kad mēs pievienojam saturu aiz katra elementa
virs kursora. ::after pseidoelements ir jāizmanto kopā ar satura rekvizītu, pateicoties kuriem mēs ievietojam bloka elementu ar fona krāsu mežzaļš un ir absolūtā pozicionēšana.
Absolūtā pozicionēšana šeit ir nepieciešama, lai nobīdītu elementu attiecībā pret tā priekšteča norādīto malu, un priekšteča pozīcijas vērtībai ir jābūt citai, nevis noklusējuma vērtībai - static , pretējā gadījumā skaitīšana tiks veikta attiecībā pret norādīto pārlūkprogrammas loga malu. iemesls, kāpēc mēs klājām galdu relatīvā pozicionēšana(radinieks).
Mēs iestatām augšējo rekvizītu mūsu ģenerētajam blokam, kas norāda virzienu, kādā pozicionētais elements ir nobīdīts no augšējās malas, un apakšējo rekvizītu, kas norāda virzienu, kādā pozicionētais elements ir nobīdīts no apakšējās malas. Abiem rekvizītiem tika norādīta vērtība 0, tāpēc bloks pilnībā aizņems elementu no tabulas apakšas un augšdaļas, šī bloka platums tika iestatīts uz 25%, šī vērtība atbilst pašas šūnas platumam.
Un pēdējais rekvizīts, ko mēs iestatījām šim blokam: z-indekss ar vērtību "-1" nosaka pozicionēto elementu secību saskaņā ar Z ass. Šis īpašums ir nepieciešams, lai teksts būtu šī bloka priekšā, nevis aiz tā, ja neiestatīsit vērtību, kas ir mazāka par nulli, bloks aptvers tekstu.
Mūsu piemēra rezultāts:
Ja šajā pētījuma posmā jūs nesaprotat elementu pozicionēšanas procesu, tad nekautrējieties šī ir grūti saprotama tēma, kuru mēs arī neapskatījām, taču mēs to noteikti apsvērsim nākamajā rakstā mācību grāmata “Pozicionēšanas elementi CSS”.
Jautājumi un uzdevumi par tēmu
Pirms pāriet pie nākamās tēmas, izpildiet prakses uzdevumu:
Ja jums ir grūtības izpildīt prakses uzdevumu, vienmēr varat atvērt piemēru atsevišķā logā un pārbaudīt lapu, lai saprastu, kāds CSS kods tika izmantots.
2016-2019 Deniss Boļšakovs, komentārus un ieteikumus par vietni varat sūtīt uz [email protected]
Vlads Merževičs
Ja tabulā ir liels rindu skaits, var būt grūti salīdzināt datus no dažādām kolonnām savā starpā. Tas prasa vizuāli atdalīt vienu tabulas rindu no citas, izmantojot līnijas vai pievienojot fona krāsu.
Vispirms apskatīsim iespēju izmantot horizontālās līnijas. Attēlā 1 parāda vienu no iespējamiem veidiem, kā koncentrēt uzmanību uz tabulas rindām. Katra līnija augšā un apakšā ir ierāmēta ar līniju, līdz ar to apmeklētāja skatiens slīd pa tām un nepārlec uz nākamo rindiņu. Šajā gadījumā dati, kas atrodas kolonnās, ir saistīti arī viens ar otru, taču vienlaicīgas izlīdzināšanas dēļ pa kreisi un tukšas vietas starp kolonnām dēļ.
Līniju iestatīšana starp rindām ir pavisam vienkārša, lai to izdarītu, TD atlasītājam pievienojiet apmales-bottom style rekvizītu. Ja ap galdu ir apmale, apakšējā robeža būs divreiz biezāka. Šajā gadījumā jūs varat noņemt apakšējo rindiņu no pēdējās rindas vai paslēpt apakšējo apmali no tabulas (1. piemērs).
1. piemērs: tabulas rindu atdalīšana ar līnijām
Tabula
2004
2005
2006
Rubīni
43
51
79
Smaragdi
28
34
48
Safīri
29
57
36
Šajā piemērā vertikālās līnijas starp galvenes šūnām tiek pievienotas, izmantojot apmales stila rekvizītu, kas tiek izmantots atlasītājam TH. Tādējādi starp tabulas apmali un fona galvenes apgabalu tiek izveidota viena pikseļa tukša vieta.
Krāsu izmantošana paplašina iespējas mainīt galda izskatu. Piemēram, pāra un nepāra rindu fona krāsa var atšķirties, kā parādīts attēlā. 2.
Lai mainītu nepieciešamo rindu fona krāsu, mēs ieviesīsim papildu klasi, nosauksim to par pat un sāksim to pievienot tabulas pāra rindām, proti, tagam.
. Ņemiet vērā, ka TR atlasītājs fona krāsu var iestatīt tikai, izmantojot fona rekvizītu. TR atlasītājam iestatītās rindas netiks rādītas. Tāpēc šūnā mēs uzzīmējam apakšējo apmali, TD atlasītājam piemērojot rekvizītu border-bottom (2. piemērs).
Nepāra rindu fona krāsa tiek noteikta, mainot visas tabulas krāsu. Bet, tā kā atsevišķām rindām (kurām ir pievienots parametrs class="even") ir iestatīta atsevišķa krāsa, tā "pārklājas" ar tabulas fona krāsu. Sakarā ar to tiek iegūtas mainīgas krāsainas līnijas.
2. piemērs: tabulas rindu izcelšana ar krāsu
Tabula
2004
2005
2006
Rubīni
43
51
79
Smaragdi
28
34
48
Safīri
29
57
36
Ametists
23
64
97
Šajā piemērā dubultā rinda tabulas apakšā nav radusies, ja tiek lietots rekvizīts apmales-collapse ar vērtību sakļaut atlasītājam TABLE. Šī opcija nosaka dubulto līniju parādīšanos vietās, kur šūnas pieskaras, un aizstāj tās ar atsevišķām līnijām. Lūdzu, ņemiet vērā, ka dažādās pārlūkprogrammās var būt atšķirības atstāto līniju krāsā, ja malas krāsa ap tabulu neatbilst līniju krāsai zem rindām.
Tas kļuva populārs, tīmekļa dizaineri galvenokārt izmantoja tabulas izkārtojuma metodi un ieguva ļoti labus rezultātus.
Tagi, ko izmanto, lai izveidotu tabulu html
tabula- nepieciešamais tags, kas atver un aizver tabulu parakstu- neobligāts tags, kas norāda tabulas nosaukumu th- neobligāts tags, kura sākuma un beigu tagos ir kolonnas nosaukums. Parasti tas parādās treknrakstā tr- nepieciešamais tags, kas atver un aizver rindu td- nepieciešamais tags, kas norāda šūnas atvēršanu un aizvēršanu pēc kārtas
Vienkāršas tabulas koda piemērs
HTML tabula
Tabulas nosaukums
Stobets 1
Stobets 2
Teksts pirmajā šūnā
Teksts otrajā šūnā
Parādīsies pārlūkprogramma
Tabulu mērķis html
Nodarbība uz galdiem ir ļoti svarīga! Pateicoties tabulām, jūs varat sakārtot ne tikai tekstu, bet arī attēlus, saites un daudz ko citu. Tabulā varat norādīt fons(vai tā krāsa), ievilkums, platums, robeža Un citi parametri, kas piešķirs tai skaistu izskatu. Tabula — jūsu pirmais solis ceļā uz izpratni web dizains! Iepriekš daudzas vietnes tika pilnībā izkārtotas kā tabulas, tas ir, viss, ko lietotājs redzēja (sānu izvēlne, augšējā izvēlne, saturs), bija lielas tabulas šūnu saturs. Šajā sakarā pāriesim tieši pie atribūtiem, kas padara galdu skaistu...
Html tabulu īpašības un parametri: atkāpe, platums, fona krāsa, apmale (rāmis)
U tabulas birka ir šādi atribūti:
platums- galda platums. var būt pikseļos vai % no ekrāna platuma. bgcolor- tabulas šūnu fona krāsa fons- piepilda galda fonu ar rakstu robeža- rāmis un apmales tabulā. Biezums ir norādīts pikseļos šūnu polsterējums- polsterējums pikseļos starp šūnas saturu un tās iekšējo robežu Tāpat kā iepriekš, mēs rakstām atribūta vērtību pēdiņās.
Apskatīsim šo atribūtu izmantošanu, izmantojot piemēru. Lai to izdarītu, izveidosim tabulu (bet jau bez ārkārtīgi reti izmantotajiem parakstiem un th tagiem) un iestatiet parametru uz atribūtu robeža, platums (tabulas, rindas vai šūnas platums) Un bgcolor (šūnas krāsa)
HTML tabula
Stobets 1
Stobets 2
Rezultātā pārlūkprogrammā tiks parādīta šāda tabula: rāmis- atribūts, kas norāda rāmi ap galdu. Ir šādas vērtības:
Tukšums — bez rāmja, augšā - tikai augšējais rāmis, apakšā - tikai apakšējais rāmis, hsides - tikai augšējie un apakšējie rāmji, vsides - tikai kreisais un labais kadri, lhs — tikai kreisais rāmis, rhs — tikai labais rāmis, kaste - visas četras rāmja daļas.
noteikumiem- atribūts, kas norāda robežas tabulā starp šūnām. Ir šādas vērtības:
Nav - starp šūnām nav robežu, grupas - robežas tikai starp rindu grupām un kolonnu grupām (tiks apspriests nedaudz vēlāk), rindas — robežas tikai starp rindām, kolonnas - robežas tikai starp kolonnām, visi — parādīt visas apmales.
Apskatīsim koda piemēru
HTML tabula
Stobets 1
Stobets 2
Teksts pirmās kolonnas pirmajā šūnā
Teksts otrās kolonnas otrajā šūnā
Rezultāts
Tagad mēģināsim izveidot skaistu galdu. Lai to izdarītu, sāksim lietot galda izlīdzināšana. Lai to izdarītu, ir šādi jau pazīstami parametri:
izlīdzināt- galda izlīdzināšana. To var novietot pa kreisi (pa kreisi), pa labi (pa labi), centrā (centrā) šūnu atstarpe- attālums starp tabulas šūnām. Norādīts pikseļos (noklusējuma 0 pikseļi) šūnu polsterējums- polsterējums pikseļos starp šūnas saturu un tās iekšējo apmali (noklusējuma 0 pikseļi) Apskatīsim piemēru
HTML tabula
Stobets 1
Stobets 2
Teksts pirmās kolonnas pirmajā šūnā
Teksts otrās kolonnas otrajā šūnā
Pārlūkprogramma parādīs centrētu tabulu, kas izskatās šādi:
tr rindas un td šūnas HTML tabulās
Atgādināšu vēlreiz, ka tabulas tiek veidotas rindu pēc rindas (tr). Rindās (tr) jau ir šūnas (td). Ja norādāt parametru virknei (tr), tas būs derīgs visas šūnas(td) šajā rindā, ja konkrētai šūnai, tad tikai tai. Iepriekš minētajos piemēros es norādīju rindas krāsu, šis parametrs tika attiecīgi sadalīts visās šūnās.
Stobets 1
Stobets 2
tr un td tagiem ir šādi
izlīdzināt- teksta līdzināšana šūnā. Kreisā mala (kreisā), labā mala (labā), centrs (centrā) nelīdzens- teksta vertikālā līdzināšana šūnā. Uz augšu (augšpusē), uz leju (apakšā), centrā (vidū) bgcolor- nosaka līnijas krāsu platums- kolonnas platums (visas zemāk esošās šūnas pieņems šo parametru) ir norādīts pikseļos vai procentos, kur 100% ir visas tabulas platums augstums- šūnas augstums (visas rindas šūnas pieņems šo parametru)
Apskatīsim kodu, kurā šūnu saturs (td) ir izlīdzināts pa dažādām malām: pirmajā pa kreisi, otrajā pa labi:
HTML tabula
Stobets 1
Stobets 2
Teksts pirmās kolonnas pirmajā šūnā
Teksts otrās kolonnas otrajā šūnā
Rezultāts
Izmantojot tabulas, jūs varat izveidot ļoti labu lapu. Neaizmirstiet, ka šūnās varat ievietot ne tikai tekstu, bet arī attēlus, saites utt.!)
Paldies par jūsu uzmanību! Ceru, ka materiāls bija noderīgs!
No autora: CSS ir atlasītāji, lai atrastu elementus, pamatojoties uz to pozīciju dokumentu kokā. Tās sauc par indeksu pseidoklasēm, jo tās aplūko elementa pozīciju, nevis tā veidu, atribūtus vai ID. Pavisam tādi ir pieci.
:pirmais-bērns un :pēdējais-bērns
Kā jūs varētu nojaust pēc nosaukuma, :first-child un :last-child pseidoklases atlasa pirmo un pēdējo bērnu mezglā (elementā). Tāpat kā citās pseidoklasēs, :first-child un :last-child, izmantojot vienkāršus atlasītājus, ir minimālas blakusparādības.
Apsveriet tālāk norādīto HTML un CSS:
:pirmais-bērns un:pēdējais-bērns
Augļu saraksts
Āboli
Banāni
Mellenes
Apelsīni
Zemenes
<
!
DOCTYPE
html
>
<
html
lang
=
"en-US"
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>: pirmais - bērns un : pēdējais - bērns<
/
title
>
<
/
head
>
<
body
>
<
h2
>Augļu saraksts<
/
h2
>
<
ul
>
<
li
>Āboli<
/
li
>
<
li
>Banāni<
/
li
>
<
li
>Mellenes<
/
li
>
<
li
>Apelsīni<
/
li
>
<
li
>Zemenes<
/
li
>
<
/
ul
>
<
/
body
>
<
/
html
>
Zemāk esošajā ekrānuzņēmumā parādīts rezultāts.
H2 galvene un pirmais li ir rozā krāsā, jo:first-child nav piesaistīti konkrētiem elementiem. Tags h2 ir pamatteksta taga pirmais atvasinātais, un li ir elementa ul pirmais atvasinātais. Bet kāpēc atlikušie li elementi ir zaļi? Jo: last-child arī nav piesaistīts noteiktam elementam, un ul ir pēdējais pakārtotais elements body tagā. Faktiski iepriekš minētajos stilos mēs rakstījām *:first-child un *:last-child.
Vienkārša atlasītāja pievienošana :first-child un :last-child padara tos precīzākus. Ierobežosim savu izvēli, iekļaujot tikai saraksta vienumus. Aizstāt :first-child ar li:first-child un :last-child ar li:pēdējais-bērns. Zemāk esošajā ekrānuzņēmumā parādīts rezultāts.
:nth-child() un :nth-last-child()
Nav slikta ideja, ja dokumentā var atlasīt pirmo un pēdējo pakārtoto elementu. Ko darīt, ja jums ir jāizvēlas pāra vai nepāra elementi? Varbūt mums ir jāatlasa sestais elements kokā vai jāpiemēro stili katram trešajam pakārtotajam elementam. Šeit mums palīdzēs pseidoklases:nth-child() un:nth-last-child().
Tāpat kā :not, :nth-child() un :nth-last-child() arī ir funkcionālas pseidoklases. Viņi izmanto vienu argumentu, kam jābūt:
atslēgvārds nepāra;
atslēgvārds pat;
2. vai 8. tipa vesels skaitlis;
arguments formā An+B, kur A ir solis, B ir nobīde un n ir pozitīvs vesels mainīgais.
Pēdējais arguments ir nedaudz sarežģītāks nekā citi. Mēs to aplūkosim nedaudz vēlāk.
Kāda ir atšķirība starp :nth-child() un :nth-last-child()? Tie atšķiras sākuma punktā: :nth-child() skaita uz priekšu, un :nth-last-child() skaita atpakaļ. CSS indeksos tiek izmantoti naturāli skaitļi un tie sākas ar 1, nevis 0.
Izmantojot pseidoklases:nth-child() un:nth-last-child(), ir ērti izveidot mainīgus modeļus. Svītrainais galds ir ideāls lietošanas gadījums. Zemāk esošais CSS tabulas pāra rindām piešķir gaiši zilganpelēku fonu, rezultātu var redzēt zemāk esošajā ekrānuzņēmumā:
Ja pārslēdzaties no:nth-child uz:nth-last-child, joslas tiek apgrieztas otrādi, jo skaitīšana sākas no apakšas. Skatiet ekrānuzņēmumu zemāk.
Vai vēlaties kaut ko sarežģītāku, ar sarežģītākiem argumentiem? Izveidosim dokumentu ar 20 elementiem, kā parādīts zemāk.
Izmantojot :nth-child() un :nth-last-child(), varat atlasīt vienu konkrētu elementu. Varat atlasīt visus pakārtotos elementus pēc noteiktās pozīcijas vai arī varat atlasīt elementus ar nobīdes daudzkārtni. Mainīsim sestā elementa fonu:
Prece:nth-child(6) (fons: #e91e63; )
Atkal A ir solis. Šis ir koeficients n, kas sākas ar 1. Tas ir, ja A = 3, tad 3n atlasīs trešo, sesto un devīto elementu utt. Tas ir tieši tas, ko var redzēt zemāk esošajā ekrānuzņēmumā.
Šeit viss ir nedaudz interesantāk. Izmantojot :nth-child() un :nth-last-child(), jūs varat atlasīt visus elementus pēc noteiktā punkta. Atlasīsim visus elementus, izņemot pirmos septiņus:
Vienums:nth-child(n+8) (fons: #e91e63; )
Vienums: n-tais bērns (n+8) (
fons : #e91e63;
Šeit nav norādīts neviens solis. Rezultātā n+8 atlasa visus n elementus, sākot ar astoto. Skatiet ekrānuzņēmumu zemāk.
Piezīme: negatīva nobīde
Ir spēkā arī negatīvās vērtības un diapazoni. Ieraksts, piemēram:nth-child(-n+8) apvērš atlasi un atlasa pirmos astoņus elementus.
Izmantojot nobīdi un soli, varat atlasīt katru trešo elementu, sākot ar piekto:
Vienums:nth-child(3n+5) (fons: #e91e63; )
Prece: n-tais bērns (3n + 5) (
fons : #e91e63;
Rezultāts.
vienīgais bērns
Vienīgā bērna pseidoklase atlasa elementu tikai tad, ja tas ir vienīgais pakārtotais elements. Zemāk ir divi saraksti ar aizzīmēm. Pirmajā ir viens elements, otrajam ir trīs:
, jo tas ir vienīgais pirmā saraksta bērns. Otrā saraksta elementi nav iekļauti atlasē, jo ir trīs blakus elementi. Rezultāts ir parādīts zemāk.
: tukšs
Varat izmantot :empty pseidoklasi, lai atlasītu elementus, kuriem nav bērnu. Pseidoklase: tukšs runā pats par sevi (tukšs no angļu valodas “empty”). Lai elementu iekļautu atlasē:empty, tam ir jābūt pilnīgi tukšam, pat ne atstarpēm. Tas ir, tas tiek iekļauts izlasē, bet tas nenotiek.
Dažreiz WYSIWYG redaktori saturā ievieto tukšus p tagus. Varat izmantot :empty un :not, lai novērstu stilu piemērošanu šiem elementiem. Piemēram, p:not(:empty).
Konkrēta veida elementu atlase pēc to indeksa
Iepriekšējā sadaļā aprakstītās pseidoklases atlasa elementus, ja tie ieņem noteiktu vietu dokumentu kokā. Piemēram, p:nth-last-child(2) atlasīs visus p tagus pirms pēdējā vecākblokā.
Šajā sadaļā mēs runāsim par drukāto indeksu pseidoklasēm. Šīs pseidoklases arī atlasa elementus pēc indeksa vērtības, taču atlase ir ierobežota līdz noteiktam veidam. Piemēram, jums ir jāatlasa piektais p tags vai pat h2 tags.
Ir piecas šādas pseidoklases, kuru nosaukumi ir tieši pretēji tiem, kas nav tipizēti:
nth-ped-of-type()
Starp tām un bērnu indeksa pseidoklasēm ir smalka robeža. Ieraksts p:nth-child(5) atrod tikai piekto tagu p, savukārt ieraksts p:nth-of-type(5) atrod visus p tagus un no tiem atlasa piekto.
Izveidosim citu dokumentu. Tajā ir arī 20 elementi, tikai daži ir p tagi, bet citi ir div. p tagi ar noapaļotiem stūriem, skatiet tālāk redzamo ekrānuzņēmumu.
Vai jums nešķiet, ka melnbalts galds izskatās mazliet garlaicīgs? Tā domājam arī mēs! Tāpēc šajā apmācībā mēs runāsim par to, kā mainīt tabulas krāsu HTML. Ir trīs krāsas pievienošanas iespējas, no kurām katrai ir savs īpašums.
Šūnu fona krāsas norādīšana. Tas tiek darīts, izmantojot īpašumu fona krāsa.
Teksta krāsas norādīšana šūnās. Tas tiek darīts, izmantojot īpašumu krāsa.
Norāda šūnu apmaļu krāsu. Tas tiek darīts, izmantojot īpašumu apmales krāsa.
Iepriekš, lai mainītu krāsu, tika izmantota kodolīgāka rāmja apraksta forma. Viņa izskatījās šādi:
Apmale: 1 pikselis vienkrāsains gaiši pelēks
Un pēdējā daļa bija atbildīga par krāsu šeit - gaišais.
Ir dažādi veidi, kā iestatīt krāsu nozīmi CSS. Mēs parādīsim, kā krāsa tiek aprakstīta, izmantojot atribūtus.
Kā mainīt šūnu krāsu
Apskatīsim, kā kods izskatās CSS, kas norāda šūnas krāsu.
Td (fona krāsa: fona krāsa; )
Protams, var arī mainīt krāsas tabula, un td, un th. Mēģināsim piešķirt savai reizināšanas tabulai stabilāku izskatu.
Pievienosim stilus galvenes šūnām ar tagu th, kā arī diagonālām šūnām, kurās ir skaitļu kvadrāti:
Reizināšanas tabula
Reizināšanas tabula
*
2
3
2
4
6
3
6
9
Rezultāts pārlūkprogrammā:
Kā mainīt apmales krāsu tabulā
Kā jūs jau pamanījāt iepriekš minētajā piemērā, tabulā mēs mainījām apmales krāsu. Šim nolūkam izmantojām pierobežas īpašumu. Tas iestata parametrus tālāk norādītajā secībā:
līnijas veids, mūsu gadījumā ciets (ciets)
līnijas biezums, mūsu gadījumā 1px
līnijas krāsa, mūsu gadījumā zila
Vēlreiz atcerēsimies, kā izskatās šūnas apmales krāsas iestatīšana:
Td (apmale: 1 px vienkrāsains zils;)
Kā mainīt tabulas rindas krāsu
Tātad, mēs esam iemācījušies mainīt šūnu krāsas, kā arī galvenes šūnas, izmantojot CSS iespējas. Ja mēs norādām stilus tagiem, piemēram th vai td, tad jums vajadzētu saprast, ka stili attieksies arī uz citiem tagiem.
Tomēr ir situācijas, kad jāmaina konkrētas šūnas, vairāku šūnu vai visas rindas krāsa. Ko darīt šajā gadījumā? Šeit jums vajadzētu izmantot klases, kā arī piemērot to stilus. Praksē tas izskatās šādi:
RowGreen (fona krāsa: zaļa; )
Un, lai mainītu noteiktu līniju krāsu, izmantojot šo klasi, jums ir jāveic šādas darbības:
Tabula ar mainīgām krāsām rindās
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
Un rezultāts pārlūkprogrammā:
Kā mainīt teksta krāsu tabulā
Lai mainītu tabulas teksta krāsu, izmantojiet rekvizītu krāsa. Varat to lietot dažādiem elementiem: tabula, tr, th, td. Atkarībā no tā mainīsies krāsa atlasītajā elementā. Piemēram, visai tabulai fonta krāsu iestatīsim uz zaļu:
Galds ( krāsa: zaļa; ... )
Līdzīgi varat mainīt atsevišķu šūnu krāsu. Un ar to šī nodarbība beidzas, neaizmirstiet izpildīt mājasdarbus. Čau visiem!
