Zajęcia CSS

CSS to element języka, który jest dodawany do innego języka projektowania front-end, HTML, aby utworzyć stronę internetową lub stronę internetową. W przypadku wewnętrznej i zewnętrznej deklaracji CSS musimy zadeklarować identyfikatory lub klasy z funkcjami, które chcemy zastosować do zawartości HTML.

Klasa CSS:

W CSS lub innym języku programowania zajęcia odgrywają ważną rolę, gdy mówimy o specyfikacji dowolnego elementu. W CSS tworzone są klasy w celu ogłoszenia kilku stylów i efektów na elementy HTML. Wszystkie właściwości CSS są zapisane wewnątrz ciała klasy, przypisując wartości do właściwości. Na przykład:

.Nazwa klasy
Nazwa_or: wartość;

Klasa jest zadeklarowana kropką i nazwą klasy. Do tych klas dostępu jest zawartość HTML, gdy nazwa klasy jest zapisywana wewnątrz konkretnych tagów- podobnie jak dla jednej z treści HTML, takich jak akapit < p class= "class_name"> To jest akapit

wymieniając nazwę wszystkie cechy klasy są stosowane do tej treści. Głównym celem tworzenia tej klasy jest dopuszczenie wszystkich cech i stylów.

Zajęcia zagnieżdżone:

Podobnie jak prosta klasa, zagnieżdżone klasy są również tworzone podczas projektowania stron internetowych. Zjawisko zagnieżdżone nie jest nieznane również programistom i projektantom, ponieważ termin ten dotyczy stwierdzeń IF-Else, na pętle itp. Deklaracja klasy zagnieżdżonej CSS jest w jakiś sposób podobna do zagnieżdżonych pętli. Na klasę jest nie tylko klasa, ale także znaczniki HTML, na które ma wpływ termin „klasy zagnieżdżone”. Tag treści HTML jest kiedyś zadeklarowany z nazwą klasy. Następnie, wewnątrz tego znacznika, drugi znacznik „samej” zawartości HTML jest zadeklarowany inną nazwą klasy. Ostatecznie oba znaczniki są zamknięte zbiorowo. To sprawia, że ​​pierwszy znacznik zewnętrzny i drugi znacznik jest wewnętrznym znacznikiem. Możemy używać więcej niż jednego wewnętrznego znacznika jednocześnie. Po wymienieniu nazwy klasy w zewnętrznych znacznikach, wszystkie wewnętrzne znaczniki innych zawartości HTML nie będą musiały dalej dodawać żadnej nazwy klasy.

tekst

tekst

To była deklaracja nazwy klasy wewnątrz ciała HTML. Teraz zobaczymy, w jaki sposób klasy są zadeklarowane w sekcji głównej. Najpierw klasa zewnętrznego znacznika HTML jest zadeklarowana, a następnie wewnętrzna.

To jest jakoś relacja z klasy rodzic-dziecko. Ponieważ na przykład zewnętrzny znacznik HTML ma klasę „klasę 1”. Jest zadeklarowany wraz z treścią akapitu, takim jak:

.Klasa 1 P

Nie możemy bezpośrednio korzystać z klasy akapitów. Teraz rozważ wewnętrzny tag DIV o innej klasie „klasa 2”. W przypadku zagnieżdżonej klasy dodamy klasę obu tagów. Zewnętrzna i wewnętrzna div.

.Class1 Class2 P

Jest to konieczne, aby określić zawartość HTML do swojej klasy i do kogo należy. Teraz spróbujemy kilku przykładów, aby opracować tę koncepcję.

Przykład 1:

W tym przykładzie dodaje się prosty kolor nadwozia za pomocą znacznika HTML. Następnie używany jest znacznik DIV, który ma klasę CSS o nazwie kontener.

Wewnątrz tej div jest używany do dodania prostego nagłówka. Akapit służy do dodania prostego zdania. Oba znaczniki nie towarzyszy klasa CSS, ponieważ będą one bezpośrednio zaprojektowane przez nazwę kontenera Div.

Teraz wewnątrz znacznika div, przed zamknięciem tego div, dodamy kolejny div z nową nazwą klasy CSS.

