View source for CSS:Il linguaggio per Tips ed es

=Posizionamento=
Significati del posizionamento: statico, Relativo, fisso e Assoluto: [https://www.quora.com/How-do-you-make-one-div-layer-show-over-another-in-HTML-CSS quora.com] <br />
'''Change the positioning'''<br />
Instead of the default state of position: ''static'', you would use a positioning value that allowed you to change the offset position of the element. These can affect content flow.

* position: '''relative''' (position the element relative to where it would be in the normal flow)
* position: '''fixed''' (position the element relative to the window)
* position: '''absolute''' (position the element relative to a parent element that's been positioned)
<br />
After using one of those three positioning options, you could then use the '''top''' and '''left''' properties to put the element where you want.

=Regioni a scomparsa=
Esempi per implementare il classico "Read more". Per ricerche: "text fade out effect when it overflows", "Text Fade Out / Read More Link", Dynamically shortened Text with “Show More”

* Da [https://css-tricks.com/text-fade-read-more/ css-tricks.com], [https://css-tricks.com/examples/ReadMoreFade/ demo]
* Da [https://www.vikramrao.in/7/CSS:-Creating-a-text-fade-out-effect-when-it-overflows vikramrao]

<syntaxhighlight lang="html5">
</syntaxhighlight>
=Decorazione elementi HTML=
<syntaxhighlight lang="css">
body {
    background-color: lightblue;
}
h1 {
    color: white;
    text-align: center;
}
p {
    font-family: verdana;
    font-size: 20px;
}
</syntaxhighlight>
=Classi=
<syntaxhighlight lang="html5">
   <div class="editor-row curFocus">
       <div class="editor-label">
           <label for="FirstName">First Name</label>
       </div>
       <div class="editor-field">
          <input class="text-box single-line valid" id="FirstName" 
                name="FirstName" type="text" value="Nancy" maxlength="20">
       </div>
   </div>
</div>
</syntaxhighlight>
Le classi sono referenziate col .
<syntaxhighlight lang="css">
.editor-row {
  width: 100%; display: table-row;
}
.editor-label {
  padding-left: .4em; width: 40%;
}
.editor-label, .editor-field {
   padding-right: .4em; padding-bottom: .2em; padding-top: .2em;
   display: table-cell;
 }
</syntaxhighlight>

=Mappa e Link=

----
[[CSS]]

----
[[HTML]] | [[JavaScript]] | [[JQuery]]

----
'''Parole chiave''':