CSS pievienošana. Kas ir CSS, kam paredzēti CSS stili? Savs css stili

Mēs jau zinām, ka, lai vietne izskatītos skaista un stilīga, mums ir jāstrādā ar CSS failu. Un, lai mūsu stili tiktu piemēroti, mums ir jāapvieno HTML fails un CSS failu.

Šīs darbības veikšanai ir vairākas iespējas: izmantojot ligzdotas stila lapas, ārējās stila lapas un iekļauto stilu.

Šodien mēs runāsim par pēdējo metodi.

Stila ievadīšana HTML tagā

Būtība šī metode lieta ir nepieciešamo reģistrāciju mēs to ievietojam tagā. Atsevišķs atribūts - stils. Šis atribūts var piemērot uz jebkuru tagu, bet tikai vietnes pamattekstā, tas ir ķermeņa iekšienē. Šī atribūta vērtība ir to stilu operatori, kas jāpiemēro konkrētajam elementam.

Piemēram, iestatīsim dažādus fontu izmērus divām dažādām teksta rindkopām:

< p style= "font-size:25px;" >Iestatiet šīs teksta daļas burtu augstumu 25 pikseļi. < p style= "fonta izmērs:15 pikseļi; krāsa:#2400ff;"> Un šim tekstam būs burti, 15 pikseļu augsti, un mēs to arī nokrāsosim zilā krāsā, lai demonstrētu vairāku stilu izmantošanu vienlaikus.

Trūkumi

Piemērs lieliski parāda, kā šāds stils aizsprosto lapas kodu.

Varat arī atzīmēt vēl dažus šīs stilizācijas tehnikas izmantošanas trūkumus. Pirmais no tiem ir stila izplatība visā dokumentā, kas nākotnē rediģēšanas procesu ievērojami sarežģīs.

Tāpat būs grūti formatēt lielu teksta apjomu. Es domāju, ka neviens nav apmierināts ar iespēju katrai rindkopai norādīt fonta lielumu, it īpaši, ja šādas rindkopas ir 40.

Pat izmantojot iebūvētos stilus, kļūst neiespējami izmantot pseidoklases, kas lielā mērā saista tīmekļa dizainera rokas.

Ir arī vērts atzīmēt neskaidrības, kas noteikti radīsies stila atribūta lietošanā. Šī neskaidrība radīsies dažādu pēdiņu izmantošanas dēļ, ievadot stilus.

Skaidrības labad apskatīsim tālāk redzamo piemēru:

< div style= "fontu ģimene: "Roboto Condensed", bez serifa> Ieraksts ir pareizs. < div style= "fontu ģimene: "Roboto Condensed", bez serifa> Tas arī ir pareizi. < div style= "font-family: " Roboto Condensed ", sans-serif" >Šis nav pareizs ieraksts. < div style= "font-family: " Roboto Condensed ", sans-serif" >Un tā arī nav taisnība

Aplūkojot iepriekš sniegtos aprēķinus, loģisks secinājums liek domāt, ka iebūvēto stilu izmantošana ir saistīta ar vairākiem būtiskiem sarežģījumiem un neērtībām.

Kad izmantot iekļauto stilu

Neskatoties uz visiem trūkumiem, iebūvētais stils netika izgudrots velti. Tīmekļa pārziņi bieži vēršas pie viņiem programmatiskā stila piešķiršanas gadījumā. Piemēram, apskatīsim šo kodu

< div id= "productRate" > < div style= "width: 40%" >

Nepieciešamā platuma ierakstīšana šim blokam būs vienkārša darbība.

Līdzīga situācija var rasties, ja ir nepieciešams aizstāt lietotāja fona attēlu (piemēram) ar administratora lomu. Šādā gadījumā img tags var nebūt piemērots. Tāpēc ir vērts atsaukties uz stila atribūtu:

< div style= "background:url(fon.jpg)" >

Arī programmētāji, veidojot uznirstošos logus, bieži pievēršas iebūvētajiem stiliem. Bieži vien šis process notiek šādi: blokam, pie kura dizaina tiek strādāts, tiek piešķirts displejs:bloks, bet pārējie logi tiek paslēpti, izmantojot display:none, lai tie vizuāli netraucētu programmētāja darbam. Šeit ir piemērs:

