\n Verkkosivujen suunnittelu on yksi monimutkainen teht\u00e4v\u00e4, jonka menestyksellinen suorittaminen vaatii useita ty\u00f6kaluja ja ominaisuuksia, mutta verkkosivuston suunnittelussa tarjotun tekniikan ja ty\u00f6kalujen kehittymisen my\u00f6t\u00e4 teht\u00e4v\u00e4st\u00e4 on tullut tehokkaampi ja toimiva aiempiin aikoihin verrattuna.\n<\/p>\n
\n Yksi t\u00e4rkeimmist\u00e4 ominaisuuksista, joita verkkosivuston suunnittelijan on harkittava, on CSS (Cascading Style Sheet) -sovelluksen k\u00e4ytt\u00f6.\n<\/p>\n
\n CSS tai Cascading Style Sheet on kieli, jota k\u00e4ytet\u00e4\u00e4n web-sivujen esitt\u00e4miseen verkkosivustolla, joka sis\u00e4lt\u00e4\u00e4 v\u00e4rien, verkkosivun asettelun ja fonttien k\u00e4yt\u00f6n. Se mahdollistaa esittelyn sivuston yhteensopivuuden mukaan erilaisilla pienill\u00e4 ja suurilla n\u00e4yt\u00f6ill\u00e4 tai vaikkapa tulostusprosessissa. CSS ei perustu HTML:\u00e4\u00e4n, mutta sit\u00e4 voidaan k\u00e4ytt\u00e4\u00e4 mink\u00e4 tahansa XML-pohjaisen merkityn kielen kanssa. T\u00e4m\u00e4 riippumattomuus HTML:st\u00e4 auttaa CSS:\u00e4\u00e4 yll\u00e4pit\u00e4m\u00e4\u00e4n verkkosivustoja, jakamaan tyylisivuja eri sivuilla ja muokkaamaan sivuja eri teemoihin ja ymp\u00e4rist\u00f6ihin. T\u00e4t\u00e4 pidet\u00e4\u00e4n yleens\u00e4 rakenteen tai sis\u00e4ll\u00f6n erottamisena esityksest\u00e4. Ajan my\u00f6t\u00e4 CSS:st\u00e4 on tullut suosituin web-suunnittelumenetelm\u00e4, joka hy\u00f6dytt\u00e4\u00e4 suunnittelijoita monin tavoin.\n<\/p>\n
\n Oletetaan, ett\u00e4 jos haluat tehd\u00e4 muutoksia web-suunnitteluun, sinun on muokattava jokaista verkkosivustosi sivua, mik\u00e4 vie paljon aikaa ja vaivaa. CSS:n avulla voit muokata koko sivuston ulkoasua tekem\u00e4ll\u00e4 muutoksia yhdelle verkkosivuston sivulle. Se helpottaa hakukoneprosessia, koska se ei kamppaile lataamasi sis\u00e4ll\u00f6n ”lukemisen” kanssa, koska sit\u00e4 pidet\u00e4\u00e4n puhtaana koodausmenetelm\u00e4n\u00e4, ja se my\u00f6s j\u00e4tt\u00e4\u00e4 sinulle enemm\u00e4n sis\u00e4lt\u00f6\u00e4 kuin koodia, joka on v\u00e4ltt\u00e4m\u00e4t\u00f6nt\u00e4 verkkosivustollesi. hakukoneita on p\u00e4ivitetty, mik\u00e4 tarkoittaa, ett\u00e4 selainvaihtoehtoja on enemm\u00e4n kuin koskaan. CSS-tyylisivut auttavat verkkosivuston mukauttamisessa ja varmistavat, ett\u00e4 useammat k\u00e4vij\u00e4t voivat tarkastella verkkosivustoasi haluamallasi tavalla. On monia muita muita CSS:n etuja web-suunnitteluun,\n<\/p>\n
\n Tied\u00e4mme kaikki, kuinka uuvuttavaa on numeroida jokainen otsikko ja alaotsikko verkkosivustolla monilla verkkosivuilla; teet sen manuaalisesti tai k\u00e4sikirjoituksen avulla. Mutta CSS eliminoi jokaisen otsikon ja alaotsikon numerointiyritykset CSS-laskurien avulla. CSS-laskurit sis\u00e4lt\u00e4v\u00e4t kaksi elementti\u00e4, jotka ovat ”laskurin nollaus” ja ”laskurin lis\u00e4ys”. Laskurin nollausta k\u00e4ytet\u00e4\u00e4n yleens\u00e4 laskurin nollaamiseen ja laskurin lis\u00e4yst\u00e4 k\u00e4ytet\u00e4\u00e4n numeroiden lis\u00e4\u00e4miseen. On my\u00f6s vaihtoehto ehdollinen numero, jos haluat numeron alkavan tietyst\u00e4 pisteest\u00e4, voit m\u00e4\u00e4ritt\u00e4\u00e4 nollausnumeron sill\u00e4 tavalla.\n<\/p>\n
\n Kirjasimien pirist\u00e4minen ei ole koskaan huono idea, sill\u00e4 se houkuttelee lukijaa, mutta on olemassa hyvin rajallisia vaihtoehtoja olla luovia alleviivattujen fonttien kanssa. Joskus haluamme alleviivata eri tavalla, lis\u00e4\u00e4m\u00e4ll\u00e4 siihen hieman luovuutta piste- tai katkoviivana sen sijaan, ett\u00e4 fonttien alla olisi yksinkertainen yksinkertainen viiva. K\u00e4yt\u00e4mme ”reunuksen pohjaa”, koska vaihtoehtoja ei ole, mutta ”reunuksen alaosa” ei ole tehokas, jos alleviivaamasi teksti rivittyy. CSS3 ylitt\u00e4\u00e4 esteen, sill\u00e4 se tarjoaa kolme uutta ominaisuutta tekstin koristeluun. ”Tekstin koristeluv\u00e4ri”, ”tekstin koristeluviiva” ja ”tekstin koristelutyyli” tarjoavat sinulle mahdollisuuden olla luova verkkosivuston tekstien kanssa. N\u00e4iden ominaisuuksien avulla voit muotoilla alleviivauksia, yliviivauksia ja jopa saada tekstit vilkkumaan verkkosivulla.\n<\/p>\n
\n HTML on vapauttanut meid\u00e4t kirjoittamasta oikeita kiharaisia \u200b\u200blainausmerkkej\u00e4, koska ”” -tunniste osoittaa tekstin sis\u00e4isi\u00e4 lainauksia. Mutta oletetaan, ett\u00e4 haluat lainauksessasi olevan enemm\u00e4n kuin kaksoislainausmerkkej\u00e4 tai enemm\u00e4n sis\u00e4kk\u00e4isi\u00e4 lainausmerkkej\u00e4, kohtaat esteen t\u00e4ss\u00e4 tilanteessa. Mutta CSS2:n tarjousten avulla esteit\u00e4 koskeva ominaisuus ei ole sinulle en\u00e4\u00e4 ongelma, sill\u00e4 voit m\u00e4\u00e4ritt\u00e4\u00e4 tarjoustoiveesi sen avulla, jolloin tarjouksesta tulee juuri sellainen kuin haluat sen olevan.\n<\/p>\n
\n Meill\u00e4 kaikilla on tilanne, jossa t\u00f6rm\u00e4\u00e4mme suureen taulukkoon, jonka sis\u00e4ll\u00f6n koko vaihtelee solua kohden, ja sit\u00e4 on mahdotonta tehd\u00e4 haluamallasi leveydell\u00e4, vaikka kuinka yrit\u00e4t, me kaikki lopulta ep\u00e4onnistua. CSS tarjoaa sinulle ainutlaatuisen ominaisuuden kesytt\u00e4\u00e4 p\u00f6yt\u00e4 ”taulukkoasettelulla”. Ominaisuus k\u00e4ytt\u00e4\u00e4 kiinte\u00e4n arvon ohjeita, kun k\u00e4sket\u00e4\u00e4n taulukolle kiinte\u00e4 asettelu, taulukko ja solut suunnitellaan annettujen arvojen mukaan. Sen m\u00e4\u00e4rittelee k\u00e4ytt\u00e4j\u00e4, mutta ei sis\u00e4lt\u00f6, ja kaikki selaimet tukevat t\u00e4t\u00e4 ominaisuutta.\n<\/p>\n
\n Verkkosivulla on aina jotain tietoa tai sis\u00e4lt\u00f6\u00e4, johon haluat katsojan kiinnitt\u00e4v\u00e4n huomion, mutta useilla muilla sivustolla tarjotuilla vaihtoehdoilla kyseinen tieto tai sis\u00e4lt\u00f6 rullaa yl\u00f6s tai alas. Haluasi saada t\u00e4m\u00e4 teksti k\u00e4ytt\u00e4jien luettavaksi on edelleen ep\u00e4t\u00e4ydellinen. CSS-palvelussa on ominaisuus, jonka avulla suunnittelija voi tehd\u00e4 sis\u00e4ll\u00f6n tai tiedon n\u00e4kyv\u00e4ksi, vaikka sivua vieritet\u00e4\u00e4n alas- tai yl\u00f6sp\u00e4in. Voit k\u00e4ytt\u00e4\u00e4 t\u00e4t\u00e4 ominaisuutta CSS:n kanssa k\u00e4ytt\u00e4m\u00e4ll\u00e4 ”sticky”-asentoa, jossa voit korjata tietyn verkkosivun alueen tiedoille tai sis\u00e4ll\u00f6lle ja sis\u00e4lt\u00f6 pysyy n\u00e4kyviss\u00e4, kunnes tietty\u00e4 verkkosivun aluetta vieritet\u00e4\u00e4n yl\u00f6s tai alas. Ne toimivat kuin sijoitetut elementit ennen vierityst\u00e4 ja sitten kuin kiinte\u00e4t elementit, kun vieritys ylitt\u00e4\u00e4 kynnyksen.\n<\/p>\n
\n Joskus kun lis\u00e4\u00e4t kuvan verkkosivun keskelle tai reunaan, haluat sis\u00e4lt\u00f6si ymp\u00e4r\u00f6iv\u00e4n kuvan kauniisti kuvan rajojen mukaan, mutta rajallisten vaihtoehtojen vuoksi tekstisi menee aina perustavalla, kuvan suorakulmaisen muodon perusteella. ”CSS-muodot” antaa sinulle mahdollisuuden muuttaa perustapaa ja antaa ymm\u00e4rt\u00e4\u00e4, miten haluat sen olevan. Sis\u00e4ll\u00f6n s\u00e4\u00e4t\u00e4miseen on annettu kolme ominaisuutta, jotka ovat ”muoto ulkopuolella”, ”muodon marginaali” ja ”muodon kuvan kynnys”. T\u00e4m\u00e4n vaihtoehdon avulla voit muokata sis\u00e4lt\u00f6\u00e4si kuvan ymp\u00e4rist\u00f6n kanssa haluamallasi tavalla.\n<\/p>\n
\n Monta kertaa, kun tarvitset tietoja k\u00e4ytt\u00e4j\u00e4lt\u00e4 verkkosivustolla, teet kentti\u00e4 ja tilaa kenttiin tai tilaan. Toisinaan jotkin tarvitsemasi tiedot ovat v\u00e4ltt\u00e4m\u00e4tt\u00f6mi\u00e4 ja toisinaan ne ovat valinnaisia, oletetaan, ett\u00e4 haluat v\u00e4litt\u00e4\u00e4 k\u00e4ytt\u00e4jille viestin, ett\u00e4 tiedot ovat v\u00e4ltt\u00e4m\u00e4tt\u00f6mi\u00e4 tai valinnaisia \u200b\u200bilman tekstej\u00e4, se n\u00e4ytt\u00e4\u00e4 mahdottomalta. Mutta voit k\u00e4ytt\u00e4\u00e4 CSS:\u00e4\u00e4 luokittelemaan n\u00e4m\u00e4 kent\u00e4t valinnaisiksi tai v\u00e4ltt\u00e4m\u00e4tt\u00f6miksi ja niiden rajojen v\u00e4rit, kuten kent\u00e4t, joissa punainen raja on olennainen ja kent\u00e4t, joissa on sininen raja, ovat valinnaisia.\n<\/p>\n
\n Kun et pid\u00e4 tietyist\u00e4 v\u00e4reist\u00e4, et halua niiden olevan verkkosivustollasi mill\u00e4\u00e4n tavalla, mutta jossain vaiheessa toiveesi rajoittuu, koska ei ole mahdollisuutta s\u00e4\u00e4t\u00e4\u00e4, kuten korostettaessa teksti\u00e4 verkkosivulla, ei ole. paljon vaihtoehtoja korostetun tekstin v\u00e4rin vaihtamiseen. Mutta CSS-valinnan elementill\u00e4 voit muuttaa jopa korostetun tekstin v\u00e4ri\u00e4 verkkosivustollasi ja tehd\u00e4 korostuksen haluamallasi v\u00e4rill\u00e4.\n<\/p>\n
\n Joskus on vaikeaa tarkistaa, oletko valinnut valintaruudun vai et, vain pienen rastin merkinn\u00e4st\u00e4 ruudussa, jossa verkkosivulla on useita vaihtoehtoja. K\u00e4ytt\u00e4jille voi olla eritt\u00e4in hy\u00f6dyllist\u00e4 saada toinen merkint\u00e4 verkkosivun pienen tarkistuksen lis\u00e4ksi, mik\u00e4 tekee verkkosivustosta my\u00f6s k\u00e4ytt\u00e4j\u00e4yst\u00e4v\u00e4llisemm\u00e4n. CSS kattaa my\u00f6s t\u00e4m\u00e4n n\u00e4k\u00f6kohdan ”check class” -vaihtoehdolla. Se ei vain osoita oikealla rastilla, vaan voit my\u00f6s tehd\u00e4 valintaruudun viereen valinnaisen sis\u00e4ll\u00f6n korostettuna k\u00e4ytt\u00e4j\u00e4n valitsemalla v\u00e4rill\u00e4, jotta vaihtoehdon j\u00e4tt\u00e4minen ei aiheuta virheit\u00e4 n\u00e4kyvyyden vuoksi.\n<\/p>\n
\n On eritt\u00e4in houkuttelevaa, kun verkkosivusto perustuu tarinan kaltaiseen teemaan, ja sen fontit ja ominaisuudet ovat aivan kuten silloin, kun avaat tarinan, jonka alussa on ”onpa kerran”, jonka O on suurempi kuin muut kirjaimet. Voit saada verkkosivustosi n\u00e4ytt\u00e4m\u00e4\u00e4n kauniimmalta CSS:n avulla k\u00e4ytt\u00e4m\u00e4ll\u00e4 ”first letter” -ominaisuutta, joka kohdistaa rivin ensimm\u00e4iseen kirjaimeen ja tekee siit\u00e4 suuremman isolla kirjasimella aivan kuten aiemmin luimme tarinakirjoja.\n<\/p>\n
\n Olet ehk\u00e4 n\u00e4hnyt kuvaan tai verkkosivustoon linkitett\u00e4v\u00e4n asiakirjan lataamista tai k\u00e4ytt\u00e4j\u00e4n siirt\u00e4mist\u00e4 varten toiselle sivustolle. T\u00e4m\u00e4n vaiheen saaminen oikein voi vaatia monia ty\u00f6kaluja. Mutta CSS on my\u00f6s helpottanut t\u00e4t\u00e4 vaihetta. Voit linkitt\u00e4\u00e4 verkkosi CSS:n ”content:url()” -ominaisuuteen ja lis\u00e4t\u00e4 linkin haluamaasi asiakirjaan.\n<\/p>\n
\n Kun puhumme verkkosuunnittelun luovuudesta, emme rajoitu vain luovuuteen fonttien ja tarrojen avulla, vaan voimme my\u00f6s sis\u00e4llytt\u00e4\u00e4 taustan verkkosivuston luovaan suunnitteluun. Houkuttelevan taustan omaavalla verkkosivustolla voi olla merkitt\u00e4v\u00e4 rooli pelk\u00e4st\u00e4\u00e4n verkkosivuston liikenteen lis\u00e4\u00e4misess\u00e4. Mutta jos emme vain lis\u00e4\u00e4 houkuttelevaa taustaa, vaan my\u00f6s muokkaamme taustaa saadaksemme sen n\u00e4ytt\u00e4m\u00e4\u00e4n entist\u00e4 kiehtovammalta, se antaa verkkosivuston suunnittelulle suuren sys\u00e4yksen. CSS tarjoaa parallaksiefektin, joka on tehoste, jota k\u00e4ytet\u00e4\u00e4n taustan liikkeen tekemiseen hidastettuna. Aina kun k\u00e4ytt\u00e4j\u00e4 vieritt\u00e4\u00e4 verkkosivua alasp\u00e4in, taustakuva liikkuu mukana, mutta hidastettuna luoden vaikutelman hyv\u00e4st\u00e4 web-suunnittelusta.\n<\/p>\n
\n CSS tai Cascading Style Sheet on vaikuttanut web-suunnittelumenetelm\u00e4\u00e4n suuresti tehden siit\u00e4 tehokkaamman ja vaikuttavamman. Se on tarjonnut meille niin monia ominaisuuksia, jotka ihmiset yleens\u00e4 j\u00e4tt\u00e4v\u00e4t huomioimatta, mutta jos pid\u00e4t n\u00e4m\u00e4 ominaisuudet ja ominaisuudet mieless\u00e4 ja k\u00e4yt\u00e4t niit\u00e4 hyvin, sivustosi ulkoasu erottuu muiden verkkosivustojen joukosta ja on samalla k\u00e4ytt\u00e4j\u00e4yst\u00e4v\u00e4llinen ja houkutteleva.\n<\/p>\n<\/p>\n