\n Web-suunnitteluun k\u00e4ytettyj\u00e4 ohjelmia on lukuisia, mutta vain harvat niist\u00e4 ovat todella ajan ja vaivan arvoisia. T\u00e4llaiset ohjelmistot tekev\u00e4t web-suunnittelusta paljon helpompaa ja nopeampaa.\n<\/p>\n
\n CSS, joka tunnetaan my\u00f6s nimell\u00e4 Cascading Styling Sheets, k\u00e4ytet\u00e4\u00e4n muuttamaan tai muuttamaan HTML- ja XHTML-kielill\u00e4 tehtyjen verkkosivustojen n\u00e4kym\u00e4\u00e4. Suurin osa verkkoselaimista tukee CSS:\u00e4\u00e4. Vaikka CSS:n uusin versio on CSS 4, CSS3 on edelleen laajalti k\u00e4yt\u00f6ss\u00e4.\n<\/p>\n
\n CSS 3 on CSS 2.1:n laajennus, ja siin\u00e4 on monia vaihtoehtoja, jotka auttavat k\u00e4ytt\u00e4j\u00e4\u00e4 suunnittelemaan verkkosivustoa nopeammin ja helpommin. CSS 3:n ansiosta suunnittelijat eiv\u00e4t ajattele CSS:n ja HTML-koodin hakkerointia toimimaan eri selaimissa ja ajanhukkaamista siihen, CSS 3 on web-suunnittelun tulevaisuus.\n<\/p>\n
\n Uutta CSS3:ssa\n<\/p>\n
\n Mahdollisuuden lis\u00e4t\u00e4 videoita ja 3D-objekteja verkkosivustollesi CSS 3:ssa on tehty monia parannuksia. Puhumme niist\u00e4 14:st\u00e4 yksityiskohtaisesti.\n<\/p>\n
\n CSS 3:n k\u00e4yt\u00f6n etuna on, ett\u00e4 se on yhteensopiva sen aikaisempien versioiden kanssa ja vanhempia versioita k\u00e4ytt\u00e4neet sivustot voidaan s\u00e4\u00e4t\u00e4\u00e4 uudelleen CSS 3:n avulla. Suurin osa verkkoselaimista on CSS-yhteensopivia, joten muokkaus avun avulla CSS 3 n\u00e4kyy t\u00e4ydellisesti, mutta jos haluat lis\u00e4t\u00e4 edellisen version verkkosivustoja muuttamatta, se on my\u00f6s mahdollista. On parempi s\u00e4\u00e4t\u00e4\u00e4 sivustosi CSS 3:n mukaan, koska CSS 3:lle rakennetut sivustot latautuvat nopeammin.\n<\/p>\n
\n Toinen suuri etu CSS 3:n k\u00e4yt\u00f6ss\u00e4 on, ett\u00e4 voimme erottaa suuret moduulit erilaisiksi pieniksi moduuleiksi, joita ei ollut saatavilla sen aiemmassa versiossa. T\u00e4m\u00e4 tekee siit\u00e4 paljon helpompaa k\u00e4ytt\u00e4\u00e4 ja parantaa k\u00e4yt\u00e4nn\u00f6llisyytt\u00e4.\n<\/p>\n
\n CSS 3:ssa on monia vaihtoehtoja, jotka ovat tehneet siit\u00e4 paljon helpompaa, n\u00e4m\u00e4 vaihtoehdot ovat v\u00e4ri, tausta ja reunat, laatikkomalli, valitsimet, tekstitehosteet, 2D- ja 3D-muunnos ja k\u00e4ytt\u00f6liittym\u00e4. Jos ihmiset ajattelevat, ett\u00e4 siin\u00e4 ei ole vanhoja vaihtoehtoja, joten heid\u00e4n tiedoksisa t\u00e4ss\u00e4 CSS 3:ssa on my\u00f6s kaikki edelliset vaihtoehdot, mutta n\u00e4m\u00e4 vaihtoehdot on jaettu pieniin toiminnallisiin osiin. Kaikki n\u00e4m\u00e4 vaihtoehdot ovat helpottaneet k\u00e4ytt\u00f6\u00e4.\n<\/p>\n
\n Jos haluat tehd\u00e4 muutoksia moduuleihin, niin CSS 3 on helpoin ty\u00f6kalu, koska yksitt\u00e4isiin moduuleihin voi tehd\u00e4 muutoksia eritt\u00e4in helposti ja integroida ne p\u00e4\u00e4j\u00e4rjestelm\u00e4\u00e4n. Ongelmat voidaan helposti tuoda esiin ja korjata tarvittaessa yksitt\u00e4isen moduulin testauksen avulla.\n<\/p>\n
\n T\u00e4m\u00e4 on helppok\u00e4ytt\u00f6isyyden kannalta paras vaihtoehto verkkosivujen suunnittelijoille, koska he voivat CSS 3:n avulla tehd\u00e4 mink\u00e4 tahansa sivuston helposti arvioitavaksi eri kanaville ja elektronisille laitteille. Sen avulla voit tehd\u00e4 verkkosivustoistasi mobiiliyst\u00e4v\u00e4llisi\u00e4, jotka ovat helposti saavutettavissa ja luettavissa.\n<\/p>\n
\n Ihmiset voivat tehd\u00e4 sen ty\u00f6skennell\u00e4 nopeammin kuin he voivat tehd\u00e4 sen aiemmassa versiossa. Se koostuu vaihtoehdosta, joka ei vaadi JavaScriptin ja CSS:n yhdistelm\u00e4\u00e4 ja s\u00e4\u00e4st\u00e4\u00e4 meille paljon aikaa tuotannossa, lataamisessa ja tuotteen viimeistelyss\u00e4. My\u00f6s l\u00e4pimenoajat lyhenev\u00e4t sen joustavuuden vuoksi. T\u00e4m\u00e4 joustavuus saavutetaan sen moduulien ansiosta.\n<\/p>\n
\n CSS 3:lla rakennetut verkkosivustot latautuvat nopeammin ja sijoittuvat korkeammalle kuin CSS:ll\u00e4 rakennetut verkkosivustot.\n<\/p>\n
\n Jokainen k\u00e4ytt\u00e4j\u00e4 on erilainen kuin muut k\u00e4ytt\u00e4j\u00e4t, joten heill\u00e4 on erilaisia \u200b\u200bvalintoja; on olemassa monia selaimia, joista k\u00e4ytt\u00e4j\u00e4t voivat valita, joten jokainen k\u00e4ytt\u00e4j\u00e4 k\u00e4ytt\u00e4\u00e4 eri selainta. Ohjelmistojen kehitt\u00e4jille on suuri haaste rakentaa ohjelmistoja, jotka toimivat kaikilla selaimilla.\n<\/p>\n
\n CSS-kehitt\u00e4j\u00e4 varmisti, ett\u00e4 he rakensivat CSS 3 -yhteensopivan monille selaimille, kaikki aiemmat CSS-versiot eiv\u00e4t olleet yhteensopivia kaikkien selaimien kanssa. Monet selaimet tukevat sen uusia versioita, vaikka se ei t\u00e4yt\u00e4 W3C-standardeja.\n<\/p>\n
\n Ongelmatonta suunnitteluprosessia varten suunnittelijat voivat k\u00e4ytt\u00e4\u00e4 CSS 3 Generatoria, mik\u00e4 helpottaa asiakkaiden toimintaa. Se on er\u00e4\u00e4nlainen ohjelmisto, joka antaa vapautta ja se on yhteensopiva monien verkkoselaimien kanssa.\n<\/p>\n
\n CSS 3:n avulla voimme tehd\u00e4 verkkosivujen taustat helpommin kuin sen edellisess\u00e4 versiossa. Kaikki t\u00e4m\u00e4 tapahtuu komentosarjojen ja ohjelmoinnin avulla.\n<\/p>\n
\n Nyt sen avulla sinun ei tarvitse tehd\u00e4 useita taustoja eri tilanteisiin, muuten se olisi ollut ongelma ja niin monen n\u00e4yt\u00f6n koon, muodon ja resoluution kanssa se olisi ollut vaikeaa.\n<\/p>\n
\n CSS 3:n vaihtoehdoilla voit tehd\u00e4 monia asioita, sill\u00e4 voit asettaa kuvan reunukseksi, sinun on ment\u00e4v\u00e4 kohti border-image ominaisuutta, jossa voit k\u00e4ytt\u00e4\u00e4 kuvaasi reunuksena. Voit jakaa kuvat yhdeks\u00e4\u00e4n osaan.\n<\/p>\n
\n Se tarjoaa monia tekstitehosteita, joista voit valita verkkosivustollesi sopivan tekstitehosteen ja varjotehosteen avulla voit parantaa verkkosivustosi suunnittelua ja siin\u00e4 on uusi ominaisuus, joka tunnetaan rajat ylitt\u00e4v\u00e4n\u00e4 ty\u00f6kaluna. N\u00e4m\u00e4 asiat olivat vaikeita CSS:n aiemmissa versioissa.\n<\/p>\n
\n Voit saada verkkosis\u00e4lt\u00f6si virtaamaan sarakkeissa monisarakkeisen moduulin avulla. T\u00e4m\u00e4 vaihtoehto s\u00e4\u00e4st\u00e4\u00e4 aikaasi, koska sen avulla sinun ei tarvitse vieritt\u00e4\u00e4 paljon vaaka- tai pystysuunnassa.\n<\/p>\n
\n Ihmiset eiv\u00e4t tied\u00e4, kuinka paljon kuvat ja animaatiot yhdess\u00e4 sivun asettelun kanssa houkuttelevat lukijoita ja pit\u00e4v\u00e4t heid\u00e4t sivullasi, heid\u00e4n pit\u00e4isi tiet\u00e4\u00e4 se. Aikaisemmin vaihtoehtoja kuvien lis\u00e4\u00e4miseen ja muokkaamiseen sek\u00e4 animaatioihin oli v\u00e4hemm\u00e4n, joten n\u00e4iden asioiden lis\u00e4\u00e4miseen CSS tarvitsi JavaScriptin apua. CSS 3:lla t\u00e4m\u00e4 ongelma ei ole vain korjattu, vaan my\u00f6s parantunut merkitt\u00e4v\u00e4sti.\n<\/p>\n
\n Siin\u00e4 on jopa kuvasuodatin, joka ei ollut saatavilla aiemmin ja vaati JavaScriptin siihen.\n<\/p>\n
\n CSS3-siirtymi\u00e4 k\u00e4ytet\u00e4\u00e4n muutosten tekemiseen n\u00e4yt\u00f6ss\u00e4 ja sen avulla voidaan muuttaa erilaisia \u200b\u200bCSS-ominaisuuksia, kuten taustav\u00e4ri\u00e4, leveytt\u00e4, pituutta, peitt\u00e4vyytt\u00e4 ja muita siirtym\u00e4tehosteiden avulla. Se antaa sinulle mahdollisuuden muuttaa lupa-ominaisuuksien muutoksia CSS-arvoissa, kuten niiss\u00e4, jotka on asetettu tapahtumaan tietyn ajan kuluessa, \n CSS 3:n ominaisuustestausversio on paljon parempi kuin aiemmat versiot, ja syyn\u00e4 on modulaarinen rakenne. T\u00e4m\u00e4 uusi CSS-versio on paljon nopeampi ja tehokkaampi vian etsimisess\u00e4 verkkosivulta, joten se vie v\u00e4hemm\u00e4n testausaikaa, vei paljon aikaa web-suunnittelun testaamiseen CSS:n aiemmissa versioissa, koska varsinaisen ongelman l\u00f6yt\u00e4minen oli eritt\u00e4in vaikeaa. .\n<\/p>\n \n CSS 3:ssa on mahdollista suorittaa yksitt\u00e4isten moduulien testi ja yhdist\u00e4\u00e4 ne koko j\u00e4rjestelm\u00e4\u00e4n; Sen etuna olisi parempi j\u00e4rjestelm\u00e4, helppo korjaus ja lyhyempi l\u00e4pimenoaika.\n<\/p>\n \n T\u00e4m\u00e4 vaihtoehto on tarkoitettu sivuasettelujen rakentamiseen, ja se sis\u00e4lt\u00e4\u00e4 useita vaihtoehtoja. Se on kaksiulotteinen j\u00e4rjestelm\u00e4, joten se pystyy k\u00e4sittelem\u00e4\u00e4n sek\u00e4 sarakkeita ett\u00e4 rivej\u00e4, mink\u00e4 vuoksi sit\u00e4 pidet\u00e4\u00e4n CSS 3:n tehokkaimpana ominaisuutena.\n<\/p>\n \n CSS3:ssa k\u00e4ytt\u00e4m\u00e4mme Calc() on \u00e4\u00e4rimm\u00e4isen tehokas laskentaty\u00f6kalu tehd\u00e4ksemme yksinkertaisen matematiikan jokaisen arvon tai numeron korvaamiseksi. Matemaattisten funktioiden laskemiseen emme vaadi sen esiprosessoreita; voimme suorittaa matemaattisia teht\u00e4vi\u00e4, kuten yhteen-, v\u00e4hennys-, kerto- ja jakolaskuja. CSS:n etuna on, ett\u00e4 voimme saada vastauksen sekayksik\u00f6ist\u00e4, kun taas esiprosessorilla pystyimme laskemaan sekoitusyksik\u00f6it\u00e4 vain, kun niiden v\u00e4lill\u00e4 oli kiinte\u00e4 suhde.\n<\/p>\n \n Se on uusin lis\u00e4ys CSS 3:een, joka on lis\u00e4tty mukauttamaan sivun asettelua eri n\u00e4ytt\u00f6kokojen ja n\u00e4ytt\u00f6laitteiden mukaan. Hyv\u00e4 puoli siin\u00e4 on, ett\u00e4 se ei k\u00e4yt\u00e4 kellukkeita ja sen konttimarginaali ei murene tietomarginaalin kanssa. K\u00e4ytt\u00e4jien mielest\u00e4 se on helpompaa kuin laatikko, mink\u00e4 vuoksi CSS 3 on suosittu k\u00e4ytt\u00e4jien keskuudessa. Toinen asia, josta ihmiset pit\u00e4v\u00e4t, on, ett\u00e4 Flexible box on puhtaampi ja yksinkertaisempi k\u00e4yt\u00f6n suhteen.\n<\/p>\n \n Vaikka 3D-muunnos ei ole suosittu ominaisuus CSS 3:ssa, se on silti eritt\u00e4in hy\u00f6dyllinen ja houkutteleva toiminto, jos se tehd\u00e4\u00e4n asianmukaisesti. T\u00e4ll\u00e4 toiminnolla voimme tehd\u00e4 3D-moduulin, jota voidaan k\u00e4ytt\u00e4\u00e4 verkkosivuilla; se on 2D-muunnosvaihtoehto z-akselilla. Translate3d, Scale3d, Rotate X, Rotate Y ja Rotate Z ovat sen t\u00e4rkeimm\u00e4t ominaisuudet.\n<\/p>\n \n CSS 3:n WebKit-kehitystiimi antoi 3D-muunnoskonseptin, ja sit\u00e4 k\u00e4ytettiin vuotta my\u00f6hemmin Safarissa ja Chromessa. Siit\u00e4 l\u00e4htien se on edennyt pitk\u00e4lle ja yleistynyt verkkosuunnittelijoille. Sen avulla voimme py\u00f6ritt\u00e4\u00e4 joitain web-sivun elementtej\u00e4 ja luoda py\u00f6rivi\u00e4 karusellikuvia, kaikki n\u00e4m\u00e4 vaihtoehdot ovat melko hyvi\u00e4 t\u00e4lle ohjelmistolle.\n<\/p>\n \n Vaikka se ei ole uusi vaihtoehto, se on silti yksi CSS 3:n parhaista ominaisuuksista ja se on v\u00e4ltt\u00e4m\u00e4t\u00f6n verkkosivuston suunnittelussa. Ei niin kauan sitten rakensimme erilliset verkkosivustot mobiililaitteille ja p\u00f6yt\u00e4koneille, mutta nyt rakensimme yhden verkkosivuston, joka on optimoitu sek\u00e4 mobiili- ett\u00e4 p\u00f6yt\u00e4koneille. N\u00e4m\u00e4 sivustot mukautuvat eri koon ja laitteen mukaan.\n<\/p>\n \n Jos joku ajattelee niin, se olisi vaikeaa, h\u00e4n j\u00e4rkyttyy kuullessaan, ett\u00e4 t\u00e4m\u00e4n toiminnon k\u00e4ytt\u00e4minen on eritt\u00e4in helppoa. T\u00e4m\u00e4n vaihtoehdon k\u00e4ytt\u00e4miseksi sinun on vain suljettava CSS-tyylit lohkoon, joka on suojattu \n CSS 3 on suosituin verkkosivujen suunnittelussa k\u00e4ytett\u00e4v\u00e4 ohjelmisto, jonka monien vaihtoehtojen avulla voit suunnitella verkkosivuja nopeammin, koska se vaatii v\u00e4hemm\u00e4n koodausta, voit k\u00e4ytt\u00e4\u00e4 sit\u00e4 helposti ja se parantaa verkkosivustojen nopeutta, jos se on suunniteltu sen kanssa.\n<\/p>\n \n T\u00e4rkeint\u00e4 siin\u00e4 on, ett\u00e4 sill\u00e4 on mahdollisuus jakaa moduuli useisiin erilaisiin pieniin osiin; t\u00e4m\u00e4 vaihtoehto helpottaa sen k\u00e4ytt\u00f6\u00e4. 3D-muunnoksen avulla voit lis\u00e4t\u00e4 nettisivuillesi jonkin 3D-vaihtoehdon, Flexboxilla voimme tehd\u00e4 sivustosta ulkoasun, joka on optimoitu jokaiselle n\u00e4ytt\u00f6kokolle ja laitteelle. Jokaisen web-suunnittelijan, joka haluaa k\u00e4ytt\u00e4\u00e4 CSS 3:a, tulisi tiet\u00e4\u00e4 n\u00e4m\u00e4 ominaisuudet.\n<\/p>\n<\/p>\n:hover<\/code>tai ominaisuusarvoja. :focus<\/code>Sinun on asetettava kaksi asiaa saadaksesi parhaan hy\u00f6dyn siirtym\u00e4tehosta.\n<\/p>\n\n
\n 9 Ominaisuuden testaus
\n<\/h5>\n\n 10 Ruudukkoasettelu
\n<\/h5>\n\n
grid-template-columns<\/code>ja joka grid-template-rows<\/code>tunnetaan eksplisiittisen\u00e4 ruudukkona. Jos m\u00e4\u00e4ritt\u00e4m\u00e4si ruudukot ovat pienempi\u00e4 kuin todelliset ruudukot, n\u00e4it\u00e4 lis\u00e4ruudukoita kutsutaan implisiittisiksi ruudukoiksi, t\u00e4m\u00e4 implisiittinen ruudukko luodaan automaattisesti.\n <\/li>\n\n 11 Calc()
\n<\/h5>\n\n 12 Joustava laatikko
\n<\/h5>\n\n 13 3D-muunnos
\n<\/h5>\n\n 14 Mediakyselyt
\n<\/h5>\ncode>@media rule<\/code>. Kun yksi tai useampi kuin yksi ehto t\u00e4yttyy, jokainen code>@media rule<\/code>lohko aktivoituu.\n<\/p>\n\n Johtop\u00e4\u00e4t\u00f6s
\n<\/h4>\n