JavaScript Dodaj atrybut CSS

| | | | | | | |

Selektory CSS pozwalają programistom internetowym na stylizowanie określonego elementu lub zestawu elementów na stronie internetowej.

Podczas pracy z selektorami możesz zdecydować się na kierowanie tylko elementów z określonym atrybutem. Tutaj wkracza selektor atrybutów CSS. Selektor atrybutów pomaga zastosować określone style tylko do elementów z określonym atrybutem.

Ten samouczek wyjaśnia, jak używać selektora atrybutów CSS podczas stylizowania elementów. Pod koniec tego samouczka będziesz dobrze rozumiał, jak używać Selektora atrybutów do definiowania elementów.

Atrybuty HTML

W języku HTML atrybuty są używane do definiowania dodatkowych cechy lub właściwości elementu. Na przykład atrybut height definiuje wysokość obrazu, a atrybut title określa tytuł elementu WWW.

Zadeklaruj atrybuty przy użyciu struktury pary nazwa/wartość. Oznacza to, że atrybut taki jak ten pojawi się w pliku HTML: nazwa = "wartość". Aby dowiedzieć się więcej o atrybutach HTML, przeczytaj nasz przewodnik po atrybutach HTML .

Selektor atrybutów CSS

Projektując witrynę, możesz chcieć stylizować elementy na podstawie ich wartości atrybutów lub nie. Aby to zrobić, użyj selektora atrybutów CSS.

Dwa kroki, które należy wykonać podczas korzystania z selektora atrybutów, to:

  1. Zawijaj atrybut ` s w nawiasach kwadratowych.
  2. Określ style, które chcesz zastosować do atrybutów o tej nazwie.

Przyjrzyjmy się kilku przykładom działania selektora atrybutów CSS.

CSS [Atrybut]

Najbardziej podstawowa forma atrybutu selektora to: [atrybut]. Innymi słowy, umieść nazwę atrybutu w nawiasach kwadratowych.

Załóżmy, że chcemy ustawić rozmiar czcionki każdego elementu z atrybutem title na 16px. Możemy to zrobić za pomocą tego kodu:

Nasz kod reguł CSS dotyczy tylko elementów z atrybutem title. Rozmiar czcionki dowolnego elementu z określonym atrybutem title, niezależnie od wartości przechowywanej w atrybucie, zmieni się na 16px zgodnie z powyższą regułą.

Możesz bardziej precyzyjny selektor atrybutów, określając jedno lub oba z poniższych:

Załóżmy na przykład, że chcesz ustawić rozmiar całego tekstu w akapicie nagłówek do 16px. Możesz to zrobić za pomocą tego kodu:

Litera p na początku atrybutu selektora mówi przeglądarce, aby zastosować styl czcionki tylko do znaczników

. Część selektora [title] mówi przeglądarce, aby zastosowała styl policji tylko do

tagów z określonym atrybutem title.

T Po przeczytaniu tego kodu przeglądarka przekonwertuje rozmiar czcionki wszystkich tytułów akapitów (p) na 16 pikseli. Ten kod nie wpłynie na żaden inny tekst na stronie.

Selektor atrybutu [attribute = "wartość"] umożliwia programistom stosowanie stylów tylko do elementów. Atrybut, którego wartości „Ęã” są równe wartości określonej w selektorze.

Załóżmy, że chcemy ustawić kolor tła wszystkich linków na stronie głównej Python.Engineering na pomarańczowy. Ten styl powinien ustawić kolor tła elementu a na pomarańczowy. Możemy wykonać tę akcję za pomocą następującego kodu CSS:

Ta reguła wybiera wszystkie elementy na Twojej stronie internetowej, których atrybut href jest równy python.engineering. Następnie ustaw kolor tła wszystkich tych elementów na pomarańczowy.

CSS [atrybut ~ = "wartość"]

[atrybut ~ = & bdquo selektor ; wartość "] pozwala wybrać elementy z wartościami atrybutów ‚Ęã‚Ęã, które zawierają określone słowo.

Załóżmy na przykład, że chcesz zastosować styl do wszystkich p elementy, których tytuły odpowiadają słowu niebieski. W przypadku tego stylu kolor tekstu tych elementów musi zostać zmieniony na niebieski.

Możemy użyć poniższa reguła, aby to zrobić:

Ta reguła znajdzie wszystkie znaczniki

skojarzone z tytułami zawierającymi słowo „niebieski” i określi kolor tekstu w tych znacznikach

niebieski. jeśli

tag ma tytuł color blue lub color blue, ten styl zostanie zastosowany. Jednak ta reguła nie dotyczy

tagu o tytule blueColor, ponieważ słowo b lue nie występuje niezależnie w atrybucie.

To różni się od * = selektor, który nie tylko może znaleźć określone słowo w atrybucie, ale także znaleźć określoną wartość w atrybucie.

CSS [atrybut | = "wartość"]

[atrybut | = "wartość"] selektor pozwala wybrać elementy, których atrybuty zaczynają się od określonej wartości (na przykład "Góra"). Obejmuje to elementy, których atrybuty zaczynają się od określonej wartości i zawierają myślnik, po którym następuje dodatkowy tekst (na przykład „top-style” i inne wartości „top-”). Pamiętaj, że kod wymaga pionowej kreski (|) po słowie „ Class. —

Załóżmy na przykład, że chcesz przypisać górne wypełnienie 10 pikseli do każdego elementu z atrybutem klasy zaczynającym się od top, w tym te, po których następują inne wartości oddzielone myślnikami. Możesz to zrobić za pomocą tego kodu:

Ta reguła zastosuje dopełnienie 10px na górze każdego

Ważne jest, aby pamiętać, że podana wartość musi być pojedynczym słowem lub słowem, po którym następuje myślnik. Innymi słowy, powyższa stylizacja miałaby zastosowanie do elementów z klasą nazwa topstyle.

CSS [atrybut ^ = "wartość‚Ęù]

[atrybut ^ = & bdquo selektor; wartość „Ęù] służy do wybierania elementów, których wartość atrybutu zaczyna się od określonej wartości. Określona wartość nie musi być całym słowem, w przeciwieństwie do [atrybut | = „wartość”] o którym mówiliśmy wcześniej.

Załóżmy, że chcemy zastosować podkładkę mniejszą niż 10 pikseli do każdego elementu

Przeglądarka internetowa użytkownika zastosuje zdefiniowany przez nas styl padding-bottom do wszystkich tagów

CSS [atrybut $ = "value`Ęù]

