Să ne uităm la un document. Elementele HTML sunt formate pe acesta (afișate pe ecran în browser). Ele sunt formate pe baza etichetelor. Tu plasezi etichete, acestea sunt procesate de parserul html (disponibil în orice browser) și construiește elemente html. Și cum vor arăta aceste elemente este determinat de CSS.
Toate elementele html au 4 zone: zona de umplutură, chenarul, umplutura și conținutul elementului. Pentru ce sunt necesare?
- Marginile externe (marja) sunt necesare pentru a regla interacțiunea acestui element cu marginile altor elemente.
- Umplutura este distanța de la cadru la conținutul unui element dat.
- Conținutul elementului în sine. Este clar aici. Dacă există elemente imbricate, atunci acestea sunt situate în această zonă.
- Cadru (chenar). Conturează limitele unui element. Schematic, cele 4 zone pot fi reprezentate astfel:
Trebuie înțeles că fiecare element se află într-o anumită zonă. Această zonă pentru elementul care se află în interiorul său se numește container. Acestea. Containerul este zona de conținut a elementului părinte. Această zonă determină spațiul pentru construirea elementului interior. Aceasta înseamnă că elementul intern se va ajusta la dimensiunea acestei zone.
Marjele
Acesta este momentul în care elementul nostru interacționează cu marginile containerului și cu marginile elemente învecinate(cele care se află lângă el în cod). Reguli de baza:
- margin-top: auto|magnitude|% - marginea superioară.
- margin-right: auto|magnitude|% - margine din dreapta.
- margin-bottom: auto|magnitude|% - margine de jos.
- margin-left: auto|magnitude|% - marginea stângă.
- margine: margine-margine sus-dreapta margine-jos margine-stânga – regulă prefabricată.
Valoarea „auto” înseamnă că browserul va analiza independent aceste valori. Mărimea indentării poate fi specificată în următoarele valori: em, ex, px. Procentele (%) sunt calculate din lățimea containerului (din zona de conținut a elementului părinte). Dacă specificați o valoare negativă, marginile elementelor din interiorul containerului părinte se vor ciocni unele cu altele.
Regula „marginei” este una compusă; aici sunt indicate valorile tuturor celor 4 margini (începând de sus și în sensul acelor de ceasornic). Exemple:
Marja: 10px 20px 20px 30px; marjă: 10px 20px 30px; - marja de la stânga la dreapta este aceeași marjă: 10px 20px; - marginea de sus-jos și stânga-dreapta este aceeași marjă: 10px; - toate liniuțele sunt aceleași
Captuseala
Nu pot exista valori negative aici, pentru că Este imposibil să mutați conținutul dincolo de cadrul elementului. Procentele sunt calculate în funcție de lățimea containerului.
- padding-top: valoare|%.
- padding-right: valoare|%.
- padding-bottom: valoare|%.
- padding-left: valoare|%.
- padding: padding-top padding-right padding-bottom padding-stânga - regulă prefabricată. Similar cu „marja”.
Frontiere în CSS
Toate ramele au următoarele caracteristici:
- Grosime - lățime-chenar: valoare (subțire|mediu|gros). Implicit este mediu.
- Culoare - chenar-culoare: culoare. Implicit este culoarea fontului din acest element.
- Tip - stil de chenar: niciunul|punct|liniat|solid|dublu|canelu|cresta|inset|initie. Tipuri: fără cadru | puncte | punctat | solid | dublu | imitație de relief.
Regulile cadrului în sine:
- chenar-sus-(lățime|culoare|stil).
- chenar-dreapta-(lățime|culoare|stil).
- chenar-jos- (lățime|culoare|stil).
- chenar-stânga- (lățime|culoare|stil).
- bordura: bordura-latime chenar-stil chenar-culoare. Regula echipei.
Cadre (parametri de bloc)
Valorile acestor proprietăți sunt folosite pentru a seta caracteristicile zonei din jurul elementului.
Acest lucru poate fi aplicat simbolurilor, imaginilor etc.
| Opțiuni | Sens | Descriere |
| chenar-top-culoare chenar-dreapta-culoare chenar-stânga-culoare culoarea-chenar-jos chenar-culoare |
culoare (fara culoare Mod implicit) |
Determinați culoarea celor patru laturi ale ramelor. Dacă înlocuiți culoarea cu adresa URL a imaginii, aceasta se va repeta pentru a forma un cadru. |
| stil bordur-top chenar-dreapta-stil border-stânga-stil chenar-de jos-stil stil de bordura |
niciunul (implicit) solid dubla canelură creastă medalion început |
Determină stilul celor patru laturi ale ramelor. |
| border-top granita-dreapta granița-stânga chenar-de jos frontieră |
lățimea cadrului, stil_cadru, culoare (Mod implicit: |
Determinați proprietățile celor patru laturi ale cadrelor. Funcționează la fel ca și proprietățile de umplutură (vezi mai jos), cu excepția faptului că chenarul este vizibil. lățimea cadrului poate fi mediu, subțire sau gros sau specificat în unități. Argument culoare folosit pentru a defini culoarea de umplere pentru fundalul unui element în timp ce acesta se încarcă, precum și în spatele părților transparente ale elementului. Dacă treceți în schimb adresa imaginii, modelul se va repeta, umplând conturul cadrului. |
| margine-sus-latime bordura-dreapta-latime chenar-stânga-lățime chenar-latime-jos lățimea graniței |
subţire mediu (implicit) gros lungime |
Definiți lățimea marginii din jurul elementului. Fiecare parte poate fi specificată cu un parametru corespunzător. Puteți înlocui setarea a patru proprietăți individuale cu setarea unei proprietăți lățimea graniței la fel ca și pentru proprietățile de indentare marginea. |
| ciip | rect (/sus/dreapta/jos/stânga/) automat (implicit) |
Determină cât de mult din element este vizibil. Orice lucru în afara zonei specificate de acest parametru nu poate fi văzut. |
| afişa | "", nici unul "" (Mod implicit) |
Această setare specifică dacă elementul va fi afișat. |
| pluti | niciunul (implicit) stânga dreapta |
Specifică faptul că un element se înfășoară în jurul altor elemente la stânga sau la dreapta în loc să le plaseze sub ele. Sprijinit de etichete ,
...
|
| înălţime | automat (implicit) lungime |
Setați înălțimea elementului și măsurați-l, dacă este necesar. Valoarea este returnată ca șir, inclusiv unitățile (px, % etc.). Pentru a obține o valoare numerică, utilizați proprietatea posHeight. |
| stânga | automat (implicit) lungime interes |
Acestea stabilesc coordonatele orizontale ale elementului, permițându-vă să instalați și să mutați corect elementele. Valoarea este returnată ca șir, inclusiv unitățile (px, % etc.). Pentru a obține valoarea ca număr, utilizați proprietatea posLeft. |
Exemplul 1:
Această linie este subliniată cu o linie punctată. Exemplul 2: Diferite tipuri de rame.
| 1. niciunul - Fără chenar (border:none;) |
| 2. solid - Există o chenar (chenar: 1px solid;) |
Exemplul 4: Cadru cu colțuri rotunjite.
. V declaratiilor fiscale;
. certificate 2-NDFL;
Toate documentele enumerate indică 11 cod digital OKTMO în locul codurilor OKATO utilizate anterior.
|
#org Poziție:rudă; Culoare de fundal: #e8e3d4; |
Începând cu 1 ianuarie 2014, noile coduri OKTMO sunt indicate în: . în declarațiile fiscale; . certificate 2-NDFL; . ordine de plată (câmpul 105); . chitanta de plata impozite, taxe, taxe, formular PD-4 taxa. Toate documentele enumerate indică codul OKTMO din 11 cifre în locul codurilor OKATO utilizate anterior. |
|
Tabele imbricate
Chenar negru îngust (5px) Parametrii tabelului:
|
Latime si inaltime elemente de bloc
Proprietăți CSS lăţimeȘi înălţime- setați lățimea și înălțimea elementelor blocului.
Lățimea și înălțimea unui element pot fi setate în următoarele moduri:
- auto- Dimensiunile unui element sunt determinate de continutul acestuia. (Mod implicit)
- % - Dimensiunile elementului sunt stabilite ca procent din înălțimea/lățimea elementului părinte.
- px- Dimensiunile elementului sunt specificate în pixeli sau orice alte unități de măsură acceptate în CSS.
Gestionarea conținutului elementului
Ce să faci cu conținutul unui element dacă acesta depășește dimensiunea acestuia?
Dacă unui element i se dau valori exacte de înălțime și lățime ( Înălțime lățime) și conținutul acestuia, de exemplu text lung, nu se încadrează în limitele specificate, atunci implicit un astfel de element este extins la dimensiunile cerute, ceea ce nu este întotdeauna în avantajul webmasterului. Atributul vine în ajutor revărsare, care îi spune browserului ce să facă cu elementul în astfel de cazuri.
Proprietate revărsare poate avea următoarele semnificații:
- vizibil- Elementul este întins la dimensiunea necesară. (Mod implicit)
- ascuns- Conținutul elementului este „decupat”; doar acea parte a acestuia care se potrivește în element este vizibilă.
- sul- Sunt adăugate bare de defilare (întotdeauna! chiar dacă conținutul se încadrează în element).
- auto- Barele de defilare sunt adăugate dacă este necesar.
CSS
CSS(Engleză: Foi de stil în cascadă - foi de stil în cascadă) - un limbaj formal pentru descrierea aspectului unui document scris folosind un limbaj de marcare etc. .............
Rezultat
CSS
CSS(Engleză: Cascading Style Sheets) este un limbaj formal pentru a descrie aspectul unui document scris folosind un limbaj de marcare. Metode conexiuni CSS la documentRegulile CSS sunt scrise în mod formal Limbajul CSSși sunt situate în foi de stil, adică foile de stil conțin reguli CSS. Aceste foi de stil pot fi localizate fie în documentul web în sine, aspect pe care le descriu și în fișiere separate în format CSS. (În esență, formatul CSS este cel obișnuit fisier text. Fișierul .css nu conține decât o listă Reguli CSSși comentarii la ele.) Adică, aceste foi de stil pot fi conectate, încorporate în documentul web pe care îl descriu în patru moduri diferite:
- Când foaia de stil este în dosar separat, poate fi conectat la un document web folosind o etichetă , situat în acest document între etichete Și.
(Etichetă va avea un atribut href care are valoarea adresei acestei foi de stil). Toate regulile din acest tabel se aplică în întregul document;
.....
- Când o foaie de stil este într-un fișier separat, aceasta poate fi conectată la un document web folosind directiva @import, aflată în acest document între etichete Și) imediat după etichetă
- Când o foaie de stil este descrisă în documentul în sine, aceasta poate fi amplasată în ea între etichete(care, la rândul lor, se află în acest document între etichete Și). Toate regulile din acest tabel se aplică în întregul document;
.....
- Când o foaie de stil este descrisă în documentul în sine, aceasta poate fi localizată în ea în corpul unei etichete separate (prin atributul său de stil) a acestui document. Toate regulile din acest tabel se aplică numai conținutului acestei etichete.
cumpără un elefant
Informațiile înconjurate de un cadru vă permit să separați un material dintr-o pagină web de altul și să atrageți atenția cititorului.
În plus, cadrul adaugă eleganță designului site-ului.
Pentru a crea cadre sunt folosite mai multe metode, dintre care majoritatea folosesc proprietățile tabelelor. Stilurile completează capacitățile meselor și vă permit să creați diferite tipuri de rame prin mijloace simple. Mai jos sunt tehnici comune pentru obținerea cadrelor care pot fi găsite peste tot pe diferite site-uri.
Parametru frontieră
Cel mai simplu mod de a crea un chenar este să utilizați parametrii tabelului chenar, care determină grosimea chenarului, și bordercolor, care specifică culoarea acestuia. Ramele create în acest fel diferă ca aspect în browsere diferite(Fig. 3.1).
Orez. 3.1. Cadrul obtinut folosind parametrul de bordura
Netscape simulează tridimensionalitatea cadrului, browser Operaîn general își lasă culoarea neschimbată și Internet Explorer face cadrul solid.
Exemplul 3.1. Folosind parametrul border
| Conţinut |
Parametrul chenar definește grosimea cadrului, bordercolor – culoarea acestuia, cellpadding specifică distanța de la cadru până la conținutul tabelului.
Tabele imbricate
Inca una simpla metoda universala construirea unui cadru, care funcționează la fel în browsere diferite, se bazează pe suprapunerea a două tabele una peste alta. Dacă luăm un dreptunghi din, de exemplu, hârtie roșie și punem deasupra un alt dreptunghi alb, puțin dimensiune mai mică, apoi vom vedea un cadru roșu. Doar în loc de o foaie de hârtie folosim eticheta TABLE și setăm culoarea tabelului cu parametrul bgcolor.
Exemplul 3.2. Utilizarea tabelelor imbricate
|
În tabelul de sus, setați lățimea și înălțimea tabelului după cum doriți, folosind parametrul bgcolor setați culoarea cadrului, spațierea celulelor atribuie-o la zero și umplutură celulară controlează grosimea chenarului. Cu cât acest parametru este mai mare, cu atât cadrul va fi mai gros.
Pentru un tabel intern, este necesar să setați culoarea acestuia, diferită de culoarea externă, pentru a se potrivi cu culoarea de fundal a paginii web; în exemplu, de exemplu, este setat albul. Parametru spațierea celulelor sau umplutură celulară(V în acest caz, indiferent care să folosească) determină distanța de la marginea cadrului până la conținutul tabelului.
Lățimea și înălțimea mesei interne trebuie să se potrivească cu lățimea și înălțimea mesei externe.
Cometariu:Întreruperile de linie în codul HTML adaugă automat un spațiu. Dacă cadrul în unele locuri se dovedește mai gros decât s-a prevăzut, ar trebui să îl eliminați spatii suplimentareîntre etichete și astfel reduceți numărul de linii.
Umplerea celulelor tabelului cu culoare
Utilizarea culorii de fundal a celulelor tabelului este una dintre modalitățile universale și comune de a crea un chenar. Creați un tabel (Fig. 3.2) și completați celulele exterioare în culoarea potrivită(Fig. 3.3).
Orez. 3.2. Orez. 3.3
Grosimea cadrului este determinată de lățimea și înălțimea celulelor. Asigurați-vă că plasați un distanțier în interiorul acestor celule de tabel - desen transparent 1 pe 1 pixel în dimensiune (în exemplu se numește spacer.gif), altfel această metodă nu va funcționa în browserul Netscape.
Exemplul 3.3. Crearea unui cadru prin umplerea celulelor tabelului cu culoare
 | |  înălțime="2"> |
