Kako podesiti pametne telefone i računare. Informativni portal

CSS box model.

Pogledajmo neki dokument. Na njemu se formiraju HTML elementi (prikazuju se na ekranu u pretraživaču). Formiraju se na osnovu oznaka. Postavljate oznake, obrađuje ih html parser (dostupan u bilo kojem pretraživaču) i gradi html elemente. A kako će ti elementi izgledati određuje CSS.

Svi html elementi imaju 4 područja: područje za popunjavanje, ivicu, padding i sadržaj elementa. Za šta su oni potrebni?

  • Margine su potrebne da bi se regulirala interakcija ovog elementa s granicama drugih elemenata.
  • Padding je udaljenost od okvira do sadržaja datog elementa.
  • Sadržaj samog elementa. Ovdje je jasno. Ako postoje ugniježđeni elementi, onda se oni nalaze u ovom području.
  • Okvir (ivica). Ocrtava granice elementa. Šematski, 4 oblasti se mogu predstaviti na sledeći način:

Treba shvatiti da svaki element leži unutar nekog područja. Ovo područje za element koji se nalazi unutar njega naziva se kontejner. One. Kontejner je područje sadržaja roditeljskog elementa. Ovo područje određuje prostor za izgradnju unutrašnjeg elementa. To znači da će se unutrašnji element prilagoditi veličini ovog područja.

Margine

Ovo je kada naš element stupa u interakciju s granicama kontejnera i granicama susjedni elementi(oni koji se nalaze pored njega u kodu). Osnovna pravila:

  • margin-top: auto|magnitude|% - gornja margina.
  • margin-desno: auto|veličina|% - desna margina.
  • margin-bottom: auto|magnitude|% - donja margina.
  • margin-left: auto|veličina|% - lijeva margina.
  • margina: margina-gornja margina-desna margina-donja margina-lijevo – montažno pravilo.

Vrijednost “auto” znači da će pretraživač samostalno analizirati ove vrijednosti. Veličina uvlake može se navesti u sljedećim vrijednostima: em, ex, px. Procenti (%) se izračunavaju iz širine kontejnera (iz oblasti sadržaja roditeljskog elementa). Ako navedete negativnu vrijednost, granice elemenata unutar roditeljskog kontejnera će se sudarati jedna s drugom.

Pravilo „margine“ je složeno; ovdje su naznačene vrijednosti sve 4 margine (počevši od vrha u smjeru kazaljke na satu). primjeri:

Margina: 10px 20px 20px 30px; margina: 10px 20px 30px; - margina s lijeva na desno je ista margina: 10px 20px; - margina od vrha do dna i lijevo-desno je ista margina: 10px; - sve uvlake su iste

Padding

Ovdje ne može biti negativnih vrijednosti, jer Nemoguće je premjestiti sadržaj izvan okvira elementa. Procenti se izračunavaju na osnovu širine kontejnera.

  • padding-top: vrijednost|%.
  • padding-right: vrijednost|%.
  • padding-bottom: vrijednost|%.
  • padding-left: vrijednost|%.
  • padding: padding-top padding-desno padding-bottom padding-left - prefabricirano pravilo. Slično "marži".

Granice u CSS-u

Svi okviri imaju sljedeće karakteristike:

  • Debljina - širina granice: vrijednost (tanak|srednji|debeo). Podrazumevano je srednje.
  • Boja - boja ivice: boja. Podrazumevana je boja fonta u ovom elementu.
  • Tip - u stilu obruba: bez|tačkastog|isprekidanog|punog|dvostrukog|utora|sljemena|umetka|na početku. Vrste: bez okvira | tačke | točkasto | čvrsta | duplo | imitacija reljefa.

Sama pravila okvira:

  • border-top-(širina|boja|stil).
  • border-right-(širina|boja|stil).
  • border-bottom- (širina|boja|stil).
  • granica-lijevo- (širina|boja|stil).
  • granica: granica širine Border-style Border-Boja. Timsko pravilo.

Okviri (parametri bloka)

Vrijednosti ovih svojstava se koriste za postavljanje karakteristika područja oko elementa.
Ovo se može primijeniti na simbole, slike itd.

