Vienā teikumāParādām un rediģējam elementu <style>
Šeit aprakstītais ir kā neliels triks par visiem it kā zināmo un tomēr ne visai .... Visiem zināms, ka bloku
Kas vēl? Izrādās, tas ir tāds pats elements, kā visi pārējie. Pēc noklusējuma visi pārlūki šim elementam uzstāda īpašību
<style> var izvietot dokumenta <head>
sadaļā, lai noteiktu dokumenta stilus. Tomēr realitātē šis bloks var
tikt izvietots jebkurā HTML lapas sadaļā. Gluži pareizi tas nav, tomēr
darbojas.Kas vēl? Izrādās, tas ir tāds pats elements, kā visi pārējie. Pēc noklusējuma visi pārlūki šim elementam uzstāda īpašību
display: none;.Ja mēs ievietosim šādu bloku sadaļā body un uzstādīsim tam īpašību display: block;, tad spēsim ieraudzīt konkrētajā lapā izmantotā stila pilnu kodu tādā pat veidā, kā redzam to koda redaktorā.
1 | body style { |
2 | display: block; |
3 | background: #333; |
4 | color: white; |
5 | font: 13px/1.8 Monaco, Mono-Space; |
6 | padding: 20px; |
7 | white-space: pre; |
8 | } |
Bet kas vēl? Varat izmantot HTML5 atribūtu contenteditable, kurš ļaus rediģēt CSS kodu tieši atvērtajā lapā, turklāt veiktās izmaiņas momentāni stāsies spēkā.
1 | <style contenteditable>body { |
2 | background: green; |
3 | }</style> |
Kur to var izmantot? Piemēram CSS koda demonstrācijās - nebūs viens un tas pats kods jāatkārto divreiz, lietotājs varēs to rediģēt uzreiz uz vietas un redzēt savu izmaiņu rezultātu.
