Kraštinės naudojamos HTML puslapiuose, norint pažymėti ir paryškinti turinį. Kai puslapyje yra daug informacijos ir norite atkreipti vartotojo dėmesį į konkrečias dalis, tada naudokite kraštines aplink tą turinį. Šiame straipsnyje apie sienas CSS aptarsiu šias temas:
- Kada naudoti „Borders“
- Pasieniai CSS
- CSS pasienio atributai
- Numatytosios sienos atributų vertės
- Apibrėžkite sienas trumpai
- Taškai, kuriuos reikia nepamiršti projektuojant sienas CSS
Kada naudoti „Borders“
Standartinė praktika yra naudoti CSS pasienio žymes apibrėžiant kraštus HTML puslapiuose:
- Aplink svarbias antraštes
- Norėdami paryškinti postriptą ar svarbias pastabas
- Pridedamos nuotraukos, iliustracijos, citatos iš žmonių, vaizdo įrašai
- Norėdami atkreipti dėmesį į kainas, terminus ar tokią svarbią informaciją
Galbūt norėsite paskaityti prieš pradedant mokytis apie CSS sienas.
Norėdami gauti išsamią CSS mokymo programą, apsilankykite „Edureka CSS“ pamoka pradedantiesiems . Jūs gausite puikų susimąstymą apie tai, kaip CSS turi būti naudojama HTML web dizainui pagerinti.
Pasieniai CSS
CSS kraštinės gali būti priskirtos skirtingoms HTML puslapio skiltims, nesvarbu, ar jos turi pridėti antraštes, ar pastraipas. Pradėkime nuo pavyzdžio. Čia mes apibrėžiame sieną aplink antraštę ir kitą ribą aplink pastraipos tekstą.
body {background-color: lightblue} h1 {text-align: center border-style: solid} p {font-family: verdana font-size: 20px border-style: dotted}Apribokite ir pastraipą!
CSS pasienio atributai
CSS sienos turi 3 pagrindinius jų atributus
- stilius:stiliausatributas apibrėžia sienos modelį.
- spalva: Spalva gali būti bet kuri iš rinkinio, apibrėžto CSS spalvomis.
- plotis: Plotis naudojamas norint pakeisti krašto storį, kad jis būtų ryškesnis.
Ankstesniame pavyzdyje mes matėme, kad apibrėžtas tik vienas krašto atributas, tai yra jo stilius. Kiti neapibrėžti atributai įgauna numatytąsias reikšmes. Yra dar vienas atributas, vadinamas spinduliu, kuris naudojamas rečiau. Jis naudojamas krašto kraštams suapvalinti.
- sienos stiliaus atributas
| Stilius | apibūdinimas |
| sienos stiliaus: tvirtas | |
| sienos stiliaus: dviguba | |
| sienos stiliaus: griovelis | |
| sienos stiliaus: kalvagūbris | |
| sienos stiliaus: įdėklas | |
| border-style: pradžia | |
| border-style: nėra | |
| border-style: paslėpta | |
| kraštinės stiliaus: punktyras | |
| sienos stiliaus: brūkšninis |
Jūs pastebėtumėte, kad taip pat yra „be sienos“ ir „paslėpta siena“. Kūrėjas gali tiesiog išvengti sienos apibrėžimo, kodėl ją aiškiai apibrėžti kaip „paslėptą sieną“? Tai daroma erdvės naudojimo ir derinimo su kitais puslapio elementais tikslais.
Kraštiniai stiliai taip pat gali būti maišomi elemente. Šiuo tikslu galima atskirai apibrėžti 4 atskiras kraštines su skirtingais stiliais. Tai galima padaryti dviem būdais. Arba apibrėžkite visas 4 puses vienoje žymoje. Tokiu atveju skaičiavimas prasideda nuo viršutinės eilutės ir tada juda pagal laikrodžio rodyklę. Arba kiekvieną iš 4 ribų taip pat galima apibrėžti atskirose žymose. Abu atvejai parodyti kitame pavyzdyje.
| Stilius | apibūdinimas |
| kraštinės stiliaus: punktyrinis brūkšninis vientisas dvigubas border-top-style: punktyras „border-right-style“: brūkšninis java kodas pabaigti programą „border-bottom-style“: tvirta sienos-kairės stiliaus: dviguba |
- sienos spalva atributas
Kraštinės spalvos atributą galima nustatyti keliais būdais. Tai panašu į kitų elementų spalvos nustatymą. Spalvas galima nustatyti vienu iš šių būdų:
- vardas - nurodykite spalvos pavadinimą, pvz., „Mėlyna“. Taip pat galite išbandyti keletą įmantrių spalvų variantų, pavyzdžiui, „BlanchedAlmond“!
- Hex - nurodykite šešioliktainę vertę, pvz., „# Ff0000“
- RGB - nustatykite RGB kodą. Pavyzdžiui, rgb (255,255,0) reiškia geltoną.
- nustatymas - pavyzdžiui, „skaidrus“ arba „nepermatomas“
- kraštinės plotis atributas:
Plotis savybė, kaip rodo pavadinimas, apibrėžia 4 kraštinių kraštų storį. Jei apibrėžta viena reikšmė, ji skirta visoms pusėms, kitaip galima nustatyti ir atskiras pločio vertes.
Plotis gali būti nurodytas bet kuriame standartiniame vienete, pvz., Pikseliuose („px“), taškuose („pt“) arba centimetrais („cm“). Taip pat galite nurodyti plotį naudodami iš anksto nustatytas vertes „storas“, „plonas“ ir „vidutinis“.
| Stilius | apibūdinimas |
| kraštinės plotis: 10 taškų | |
| kraštinės plotis: 0,1 cm | |
| kraštinės plotis: vidutinis |
- pasienio spindulys atributas
Apibūdinant spindulį, siekiama užapvalinti kampus kraštui. Spindulio koeficientas apibrėžia apvalinimo mastą. Didesnė vertė, labiau išlenkti kampai. Kaip įprasta, spindulio vertės laikomos 1-3 kartus viršijančios krašto plotį.
Šis kodas sugeneruos:
kraštinės plotis: 10 taškų
krašto spindulys: 30 taškų
Numatytosios sienos atributų vertės
Vienintelis privalomas atributas yra stiliaus . Jei trūksta stiliaus, kraštinė nebus rodoma.
Jei spalva nenurodyta, pagrindinio elemento spalva laikoma numatytąja verte. Pavyzdžiui, jei pastraipos teksto spalva apibrėžiama kaip „mėlyna“, tai numatytoji kraštinės spalva taip pat bus mėlyna. Jei nėra elemento spalvos apibrėžimo, numatytoji spalva yra „juoda“.
Numatytoji pločio vertė yra „vidutinė“.
Apibrėžkite sienas trumpai
Kai kurie kūrėjai nori apibrėžti krašto atributus glaustoje vienos eilutės žymoje. Šis trumpo formato formatas padeda sumažinti kodo eilutes ir ekspertai kūrėjai teikia pirmenybę šiam formatui. Jei kraštinės apibrėžimas yra paprastas ir gana standartizuotas, rekomenduojama naudoti stenografijos formatą. Tačiau, jei reikia paryškinti kiekvieną sienos kraštą skirtingu stiliumi, turite laikytis atskirų žymų apibrėžimo formato.
Naudojamas šis kodas:
sienos stiliaus: brūkšninis
krašto spalva: žalia
kraštinės plotis: 5 tšk
kraštas: brūkšninis žalias 5 taškų
Taškai, kuriuos reikia nepamiršti projektuojant sienas CSS
Nenaudokite per daug kraštų puslapyje, tai gali atitraukti dėmesį ir apsunkinti vartotojo dėmesį.
Svarbu išlaikyti sienų stiliaus ir spalvų nuoseklumą. Elementai, esantys tame pačiame puslapio hierarchijos lygyje, turi turėti panašų kraštinių stilių ir plotį, kad jie būtų vienodi. Pavyzdžiui, jei pastraipą yra apibrėžta tvirta siena ir 5 taškų pločiu, išlaikykite šį formatą visuose kituose pastraipą kuriant interneto svetaines.
Laikykitės vieno stiliaus žymių apibrėžimų. Kai kuriems kūrėjams patiko sparčiųjų klavišų apibrėžimai, kai visos vertės priskiriamos vienam sienos žyma. Kai kurie kiti teikia pirmenybę aiškiam visų pločio, spalvos ir stiliaus žymių sąrašui. Susitarimas yra tas, kad kai puslapyje reikalingi sudėtingi krašto papuošimai, atskiros žymos pateikiamos atskirai. Tai padeda derinant tokius pritaikytus krašto apibrėžimus. Normaliais atvejais tinka tik nuorodos apibrėžimas.
Tikiuosi, kad radote ieškomą informaciją CSS sienose ir wAtsižvelgus į tai, CSS straipsnyje pasienis baigėsi.
Patikrinkite mūsų kuris ateina su instruktorių vedamomis tiesioginėmis treniruotėmis ir realių projektų patirtimi. Šie mokymai leidžia išmokti dirbti su išorinėmis ir išorinėmis interneto technologijomis. Tai apima mokymus apie žiniatinklio plėtrą, „jQuery“, „Angular“, „NodeJS“, „ExpressJS“ ir „MongoDB“.
Turite mums klausimą? Prašau tai paminėti tinklaraščio „Pasienis CSS“ komentarų skyriuje ir mes su jumis susisieksime.