CSS oznacza kaskadowe arkusze stylów. Jest to język programowania używany do opisywania prezentacji i stylu dokumentu napisanego w HTML lub XML. CSS zapewnia zestaw reguł i właściwości, które określają sposób wyświetlania elementów na stronie internetowej.
Dzięki CSS projektanci stron internetowych i programiści mogą kontrolować różne aspekty wyglądu witryny, w tym układ, kolory, czcionki, odstępy i efekty. Oddzielając informacje o stylu od treści, CSS pozwala na bardziej wydajny i elastyczny proces tworzenia stron internetowych.
CSS działa na zasadzie kaskadowej, w której można zastosować wiele reguł stylu do elementu, a ostateczny styl jest określany przez kolejność swoistości i zastosowanie różnych selektorów. Umożliwia to łatwe dostosowywanie i spójność na stronach internetowych.
Selektory CSS służą do celowania określonych elementów HTML lub grup elementów w celu zastosowania pożądanych stylów. Selektory mogą być oparte na typach elementów, nazwach klas, identyfikatorów, atrybutach i innych, zapewniając dużą elastyczność w stylizacji.
CSS3, najnowsza wersja CSS, wprowadziła wiele nowych funkcji, w tym zaawansowane opcje układu, przejścia, animacji, gradientów i innych, umożliwiając jeszcze bardziej kreatywny i interaktywny projektowanie stron internetowych.
Zarys artykułu
- Część 1: Utwórz niesamowity quiz CSS za pomocą sztucznej inteligencji w Internet Exmaker
- Część 2: 15 CSS Quiz Pytania i odpowiedzi
- Część 3: Wypróbuj generator pytań OnlineExamMaker, aby utworzyć pytania quizu
Część 1: Utwórz niesamowity quiz CSS za pomocą sztucznej inteligencji w Internet Exmaker
Najszybszym sposobem oceny umiejętności kandydatów CSS jest korzystanie z platformy oceny AI, takiej jak OnlineExamaker. Dzięki generatorowi pytań AI online możesz wprowadzić treść-takie jak tekst, dokumenty lub tematy-a następnie automatycznie generować pytania w różnych formatach (np. Wybór wielokrotnego wyboru, prawda/false, krótka odpowiedź). Ich równiarka egzaminacyjna AI może automatycznie ocenić egzamin i wygenerować wnikliwe raporty po przesłaniu kandydata.
Przegląd kluczowych cech związanych z oceną:
● Utwórz do 10 typów pytań, w tym wielokrotny wybór, true/false, wypełnianie blank, dopasowanie, krótka odpowiedź i pytania eseju.
● Automatycznie generuje szczegółowe raporty – wyniki indywidualne, raport z pytań i wydajność grupy.
● Natychmiast ocenia obiektywne pytania, a subiektywne odpowiedzi Wykorzystaj punktację opartą na rubryce dla spójności.
● API i SSO pomogą trenerom zintegrować OnlineExamMaker z Google Classroom, Microsoft Teams, CRM i nie tylko.
Automatycznie generuj pytania przy użyciu AI
Część 2: 15 CSS Quiz Pytania i odpowiedzi
or
1. Pytanie: Co oznacza selektor CSS “div”?
Opcje:
A) Wybiera wszystkie elementy o klasie “div”
B) Wybiera elementy o id “div”
C) Wybiera wszystkie elementy {div}
D) Wybiera elementy nagłówkowe
Odpowiedź: C
Wyjaśnienie: Selektor “div” wybiera wszystkie elementy {div} w dokumencie HTML, ponieważ jest to podstawowy selektor elementu.
2. Pytanie: Jaka jest różnica między padding a margin w modelu pudełkowym CSS?
Opcje:
A) Padding to przestrzeń wewnątrz elementu, a margin to przestrzeń na zewnątrz
B) Margin to przestrzeń wewnątrz, a padding na zewnątrz
C) Oba oznaczają to samo
D) Padding dotyczy tylko tła
Odpowiedź: A
Wyjaśnienie: Padding to przestrzeń między zawartością elementu a jego ramką, podczas gdy margin to przestrzeń poza ramką elementu, wpływająca na pozycjonowanie względem innych elementów.
3. Pytanie: Jak wyśrodkować tekst w elemencie div?
Opcje:
A) Używając właściwości text-align: center;
B) Używając margin: auto;
C) Używając float: center;
D) Używając position: center;
Odpowiedź: A
Wyjaśnienie: Właściwość text-align: center; wyrównuje tekst poziomo w elemencie blokowym, takim jak div.
4. Pytanie: Co oznacza wartość “absolute” w właściwości position?
Opcje:
A) Pozycjonuje element względem jego normalnego miejsca w dokumencie
B) Pozycjonuje element względem rodzica
C) Pozycjonuje element względem okna przeglądarki
D) Nie zmienia pozycji elementu
Odpowiedź: B
Wyjaśnienie: Wartość “absolute” ustawia element w stosunku do najbliższego rodzica z pozycją inną niż static, co pozwala na precyzyjne umieszczenie.
5. Pytanie: Jaki jest domyślny typ wyświetlania elementu {span}?
Opcje:
A) Block
B) Inline
C) Inline-block
D) None
Odpowiedź: B
Wyjaśnienie: Element {span} jest domyślnie inline, co oznacza, że nie tworzy nowej linii i nie zajmuje całej szerokości.
6. Pytanie: Jak dodać tło obrazu do elementu?
Opcje:
A) Używając background-image: url(‘obraz.jpg’);
B) Używając background-color: url(‘obraz.jpg’);
C) Używając image-background: url(‘obraz.jpg’);
D) Używając src: url(‘obraz.jpg’);
Odpowiedź: A
Wyjaśnienie: Właściwość background-image ustawia obraz jako tło elementu, a wartość url() wskazuje ścieżkę do pliku.
7. Pytanie: Co robi reguła @media w CSS?
Opcje:
A) Definiuje style dla różnych rozmiarów ekranu
B) Łączy arkusze stylów
C) Tworzy animacje
D) Zmienia kolor tekstu
Odpowiedź: A
Wyjaśnienie: Reguła @media pozwala na stosowanie stylów w zależności od warunków, takich jak szerokość ekranu, co jest kluczowe w responsywnym projektowaniu.
8. Pytanie: Jaka jest różnica między flexbox a grid w CSS?
Opcje:
A) Flexbox jest dla układów jednowymiarowych, a grid dla dwuwymiarowych
B) Flexbox i grid są identyczne
C) Grid jest tylko dla obrazów
D) Flexbox jest dla animacji
Odpowiedź: A
Wyjaśnienie: Flexbox służy do układania elementów w jednym kierunku (poziomo lub pionowo), podczas gdy grid umożliwia dwuwymiarowy układ z wierszami i kolumnami.
9. Pytanie: Jak zmienić kolor linku po najechaniu myszą?
Opcje:
A) Używając :hover pseudo-klasy
B) Używając class:hover
C) Używając id:hover
D) Używając link:hover
Odpowiedź: A
Wyjaśnienie: Pseudo-klasa :hover pozwala na zmianę stylów elementu, takiego jak link, gdy nad nim jest kursor, np. a:hover { color: red; }.
10. Pytanie: Co oznacza jednostka “em” w CSS?
Opcje:
A) Wielkość czcionki rodzica
B) Stała wartość pikseli
C) Procent szerokości ekranu
D) Wysokość linii
Odpowiedź: A
Wyjaśnienie: Jednostka “em” jest względna do wielkości czcionki elementu nadrzędnego, co ułatwia skalowanie.
11. Pytanie: Jak ukryć element w CSS?
Opcje:
A) Używając display: none;
B) Używając visibility: hidden;
C) Oba powyższe
D) Używając opacity: 0;
Odpowiedź: C
Wyjaśnienie: Display: none; usuwa element z przepływu dokumentu, a visibility: hidden; ukrywa go, ale zachowuje miejsce w układzie.
12. Pytanie: Jaki jest cel właściwości z-index?
Opcje:
A) Określa kolejność nakładania elementów
B) Zmienia kolor tła
C) Ustawia szerokość elementu
D) Definiuje animacje
Odpowiedź: A
Wyjaśnienie: Właściwość z-index kontroluje, który element jest wyświetlany na wierzchu, gdy elementy się nakładają.
13. Pytanie: Jak stworzyć responsywny design za pomocą CSS?
Opcje:
A) Używając mediów zapytań @media
B) Używając stałych szerokości
C) Tylko z JavaScript
D) Używając fixed positioning
Odpowiedź: A
Wyjaśnienie: @media pozwala na dostosowanie stylów do różnych urządzeń, np. @media (max-width: 600px) { … }.
14. Pytanie: Co to jest pseudo-element w CSS?
Opcje:
A) Dodatkowy element, taki jak ::before lub ::after
B) Klasa elementu
C) Id elementu
D) Styl bloku
Odpowiedź: A
Wyjaśnienie: Pseudo-elementy jak ::before i ::after pozwalają na dodanie treści lub stylów do elementu bez modyfikacji HTML.
15. Pytanie: Jak działa transition w CSS?
Opcje:
A) Tworzy płynne zmiany właściwości
B) Natychmiastowo zmienia style
C) Tylko dla kolorów
D) Dla animacji 3D
Odpowiedź: A
Wyjaśnienie: Właściwość transition umożliwia płynne przechodzenie między stanami, np. transition: background-color 0.5s;, co dodaje efekt animacji.
or
Część 3: Wypróbuj generator pytań OnlineExamMaker, aby utworzyć pytania quizu
Automatycznie generuj pytania przy użyciu AI