Opcije Značenje Opis
border-top-color
granica-desna-boja
granica-lijevo-boja
granica-donja-boja
border-color
boja
(bez boje
zadano)
Odredite boju četiri strane okvira. Ako boju zamijenite URL-om slike, ona će se ponoviti i formirati okvir.
rubni-top-stil
u stilu granice desno
u stilu granice lijevo
Border-bottom-style
u stilu granice
ništa (zadano)
solidan
duplo
groove
greben
umetnuti
početak
Određuje stil četiri strane okvira.
border-top
granica desno
granica-lijevo
border-bottom
granica
širina okvira,
okvir_stil,
boja

(zadano:
srednje, bez, bez boje)

Odredite svojstva četiri strane okvira. Funkcioniše isto kao i svojstva paddinga (pogledajte ispod), osim što je granica vidljiva.

širina okvira može biti srednje, tanko ili debelo, ili specificirano u jedinicama.
frame_style može biti nikakav ili čvrst

Argument boja koristi se za definiranje boje ispune za pozadinu elementa dok se učitava, kao i iza prozirnih dijelova elementa. Ako umjesto toga prosledite adresu slike, obrazac će se ponoviti, ispunjavajući obris okvira.

granica-vrh-širina
granica-desno-širina
granica-lijevo-širina
granica-donja-širina
border-width
tanak
srednje (zadano)
debelo
dužina
Definirajte širinu ivice oko elementa. Svaka strana se može specificirati sa odgovarajućim parametrom. Postavljanje četiri pojedinačna svojstva možete zamijeniti postavljanjem jednog svojstva border-width isto kao i za svojstva udubljenja margina.
ciip pravokutni (/gore/desno/dolje/lijevo/)
automatski (zadano)
Određuje koliko je elementa vidljivo. Ne može se vidjeti ništa izvan područja navedenog ovim parametrom.
displej "", nijedan
"" (zadano)
Ova postavka određuje da li će element biti prikazan.
float ništa (zadano)
lijevo
u pravu
Određuje da se element omota oko drugih elemenata lijevo ili desno umjesto da ih postavlja ispod njih. Podržano oznakama
, ...
visina automatski (zadano)
dužina
Postavite visinu elementa i izmjerite je, ako je potrebno. Vrijednost se vraća kao string uključujući jedinice (px, %, itd.). Da biste dobili numeričku vrijednost, koristite svojstvo posHeight.
lijevo automatski (zadano)
dužina
interes
Oni postavljaju horizontalnu koordinatu elementa, omogućavajući vam da pravilno instalirate i pomerate elemente. Vrijednost se vraća kao string uključujući jedinice (px, %, itd.). Da biste dobili vrijednost kao broj, koristite svojstvo posLeft.


Primjer 1:
Ova linija je podvučena isprekidanom linijom. Primjer 2: Različite vrste okvira.

1. nema - Bez granice (border:none;)

2. čvrst - Postoji ivica (ivica: 1px čvrsta;)




Primjer 4: Okvir sa zaobljenim uglovima.


. V poreske prijave;
. certifikati 2-NDFL;

Svi navedeni dokumenti ukazuju na 11 cifren kod OKTMO umjesto prethodno korištenih OKATO kodova.

#org
{
širina: 80%;
margin-top:2em;
margin-left: auto;
margin-right: auto;
radijus granice: 10px 10px;
-moz-border-radius: 10px 10px;
-webkit-border-radius: 10px 10px;
padding: 15px 20px 15px 80px;
margina: 0px 0px 0px 0px;
-webkit-box-shadow: 2px 2px 3px #999;
-moz-box-shadow: 2px 2px 3px #999;
/*IE min-height hack*/
min-visina:40px;
visina:auto !važno;
visina:40px;
overflow:visible;

Pozicija:relativna;
bottom:6px;
desno: 6px;
granica: 1px čvrsta #7e5a25;
/*Podesite poziciju pozadinska slika*/
background-position: 20px 50%;
background-repeat: bez ponavljanja;
text-align: justify;
veličina fonta: 0.9em;

Boja pozadine: #e8e3d4;
background-image: url(baba.gif);
}


Počevši od 1. januara 2014. novi OKTMO kodovi su naznačeni u:
. u poreskim prijavama;
. certifikati 2-NDFL;
. nalozi za plaćanje (polje 105);
. Potvrda o uplati poreza, taksi, dažbina, obrazac PD-4 porez.

Svi navedeni dokumenti navode 11-cifreni OKTMO kod umjesto prethodno korištenih OKATO kodova.

Primjer 5: Okvir je dizajniran korištenjem ugniježđenih tabela.

