Cadru de masă element important. Este universal și des folosit. Acest tutorial va acoperi cum să încadrezi un tabel, o celulă și un rând folosind un atribut, dar cea mai mare parte a tutorialului se va concentra pe proprietățile CSS, deoarece chenarul devine universal când se utilizează stiluri CSS.
Crearea unui cadru folosind un atribut
În general, nu este un atribut extensibil, aș spune fără sens. Atributul border setează grosimea chenarului și atât. Mai jos este un exemplu:
| Celula 1 | Celula 2 |
O modalitate ușoară de a crea o chenar în jurul unui element
spun eu imediat înregistrări detaliate Nu o voi da aici, deoarece va exista o lecție uriașă despre proprietatea de frontieră în viitor și poate mai mult de una. Proprietate universală chenar poate seta grosimea, stilul și culoarea chenarelor (cadrelor) simultan. Grosimea poate fi orice, culoarea chenarelor este setată în format hexazecimal, format rgb și Cuvinte cheie(roșu, negru etc.). Ce stiluri există, poza de mai jos (poza luată de pe site-ul htmlbook.ru) și următorul exemplu:
td(
chenar: 5px solid #CCCCCC;
}
Cadru stânga, dreapta, jos și sus
Când utilizați chenar, se creează un cadru pe toate părțile. Dar putem controla din ce parte să desenăm cadrul. Chenar stânga chenar-stânga: 2px negru solid; chenar-dreapta chenar-dreapta: 1px punctat #FF0000 ; chenar-jos: 10px solid #000000 ; chenar-sus: 1px verde continuu. După cum puteți vedea, nu trebuie să aibă aceleasi valoriși, de asemenea, le puteți combina, adică scrieți mai multe, de exemplu, marginea stângă și dreaptă (cadru) etc. Toate. Nu voi merge mai departe, acesta este subiectul unei alte lecții. Exemplu:
masa (
chenar-stânga: 5px solid #CCCCCC;
chenar-dreapta: 5px solid #CCCCCC;
}
td(
chenar-sus: 5px solid #CCCCCC;
chenar-jos: 5px solid #CCCCCC;
}
Colturi rotunjite
Acum să atingem puțin subiectul „frumusețe” și utilizare. Pentru a face marginile ramelor rotunjite, există proprietate de frontieră-raza . Este prea lecție separată, nu vom intra în multe detalii. El acceptă cantități diferite argumente. Vom scrie (doar în această lecție) un argument, iar dacă scriem o singură valoare, atunci va fi aceeași rotunjire pe toate părțile (colțurile). Valoarea poate fi în diferite „măsuri”, cum ar fi pixeli și procente. Mai jos este un exemplu:
td(
chenar: 5px solid #CCCCCC;
chenar-rază: 10px;
}
Margini sau umplutură
Pentru a preveni ca textul să se alinieze la cadru, trebuie să-l indentați. Proprietatea de umplutură ne va ajuta în acest sens. Este și multifuncțională, dar o vom lua în considerare parțial, toate din același motiv. Vom folosi o singură valoare. Valoarea poate fi în diferite „măsuri”, cum ar fi pixeli și procente. Mai jos este un exemplu:
td(
chenar: 5px solid #CCCCCC;
chenar-rază: 10px;
umplutură: 10px;
Un cadru în jurul unui tabel vă permite să îl evidențiați, să îl separați de restul paginii web și să vă extindeți instrumentele de proiectare a mesei.
Pentru a crea un chenar, utilizați proprietatea stilului de chenar, care este adăugată la selectorul TABLE. Tabelul arată, de asemenea, impresionant atunci când culoarea cadrului se potrivește cu culoarea de fundal a antetului (tag
Exemplul 1 arată cum să creați un tabel atât de simplu.
Exemplul 1: Creați un cadru în jurul unei mese
| 2004 | 2005 | 2006 | |
|---|---|---|---|
| Rubinele | 43 | 51 | 79 |
| Smaralde | 28 | 34 | 48 |
| Safire | 29 | 57 | 36 |
ÎN în acest exemplu Textul din toate celulele este aliniat la stânga, ceea ce nu este întotdeauna convenabil. În fig. Figura 2 prezintă un tabel în care conținutul celulelor este centrat, cu excepția coloanei din stânga, unde textul este aliniat la stânga.
Modificarea alinierii se face folosind proprietatea stilului text-align, necesitând introducerea noua clasa pentru a controla flexibil unele caracteristici (exemplul 2).
Exemplul 2: Tabel cu alinierea conținutului celulei
| 2004 | 2005 | 2006 | |
|---|---|---|---|
| Rubinele | 43 | 51 | 79 |
| Smaralde | 28 | 34 | 48 |
| Safire | 29 | 57 | 36 |
Acest exemplu adaugă o clasă de stil numită lc în celulele coloanei din stânga pentru a modifica alinierea conținutului și a face textul aldine.
Un tabel cu un fundal antet sub formă de gradient arată impresionant (Fig. 3). Cu toate acestea, crearea unui astfel de tabel nu este deosebit de dificilă.
În acest caz, un desen pre-preparat este folosit ca fundal, de exemplu, așa cum se arată în Fig. 4.
Există mai multe moduri de a adăuga un fundal la un singur rând al unui tabel. Puteți folosi eticheta , care este conceput pentru a stoca unul sau mai multe rânduri care sunt prezentate în partea de sus a tabelului. Pentru această etichetă, adăugăm un fundal de proprietate de stil, care definește simultan culoarea de fundal și imaginea de fundal, precum și repetabilitatea acesteia (exemplul 3).
Exemplul 3: Utilizare imagine de fundal
În acest exemplu, eticheta numai acoperiri linia de sus tabel cu titlul acestuia. Pentru această etichetă, stilurile setează simultan culoarea de fundal și imaginea prezentată în Fig. 4. Deși culoarea de sub imagine nu este vizibilă, este întotdeauna mai bine să o adăugați, de exemplu, în cazul în care utilizatorul dezactivează afișarea imaginilor în browser.
Proprietatea border CSS este folosită pentru a crea chenarul unui obiect, și anume grosimea chenarului, culoarea și stilul acestuia. Această proprietate este utilizată pe scară largă în HTML. Puteți crea diverse efecte pentru o mai bună percepție a conținutului din pagină. De exemplu, proiectați o bară laterală, un antet de site, un meniu etc. Valorile din proprietatea border CSS pot fi setate în orice ordine. Secvența cea mai des folosită este „culoarea stilului de grosime”. 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 acest exemplu, în jurul elementului este adăugat un cadru negru, care este separat de fundal printr-un chenar alb (Fig. 1). Orez. 1. Încadrați în jurul elementului Când se adaugă un cadru prin chenar, lățimea elementului crește, ceea ce este destul de vizibil când se combină chenar și pseudo-clasa :hover. Există două moduri de a „câștiga” acest lucru. Cel mai simplu lucru este să înlocuiți chenar cu outline , care, după cum știm, nu afectează dimensiunea elementului (exemplul 2). Exemplul 2: Cadru pe Hover
conturul nu este întotdeauna potrivit, fie și numai pentru că rotunjirea colțurilor nu îl afectează. A doua metodă este potrivită aici - adăugați un cadru invizibil sau un cadru care se potrivește cu culoarea de fundal, apoi modificați parametrii acestuia când treceți cu mouse-ul (exemplul 3). Atunci nu va avea loc nicio deplasare a elementului, deoarece cadrul inițial există deja. Dar ne amintim întotdeauna că lățimea elementului este suma valorilor lățimii, chenarul din stânga și chenarul din dreapta. Situația este similară cu înălțimea. Exemplul 3: Cadru pe Hover
În unele browsere (Chrome, Safari, ultimele versiuni Opera) o pictogramă mică este afișată în jurul câmpurilor de formular atunci când acestea primesc focalizare. rama de culoare(Fig. 2). Pentru a-l elimina, trebuie doar să adăugați valoarea none la proprietatea contur din stiluri, așa cum se arată în exemplul 4. Orez. 2. Încadrați în jurul marginilor Exemplul 4. Scoaterea cadrului
Deși proprietatea box-shadow este destinată să adauge o umbră în jurul unui element, poate fi folosită și pentru a crea chenare care nu pot fi create folosind border sau outline . Acest lucru se datorează faptului că numărul de umbre poate fi nelimitat, ai căror parametri sunt enumerați separați prin virgule. Pentru a obține un cadru, primii trei parametri ar trebui setați la zero; aceștia sunt responsabili pentru poziția umbrei și estomparea acesteia. Al patrulea parametru în în acest caz, este responsabil pentru grosimea chenarului, iar al cincilea stabilește culoarea chenarului. Pentru al doilea cadru, al patrulea parametru este egal cu suma grosimilor celor două rame. Exemplul 4 arată cum să adăugați două cadre și un chenar la dreapta folosind o singură proprietate casetă-umbră. Exemplul 4: Utilizarea box-shadow
Rezultatul acestui exemplu este prezentat în Fig. 3. Orez. 3. Cadre create de proprietatea box-shadow Orice webmaster, prin prisma lui activitate profesională, trebuie să creați anumite elemente complexe pe site Bord colorat pentru cadru de masă. Atributul „border” trebuie setat la „0”. spația dintre celule este egală cu „2” (decât număr mai mare, cu atât rama mesei va fi mai lată). Această etichetă specifică unde ar trebui să fie localizate informațiile. În acest exemplu, va trebui să aranjam informațiile începând din partea de sus a tabelului. Inserăm un alt tabel într-o celulă a tabelului nostru. Specificați culoarea de fundal a tabelului. În acest caz, vom avea nevoie de un fundal alb. Asta e tot. Masa noastră este gata. Acum avem un tabel al cărui cadru va fi afișat la fel în toate browserele. În cele din urmă, vă voi oferi tot codul pe care l-am creat.
2004 2005 2006
Rubinele 43 51 79
Smaralde 28 34 48
Safire 29 57 36
1. Sintaxa chenarului CSS
granita: border-width border-style chenar-culoare | moşteni;
Notă 2. Exemple cu diferite margini CSS
2.1. Exemplu. Diferite stiluri de design de chenar-stil de chenar
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
Разноцветные рамки
Cadru când se utilizează: hover
Chenar în jurul câmpurilor de formular
Cadre prin box-shadow
(De exemplu: împachetarea textului în jurul graficelor, crearea coloanelor cu text, fixarea elementelor site-ului).
Cu toate acestea, standardul HTML are un număr mic de elemente standard de design de pagină și nu toate elementele sunt afișate în mod egal browsere diferite. Fiecare companie încearcă să-și dezvolte propriul HTML, depărtându-se uneori de conceptul de bază de HTML dezvoltat de consorțiul WWW.
Prin urmare, webmasterul trebuie să experimenteze cu elemente care sunt comune tuturor browserelor.
Tabelele sunt cele mai potrivite deoarece este convenabil să plasați informații în celulele tabelului.
În plus, tabelele în html au atributul „border="0” - acest atribut cu valoarea „0” ascunde marginile tabelului, adică conținutul celulei rămâne vizibil, dar cadrul în sine nu este vizibil.
Să ne uităm acum la un exemplu de dezvoltare a unui design de masă.
Voi observa imediat că html, în mod implicit, are un atribut încorporat care este responsabil pentru culoarea cadrului tabelului. (colorul chenarului). Totuși, nu ne va convine, pentru că acest atribut doar suportate motor de cautare Explorator. Acest element nu funcționează în alte browsere. Dar avem nevoie ca pagina să fie afișată la fel în orice browser. Mesele ne vin în ajutor. Mai întâi să creăm un tabel obișnuit.
Atributul „cellspacing” este folosit pentru a indica distanța dintre două celule. În acest caz, va indica distanța dintre două tabele.
Să umplem tabelul cu negru folosind atributul „bgcolor” În general, poți alege orice altă culoare, în funcție de ce culoare va avea rama ta.
Cele mai bune articole pe această temă
