Learn CSS: The Complete Guide

stworzyliśmy kompletny przewodnik, który pomoże Ci nauczyć się CSS, niezależnie od tego, czy dopiero zaczynasz od podstaw, czy chcesz poznać bardziej zaawansowany CSS.

selektory CSS

więc poznałeś bazę id, classI descendant selektory—a następnie nazwałeś je dniem? Jeśli tak, tracisz ogromną elastyczność. Jesteś winien sobie, aby włączyć te zaawansowane selektory CSS i CSS3 do pamięci.

selektory podstawowe

1., *

* { margin: 0; padding: 0;}

pozbądźmy się tych oczywistych, dla początkujących, zanim przejdziemy do bardziej zaawansowanych selektorów.

symbol gwiazdy będzie skierowany do każdego pojedynczego elementu na stronie. Wielu programistów użyje tej sztuczki, aby zerować margin s I padding. Chociaż jest to z pewnością w porządku dla szybkich testów, radzę nigdy nie używać tego w kodzie produkcyjnym. Dodaje zbyt dużą wagę do przeglądarki i jest niepotrzebny.

* może być również używany z selektorami potomnymi.,

#container * { border: 1px solid black;}

spowoduje to wyświetlenie wszystkich elementów potomnych#containerdiv. Ponownie, staraj się nie używać tej techniki bardzo, jeśli w ogóle.

2. #X

#container { width: 960px; margin: auto;}

prefiks symbolu hash do selektora pozwala nam na kierowanie przezid. Jest to z łatwością najczęstsze użycie; należy jednak zachować ostrożność podczas używania selektorów id.,

zadaj sobie pytanie: czy koniecznie muszę zastosowaćid do tego elementu, aby go skierować?

id selektory są sztywne i nie pozwalają na ich ponowne użycie. Jeśli to możliwe, najpierw spróbuj użyć nazwy tagu, jednego z nowych elementów HTML5, a nawet pseudo-klasy.

3. .X

.error { color: red;}

To jest class selektor. Różnica między idS Iclass es polega na tym, że przy tym ostatnim można kierować wiele elementów., Użyj classes, jeśli chcesz, aby stylizacja została zastosowana do grupy elementów. Alternatywnie, użyj id s, aby znaleźć igłę w stogu siana i styluj tylko ten konkretny element.

4. X

a { color: red; }ul { margin-left: 0; }

Co zrobić, jeśli chcesz kierować wszystkie elementy na stronie zgodnie z ichtype, zamiastid lubclassnazwa? Uprość to i użyj selektora typów. Jeśli chcesz kierować wszystkie listy nieuporządkowane, użyj ul {}.,

Demo podstawowych selektorów

selektorów kombinatorów

5. X Y

li a { text-decoration: none;}

następnym najczęściej używanym selektorem jest descendant selektor. Kiedy musisz być bardziej szczegółowy ze swoimi selektorami, używaj ich. Na przykład, co zrobić, jeśli zamiast kierować wszystkie znaczniki zakotwiczenia, musisz kierować tylko kotwice, które znajdują się na liście nieuporządkowanej? Jest to szczególnie, gdy używasz selektora Potomków.

Pro-tip: jeśli twój selektor wygląda tak: X Y Z A B.error, robisz to źle., Zawsze zadawaj sobie pytanie, czy jest to absolutnie konieczne, aby zastosować całą tę wagę.

6. X + Y

ul + p { color: red;}

jest to określane jako sąsiedni selektor. Wybierze tylko element, który jest bezpośrednio poprzedzony pierwszym elementem. W tym przypadku tylko pierwszy akapit po każdym ul będzie miał czerwony tekst.

7., X> Y

div#container > ul { border: 1px solid black;}

różnica między standardemX Y IX > Y polega na tym, że ten ostatni wybierze tylko bezpośrednie dzieci. Na przykład rozważ następujące znaczniki.

 <div> <ul> <li> List Item <ul> <li> Child </li> </ul> </li> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> </div>