Suvorov A.V.
Ugniježđene tablice


slika




Tabela 1
Uski crni okvir (5px) Parametri tabele:
  • table--> bgcolor=#000000 style="border:2px solid #a3852f"
  • td--> style="padding: 5px"
Primjer 6: Vertikalni okvir.

Širina i visina blok elementi

CSS Properties širina I visina- postaviti širinu i visinu blok elemenata.
Širina i visina elementa mogu se podesiti na sljedeće načine:

  • auto- Dimenzije elementa su određene njegovim sadržajem. (zadano)
  • % - Dimenzije elementa se postavljaju kao procenat visine/širine nadređenog elementa.
  • px- Dimenzije elemenata su navedene u pikselima ili bilo kojoj drugoj mjernoj jedinici prihvaćenoj u CSS-u.
primjer:
Blok 1

Blok 2

Blok 3
Upravljanje sadržajem elementa

Što učiniti sa sadržajem elementa ako premašuje njegovu veličinu?

Ako se elementu daju tačne vrijednosti visine i širine ( visina, širina) i njegov sadržaj, na primjer dugačak tekst, ne uklapa se u navedene granice, tada se prema zadanim postavkama takav element rasteže do potrebne veličine, što nije uvijek u korist webmastera. Atribut dolazi u pomoć overflow, koji govori pretraživaču šta da radi sa elementom u takvim slučajevima.

Nekretnina overflow može imati sljedeća značenja:

  • vidljivo- Element se rasteže na potrebnu veličinu. (zadano)
  • skriveno- Sadržaj elementa je „odsječen“, vidljiv je samo onaj dio koji se uklapa u element.
  • skrolujte- Dodaju se trake za pomicanje (uvijek! čak i ako sadržaj stane unutar elementa).
  • auto- Po potrebi se dodaju trake za pomicanje.
primjer:
  • CSS


    CSS(engleski: Cascading Style Sheets - kaskadni stilski listovi) - formalni jezik za opisivanje izgleda dokumenta napisanog pomoću jezika za označavanje, itd. ..............
Rezultat

CSS

CSS(engleski: Cascading Style Sheets) je formalni jezik za opisivanje izgleda dokumenta napisanog pomoću jezika za označavanje. Metode CSS veze na dokument
CSS pravila su napisana formalno CSS jezik i nalaze se u stilovima, odnosno stilski listovi sadrže CSS pravila. Ovi stilovi se mogu nalaziti ili u samom web dokumentu, izgled koje opisuju, iu odvojenim datotekama u CSS formatu. (U suštini, CSS format je uobičajen tekstualnu datoteku. .css datoteka ne sadrži ništa osim liste CSS pravila i komentare na njih.) To jest, ovi stilovi mogu biti povezani, ugrađeni u web dokument koji opisuju na četiri različita načina:
  1. Kada je stilski list u zaseban fajl, može se povezati s web dokumentom pomoću oznake , koji se nalazi u ovom dokumentu između oznaka I.
    (Tag će imati href atribut koji ima vrijednost adrese ovog stilskog lista). Sva pravila u ovoj tabeli važe za ceo dokument;


    .....

  2. Kada je stilski list u zasebnoj datoteci, može se povezati s web dokumentom pomoću @import direktive, koja se nalazi u ovom dokumentu između oznaka I) odmah nakon oznake

  3. Kada je stilski list opisan u samom dokumentu, on se može nalaziti u njemu između oznaka(koji se, pak, nalaze u ovom dokumentu između oznaka I). Sva pravila u ovoj tabeli važe za ceo dokument;


    .....

  4. Kada je stilski list opisan u samom dokumentu, on se može nalaziti unutar njega u tijelu neke zasebne oznake (preko njegovog atributa stila) ovog dokumenta. Sva pravila u ovoj tabeli odnose se samo na sadržaj ove oznake.

    kupiti slona

Informacije okružene okvirom omogućavaju vam da odvojite jedan materijal na web stranici od drugog i privučete pažnju čitaoca.
Osim toga, okvir dodaje eleganciju dizajnu stranice.
Za kreiranje okvira koristi se nekoliko metoda, od kojih većina koristi svojstva tabela. Stilovi dopunjuju mogućnosti stolova i omogućavaju vam da kreirate različite vrste okvira jednostavnim sredstvima. Ispod su uobičajene tehnike za dobijanje okvira koji se mogu naći svuda na različitim lokacijama.

