CSS Atpakaļ uz pamatiem Terminoloģijas paskaidrojums
CSS vai Cascading Stylesheets aizpilda mūsu web dizaina noteikumu definēšanas valodu. Mākslinieki visur izmanto CSS katru dienu, lai izveidotu, organizētu un šifrētu noteikumu kopumu pamata vietnes izkārtojumiem. Tas ir kļuvis par vispopulārāko valodu front-end dizainam un nodrošina pārsteidzošas spējas ar neseno CSS3 atbrīvošanu. Bet ko tas viss nozīmē??
Pati valoda jau ir pilnībā izstrādāta jau dažus gadus. Apjukums var rasties galvenokārt nepareizas komunikācijas un līdzīgu terminu nepareizas izmantošanas dēļ. CSS tabulai sniedz daudz jaunu koncepciju. Mēs aptversim dažas no populārākajām terminoloģijām, lai apgūtu CSS guru.
Kāpēc specializēties ar CSS?
Šis jautājums ir uzdots pirms un pat 2011.gadā mēs varam redzēt tos pašus rezultātus. CSS ir spēcīga valoda, kas neietver skriptu vai programmēšanu. Tā ir stila valoda, jo īpaši kods, ko izmanto, lai aprakstītu, kā tīmekļa vietnei jārīkojas.
Izmantojot CSS, mēs varam tieši manipulēt ar atsevišķu HTML elementu atribūtiem. Visus blokus, punktus, saites un attēlus var ietekmēt CSS noteikumi. Prezentācijas semantikas rafinēšana tīmeklī vienmēr ir bijusi milzīgs solis. Tas ir galvenais iemesls, kāpēc CSS joprojām ir vadošais spēlētājs dizaineriem - neviens nav izveidojis neko labāku!
Rekvizīti un vērtības
Tas ir vienkāršākais veids, kā ielauzties CSS. Visi kodi iedalās divās darbībās: elementa izvēle, lai piemērotu dizainu un ko pieteikties. Pēdējais ir izveidots, izmantojot īpašību / vērtību pārus.
Kā piemērs krāsa: sarkana; ir ļoti vienkāršs īpašuma / vērtības pāris. Mūsu izmantotais īpašums ir krāsa kas ļauj mums nodot jebkuru pieņemamu vērtību lai mainītu teksta krāsu. Tas varētu būt arī sešstūra kods vai RGB (sarkanzaļš-zils) krāsu dati. Daudzas reizes dizaineri nepiemin vērtību vērtības, jo tas var būt maldinošs.
Īpašības un vērtības patiešām ir viena ideja. Katrai īpašuma deklarācijai ir nepieciešama vērtība, un vērtības pašas par sevi ir bezjēdzīgas. Tiešsaistes dokumentācijā ir daudz dokumentu, kas pārsniedz daudzās dažādās īpašības un kā tie ietekmē HTML elementus. Es ieteiktu iegādāties CSS atsauces grāmatu no jebkuras tuvumā esošas grāmatnīcas. Tie ir diezgan lēti un tur visvairāk informācijas, kas jums nepieciešama.
Selektora vērtības
Atlasītāji ir nepieciešami, lai pabeigtu visu CSS koda līniju. Tas ir tas, ko mēs paziņojam, lai noteiktu, kāda veida elementu mēs mērķējam. Ir daudz selektoru, un daudzi ir tik viļņoti, ka vidējam dizaineram prasmes nav nepieciešamas. Pārbaudiet W3 selektoru, ja vēlaties uzzināt vairāk.
Vienkāršākais veids, kā sākt stila definīcijas, ir izmantot tukšus elementus kā īpašumu selektorus. Tas nozīmē manipulēt ar root kodu, piemēram, p par punktiem, div dalījumiem un pat ķermeni un html var izmantot, lai manipulētu ar visu tīmekļa lapas dokumentu. Tālāk sniegts ātrs piemērs visiem rindkopu elementiem.
p font-family: Arial, sans-serif; krāsa: # 222; font-weight: bold;
CSS reālais svars ir tas, cik precīzs var būt atlasītājs. Labākais veids, kā sasniegt mērķtiecīgus stilus, ir 2 metodes, kas pazīstamas kā klases un ID. Tās ir parastas idejas HTML, kur jūs varat iestatīt jebkuru elementu ar ID un klases vērtību, izmantojot atribūtus. Tad, izmantojot CSS, ir vienkārši piemērot stilus šim konkrētajam blokam.
p # firstpar fonta lielums: 14px; / * stila punkts ar ID "firstpar" * / p.comment font-size: 1.0em; līnijas augstums: 1.3em; / * stila punkts (-i) ar "komentāru" kategoriju * /
Garuma vienības un vērtības
Bieži vien šie noteikumi sajaucas, nevis liels pārsteigums. Vērtības tika izskaidrotas agrāk kā izvietojumu, ko izmantojam, lai aprakstītu īpašumu. Garuma vienības ir arī vērtības, kas tiek izmantotas, lai aprakstītu īpašumu.
Atšķirība ir tāda, ka šīm vērtībām ir nepieciešami skaitliski dati, un tāpēc tiem jāatgriežas kādā formā. Pikseļi (pikseļi) ir visizplatītākie, un tos var izmantot lielākai daļai: platums / augstums, fonta lielums, polsterējums / margas, lai nosauktu dažus.
Izņemot tos, jūs varat redzēt procentus (%), ko bieži izmanto šķidruma izkārtojumi. Nosakot platuma vērtības līdz procentam, kompilators pieņems, ka 100% būs viss tīmekļa pārlūkprogrammas platums. Tas dod dizaineriem lielu precizitāti, pielietojot stilu izkārtojuma struktūrām un pat lapu tipogrāfijai.
Deklarācijas bloks
Tagad, kad visi šie termini ir apvienoti, mēs beidzot varam apspriest stilu lapu pamatideju. Kodu blokus izmanto, lai raksturotu tematu jomas un norādītu elementu detalizāciju. Piemēram, zemāk ir vienkāršas navigācijas konteinera koda rinda:
div # nav displejs: bloks; platums: 100%; polsterējums: 3px 6px; margas apakšā: 20px;
Vienkāršākais veids, kā parādīt šo kodu, ir rindas rekvizīti pēc kārtas. CSS izstrādātāji ir izmantojuši kodu blokus, lai pārtrauktu katru īpašumu savā līnijā. Šī programma ne tikai aizņem daudz vairāk vietas, bet samazina spēju “nosmelt” jūsu lapu, lai atrastu tieši to, kas jums nepieciešams.
Labāks veids, kā izjaukt kodu blokus, ir atdalīt spirālveida elementus uz to pašu, kad tie sasniedz slieksni. Šis skaitlis ir personisks un atšķirīgs starp izstrādātājiem. Tas ir apgriešanās punkts, kur loģika diktē to muļķīgi, lai saglabātu visu vienā rindā, galvenokārt lasāmības dēļ.
Zemāk es rakstu visu navigācijas īpašību bloka kopiju. Šī prakse saglabā dziļākus elementus tajā pašā vietā, lai visi navigācijas elementi būtu daudz vienkāršāki.
div # nav displejs: bloks; platums: 100%; polsterējums: 3px 6px; margas apakšā: 20px; div # nav ul list-style: nav; displejs: bloks; div # nav ul li float: pa kreisi; labās malas: 10px; fonta lielums: 12px; div # nav ul li a krāsa: # 0f0f0f; teksta apdare: nav; displejs: inline-bloks; polsterējums: 2px 5px;
Iespējamie sasniegumi no CSS2 / CSS3
Jaunākajos virsrakstos nesen tika runāts par pārsteidzošajām CSS3 priekšrocībām. Bet kas patiešām ir mainīts valodā? Skaidrs, ka vecais kods joprojām darbosies labi. Tas vismaz parāda pilnīgu savietojamību starp kompilatoriem (vienmēr ir laba lieta).
Galvenās atšķirības galvenokārt ir saistītas ar jauniem īpašumiem. Tie ļauj noapaļotiem stūriem un pilienveida ēnām padarīt pārlūkprogrammā. CSS3 piedāvā arī jaunus instrumentus dokumenta krāsu aprakstīšanai. HSL (Hue-Saturation-Lightness) ir jaunākais papildus HSLA, kas ietver Alpha kanālu, lai samazinātu dūmainību.
Atribūtu selektori ir milzīgs solis uz priekšu taisnās iezīmēšanas stilā. Izmantojot šo koda stilu, varat atlasīt konkrētu elementa nosaukumu, kurā ir atribūti ar noteiktām vērtībām. Tie galvenokārt ir noderīgi, strādājot ar atzīmi, piemēram, XML, kur nav standarta dizaina principu, lai manipulētu ar mezgliem. Tālāk redzamais piemērs ir salīdzinoši vienkārša ideja:
div [attrib ^ = "1"] / * stili šeit * /
Iepriekš minētais kods ir CSS selektoru bibliotēkas daļa. Tas ietekmētu visus div elementus ar atribūtu “atrib” kurai ir arī vērtība “1”. Ja tas joprojām ir mulsinoši, atsauci uz zemāk redzamo piemēru, lai noskaidrotu. Teorētiski šiem diviem selektoriem jāveic tādas pašas darbības.
p [id ^ = "primārais"] / * stili * / p # primārais / * stili * /
Secinājums
Pēc dažu pārmērīgi neskaidru terminu nojaukšanas CSS šķiet pastaigāties parkā. Valoda ir ļoti intuitīva un iesācēji var sākt projektēšanu pirmajās pāris stundās. Tas padara CSS tik populāru starp tīmekļa izstrādātājiem.
CSS3 priekšrocības tikko sākās. Jauno pāris gadu laikā attīstās interneta tendences parādīs mums, cik daudz kontroles mēs patiešām esam pār mājas lapas dizainu. CSS šobrīd lepojas ar dominējošo valodu priekšējā tīmekļa vietnes stilam. Praktizēšana pat rudimentāros vidēja līmeņa prasmēs var radīt bagātīgu dizaina pieredzi un papildu zināšanas.
