Zawalenie granic CSS

Kod CSS:
Zastosujemy niektóre nieruchomości na nagłówku, aby nasz nagłówek był bardziej atrakcyjny. Zmieniamy jego „rodzinę czcionki” i ustawiamy go na „Arial”. Styl tego tekstu jest „kursywa”, a kolor tego nagłówka jest „niebieski”. Teraz przechodzimy do stołu i ustawiamy granicę tabeli jako „1px” szerokości, „solidnego” i „czarnego” w kolorze. Główna koncepcja jest tutaj używana, która jest „wkupnia graniczna”. Używamy tej właściwości i ustawiamy tę „kołysanie graniczne”, aby „upaść”.

Wyjście:
Rzućmy okiem na następujący obraz, w którym pokazano wyjście. Widać, że granica stołu jest singlem.

Przykład nr 2
W tym przypadku edytujemy nieco poprzedni tabelę. Tutaj dodajemy dwie kolejne kolumny do poprzedniej tabeli i ponownie używamy właściwości „kołysanie graniczne” w tej nowej tabeli.

Kod CSS:
W kodzie CSS używamy innej właściwości, która jest właściwością „obramowania”. Zobaczysz, czy wpływa to na granicę tabeli, czy nie, gdy używamy właściwości „kołysanie granicy” wraz z tą właściwością.

Edytujemy „rodzinę czcionki” nagłówka. Tym razem używamy „Calibri” jako „rodziny czcionki” nagłówka. „Kolor”, którego używamy tutaj do nagłówka, jest „czerwony”. Teraz ponownie zastosuj właściwość „granicę” dla tabeli, komórki i nagłówka stołu. Granica wszystkich tych właściwości jest ustawiona na „2px”, z typem „solidnym” i „zielonym”. Właściwość „kołysanie granic” ma się „upaść”. Następnie używamy „obramowania”, aby dać przestrzeń między granicą tabeli a komórkami tabeli. Ustawiliśmy to na „20px”.

Wyjście:

Tutaj wyjście nie wykazuje różnicy w granicy tabel i komórek. Wygląda to samo jak na poprzedniej ilustracji. Oznacza to, że właściwość „obramowania” nie zmienia przestrzeni granicznej tabeli, ponieważ w tej tabeli użyliśmy właściwości „kołysanie granicy” wraz z właściwością „obramowania”.

Przykład nr 3
Tutaj tworzymy dwa różne tabele w taki sam sposób, jak omówiono wcześniej w naszym pierwszym przykładzie. Tworzymy dwa tabele, abyśmy mogli dowiedzieć się, jak ta nieruchomość „kołysanie graniczna” działa inaczej niż „osobna” właściwość graniczna.

Kod CSS:
„Font Family” nagłówek to „Times New Roman” z „niebieskim” kolorem. „Granica” obu tabel jest ustawiona na kolor „pomarańczowy” i „2px” typu „stałego”. W tabeli 1 używamy właściwości „kołysanie graniczne”. Używamy również drugiego „kołysania granicznego” w tabeli 2, ale tym razem ustawiamy tę właściwość jako „osobne”.

Wyjście:
Tutaj mamy dwie tabele w wyjściu. Pierwsza granica tabeli jest taka sama jak w naszych poprzednich przykładach. Ale druga granica tabeli jest inna, ponieważ użyliśmy „oddzielnego” z „kołysanie granicznym”. Granica tabeli jest oddzielona od granicy komórek w tabeli.

Przykład nr 4
Tutaj znów mamy dwa tabele, które zaprojektowaliśmy w przykładzie 3. Teraz zmieniamy niektóre style tych tabel, używamy właściwości „granic” na obu tabelach i sprawdzamy różnicę w obu tabelach.

Tym razem „Font Family” nagłówek to „Algierski”, a kolor to „Bordowy”. Granica stołu ma kolor „magenta”. Tabela pierwsza używa „zawalenia się” z „kołysanie granicznym” z „obciążeniem” „10px”. W tabeli drugiej używamy „oddzielnej” granicy, a „stroje graniczne” to również „10px”. Wyjście pokaże różnicę.

Wyjście:
W wyjściu możesz łatwo zobaczyć różnicę między tabelą pierwszą a tabelą drugą. To pokazuje, że kiedy używamy „kołnienia granicznego: granica”, wówczas „obramowanie” nie wpływa na tabelę. Ale kiedy używamy „kołnienia granicznego: oddzielnie”, możemy ustawić odstępy granicy między komórkami a granicą tabeli zgodnie z naszym wyborem.

Przykład nr 5
Tutaj stosujemy trzy właściwości granicy stołowej. Po pierwsze, używamy właściwości „kołysanie graniczne” w tabeli 1, która jest ustawiona jako „zawalenie się”. W drugiej nieruchomości zmieniamy kolor granicy na „średnio zielony morski”. W trzeciej właściwości używamy „obramowania: 10px”. Następnie używamy tych samych właściwości w tabeli 2, ale używamy „oddzielnego” zamiast „upadku” w właściwości „kołysania granicznego”. Ponadto ustawiamy kolor granicy na „fioletowy” i używamy tego samego „obramowania”. Teraz spójrz, jak to działa.

Nie ma zmiany w tabeli 1. Nie ma odstępu między granicą tabeli a komórkami. Kolor stołu jest taki sam. Właściwość „koloru granicznego” nie wpływa na tabelę, ponieważ używamy granicy „zapadnięcia się” w tabeli 1. Ale w tabeli 2 widać, że kolor granicy stołowej i granica komórki są różne. Istnieje również odstępy „10px” między granicą komórki a granicą stołu.

Wniosek

W tym samouczku wykorzystaliśmy właściwość „kołysanie graniczne” i nauczyliśmy się różnicy, gdy używamy „oddzielnego” i „upadku” z właściwością „przyczepności granicznej”. Pokazano nam również dane wyjściowe, w których widoczna jest różnica zarówno w „oddzielnej”, jak i „zawaleniu się”. Możesz łatwo uzyskać tę koncepcję, jak obie właściwości różnią się od siebie. Nauczyłeś się, co się stanie, gdy używamy „osobnej” i „upadku” z właściwością „kołysanie graniczną” w CSS.

• « CSS attr
• Nieruchomość graniczna CSS »