Stworzenie strony internetowej to świetny sposób na wyrażenie siebie. Chociaż istnieje wiele narzędzi do tworzenia witryn internetowych, samodzielne napisanie tego jest przyjemnym sposobem, aby dowiedzieć się więcej o tym, jak strony internetowe działają za kulisami. Dobrym projektem dla początkujących jest stworzenie strony internetowej i dodanie obrazu tła za pomocą CSS. Dzięki temu projektowi będziesz mógł korzystać zarówno z HTML, jak i CSS.
Co to jest CSS?
CSS to skrót od Cascading Style Sheet. Jest to język programowania, który umożliwia stylizowanie języków znaczników. Jednym z takich języków znaczników jest HTML lub Hyper-Text Markup Language. HTML służy do tworzenia witryn internetowych. Chociaż możesz kontrolować niektóre style witryny za pomocą HTML, CSS oferuje znacznie więcej opcji kontroli i projektowania.
Tworzenie podstawowej witryny internetowej w formacie HTML
Ponieważ CSS to tylko język stylów, aby go używać, najpierw potrzebujemy czegoś do stylizacji. Wystarczy bardzo podstawowa strona internetowa, aby rozpocząć zabawę z CSS. Na naszej stronie zostanie wyświetlony komunikat „Hello World”.
Witaj świecie
Jeśli nie jesteś zaznajomiony z HTML, przyjrzyjmy się szybko, co robią wszystkie elementy. Jak wspomniano, HTML jest językiem znaczników, co oznacza, że używa tagów do oznaczania tekstu. Zawsze, gdy widzisz słowo otoczone <> to jest tag. Istnieją dwa typy znaczników: znacznik, który oznacza początek sekcji za pomocą <> i taki, który oznacza koniec sekcji za pomocą
W naszym przykładzie mamy cztery tagi. Plik html tag wskazuje, które elementy są częścią serwisu. Plik głowa tag zawiera informacje nagłówka, które nie są wyświetlane na stronie, ale są potrzebne do utworzenia strony. Wszystkie wyświetlane elementy znajdują się między ciało tagi. Mamy tylko jeden wyświetlany element, plik p etykietka. Informuje przeglądarkę internetową, że tekst jest akapitem.
Związane z: 10 prostych przykładów kodu CSS, których możesz się nauczyć w 10 minut
Chcesz dowiedzieć się więcej o używaniu CSS? Na początek wypróbuj te podstawowe przykłady kodu CSS, a następnie zastosuj je na swoich własnych stronach internetowych.
Dodawanie CSS do HTML
Teraz, gdy mamy prostą stronę, możemy dostosować styl za pomocą CSS. Nasza strona jest teraz dość prosta i niewiele możemy zrobić, ale zacznijmy od wyróżnienia naszego akapitu, abyśmy mogli go odróżnić od tła, dodając obramowanie.
Witaj świecie
Teraz nasz akapit zostanie otoczony czarną obwódką. Dodanie opisu stylu w CSS do naszego tagu akapitu powiedziało stronie internetowej, jak stylizować akapit. Możemy dodać więcej opisów. Zwiększmy odstępy lub dopełnienie wokół naszego akapitu i wyśrodkujmy nasz tekst.
Witaj świecie
Nasza witryna wygląda lepiej, ale nasz kod HTML zaczyna wyglądać niechlujnie ze wszystkimi opisami w tagu akapitu. Możemy przenieść te informacje do naszego nagłówka. Nasz nagłówek zawiera informacje, których potrzebujemy, aby poprawnie wyświetlić witrynę.
Witaj świecie
Teraz nasz HTML jest łatwiejszy do odczytania. Zauważysz, że musieliśmy coś zmienić. Znacznik stylu informuje o stylu przeglądarki internetowej, ale także informuje o tym, co należy stylizować. W naszym przykładzie użyliśmy dwóch różnych sposobów, aby powiedzieć mu, co ma być stylizowane. Plik p w znaczniku stylu mówi przeglądarce internetowej, aby zastosować ten styl do wszystkich znaczników akapitu. Plik #ourParagraph sekcja mówi mu tylko o stylach elementów z id naszParagraph. Zauważ, że ID informacja została dodana do tagu p w naszym ciele.
Importowanie pliku CSS do Twojej witryny internetowej
Dodanie informacji o stylu do nagłówka znacznie ułatwia czytanie naszego kodu. Jeśli jednak chcemy stylizować wiele różnych stron w ten sam sposób, musimy dodać ten tekst na górze każdej strony. To może nie wydawać się dużo pracy, w końcu możesz to skopiować i wkleić, ale powoduje to dużo pracy, jeśli chcesz później zmienić element.
Zamiast tego zachowamy informacje CSS w oddzielnym pliku i zaimportujemy plik, aby nadać styl stronie. Skopiuj i wklej informacje między tagami stylów do nowego pliku CSS ourCSSfile.css.
p {
text-align: center
}
#ourParagraph {
styl obramowania: jednolity;
wypełnienie: 30px;
}Następnie zaimportuj plik do pliku HTML.
Witaj świecie
Dodawanie obrazu tła z CSS
Teraz, gdy masz solidną podstawę w HTML i CSS, dodanie obrazu tła będzie bułką z masłem. Najpierw określ, któremu elementowi chcesz nadać obraz tła. W naszym przykładzie dodamy tło do całej strony. Oznacza to, że chcemy zmienić styl pliku ciało. Pamiętaj, tagi body zawierają wszystkie widoczne elementy.
ciało{
background-image: url ("sky.jpg");
}
p {
text-align: center
}
#ourParagraph {
styl obramowania: jednolity;
wypełnienie: 30px;
}Aby zmienić styl treści w CSS, najpierw użyj rozszerzenia ciało słowo kluczowe. Następnie dodaj nawiasy klamrowe, tak jak wcześniej {}. Wszystkie informacje o stylu ciała muszą znajdować się między nawiasami klamrowymi. Atrybut stylu, który chcemy zmienić, to zdjęcie w tle. Istnieje wiele atrybutów stylu. Nie spodziewaj się, że zapamiętasz je wszystkie. Zakładka a Ściągawka z właściwościami CSS z atrybutami, które chcesz zapamiętać.
Związane z: 8 fajnych efektów HTML, które każdy może dodać do swojej witryny internetowej
Po atrybucie użyj dwukropka, aby wskazać, w jaki sposób zmienisz atrybut. Aby zaimportować obraz, użyj url (). wskazuje, że używasz łącza do wskazywania obrazu. Umieść lokalizację pliku w nawiasach w cudzysłowie. Na koniec zakończ linię średnikiem. Chociaż białe znaki nie mają znaczenia w CSS, użyj wcięć, aby ułatwić czytanie CSS.
Nasz przykład wygląda następująco:
Jeśli obraz nie jest wyświetlany poprawnie ze względu na rozmiar obrazu, możesz bezpośrednio zmienić obraz. Jednak w CSS istnieją atrybuty stylu tła, których można użyć do zmiany tła. Obrazy mniejsze niż tło zostaną automatycznie powtórzone w tle. Aby to wyłączyć, dodaj powtarzanie tła: bez powtórzeń; do swojego żywiołu.
Istnieją również dwa sposoby, aby obraz zakrywał całe tło. Najpierw możesz ustawić rozmiar tła na rozmiar ekranu za pomocą rozmiar tła: 100% 100%;, ale to spowoduje rozciągnięcie obrazu i może go zbytnio zniekształcić. Jeśli nie chcesz, aby proporcje obrazu uległy zmianie, możesz również ustawić rozmiar tła na pokrywa. Okładka sprawi, że obraz tła zakryje tło, ale nie zniekształci obrazu.
Zmiana koloru tła
Zmieńmy jeszcze jedną rzecz. Teraz, gdy mamy tło, nasz akapit jest trudny do odczytania. Ustawmy jego tło na biało. Proces jest podobny. Element, który chcemy zmodyfikować, to #ourParagraph. Znak # wskazuje, że „naszParagraf” jest nazwą identyfikacyjną. Następnie chcemy ustawić kolor tła przypisać do białego.
ciało{
background-image: url ("sky.jpg");
}
p {
text-align: center
}
#ourParagraph {
kolor tła: biały;
styl obramowania: jednolity;
wypełnienie: 30px;
}Dużo lepiej.
Kontynuacja projektowania witryny za pomocą CSS
Teraz, gdy wiesz, jak zmienić styl różnych elementów HTML, nie ma ograniczeń! Podstawowa metoda zmiany atrybutów stylu jest taka sama. Zidentyfikuj element, który chcesz zmienić, i opisz, jak zmienić atrybut. Najlepszym sposobem, aby dowiedzieć się więcej, jest bawić się różnymi atrybutami. Podejmij wyzwanie, aby w następnej kolejności zmienić kolor tekstu.
Chcesz nauczyć się HTML, aby kodować własne witryny i aplikacje? Skorzystaj z tych przykładów stron internetowych i kodu źródłowego, aby nauczyć się HTML i CSS.
- Programowanie
- HTML
- Projektowanie stron
- CSS
JOT. Seaton jest autorem artykułów naukowych, który specjalizuje się w rozwiązywaniu złożonych tematów. Posiada tytuł doktora Uniwersytetu Saskatchewan; Jej badania koncentrowały się na wykorzystaniu uczenia się opartego na grach do zwiększania zaangażowania uczniów online. Kiedy nie pracuje, znajdziesz ją razem z nią czytającą, grającą w gry wideo lub pracującą w ogrodzie.
Zapisz się do naszego newslettera
Dołącz do naszego biuletynu, aby otrzymywać wskazówki techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!
Jeszcze jeden krok…!
Potwierdź swój adres e-mail w wiadomości e-mail, którą właśnie wysłaliśmy.
