Rola CSS
Przykład nr 01:
Musimy rozpocząć ten przykład od podstawowych tagów HTML, a następnie znacznika głównego, który używa znacznika tytułu, aby nadać nam nazwę naszej strony jako „rola CSS”. Przez chwilę pomijamy wyjaśnienie znacznika stylu, ponieważ musimy najpierw spojrzeć na znacznik ciała. W obrębie znacznika tego kodu HTML określiliśmy nagłówek rozmiaru 1, stwierdzając, że będzie to wyjaśnianie właściwości roli CSS.
Następnie używamy znacznika DIV do utworzenia nowej sekcji na naszej stronie internetowej HTML, dzieląc stronę na sekcje. Określiliśmy identyfikator tej sekcji jako „treść” i określiliśmy jego rolę jako podstawową. Następnie w tej sekcji użyto znacznika rozpiętości, który zawierał w nim jakiś tekst. Wraz z tym rola tego znacznika tego rozpiętości została określona jako wtórna. Tagi rozpiętości i div są wypełnione i zamknięte tutaj. Skończyliśmy z korpusem strony HTML.
Teraz musimy spojrzeć na styl ciała HTML. W tagu stylu określamy role, aby odpowiednio stylizować konkretne elementy. Na przykład, w przypadku podstawowej roli, używamy tła jako czegoś takiego jak kolor zielony i bliski niebieski kolor dla wtórnej roli. Po określaniu kolorów tła dla obu ról, używaliśmy tytułów Div i Element Element, aby je stylizować. Używamy 15-pikselowej wyściółki, 5 pikseli marginesów i właściwości wyświetlania wbudowanego bloku dla obu elementów. Nasz styl, głowę i elementy ciała są już ukończone, a kod jest gotowy do wykonania w przeglądarce Chrome.
Po uruchomieniu tego kodu w przeglądarce Chrome mamy pokazane poniżej wyjście, które pokazało pojedynczą div z rozpiętością. Ten zakres został zatytułowany „Wtórny”, podczas gdy zewnętrzna warstwa tego rozpiętości pokazała podstawową rolę. Widać, że główny obszar sekcji DIV był zabarwiony jasnozielonymi, a wewnętrzny zakres wtórnej roli został zabarwiony jasnozielonymi fioletowymi lub niebieskimi. Z drugiej strony wybiegi, marginesy i style wyświetlania były takie same dla obu ról.
Przykład nr 02:
Rzućmy okiem na kolejny przykład użycia atrybutu roli skryptowania HTML CSS w celu stylu naszych elementów HTML. W ramach tych przykładów będziemy używać roli i atrybutów docelowych do porównania ich zastosowań. Podobnie jak powyższy przykład, rozpoczęliśmy ten przykład od głównego znacznika HTML, a następnie znacznika głównego, który zawierał tytuł tej strony w swoim znaczniku tytułowym.
W obrębie znacznika ciała skryptu HTML określiliśmy nagłówek rozmiaru 2. Do wykazania zastosowania cech i odpowiednich atrybutów roli zastosowano trzy akapity. Po użyciu akapitów wykorzystaliśmy tagi kotwiczne, aby dodać linki do niektórych stron internetowych mediów społecznościowych, które są obecnie bardzo znane. W ramach naszego pierwszego znacznika kotwicy dodaliśmy link do Facebooka i określiliśmy jego rolę jako „główny”. Następne dwa tagi kotwiczne zawierają link do wyszukiwarki Google i Wikipedia, a następnie atrybut docelowy, aby zademonstrować cel obu linków. Ostatni znacznik kotwicy zawiera adres URL Gmaila, który nie jest jednak ważny i określił jego rolę jako „główny”. W obrębie stylu podaliśmy wiele wartości dla rodziny czcionek dla wszystkich czterech tagów kotwicznych.
Oznacza to, że każda z rodzin czcionek można wykorzystać do tych znaczników kotwicznych. Rozmiar czcionki został ustawiony na duży. Etyk lub adresy URL z roli „główny” otrzymałby kolor tła cyjan. Kotwica, w której cel jest pusty, byłby kolorowy żółty, a tam, gdzie cel jest na górze, kolor byłby czerwony. Ten skrypt został zakończony dla tagów kotwicznych i jest gotowy do użycia.
Wyjście tego kodu HTML podano poniżej. Możesz zobaczyć nagłówek i trzy pierwsze akapity pokazane jako proste teksty na ekranie. Link Anchor na Facebooku i Gmailu został zabarwiony cyjanami ze względu na użycie głównej roli. Podczas gdy Google Anchor ma żółty kolor, ponieważ był ukierunkowany jako czarny, a kotwica Wikipedii otrzymała czerwony kolor, ponieważ był ukierunkowany. Tak działają selektory w HTML.
Zaktualizujmy trochę tego samego kodu, aby uzyskać nieco inne dane wyjściowe na naszej stronie internetowej. W ramach kodu HTML używamy jednego nagłówka i jednego akapitu z długim tekstem. Do łączenia różnych stron internetowych użyto czterech różnych tagów kotwicznych z czterema słowami kluczowymi. Pierwsze dwa tagi kotwiczne i ostatni znacznik kotwicy zostały określone z rolą głównego. Podczas gdy trzeci znacznik kotwicy został określony za pomocą docelowego góry.
Tagi przerywanej linii zostały użyte po każdym znaczniku kotwicy, aby podać skok linii. W tagie stylu używamy tej samej rodziny czcionki i rozmiaru czcionki dla wszystkich tagów kotwicznych. Kolor tła „Cyan” został wybrany dla kotwic, w których rola jest prawie równa słowowi kluczowe „oficjalne”.
Po uruchomieniu tego kodu mamy pierwsze dwa linki kolorowe „cyjan” na naszej stronie internetowej, podczas gdy reszta nie została stylizowana. Wynika to z faktu, że słowo kluczowe „oficjalne” było używane tylko dla pierwszych dwóch tagów kotwicznych w atrybucie „roli”.
Wniosek
Ten artykuł był dobrym przewodnikiem dla wszystkich nowych użytkowników HTML, jeśli nie mają wcześniejszej wiedzy na temat „roli” selektora w CSS. Zastosowaliśmy trzy różne przykłady, aby wyjaśnić koncepcję selektorów „roli” i „docelowych”. W naszych przykładach wypróbowaliśmy również podejście słów kluczowych, aby wyświetlić użycie „roli” i selektorów docelowych. To było o tym i staraliśmy się omówić te przykłady w najprostszy możliwy sposób.