URL CSS
Przykład 1:
Zaczniemy od naszego pierwszego przykładu od otwarcia nowego pliku w oprogramowaniu, którym jest kod Visual Studio. Kiedy tworzymy nowy plik w kodzie Visual Studio, mamy wybór języka i wybieramy HTML. Następnie musimy zbudować kod HTML. Pisując „!”, A następnie naciśnięcie„ Enter ”, kod Visual Studio daje nam możliwość automatycznego pozyskiwania podstawowych tagów. Podajemy link do pliku CSS w znaczniku głównym HTML, więc użyjemy funkcji URL () w CSS. W ciele mamy nagłówek i prosty akapit. Następnie umieściliśmy pojemnik „Div”. Zapisujemy ten plik, a następnie idziemy w kierunku pliku CSS. Teraz spójrz na kod CSS poniżej.
Ustawiamy „div” w tym kodzie i dodajemy właściwość „obraz tła”. Teraz musimy ustawić obraz dla tła. Aby dodać obraz, musimy użyć funkcji „url ()” i podać ścieżkę obrazu, którą chcemy dodać jako parametr funkcji „url ()”. Używamy właściwości „Alignaj tekstu” i ustawiamy ją na „Center”. Następnie ustaw „szerokość” na „500px”. „Wysokość” to „260px”. Stylukujemy również nagłówek, aby wynik był bardziej atrakcyjny. Ustawiamy „kolor”, który określa kolor tekstu nagłówka i ustawiamy „czerwony” dla tej właściwości. „Rodzina czcionki” dla tekstu nagłówka to „Algierski”.
Mamy również akapit w pliku HTML, więc stosujemy również niektóre właściwości do niniejszego akapitu. Ustawiamy rozmiar tekstu akapitu, wykorzystując właściwość „wielkości czcionki” CSS i ustawiamy ją jako „18px”. Teraz znowu używamy właściwości „kolor” do tekstu akapitu i używamy „niebieskiego”.
Otrzymujemy to wyjście, naciskając „Alt+B” w pliku HTML lub możesz nacisnąć odpowiedni przycisk myszy, a następnie wybrać „Otwórz w domyślnej przeglądarce”, aby uzyskać wyjście. W wyjściu widać, że pod nagłówkiem jest obraz i tekst. Dodajemy ten obraz, umieszczając ścieżkę tego obrazu w parametrze URL ().
Przykład nr 2:
Ponownie dodajemy nagłówek „H2” i akapit „P” w tym przykładzie. Następnie umieść „div” poniżej. Dodamy adres URL () obrazu w właściwości tła dla tego Div. Zobaczysz to w pliku CSS, jak dodajemy ścieżkę w funkcji „url ()”.
Po prostu dodajemy „obraz tła” w funkcji „Div” i umieszczamy funkcję „URL ()”. Zapewniamy ścieżkę obrazu jako „Myhouse.PNG ”. Musisz umieścić właściwą ścieżkę w tym parametrze „url ()”. „Szerokość” tego obrazu to „400px”, a „wysokość” to „350px”. „Kolor”, którego używamy, to „fioletowe”. „Rodzina czcionki” nagłówka to „Times New Roman”. Akapit „Rozmiar czcionki” to „20px”, a „kolor” jest „zielony”.
Wyjście pokazuje, że po nagłówku i akapit jest obraz. Drugi nagłówek pojawia się na obrazie jako ustawiony w pliku CSS.
Przykład nr 3:
Kod HTML dla tego przykładu jest taki sam, jak zbudowaliśmy w pierwszym przykładzie, w którym mamy akapit, nagłówek i pusty kontener Div, ale użyjemy różnych parametrów funkcji URL () w kodzie CSS.
„Wysokość” dla „Div” to „700px” i „500px” w „szerokości”. Teraz używamy „obrazu w tle” i umieszczamy dwa różne adresy URL, w których dajemy różne obrazy ścieżki. Umieściliśmy pierwszy „URL” i wewnątrz parametru. Umieściliśmy „Smily.jpeg ”jako ścieżka obrazu, a następnie umieść kolejny„ URL ”, oddzielając oba adresy URL z„ ”,.
Umieściliśmy „Smily.jpeg ”jako parametr drugiego adresu URL. Następnie mamy właściwość „powtarzanie tła”, która jest używana do ustawiania sposobu powtarzania obrazów tła. Ustawiliśmy to na „bez powtórzenia” dla obu obrazów. Ustawiamy również „pozycję tła”, która ustawia pozycje obu obrazów. Umieszczamy „prawe” dla pierwszego obrazu i „lewy” dla drugiego obrazu. W przypadku „H2” mamy „marron” dla „koloru” nagłówka. „Rodzina czcionki” nagłówek to „Times New Roman” i jest wyrównany w „centrum”. „30px”, którym używamy do „wielkości czcionki” i zmieniają „rodzinę czcionki” na „algierskie”. Korzystamy również z właściwości „wielkości czcionki” dla „P” i jest ona „25px”. Ustawiamy „kolor” akapitu jako „RGB (37, 35, 35)”, który pojawia się jako „szary”. Dostosowujemy to również jak nagłówek, w „centrum”.
Możesz zobaczyć dwa obrazy, w których pierwszy obraz jest umieszczony po lewej stronie, a drugi obraz jest umieszczony po prawej stronie ekranu wyjściowego. Jako parametr umieszczamy ścieżkę obu obrazów w adresie URL. Tak więc oba obrazy pojawiają się na wyjściu.
Przykład nr 4:
Plik HTML, którego używamy, jest taki sam jak powyżej i zmienimy rodzinę czcionki, umieszczając adres URL i umieszczając obraz za pomocą drugiej funkcji adresu URL w CSS.
W tym pliku CSS „czcionka” służy do określenia niestandardowej czcionki. Daje nam możliwość wyboru z szerokiej gamy czcionek. Ustawiliśmy „Font-Family” jako „Open Sans”. W „SRC” funkcja „lokalna” służy do uzyskania czcionki z lokalnego systemu użytkownika. Jeśli nie zostanie znalezione w „Otwórz SANS”, sprawdzi następną opcję, w której umieścimy „URL”. I sprawdza go w formacie „Woff2”, jeśli jest dostępny. Następnie zastosuje to, ale jeśli nie będzie dostępny, przejdzie do następnego „URL”. Jeśli nie jest dostępny w żadnej opcji, wybierze „rodzinę czcionki”, którą opisaliśmy poniżej.
Robimy to wszystko, umieszczając „URL”. Następnie wszystkie obrazy w pojemniku Div przy użyciu tej samej metody, jak omówiliśmy, umieszczając ścieżkę w funkcji „URL” i ustawieniach „szerokość” i „wysokość”.
Wyjście pokazuje, że zmieniają się rodzina czcionek nagłówka i akapit, a także istnieje obraz dla wszystkich.
Wniosek
Przedstawiliśmy ten samouczek, aby poprowadzić Cię o funkcję CSS URL (). Przeszliśmy przez ten temat w głębokiej głębokości i zbadaliśmy różne przykłady, w których zastosowaliśmy tę funkcję „URL ()” w kodzie CSS. Wyjaśniliśmy, że używamy tej funkcji URL () do łączenia z zasobem: obraz, rodzinę czcionki itp. W tym samouczku omówiliśmy również, jak dodać ścieżkę jako parametr w tej funkcji „URL ()”. Przygotowaliśmy dla Ciebie pełny samouczek, w którym podaliśmy kod i szczegółowo wyjaśniliśmy ten kod wraz z wyjściem.