| înălțime="2"> | Conţinut | înălțime="2"> |
| înălțime="2"> | | înălțime="2"> |
ÎN în acest exemplu Se realizează un cadru roșu cu o grosime de 2 pixeli; arată cel mai elegant. Opțiuni de masă spațierea celulelorȘi umplutură celulară sunt egale cu zero, astfel încât cadrul să rămână grosimea dorită și fără goluri. Dacă plasați text în interiorul unui astfel de tabel, acesta se va potrivi strâns pe cadru, care este urât și greu de citit. Pentru a adăuga indentări, puteți crea celule suplimentare în acest scop, puteți utiliza un tabel imbricat sau puteți utiliza stiluri.
Cometariu: Metoda de mai sus este sensibilă la parametri diferiți, prin urmare, în cazul desenării incorecte a cadrului, ar trebui să verificați următoarele:
- dacă dimensiunea tabelului este specificată în pixeli, trebuie să specificați dimensiuni fixe toate celulele;
- când lățimea tabelului este specificată ca procent, trebuie să plasați text în interiorul cadrului care „extinde” celula interioară la lățimea dorită; dacă nu există text sau alt conținut în interiorul unui tabel cu un cadru, lățimea acestuia va fi mult mai mare decât se dorește;
- Nu ar trebui să existe caractere de spațiu neseparabile în celulele în care trece chenarul (& nbsp;), ceea ce unii editori de pagini web iubesc să adauge automat;
- rupturile de linie adaugă automat un spațiu textului, deci între etichetele de deschidere și de închidere
Și Textul trebuie scris pe o singură linie, astfel încât să nu existe goluri între celule.
Rama decorativa
Pentru a crea cadrul dorit, trebuie mai întâi să îl desenați într-un fel editor grafic. În fig. 3.4, de exemplu, arată un cadru cu colturi rotunjite. Apoi tăiem această imagine în 9 părți, marcate în Figura 3.5 linii portocalii si numere. Puteți tăia imaginea, de exemplu, în programul ImageReady sau altul similar.
Orez. 3.4.
Orez. 3.5.
După tăierea imaginii în bucăți, obținem 8 fragmente:
Nu va exista al cincilea fragment de cadru (5.gif), deoarece conținutul nostru îl va înlocui. Acum creăm un tabel cu dimensiunea 3x3, așa cum se arată în Fig. 3.2 și plasați desenele create în celulele sale.
Exemplul 3.4. Crearea unui cadru decorativ
 | width="1"> |  |
