Robežas tiek izmantotas HTML lapās, lai norobežotu un izceltu saturu. Kad lapā ir daudz informācijas un vēlaties pievērst lietotāja uzmanību konkrētām daļām, tad ap šo saturu izmantojiet apmales. Šajā rakstā par CSS robežām es apspriedīšu šādas tēmas:
- Kad lietot robežas
- Robežas CSS
- CSS Border atribūti
- Robežu atribūtu noklusējuma vērtības
- Definējiet robežas stenogrāfijā
- Punkti, kas jāpatur prātā, projektējot robežas CSS
Kad lietot robežas
Standarta prakse ir CSS robežu tagu izmantošana, lai definētu robežas HTML lapās:
- Ap svarīgiem virsrakstiem
- Lai izceltu pēcrakstu vai svarīgas piezīmes
- Pievienojiet attēlus, ilustrācijas, cilvēku citātus, videoklipus
- Lai pievērstu uzmanību cenām, termiņiem vai tik nozīmīgai informācijai
Jūs varētu vēlēties izlasīt pirms iepazīšanās ar CSS robežām.
Lai iegūtu visaptverošu CSS apmācību, apmeklējiet vietni Edureka CSS apmācība iesācējiem . Jūs iegūsiet lielisku uzmanību, kā CSS jāizmanto HTML tīmekļa dizaina uzlabošanai.
Robežas CSS
CSS apmales var piešķirt dažādām HTML lapas sadaļām neatkarīgi no tā, vai tām jāpievieno virsraksti vai rindkopas. Sāksim ar piemēru. Šeit mēs definējam robežu ap virsrakstu un citu robežu ap rindkopas tekstu.
body {background-color: lightblue} h1 {text-align: center border-style: solid} p {font-family: verdana font-size: 20px border-style: dotted}Robeža ap rindkopu arī!
kā izmantot spyder python
CSS Border atribūti
CSS robežām ir 3 galvenie atribūti
- stils:Thestilsatribūts nosaka robežas modeli.
- krāsa: Krāsa var būt jebkura no CSS krāsās noteiktās kopas.
- platums: Platums tiek izmantots, lai mainītu apmales biezumu, lai padarītu to pamanāmāku.
Iepriekš minētajā piemērā mēs redzējām, ka ir definēts tikai viens robežas atribūts, tas ir tā stils. Pārējie atribūti, ja tie nav definēti, iegūst noklusējuma vērtības. Ir vēl viens atribūts, ko sauc par rādiusu, kas tiek izmantots retāk. To izmanto, lai apmales malas noapaļotu.
- robežas stilā atribūts
| Stils | Apraksts |
| robežas stils: ciets | |
| robežas stils: dubultā | |
| robežas stils: rieva | |
| robežas stils: kores | |
| robežas stils: ieliktnis | |
| robežas stils: sākums | |
| robežas stils: nav | |
| robežas stils: slēpts | |
| apmales stils: punktots | |
| robežas stils: svītrots |
Jūs pamanīsit, ka pastāv arī opcija “bez robežas” un “slēptās robežas”. Izstrādātājs var vienkārši izvairīties no robežas definēšanas, kāpēc to skaidri definēt kā “slēptu robežu”? Tas tiek darīts vietas izmantošanas un izlīdzināšanas nolūkos ar citiem lapas elementiem.
Robežu stilus var sajaukt arī elementā. Šim nolūkam 4 atsevišķās malas malas var atsevišķi definēt ar dažādiem stiliem. To var izdarīt divos veidos. Vai nu vienā tagā definējiet visas 4 puses. Šajā gadījumā skaitīšana sākas no augšējās līnijas un pēc tam pārvietojas pulksteņrādītāja virzienā. Katru no 4 robežlīnijām var definēt arī atsevišķos tagos. Abi gadījumi ir parādīti nākamajā piemērā.
| Stils | Apraksts |
| robežas stils: punktēts, punktēts, divkāršs border-top-style: punktots border-right-style: svītrots border-bottom-style: ciets robežas-kreisās stila: dubultā |
- apmales krāsa atribūts
Krāsas krāsu atribūtu var iestatīt vairākos veidos. Tas ir līdzīgs krāsu iestatīšanai citiem elementiem. Krāsas var iestatīt, izmantojot kādu no šīm metodēm:
- nosaukums - norādiet krāsas nosaukumu, piemēram, “zils”. Varat arī izmēģināt dažas izdomātas krāsu opcijas, piemēram, “BlanchedAlmond”!
- Hex - norādiet sešstūra vērtību, piemēram, “# ff0000”
- RGB - iestatiet RGB kodu. Piemēram, rgb (255,255,0) nozīmē dzeltenu.
- iestatījums - piemēram, “caurspīdīgs” vai “necaurspīdīgs”
- apmales platums atribūts:
Platuma rekvizīts, kā norāda nosaukums, nosaka 4 apmales malu biezumu. Ja ir definēta viena vērtība, tā ir paredzēta visām pusēm, pretējā gadījumā var iestatīt arī atsevišķas platuma vērtības.
Platumu var norādīt jebkurā standarta vienībā, piemēram, pikseļos (‘px’), punktos (‘pt’) vai centimetros (‘cm’). Varat arī norādīt platumu, izmantojot iepriekš definētas vērtības “biezs”, “plāns” un “vidējs”.
| Stils | Apraksts |
| apmales platums: 10 pikseļi | |
| apmales platums: 0,1 cm | |
| apmales platums: vidējs |
- robežas rādiuss atribūts
Rādiusa noteikšanas mērķis ir iegūt noapaļotus stūrus robežai. Rādiusa koeficients nosaka noapaļojuma pakāpi. Lielāka vērtība, vairāk izliekti stūri. Kā standarta prakse, rādiusa vērtības tiek turētas starp robežas platumu 1-3 reizes.
Šāds kods tiks ģenerēts:
apmales platums: 10 pikseļi
apmales rādiuss: 30 pikseļi
kā aizvērt programmu java
Robežu atribūtu noklusējuma vērtības
Vienīgais obligātais atribūts ir stils . Ja stila trūkst, apmale neparādīsies.
Ja krāsa nav norādīta, par noklusējuma vērtību tiek ņemta pamatā esošā elementa krāsa. Piemēram, ja rindkopas teksta krāsa ir definēta kā “zila”, noklusējuma apmales krāsa arī būs zila. Ja pat elementam nav krāsu definīcijas, noklusējuma krāsa ir “melna”.
Noklusējuma platuma vērtība ir ‘vidēja’.
Definējiet robežas stenogrāfijā
Daži izstrādātāji dod priekšroku robežu atribūtu definēšanai kodolīgā vienas rindas tagā. Šis stenogrāfijas formāts palīdz samazināt koda rindiņas, un ekspertu izstrādātāji dod priekšroku šim formātam. Ja robežu definīcija ir vienkārša un diezgan standartizēta, ieteicams izmantot stenogrāfijas formātu. Tomēr, ja jums ir jāizceļ katra apmales puse citā stilā, jums jāpaliek pie atsevišķu tagu noteikšanas formāta.
Tiek izmantots šāds kods:
robežas stils: svītrots
apmales krāsa: zaļa
apmales platums: 5 pikseļi
apmale: pārtraukta zaļa 5px
Punkti, kas jāpatur prātā, projektējot robežas CSS
Nelietojiet lapā pārāk daudz apmales, tas var novērst uzmanību un apgrūtināt lietotāja fokusēšanu.
Ir svarīgi saglabāt robežu stila un krāsu konsekvenci. Vienāda līmeņa elementiem vienā hierarhijas līmenī lapā jābūt līdzīgam apmales stilam un platumam. Piemēram, ja paragrāfs ir definēts ar stabilu apmali un 5 pikseļu platumu, saglabājiet šo formātu visā citā paragrāfs elementi tīmekļa vietnes dizaina laikā.
Turieties pie viena tagu definīciju stila. Dažiem izstrādātājiem ir ērti izmantot īsinājumtaustiņu definīcijas, kurās visas vērtības tiek piešķirtas vienam robežas tagu. Daži citi dod priekšroku visu tagu precīzam uzskaitījumam attiecībā uz platumu, krāsu un stilu. Konvencija ir tāda, ka tad, kad lappusē ir nepieciešami sarežģīti apmales rotājumi, atsevišķi tagi tiek uzskaitīti atsevišķi. Tas palīdz atkļūdot šādas pielāgotas robežu definīcijas. Normālos gadījumos derētu tikai saīsnes definīcija.
Ceru, ka atradāt meklēto informāciju uz CSS robežām un wLīdz ar to mēs esam nonākuši pie šīs robežas CSS rakstā.
ko trim dara java
Pārbaudiet mūsu kas nāk ar instruktoru vadītu tiešraides apmācību un reālās dzīves projektu pieredzi. Šīs apmācības ļauj jums prasmīgi strādāt ar aizmugurējām un priekšējām tīmekļa tehnoloģijām. Tas ietver apmācību par Web izstrādi, jQuery, Angular, NodeJS, ExpressJS un MongoDB.
Vai mums ir jautājums? Lūdzu, pieminējiet to bloga “Robeža CSS” komentāru sadaļā, un mēs ar jums sazināsimies.