< div class = "element" style= "display:block" >Uznirstošais logs, kas ir izveidots kā Šis brīdis

Apakšējā līnija

Iebūvēto stilu izmantošana ir saistīta ar vairākām grūtībām un neērtībām, tomēr atsevišķu elementu projektēšanas procesā tīmekļa pārziņi bieži izmanto šo metodi, lai optimizētu savu darbu.

Šajā nodaļā mēs runāsim par to, kā ieviest CSS HTML dokumentā, tas ir, saistīt elementa stila aprakstu tieši ar pašu elementu, kādu HTML tagu.

Īstenot šo uzdevumu iespējams trīs veidos:

• Rakstiet stila aprakstu tieši pašā elementā. Šī metode ir laba tikai tad, ja tajā ir tikai viens šāds elements HTML dokuments e kam nepieciešams atsevišķs stila apraksts.
• Uzrakstiet stila aprakstu visiem identiskiem HTML dokumenta elementiem. Šī metode ir pamatota, ja lapas stils būtiski atšķiras no vietnes kopējā dizaina (savstarpēji saistītu lapu grupa).
• Izvelciet HTML elementu stila aprakstu atsevišķā CSS failā. Tas ļaus jums pārvaldīt visas vietnes dizainu, katru vietnes lapu, kurā ir norādīta atsauce uz CSS failu. Šī metode ir visefektīvākā kaskādes stila lapas izmantošana.

Apskatīsim katru iespēju tuvāk un vienlaikus iepazīsimies ar CSS rakstīšanas sintakses noteikumiem.

Stila atribūts.

Gandrīz katram HTML tagam ir atribūts stils, kas norāda, ka šim tagam ir piemērots noteikts stila apraksts.

Tas ir rakstīts šādi:

stils="">

Viss, kas tiks ierakstīts starp atribūtu pēdiņām stils un būs šī elementa, šajā gadījumā elementa, stila apraksts

Nu, piemēram:

style="color: #ff0000; font-size:12px"> šī ir rindkopa ar personisku stilu

Šajā gadījumā mēs norādījām, ka šī rindkopa ir jāparāda sarkanā krāsā un tās fonta lielums ir 12 pikseļi. Nākamajās nodaļās es detalizēti runāšu par to, kas rakstīts pēdiņās, bet tagad mēs runājam par to, kā piemērot CSS jebkuram HTML tagam.

Izmantojot to pašu principu, gandrīz katram HTML elementam varat norādīt individuālu stilu.

style="background-color: #c5ffa0">

style="color: #0000ff; font-size:18px">Viss par ziloņiem

Pērciet ziloni

style="color: #ff0000; font-size:14px">

style="color: #0000ff; font-size:16px">Izīrē ziloni

style="color: #ff0000; font-size:14px">

Bet atkal šī CSS ieviešanas metode ir laba tikai tad, ja jums ir jāiestata noteikts stils nelielam skaitam HTML elementu.

Tag (nejaukt ar tāda paša nosaukuma atribūtu), kurā ir aprakstīti mums nepieciešamie elementi.

Apskatiet piemēru, zemāk būs komentāri.

Viss par ziloņiem

Šajā vietnē jūs atradīsiet visu informāciju par ziloņiem.

Pērciet ziloni

Pie mums jūs varat iegādāties labākos ziloņus par konkurētspējīgām cenām!!

Izīrē ziloni

Tikai šeit var izīrēt jebkurus ziloņus!!

Kā redzams no piemēra, mēs panācām tieši tādu pašu rezultātu kā pirmajā gadījumā, tikai tagad katram elementam nepiešķiram stilu atsevišķi, bet ievietojam to dokumenta “galvā”, tādējādi norādot, ka visi virsraksti

,

- rindkopas būs zilas