Parametar granica

Najjednostavniji način za kreiranje ivice je korištenje parametara tablice border, koji određuje debljinu ivice, i bordercolor, koji određuje njegovu boju. Ovako napravljeni okviri razlikuju se po izgledu različitim pretraživačima(Sl. 3.1).

Rice. 3.1. Okvir dobiven korištenjem parametra granice

Netscape simulira trodimenzionalnost okvira, Opera pretraživač općenito ostavlja svoju boju nepromijenjenom, i Internet Explorerčini okvir čvrstim.

Primjer 3.1. Korištenje parametra granice

cellpadding="6" cellspacing="0" bgcolor="#E0E0E0">



Sadržaj

Parametar granice definira debljinu okvira, bordercolor – njegovu boju, cellpadding specificira udaljenost od okvira do sadržaja tabele.

Ugniježđene tablice

Još jedan jednostavan univerzalna metoda izgradnja okvira, koji radi isto u različitim pretraživačima, zasniva se na preklapanju dve tabele jednu na drugu. Ako uzmemo pravougaonik od, na primjer, crvenog papira i na njega stavimo drugi bijeli pravougaonik, malo manja veličina, tada ćemo vidjeti crveni okvir. Samo umjesto lista papira koristimo oznaku TABLE, a boju tabele postavljamo parametrom bgcolor.

Primjer 3.2. Korištenje ugniježđenih tabela

cellpadding="1" bgcolor="#FF0000">



width="300" height="300">

Sadržaj

U gornjoj tabeli pomoću parametra postavite širinu i visinu tabele po želji bgcolor postavite boju okvira, cellpacing dodijeli ga nuli i cellpadding kontroliše debljinu ivice. Što je ovaj parametar veći, okvir će biti deblji.
Za internu tabelu potrebno je podesiti njenu boju, različitu od spoljašnje, da odgovara boji pozadine web stranice; u primeru, na primer, postavljena je bijela. Parametar cellpacing ili cellpadding(V u ovom slučaju bez obzira koji koristiti) određuje udaljenost od granice okvira do sadržaja tabele.
Širina i visina unutrašnjeg stola moraju odgovarati širini i visini vanjskog stola.
komentar: Prelomi reda u HTML kodu automatski dodaju razmak. Ako okvir na nekim mjestima ispadne deblji od predviđenog, treba ga ukloniti dodatni prostori između oznaka i time smanjiti broj redova.

Popunjavanje ćelija tabele bojom

Korištenje boje pozadine ćelija tablice jedan je od univerzalnih i uobičajenih načina za kreiranje obruba. Napravite tabelu (slika 3.2) i popunite spoljne ćelije u pravoj boji(Sl. 3.3).


Rice. 3.2. Rice. 3.3

Debljina okvira određena je širinom i visinom ćelija. Obavezno postavite odstojnik unutar ovih ćelija tabele - transparentan crtež Veličina 1 sa 1 piksel (u primeru se zove spacer.gif), inače ovaj metod neće raditi u Netscape pretraživaču.

Primjer 3.3. Kreiranje okvira popunjavanjem ćelija tabele bojom

cellpadding="0">












visina="2">
visina="2"> Sadržaj visina="2">
visina="2"> visina="2">

IN u ovom primjeru Izrađen je crveni okvir debljine 2 piksela, izgleda najelegantnije. Opcije tabele cellpacing I cellpadding jednake su nuli tako da okvir ostaje željene debljine i bez praznina. Ako stavite tekst unutar takve tabele, on će čvrsto pristajati uz okvir, što je ružno i teško čitljivo. Da biste dodali uvlake, možete kreirati dodatne ćelije za ovu svrhu, koristiti ugniježđenu tablicu ili koristiti stilove.

komentar: Gornja metoda je osjetljiva na različiti parametri, stoga, u slučaju pogrešnog crtanja okvira, provjerite sljedeće:

  • ako je veličina tabele navedena u pikselima, morate navesti fiksne veličine sve ćelije;
  • kada je širina tabele navedena kao procenat, potrebno je da stavite tekst unutar okvira koji „proširuje“ unutrašnju ćeliju do željene širine; ako unutar tabele sa okvirom nema teksta ili drugog sadržaja, njegova širina će biti mnogo šira od željene;
  • U ćelijama gde ide granica ne bi trebalo da postoje razmaci koji se ne mogu odvojiti (& nbsp;), ono što neki urednici web stranica vole da dodaju automatski;
  • prelomi reda automatski dodaju razmak u tekst, dakle između otvaranja i zatvaranja oznaka I Tekst treba pisati u jednom redu tako da nema praznina između ćelija.

