Lekcja 25
Lekcja 25
Embedded Files
Temat: Rodzaje selektorów CSS. [str. 185]
Temat: Rodzaje selektorów CSS. [str. 185]
Cele lekcji:
Poznanie różnych typów selektorów języka CSS.
Zrozumienie zasady działania poszczególnych typów selektorów CSS.
Rodzaje selektorów CSS
Rodzaje selektorów CSS
Selektor uniwersalny: (linia 1)
* oznacza wszystkie elementy na stronie.
taki selektor spowoduje zastosowanie czcionki Verdana dla wszystkich tekstów na stronie
Selektor typu: (linia 5)
Opisują reguły dla konkretnych znaczników HTML aby znaczniki <p> i <h4> były czerwone wystarczy zapisać:
Selektor klasy: (linia 10)
opisuje reguły dla elementów, w których wykorzystano cechę class. Atrybutu class można używać w wielu znacznikach języka HTML.
Ćwiczenia:
Utwórz folder L25 (w nim będziesz zapisywał wszystkie pliki z dzisiejszej lekcji).
Utwórz podobne pliki do tych przedstawionych powyżej (ale nazwij je L25.html i L25.css) Przedstaw twoją ulubioną potrawę.
Zmień napis "na zdrowie" na swoje imię i nazwisko oraz "śniadanie" na klasa do której chodzisz. Pamiętaj żeby plik tła odnosił się do lokalizacji internetowej (kopiuj adres obrazka)!
Utwórz kilka alternatywnych plików CSS (np. L25a.css, L25b.css ...) i sprawdź ich działanie.
Umieść odpowiedni kod CSS w pliku *.html tak aby po wklejeniu kodu w Witrynę wyniki twojej pracy były widoczne na twojej Witrynie Google (w lekcji 25).
Pomoc:
Pomoc:
Pamiętaj w menu pomoce znajdziesz podstronę technologie WWW a w niej kurs CSS na YouTube
Zapis koloru rgba - kanał alfa = ("przeźroczystość")
selektor class i jego zastosowanie (przeanalizuj przykład poniżej).
Wygodnie gdy wszystkie swoje pliku html i css masz na pulpicie w jednym folderze (o nazwie np. L25)
Dopiero gdy skończysz zadanie gotowe i przetestowane pliki kopiujesz folder do udostępnionego dysku Google.
Przykładowe wykonanie ćwiczenia:
Przykładowe wykonanie ćwiczenia:
W celu wklejenia kodu w Witrynę Google przekopiowałem kod CSS z pliku CSS do <head> między znaczniki <style> ...</style> w pliku HTML i ten "połączony" kod wstawiłem na tą Witrynę.
Wklejony w Witrynę kod pliku html ⇩
Wklejony w Witrynę kod pliku html ⇩
*zwróć uwagę że jest on wynikiem odpowiedniego wstawienia kodu CSS do sekcji <head> pliku HTML
... a tak wygląda kod który wstawiłem*⇩
... a tak wygląda kod który wstawiłem*⇩
Page updated
Report abuse