- sarkans. Iedomājieties, cik daudz vieglāk mūsu darbs būtu, ja vienā lapā būtu simts šādu rindkopu un apmēram piecpadsmit virsrakstu, un pats dokuments būtu mazāk nosvērts, “noņemot” visus atkārtotos stila aprakstus katram atsevišķam elementam.

Tagad solītie komentāri:

Tag noteiktu HTML elementu stili tiek tieši deklarēti saskaņā ar šādu sintaksi:

Ja stila deklarācijas blokā ir norādītas vairākas elementa īpašības, tās atdala ar semikolu.

CSS atsevišķā ārējā failā.

Cik ilgs laiks nepieciešams, lai saīsinātu, mēs nonākam pie galvenās, manuprāt, CSS priekšrocības, proti, iespēja visu ar vietnes dizainu saistīto informāciju ievietot atsevišķā ārējā failā.

Tātad, atveriet notepad (vai citu redaktoru) un ierakstiet tajā šādu tekstu:

Korpuss (fona krāsa: #c5ffa0)
a (krāsa:#000060; fonta svars: treknraksts;)
a:hover (krāsa: #ff0000; fonta svars: treknrakstā; teksta noformējums: nav)
h1 (krāsa: #0000ff; fonta izmērs: 18px)
h2 (krāsa: #ff00ff; fonta izmērs: 16 pikseļi)
p (krāsa: #600000; fonta izmērs: 14 pikseļi)

Es mēģināšu jums sīkāk pastāstīt par to, ko mēs rakstījām par šo dīvaino lietu turpmākajās šīs mācību grāmatas nodaļās.

Visi! Stila apraksta fails ir izveidots! Tagad atliek tikai nedaudz, proti, piespiest nepieciešamās mūsu vietnes lapas iegūt informāciju no šī faila.

Tas tiek darīts, izmantojot tagu (savienojums). Tag daudzfunkcionāls un kalpo, lai “saistītu” HTML dokumentu ar papildu ārējiem failiem, kas nodrošina tā pareizu darbību. Tag ir sava veida saite, tikai paredzēta nevis lietotājiem, bet pārlūkprogrammām (pārlūkprogrammām). Jo pārvadā tikai oficiālā informācija tas atrodas HTML dokumenta galvā starp tagiem un pārlūkprogrammas to nerāda ekrānā.

Tag ir atribūti:

href- ceļš uz failu.
rel- definē attiecības starp pašreizējo dokumentu un failu, uz kuru ir atsauce.

• saīsnes ikona — norāda, ka iekļautais fails ir .
• stila lapa- Norāda, ka iekļautajā failā ir stila lapa.
• application/rss+xml — fails XML formātā, lai aprakstītu ziņu plūsmu.

veids- Pievienotā faila MIME datu tips.

Tā kā mēs savienojam kā ārējais fails kaskādes stila lapu, tad mūsu pakalpojuma saitei ir šāda forma:

Es atkārtoju, lai noteikti kliedētu iespējamos pārpratumus. Atribūts rel piešķirt vērtību stila lapa Tā kā mēs savienojam kaskādes stila lapu kā ārēju failu, mēs norādām ceļu uz css failu (šajā piemērā fails tiek saukts mystyle.css un atrodas blakus HTML dokumentam, kurā tas ir rakstīts šo saiti) mēs to arī norādām šo failu tekstu un satur stila aprakstu type="text/css"

Tagad mēs ievietojam šo rindiņu mūsu vietnes lapu galvenēs un izbaudām rezultātu.

mystyle.css failu
korpuss (fona krāsa: #c5ffa0)
a (krāsa:#000060; fonta svars: treknraksts;)
a:hover (krāsa: #ff0000; fonta svars: treknrakstā; teksta noformējums: nav)
h1 (krāsa: #0000ff; fonta izmērs: 18px)
h2 (krāsa: #ff00ff; fonta izmērs: 16 pikseļi)
p (krāsa: #600000; fonta izmērs: 14 pikseļi)
index.html failu

Izvēlne:

Viss par ziloņiem

Šajā vietnē jūs atradīsiet visu informāciju par ziloņiem.

Izvēlne:

Pērciet ziloni

Pie mums jūs varat iegādāties labākos ziloņus par konkurētspējīgām cenām!!

Izvēlne:

Izīrē ziloni

Tikai šeit var izīrēt jebkurus ziloņus!!

Iepriekš minētajā piemērā “Vietne par ziloņiem” pašlaik ir trīs lapas, no kurām katra ir saistīta ar vienu singlu ārējais css fails - mystyle.css. Tādējādi mēs to ievērojami “izkraujām” un visas vietnes dizainu padarījām “draudzīgu mobilajām ierīcēm”. Iedomājieties, cik kilobaitu mēs vinnētu, ja šai vietnei būtu simts pilnvērtīgas lapas!? Un arī, cik daudz laika mēs ietaupītu, ja būtu kaut kas jāmaina tā dizainā!?

Šajā nodaļā mēs apskatījām trīs veidus, kā iegult CSS HTML dokumentā. Kuru no tiem labāk izmantot?

• Izmantojiet atribūtu stils jebkuram elementam, ja šis elements, kura stils atšķiras no citiem elementiem, ir vienīgais visā vietnē.
• Izmantojiet tagu
  
  

  Šis ir virsraksts

  
  

  Šī ir rindkopa.

  
  

  Ārējais CSS

  Ārēja stila lapa tiek izmantota, lai noteiktu stilu daudzām HTML lapām.

  Izmantojot ārējo stila lapu, varat mainīt visas vietnes izskatu, veicot tikai vienu faila maiņu!

  Lai izmantotu ārējo stila lapu, sadaļā pievienojiet saiti uz to HTML lapas:

  Piemērs

  
  
  
  
  
  

  Šis ir virsraksts

  
  

  Šī ir rindkopa.

  
  

  Ārējo stila lapu var uzrakstīt jebkurā teksta redaktors. Fails nedrīkst saturēt HTML kodu, un tas ir jāsaglabā ar paplašinājumu . CSS.

  Šādi izskatās "styles.css":

  ķermenis (
  fona krāsa: pulverzils;
  }
  h1 (
  krāsa: zila;
  }
  p(
  krāsa: sarkana;
  }

  CSS fonti

  CSS krāsas rekvizīts norāda izmantojamā teksta krāsu.

  CSS fontu saimes rekvizīts norāda izmantojamo fontu.

  CSS fonta lieluma rekvizīts nosaka izmantojamā teksta lielumu.

  Piemērs

  
  
  
  
  
  

  Šis ir virsraksts

  
  

  Šī ir rindkopa.

  
  

  Robežas CSS

  CSS apmales rekvizīts nosaka apmali ap HTML elementu:

  Piemērs

  p(
  }
  

  CSS polsterējums

  CSS polsterējuma rekvizīts nosaka pildījumu (atstarpi) starp tekstu un apmali:

  Piemērs

  p(
  apmale: 1px ciets pulverzils;
  polsterējums: 30 pikseļi;
  }

  No autora: Sveiki, dārgie portāla webformyself lasītāji. Vietņu izstrādē liela nozīme ir tīmekļa resursa dizainam. Par to ir atbildīga CSS valoda (kaskādes stila lapas), par ko mēs šodien runāsim. Pareizāk sakot, par tā savienojumu un izmantošanu. Apskatīsim dažus vietnes css stilus, kas tiek izmantoti, veidojot tīmekļa lapas.

  Savieno css

  Mūsdienās gandrīz nekur varat atrast tīmekļa lapu, kas izveidota, izmantojot tikai html iespējas. Patiesībā šādu vietņu izskats būtu vienkārši briesmīgs, tāpēc, kad nepieciešamo elementu marķējums ir gatavs, tie nekavējoties jāprojektē, un tas tiek darīts ar izmantojot css V atsevišķu failu.

  Jāsaka, ka kopumā ir arī iespējas iekļaut stilus html failā. Piemēram, tos var definēt, izmantojot stila atribūtu vai to pašu tagu. To sauc par iekļautajiem stiliem. Šāda pieeja mūsdienās nav apsveicama un pārkāpj mūsdienu attīstības standartus.

  Kā to izdarīt pareizi, jūs jautājat? Lai to izdarītu, jums ir jāizveido jauns fails ar css paplašinājumu un pēc tam pievienojiet to html. Tas tiek darīts ļoti vienkārši, izmantojot saites tagu, kas ir atbildīgs par ārējo failu savienošanu. Tas tiek darīts šādi:

  < link rel = "stylesheet" type = "text/css" href = "style.css" >

  Atzīme ir viena, kā jūs jau sapratāt. Es jums pastāstīšu nedaudz vairāk par tā atribūtiem:

  rel = “stylesheet” – kopumā atribūts rel tiek rakstīts, lai noteiktu faila lomu lapā. Mūsu gadījumā loma ir stila lapa, kas ir norādīta.

  type = “text/css” – tā sauktais MIME tips, kas parasti tiek norādīts visiem iekļautajiem failiem, lai pārlūkprogramma tos pareizi interpretētu. Mūsdienu tīmekļa pārlūkprogrammās šo atribūtu var izlaist.

  href = "style.css" ir standarta atribūts, kas norāda mūsu ārējā faila adresi. Šajā gadījumā tas tiek rakstīts, pamatojoties uz faktu, ka failam ir nosaukuma stils, paplašinājums css un tas atrodas tajā pašā mapē, kurā atrodas html dokuments.

  Kā redzat, savienojot css failus, mainīsies tikai atribūts href, viss pārējais nav jāmaina. Lapai var pieslēgt tik daudz stila lapu, cik vēlaties, bet ne vairāk kā 2-4 tiek uzskatītas par optimālām, jo ​​pārāk daudz pieprasījumu serverim arī nav pārāk labi.

  Kur es varu iegūt gatavus CSS stilus vietnei?

  Nu, labi, ar savienojumu, es ceru, ka viss ir vairāk vai mazāk skaidrs. Bet jūs veidojat tukšu failu, un, lai tā pievienošanas efekts būtu redzams, jums vai nu ir jāuzraksta noteikumi pašam vai jāņem no kaut kurienes.

  

  Piemēram, internetā ir daudz bezmaksas HTML veidņu. Ja lejupielādēsiet kādu no tiem, iekšā noteikti būs gatava stila lapa ar nepieciešamajiem mājas lapas dizaina noteikumiem. Bet tas pareizi darbosies tikai savam html dokumentam. Fakts ir tāds, ka šīs divas valodas ir savienotas, izmantojot tā sauktos selektorus.

  Atlasītājs ir tikai tai raksturīga CSS valodas funkcija. Priekš kam tās vajadzīgas? Iedomājieties šo kodu:

  Virsraksta teksts

  Teksts rindkopā

  Un kā mēs, piemēram, varam izveidot rindkopu un virsrakstu CSS? Tāpēc atlasītāji tiek izveidoti, lai piekļūtu tikai tiem elementiem, kas ir nepieciešami. Piemēram:

  p( fonta izmērs: 12 pikseļi; ) .title( fonta izmērs: 36 pikseļi; )

  fonta izmērs: 12 pikseļi; Nosaukums ( fonta izmērs: 36 pikseļi;

  Mēs iestatījām fonta lielumu visām rindkopām uz 12 pikseļiem, un elementi ar virsraksta klasi (mūsu gadījumā h1) saņēma daudz lielāku fonta izmēru – 36 pikseļi. Ņemiet vērā, ka rindkopu gadījumā stili attiecas uz visām tām neatkarīgi no tā, cik daudz to ir lapā.

  Otrais atlasītājs pievērsās tikai vienam elementam - ar titulklasi. Protams, mēs varam izveidot citus elementus ar tieši tādu pašu klasi, tas nav aizliegts, un tie saņems to pašu noteikumu, bet, ja mēs vienkārši ierakstīsim html tags h1 (bez nosaukuma klases), tad tam netiks pievienoti noteikumi.

  Šis ērtais veids ļauj CSS atlasīt nepieciešamos elementus un atstāt tos, kas nav nepieciešami. Kāds tam sakars gatavie stili ko var atrast internetā? Viss tur ir saistīts ar noteiktām klasēm un identifikatoriem, tāpēc šīs tabulas nevar viegli savienot ar failiem; tās nedarbosies, ja nepieciešamajiem elementiem html nav atbilstošās klases.

  Piemēram, stila lapā mēs redzam šādu kodu:

  Nav(platums: 300pikseļi; fons: ūdens; ... ) .nav a(displejs: bloks; krāsa: #ccc; ... )

  Nav( platums: 300 pikseļi;

  No tā vien mēs varam secināt, ka kaut kur mūsu html lapā ir jābūt elementam ar nav klasi, un tajā ir jābūt saitēm. Ja tā ir taisnība, tad tiem tiks piemērots dizains un attiecīgi mainīsies to izskats. Ja šādi elementi netiek atklāti, kods tiks vienkārši ignorēts.

  Atkal, jūs varat atrast tonnu tīmeklī. gatavas veidnes, kurā var redzēt šīs klases attiecības, lai, ja kaut ko maina html, tad stila lapā ir jāveic atbilstošās darbības.

  Kā pats izveidot CSS stilus savai vietnei?

  Css nav nekas biedējošs vai ārkārtīgi grūts. Šī ir izplatīta tehnoloģija, ko cilvēki radījuši tīmekļa lapu izstrādei, un tai ir savi noteikumi. Pietiek tos saprast, un arī jūs varēsit izveidot tīmekļa resursu izskatu, izmantojot šo valodu.

  

  Vissvarīgākais nosacījums ātrai meistarībai ir pastāvīga prakse kopā ar jaunām zināšanām, kuras apgūsiet pats. Mūsējie var sniegt jums līdzīgu praksi.

  Turklāt mūsu premium sadaļā varat apgūt un apgūt CSS pamatus. Ir viens no kursiem, kas ir pilnībā veltīts šīs valodas pamatīpašībām. .

  Vissvarīgākais ir būt apņēmīgam pētīt un atmest aizspriedumus, ka tas ir ļoti grūti. Jums var palīdzēt arī bezmaksas materiāli mūsu vietnē, raksti un video pamācības. Ja vēlaties, varat tos izmantot arī, lai apgūtu pamatzināšanas, kas nepieciešamas, strādājot ar CSS.

  Ar to es atvados no jums. Izlasiet mūsu tīmekļa emuāru pats, lai uzlabotu savas zināšanas vietņu veidošanas jomā.

  > CSS pamatstili mājas lapas izveidei Parasti konteineru un to satura attēlošanas stili tiek ierakstīti stila lapā, ko parasti sauc par stile.css, lai gan to var saukt par visu, kas jums patīk. Galvenais ir tas, ka lapā tagā bija pareizais ceļš uz stila lapu

  Lai lapā iestatītu konteinera stilu, varat piešķirt tam klasi. Piemēram, konteiners

  varat piešķirt stilu ar nosaukumu chapka_saita, tad lapā konteineram tiek piešķirta klase

  saturu

  . Stilu lapā ir norādīti chapka_saita stili. Nosaukums stile.css tabulā sākas ar punktu.

  Chapka_saita (in cirtaini breketes norādīt stilus)

  Varat arī tieši norādīt konteinera stilu, ja tam nav piešķirta klase. Piemēram, stils konteineram

  saturu

  sākas ar konteinera nosaukumu

  Galvene (stilus norādām krokainajās iekavās)

  Varat arī norādīt stilus konteineriem, izmantojot identifikatoru, tad tas izskatās šādi

  saturu

  , stila lapā identifikators sākas ar hash simbolu

  #blok1 (mēs norādām stilus cirtainajās lencēs)

  Ja jums ir jānorāda virsrakstu stili konteineros, saitēs, attēlos, tas izskatās šādi.

  Chapka_saita (lokainās iekavās galvenais konteinera stils)
  .chapka_saita h1, h2 (stils virsrakstiem tagos

  Un

  šim konteineram)
  .chapka_saita a (saišu stils šajā konteinerā)
  .chapka_saita a:hover (saišu stili, kas atrodas virs kursora )
  .chapka_saita img (šī konteinera attēlu stili)
  Paši stili ir rakstīti šajās cirtainajās lencēs un atdalīti ar semikolu;

  Fontu saime: Arial; norāda konteinera fontu, ko parasti izmanto tagā , kurā viss lapas saturs

  Līnijas augstums: 1,2; iestata fonta rindiņas augstumu

  Atkāpes

  polsterējums: 10 pikseļi; iestata satura iekšējo atkāpi no konteinera robežas, šajā gadījumā atkāpe ir 10 pikseļi, vērtību var norādīt procentos vai em
  mala: 5 pikseļi; nosaka konteinera ārējās malas,
  piemale: 10px 5px 0px 15px; Atkāpes var norādīt katrai pusei atsevišķi
  piemale-apakšā: 10 pikseļi; Atkāpi var norādīt tikai vienā pusē, šajā gadījumā atkāpe no apakšas ir 10 pikseļi. To pašu var attiecināt uz iekšējo polsterējumu.

  Tālāk ir sniegts taga stilu piemērs

  Pamatteksts (piemale-kreisais: automātisks; mala-labais: automātisks; platums: 930 pikseļi; fonta izmērs: 12 pikseļi; fontu saime: Arial; līnijas augstums: 1,2; fona attēls: url (images/fon.jpg); )

  Teksta stili

  fonta izmērs: 12 pikseļi; norāda fonta lielumu, var norādīt pikseļos, procentos vai ems
  krāsa: #0000ff; norāda fonta krāsu, šajā gadījumā #0000ff blue, var norādīt vārdu, piemēram, krāsa: zaļa; tas ir, krāsa ir zaļa.
  teksta noformējums: nav; noņem pasvītrojumu, izmanto saitēm, lai noņemtu pasvītrojumu
  teksta pārveidošana: lielie burti; padara visus teksta burtus ar lielajiem burtiem; lielo burtu vietā varat rakstīt citas nozīmes un, gluži pretēji, veikt augšējo vai apakšējo pasvītrojumu vai pārsvītrojumu.
  fonta svars: treknrakstā; padara fontu treknrakstā; treknraksta vietā var izmantot citas vērtības
  teksta izlīdzināšana: pa kreisi; iestata teksta līdzinājumu, šajā gadījumā pa kreisi, konteinera kreisajā pusē, varat iestatīt vērtību conter, hight.
  teksta ēna: 1px 2px 1px 0px #000000; krāsa: #f9f5ed; ēna tekstam

  Konteineru stili

  fona krāsa: #DCDCDC; piešķir konteineram fona krāsu, šajā gadījumā #DCDCDC pelēku
  fona attēls: url (attēli/fon.jpg); iestata fona attēlu

  Apmale: 1 px ciets #E8E8E8; piešķirs apmali, frāze solid nozīmē viengabalainu apmali, #E8E8E8 ir apmales krāsa. Katrai pusei var norādīt atsevišķu apmali, piemēram, border-top: 2px solid #E8E8E8;
  apmales rādiuss: 10 pikseļi; noapaļojot konteinera stūrus, katrā stūra apmales rādiusā varat iestatīt atšķirīgu noapaļošanu: 2px 6px 10px 0px;
  box-shadow: #2C2C29 10px 10px 10px; toni konteineriem

  Platums: 926 pikseļi; norāda konteinera platumu
  augstums: 240 pikseļi; konteinera augstums

  pludiņš:pa kreisi; nospiež konteineru uz kreiso pusi, pēc noklusējuma konteineri ir sakārtoti, un, ja vēlaties sarindot vairākus blokus, tad tiem ir jāiestata rekvizīts float:left; un platums augstums: px; lai tie atbilstu galvenā konteinera platumam.
  peldēt:pa labi; tas pats, bet konteineri ir piespiesti pie labās puses.
  Ja vēlaties izveidot konteineru vidū, tad norādiet platumu un piemales ir avto , piemēram: margin-left: auto; mala-labā: auto; platums: 150 pikseļi;