| Conţinut | ||
 | width="1"> |  |
Parametrii din tabel chenar, spațierea celulelorȘi umplutură celulară trebuie să fie egal cu zero, altfel liniile nu se vor conecta între ele.
Inserăm colțurile ca desene obișnuite folosind Etichetă IMG, dar orizontală și linii verticale ar trebui să fie setat folosind fundalul celulei tabelului, parametrul fundal. Acest lucru va face cadrul nostru scalabil și dimensiunea acestuia se va schimba în funcție de conținut.
Pentru ca liniile să se potrivească strâns unele cu altele și să nu existe spații între ele, este necesar să indicați toate dimensiunile celulelor și desenelor.
În celulele în care liniile orizontale și verticale sunt plasate în fundal, este necesar să plasați un distanțier - acesta este fie un spațiu, fie un model transparent format GIF 1 pe 1 pixel în dimensiune (în exemplu, fișierul se numește spacer.gif). Acest lucru se face pentru a păcăli browserul Netscape, care nu afișează conținutul unei celule dacă este goală.
Această metodă vă permite să creați cadre de aproape orice tip.
Utilizarea stilurilor
Folosind stiluri, puteți aplica un cadru oricăruia eticheta bloc, de exemplu, paragraf (eticheta P), tabel și eticheta DIV. Stilurile fac mai ușor și mai convenabil crearea unui cadru decât folosirea meselor și furnizarea tipuri diferite cadre, care sunt prezentate în fig. 3.6.
Orez. 3.6 Tipul de cadre specificate folosind stiluri
Primele două tipuri de rame sunt punctatȘi întreruptă sunt acceptate de browserele Netscape și Internet Explorer numai din versiuni mai vechi.
Cadrul este cel mai ușor setat de parametru frontieră, care indică imediat tipul, grosimea și culoarea acestuia.
Exemplul 3.6. Utilizarea stilurilor
Când se lucrează la tehnologia calculatoarelor trebuie să te așezi astfel încât
mâinile și antebrațele formau un unghi drept, cu ochii ațintiți
distanta 30-40 cm de suprafata de lucru a monitorului.
Exemplul folosește un cadru dublu, a cărui grosime este suma grosimii liniilor și distanța dintre ele. Pentru a împiedica cadru să atingă textul, setați distanța de la cadru la conținut folosind parametrul căptușeală.
Cometariu: Browserul Netscape 4.x nu adaugă un chenar pentru tabele și limitează lățimea chenarului la conținutul său.
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.
1. Sintaxa chenarului CSS
granita: border-width border-style chenar-culoare | moşteni;
- border-width - grosimea chenarului. Îl puteți seta în pixeli (px) sau utilizați valorile standard subțire, mediu, gros (se deosebesc doar prin lățime în pixeli)
- border-style - stilul chenarului afișat. Poate lua următoarele valori
- niciunul sau ascuns - anulează granița
- punctat - cadru punctat
- întreruptă - cadru format din liniuțe
- solid - linie simplă (folosită cel mai des)
- dublu - cadru dublu
- groove - margine 3D canelată
- creasta, inserție, început - diverse efecte de cadru 3D
- moștenire - se aplică valoarea elementului părinte
- border-color - culoarea chenarului. Poate fi setat folosind nume specific culori sau în format RGB(vezi numele culorilor html pentru site)
Valorile din proprietatea border CSS pot fi setate în orice ordine. Secvența cea mai des folosită este „culoarea stilului de grosime”.
2. Exemple cu diferite margini CSS
2.1. Exemplu. Diferite stiluri de design de chenar-stil de chenar
border-style: dashedborder-style: dashedborder-style: solidborder-style: doubleborder-style: grooveborder-style: ridgeborder-style: insetborder-style: outsetЧетыре разных рамки
border-style: dotted
border-style: dashed
border-style: solid
border-style: double
border-style: groove
border-style: ridge
border-style: inset
border-style: outset
Четыре разных рамки
2.2. Пример. Изменения цвета рамки при наведении курсора мыши
Этот пример очень простой, но интересный. Он показывает, как можно использовать псевдокласс :hover и рамку CSS border для создания простых эффектов (например, для меню).
При наведении курсора мыши на блок цвет рамки изменится
Вот как это выглядит на странице:
2.3. Пример. Как сделать прозрачную рамку border
Рамку можно сделать прозрачной. Этот эффект редко, но иногда может быть очень полезен для веб-дизайнеров. Для задания прозрачности надо воспользоваться заданием цвета в виде RGBA (R, G, B, P) , где последним параметром задается прозрачность (вещественное число от 0.0 до 1.0)
Вот как это выглядит на странице:
3. Толщина границы: свойство border-width
Задает толщину линии. Ранее мы задавали ее в едином описании border.
Синтаксис CSS border-width
border-width : thin | medium | thick | значение ;
- thin - тонкая толщина линии
- medium - средняя толщина линии
- thick - толстая толщина линии
Ниже приведены несколько примеров. Самым необычным будет - это разная толщина границы у каждой стороны.
border-width: thinborder-width: mediumborder-width: thickРазная толщина у границ
Вот как это выглядит на странице:
border-width: thin
border-width: medium
border-width: thick
Разная толщина у границ
4. Как сделать рамку border только с одного края (границы)
У свойства CSS border есть производные свойства для задания односторонних границ у элемента:
- border-top - для задания рамки сверху (верхняя граница)
- border-bottom - для задания рамки снизу (нижняя граница)
- border-right - для задания рамки справа (правая граница)
- border-left - для задания рамки слева (левая граница)
Эти границы можно совмещать, т.е. прописать для каждого направления свою рамку. Синтаксис точно такой же как и у border.
Также есть свойства
- border-top-color - задание цвета верхний границы
- border-top-style - задание стиля верхней границы
- border-top-width - задание толщины верхней границы
- и т.д. для каждого направления
На мой взгляд проще писать все в строчку, чем плодить лишний текст в стилях. Например, следующие свойства будут одинаковыми
/* Описание двух одинаковых стилей: */
4.1. Пример. Красивая рамка для выделения цитат
Пример рамки для цитаты
Вот как это выглядит на странице:
Пример рамки для цитаты
Примечание
Можно задать отдельную границу для каждой из сторон.
5. Как сделать несколько границ border у элемента html
Иногда требуется сделать несколько границ. Приведем пример
5.1. Первый вариант с несколькими границами
Вот как это выглядит на странице:
Есть второй способ через наложение теней.
5.2. Наложение теней для создания нескольких границ
Вот как это выглядит на странице:
6. Скругление углов у границ (border-radius)
Для создания красивых рамок используют свойство CSS border-radius (доступно только в CSS3). С помощью него можно делать скругления углов, что создает совсем другой вид. Например
7. Вдавленная линия CSS
Вдавленные линии эффектно могут смотреться на темном фоне, что подходит далеко не каждому сайту.
Вот как это выглядит на странице:
Для обращения к border из JavaScript нужно писать следующую конструкцию:
document.getElementById("elementID").style.border ="VALUE "
Чтобы четко отделить содержимое одной ячейки от другой, к ячейкам добавляются границы. За их создание отвечает параметр border тега
| Чебурашка | Крокодил Гена | Шапокляк |
Рамки созданные таким образом незначительно отличаются по своему виду в разных браузерах.
Рис. 1. Рамка, полученная с помощью параметра border
Чтобы получить рамку одного вида, рекомендуется применить стилевым тегом border , применяя его к ячейкам таблицы (тегу
| 0 | X | X |
| 0 | 0 | X |
| X | X | 0 |
Diferența dintre marginile tabelului cu și fără parametrul border-collapse este prezentată în Fig. 2.
A
b
Orez. 2. Vizualizare tabel când se utilizează atributul border-colapase
În fig. Figura 2a prezintă cadrul implicit al tabelului. Vă rugăm să rețineți că în interiorul tabelului toate liniile au grosime dublă. Adăugarea parametrului border-collapse elimină această caracteristică, iar grosimea tuturor liniilor devine aceeași (Fig. 2b).
Pentru a dezvolta linii de același tip în tabel, puteți merge pe altă cale. Ar trebui adăugat pentru selector
| 0 | X | X |
| 0 | 0 | X |
| X | X | 0 |
Această metodă poate avea variații, de exemplu, pentru selector
sau
În acest exemplu, culoarea de fundal a paginii web este introdusă prin proprietatea de fundal adăugată la selectorul BODY. Cu toate că culoare alba este setat implicit, uneori este de dorit să îl setați astfel încât utilizatorul să nu-și specifice culoarea de fundal prin setările browserului. Liniile de tabel ar trebui să aibă, de asemenea, aceeași culoare; în acest caz, ele nu sunt clar vizibile și doar împart celulele între ele. Rezultatul Exemplului 4 este prezentat mai jos.
Orez. 3. Aspectul chenarelor care se potrivesc cu culoarea de fundal Cele mai bune articole pe această temă |
