Ten artykuł porusza interesujący i ważny temat znany jako Selektory, a następnie uzupełniającą praktyczną demonstrację. Poniższe wskazówki zostaną omówione w tym artykule,
- Stylizacja elementów HTML
- Selektory CSS
- Selektor identyfikatorów CSS
- Selektor klas CSS
- Uniwersalny selektor CSS
- Selektory grup CSS
A więc zacznijmy,
Stylizacja elementów HTML
Zrozummy, czym jest CSS, zanim przejdziemy do selektorów CSS. Jeśli HTML ma być traktowany jako szkielet, CSS (Cascading Style Sheets) jest jak mięśnie i skóra. Mózg to JavaScript. Tak więc w przypadku strony internetowej style CSS to zasadniczo układ i projekt. Od umiejscowienia obrazów i tekstu po rozmiar czcionki i kolor tła, CSS kontroluje wygląd elementów HTML w przeglądarce.
Możesz lepiej zrozumieć CSS, jeśli dobrze wiesz, czym są selektory CSS. Te selektory umożliwiają kierowanie na określone elementy HTML, dzięki czemu można zastosować do nich odpowiedni styl.
Zobaczmy, jak możemy wybierać elementy HTML,
Jak wybrać elementy?
Powiedzmy, że chcesz, aby określony nagłówek miał inny styl niż reszta treści na stronie internetowej. Teraz, używając selektorów CSS, możesz wskazać ten element HTML, aby nadać mu inny styl. Selektory CSS pomagają w definiowaniu elementów, do których ma zastosowanie określony zestaw reguł CSS. Istnieją różne typy selektorów CSS, które pozwalają precyzyjnie wybrać elementy, które chcesz stylizować. Możesz nadać całej stronie ogólną stylizację, a następnie wypracować własny sposób nadawania stylu innym elementom strony.
Selektory są częścią reguły CSS, a selektory te pojawiają się tuż przed deklaracją bloków CSS. Aby uzyskać lepsze zrozumienie, możesz zapoznać się z poniższym obrazem.
Przechodząc dalej z artykułem o selektorach CSS
Selektory CSS
Ten selektor umożliwia wybranie elementu HTML według jego nazwy.
Rozważ poniższy kod:
p {text-align: center color: magenta}Ten styl zostanie zastosowany do każdego akapitu.
Paragraf 1
Pkt 2
Ten kod daje następujące dane wyjściowe:
Ten styl zostanie zastosowany do każdego akapitu
Paragraf 1
Pkt 2
W powyższym kodzie elementy HTML zostały wyśrodkowane i mają kolor „magenta”.
jak zainstalować php w systemie Windows 7
Przechodząc dalej z artykułem o selektorach CSS
Selektor identyfikatorów CSS
Wybierając atrybut id elementu HTML, możesz wybrać ten konkretny element. Ponieważ identyfikator jest unikalny dla strony, możesz wybrać odpowiedni element za pomocą atrybutu id.
Możesz wybrać element HTML, używając znaku „#”, po którym następuje identyfikator tego elementu. Na przykład „#firstname” wybiera element, którego id to „firstname”.
Rozważ następujący kod:
# para1 {text-align: center color: orange}Witaj świecie
Ten ustęp nie ulegnie zmianie.
Dane wyjściowe dla powyższego kodu to:
Witaj świecie
Ten ustęp nie ulegnie zmianie.
Jak widać na powyższym wyjściu, dołączając id = ”para1 ″, byliśmy w stanie zmienić kolor tego elementu na pomarańczowy. Drugi element, który tego nie ma, pozostaje nienaruszony.
Przechodząc dalej z artykułem o selektorach CSS
Selektor klas CSS
Korzystając z selektora klas, możesz wybrać elementy HTML, które mają określony atrybut klasy. Możesz zdefiniować selektor za pomocą kropki (kropki), po której następuje nazwa klasy. Na przykład .intro wybiera elementy, których klasa jest „intro”. Należy pamiętać, że nazwy zajęć nigdy nie można zaczynać od numeru.
Rozważ następujący kod:
.center {text-align: center color: pink}Ten nagłówek jest różowy i wyrównany do środka.
Ten akapit jest różowy i wyrównany do środka.
jak skompilować program java
Wynik powyższego kodu to:
Ten nagłówek jest różowy i wyrównany do środka.
Ten akapit jest różowy i wyrównany do środka.
Możesz użyć selektorów klas CSS dla określonego elementu. Jeśli chcesz, aby stylizowany był tylko jeden określony element, możesz użyć nazwy elementu wraz z selektorem klasy.
Weźmy na przykład pod uwagę następujący kod:
p.center {text-align: center color: pink}Nie ma to wpływu na ten nagłówek
Ten akapit jest różowy i wyrównany do środka.
Wynik powyższego kodu to:
Nie ma to wpływu na ten nagłówek
co to jest impas w java
Ten akapit jest różowy i wyrównany do środka.
Jak widać na wyjściu, styl nie ma wpływu na nagłówek h2. Ponieważ określiliśmy „p.center”, styl ma wpływ tylko na akapit.
Przechodząc do tego artykułu o selektorach CSS,
Uniwersalny selektor CSS
Ten typ selektora można uznać za znak wieloznaczny, który wybiera wszystkie elementy na stronie. Wybiera wszystkie elementy na stronie i jest określony przez „*”.
Weźmy na przykład pod uwagę poniższy kod:
* {kolor: ciemnozielony rozmiar czcionki: 30px}To jest test (mniejsza czcionka)
To jest akapit.
Dane wyjściowe dla powyższego kodu to:
Witaj świecie
To jest test (mniejsza czcionka)
To jest akapit.
Jak widać na wyjściu, wszystkie elementy zdefiniowane za pomocą selektora grup mają tę samą definicję stylu - są wyrównane do środka, a kolor czcionki to cyjan.
To prowadzi nas do końca tego artykułu.
Sprawdź nasze który obejmuje szkolenie na żywo prowadzone przez instruktora i rzeczywiste doświadczenie projektowe. To szkolenie zapewni Ci biegłość w pracy z technologiami internetowymi zaplecza i front-endu. Obejmuje szkolenia w zakresie tworzenia stron internetowych, jQuery, Angular, NodeJS, ExpressJS i MongoDB.
Masz do nas pytanie? Wspomnij o tym w sekcji komentarzy w artykule, a my skontaktujemy się z Tobą.