selektor #container > ul będzie kierować tylko uls, które są bezpośrednimi dziećmi div z id of container., Nie będzie na przykład adresowany do ul, który jest potomkiem pierwszego li.

z tego powodu korzystanie z kombinatora dziecięcego przynosi korzyści wydajnościowe. W rzeczywistości jest to szczególnie zalecane podczas pracy z selektorem CSS opartym na JavaScript.

8. X ~ Y

ul ~ p { color: red;}

Ten kombinator rodzeństwa jest podobny do X + Y, ale jest mniej rygorystyczny., Podczas gdy sąsiedni selektor (ul + p) wybierze tylko pierwszy element, który jest bezpośrednio poprzedzony poprzednim selektorem, ten jest bardziej uogólniony. Wybierze, odwołując się do naszego przykładu powyżej, dowolnep elementy, o ile podążają za ul.

Demo na żywo selektorów kombinatorów

selektorów atrybutów

9. X

a { color: green;}

określany jako selektor atrybutów, w naszym powyższym przykładzie wybierze tylko tagi kotwicy, które mają atrybuttitle., Znaczniki zakotwiczenia, których nie ma, nie otrzymają tej konkretnej stylizacji. Ale co, jeśli musisz być bardziej konkretny? Zobacz następny przykład!

10. X