Dekorativni okvir

Da biste kreirali željeni okvir, prvo ga morate nacrtati u nekoj vrsti grafički editor. Na sl. 3.4, na primjer, prikazuje okvir sa zaobljeni uglovi. Zatim smo ovu sliku izrezali na 9 dijelova, označenih na slici 3.5 narandžaste linije i brojevi. Sliku možete izrezati, na primjer, u programu ImageReady ili nekom drugom sličnom.

Rice. 3.4.

Rice. 3.5.

Nakon rezanja slike na komade dobijamo 8 fragmenata:


Neće biti fragmenta petog kadra (5.gif), jer će ga naš sadržaj zamijeniti. Sada kreiramo tabelu veličine 3x3, kao što je prikazano na Sl. 3.2 i postavite kreirane crteže u njegove ćelije.

Primjer 3.4. Izrada ukrasnog okvira

















width="1">
Sadržaj
width="1">

Parametri u tabeli granica, razmak ćelija I cellpadding mora biti jednaka nuli, inače se linije neće povezati jedna s drugom.
Uglove ubacujemo kao i uobičajene crteže koristeći IMG tag, ali horizontalno i vertikalne linije treba postaviti pomoću parametra pozadine ćelije tabele pozadini. Ovo će učiniti naš okvir skalabilnim i njegova veličina će se mijenjati ovisno o sadržaju.
Da bi linije čvrsto pristajale jedna drugoj i da između njih nema razmaka, potrebno je navesti sve veličine ćelija i crteža.
U ćelije u kojima su horizontalne i vertikalne linije postavljene u pozadini potrebno je postaviti odstojnik - to je ili razmak ili prozirni uzorak GIF format 1 x 1 piksel veličine (u primjeru datoteka se zove spacer.gif). Ovo se radi kako bi se prevario Netscape pretraživač, koji ne prikazuje sadržaj ćelije ako je prazna.
Ova metoda vam omogućava da kreirate okvire gotovo bilo koje vrste.

Korištenje stilova

Koristeći stilove, možete primijeniti okvir na bilo koji blok tag, na primjer, paragraf (oznaka P), tabela i tag DIV. Stilovi čine lakšim i praktičnijim stvaranje okvira nego korištenje stolova i pružanje različite vrste okviri, koji su prikazani na sl. 3.6.

Rice. 3.6 Tip okvira specificiran pomoću stilova

Prve dvije vrste okvira su tačkasta I isprekidano Netscape i Internet Explorer pretraživači podržavaju samo iz starijih verzija.
Okvir se najlakše postavlja parametrom granica, što odmah ukazuje na njegovu vrstu, debljinu i boju.

Primjer 3.6. Korištenje stilova






Kada radite na kompjuterska tehnologija morate da sednete tako da
šake i podlaktice su formirane pod pravim uglom, oči su postavljene
udaljenosti 30-40 cm od radne površine monitora.



Primjer koristi dvostruki okvir, čija je debljina zbir debljine linija i udaljenosti između njih. Kako biste spriječili da okvir dodiruje tekst, postavite udaljenost od okvira do sadržaja pomoću parametra padding.
komentar: Netscape 4.x pretraživač ne dodaje ivicu za tabele i ograničava širinu ivice na njen sadržaj.

Svojstvo CSS granice koristi se za kreiranje ivice objekta, odnosno debljine ivice, njene boje i stila. Ovo svojstvo se široko koristi u HTML-u. Možete kreirati razne efekte radi bolje percepcije sadržaja na stranici. Na primjer, dizajnirajte bočnu traku, zaglavlje web stranice, meni itd.

1. CSS granična sintaksa

granica : granica-širina border-style boja granice | nasljediti;
  • border-width - debljina granice. Možete ga postaviti u pikselima (px) ili koristiti standardne vrijednosti tanak, srednji, debeli (razlikuju se samo po širini u pikselima)
  • border-style - stil prikazane ivice. Može uzeti sljedeće vrijednosti
    • ništa ili skriveno - poništava granicu
    • tačkasti - tačkasti okvir
    • isprekidani - okvir od crtica
    • puna - jednostavna linija (najčešće korištena)
    • duplo - dupli okvir
    • groove - žljebljena 3D ivica
    • greben, umetak, početak - razni efekti 3D okvira
    • naslijediti - vrijednost roditeljskog elementa se primjenjuje
  • border-color - boja granice. Može se podesiti pomoću specifično ime boje ili RGB format(pogledajte nazive html boja za stranicu)
