Kornizë tavoline element i rëndësishëm. Është i gjithanshëm dhe përdoret shpesh. Ky tutorial do të mbulojë se si të kornizoni një tabelë, qelizë dhe rresht duke përdorur një atribut, por pjesa kryesore e tutorialit do të fokusohet në vetitë e CSS sepse korniza bëhet e përgjithshme kur përdoren stilet CSS.
Krijimi i një kornize duke përdorur një atribut
Aspak një atribut i zgjerueshëm, do të thoja i pakuptimtë. Atributi border vendos gjerësinë e kufirit dhe kaq. Më tej është një shembull:
| Qeliza 1 | Qeliza 2 |
Një mënyrë e thjeshtë për të krijuar një kufi rreth një elementi
Unë them menjëherë shënime të detajuara Nuk do të jap, pasi do të ketë një mësim të madh për pronën kufitare në të ardhmen dhe ndoshta më shumë se një. Pronë Gjenerike kufiri është në gjendje të vendosë trashësinë, stilin dhe ngjyrën e kufijve (kornizave) menjëherë. Trashësia mund të jetë çdo, ngjyra e kufijve vendoset në format heksadecimal, format rgb dhe fjalë kyçe(e kuqe, e zezë, etj.). Cilat janë stilet, fotografia më poshtë (foto është marrë nga faqja e internetit htmlbook.ru) dhe më pas një shembull:
td(
kufiri: 5px solid #CCCCCC;
}
Kornizë majtas, djathtas, poshtë dhe lart
Kur përdorni kufirin, krijohet një kufi nga të gjitha anët. Por ne mund të kontrollojmë nga cila anë të nxjerrim kornizën. Kufiri majtas kufiri majtas: 2px e zezë e fortë; kufiri-djathtas kufiri-djathtas: 1px me pika #FF0000 ; kufiri i poshtëm kufiri-fundi: 10 px solid #000000 ; kufiri i sipërm: 1px jeshile e fortë. Siç mund ta shihni, ata nuk duhet të kenë vlera të njëjta, dhe gjithashtu mund t'i kombinoni ato, domethënë të shkruani disa, për shembull, kufijtë e majtë dhe të djathtë (korniza), etj. Gjithçka. Nuk do të ngjitem më tej, kjo është tema e një mësimi tjetër. Shembull:
tabela (
kufiri-majtas: 5px solid #CCCCCC;
kufiri-djathtas: 5px solid #CCCCCC;
}
td(
kufiri-lart: 5px solid #CCCCCC;
kufiri-fund: 5px solid #CCCCCC;
}
Qoshe të rrumbullakosura
Tani le të prekim pak temën e "gjërave të bukura" dhe përdorshmërisë. Për të bërë skajet e kornizave të rrumbullakosura, ekziston pronë kufitare-rrezja . Është gjithashtu mësim i veçantë, nuk do të hyjmë në shumë detaje. Ai pranon sasi të ndryshme argumentet. Do të shkruajmë (vetëm në këtë mësim) një argument, dhe nëse shkruajmë një vlerë, atëherë do të ketë të njëjtin rrumbullakim në të gjitha anët (këndet). Vlera mund të jetë në "masa" të ndryshme, si p.sh. pikselë dhe përqindje. Më tej është një shembull:
td(
kufiri: 5px solid #CCCCCC;
kufiri-rreze: 10px
}
Margjinat ose mbushja
Në mënyrë që teksti të mos jetë pranë kornizës, duhet të futeni nga ai. Prona e mbushjes do të na ndihmojë me këtë. Është gjithashtu shumëfunksional, por ne do ta konsiderojmë atë pjesërisht, të gjitha për të njëjtën arsye. Ne do të përdorim vetëm një vlerë. Vlera mund të jetë në "masa" të ndryshme, si p.sh. pikselë dhe përqindje. Më tej është një shembull:
td(
kufiri: 5px solid #CCCCCC;
kufiri-rreze: 10px
mbushje: 10 px
Korniza rreth tryezës ju lejon të përqendroheni në të, ta ndani atë nga pjesa tjetër e përmbajtjes së faqes në internet dhe të zgjeroni grupin e mjeteve të dizajnit të tabelës.
Për të krijuar një kufi, aplikohet vetia e stilit të kufirit, e cila shtohet në përzgjedhësin TABLE. Tabela gjithashtu duket spektakolare kur ngjyra e kornizës përputhet me ngjyrën e sfondit të kokës (etiketa
Shembulli 1 tregon se si të krijoni një tabelë kaq të thjeshtë.
Shembulli 1: Krijimi i një kornize rreth një tavoline
| 2004 | 2005 | 2006 | |
|---|---|---|---|
| Rubinë | 43 | 51 | 79 |
| smeraldi | 28 | 34 | 48 |
| Safirët | 29 | 57 | 36 |
NË ky shembull rreshtimi i tekstit në të gjitha qelizat është i rreshtuar majtas, gjë që nuk është gjithmonë e përshtatshme. Në fig. Figura 2 tregon një tabelë ku përmbajtja e qelizave është e përqendruar, përveç kolonës së majtë, ku teksti lihet i rreshtuar.
Shtrirja ndryshohet duke përdorur veçorinë e stilit të rreshtimit të tekstit, me qeliza individuale që kërkojnë të shtypni klasë e re për të kontrolluar në mënyrë fleksibël disa karakteristika (shembulli 2).
Shembulli 2: Tabela me shtrirjen e përmbajtjes së qelizave
| 2004 | 2005 | 2006 | |
|---|---|---|---|
| Rubinë | 43 | 51 | 79 |
| smeraldi | 28 | 34 | 48 |
| Safirët | 29 | 57 | 36 |
Ky shembull shton një klasë stili të quajtur lc, e cila shtohet në qelizat e kolonës së majtë për të ndryshuar shtrirjen e përmbajtjes dhe për ta bërë tekstin të trashë.
Një tabelë me një sfond kokë të bërë në formën e një gradienti duket spektakolare (Fig. 3). Në të njëjtën kohë, krijimi i një tabele të tillë nuk është veçanërisht i vështirë.
Në këtë rast, një model i përgatitur paraprakisht përdoret si sfond, për shembull, siç tregohet në Fig. 4.
Ka disa mënyra për të shtuar një sfond vetëm në një rresht tabele. Ju mund të përdorni etiketën , e cila është projektuar për të ruajtur një ose më shumë rreshta, të cilat janë paraqitur në krye të tabelës. Për këtë etiketë, ne shtojmë sfondin e veçorisë së stilit, ai njëkohësisht përcakton ngjyrën e sfondit dhe imazhin e sfondit, si dhe përsëritshmërinë e tij (shembulli 3).
Shembulli 3 Përdorimi foto sfondi
Në këtë shembull, etiketa vetëm mbulesa linjë e sipërme tabela me titullin e saj. Për këtë etiketë, ngjyra e sfondit dhe fotografia vendosen në stile në të njëjtën kohë, gjë që tregohet në Fig. 4. Edhe pse ngjyra nën foto nuk është e dukshme, është gjithmonë më mirë ta shtoni atë, për shembull, në rast se përdoruesi çaktivizon shfaqjen e imazheve në shfletues.
Vetia e kufirit CSS rregullohet për të krijuar kufirin e një objekti, domethënë për trashësinë e kufirit, për ngjyrën dhe stilin e tij. Kjo veçori përdoret gjerësisht në HTML. Mund të krijojë efekte të ndryshme për një perceptim më të mirë të përmbajtjes në faqe. Për shembull, dizajnoni një shirit anësor, kokën e faqes, menunë, etj. Vlerat në pronën e kufirit CSS mund të vendosen në çdo mënyrë. Sekuenca më e përdorur është "ngjyra e stilit të trashësisë". border-style: dotted border-style: dashed border-style: solid border-style: double border-style: groove border-style: ridge border-style: inset border-style: outset Четыре разных рамки Этот пример очень простой, но интересный. Он показывает, как можно использовать псевдокласс :hover
и рамку CSS border для создания простых эффектов (например, для меню). Вот как это выглядит на странице: Рамку можно сделать прозрачной. Этот эффект редко, но иногда может быть очень полезен для веб-дизайнеров. Для задания прозрачности надо воспользоваться заданием цвета в виде RGBA (R, G, B, P)
, где последним параметром задается прозрачность (вещественное число от 0.0 до 1.0) Вот как это выглядит на странице: Задает толщину линии. Ранее мы задавали ее в едином описании border. Синтаксис CSS border-width
Ниже приведены несколько примеров. Самым необычным будет - это разная толщина границы у каждой стороны. Вот как это выглядит на странице: border-width: thin border-width: medium border-width: thick Разная толщина у границ У свойства CSS border
есть производные свойства для задания односторонних границ у элемента: Эти границы можно совмещать, т.е. прописать для каждого направления свою рамку. Синтаксис точно такой же как и у border. Также есть свойства На мой взгляд проще писать все в строчку, чем плодить лишний текст в стилях. Например, следующие свойства будут одинаковыми Вот как это выглядит на странице: Пример рамки для цитаты Примечание
Иногда требуется сделать несколько границ. Приведем пример Вот как это выглядит на странице: Есть второй способ через наложение теней. Вот как это выглядит на странице: Для создания красивых рамок используют свойство CSS border-radius
(доступно только в CSS3). С помощью него можно делать скругления углов, что создает совсем другой вид. Например Вдавленные линии эффектно могут смотреться на темном фоне, что подходит далеко не каждому сайту. Вот как это выглядит на странице: Для обращения к border
из JavaScript нужно писать следующую конструкцию: Влад Мержевич С помощью CSS можно добавить рамку к элементу несколькими способами. В основном, конечно же, применяется свойство border
, как наиболее универсальное, а также outline
и, как ни удивительно, box-shadow
, основная задача которого - создание тени. Далее рассмотрим эти методы и их различия между собой. Самое простое свойство для создания рамок. Имеет те же параметры, что и border
, но существенно отличается от него некоторыми деталями: Возникает вопрос - в каких случаях нужен outline
, когда его роль, несмотря на перечисленные отличия, вполне берёт на себя border
? Ситуаций не так и много, но они встречаются: Надо понимать, что outline
ни в коей мере не заменяет border
и вполне может существовать вместе с ним, как показано в примере 1. Пример 1. Создание рамки
Në këtë shembull, rreth elementit shtohet një kufi i zi, i cili ndahet nga sfondi me një kufi të bardhë (Fig. 1). Oriz. 1. Kufiri rreth elementit Shtimi i një kufiri përtej kufirit rrit gjerësinë e elementit, e cila është mjaft e dukshme kur kombinohet kufiri dhe pseudo-klasa :hover. Ka dy mënyra për të "fituar". Më e thjeshta është zëvendësimi i kufirit me një skicë, e cila e dimë se nuk ka asnjë efekt në madhësinë e elementit (shembulli 2). Shembulli 2: Kornizë në lëvizje
skica nuk është gjithmonë e përshtatshme, vetëm sepse nuk ndikohet nga qoshet e rrumbullakosura. Metoda e dytë është e përshtatshme këtu - shtoni një kufi të padukshëm ose një kufi që përputhet me ngjyrën e sfondit dhe më pas ndryshoni parametrat e tij kur rri pezull (shembulli 3). Atëherë nuk do të ndodhë asnjë zhvendosje e elementit, pasi korniza është tashmë aty fillimisht. Por gjithmonë mbani mend se gjerësia e elementit është shuma e vlerave të gjerësisë, kufirit në të majtë dhe kufirit në të djathtë. E njëjta gjë është e vërtetë me lartësinë. Shembulli 3: Korniza në rri pezull
Disa shfletues (Chrome, Safari, versionet e fundit Opera) shfaq një ikonë të vogël rreth fushave të formularit kur ato marrin fokus. kornizë me ngjyra(Fig. 2). Për ta hequr atë, mjafton të shtoni vlerën none në vetinë e skicës në stile, siç tregohet në shembullin 4. Oriz. 2. Kornizë rreth fushave Shembulli 4. Hiqni kornizën
Edhe pse vetia box-shadow synon të shtojë një hije rreth një elementi, ajo mund të përdoret gjithashtu për të krijuar kufij, dhe ato që nuk mund të bëhen me kufi ose skicë . Kjo për faktin se numri i hijeve mund të jetë i pakufizuar, parametrat e të cilave renditen të ndara me presje. Për të marrë një kornizë, tre parametrat e parë duhet të vendosen në zero, ata janë përgjegjës për pozicionin e hijes dhe turbullimin e saj. Opsioni i katërt në këtë rastështë përgjegjës për trashësinë e kufirit, dhe i pesti vendos ngjyrën e kufirit. Për kornizën e dytë, parametri i katërt është i barabartë me shumën e trashësisë së dy kornizave. Shembulli 4 tregon se si të shtoni dy kuti dhe një kufi në të djathtë duke përdorur një veti të vetme hije kuti. Shembulli 4: Përdorimi i hijes së kutisë
Rezultati i këtij shembulli është paraqitur në Fig. 3. Oriz. 3. Kornizat e krijuara nga vetia box-shadow Për çdo webmaster, për shkak të tij veprimtari profesionale, ju duhet të krijoni elemente të caktuara komplekse në faqe Kufiri i kornizës së tavolinës me ngjyrë. Atributi "kufi" duhet të jetë i barabartë me "0". Hapësira e qelizave barazohet me "2" (se më shumë numër, aq më i gjerë do të jetë kufiri i tabelës). Ky etiketë specifikon se ku duhet të vendoset informacioni. Në këtë shembull, do të na duhet të rregullojmë informacionin duke filluar nga skaji i sipërm i tabelës. Fusim një tabelë tjetër në qelizën e tabelës sonë. Specifikoni ngjyrën e sfondit të tabelës. Në këtë rast, na duhet një sfond i bardhë. Kjo eshte e gjitha. Tabela jonë është gati. Tani kemi një tabelë, korniza e së cilës do të shfaqet në të gjithë shfletuesit në të njëjtën mënyrë. Së fundi, unë do të jap të gjithë kodin që kemi krijuar.
2004 2005 2006
Rubinë 43 51 79
smeraldi 28 34 48
Safirët 29 57 36
1. Sintaksa e kufirit CSS
kufiri: kufiri me gjerësi kufiri në stilin e kufirit me ngjyrë | trashëgojnë;
shënim 2. Shembuj me kufij të ndryshëm të kufirit CSS
2.1. Shembull. Stilet e ndryshme të kufirit të stilit kufitar
2.2. Пример. Изменения цвета рамки при наведении курсора мыши
2.3. Пример. Как сделать прозрачную рамку border
3. Толщина границы: свойство border-width
border-width
: thin | medium | thick | значение
;
4. Как сделать рамку border только с одного края (границы)
/* Описание двух одинаковых стилей:
*/
4.1. Пример. Красивая рамка для выделения цитат
Можно задать отдельную границу для каждой из сторон.5. Как сделать несколько границ border у элемента html
5.1. Первый вариант с несколькими границами
5.2. Наложение теней для создания нескольких границ
6. Скругление углов у границ (border-radius)
7. Вдавленная линия CSS
document.getElementById("elementID").style.border
="VALUE
"
Свойство outline
Разноцветные рамки
Korniza kur përdoret: rri pezull
Kufiri rreth fushave të formës
Korniza përmes hijes së kutisë
(Për shembull: mbështjellja e grafikëve me tekst, krijimi i kolonave me tekst, rregullimi i elementeve të faqes).
Sidoqoftë, standardi html ka një numër të vogël elementesh standarde të dizajnit të faqeve dhe jo të gjithë elementët shfaqen në mënyrë të barabartë shfletues të ndryshëm. Çdo kompani përpiqet të zhvillojë html-in e vet, ndonjëherë duke shkuar larg konceptit bazë html të zhvilluar nga konsorciumi WWW.
Prandaj, webmaster duhet të eksperimentojë me elementë që janë të zakonshëm për të gjithë shfletuesit.
Tabelat janë më të përshtatshmet, sepse është i përshtatshëm për të vendosur informacione në qelizat e tabelës.
Për më tepër, tabelat në html kanë atributin "border="0" - ky atribut me vlerën "0" fsheh kufijtë e tabelës, d.m.th., përmbajtja e qelizës mbetet e dukshme dhe vetë korniza nuk është e dukshme.
Le të shohim tani një shembull të zhvillimit të dizajnit tabelor.
Vërej menjëherë se në html, si parazgjedhje, është ndërtuar një atribut që është përgjegjës për ngjyrën e kornizës së tabelës. (ngjyra e kufirit). Megjithatë, kjo nuk na përshtatet, sepse atribut i dhënë vetëm i mbështetur Shfletuesi i internetit eksplorues. Ky element nuk funksionon në shfletues të tjerë. Por ne kemi nevojë që faqja të shfaqet në të njëjtën mënyrë në çdo shfletues. Tavolinat na vijnë në ndihmë. Le të krijojmë së pari një tabelë të rregullt.
Atributi "cellspacing" përdoret për të treguar distancën midis dy qelizave. Në këtë rast, do të tregojë distancën midis dy tabelave.
Plotësoni tabelën me të zezë duke përdorur atributin "bgcolor" Në përgjithësi, ju mund të zgjidhni çdo ngjyrë tjetër, në varësi të ngjyrës së kufirit tuaj.
Artikujt kryesorë të lidhur
