CSS RuleTet

„W CSS zestaw reguł jest zdefiniowany jako zasada, którą przestrzegaliśmy, aby dać styl selektorów. Możemy użyć nazwy selektora, a następnie zadeklarować ją za pomocą różnych właściwości. Możemy użyć jednego lub więcej selektorów w naszym kodzie CSS i użyć wielu właściwości wraz z ich wartościami w części deklaracji. Kiedy używamy dowolnej właściwości CSS, musimy przypisać pewne wartości do tych właściwości zgodnie z naszym wyborem. Jeśli jest dostępne jakieś słowo kluczowe, którego używamy zamiast wartości, przypisamy również te słowa kluczowe do tej właściwości. Krótko mówiąc, używamy nazwy selektora, a następnie umieszczamy kręcone aparaty ortodontyczne, aw tych kręconych aparaty ortodontyczne używamy różnych właściwości stylizacji, które chcemy zastosować do wybranego selektora, a następnie nadać wartość tym właściwościom. Wyjaśnimy ten zestaw reguł w CSS, przestrzegając tej reguły w naszym kodzie CSS tutaj."

Składnia

Selektor
Wartość nieruchomości;

Przykład 1

Aby przestrzegać tego zestawu reguł w naszym kodzie CSS, musimy napisać kod w HTML i stylizować te elementy HTML w pliku CSS, przestrzegając reguły w naszym kodzie CSS. Musimy utworzyć nowy plik, a następnie, po wybraniu HTML jako języka, rozpocznij kodowanie w tym pliku. Możesz także użyć notatnika lub dowolnego edytora tekstu do kompilacji tych kodów.

Teraz zadeklarujemy nagłówek 1 i 2 za pomocą tagów i utworzyć jeden prosty akapit poniżej tych nagłówków. Tworzymy te nagłówki i akapity w treści HTML, a po zapisaniu przejdziemy do pliku CSS w celu zastosowania nieruchomości do tych nagłówków i akapitów, postępując zgodnie z regułą. Musimy połączyć plik CSS do tego pliku, aby wszystkie właściwości, których użyjemy w pliku CSS, zostały zastosowane tutaj do niniejszego akapitu i nagłówków.

Zamierzamy przestrzegać zasady stylizacji tych nagłówków i akapitów; Najpierw używamy nazwy selektora, a następnie umieszczamy kręcone klamry zgodnie z regułą. Następnie musimy podać nazwę właściwości, której chcemy użyć. Tutaj „H1” jest selektorem, a wewnątrz kręconych aparatów ortodontycznych mamy właściwość „kolor”, która służy do zmiany koloru czcionki na ten kolor, który tutaj umieszczamy jako wartość dla tej właściwości. Będziemy używać koloru „białego” jako koloru czcionki, a następnie zmienimy „rodzinę czcionki”, ustalając „Times New Roman” jako wartość tej „rodziny czcionki."

Jak wybraliśmy „biały” kolor dla czcionki, więc musimy zmienić kolor tła. W tym celu używamy właściwości „koloru tła” i ustawiamy „czarny” jako wartość tej właściwości. Tutaj uzupełniamy styl „H1” i zamykamy kręcone aparaty ortodontyczne. Teraz, aby zastosować styl na „H2”, ponownie używamy selektora, którym jest „H2”, a następnie podajemy właściwość wewnątrz kręconych aparatów ortodontycznych. Ustawiliśmy „Czarną” „Czarną” i „rodzinę czcionki”, której tu używamy i dajemy „arial” jako jej wartość. Tak jak tutaj używamy czarnej czcionki, więc ustawiamy właściwość „koloru tła” na „biały” i zamykamy tutaj aparaty ortodontyczne „H2”.

Potem pojawia się akapit, więc użyjemy „P” jako selektora, a następnie zadeklarować właściwości tutaj do akapitu. Ustawiamy rozmiar czcionki akapitu za pomocą właściwości „wielkości czcionki”, a następnie ustawiamy dla tego wartość „15px”. Następnie zmień „rodzinę czcionki” tego akapitu na „Calibri”, który ustawia prostą czcionkę akapitu na czcionkę „Calibri”. Chcemy również zmienić styl czcionki, więc do tego używamy właściwości „w stylu czcionki” i używamy tutaj „słowa kluczowego”, która jest „kursywa.„Nasza czcionka akapitowa pojawi się w„ Italic ”„ Font w stylu czcionki.”Następnie mamy właściwość„ Was-W-Wight ”i używamy słowa kluczowego„ Bold ”, aby zmienić czcionkę na odważny styl. Kolor czcionki akapitów jest ustawiany za pomocą właściwości „kolor” do „czerwonego."

Dane wyjście pokazuje, że wszystkie właściwości, których użyliśmy w pliku CSS, są stosowane do tekstu, który piszemy w kodzie HTML. Styl czcionki, kolor i kolor tła, wszystkie właściwości, których używamy wszystkich renderowanych tutaj, na wyjściu. Jeśli nie przestrzegamy reguły, te właściwości stylizacji nie są stosowane do naszego tekstu lub dokumentu.

