CSS Zastąp tekst
Przykład 01
Zacznijmy od użycia przesunięcia „po”, aby zastąpić jeden tekst nowym tekstem. Aby utworzyć stronę internetową HTML, będziemy używać wszystkich jej standardowych tagów. Pierwszy i główny znacznik to znacznik HTML, a wszystkie inne zawartości tagów pojawiły się w nim. Musimy więc upewnić się, że otwarcie i zamknięcie tego tagu nie przegapili naszego kodu. Zaczęliśmy ten tag, a następnie tag „głowa”, który był koniecznością do wykonania stylizacji nagłówka i innych rzeczy. Dodaliśmy do niego tag stylu. Możesz także wypróbować w nim tag „tytuł” przed tagiem stylu, aby nadać Twojej stronie HTML prosta nazwa.
W obszarze ciała naszej strony HTML wszystkie pozostałe elementy zostaną dodane między otwieraniem i zamykaniem „ciała”, i.mi., I . Używamy
Tag, aby dodać akapit do naszego ciała strony HTML. Ten
Tag został sklasyfikowany z klasą „Wymień” do użycia do stylizacji.
znacznik służy do zamykania tego znacznika po dodaniu do niego danych tekstowych. Tag stylu został użyty w tagu „głową” i klasie „.zamień ”został użyty do dodania stylizacji do akapitu tej strony. Właściwość widoczności jest ustawiona na „ukryta”, a jej pozycja została ustawiona na względne według początku strony. Przesunięcie „po” zostało użyte w następnym wierszu dla konkretnej klasy, aby zmienić swoją widoczność na „widoczną” i pozycję na „absolutne”. Oznacza to, że po oryginalnym tekście nowy tekst będzie widoczny, a jego pozycja będzie absolutna.Górna i lewa margines został ustawiony na 0, a właściwość treści jest używana do dodania innego tekstu zamiast oryginalnego tekstu. Z powodu wymiany oryginalny tekst będzie ukryty zgodnie z „widocznością” na „ukrytych”. Teraz możemy uruchomić nasz kod, ponieważ jest kompletny.
Teraz mamy wynik pokazany na zakładce przeglądarki. Widać, że oryginalny tekst brzmiał „Zostanę zastąpiony”, podczas gdy pokazany tekst brzmi „Jestem nowym tekstem…”. Wskazuje, że użycie właściwości widoczności do „ukrytego” i „widocznego” wraz z właściwością „treści” może zmusić jeden tekst na drugim.
Przykład nr 02
Rzućmy okiem na inny przykład HTML, aby użyć przesunięcia „po” bez właściwości „widoczności” i sprawdź, czy zastępuje tekst, czy nie. Tak więc używamy tych samych znaczników otwierania i zamykania HTML, aby utworzyć standardowy plik HTML do wykonania w przeglądarce. W obrębie znacznika tego kodu HTML używamy
Tag, aby utworzyć akapit na naszej stronie HTML i przypisał mu klasę „Wymień” do klasyfikacji na poziomie stylizacji. Ten akapit zawiera również znacznik rozpiętości wraz z tekstem, aby oznaczyć w nim tekst. Tagi rozpiętości i akapitu są zamknięte jeden po drugim.
Następnie zamknęliśmy również tag nadwozia. Tag stylowy używa klasy „Wymień” dla znacznika Span, aby używać właściwości „wyświetlanie” jako brak. Oznacza to, że żaden znacznik nie zostanie zastosowany do tekstu w ramach rozpiętości. Przesunięcie „po” zostało użyte z klasą „Wymień”, aby dodać właściwość „treść” nowym tekstem, aby zastąpić stary tekst w znaczniku akapitu naszego ciała HTML. Ten kod jest teraz gotowy do wykonania.
Po wykonaniu tego kodu w przeglądarce Chrome za pośrednictwem menu „Uruchom” kodu Visual Studio, otrzymaliśmy zastąpiony tekst zamiast oryginalnego na stronie HTML.
Przykład nr 03
W tym przykładzie zrozumiesz metodę zastąpienia tekstu podczas unoszenia. Część ciała tego kodu zawiera prosty znacznik nagłówka „H1”, aby dodać standardowy największy rozmiar nagłówka na stronie internetowej HTML po wykonaniu. Po zamknięciu znacznika nagłówka jako „, Dodaliśmy znacznik „div”, aby utworzyć nowy kontener na stronie HTML. Ten kontener zawiera znacznik kotwicy, aby dodać link do niektórych tekstów, i.mi., URL Google był używany do łączenia. Tag nagłówka został użyty do utworzenia nagłówka rozmiaru 2, a następnie znacznika rozpiętości z tekstem dla znaczników. Znacznik nagłówka, znacznik kotwicy i znacznik „div” zostały tutaj ukończone. Zamknęliśmy więc wszystkie te 4 tagi za pomocą ich zamykających tagów i.mi. ,
, , .Następnie nie potrzebujemy jeszcze niczego do użycia na tej stronie HTML. W ten sposób również zamykaliśmy ciało, ja.mi., za pomocą tagu. Znak znacznika kotwicy, a następnie przesunięcie „zawieszki”, został użyty do znacznika „rozpiętości” dziecka, aby ustawić wyświetlacz na brak. „Odwiedzone” przesunięcie służy do informowania, że kolor linku byłby zielony na wizytach na stronie. Przesunięcie „przed” jest używane na zawisie w celu zastąpienia oryginalnej zawartości nową treścią po unośniku, i.mi., „Kliknij tutaj, aby odwiedzić Google”. Po unoszeniu oryginalnego tekstu kolor nowego tekstu zostanie zmieniony na Crimson. Jeśli naciśniesz lewy klawisz po unoszeniu oryginalnego tekstu bez uwalniania klawisza, aktywne przesunięcie zmieni kolor nowego tekstu na niebieski. Styl i znaczniki są teraz zamknięte.
Po uruchomieniu tego kodu przez kod VS w Chrome, mamy nagłówek i link do Google. Podkreślony link jest pokazany w kolorze zielonym.
Kiedy zawisasz wskaźnik myszy na tekście „Tap On Me”, jego tekst został zastąpiony nową.mi., karmazynowy. Kiedy dotkniesz linku bez uwalniania przycisku, na pewno zmieni kolor na niebieski.
Wniosek
Skończyliśmy z ilustracjami i wyjaśnieniem koncepcji wymiany tekstu CSS w skryptowaniu HTML. Wdrożyliśmy w sumie 3 przykłady w HTML, aby zastąpić jeden tekst drugim. W tym celu omówiliśmy zastosowanie przesunięcia „po” wraz z jego własnością widoczności, właściwości pozycji i właściwością treści. Następnie zaimplementowaliśmy również metodę zastąpienia tekstu pewnego linku innym tekstem wraz z jego zmianą koloru za pomocą znaczników zawieszania, a następnie właściwości przesunięcia i zawartości.