Aby określić, jak będzie wyglądał dokument HTML, używane są arkusze stylów CSS. Ponadto istnieją trzy sposoby pisania właściwości stylizacji CSS, które są wbudowane CSS, osadzone CSS i zewnętrzne arkusze stylów CSS. Wbudowany arkusz stylów to taki, który integruje dane arkusza stylów z dokumentem HTML za pomocą elementu.

W tym spisie omówi:

• Struktura strony HTML
• Jak utworzyć arkusz stylów wbudowanych CSS?

Struktura strony HTML

Strona HTML ma głównie dwie sekcje, „głowa" I "ciało". Sekcja Head zawiera meta informacje o stronie, podczas gdy sekcja ciała zawiera elementy widoczne na stronie internetowej, takie jak obrazy, listy, tabele, nagłówki i inne.

Arkusz stylów CSS jest osadzony wewnątrz sekcji głowy, w elemencie, podświetlony za pomocą czerwonej strzałki:

Jak stworzyć arkusz stylów osadzony CSS?

W HTML najpierw utwórz element div o nazwie klasy „treść". W tym elemencie, dodaj

element i element powiązany z atrybutami:

• src: Ten atrybut jest wykorzystywany do określenia ścieżki obrazu.
• Alt: Ten atrybut określa alternatywny tekst, który pojawi się, gdy obraz nie zostanie załadowany.
• szerokość: Ten atrybut jest wykorzystywany do określenia szerokości obrazu.

Następnie dodaj
tagi, aby dodać przerwy linii i

element z identyfikatorem „pkt„Aby dodać treść do strony internetowej:

Linuxhint School

Witaj świecie!

Styl wszystkie elementy

*
Font-Family: Verdana, Genewa, Tahoma, Sans-Serif;

„„*”Jest wykorzystywany do reprezentowania wszystkich elementów zastosowanych do„rodzina czcionek" nieruchomość. Tutaj wartość „Verdana, Genewa, Tahoma, Sans-Serif”Dostarczono w celu zapewnienia, że ​​jeśli pierwsza czcionka nie jest obsługiwana przez przeglądarkę, zostanie zastosowany następny.

Styl „treść” element div

.treść
szerokość: 500px;
Wysokość: 300px;
Wyściółka: 5px;
Margines: Auto;
Padding-Left: 50px;
kolor tła: #7DB9E4;

„„.treść”Jest określony w celu uzyskania dostępu do elementu DIV o zawartości klasy i zastosowania podanych właściwości:

• "szerokość„Właściwość ustawia szerokość elementu.

• "wysokość”Właściwości ustawia/dostosowuje wysokość elementu.
• "wyściółka”Atrybut obejmuje przestrzeń wokół zawartości elementu lub wewnątrz granicy elementu.
• "margines„Właściwość dodaje przestrzeń wokół elementu.
• "Padding-Left„Właściwość dodaje przestrzeń po lewej stronie zawartości elementu.
• "kolor tła”Właściwość ustawia kolor tła elementu.

Element stylu „IMG”

img
przejście: wszystkie 0.3s łatwość;

Element jest stosowany przejście z CSS ”przemiana„Własność, gdzie”Wszystko„To efekt przejściowy”0.3s„Odnosi się do czasu trwania przejścia i„łatwość”Odnosi się do efektu przejścia z powolnym startem, a następnie szybko i kończy się powoli.

Styl „IMG” element na zawisie

.Treść IMG: Hover
Kursor: wskaźnik;
transformacja: perspektywa (100px) tłumacz3d (50px, 20px, 20px);

Właściwości zastosowane do elementu na zawisie są wyjaśnione poniżej:

• "kursor„Właściwość określa styl kursora myszy na elemencie, w którym wartość”wskaźnik”Pokazuje kursor ręką z palcem wskazującym.
• Jako wartość „przekształcać„Nieruchomość,„perspektywa (100px)„Funkcja jest wykorzystywana do określenia odległości między użytkownikiem a obiektem oraz„tłumacz3d (50px, 20px, 20px)”Przenosi element w płaszczyźnie 3D. Parametry te wyświetlają odpowiednio osi x, osi y i oś Z.

Styl „para” elementu „p”

#Para
Rozmiar czcionki: 25px;
Font-Weight: Bold;
Kolor: #3802CE;
Wyściółka: 5px;

„„#Para”Jest wykorzystywany do dostępu do elementu za pomocą ID Para i zastosowania następujących właściwości:

• "rozmiar czcionki”Właściwość ustawia rozmiar czcionki elementu.
• "grubość czcionki”Właściwość ustawia rozmiar czcionki na cienki lub gruby.
• "kolor„Właściwość służy do ustawiania/zastosowania koloru czcionki elementu.

Oto dane wyjściowe wyżej wymienionego kodu:

Z danego wyjścia można zaobserwować, że wbudowany arkusz stylów został pomyślnie zastosowany.

Wniosek

Arkusze stylów osadzonych przez CSS są odpowiednie do dokumentów, które mają określone potrzeby projektowe. Aby utworzyć osadzony arkusz stylów, należy zadeklarować właściwości CSS w elemencie. Ten element stylu jest określony w znaczniku HTML. W tym poście zademonstrowaliśmy metodę tworzenia osadzonych arkuszy stylów CSS z przykładem.