Przykład nr 2

Tutaj, w tym kodzie HTML, na początku tworzymy „div”, wewnątrz ciała. Następnie stworzymy dwa różne nagłówki. Po tych nagłówkach mamy również akapit w tym kodzie. Wszystkie te nagłówki i akapity są napisane w „Div.„Zamykamy„ div ”na końcu kodu przed zamknięciem znacznika„ ciała ”.

Teraz możesz zobaczyć, jak zmieniamy styl tych wszystkich nagłówków, div i akapitów. Ponownie postępujemy zgodnie z zasadą zastosowania stylu. Po pierwsze, zmieniamy „kolor” czcionki i ustawiamy jej wartość jako „pomarańczowy.”I użyj innej właściwości do zmiany rodziny czcionek za pomocą właściwości„ rodziny czcionki ”i ustanawianie nazwy„ Algierian ”jako jej wartości.

Następnie po prostu zmieniamy kolor drugiego nagłówka za pomocą właściwości „kolor” i ustawiamy kolor drugiego nagłówka na „niebieski.„Mamy również akapit, więc ustawiliśmy jego„ kolor tła ”na„ różowy.”Następnie właściwość„ kolor ”zmienia kolor czcionki na„ czarny ”i wartość„ 15px ”do ustawiania„ rozmiaru czcionki.„Chcemy również renderować je na środku strony, więc w tym celu używamy właściwości„ Wylicznia tekstu ”i ustawiamy słowo kluczowe„ Center ”, która ustawia wszystkie te selektory na„ Centrum ”, a podczas używania używamy Aby zastosować ten „align tekstowy” na wszystkich selektorach, dlatego używamy „ciała” i wewnątrz tego „ciała” używamy tej właściwości.

W wyjściu widać, że wszystkie nagłówki i akapity są wyrównane w centrum, a wszystkie właściwości, które definiujemy powyżej, są stosowane tutaj. W wyjściu możesz łatwo zauważyć różnicę w tekście, ponieważ używamy różnych właściwości dla wszystkich selektorów.

Przykład nr 3

W naszym trzecim i ostatnim przykładzie utworzymy trzy nagłówki, jeden akapit, a także listę, która jest listą nieopisaną, i zrobimy trochę stylizacji na wszystkich tych wszystkich.

Najpierw zastosujemy styl do „H1”. Nazwa selektora „H1” i używamy tutaj różnych właściwości. Ustawiamy jego kolor, używając „Color: Green”, a następnie używając „rodziny czcionki”, która jest właściwością, i używasz do tego „Algierskiego”. Potem pojawia się „Kolor tła”, który ustalamy jako „żółty.”Ponadto, wyrównaj ten nagłówek do„ centrum ”za pomocą właściwości„ Aligację tekstu ”i nadaj styl„ kursywę ”temu„ H1 ”.

Teraz zmienimy styl „H2” w taki sam sposób jak „H1”. „Kolor” jest tutaj ustawiony jako „pomarańczowy”, a „rodzina czcionki” jest dla tego „arial”. „Kolor tła” jest „różowy” i jest wyrównany „środkowy”. Mamy również akapit, więc teraz użyjemy tego „P” jako selektora; Właściwość, której używamy do tego, jest właściwość „wielkości czcionki”, a my ustawiamy ją jako „15px”, a „font-family” to „Calibri”, a „masa czcionki”, której używamy, jest „odważne."

Ponieważ mamy listę w tym przykładzie, używamy tego selektora „UL” i stosujemy style. Ustawiliśmy jego „kolor”, który określa kolor tekstu na „fioletowy”, a „rozmiar czcionki” tej listy to „20px” i „kursywa” w „stylu czcionki."

W wyjściu kolor tła pierwszego nagłówka różni się od drugiego nagłówka, a rodzina czcionek jest zmieniana. Wtedy rodzina czcionek, kolor i styl akapitów i list są również różne. Używamy różnych właściwości dla wszystkich selektorów, więc oto wyjście, wszystkie te właściwości są stosowane.

Wniosek

W tym samouczku omówiliśmy zestaw reguł w CSS. Napisaliśmy ten samouczek, aby wyjaśnić, czym jest zestaw reguł i jak przestrzegamy tego zestawu reguł w CSS w celu zastosowania różnych nieruchomości. Wyjaśniliśmy, że najpierw musimy użyć nazwy selektora, a następnie otworzyć kręcony wspornik; Następnie, po otwarciu tego kręconego wspornika, umieszczamy nazwę właściwości, z której chcemy użyć, a następnie ustawiamy jej wartość, a także używamy słowa kluczowego, jeśli jest dostępne dla tej właściwości. Omówiliśmy, że musimy przestrzegać tej zasady w CSS. Po poznaniu tej koncepcji z tego samouczka, użyjesz właściwości w swoim kodzie CSS.