Arkusz stylów kaskadowych to język, który służy do dodawania efektów do języka HTML. Bez CSS HTML w jakiś sposób nie jest w stanie wyświetlać swojej zawartości w sposób, w jaki ma być strona internetowa. Innymi słowy, oba języki są odpowiedzialne za opracowywanie i projektowanie stron internetowych. W tym artykule wyjaśnimy właściwość CSS, która jest odpowiedzialna za podawanie wszystkich wymiarów w jednym zestawie właściwości, wstawka. Wymiary te obejmują właściwości prawe, dolne, górne i lewe dowolnej zawartości, takich jak tekst lub obraz itp.

Aby wyjaśnić działanie właściwości wstawki, zastosowaliśmy kilka podstawowych przykładów w edytorze tekstu, używając inline i wewnętrznych CSS. Podstawowa składnia używana dla właściwości wstawki to:

Nie jest konieczne przyjmowanie wszystkich wartości w pikselach, % można użyć alternatywnie. Podobnie, kolejność wymiaru nie jest określona. Można to zmienić.

Przykład 1:

Aby wyjaśnić działanie właściwości CSS INSET, utworzymy podstawową zawartość HTML, aby utworzyć przykładową stronę internetową. Bez stylizowania, za co są odpowiedzialne proste tagi HTML, będzie to widoczne z wyjścia. Odbywa się to przy użyciu nagłówka

prosty odważny tekst i akapit, który jest wymieniony w Div. Wszystkie te tagi są zapisane wewnątrz znacznika środka, ten znacznik wyrównuje całą zawartość HTML do centrum. Ten rodzaj stylizacji jest wbudowany CSS.

Zapisz kod z rozszerzeniem HTML i otwórz go w przeglądarce. Zobaczysz, że statyczna strona internetowa jest tworzona tylko z tekstem jako nagłówka i akapitu.

Teraz dodamy wewnętrzne CSS do powyższych tagów HTML. Wszystkie znaczniki są takie same, ale mają dodatkową deklaracja klasowa.

Najpierw stworzymy nagłówek. Następnie odważny tekst. Daj sobie przerwę
. Ten tag jest odpowiedzialny za przeskaki do następnego wiersza i utworzenie pustej przestrzeni między zwykłym tekstem a divem. Tag Div służy do utworzenia kontenera DIV do przechowywania innych zawartości HTML (takich jak tekst, obrazy itp.,) W przypadku deklaracji akapitu. Nazwa klasy „One” w akapicie jest wspomniana, aby wszystkie efekty zadeklarowane w arkuszu stylów były dostępne i zastosowane do niniejszego akapitu.

1

Zamknij znacznik DIV i znacznik środkowy. W sekcji Head użyjemy znacznika tytułu, aby nadać nazwę witrynie. Ten tytuł pojawia się na zakładce przeglądarki.

Użyj tagu stylu. Wewnątrz tego znacznika użyj stylu do nagłówka. Zastosowaliśmy kolor czcionki do tekstu nagłówka. To jest wewnętrzny CSS. Podobnie Div służy do zastosowania na nim efektów. Po pierwsze, kolor tła Div jest ustawiony. Następnie dodawane są wymiary niezbędne dla wielkości DIV, aby utworzyć efekt. Te wymiary obejmują wartości szerokości i wysokości w pikselach.

Po zastosowaniu tych efektów stworzyliśmy klasę ”.Jeden ', którego nazwisko wspomniano w znaczniku akapitu. Klasa jest zadeklarowana kropką na początku, która określa ją jako klasę.

Klasa i identyfikatory w HTML CSS są tworzone w celu zastosowania stylizacji do zawartości HTML. Korzystając z tego mechanizmu, możemy powstrzymać się od wbudowanego stylizacji CSS, która sprawia, że ​​cały kod jest nieuporządkowany. Podczas gdy wewnętrzny CSS sprawia, że ​​kod stylu jest łatwo zrozumiały i sprawia, że ​​kod jest krótki. Musimy tylko dodać te klasę i nazwę IDS CSS. W tych konkretnych znacznikach HTML, w których chcemy zastosować efekty wymienione w klasie lub ID, wymienione w wewnętrznych CSS.

