wZine

CSS - Catram Savs Stils
24 Apr 1999 by Laacz

<1.1> Ievads

Tas ir tas, kas tev ir vajadzīgs un viss:

 <head>
 ....
 <style content="text/css">
 <!--
   A{color: #000080; text-decoration: none}
   A:visited, A:active{color: #000080}
   A:Hover{color: #800000; text-decoration: underline}
 -->
 </style>
 </head>

Bet, ja vēlies saprast, kāpēc, tad lasi tālāk.

Značit tā. Ir tāda lieta - CSS, kas atšifrējās kā Cascading Style Sheets. Kas tas ir? Hehē.. Nu labi. HTML teorētiski bija domāts kā tikai un vienīgi dokumenta satura definēšanas valoda. Izvietojumam nebija nozīmes. Nu bet gudri cilvēki no World Wide Web Consortium izsadomāja tomēr ieviest šādus tādus elementus, lai varētu to visu informāciju, kuru satur dokuments arī prezentēt. Nu, bet pārāk aizrauties negribējās. Jo galu galā nedrīkst tā. Un izsadomāja CSS. Šamajam standartam i jāpalīdz izvietot elementus mazliet savādāk, nekā to nosaka HTML renderings un citas detaļas, kā arī lai paplašinātu pašas defaultās prezentācijas iespējas uz dažādiem mēdijiem - drukājot, lasot, izrunājot utt. Šai brīdī mūs interesē tikau un vienīgi attēlojums iekš browsera.

Gan uzreizi jāsaka, ka visvairāk no šī standarta (CSS 1.0 praktiski visu, CSS 2.0 ne paaraak visu :) ) uzrur Microsoft Intenet Explorer >=4.0. Netskeips grēko nežēlīgi šai sakarībā. Opera mazliet labāka.

Un tagad mazliet tuvāk pašam CSS. Sāksim uzreizi ar piemēru:

P {color: #808080}
Šamais nozīmē, ka ik katrs teksts, kurš tiek klasificēts kā paragrāfs (kurš atrodās iekš <p>..</p> tagiem) iehavos pelēku krāsu.

<1.2> Kā ta pateikt, ka šajā lapā būs cic stilz?

Stailšītus piešķirt dokumentam var vienā no sekojošajiem veidiem:

  • <link> tags, lai norādītu uz atsevišķu failiņu, kurš satur stailšītu. Failiņā ir tikai un vienīgi stailšītu apraksts, kā arī komentāri /* ... */ stilā.
       <link rel="stylesheet" href="kaut_kāds_fails.css" type="text/css">
  • Izmantojot <style> tagu iekš <head> sadaļas pašā dokumenta. Komentāri ir tam, lai citi browseri, kas nerubī šo tagu, neapjuktu.
       <style content="text/css">
       <!--
         P{
           color: #ff0000;
           font-weight: bold;
         }
       -->
       </style>
  • Izmantojot style atribūtu jebkuram dokumenta elementam <body> sadaļā.
       <span style="color: #ff0000; font-weight: bold">i want to fuck you like an animal</span>
    Jāsaka gan, ka šī metode nav ieteicama, jo tā mazliet izvaro stilu koncepciju. Piemēram, definīcija
       <h1 style="font-weight: bold">See the gun pick it up</h1>
    nonāk konfliktā ar to kā <h1> būtu jāizskatās.

CLASS kā selektors.
Klase kā selektors nozīmē to, ka rakstot

   P.maize{
     color: #808080;
   }
parastiem elementiem iekš <p> taga neko neizdarīs, bet, ja tags būs uzraxtīts kā <p class="maize">, tad gan tas viss notiksies. Var arīdzan rakstīt klasi bez tās piesaistīšanas pie kāda elementa:
   .maize{
     color: #808080;
   }
Šī definīcija par pelēkiem padarīs visus elementus ar class="maize", bet iepriekšējā - tikai paragrāfus.

ID kā selektors.
Būtība ir tāda pati kā CLASS selektoram, bet tikai ar dažām atšķirībām. Pirmām kārtām, loģiski, jau iekš definīcijas:
   #maize{
     color: #808080;
   }
Otrāmkārtām - iekš references raksta: <p id="maize">. Tāpēc arīdzan tas saucās par ID. Un trēšām kārtām, šis selektors ir paredzēts tādiem nolūkiem, kad ir jātaisa tikai viens elements ar noteiktu stilu visā dokumentā. To biš - lai viņu varētu pēc tam uzreizi arī aksessot pēc šī ID kā pēc nosaukuma.

Apvienotie selektori
Pieņemsim, ka tev ir vēlme lai visi teksti, kuri atrodās paragrāfā un ir <strong> būtu zaļi. Tu, protams, rakstīsi šādi:
   STRONG{
     color: #008000;
   }
vai arī
   STONG.zaljsh{
     color: #008000;
   }
Bet tas liks būt zaļam arī tam boldajam tekstam, kurš nebūs iekš paragrāfa, vai otrajā gadījumā - būt zaļam tekstam, kurš būs boldā, bet arī ar klasi zaljsh. Pārāk daudz liekas rakstīšanas. Ko nu? Te nāk talkā sekojoša konstrukcija:
   P STRONG{
     color: #0080000;
   }
Un man nu liekas, ka lieki būs jelkādi paskaidrojumi, ne?


Nu man liekas, ka būs pietiekoši iesākumam. Ja ir vēlme palasīties ko vairāk, var aizkāpt līdz W3C lapelei šai sakarā. Bet es no savas puses varu piedāvāt tādu kā referenci par tēmu Stailšītu īpašības u.c.



Banneru sistēma BBA
Banneru sistēma BBA