12 labākie tiešsaistes kursi un grāmatas, lai apgūtu CSS

Vietnes izskatītos garlaicīgas bez CSS, jo šī stila valoda ir atbildīga par teksta stilu, izmēru, krāsu un izvietojumu tīmekļa lapā.

Kas ir CSS?

Cascading Style Sheets, saīsināti kā CSS, ir valoda, kas apraksta, kā HTML elementi ir jāparāda uz ekrāna vai papīra. CSS izveidoja World Wide Web Consortium (W3C) 1996. gadā.

HTML elementi nebija izstrādāti tā, lai tiem būtu tagi, kas varētu palīdzēt formatēt tīmekļa lapu, un izstrādātājiem bija tikai jāraksta lapas marķējums. Tādu tagu kā ieviešana, kad tika palaists HTML 3.2, izstrādātājiem radīja jaunas problēmas.

Tā kā tīmekļa lapām ir krāsains fons, dažādi fonti un dažādi stili, koda pārrakstīšana kļuva dārga un sāpīga. W3C skolas ieviesa CSS, lai atrisinātu šīs problēmas, un tas ir turpinājis attīstīties gadu gaitā.

Kāpēc CSS?

#1. CSS ir efektīva

CSS pasargā mūs no grūtībām, kas saistītas ar tādu tagu pievienošanu kā fonts, elementu līdzinājums, apmale, krāsa, fona stils un izmērs katrā tīmekļa lapā.

#2. Ietaupīt laiku

Varat viegli mainīt visas vietnes izskatu, mainot ārējo CSS failu.

#3. Vairāku ierīču saderība

Mūsdienu tīmekļa lietotāji piekļūst vietnēm sīkrīkos ar dažādu ekrāna izmēru, piemēram, personālajiem datoriem, planšetdatoriem un viedtālruņiem. CSS ļauj viegli izveidot tīmekļa lapas, kas atbilst ekrāna izmēriem.

#4. Viegli uzturamas lietojumprogrammas

Mūsdienu tīmekļa lietojumprogrammas vienmēr attīstās. CSS ļauj viegli mainīt atsevišķus komponentus vai pat visu vietni, nemainot kodu bāzi.

Kā CSS tiek izmantots kopā ar HTML, lai izveidotu vietnes?

HTML ir standarta iezīmēšanas valoda, ko izmanto tīmekļa lapu izveidei. No otras puses, CSS apraksta, kā tiek parādītas tīmekļa lapas (izveidotas, izmantojot HTML). Tīmekļa lapai, kas izveidota, izmantojot HTML un CSS, ideālā gadījumā būs teksta, attēlu saišu un HTML tagu HTML fails.

  Kā ierakstīt tālruņa zvanu savā iPhone

Šim HTML failam var būt vai nu atsevišķs CSS fails, kas ar to saistīts, izmantojot saites tagu, vai izmantot iekšējos vai iekļautos CSS stilus. HTML failam var būt virsraksts, piemēram,

, un rindkopa, kas apzīmēta ar

. Varat izmantot CSS, lai norādītu pārlūkprogrammai visu rindkopas saturu parādīt treknrakstā vai pat padarīt galvenes saturu 50 pikseļu un zaļā krāsā.

Nākamajā sadaļā mēs parādīsim, kā darbojas HTML un CSS.

CSS veidi

#1. Ārējais CSS

Lai CSS tiktu klasificēts kā ārējs, ir jābūt HTML failam un atsevišķam CSS failam ar paplašinājumu .css. Piemēram, style.css. CSS fails ir saistīts ar HTML failu/dokumentu, izmantojot saites tagu.

Ārējā CSS faila piemērs:

.main {

    text-align:center;   

}

.GF {

    color:red;

    font-size:50px;

    font-weight:bold;

}

#TP {

    color:blueviolet

    font-style:bold;

    font-size:20px;

}

CSS failu var saistīt ar šādu HTML dokumentu:

<!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>

Saites tags saista ārējo stilu lapu ar HTML dokumentu, savukārt atribūts href norāda ārējās stila lapas atrašanās vietu.

Galīgā tīmekļa lapa izskatīsies šādi:

Ārējā CSS ir visieteicamākā pieeja, jo tā ļauj viegli izveidot atkārtoti lietojamus komponentus un veikt universālas izmaiņas kodu bāzē.

#2. Iekšējā CSS

Iekšējais CSS ir ideāls, ja jums ir viens HTML dokuments, kuru vēlaties veidot unikāli. Stila noteikumu kopa ir uzrakstīta HTML dokumentā galvas sadaļā.

Šis ir iekšējās CSS piemērs:

<!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>

Atveidotā tīmekļa lapa izskatīsies šādi:

Iekšējais CSS vairumā gadījumu nav ideāls, jo tas padara kodu HTML dokumentā tik lielu, ietekmējot ielādes ātrumu.

#3. Iekļauts CSS

Iekļauts CSS satur CSS stilu pamattekstā. Piemēram, varat veidot rindkopas, virsraksta vai pat div stila stilu, izmantojot iekļauto 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>

Atveidotais dokuments izskatīsies šādi:

Iekļauts CSS nav ideāls, ja vēlaties mērogot savu tīmekļa lietojumprogrammu, jo CSS rekvizīta pievienošana katram HTML tagam prasa laiku.

Izpētiet dažus no labākajiem tiešsaistes kursiem un grāmatām, lai apgūtu CSS.

Izveidojiet atsaucīgas vietnes, izmantojot HTML un CSS

Šis adaptīvu reālās pasaules vietņu izveides kurss māca, kā izveidot adaptīvas vietnes, izmantojot HTML5 un CSS3. Jums nav nepieciešamas nekādas priekšzināšanas tīmekļa izstrādē, lai apgūtu šo kursu, kurā tiek pētīti tādi jēdzieni kā lodziņa modelis, atlasītāju konfliktu risināšana, pozicionēšanas shēmas un mantošana.

Tas ir arī ideāls kurss, ja vēlaties uzzināt, kā veidot prāta vētru, plānot, ieskicēt, kodēt, pārbaudīt un optimizēt profesionālu vietni.

Uzlabots CSS un Sass

Uzlabotais CSS un Sass kurss iepazīstina jūs ar CSS darbību aizkulisēs, izpētot tādas tēmas kā kaskāde, specifika un mantošana.

Kursā ir daudz modernu CSS paņēmienu, lai izveidotu jaudīgas, atsaucīgas tīmekļa lapas. Kurss iepazīstina ar Saas un to, kā to izmantot projektos, veidojot CSS, globālos mainīgos un pārvaldot multivides vaicājumus.

Tas ir arī ideāls kurss, ja vēlaties apgūt CSS animāciju, jo tas skar @keyframes, animāciju un pāreju.

Apgūstiet CSS

Uzziniet, kā izmantot CSS, lai vizuāli pārveidotu HTML par pievilcīgām vietnēm. Kurss ir sadalīts 8 nodarbībās, un tajā ir 6 projekti, lai pārbaudītu jūsu izpratni.

Galvenās lietas, ko iemācīsities no šī kursa, ir tas, kā pievienot stilu HTML elementiem, savienot HTML un CSS failus un izveidot unikālus tīmekļa lapu izkārtojumus.

Izveidojiet savu pirmo tīmekļa lapu, izmantojot HTML un CSS

Pirmās tīmekļa lapas izveides kursā tiek mācīts, kā izmantot HTML5 un CSS3, lai izveidotu adaptīvas vietnes. Šis bezmaksas kurss ir izveidots 4 moduļos, un tā pabeigšanai nepieciešamas aptuveni 10 stundas. Lai apgūtu šo kursu, nav nepieciešamas priekšzināšanas par programmēšanu.

CSS pamati

CSS Basics ir izveidojis W3Cx. Dažas no lietām, ko jūs apgūsit šajā kursā, ir: paraugprakse tīmekļa dizainā, pamata CSS atlasītāji un CSS rekvizītu atlase. Kurss ir sadalīts 5 moduļos; mācoties 5-7 stundas nedēļā, lai to pabeigtu, nepieciešamas apmēram 5 nedēļas.

Ievads CSS3

