Bramka inline CSS

Bordery wbudowane i zarysowe to dwie podstawowe właściwości stylizacji wszelkich treści utworzonych w korpusie HTML - albo kawałek tekstu, kształtu lub obrazu. Język znaczników hipertekstu to połączenie kodu używanego do tworzenia treści na stronie internetowej. Ta zawartość jest stylizowana i wyrównana za pomocą dodatkowych tagów za pomocą arkusza stylów kaskadowych.

Granica wbudowana jest właściwością dodawaną do zawartości HTML, aby podkreślić tę konkretną część, nadając kolor lub dowolną solidną lub kropkowaną właściwością na granicy. Ten samouczek zawiera kilka przykładów tworzenia i projektowania granicy CSS.

Przykład nr 1: przerywany styl wnline graniczny

Najpierw wyjaśniamy sekcję stylu CSS wewnątrz znacznika głowy. Wewnętrzna styliza. Używamy klasy „H1” do kierowania 1 i nakładamy do niej fioletowy kolor. Zagnieżdżony styl jest dla Div. Jest to stosowane przez szerokość i pojemnik w pikselach. Jest to pojemnik, który służy do przechowywania różnych zawartości w nim. Następnie piszemy prosty tekst w klasie DIV.

Granica jest stosowana do dowolnej funkcji HTML. W tym przykładzie stosujemy granicę do klasy div wokół tekstu, którego używamy. Tak więc oświadczenie o stylu dla granicy jest stosowane w klasie DIV. Tworzono „jeden”, który jest wymieniony w znaczniku div, tak aby wszystkie efekty graniczne były stosowane do kontenera Div.

Istnieją trzy podstawowe style treści, które są stosowane do Div. Jeden to typ obramowania, który jest albo solidny lub kropkowany. Wybieramy stałą obramowanie o czarnym kolorze o szerokości 5 pikseli.

Kolejna nieruchomość jest własnością linii granicznej. Ta właściwość stylu jest wybierana jako przerywana. Oznacza to, że pionowe linie granicy są przerywane, podczas gdy linie poziome są proste. Jeśli nie wspomniemy o żadnej własności stylowej granic, to domyślnie jest ona wybierana jako solidna granica. Kolor tła w div jest ustawiony jako różowy. Odbywa się to w celu odróżnienia części DIV od tła całej strony internetowej.

Kod stylu HTML:

Prowadząc do części ciała HTML, projektujemy każdą zawartość HTML na środku strony internetowej. Po pierwsze, używany jest znacznik stylu. Kolor BG, który stoi na kolorze tła strony internetowej, jest ustawiony na znaczniku ciała. Nagłówek jest zadeklarowany. Po zastosowaniu małej przerwy, aby uciec od pojedynczej linii w HTML, tag Div jest zadeklarowany z klasą Deklaracji CDD.

Kod nadwozia HTML:

Ta deklaracja klasowa jest odpowiedzialna za zastosowanie wszystkich efektów stylu związanych z granicą. Teraz zamknij wszystkie tagi i zapisz plik tekstowy. Uruchom ten plik w przeglądarce, aby zobaczyć wynik tego kodu.

Wyjście:

Zobaczysz, że kolor BG jest nakładany wraz z nagłówkami. Div jest zaprojektowany z granicą ma solidną naturę, z przerywanym stylem granicznym. Używając wartości przerywanej właściwości wbudowanej, możemy uzyskać takie dane wyjściowe.

Przykład nr 2: Solidny styl graniczny z poziomym trybem pisania

W części ciała HTML kod HTML jest prawie taki sam, jak w poprzednim przykładzie. Kod jest zapisany wewnątrz środkowego znacznika, z deklarowanym divem. Wewnątrz div używany jest znacznik akapitowy o prostym tekście, z klasą jako instrukcję stylu. Nazwa klasy „przykładowy tekst” jest odpowiedzialny za wszystkie efekty. I zmiany zastosowane do akapitu

są sprawą graniczną. Zamknij wszystkie znaczniki i przejdź do części głównej, aby zaprojektować zawartość wewnątrz Div z granicą.

Kod nadwozia HTML:

Przejdź do znacznika stylu wewnątrz sekcji głowy. Najpierw dodajemy CSS do kontenera Div. Kolor tła jest stosowany do div z wysokością i szerokością, aby utworzyć pudełko w tle.

Kod stylu HTML:

Gdy dodaliśmy przykładową klasę tekstową do akapitu wewnątrz div, teraz stosujemy styl graniczny do tekstu. W tej klasie używamy stylu trybu pisania do akapitu. Na przykład używamy pionowego trybu pisania. Tekst pojawia się od góry do dołu zamiast domyślnego stylu poziomego, który jest od lewej do prawej strony.

Ponadto granica jest stylizowana jako solidny fioletowy kolor. Własność granicy w stylu wbudowanym jest ustalona jako solidna. Zatem granica jest solidnym prostokątem wokół tekstu w kierunku pionowym. Teraz wykonujemy kod w przeglądarce.

Wyjście:

Zobaczysz, że tworzony jest pionowy wyświetlacz tekstu. Ten tekst ma wokół niego granicę, która ma specjalizację solidnej grubości 5 pikseli i solidnego stylu granicznego.

Biorąc pod uwagę ten sam poprzedni przykład, stosujemy różne efekty do kodu. Zastosowanie trybu pisania w odwrotny sposób za pomocą stylu granicznego i zmian w stylu wbudowanym może powodować inny wpływ na tekst, którego używamy do wyróżnienia HTML.

Kod stylu:

W przypadku Div szerokość i wysokość są zwiększone, tworząc duże prostokątne pudełko. Podobnie zmieniamy również wartości wewnątrz „.Klasa egzaminacyjna ”w celu zastosowania wpływu na granicę.

Używamy trybu pisania tekstu, ponieważ jest to właściwość tekstowa w kierunku poziomym. Oznacza to, że tekst jest jak linia domyślna zaczynająca się od lewego kierunku do prawej. Granica jest ustawiona jako usiana 5 pikseli w szerokości i magenta. Podczas gdy styl wbudowany granicy jest traktowany jako ta sama nieruchomość stała. Wszystkie inne efekty, takie jak kolor tła, są takie same, a wszystkie kody wewnątrz są również takie same.

Wyjście:

Po uruchomieniu pliku w przeglądarce zobaczysz, że utworzona jest pozioma linia tekstowa wraz z granicą z kropkowaną linią. W ten sposób możemy stworzyć granice, które różnią się kształtem i stylem.

Wniosek

Styl graniczny odgrywa istotną rolę w stylizacji granicy tekstu i obrazu lub dowolnego kształtu. Próbowaliśmy w tym samouczku, aby dostarczyć najlepsze przykłady wbudowanych granic CSS za pomocą kodu HTML i stylizacji CSS w pliku. Na początku podaliśmy przegląd języka HTML i CSS. W sekcji implementacji najpierw zaimplementowaliśmy granicę wokół tekstu z określonymi właściwościami wbudowanymi granicami. Granica zależy od stylu pisania; kształtuje się według stylu tekstu. Na przykład w pionowym stylu pisania tekstu granica jest w kierunku pionowym.