Obrazy są najważniejszą częścią stron internetowych, które są używane do uczynienia stron internetowych bardziej atrakcyjnymi i pouczającymi. Ponadto programiści stron internetowych mogą wstawić różne typy obrazów, takie jak obrazy tła, ilustratory i obrazy produktów. Dodatkowo użytkownicy mogą stosować różne style do obrazów, takie jak definiowanie granic wokół obrazu.

Ten zapis będzie określony:

• Jak dodać obraz w HTML?
• Jak dodać/wstawić granicę do obrazu w HTML?
• Jak dodać/wstawić granicę do obrazu w CSS?

Jak dodać obraz w HTML?

Aby dodać obraz w dokumencie HTML, postępuj zgodnie z wymienionymi instrukcjami:

• Najpierw użyj dowolnego znacznika nagłówka „

  " Do "

  „Aby osadzić nagłówek. Na przykład osadziliśmy nagłówek poziomu drugiego za pomocą „

  ”Tag.

• Następnie wstaw element „” wraz z atrybutami „klasa”, „src” i „alt”.
• "”Tag służy do dodania obrazu do dokumentu HTML.
• „„klasa„Atrybut jest wykorzystywany do wskazywania klasy w CSS.
• "src”Służy do określenia adresu URL lub źródła obrazu.
• "Alt”Określa nazwę lub alternatywny tekst dla obrazu:

Dodaj granicę do obrazu

Można zauważyć, że obraz został pomyślnie dodany do strony HTML:

Jak dodać/wstawić granicę do obrazu w HTML?

Aby dodać granicę do obrazu w HTML, użyj wbudowanego CSS bezpośrednio w źródle obrazu za pomocą podanych instrukcji:

• W "”Tag, określ„styl" atrybut. Wartość „stylu” określa właściwości CSS do stylizacji zdefiniowanego elementu.
• Aby zastosować granicę wokół obrazu, użyj wartości stylu ”granica: 5px solidny zielony;", Gdzie "granica”Czy właściwość CSS wykorzystywana do dodawania granicy wokół elementu, zgodnie z określonym stylem:

Dodaj granicę do obrazu

Wyjście

Jak dodać/wstawić granicę do obrazu w CSS?

Użytkownicy mogą również dodać granicę do obrazu w HTML za pomocą osadzonego CSS. Aby dodać granicę poza obrazem za pomocą CSS, przejdź przez dostarczone kroki.

Krok 1: Styl na kierunku CSS
Najpierw stygnij nagłówek, wykorzystując nazwę tagu „H2”I zastosuj poniżej wspomniane właściwości CSS:

H2
Text-Align: Center;
kolor niebieski;
pogrubiona czcionka;

Tutaj:

• „„tekst-align„Własność jest wykorzystywana do ustawiania wyrównania tekstu.
• "kolor”Określa konkretny kolor tekstu.
• "czcionka”Służy do przydzielania stylu czcionki.

Krok 2: Dodaj granicę do obrazu
Aby dodać granicę wokół obrazu, najpierw uzyskać dostęp do obrazu w CSS za pomocą „.IMG-Container" klasa. Następnie zastosuj do niego następujące właściwości:

.IMG-CONTAINER
Wysokość: 400px;
Rozmiar tła: zawiera;
Szerokość: 350px;
granica: 7px stały RGB (63, 11, 253);
Margines: 20px 150px;

Opis powyższych właściwości jest następujący:

• "granica„Własność jest wykorzystywana do określenia granicy wokół elementu.
• "wysokość”Służy do ustawiania wysokości zdefiniowanego elementu.
• "Rozmiar tła„Właściwość CSS jest wykorzystywana do ustawienia rozmiaru elementu.
• "szerokość”Definiuje szerokość wielkości elementu.
• "margines”Określa pustą przestrzeń wokół granicy elementu:

Można zauważyć, że wokół obrazu dodano niebieską granicę.

Wniosek

Aby dodać granicę do obrazu w HTML, przede wszystkim dodaj obraz za pomocą „”Tag. Następnie użytkownik może skorzystać z „styl”Atrybut wewnątrz znacznika„ ”i ustaw jego wartość zgodnie z wymaganiami. Ponadto użytkownicy mogą również używać wbudowanego CSS do zastosowania „granica„Właściwość do obrazu. Ten post wyjaśnił procedurę dodawania granicy do obrazu w HTML.