Home-theater-designers
Tworzenie strony internetowej to świetny sposób na wyrażenie siebie. Chociaż istnieje wiele narzędzi do tworzenia stron internetowych, samodzielne pisanie tego jest świetnym 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. Ten projekt pozwoli Ci uruchomić zarówno 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 stron internetowych. Chociaż możesz kontrolować niektóre style witryny za pomocą HTML, CSS oferuje znacznie więcej opcji kontroli i projektowania.
Tworzenie podstawowej strony internetowej za pomocą HTML
Ponieważ CSS jest tylko językiem stylów, aby go używać, najpierw potrzebujemy czegoś do stylizacji. Do rozpoczęcia zabawy z CSS wystarczy nam bardzo prosta strona internetowa. Nasza strona wyświetli „Hello World”.
Hello World
Jeśli nie znasz języka HTML, szybko przejrzyjmy, co robią wszystkie elementy. Jak wspomniano, HTML jest językiem znaczników, co oznacza, że używa znaczników do oznaczania tekstu. Ilekroć zobaczysz słowo otoczone przez to jest tag. Istnieją dwa rodzaje tagów: tag, który oznacza początek sekcji za pomocą i tag, który oznacza koniec sekcji za pomocą . Tekst w sekcji ma również na celu ułatwienie zrozumienia tego rozróżnienia.
W naszym przykładzie mamy cztery znaczniki. ten html tag wskazuje, które elementy są częścią witryny. ten 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, 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
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 odróżnić go od tła, dodając obramowanie.
Hello World
Teraz nasz akapit będzie otoczony czarną ramką. 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 wokół akapitu i wyśrodkujmy tekst.
Hello World
Nasza strona internetowa wygląda lepiej, ale nasz kod HTML zaczyna wyglądać bałagan ze wszystkimi tymi opisami w tagu akapitu. Możemy przenieść te informacje do naszego nagłówka. Nasz nagłówek zawiera informacje, których potrzebujemy do prawidłowego wyświetlania strony.
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}
Hello World
Teraz nasz kod HTML jest łatwiejszy do odczytania. Zauważysz, że musieliśmy zmienić niektóre rzeczy. Znacznik stylu informuje o stylu przeglądarki internetowej, ale także o tym, co stylizować. W naszym przykładzie użyliśmy dwóch różnych sposobów, aby powiedzieć, co stylizować. ten P w znaczniku stylu mówi przeglądarce internetowej, aby zastosowała ten styl do wszystkich znaczników akapitu. ten #nasz akapit sekcja mówi mu, aby stylizować tylko elementy o id nasz akapit . Zauważ, że NS informacja została dodana do tagu p w naszym ciele.
jak połączyć dwie kolumny w programie Excel?
Importowanie pliku CSS do Twojej witryny
Dodanie informacji o stylu do nagłówka znacznie ułatwia odczytywanie 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ę zbyt dużo pracy, w końcu możesz to skopiować i wkleić, ale wymaga to dużo pracy, jeśli chcesz później zmienić element.
Zamiast tego zachowamy informacje CSS w osobnym pliku i zaimportujemy plik, aby nadać styl stronie. Skopiuj i wklej informacje między tagami stylu do nowego pliku CSS naszplikCSS.css .
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}Następnie zaimportuj plik do pliku HTML.
Hello World
Dodawanie obrazu tła za pomocą CSS
Teraz, gdy masz solidną podstawę w HTML i CSS, dodanie obrazu tła będzie bułką z masłem. Najpierw zidentyfikuj element, któremu chcesz nadać obraz tła. W naszym przykładzie dodamy tło do całej strony. Oznacza to, że chcemy zmienić styl ciało . Pamiętaj, że tagi body zawierają wszystkie widoczne elementy.
body{
background-image: url('sky.jpg');
}
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}Aby zmienić styl treści w CSS, najpierw użyj ciało słowo kluczowe. Następnie dodaj nawiasy klamrowe, tak jak to robiliśmy wcześniej {}. Wszystkie informacje o stylu ciała muszą znajdować się w nawiasach klamrowych. Atrybut stylu, który chcemy zmienić to zdjęcie w tle . Istnieje wiele atrybutów stylu. Nie oczekuj, że zapamiętasz je wszystkie. Dodaj do zakładek ściągawkę właściwości 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
jak znaleźć imei na iPhonie?
Po atrybucie użyj dwukropka, aby wskazać, jak zmienisz atrybut. Aby zaimportować obraz, użyj url() . wskazuje, że używasz linku, aby wskazać obraz. Umieść lokalizację pliku w nawiasach między cudzysłowami. Na koniec zakończ linię średnikiem. Chociaż białe znaki nie mają znaczenia w CSS, użyj wcięć, aby CSS był łatwiejszy do odczytania.
Nasz przykład wygląda tak:
Jeśli obraz nie wyświetla się poprawnie z powodu rozmiaru obrazu, możesz bezpośrednio zmienić obraz. Istnieją jednak atrybuty stylu tła w CSS, 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 twojego żywiołu.
Istnieją również dwa sposoby, aby obraz pokrył całe tło. Po pierwsze, możesz ustawić rozmiar tła na rozmiar ekranu za pomocą rozmiar tła: 100% 100%; , ale spowoduje to rozciągnięcie obrazu i może za bardzo go zniekształcić. Jeśli nie chcesz zmieniać proporcji obrazu, możesz również ustawić rozmiar tła na okładka . Okładka sprawi, że obraz tła zakryje tło, ale nie zniekształci obrazu.
Zmiana koloru tła
Zmieńmy ostatnią rzecz. Teraz, gdy mamy już tło, nasz akapit jest trudny do odczytania. Ustawmy jego tło na białe. Proces jest podobny. Element, który chcemy zmodyfikować, to #ourParagraph. # wskazuje, że 'ourParagraph' jest nazwą identyfikatora. Następnie chcemy ustawić kolor tła atrybut do bieli.
body{
background-image: url('sky.jpg');
}
p {
text-align: center
}
#ourParagraph {
background-color: white;
border-style: solid;
padding: 30px;
}Dużo lepiej.
Kontynuacja projektowania witryny za pomocą CSS
Teraz, gdy wiesz, jak zmienić styl różnych elementów HTML, nie ma granic! 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 zabawa z różnymi atrybutami. Podejmij wyzwanie, aby następnie zmienić kolor tekstu.
Udział Udział Ćwierkać E-mail 8 najlepszych witryn z przykładami wysokiej jakości kodowania HTMLChcesz nauczyć się HTML do kodowania własnych stron internetowych i aplikacji? Użyj tych przykładów stron internetowych i kodu źródłowego, aby nauczyć się HTML i CSS.
Czytaj dalej Powiązane tematy- Programowanie
- HTML
- Projektowanie stron
- CSS
J. Seaton jest pisarzem naukowym, który specjalizuje się w rozwiązywaniu złożonych tematów. Posiada tytuł doktora na Uniwersytecie Saskatchewan; jej badania koncentrowały się na wykorzystaniu nauki opartej na grach w celu zwiększenia zaangażowania uczniów w Internecie. Kiedy nie pracuje, znajdziesz ją z jej czytaniem, graniem w gry wideo lub ogrodnictwem.
Więcej od Jennifer SeatonZapisz się do naszego newslettera
Dołącz do naszego newslettera, aby otrzymywać porady techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!
Kliknij tutaj, aby zasubskrybować