CSS: galda dizainu. piemēri reģistrācijas

Making galdi ar CSS - par nodarbību interesants un atbildīgs. Pieeja šajā biznesā ir kompetenti, ar zināšanām par visiem iespējamajiem stiliem. Turklāt, tas ir nepieciešams, lai piemīt sajūtu skaistumu, lai ne aizbaidīt savas radošās apmeklētājiem.

Šīs tabulas var pārveidot gandrīz visu. Skaists dizains ietver izmantošanu CSS tabulām dizaina robežas, galda fona, šūnu fona, atšķirību starp tām un vairāk. Apsveriet visvienkāršākā.

galda robeža

CSS tabulas stils dizains vienmēr ir saistīta ar spēli ar robežu (rāmja). Visi noklusējuma tabulas nav kontūras rāmis. Tas ir, tas ir vienāds ar 0 pikseļi. Bet tas var novērst, īpašuma robežas.

Jūs varat norādīt ārējo rāmi visam tabulu:

tabula {border: 3PX solid black; }

Pateicoties šai rindā pie visiem galdiem uz vietas, kas izmanto šo stilu ir melns rāmis. Ņemiet vērā, ka robežu tikai malās, bet ne iekšā tabulā. Par šūnu līnijām un rāmi noteikts citādi.

th, td {border: 3PX solid black;}

Biezums un krāsu, jūs varat norādīt jebkuru. Paturiet prātā, ka robežas nav dubultojies, kad Līmēšana šūnas.

Vārds apzīmē stabilu nepārtrauktu reģistrāciju. Jūs varat norādīt citas vērtības.

tas ir visbiežāk izmanto cieto rāmi, jo tas izskatās pievilcīgākas un nenovērš uzmanību no galvenā satura vietnes.

robežu īpašumu var norādīt arī uz kuģa. Robeža var iestatīt tikai uz augšu, uz leju, pa kreisi vai labajā pusē. Jo dažos gadījumos tas nav iespējams variants ar rāmi par visu galda vienreiz.

galda {augšējā apmale: 1px sarkani; }

Tātad jūs varat iestatīt rāmi augšpusē tikai tabulā. Līdzīgi kā jebkuru citu personu, nevis tikai top rakstīt: pa labi, pa kreisi vai apakšā.

tabulas galveni

Tabulas virsraksta var norādīt izmantojot tagu . Šis tags var būt CSS reģistrēt daudz īpašību precizēšanas. CSS galda dizains ir labi, jo tas ir iespējams manevrēt elementiem, kā jūs vēlaties.

Šis nosaukums tiek parādīts tādā pašā veidā kā standarta grāmatas (piemēram, "1. tabula").

Jūs varat norādīt vietu nosaukumu un īpašuma postenī pusē (augšējā vai apakšējā). Sakārtojot kreisi vai pa labi, ir noteikts nekustamā īpašuma text-align.

fona galdi

Vispārīga galda var būt jebkura krāsa vai raksts. Krāsu nosaka īpašuma fona-krāsu. Nosaukumi īpašībām pilnībā atbilst lietojumiem runu. Tas atvieglo uzglabāšanai vairākas reizes.

Krāsu var norādīt kā nosaukumu, un dažādu kodējumus. Turklāt, jūs varat norādīt šādi:

• Caurspīdīgs - Caurspīdīga.
• Mantot - krāsa ir tāds pats kā no mātes elementa.
• Sākotnējā - noklusējuma.

Variants ar pārskatāmību, var izmantot tajos gadījumos, kad visi tabulas tekstu CSS failu, tiek veikti vienā krāsā, bet šajā gadījumā nav nepieciešams.

Turklāt fons var būt attēlu. Lai to izdarītu, jo stila noteikts fona attēla īpašumu. Ceļš ir šādi:

url ( "URL")

Ceļš uz failu, var būt vai nu radinieks vai absolūta.

Sarežģītāk pildījums var izdarīt ar gradientu:

• lineāra-gradients ();
• radiālajām gradients ();
• atkārtojot-lineāru-gradientu () un atkārtojot-radiālajām gradients () - gradients atkārtota.

fons šūnu

Papildus fona kopumā, jūs varat norādīt svītrains fonu kolonnu vai rindu. Lai reģistrētu īpašumu lieto ļoti bieži, jo vizuāli nodalīšana līnijām vieglāk nolasīt informāciju.