Wracanie do '.Jedna „klasa, we właściwości wstawkowej akapitu, użyliśmy 4 wartości w pikselach. Wartości można również wymienić w wartościach procentowych. Wartość wstawka zawiera wszystkie 4 górne, prawe, dolne i lewe wartości, aby akapit został utworzony wewnątrz pojemnika Div.

1 2 3 4 5

.jeden Wstawka: 10px 40px 30px 0px;

Te 4 wartości są wartościami marginesu tekstu akapitu, ponieważ wartości te wyrównują tekst wewnątrz div. Kolor tła jest również podawany akapit. Wszystkie wartości wstawki wyrównania są dla tekstu tylko w Div.

Zamknij wszystkie znaczniki CSS i Head i zapisz plik. Kiedy uruchomimy ten plik w przeglądarce, zobaczysz, że wszystkie te efekty stosowane do zawartości ciała HTML są stosowane, szczególnie w sekcji akapitu. e dodał kolor tła do akapitu, aby pokazać skutki wartości wstawki. Wszystkie 4 wartości wstawki są stosowane do tekstu akapitu.

Przykład 2:

Span jest również rodzajem kontenera Div, który głównie przenosi w nim tekst. Te dwie treści HTML Div i rozpiętości są stylizowane przez wewnętrzne CSS. Więc najpierw opracujemy sekcję stylu. Pojemnik Div ​​jest stosowany z kolorem tła, wymiarami wysokości i szerokości oraz kolorem czcionki. Ten styl CSS stworzy div z niektórymi efektami.

Teraz klasa „.ExampleText ”. Do tej klasy jest dostępny przez tekst rozpiętości tylko w Div. CSS tej klasy zawiera tryb pisania tekstu, który jest pionowy, dzięki czemu tekst może zajmować mniej miejsca. Następnie właściwość wstawka jest również odpowiednio ustawiona. Wszystkie wartości wstawki w pikselach są dostarczane w celu utrzymania krańcowej odległości między tekstem a granicami div.

1 2 3 4 5 6 7

.ExampleText tryb pisania: Vertical-RL; Pozycja: absolutna; Wstawka: 40px 50px 30px 60px; kolor tła: #f8fc08;

Po sekcji głowy ciało zawiera tylko znacznik DIV i znacznik rozpiętości wewnątrz ciała Div Tag.

Zapisz kod i uruchom plik. Zobaczysz, że div i rozpiętość są wyświetlane zgodnie z wartościami wstawki zastosowane do tekstu. Wartości wstawki są ściśle wyświetlane, aby naprawić w nim tekst.

Teraz, jeśli wprowadzimy pewne zmiany, modyfikując wartości wstawki w taki sposób, że używamy tylko 2 wartości wstawki zamiast 4, podczas gdy wszystkie inne wartości pozostają takie same, to jaki będzie wynikowy obraz?

1 2 3 4

.ExampleText wstawka: 4px 8px;

Ustawiliśmy 4 i 8px. Powstała strona internetowa będzie zawierać div i tekst, który ma miejsce w pobliżu Div. Wynika to z faktu, że usunęliśmy dwie wartości właściwości wstawki, a także pierwsze wartości prawe górne są również równoważne 0px.

Wniosek:

Właściwość CSS wstawka służy do dodania wartości do wymiaru zawartości HTML. Aby rozwinąć tę koncepcję, zaczęliśmy od przeglądu HTML i CSS oraz typów używanych w tym artykule. Własna właściwość pomaga użytkownikowi dodać margines do wewnętrznej zawartości odpowiedniej do zewnętrznej, albo poprzez zbiorowo posiadanie wszystkich 4 wymiarów lub eliminując jakąkolwiek wartość z właściwości. Ponadto omawiane są dwa przykłady w celu rozwinięcia funkcji i działania właściwości wstawki na stronie internetowej.