L `operator $ = służy do zaznaczania wszystkich elementów, których wartości atrybutu ‚Ę‚‚kończą się określoną wartością. Załóżmy na przykład, że chcesz zmienić kolor tekstu na szary we wszystkich tekstach hipertekstowych, których atrybut href ma wartości „Ęã‚Ęãend z .app. Możesz to zrobić za pomocą tego kodu:

Ten selektor zostanie zastosowany do wszystkich elementów Twojej strony internetowej, których wartości href ‚Ęã‚Ęãkończą się z .app .

CSS [atrybut * = "wartość"]

Operator * = pozwala wybrać wszystkie elementy, których wartości atrybutu „Ęã‚Ęãd” zawierają określony wartość. W przeciwieństwie do operatora ~ =, ten selektor atrybutu może znaleźć konkretną wartość w klasie, a nie tylko pojedyncze słowo.

Fo Na przykład załóżmy, że chcemy zastosować 50px dopełnienie wokół wszystkich tagów

Ta reguła zdefiniuje dopełnienie 50px wokół wszystkich elementów HTML z atrybutami klasy at, które zawierają termin allPadding. Zatem elementy o nazwach klas new allPadding, surround allPadding red, allPaddingblue i allPadding-true będą wszystkimi podlega temu stylowi.

Wnioski

Selektor atrybutów CSS umożliwia programistom wybieranie elementów na podstawie wartości atrybutów „Ęã”ãi stosowanie do tych elementów określonych stylów.

p>

Ten samouczek wyjaśniał, odwołując się do przykładów, podstawy selektorów atrybutów i jak używać wszystkich typów selektorów atrybutów CSS. Możesz teraz zacząć korzystać z selektora atrybutów CSS jak profesjonalista.


CSS to jedna z trzech głównych umiejętności używanych w tworzeniu stron internetowych.Pobierz aplikację
bezpłatny Python.Engineering od dziś mówić z doświadczonym trenerem kariery, który może pomóc Ci doradzić w zakresie umiejętności potrzebnych do kontynuowania kariery jako programista stron internetowych.

Shop

Learn programming in R: courses

$

Best Python online courses for 2022

$

Best laptop for Fortnite

$

Best laptop for Excel

$

Best laptop for Solidworks

$

Best laptop for Roblox

$

Best computer for crypto mining

$

Best laptop for Sims 4

$

Latest questions

NUMPYNUMPY

psycopg2: insert multiple rows with one query

12 answers

NUMPYNUMPY

How to convert Nonetype to int or string?

12 answers

NUMPYNUMPY

How to specify multiple return types using type-hints

12 answers

NUMPYNUMPY

Javascript Error: IPython is not defined in JupyterLab

12 answers

News


Wiki

Python OpenCV | cv2.putText () method

numpy.arctan2 () in Python

Python | os.path.realpath () method

Python OpenCV | cv2.circle () method

Python OpenCV cv2.cvtColor () method

Python - Move item to the end of the list

time.perf_counter () function in Python

Check if one list is a subset of another in Python

Python os.path.join () method