CSS attr
W tym przewodniku zbadamy funkcję attr () w CSS i użyjemy tej funkcji do odzyskania wartości. Wyjaśnimy, jak korzystać z tej funkcji w CSS i jak zwróci wartość w wyjściu w żądanym miejscu. Zrobimy tutaj kilka przykładów i wyjaśnimy tę koncepcję funkcji attr ().
Przykład 1
Musimy mieć kod HTML, aby użyć tej funkcji attr () w CSS. Możemy użyć tej funkcji attr () w naszym kodzie CSS do pobierania wartości użytych w HTML. Oprogramowanie, których używamy do wykonania tych przykładów w tym przewodniku, to kod Visual Studio. Otwieramy nowy plik w kodzie Visual Studio, a następnie wybieramy język w pliku jako HTML. Utworzony plik to plik HTML. Następnie piszemy kod HTML w tym pliku. Kiedy zapiszymy ten plik po wypełnieniu kodu, ten plik jest zapisywany za pomocą „.rozszerzenie pliku html ”.
W kodzie HTML tworzymy nagłówek 1 za pomocą „
". Następnie używamy znacznika „”, w którym tworzymy „link” „Google”, a następnie piszemy „link Google”, który jest wyświetlany na ekranie. Następnie zamknij tag „”. Używamy funkcji attr () w „HREF” w CSS, więc link pojawi się z tekstem.
Kod CSS:
Tutaj tworzymy plik CSS. Możemy użyć funkcji attr () do pobrania danych. Musimy użyć „.Rozszerzenie pliku CSS ”podczas zapisywania tego pliku.
„H1” reprezentuje nagłówek, który stworzyliśmy w pliku HTML. Wyrównujemy ten nagłówek do środka „ekranu” za pomocą „align tekstu”. Następnie używamy „A: przed”, więc kiedy używamy funkcji „attr ()”, wyświetli pożądaną wartość, którą pobraliśmy przed treścią. Ta „treść” określa dane, które napisaliśmy w pliku HTML za pomocą właściwości niestandardowej. „Attr (href)” otrzymuje dane „href”, który jest linkiem. I umieszcza go przed treścią i umieść „=>” po „href”.
Następnie stylizujemy „A”, który służy do zdefiniowania hiperłącza w HTML. Ustawiliśmy „w stylu czcionki” na „Kursywa”, więc będzie renderować na ekranie w stylu „kursywą”. Ponadto ustawiamy „kolor” na „niebieski”. Ta właściwość „koloru” określa kolor czcionki. „Rozmiar czcionki” jest ustawiony na „30px”. Możemy uzyskać wyjście po połączeniu i zapisaniu kodów HTML, jak i CSS, naciskając „Alt+B” na stronie HTML.
Wyjście:
Dane wyjściowe poprzedniego kodu znajduje odzwierciedlenie w następującym obrazie:
Link używaliśmy w kodzie HTML, jest wyświetlany tutaj, ponieważ użyliśmy „attr ()”, aby odzyskać ten link. Użyliśmy „przed”, aby ten link był wyświetlany przed treścią. Tutaj treść to „Link Google”. Wartość, którą chcemy odzyskać, to link Google, który zapisaliśmy w „HREF” w kodzie HTML.
Przykład nr 2
W tym przykładzie używamy tego samego pliku HTML. Ale wprowadzimy pewne zmiany w kodzie CSS i ponownie użyjemy funkcji „attr ()” w poprzednim kodzie HTML.
Ponownie nagłówek jest wyrównany w „środku”. Używamy „po” z „a”, więc gdy funkcja „attr ()” odzyskuje wartość, ta wartość wyświetli się po zawartości. Tutaj używamy „treści”, a następnie mamy strzałkę „=>”, a następnie używamy funkcji „attr ()”. Kiedy otrzymamy wyjście, zobaczysz, że link pojawia się po zawartości. W tym przykładzie używamy „czerwonej” koloru czcionki z „30px” „wielkości czcionki”.
Wyjście:
To wyjście pokazuje link po zawartości. Najpierw wyświetla treść, która jest „linkiem Google”. Następnie wyświetla jego link, który otrzymujemy za pomocą funkcji „affr ()” CSS.
Przykład nr 3
Tutaj tworzymy listę o różnych nazwach. „OL” służy do zdefiniowania uporządkowanej listy. Podczas gdy „Li” służy do przedstawienia elementu na liście. Tworzymy listę czterech nazw i pobieramy te nazwy za pomocą funkcji „attr ()” w CSS.
Kod CSS:
Używamy koloru „pomarańczowego” do nagłówka i wyrównujemy go w „środku”. Chcemy umieścić nazwy po treści, dlatego używamy „później” z „Listą.li ”. Używamy „treści” do wyświetlania treści, które napisaliśmy w kodzie HTML. Używamy również nawiasu w nawiasach. Używamy funkcji „attr ()”. Przekazujemy „nazwę” jako element w funkcji „attr ()”. Kiedy otrzymamy wyjście, nazwy pojawią się w nawiasach. Kolor czcionki tego zestawu to „niebieski” i wyświetla się w stylu kursywnym, gdy ustawiamy „w stylu czcionki” na „kursywę”. Używają niektórych właściwości na pozycjach listy, która jest właściwością „wielkości czcionki”. Ustawiamy rozmiar czcionki na „25px”. I użyj właściwości „rodziny czcionki”, która jest ustawiona na „Times New Roman”.
Wyjście:
Tutaj możemy zobaczyć, że treść jest pierwsza renderowana. Następnie nazwy pojawiają się w nawiasie po treści. Otrzymujemy wszystkie nazwy za pomocą tylko jednej funkcji attr () i renderowania tych nazw z każdym elementem listy po zawartości.
Przykład nr 4
Tworzymy cztery linki w tym kodzie HTML za pomocą „HREF” i mając treść dla każdego linku. Teraz spójrz na kod CSS i sposób, w jaki pobieramy te linki za pomocą funkcji „attr ()”.
Kod CSS:
Stylukujemy nagłówek, zmieniając „kolor” i „rodzinę czcionki” tekstu. Wyrównujemy tekst w „centrum”. Używamy „po”, aby link, który otrzymujemy za pomocą funkcji attr (), jest renderowany po treści. Używamy nawiasu, więc gdy funkcja attr () odzyskuje link, wyświetli je wewnątrz nawiasu. Te linki renderują w kolorze „czerwonym” i w stylu „kursywą”.
Wyjście:
Przykład nr 5
Tworzymy listę różnych owoców i warzyw i stosujemy funkcję attr () na tej liście. Lista, którą tutaj utworzyliśmy. Teraz pojawia się kod CSS, w którym używamy funkcji attr ().
Kod CSS:
Do nagłówka używamy „zielonego” koloru. Kolor tła tego nagłówka to „Aqua”. Używamy „później”, które omówiliśmy w naszych poprzednich kodach. Tutaj funkcja attr () jest ponownie używana w nawiasie, aby pobrane dane wyświetlą się w tym nawiasie. Ustawiliśmy jego kolor na „Orangled” i rozmiar czcionki na „22px”. Używamy do tego koloru tła i ustawiamy go na „żółty”.
Wyjście:
Wniosek
W tym przewodniku dowiedzieliśmy się, co to jest funkcja attr () i dlaczego używamy tej funkcji attr () w CSS. Nauczyliśmy się również, jak korzystać z tej funkcji w CSS. Wyjaśniliśmy tę funkcję attr () teoretycznie i przeprowadziliśmy przykłady, w których użyliśmy tej funkcji w CSS. Zbadaliśmy pięć różnych przykładów w tym przewodniku i wyświetliśmy dane lub link, które pobraliśmy za pomocą funkcji attr () przed i po treści. Wyjaśniliśmy, w jaki sposób ta funkcja pobiera żądane dane wybranego elementu lub wartości i wyświetla je w wyjściu.