Papildus mija, un jūs varat norādīt skaitu konkrētā kolonnā vai rindā. Piemēram, piemēram, šādi:

• tr: n-bērnu (pat) {...} - precizēt rindpārlece;
• tr: n-bērns (1) {...} - norāde par īpašībām konkrētu rindu;
• td: n-bērns (pat) {...} - norāde par mainīgu kolonnas;
• td: n-bērns (1) {...} - norāde par īpašībām konkrētā kolonnā.

Bez secība un numurus var norādīt - pirmo (TD: pirmais bērns) vai pēdējo (td: pēdējā bērns).

Starpība starp šūnām

CSS, galda dizains ļauj noņemt atstarpes starp šūnām. Pēc noklusējuma tie ir. Piemēram, ja jūs noteikt rāmi tabulā, nenosakot attālumu starp robežas, tas būs šeit šis rezultāts.

Piekrītu, tas izskatās ne ļoti jauki, un tas nav ērti lasīt. Lietotājiem būs svārstības acīs, jo tas. Noņemt šos trūkumus var, rakstot tieši šādu rindu tabulā stilā:

robežu sabrukums: sabrukumu

Bet tā arī notiek, ka attālums, gluži pretēji, būtu jāpalielina. Turklāt lielums nepilnības var norādīt starp kolonnām un starp līnijām. Lai norādītu, ka vērtība (nevis sabrukt):

robežu sabrukums: atsevišķs

Taču šāda rīcība norāda, ka tas ir nepieciešams, lai atdalītu šūnas. Kā tas bija to daļa, norādīja papildu īpašumu:

robeža starp rindām: 20px.

Ja vēlaties norādīt citu attālumu starp rindām un kolonnām, tas norāda divas lietas:

robeža starp rindām: 10px20px.

Atšķirība pārlūkprogrammās

Paturiet prātā, ka CSS dizaina tabulas var izskatīties dažādi, atkarībā no pārlūka. Īpaši slikti tas ir gadījumā ar vecākām versijām, ka jaunievedumi CSS netiek atbalstīta.

Iepriekš ir piemērs karkasa biezumus ciparu vērtībām.

Šajā piemērā biezums rāmji konstantes.

apmaļu stilus arī ievērojami atšķiras.

Tāpēc attīstība vienmēr redzēt rezultātu dažādās pārlūkprogrammās.

CSS dizaina tabulas ieteicams pārbaudīt pārlūka veidu. Īpaši liela problēma izmanto, lai būtu lietotājiem ar vecākām versijām Internet Explorer.

Ļoti uzlabotas izstrādātāji var, atkarībā no pārlūka, lai savienotu pilnīgi atšķirīgas CSS failus. Un kāds padara pārbaudi katrā vai kādu konkrētu stilu (klases).

Vislielākās problēmas rodas no ēnas.

CSS: Galda Formāts Piemēri

Reģistrācijas var diezgan dažāds. Tas viss ir atkarīgs no visu vietni un tās dizainu. Visi jāapvieno un daudzveidīgs krāsas. Arī tas padara lielu lomu un garšu izstrādātājs. Sense of skaistums ir atšķirīgs.

Mēs sniegt dažus piemērus dažādās tabulās. Attēlā augstāk redzams izmantošanu noliekt un spēlēt ar fona krāsu un robežas.

Daudzi būs interesants piemērs skaistu veikls dizains, kas nav sagriezti acu lietotājiem. Tas iemiesojums ir piemērots gandrīz jebkurā situācijā.

Malas var veikt noapaļots. Tas izskatās diezgan jauki.

secinājums

Kā jūs varat redzēt, par izskatu tabulu CSS ir daudz līdzekļu. Katrs parametrs ir arī milzīgs daudzums vērtības iespējas. Ja jūs to izmantot visu uzreiz, jūs varat izveidot šedevrus. It īpaši, ja jūs adaptīvo dizainu visiem pārlūkiem.

Galvenais dizains - nav pārspīlēt to ar efektiem. Viss jādara ar mēru. Sākumā izkārtojums patīk eksperimentēt un nekavējoties izmantot visas savas zināšanas. Kā rezultātā tabulas ir pārsātināta īpašības. Centieties, lai izvairītos no šīs kļūdas.

Turklāt, daži parametri var traucēt ar otru. Piemēram, nav nepieciešams norādīt fona krāsu tabulas, bet ja ir vēl noteikt fona attēlu, kas pārklājas norādīto krāsu.