Bilješka

Vrijednosti u svojstvu CSS granica mogu se postaviti bilo kojim redoslijedom. Najčešće korištena sekvenca je „boja u stilu debljine“.

2. Primjeri s različitim CSS granicama

2.1. Primjer. Različiti stilovi dizajna obruba

border-style: dashed
border-style: dashed
border-style: solid
border-style: double
border-style: groove
border-style: ridge
border-style: inset
border-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: thin
border-width: medium
border-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 показано создание границы вокруг ячеек.

Пример 1. Добавление рамки к таблице





Толщина границы







Чебурашка Крокодил Гена Шапокляк


Рамки созданные таким образом незначительно отличаются по своему виду в разных браузерах.

Рис. 1. Рамка, полученная с помощью параметра border

Чтобы получить рамку одного вида, рекомендуется применить стилевым тегом border , применяя его к ячейкам таблицы (тегу или ). Однако и здесь нас подстерегают подводные камни. Поскольку рамка создается для каждой ячейки, то в местах соприкосновения ячеек получается граница удвоенной толщины. Для решения указанной особенности существует несколько путей. Самый простой — применить свойством border-collapse со значением collapse . В его задачу входит отслеживать соприкосновение линий и вместо двойной границы изображать одинарную. Этот атрибут дастаткова добавляем к тегу

, а дальше он все сделает самостоятельно (пример 2).

Пример 2. Применение border-collapse при создании рамок таблицы





Создание рамки






0XX
00X
XX0


Razlika između ivica tabele sa i bez parametra border-collapse prikazana je na Sl. 2.

a

b

Rice. 2. Prikaz tabele kada se koristi atribut border-collapase

Na sl. Slika 2a prikazuje podrazumevani okvir tabele. Imajte na umu da unutar tabele sve linije imaju dvostruku debljinu. Dodavanje parametra border-collapse uklanja ovu osobinu, a debljina svih linija postaje ista (slika 2b).

Da biste razvili linije istog tipa unutar tabele, možete ići na drugi način. Treba dodati za selektor okvir, ali poništite red na desnoj i donjoj strani, postavljajući odgovarajuće atribute na ništa . Tada, prilikom spajanja ćelija, njihove granice se neće preklapati jedna s drugom iz razloga što će postojati samo jedna linija. Međutim, kod ovog načina formiranja granica nema linija na dnu i desno od same tablice. Dodavanje parametara border-right i border-bottom selektoru

, dobijamo željeni okvir (primjer 3). Za ujednačenost treba voditi računa da se stil, debljina i boja obruba u svim slučajevima podudaraju.

Primjer 3. Kreiranje okvira za tablicu korištenjem atributa border





Kreiranje okvira






0XX
00X
XX0


Ova metoda može imati varijacije, na primjer, za selektor dodajte obrub samo desno i dolje, i

, naprotiv, dodajemo atribut granice, ali uklanjamo liniju desno i ispod. U svakom slučaju, prikazani rezultat će biti isti.

Jednostavan i originalan izgled stola može se postići ako se boja obruba podudara s bojom pozadine. Ali da bi linije bile vidljive, svakako treba popuniti pozadinu oznake

ili . Tada ćelije tabele izgledaju kao da su međusobno isečene rezačem (primer 4).

Primer 4: Korišćenje nevidljivih ivica u tabeli





Kreiranje granica







0XX
00X
XX0


U ovom primjeru, boja pozadine web stranice se unosi kroz svojstvo pozadine dodano u birač BODY. Iako Bijela boja je zadano, ponekad je poželjno postaviti ga tako da korisnik ne specificira svoju boju pozadine kroz postavke pretraživača. Linije tabele takođe treba da imaju istu boju; u ovom slučaju, one nisu jasno vidljive i samo dele ćelije jedna na drugu.

Rezultat iz primjera 4 je prikazan ispod.

Rice. 3. Izgled ivica koje odgovaraju boji pozadine

Najbolji članci na ovu temu