Strony internetowe wyglądałyby nudno bez CSS, ponieważ ten język stylów odpowiada za styl, rozmiar, kolor i pozycjonowanie tekstu na stronie internetowej.
Spis treści:
Co to jest CSS?
Kaskadowe arkusze stylów, w skrócie CSS, to język opisujący sposób wyświetlania elementów HTML na ekranie lub papierze. CSS został stworzony przez World Wide Web Consortium (W3C) w 1996 roku.
Elementy HTML nie zostały zaprojektowane tak, aby zawierały znaczniki, które mogłyby pomóc w sformatowaniu strony internetowej, a programiści musieli jedynie napisać znaczniki dla strony. Wprowadzenie znaczników, takich jak , kiedy uruchomiono HTML 3.2, spowodowało nowe problemy dla programistów.
Ponieważ strony internetowe mają kolorowe tła, różne czcionki i wiele stylów, przepisywanie kodu stało się kosztowne i bolesne. Szkoły W3C wprowadziły CSS, aby sprostać tym wyzwaniom i przez lata ewoluowały.
Dlaczego CSS?
# 1. CSS jest wydajny
CSS oszczędza nam bólu związanego z dodawaniem tagów, takich jak czcionka, wyrównanie elementów, obramowanie, kolor, styl tła i rozmiar na każdej stronie internetowej.
#2. Oszczędzaj czas
Możesz łatwo zmienić wygląd całej witryny, zmieniając zewnętrzny plik CSS.
#3. Kompatybilność z wieloma urządzeniami
Współcześni użytkownicy sieci uzyskują dostęp do witryn za pomocą gadżetów o różnych rozmiarach ekranu, takich jak komputery PC, tablety i smartfony. CSS ułatwia tworzenie stron internetowych reagujących na rozmiary ekranu.
#4. Łatwe w utrzymaniu aplikacje
Nowoczesne aplikacje internetowe nieustannie ewoluują. CSS ułatwia zmianę pojedynczych komponentów, a nawet całej witryny bez zmiany bazy kodu.
W jaki sposób CSS jest używany z HTML do tworzenia stron internetowych?
HTML to standardowy język znaczników używany do tworzenia stron internetowych. Z drugiej strony CSS opisuje sposób wyświetlania stron internetowych (utworzonych przy użyciu HTML). Strona internetowa utworzona przy użyciu HTML i CSS będzie idealnie zawierać plik HTML z tekstem, linkami do obrazów i znacznikami HTML.
Ten plik HTML może mieć oddzielny plik CSS połączony z nim za pomocą znacznika linku lub zastosować wewnętrzne lub wbudowane style CSS. Plik HTML może mieć nagłówek taki jak
i akapit oznaczony przez
. Możesz użyć CSS, aby poinstruować przeglądarkę, aby wyświetlała całą treść akapitu pogrubioną czcionką, a nawet aby treść nagłówka miała 50 pikseli i kolor zielony.
W następnej sekcji zademonstrujemy, jak działają HTML i CSS.
Rodzaje CSS
# 1. CSS zewnętrzny
Aby CSS został sklasyfikowany jako zewnętrzny, powinien istnieć plik HTML i osobny plik CSS z rozszerzeniem .css. Na przykład style.css. Plik CSS jest połączony z plikiem/dokumentem HTML za pomocą znacznika linku.
Przykład zewnętrznego pliku CSS:
.main {
text-align:center;
}
.GF {
color:red;
font-size:50px;
font-weight:bold;
}
#TP {
color:blueviolet
font-style:bold;
font-size:20px;
}
Plik CSS można połączyć z następującym dokumentem HTML:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://wilku.top/12-best-online-courses-and-books-to-master-css/style.css"/> </head> <body> <div class = "main"> <div class ="GF">Geek Flare!!!! </div> <div id ="TP"> Your favourite tech portal </div> </div> </body> </html>
Tag link łączy zewnętrzny arkusz stylów z dokumentem HTML, podczas gdy atrybut href określa położenie zewnętrznego arkusza stylów.
Ostateczna strona internetowa będzie wyglądać następująco:
Zewnętrzny CSS jest najbardziej zalecanym podejściem, ponieważ ułatwia tworzenie komponentów wielokrotnego użytku i wprowadzanie uniwersalnych zmian w bazie kodu.
#2. Wewnętrzny CSS
Wewnętrzny CSS jest idealny, gdy masz pojedynczy dokument HTML, któremu chcesz nadać unikalny styl. Zestaw reguł stylu jest zapisywany w dokumencie HTML w sekcji head.
To jest przykład wewnętrznego CSS:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
.main {
text-align:center;
}
.GF {
color:Red;
font-size:70px;
}
.custom {
font-style:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class = "main">
<div class ="GF">Internal CSS Demonstration</div>
<div class ="custom">
The Results
</div>
</div>
</body>
</html>
Wyrenderowana strona internetowa będzie wyglądać następująco:
Wewnętrzny CSS nie jest w większości przypadków idealny, ponieważ powoduje, że kod w dokumencie HTML jest tak duży, co wpływa na szybkość ładowania.
#3. Wbudowany CSS
Inline CSS zawiera styl CSS w ciele. Na przykład możesz stylizować akapit, nagłówek, a nawet div za pomocą wbudowanego CSS.
<!DOCTYPE html> <html> <head> <title>Inline CSS</title> </head> <body> <p style = "color:red; font-size:50px; font-style:bold; text-align:center;"> Inline CSS Demonstration </p> </body> </html>
Wyrenderowany dokument będzie wyglądał następująco:
Inline CSS nie jest idealnym rozwiązaniem, jeśli chcesz skalować swoją aplikację internetową, ponieważ dodanie właściwości CSS do każdego tagu HTML wymaga czasu.
Zapoznaj się z najlepszymi kursami i książkami online, aby opanować CSS.
Twórz responsywne strony internetowe za pomocą HTML i CSS
Ten kurs tworzenia responsywnych witryn internetowych w świecie rzeczywistym uczy, jak tworzyć responsywne witryny internetowe przy użyciu HTML5 i CSS3. Nie potrzebujesz żadnej wcześniejszej wiedzy z zakresu tworzenia stron internetowych, aby nauczyć się tego kursu, który omawia takie koncepcje, jak model pudełkowy, rozwiązywanie konfliktów selektorów, schematy pozycjonowania i dziedziczenie.
Jest to również idealny kurs, jeśli chcesz nauczyć się przeprowadzać burzę mózgów, planować, szkicować, kodować, testować i optymalizować profesjonalną stronę internetową.
Zaawansowany CSS i Sass
Zaawansowany kurs CSS i Sass wprowadzi Cię w kulisy działania CSS, badając takie tematy, jak kaskada, specyfika i dziedziczenie.
Kurs zawiera wiele nowoczesnych technik CSS do tworzenia potężnych, responsywnych stron internetowych. Kurs wprowadza Saas i jak go używać w projektach podczas projektowania CSS, zmiennych globalnych i zarządzania zapytaniami o media.
Jest to również idealny kurs, jeśli chcesz nauczyć się animacji CSS, ponieważ dotyka @klatek kluczowych, animacji i przejść.
Naucz się CSSa
Learn CSS by Codecademy uczy, jak używać CSS do przekształcania HTML w atrakcyjne wizualnie strony internetowe. Kurs jest podzielony na 8 lekcji i składa się z 6 projektów sprawdzających zrozumienie.
Główne rzeczy, których nauczysz się z tego kursu, to dodawanie stylów do elementów HTML, łączenie plików HTML i CSS oraz tworzenie unikalnych układów stron internetowych.
Zbuduj swoją pierwszą stronę internetową za pomocą HTML i CSS
Kurs tworzenia pierwszej strony internetowej uczy, jak używać HTML5 i CSS3 do tworzenia responsywnych stron internetowych. Ten bezpłatny kurs składa się z 4 modułów, a jego ukończenie zajmuje około 10 godzin. Nie potrzebujesz żadnej wcześniejszej wiedzy z zakresu programowania, aby nauczyć się tego kursu.
Podstawy CSS
Podstawy CSS są tworzone przez W3Cx. Niektóre z rzeczy, których nauczysz się na tym kursie to; najlepsze praktyki w projektowaniu stron internetowych, podstawowe selektory CSS i sposób wybierania właściwości CSS. Kurs podzielony jest na 5 modułów; potrzebujesz około 5 tygodni, aby go ukończyć, studiując 5-7 godzin tygodniowo.
Wprowadzenie do CSS3
Ten kurs dotyczący CSS3 przedstawia kaskadowe arkusze stylów. Kurs jest przygotowany przez University of Michigan i uczy, jak pisać reguły CSS, ustalać dobre nawyki programistyczne i testować kod. Potrzebujesz około 12 godzin, aby ukończyć ten kurs, który jest dostarczany z certyfikatem, który można udostępnić po ukończeniu.
Wprowadzenie do HTML i CSS
Ten kurs wprowadzający do HTML i CSS uczy, jak tworzyć stylowe i dobrze ustrukturyzowane strony internetowe za pomocą HTML i CSS. Kurs uczy uczniów, jak tworzyć strony internetowe przy użyciu struktury przypominającej drzewo, a następnie stylizować je za pomocą CSS.
Ten bezpłatny kurs jest odpowiedni dla początkujących i wykorzystuje model nauki we własnym tempie. Potrzebujesz około 3 tygodni, aby ukończyć ten kurs, którego uczą eksperci branżowi.
Samouczek CSS
CSS Tutorial to darmowy kurs na W3schools. Kurs jest podzielony na rozdziały dla łatwego zrozumienia. Każdy rozdział zawiera przykłady i ćwiczenia. Platforma ma stronę internetową, w której możesz eksperymentować z różnymi koncepcjami za pomocą przycisku „Wypróbuj sam”.
CSS: ostateczny przewodnik
Książka CSS: The Definitive Guide jest pomocna, jeśli chcesz poznać podstawy CSS, od selektorów i specyficzności po kaskadę. Książka zawiera również szczegółowe informacje na temat trików flexbox, pozycjonowania i pływania.
Jest to również książka, którą warto zamówić, jeśli chcesz nauczyć się używać CSS do tworzenia transformacji, przejść i animacji 2D i 3D. Definitive Guide jest dostępny zarówno w wersji Kindle, jak i w miękkiej oprawie.
Responsywne projektowanie stron internetowych z HTML5 i CSS
Ta książka na temat projektowania responsywnych stron internetowych za pomocą HTML5 i CSS uczy, jak tworzyć przyszłościowe responsywne strony internetowe za pomocą HTML5 i CSS.
Po nauczeniu się sztuczek z tej książki utworzone przez Ciebie strony internetowe będą działać bezbłędnie na komputerach stacjonarnych, tabletach i telefonach komórkowych. Książka jest napisana w łatwym do zrozumienia formacie i jest dostępna w miękkiej oprawie i formatach Kindle.
HTML i CSS: projektowanie i tworzenie stron internetowych
Ta książka o HTML i CSS jest idealna dla wszystkich, niezależnie od tego, czy jesteś hobbystą, studentem czy profesjonalistą.
Autor przedstawia treść tej książki za pomocą grafiki informacyjnej i fotografii lifestylowej, aby ułatwić zrozumienie różnych koncepcji. Zasób jest przedstawiony w unikalnej strukturze, co ułatwia przeglądanie wszystkich rozdziałów.
Nowoczesne CSSy
Ta książka o Modern CSS: Opanuj kluczowe koncepcje CSS dla nowoczesnego tworzenia stron internetowych uczy CSS poprzez przykłady kodu, diagramy i zrzuty ekranu.
Książka wprowadza kolory, selektory, modele pudełkowe, kombinatory i specyfikę w pierwszych rozdziałach. Następnie książka wprowadza stylizację tekstu, pozycjonowanie, gradienty, obramowania, indeks Z i konteksty układania. Nauczysz się również zaawansowanych tematów, takich jak przejścia, animacje, transformacje, flexbox i siatki CSS.
Ostatnie słowa
Rola CSS we współczesnych witrynach internetowych jest nie do przecenienia. Oprócz tego, że strony internetowe są atrakcyjne wizualnie, CSS ułatwia poruszanie się po różnych stronach internetowych.
Nauka CSS może być łatwa, jeśli korzystasz z zasobów wymienionych powyżej. Niektóre z tych kursów są bezpłatne, podczas gdy inne są płatne.
Następnie możesz sprawdzić ściągawki CSS dla programistów i projektantów.