Menu

30+ popularnych pytań i odpowiedzi do wywiadów CSS

  • Główny
  • Inny
  • 30+ popularnych pytań i odpowiedzi do wywiadów CSS

top 30 popular css interview questions

Wypróbuj Nasz Instrument Do Eliminowania Problemów

Lista najpopularniejszych pytań do wywiadów CSS z odpowiedziami:

Plik CSS pytania obejmujące prawie wszystkie podstawowe i zaawansowane kategorie CSS zostały wyjaśnione na przykładach.

CSS jest jedną z najważniejszych funkcji tworzenia stron internetowych. Jest to język, za pomocą którego możemy opisać wygląd stron internetowych.

Dlatego konieczne jest ukrycie wszystkich podstawowych i zaawansowanych części CSS. Aby zostać dobrym twórcą stron internetowych i pomyślnie przejść rozmowę kwalifikacyjną z twórcą stron internetowych, musisz nauczyć się CSS.

Pytania do wywiadu CSS (1)

Często zadawane pytania do wywiadów CSS

Poniżej znajduje się lista najczęściej zadawanych pytań CSS podczas wywiadów i odpowiedzi w prostych słowach, aby ułatwić zrozumienie.

Zaczynajmy!!

Pytanie 1) Co to jest CSS?

Odpowiedź: CSS określa styl strony HTML. Jest to język, za pomocą którego możemy ustawić zachowanie strony HTML. Opisuje, w jaki sposób zawartość HTML będzie wyświetlana na ekranie.

CSS kontroluje układ kilku stron internetowych HTML. CSS jest określany jako kaskadowy arkusz stylów.

P # 2) Nazwij wszystkie moduły, które są używane w aktualnej wersji CSS.

Odpowiedź: Jak podano poniżej, w CSS jest kilka modułów:

  • Selektory
  • Model pudełkowy
  • Tło i granice
  • Efekty tekstowe
  • Transformacje 2D / 3D
  • Animacje
  • Układ wielu kolumn
  • Interfejs użytkownika.

Q # 3) Rozróżnij CSS2 i CSS3.

Odpowiedź: Różnice między CSS2 i CSS3 są następujące:

  • CSS3 jest podzielony na dwie różne sekcje zwane modułami. Natomiast w CSS2 wszystko trafia do jednego dokumentu ze wszystkimi zawartymi w nim informacjami.
  • Moduły CSS3 są obsługiwane prawie w każdej przeglądarce, az drugiej strony moduły CSS i CSS2 nie są obsługiwane w każdej przeglądarce.
  • W CSS3 zobaczymy, że wiele cech związanych z grafiką zostało wprowadzonych, takich jak Border-radius lub box-shadow, flexbox.
  • W CSS3 użytkownik może precyzyjnie określić wiele obrazów tła na stronie internetowej, używając właściwości, takich jak obraz tła, położenie tła i style powtarzania tła.

Q # 4) Cytuj różne typy CSS.

Odpowiedź: Istnieją trzy typy CSS, jak wspomniano poniżej:

  • Zewnętrzny: Są one zapisane w osobnych plikach.
  • Wewnętrzny: Są one wymienione u góry dokumentu z kodem strony internetowej.
  • W treści: Są one napisane tuż obok tekstu.

P # 5) Dlaczego zewnętrzny arkusz stylów jest przydatny?

Odpowiedź: Zewnętrzny arkusz stylów jest bardzo przydatny, ponieważ zapisujemy wszystkie kody stylów w jednym pliku i można go używać w dowolnym miejscu, po prostu odwołując się do łącza do tego zewnętrznego pliku arkusza stylów.

Jeśli więc dokonamy jakichkolwiek zmian w tym zewnętrznym pliku, to zmiany te można również zaobserwować na stronie internetowej. Można więc powiedzieć, że jest bardzo przydatny i ułatwia pracę przy większych plikach.