Šis kurss par CSS3 iepazīstina ar kaskādes stila lapām. Kursu sagatavo Mičiganas Universitāte, un tajā tiek mācīts, kā rakstīt CSS noteikumus, izveidot labus programmēšanas ieradumus un pārbaudīt kodu. Jums ir nepieciešamas aptuveni 12 stundas, lai pabeigtu šo kursu, kuram ir koplietojams sertifikāts par pabeigšanu.

Ievads HTML un CSS

Šis ievadkurss par HTML un CSS māca, kā izveidot stilizētas un labi strukturētas vietnes, izmantojot HTML un CSS. Kurss māca studentiem, kā izveidot tīmekļa vietnes, izmantojot kokam līdzīgu struktūru, un pēc tam veidot tās, izmantojot CSS.

Šis bezmaksas kurss ir piemērots iesācējiem, un tajā tiek izmantots pašmācības modelis. Jums ir nepieciešamas apmēram 3 nedēļas, lai pabeigtu šo kursu, ko māca nozares eksperti.

CSS apmācība

CSS apmācība ir bezmaksas kurss par W3schools. Kurss ir sadalīts nodaļās, lai to būtu vieglāk saprast. Katrā nodaļā ir sniegti piemēri un vingrinājumi. Platformai ir tiešsaistes vietne, kurā varat eksperimentēt ar dažādām koncepcijām, izmantojot pogu “Izmēģināt pats”.

CSS: galīgais ceļvedis

Grāmata CSS: galīgais ceļvedis ir noderīga, ja vēlaties apgūt CSS pamatus, sākot no atlasītājiem un specifikas līdz kaskādēm. Grāmatā ir arī detalizēti aprakstīti flexbox, pozicionēšanas un peldēšanas triki.

Šī grāmata ir arī pasūtāma, ja vēlaties uzzināt, kā izmantot CSS, lai izveidotu 2D un 3D transformācijas, pārejas un animāciju. Galīgais ceļvedis ir pieejams gan Kindle, gan mīksto vāku versijā.

Adaptīvs tīmekļa dizains ar HTML5 un CSS

Šajā grāmatā par adaptīvu tīmekļa dizainu ar HTML5 un CSS ir aprakstīts, kā izveidot nākotnei piemērotas adaptīvas vietnes, izmantojot HTML5 un CSS.

Pēc šīs grāmatas triku apguves jūsu izveidotās vietnes nevainojami darbosies galddatoros, planšetdatoros un mobilajos tālruņos. Grāmata ir uzrakstīta viegli pārskatāmā formātā, un tā ir pieejama brošēta vāka un Kindle formātā.

HTML un CSS: izstrādājiet un veidojiet vietnes

Šī grāmata par HTML un CSS ir ideāli piemērota visiem neatkarīgi no tā, vai esat hobijs, students vai profesionālis.

Rakstnieks sniedz šīs grāmatas saturu, izmantojot informācijas grafiku un dzīvesveida fotogrāfiju, lai būtu viegli uztvert dažādus jēdzienus. Resurss ir parādīts unikālā struktūrā, kas atvieglo visu nodaļu pārlūkošanu.

Mūsdienu CSS

Šī grāmata par mūsdienu CSS: apgūstiet CSS galvenos jēdzienus mūsdienu tīmekļa izstrādei, izmantojot koda piemērus, diagrammas un ekrānuzņēmumus, māca CSS.

Grāmata pirmajās nodaļās iepazīstina ar krāsām, atlasītājiem, kastīšu modeļiem, kombinatoriem un specifiku. Pēc tam grāmata iepazīstina ar teksta veidošanu, pozicionēšanu, gradientiem, apmalēm, Z indeksu un sakraušanas kontekstiem. Jūs arī apgūstat uzlabotas tēmas, piemēram, pārejas, animācijas, transformācijas, flexbox un CSS režģus.

Nobeiguma vārdi

CSS lomu mūsdienu vietnēs nevar pietiekami uzsvērt. CSS ne tikai padara tīmekļa lapas vizuāli pievilcīgas, bet arī atvieglo navigāciju dažādās tīmekļa lapās.

CSS apguve var būt vienkārša, ja izmantojat iepriekš minētos resursus. Daži no šiem kursiem ir bezmaksas, bet citi ir maksas.

Tālāk varat apskatīt CSS apkrāptu lapas izstrādātājiem un dizaineriem.