Ten div ponownie zawiera zarówno nagłówek, jak i akapity. Zamknij div, pierwszy znacznik zamykający dotyczy wewnętrznej div, a drugi znacznik zamykający jest dla zewnętrznej div.

Zamknij tag ciała. W stylu znacznika głowy najpierw ogłosimy klasę pierwszego „kontenera” DIV. Do nagłówka klasy kontenera jest dostępny w nazwie klasy zewnętrznej div.

.kontener H1
Rozmiar czcionki: 24px;
Kolor: Cyan;

Kolor czcionki i rozmiar czcionki są nakładane na nagłówek. Podobnie akapit jest również stosowany przez CSS o tym samym rozmiarze czcionki i właściwości kolorów. Jeśli chodzi o opis klasy dla wewnętrznej div, zawsze używamy zewnętrznej klasy div wraz z klasą Div, a następnie elementów wewnątrz Div. Ma to na celu poprawność dostępu do zawartości HTML. Nie możemy bezpośrednio uzyskać dostępu do klasy w Div tylko po jego nazwie, podobnie jak klasa rodzic-dziecko w dziedzictwie. Najpierw piszemy nazwisko klasy nadrzędnej, a następnie klasa dziecięca. W ten sposób każda dwuznaczność dotycząca kilku rodziców i więcej niż jednego dziecka zostanie usunięta.

.pojemnik .MyClass p
Rozmiar czcionki: 24;
Kolor: Lightgreen;

Zamknij wszystkie otwarte tagi i zapisz kod w pliku edytora tekstu jako rozszerzenie HTML. To rozszerzenie pozwoli na wyświetlanie strony internetowej w przeglądarce.

Podczas egzekucji zobaczysz, że czarna strona internetowa zostanie utworzona ze wszystkimi nagłówkami i akapitami z tym samym wyrównaniem i hierarchią, ponieważ zostały one zadeklarowane ze wszystkimi efektami CSS. Wynika to z faktu, że arkusz stylów zawiera właściwość CSS klasy w tej samej sekwencji, co klasy zdefiniowane w znacznikach HTML.

Przykład 2:

Ten przykład dotyczy użycia listy w kodzie HTML. Ten sam div z pojemnikiem klasowym jest używany jako zewnętrzna div dla zagnieżdżonych klas. Do zawartości zewnętrznego div używane są proste znaczniki nagłówka i akapitowe. Następnie wewnętrzna div jest deklarowana w tej samej klasie. Ta Div zawiera z nią listę nieuzasadnioną HTML.

Po tej div, kolejny div wewnątrz drugiego div jest używany do tworzenia zagnieżdżonych klas. Ta Div zawiera inną nazwę klasy, aby poprawnie zidentyfikować.

< div class = "MyClass1" >

Wewnątrz tej div użyliśmy nagłówka i listy nieuporządkowanej. Teraz zobaczmy sekcję CSS. Wszystkie klasy i właściwości są zadeklarowane w taki sam sposób, jak w poprzednim przykładzie. Tylko dodatek to klasa najbardziej wewnętrznej lub 3. Div.

.pojemnik .MyClass1 h1
Rozmiar czcionki: 20px;
Kolor biały;

Zapisz kod i wykonaj plik.

Zobaczysz, że każda div i jego elementy są stosowane z efektami dostarczonymi w klasach CSS.

Wniosek

Klasy zagnieżdżone CSS to podejście do hierarchicznego deklarowania klas powodujących zewnętrzne i wewnętrzne zjawisko znaczników. Upewnij się, że znaczniki HTML, na których mamy wdrożyć klasy zagnieżdżone CSS, są tego samego typu, na przykład. Jeśli hierarchia deklaracji klasowej zostanie zmieniona lub sekwencja zostanie zakłócona, trudno będzie zastosować właściwości CSS do zawartości HTML w klasie zagnieżdżonej. Opracowaliśmy ten temat, używając dwóch przykładów, jednego z pojedynczą zawartością wewnętrzną, podczas gdy drugi przykład zawiera dwie zawartość wewnętrzna HTML.