P # 6) Jakie są zastosowania osadzonego arkusza stylów ?

Odpowiedź: Osadzony arkusz stylów daje nam przywilej definiowania stylów w jednym miejscu w dokumencie HTML.

Możemy wygenerować wiele klas za pomocą osadzonego arkusza stylów do użycia na wielu typach tagów na stronie internetowej, a także nie jest wymagane żadne dodatkowe pobieranie w celu zaimportowania informacji.

Przykład:

p { font-family: georgia, serif; font-size: x-large; color:#ff9900; } a:hover { color: LimeGreen; text-decoration: none; }

Embedded style sheet gives us the privilege to define styles at one place in a HTML document. We can generate multiple classes using embedded style sheet to use on multiple tag types a web page and also there is no extra downloading required importing the information.

osadzony

Q # 7) Jak używać selektora CSS?

Odpowiedź: Używając selektora CSS, możemy wybrać treść, którą chcemy stylizować, abyśmy mogli powiedzieć, że jest pomostem między arkuszem stylów a plikami HTML.

Składnia selektora CSS to „wybierz” elementy HTML utworzone na podstawie ich identyfikatora, klasy, typu itp.

Q # 8) Wyjaśnij pojęcie Tweening.

Odpowiedź: Tweening to proces, w którym tworzymy klatki pośrednie między dwoma obrazami, aby uzyskać wygląd pierwszego obrazu, który przekształca się w drugi obraz.

Służy głównie do tworzenia animacji.

Q # 9) Zdefiniuj skrypty obrazów CSS.

Odpowiedź: Skrypty obrazów CSS to grupa obrazów umieszczonych w jednym obrazie. Zmniejsza czas ładowania i liczbę żądań do serwera podczas wyświetlania wielu obrazów na jednej stronie internetowej.

P # 10) Wyjaśnij termin Elastyczne projektowanie witryn internetowych.

Odpowiedź: Jest to metoda, w której projektujemy i rozwijamy stronę internetową zgodnie z działaniami i warunkami użytkownika, które są oparte na różnych elementach, takich jak rozmiar ekranu, przenośność strony internetowej na różnych urządzeniach itp. Odbywa się to za pomocą różne elastyczne układy i siatki.

P # 11) Co to są liczniki CSS?

Odpowiedź: Liczniki CSS to zmienne, które mogą być zwiększane przez reguły CSS, które inspektor śledzi, ile razy zmienna została użyta.

P # 12) Jaka jest specyficzność CSS?

Odpowiedź: Specyfika CSS to ocena lub ranga, która decyduje, która deklaracja stylu ma zostać użyta do elementu. (*) ten uniwersalny selektor ma niską specyficzność, podczas gdy selektory ID mają wysoką specyficzność.

Istnieją cztery kategorie w CSS, które autoryzują poziom szczegółowości selektora.

  • Styl inline
  • Identyfikatory
  • Klasy, atrybuty i pseudoklasy.
  • Elementy i pseudoelementy.

P # 13) Jak możemy obliczyć specyficzność?

Odpowiedź: Aby obliczyć specyficzność, zaczniemy od 0, następnie musimy dodać 1000 dla każdego ID i musimy dodać 10 do atrybutów, klas lub pseudoklas z każdą nazwą elementu lub pseudoelementu, a później musimy dodać do nich 1 .

Przykład:

h2 #content h2

heading

P # 14) Jak zrobić zaokrąglony róg za pomocą CSS?

Odpowiedź: Możemy zrobić zaokrąglony róg, używając właściwości „border-radius”. Możemy zastosować tę właściwość do dowolnego elementu.

Przykład:

#rcorners1 { border-radius: 25px; background: #715751; padding: 20px; width: 200px; height: 150px; }

Rounded corners for an element with a specified background color:

Rounded corners!

border-radius

P # 15) W jaki sposób dodasz obrazy obramowań do elementu HTML?

Odpowiedź: Możemy ustawić obraz tak, aby był używany jako obraz-obramowania obok elementu, używając właściwości CSS „border-image”.

Przykład:

#borderimg { border: 15px solid transparent; padding: 20px; border-image: url(border.png) 30 round; }

P # 16) Co to są gradienty w CSS?

Odpowiedź: Jest to właściwość CSS, która umożliwia wyświetlanie płynnej transformacji między dwoma lub więcej niż dwoma określonymi kolorami.

W CSS występują dwa rodzaje gradientów. Oni są:

  • Gradient liniowy
  • Gradient radialny

P # 17) Co to jest CSS flexbox?

Odpowiedź: Pozwala zaprojektować elastyczną, responsywną strukturę układu bez używania jakichkolwiek właściwości pływających lub pozycjonujących CSS. Aby korzystać z CSS flexbox, musisz wstępnie zdefiniować kontener flex.

Przykład:

.flex-container { display: flex; background-color: #f4b042; } .flex-container > div { background-color: #d60a33; margin: 10px; padding: 20px; font-size: 30px; } 1 2 3

Example of flex box.

flexbox

Q # 18) Napisz wszystkie właściwości flexbox.

Odpowiedź: Istnieje kilka właściwości modułu flexbox, które są używane na stronie HTML.

Oni są:

  • flex-direction
  • flex-wrap
  • elastyczny przepływ
  • justify-content
  • align-items
  • align-content

P # 19) Jak wyrównać obraz w pionie w podziale obejmującym pionowo całą stronę?

wyrównaj obraz w pionie w podziale

Odpowiedź: Można to zrobić, używając składni verticle-align: middle w elemencie, a nawet możemy powiązać dwa rozpiętości tekstu z inną rozpiętością, a następnie musimy użyć verticle-align: middle w treści #icon.

P # 20) Jaka jest różnica między dopełnieniem a marginesem?

Odpowiedź: W CSS margines jest właściwością, dzięki której możemy stworzyć przestrzeń wokół elementów. Możemy nawet stworzyć przestrzeń do zewnętrznych określonych granic.

W CSS mamy następującą właściwość margin:

  • margin-top
  • margin-right
  • margin-bottom
  • Margines lewy

Właściwość Margin ma określone wartości, jak pokazano poniżej.

  • Auto - Korzystanie z tej przeglądarki właściwości oblicza margines.
  • Długość - Ustawia wartości marginesów w px, pt, cm itp.
  • % - Ustawia% szerokości elementu.
  • Dziedzicz - Dzięki tej właściwości możemy dziedziczyć właściwość margin z elementu nadrzędnego.

W CSS dopełnienie to właściwość, dzięki której możemy wygenerować przestrzeń wokół zawartości elementu, a także wewnątrz dowolnego znanego obramowania.

Wypełnienie CSS ma również właściwości takie jak,

  1. Top z wyściółką
  2. Padding-right
  3. Wypełnienie na dole
  4. Padding-left

Wartości ujemne nie są dozwolone w dopełnieniu.

div { padding-top: 60px; padding-right: 40px; padding-bottom: 50px; padding-left: 70px; }

P # 21) Jakie jest zastosowanie modelu pudełkowego w CSS?

Odpowiedź: W CSS model pudełkowy to pudełko, które wiąże wszystkie elementy HTML i zawiera takie funkcje, jak marginesy, obramowanie, dopełnienie i rzeczywista zawartość.

Korzystając z modelu pudełkowego, uzyskamy uprawnienia do dodawania granic dookoła elementów, a także będziemy mogli zdefiniować przestrzeń między elementami.

Q # 22) Jak możemy dodać ikony do strony internetowej?

Odpowiedź: Możemy dodawać ikony do strony HTML, używając biblioteki ikon, takiej jak font-awesome.

Musimy dodać nazwę danej klasy ikon do dowolnego wbudowanego elementu HTML. ( lub). Ikony w bibliotekach ikon to skalowalne wektory, które można dostosować za pomocą CSS.

P # 23) Co to jest pseudoklasa CSS?

Odpowiedź: Jest to klasa, która służy do definiowania specjalnego stanu elementu HTML.

Ta klasa może być używana przez stylizowanie elementu, gdy użytkownik go podglądał, a także może stylizować element HTML, gdy uzyska fokus.

selector:pseudo-class { property:value; }

Q # 24) Wyjaśnij pojęcie pseudoelementów w CSS.

Odpowiedź: Jest to cecha CSS, która służy do stylizowania danych części elementu.

Na przykład ,możemy stylizować pierwszą literę lub linię elementu HTML.

selector::pseudo-element { property:value; }

P # 25) Co to jest krycie CSS?

Odpowiedź: Jest to właściwość, która rozwija przejrzystość elementu.

Dzięki tej właściwości możemy przeźroczystość obrazu, który może przyjmować wartości od 0,0 do 1,0. Jeśli wartość jest niższa, obraz jest bardziej przezroczysty. IE8 i wcześniejsze wersje przeglądarki mogą przyjmować wartości od 0-100.

img { opacity: 0.6; filter: alpha(opacity=60); /* For IE8 and earlier */}

Q # 26) Napisz wszystkie stany pozycji używane w CSS.

Odpowiedź: W CSS istnieją cztery stany pozycji, jak podano poniżej:

  • Statyczny (domyślny)
  • Krewny
  • Naprawiony
  • Absolutny

P # 27) Co to są paski nawigacji w CSS?

Odpowiedź: Używając pasków nawigacji, możemy zmienić zwykłą stronę HTML w specyficzną dla użytkownika i bardziej dynamiczną stronę internetową. Zasadniczo jest to lista linków, stąd użycie

    i
  • elementy mają sens.

    ul { list-style-type: none; margin: 0; padding: 0; }

    P # 28) Jakie są różnice między względnymi a bezwzględnymi w CSS?

    Odpowiedź: Główną różnicą między względnym a absolutnym jest to, że „względny” jest używany dla tego samego znacznika w CSS i oznacza to, że jeśli napiszemy po lewej stronie: 10 pikseli, wypełnienie zostanie przesunięte do 10 pikseli po lewej stronie, podczas gdy wartość bezwzględna będzie całkowicie względna do statyczny rodzic.

    Oznacza to, że jeśli napiszemy left: 10px, wynik będzie oddalony o 10px od lewej krawędzi elementu nadrzędnego.

    Q # 29) Zdefiniuj „ważne” deklaracje używane w CSS.

    Odpowiedź: Ważne deklaracje są definiowane jako ta deklaracja, która ma większe znaczenie niż zwykła deklaracja.

    Podczas wykonywania te deklaracje zastępują deklarację, która ma mniejsze znaczenie.

    Na przykład, jeśli dwóch użytkowników ma ważną deklarację, jedna z deklaracji zastąpi deklarację innego użytkownika.

    Na przykład:
    Treść {tło: # FF00FF! Ważne; kolor niebieski}

    zwracanie tablicy z metody w java

    W tym przypadku tło ma większą wagę niż kolor.

    Q # 30) Zdefiniuj różne metody kaskadowania, które mogą być używane w porządku kaskadowym.

    Odpowiedź: Porządek kaskadowy sam w sobie jest metodą sortowania, która pozwala na wiele innych metod sortowania:

    a) Sortuj według pochodzenia: Istnieje kilka reguł, które mogą zapewnić alternatywny sposób zdefiniowany jako:

    • Normalna waga arkusza stylów określonego dostawcy zostanie zastąpiona zwiększoną wagą arkusza stylów użytkownika.
    • Reguły arkusza stylów określonego użytkownika zostaną zastąpione przez normalną szerokość arkusza stylów dostawcy.

    b) Sortuj według specyfiki selektora: Mniej szczegółowy selektor został zastąpiony przez bardziej szczegółowy selektor.

    Na przykład , Selektor kontekstowy jest mniej dokładny w porównaniu z selektorem identyfikatora, który jest bardziej szczegółowy, iz tym selektorem kontekstowym jest zastępowany przez selektor identyfikatora.

    c) Sortuj według określonej kolejności: Dzieje się tak w scenariuszu, w którym dwa selektory mają taką samą wagę i inne właściwości niż specyfikacja, które zostaną uznane za nadpisane.

    Przykład:

    Wszystkie inne style zostaną zastąpione, jeśli atrybut stylu zostanie użyty do stylu wbudowanego.

    Ponadto, jeśli element łącza jest używany jako styl zewnętrzny, nadpisuje importowany styl.

    Q # 31) Rozróżnij między elementem śródliniowym i blokowym.

    Odpowiedź: Element wbudowany nie ma elementu do ustawiania szerokości i wysokości, a także nie ma końca wiersza.

    Przykład: em, silny itp.

    Specyfikacja elementu blokowego:

    • Oni mają przerwę w linii.
    • Określają szerokość poprzez ustawienie pojemnika, a także umożliwiają ustawienie wysokości.
    • Może również zawierać element, który występuje w elemencie wbudowanym.

    Przykład:

    Szerokość i wysokość
    max-width i max-height
    min-width i min-height
    hi (i = 1-6) - element nagłówka
    p- Element akapitu.

    P # 32) Jak pojęcie dziedziczenia jest stosowane w CSS?

    Odpowiedź: Dziedziczenie to koncepcja, w której klasa potomna odziedziczy właściwości swojej klasy nadrzędnej. Jest to pojęcie, które jest używane w wielu językach i jest łatwym sposobem ponownego zdefiniowania tej samej właściwości.

    Jest używany w CSS do definiowania hierarchii od najwyższego do najniższego poziomu. Dziedziczone właściwości mogą zostać zastąpione przez klasę podrzędną, jeśli dziecko używa tej samej nazwy.

    Przykład:

    Treść {font-size: 15pt;}

    Kolejna definicja jest definiowana w klasie potomnej

    Treść {font-size: 15pt;}
    H1 {font-size: 18pt;}

    Cały tekst akapitu zostanie wyświetlony przy użyciu właściwości i zostanie zdefiniowany w treści z wyjątkiem stylu H1, który będzie wyświetlać tekst tylko czcionką 18.

    Q # 33) Rozróżnij identyfikator i klasę.

    Odpowiedź: Zarówno identyfikator, jak i klasa są używane w HTML i przypisują wartość z CSS.

    Poniżej przedstawiamy różnice:

    • Identyfikator jest rodzajem elementu, który jednoznacznie przypisuje nazwę do konkretnego elementu, podczas gdy klasa ma element z pewnym zestawem właściwości, które mogą być użyte dla całego bloku.
    • Id może być używany jako element, ponieważ może go jednoznacznie identyfikować, podczas gdy klasa jest również zdefiniowana w celu blokowania elementów i stosuje zbyt wiele tagów, gdziekolwiek jest używany.
    • ID zapewnia ograniczenie do używania jego właściwości do jednego określonego elementu, podczas gdy w klasie dziedziczenie jest stosowane do określonego bloku lub grupy elementu.

    Wniosek

    Ta lista pytań i odpowiedzi do wywiadu pomoże ci złamać rozmowę z programistą WWW, aby uzyskać świeższy i wyższy poziom doświadczenia. To najczęściej zadawane pytania podczas wywiadu.

    Mam nadzieję, że ten artykuł pomoże złamać i stawić czoła każdemu wywiadowi związanemu z CSS dla programisty internetowego.

    Sugerowana lektura = >> Pytania i odpowiedzi podczas wywiadu z programistami internetowymi

    Życzymy powodzenia !!

    rekomendowane lektury

^