a { color: #83b348; /* Envato green */}

powyższy fragment stylizuje wszystkie znaczniki anchor, które prowadzą dohttps://code.tutsplus.com; otrzymają one nasz zielony kolor. Wszystkie inne znaczniki zakotwiczenia pozostaną nienaruszone.

zauważ, że owijamy wartość w cudzysłowy. Pamiętaj, aby to zrobić również przy użyciu JavaScript CSS selector engine. Jeśli to możliwe, Zawsze używaj selektorów CSS3 zamiast metod nieoficjalnych.,

To działa dobrze, chociaż jest nieco sztywne. Co jeśli link rzeczywiście kieruje się do Envato Tuts+, ale może ścieżka jest code.tutsplus.com zamiast pełnego adresu URL? W takich przypadkach możemy użyć części składni wyrażeń regularnych.

11. X

a { color: #83b348; /* Envato green */}

proszę bardzo, tego nam trzeba. Gwiazdka oznacza, że postępująca wartość musi pojawić się gdzieś w wartości atrybutu. W ten sposób, to obejmuje tutsplus.com, code.tutsplus.com, a nawet webdesign.tutsplus.com.

należy pamiętać, że jest to szerokie stwierdzenie., Co jeśli tag kotwicy jest powiązany z jakąś witryną spoza Envato z ciągiem tutsplus w adresie URL? Jeśli chcesz być bardziej szczegółowy, użyj ^ I $, aby odwołać się odpowiednio do początku i końca łańcucha.

12. X

a { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px;}

zastanawiałeś się kiedyś, jak niektóre strony internetowe mogą wyświetlać małą ikonkę obok linków zewnętrznych? Jestem pewien, że już to widziałeś; są to miłe przypomnienia, że link skieruje cię do zupełnie innej strony.

To jest cinch z symbolem carat., Jest najczęściej używany w wyrażeniach regularnych do wyznaczenia początku ciągu znaków. Jeśli chcemy kierować wszystkie znaczniki anchor, które mają href rozpoczynające się od http, możemy użyć selektora podobnego do fragmentu pokazanego powyżej.

zauważ, że nie szukamy; jest to niepotrzebne i nie uwzględnia adresów URL zaczynających się od

teraz, co by było, gdybyśmy chcieli zamiast tego stylować wszystkie kotwice, które prowadzą do, powiedzmy, zdjęcia?, W takich przypadkach poszukajmy końca łańcucha.

13. X

a { color: red;}

ponownie używamy symbolu wyrażeń regularnych, $, aby odnosić się do końca łańcucha. W tym przypadku szukamy wszystkich kotwic, które łączą się z obrazem—lub przynajmniej adresu URL, który kończy się .jpg. Pamiętaj, że nie przechwyci to obrazów GIF i PNG.

14. X

a { color: red;}

jak zrekompensować wszystkie różne typy obrazów?, Cóż, możemy utworzyć wiele selektorów, takich jak:

a,a,a,a { color: red;}

ale to boli i jest nieefektywne. Innym możliwym rozwiązaniem jest użycie własnych atrybutów. Co zrobić, jeśli dodamy własny atrybut data-filetype do każdej kotwicy, która łączy się z obrazem?

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

następnie, z tym hakiem na miejscu, możemy użyć standardowego selektora atrybutów, aby kierować tylko te kotwice.

a { color: red;}

15. X

 a { color: red;}a { border: 1px solid black;}

oto specjalny, który zrobi wrażenie na twoich znajomych. Niewiele osób wie o tej sztuczce., Symbol tyldy (~) pozwala nam kierować atrybut, który ma oddzieloną spacjami listę wartości.

idąc wraz z naszym niestandardowym atrybutem z numeru 15, powyżej, możemy utworzyć atrybutdata-info, który może otrzymać oddzieloną spacjami listę wszystkiego, co musimy zanotować. W takim przypadku odnotujemy Linki zewnętrzne i linki do obrazów-tylko na przykład.,

"<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

z tym znacznikiem w miejscu, teraz możemy kierować wszystkie tagi, które mają jedną z tych wartości, za pomocą~ trick selektora atrybutów.

nieźle, co?

Demo na żywo selektorów atrybutów

Pseudo selektorów

16. X:visited i X: link

a:link { color: red; }a:visited { color: purple; }

używamy pseudo-klasy:link do kierowania wszystkich tagów kotwicy, które nie zostały jeszcze kliknięte.,

alternatywnie, mamy również pseudo klasę:visited, która, jak można się spodziewać, pozwala nam stosować określone stylizacje tylko do tagów zakotwiczenia na stronie, które zostały kliknięte lub „odwiedzone”.

17. X: checked

input:checked { border: 1px solid black;}

ta pseudo klasa będzie kierować tylko na zaznaczony element interfejsu użytkownika—jak przycisk radiowy lub pole wyboru. To takie proste.

18. X: po

beforeIafter pseudo klasy są świetne., Wydaje się, że każdego dnia ludzie znajdują nowe i kreatywne sposoby skutecznego ich wykorzystania. Po prostu generują zawartość wokół wybranego elementu.

wiele z nich zostało po raz pierwszy wprowadzonych do tych klas, gdy napotkały hack clear-fix.

Ten hack używa pseudo klasy:after do dodania spacji po elemencie, a następnie wyczyszczenia go. Jest to doskonała sztuczka, aby mieć w Torbie Narzędziowej, szczególnie w przypadkach, gdy metoda overflow: hidden; nie jest możliwa.

aby dowiedzieć się więcej o tym, zajrzyj do mojej szybkiej porady na temat tworzenia cieni.,

zgodnie ze specyfikacją selektorów CSS3, technicznie powinieneś używać składni pseudo elementów dwóch dwukropków::. Aby jednak zachować zgodność, user-agent zaakceptuje również użycie jednego dwukropka.

19. X:hover

div:hover { background: #e3e3e3;}

No dalej. Znasz to. Oficjalna nazwa to „user action pseudo class”. Brzmi to myląco, ale tak naprawdę nie jest. chcesz zastosować konkretną stylizację, gdy użytkownik unosi się nad elementem? To załatwi sprawę!,

należy pamiętać, że starsze wersje programu Internet Explorer nie reagują, gdy pseudo Klasa:hover jest stosowana do niczego innego niż znacznik zakotwiczenia.

najczęściej będziesz używać tego selektora, gdy zastosujesz na przykładborder-bottom do zakotwiczenia znaczników, gdy najedziesz na nie.

a:hover { border-bottom: 1px solid black;}

Pro-tip:border-bottom: 1px solid black; wygląda lepiej niżtext-decoration: underline;.

20., X: not (selektor)

div:not(#container) { color: blue;}

pseudo Klasa negacji jest szczególnie pomocna. Załóżmy, że chcę wybrać wszystkie divs, z wyjątkiem tego, który ma identyfikatorcontainer. Powyższy fragment doskonale poradzi sobie z tym zadaniem.

lub, jeśli chciałem wybrać każdy pojedynczy element (nie zalecane) z wyjątkiem znaczników akapitu, możemy zrobić:

*:not(p) { color: green;}

21., X:: pseudoElement

p::first-line { font-weight: bold; font-size: 1.2em;}

możemy używać pseudoelementów (oznaczonych przez::) do stylizacji fragmentów elementu, takich jak pierwsza linia lub pierwsza litera. Należy pamiętać, że muszą one być stosowane do elementów blokowych, aby mogły być skuteczne.,

pseudoelement składa się z dwóch dwukropków: ::

Target pierwszą literę akapitu

p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px;}

Ten fragment jest abstrakcją, która znajdzie wszystkie akapity na stronie, a następnie podceluje tylko pierwszą literę tego elementu.

jest to najczęściej używane do tworzenia stylizacji gazetowej dla pierwszej litery artykułu.,

Target pierwszy wiersz akapitu

p::first-line { font-weight: bold; font-size: 1.2em;}

podobnie,::first-line pseudo element będzie, zgodnie z oczekiwaniami, stylować tylko pierwszą linię elementu.

„dla zgodności z istniejącymi arkuszami stylów, agenci użytkownika muszą również zaakceptować poprzedni dwukropek dla pseudo-elementów wprowadzonych w CSS poziomów 1 i 2 (mianowicie :first-line, :first-letter, :before I :after). Ta zgodność nie jest dozwolona dla nowych pseudoelementów wprowadzonych w tej specyfikacji.,”- W3C Selectors Specs

Live Demo Pseudo selektorów

Nth potomek i selektory typu

22. X: nth-child(n)

li:nth-child(3) { color: red;}

pamiętasz czasy, kiedy nie mieliśmy możliwości targetowania konkretnych elementów w stosie? nth-child pseudo Klasa rozwiązuje to!

należy pamiętać, żenth-child przyjmuje liczbę całkowitą jako parametr, ale nie jest to parametr zerowy. Jeśli chcesz wybrać drugi element listy, użyj li:nth-child(2).

możemy nawet użyć tego, aby wybrać zmienny zestaw dzieci., Na przykład, możemy zrobić li:nth-child(4n) aby wybrać co czwarty element listy.

23. X: nth-last-child (n)

li:nth-last-child(2) { color: red;}

Co by było, gdybyś miał ogromną listę przedmiotów w ul I potrzebowałeś tylko dostępu, powiedzmy, do ostatniego elementu od trzeciego do ostatniego? Zamiast robićli:nth-child(397), możesz zamiast tego użyć pseudo klasynth-last-child.

ta technika działa prawie identycznie jak numer 16 powyżej. Różnica polega na tym, że zaczyna się na końcu kolekcji i działa z powrotem.

24., X: nth-of-type (N)

ul:nth-of-type(3) { border: 1px solid black;}

zamiast wybierać child, musisz wybrać zgodnie z type elementu.

wyobraź sobie znaczniki zawierające pięć list nieuporządkowanych. Jeśli chcesz stylować tylko trzeciąul, a nie masz unikalnejid do podłączenia, możesz użyć pseudo klasynth-of-type(n). W powyższym fragmencie tylko trzeci ul będzie miał obramowanie wokół niego.

25., X: nth-last-of-type(n)

ul:nth-last-of-type(3) { border: 1px solid black;}

i tak, aby pozostać spójnym, możemy również użyć nth-last-of-type aby rozpocząć na końcu listy selektorów i wrócić do docelowego elementu.

26. X: first-child

ul li:first-child { border-top: none;}

ta pseudo Klasa strukturalna pozwala nam kierować tylko pierwsze dziecko rodzica elementu. Często używasz tego do usuwania obramowań z pierwszych i ostatnich elementów listy.

Załóżmy na przykład, że masz listę wierszy, a każdy z nich maborder-topIborder-bottom., Przy takim układzie, pierwszy i ostatni element w tym zestawie będzie wyglądał trochę dziwnie.

wielu projektantów stosuje klasyfirst Ilast aby to zrekompensować. Zamiast tego możesz użyć tych pseudo klas.

27. X: last-child

ul > li:last-child { color: green;}

przeciwieństwofirst-child,last-child spowoduje wyświetlenie ostatniej pozycji rodzica elementu.

last-child przykład selektora

zbudujmy prosty przykład, aby zademonstrować możliwe użycie tych klas., Stworzymy stylizowany element listy.

 <ul> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul>

dla znaczników nie ma nic specjalnego: wystarczy prosta lista.

oto CSS:

ta stylizacja ustawi tło, usunie domyślny padding przeglądarki naul I zastosuje obramowania do każdegoli, aby zapewnić trochę głębi.

aby dodać głębię do listy, zastosuj border-bottomdo każdego lito jest cień lub dwa ciemniejsze niż li’s kolor tła., Następnie zastosuj border-top, który jest o kilka odcieni jaśniejszy.

jedynym problemem, jak pokazano na powyższym obrazku, jest to, że obramowanie zostanie zastosowane do samej góry i dołu nieuporządkowanej listy—co wygląda dziwnie. Użyj pseudo klas :first-child I :last-child, aby to naprawić.

li:first-child { border-top: none;}li:last-child { border-bottom: none;}

proszę bardzo, to naprawia!

28., X: only-child

div p:only-child { color: red;}

prawdę mówiąc, prawdopodobnie nie będziesz zbyt często używał pseudo klasyonly-child. Niemniej jednak, jest dostępny, jeśli go potrzebujesz.

pozwala na kierowanie elementów, które są jedynym dzieckiem jego rodzica. Na przykład, odwołując się do powyższego fragmentu, tylko akapit, który jest jedynym dzieckiem div, będzie zabarwiony na Czerwono.

Załóżmy następujące znaczniki.,

<div><p> My paragraph here. </p></div><div> <p> Two paragraphs total. </p> <p> Two paragraphs total. </p></div>

w tym przypadku drugidivakapity nie będą ukierunkowane; tylko pierwszydiv. Gdy tylko zastosujesz więcej niż jedno dziecko do elementu, pseudo Klasa only-child przestaje działać.

29. X: only-of-type

li:only-of-type { font-weight: bold;}

ta pseudo Klasa strukturalna może być używana na kilka sprytnych sposobów. Będzie on skierowany do elementów, które nie mają rodzeństwa w swoim macierzystym kontenerze. Jako przykład, wybierzmy wszystkie ul s, które mają tylko jeden element listy.,

najpierw zadaj sobie pytanie, jak wykonałbyś to zadanie. Możesz zrobić ul li , ale to będzie ukierunkowane na wszystkie pozycje listy. Jedynym rozwiązaniem jest użycie only-of-type.

ul > li:only-of-type { font-weight: bold;}

30. X: first-of-type

pseudo Klasa first-of-type pozwala wybrać pierwsze rodzeństwo swojego typu.

Test

aby lepiej to zrozumieć, zróbmy test. Skopiuj następujące znaczniki do edytora kodu:

<div> <p> My paragraph here. </p> <ul> <li> List Item 1 </li> <li> List Item 2 </li> </ul> <ul> <li> List Item 3 </li> <li> List Item 4 </li> </ul> </div>

teraz, bez czytania dalej, spróbuj dowiedzieć się, jak celować tylko „pozycja listy 2”., Kiedy już to rozgryzłeś (lub poddałeś się), czytaj dalej.

rozwiązanie 1

istnieje wiele sposobów rozwiązania tego testu. Przejrzymy kilka z nich. Zacznijmy od użycia first-of-type.

ul:first-of-type > li:nth-child(2) { font-weight: bold;}

Ten fragment zasadniczo mówi, aby znaleźć pierwszą nieuporządkowaną listę na stronie, a następnie znaleźć tylko bezpośrednie dzieci, które są elementami listy. Następnie przefiltruj go do tylko drugiej pozycji listy w tym zestawie.

Rozwiązanie 2

inną opcją jest użycie sąsiedniego selektora.,

p + ul li:last-child { font-weight: bold;}

w tym scenariuszu znajdujemyul, który natychmiast przechodzi przez znacznikp, a następnie znajdujemy Ostatnie potomstwo elementu.

Rozwiązanie 3

możemy być tak nieznośni lub tak zabawni, jak chcemy z tymi selektorami.

ul:first-of-type li:nth-last-child(1) { font-weight: bold; }

tym razem pobieramy pierwszy ul na stronie, a następnie znajdujemy pierwszy element listy, ale zaczynając od dołu!,

Demo na żywo N-tych selektorów potomnych i typów

podsumowanie

Jeśli kompensujesz starsze przeglądarki, takie jak Internet Explorer 6, nadal musisz być ostrożny podczas korzystania z tych nowszych selektorów. Ale proszę, nie pozwól, aby zniechęciło cię to do nauki tego. Zrobiłbyś sobie wielką krzywdę. Pamiętaj, aby zapoznać się z listą zgodności przeglądarki. Alternatywnie możesz użyć doskonałego IE9 Deana Edwarda.skrypt js zapewniający obsługę tych selektorów w starszych przeglądarkach.,

Po drugie, podczas pracy z bibliotekami JavaScript, takimi jak popularne jQuery, zawsze staraj się używać tych natywnych selektorów CSS3 nad niestandardowymi metodami/selektorami biblioteki, jeśli to możliwe. Spowoduje to, że kod będzie szybszy, ponieważ silnik selektora może korzystać z natywnego parsowania przeglądarki, a nie z własnego.

świetnie, że spędzasz czas na nauce podstaw projektowania stron internetowych, ale jeśli potrzebujesz szybkiego rozwiązania, jeden z naszych gotowych szablonów CSS może być dobrym rozwiązaniem. Mamy również kilka elementów CSS premium do rozważenia.,

• CSS3
  12 eleganckich tabel cenowych CSS dla Twojego najnowszego projektu www
  Monty Shokeen
• Bootstrap 4
  18 najlepszych wtyczek Bootstrap 4
  Monty shokeen

darmowy dostęp do Envato Elements przez 1 miesiąc

wreszcie, oto specjalna oferta, która pomoże Ci zbudować profesjonalnie wyglądające witryny i aplikacje. Oprócz korzystania z selektorów CSS, dlaczego nie skorzystać z wysokiej jakości zdjęć stockowych, materiałów wideo, czcionek premium, grafiki, ilustracji i innych elementów?,

normalnie musiałbyś zapłacić za takie zasoby. Ale teraz możesz uzyskać dostęp do milionów zasobów kreatywnych dla swoich projektów programistycznych przez cały miesiąc, całkowicie bezpłatnie. Co więcej, otrzymujesz nieograniczoną liczbę pobrań, dzięki czemu możesz pobrać tyle, ile chcesz w ciągu tego miesiąca, i płacić tylko wtedy, gdy zdecydujesz się kontynuować!,

aby skorzystać z tej oferty, kliknij ten specjalny link do rejestracji lub wpisz poniższy kod na stronie rejestracji:

elements_cont_tuts-freemonth1-4bwkbp

nie czekaj zbyt długo—oferta jest ważna tylko przez ograniczony czas!