Tyylisivutekniikalla on kaksi toimintoakun teet HTML-sivuja. Ensinnäkin sen avulla muodostetaan sivuston yksittäisten elementtien sijainti. Toiseksi se tekee lohkoista visuaalisen vetovoiman käyttäjälle. Toinen toiminto toteutetaan eri tavoin. Yksi niistä korostaa. CSS tarjoaa tälle ominaisuuden. teksti-koristelu.
Ominaisuustietuemääritys
Hyödynnä omaisuutta teksti-koristelu yksinkertaista. Riittää, että kirjoitat seuraavan rivin elementille tyylitaulukon koodiin:
teksti-koriste: attribute_value;
Sen sijaan, että "znachenie_atributaCSS-eritelmä tarjoaa useita vaihtoehtoja:
- alleviivaus - rivi sijaitsee tiukasti tekstin alla;
- overline - rivi kulkee tekstin päällä;
- ei mitään - kaikkien koristeellisten tehosteiden poistaminen;
- perivät - ottaa emoelementin arvon.
Kaikkia mahdollisia tallennusmuotoja ei ole annettu yllä, koska tämä ominaisuus määrittelee paitsi alleviivatun CSS: n myös muut vaikutukset, esimerkiksi tekstin ”vilkkumisen” tai sen ylittämisen.
Hyperlinkin suunnitteluesimerkkejä
Verkkosuunnittelun ja -ohjelmoinnin aloittelijatherää kysymys: miksi tehdä tekstin alimmalle riville? Internet-teknologioiden aikakauden kynnyksellä tämä korostamismenetelmä osoitti käyttäjälle, että hänen edessään on hyperlinkki - teksti, joka napsautettaessa siirtyy uudelle sivulle.
Oletusarvoisesti hyperlinkkeillä on omaisuus alleviivaus. Käytännössä tehtävänä on poistaa rivi inaktiivisista elementeistä ja tehdä siitä näkyvä, kun käyttäjä siirtää hiiren osoittimen. Tässä on esimerkki koodista, joka poistaa CSS-linkin alleviivauksen käytöstä:
{teksti-koristelu: ei mitään;}
Aktiivisissa linkkissä käytetään seuraavaa merkintää:
a: leiju {teksti-koriste: alleviivaus;}
Koristeellinen alleviiva edistyneelle
Vakioominaisuus teksti-koristelu on useita rajoituksia:
- rivin väri ei eroa linkin tekstin väristä; et voi erottaa niiden "väritystä";
- vain kiinteää viivaa käytetään alleviivauksena. CSS ei tarkoita muiden piirtotyylien käyttöä.
Mutta erikoistekniikat auttavat kiertämään tekstin klassista muotoilua. Ensimmäisessä tapauksessa ylimääräinen tunniste <jänneväli>.
Esimerkiksi:
hyperlinkit
a>. n>
Tämän seurauksena hyperlinkin sana kirjoitetaan sinisellä sivulla ja rivin väri on punainen.
Toinen edistynyt tapa toteuttaa CSS-alleviivaus on - border-bottom. Seuraava esimerkki selittää sen käytön:
a {reunus pohja: 1px kiinteä punainen;}
Tulos on sama kuin aiemmassa esimerkissä. Mutta tällä menetelmällä on tärkeä etu. Linjan värin muuttamisen lisäksi (punainen on nyt asetettu - punainen), sen piirtotavan muutos on mahdollista:
- pilkullinen - korostaa pisteen;
- romutti - linja koostuu iskuista;
- kaksinkertainen - piirtää kaksinkertaisen viivan.
Joten ominaisuus raja-pohja toiminnallisempi. Sen lisäksi, että se näyttää koristeellisen viivan tekstin alla, se mahdollistaa sen ulkoasun mukauttamisen.
