Ko jūs jau zinat
Pirms turpināt, jums ir jābūt pamata izpratnei par HTML:
Ja jūs vēlaties mācīties šos standartus, tad varat apskatīties info šeit un papilds w3schools
mājas lapā .
Kas ir CSS?
- CSS C ascading S tyle S heets
- Stils nosaka , kā parādīt HTML elementus
- Stili tika pievienoti HTML 4.0 standartā lai atrisināt dizaina problēmu
- Ārējāis Style Sheets - var ietaupīt daudz darba
- Ārējie Style Sheets tiek saglabāti CSS failos (mystyle.css)
CSS Demo
HTML dokumentu var parādīt ar dažādiem stiliem: Varat apskatīt, kā tas darbojas šeit!
Stili atrisina lielu problēmu
HTML nekad nav bijis paredzēts, lai saturētu tagus formatējot dokumentu.
HTML mērķis bija definēt satura dokumentu, piemēram:
<h1> Tas ir virsraksts </ h1>
<p> Tā ir rindkopa. </ p>
Kad tika pievienots tags <FONT>, un krāsu īpašības, tika pievienoti HTML 3.2 specifikācijā, tas sākās murgs web izstrādātājiem. Attīstības lielu tīmekļa vietnēm, kur fonti un krāsas informāciju, tika pievienoti katru lapu, kļuva ilgs un dārgs process.
Lai atrisinātu šo problēmu, World Wide Web Consortium (W3C), kas izveidota CSS.
No HTML4.0 , viss formatējums var noņemt no HTML dokumentā, un uzglabā atsevišķā CSS failā.
Visas pārlūkprogrammas atbalsta CSS šodien.
CSS ietaupa daudz darba!
CSS definē KĀ HTML elementi tiek parādīti.
Stili parasti tiek saglabāti ārējos. Css failos. Ārējie stila lapas ļauj jums mainīt izskatu un izkārtojumu visa tīmekļa vietnes lapas, vienkārši rediģējot vienu failu!
CSS sintakse
CSS noteikums ir divas galvenās daļas: selektors, un viena vai vairākas deklarācijas:
Selektors parasti ir tieši tas HTML elements, kuru jūs vēlaties rediģēt, piemērojot tam stilu.
Katra deklarācija sastāv no selektora (h1), no paramtra(Property). Parametri vienam selektoram
var būt vairāki!
Īpašība ir stila atribūts, kuru vēlaties mainīt.
CSS Piemērs
CSS deklarācija vienmēr beidzas ar semikolu, un deklarācija grupas ieskauj cirtainas iekavās:
p {color:red;text-align:center;}
Lai padarītu CSS uztveramību, jūs varat uzdot vienu parametru katrā rindā, piemēram:
Piemērs
p
{
color: red;
text-align: center;
}
šeit p ir selektors, color ir parametrs(property), un "red" - parametra vērtība
Par id un klases Selektoriem
Papildus nosakot stilu HTML elementiem, CSS ļauj norādīt savu selektoru, ko sauc par "id" un "klases".
Id selektors
Id selektors tiek izmantots, lai norādītu stilu, par vienu, unikālu elementu.
Id selektoru izmanto id atribūts HTML elements, un ir noteikts ar "#".
Stils noteikums turpmāk tiks piemērots elements ar id = "para1":
Piemērs
#para1
{
text-align:center;
color:red;
}
kur (#para1 ir unikāls elements, kuram tiek piemērots stils, un HTML tas tiek definēts
sekojoši ( <div id="para1">.................</div>
Izmēģiniet to pats »
 Nav ieteicams sākt ID vārdu ar numuru! Tas nestrādās Mozilla / Firefox.
Klase selektors
Klases selektoru izmanto, lai norādītu stilu grupas elementiem. Atšķirībā no id atlasītāju, klases selektors ir visbiežāk izmantots vairākiem elementiem.
Tas ļauj iestatīt īpašu stilu daudziem HTML elementiem tajā pašā klasē.
Klases selektors izmanto HTML klases atribūts, un ir noteikts ar "."
Šajā piemērā visi HTML elementi ar class = "center" būs izlīdzināts centrāli:
Jūs varat arī norādīt, ka visi elementi ar identifikatoru piemēram <h2>, būs formatēti sekojoši:
h2 {color: green; }.
Šajā piemērā zemāk, visi p elementi ar class = "centrs" būs izlīdzināts centrāli:
Piemērs
p.center {text-align:center;}
Ja pārlūkprogramma tiek izmantotas stila lapas(*.css), tas formatēs dokumentu saskaņā ar to.
Trīs veidi, kā ievietot CSS
Ir trīs veidi, kā iekļaut stilu lapu:
- Ārējā stila lapas
- Iekšējā stila lapas
- Inline style
Ārējā Style Sheet
Ārējā stila lapa ir ideāla, ja stils ir piemērots daudzām lapām. Ar ārējo stilu lapas, jūs varat mainīt izskatu visu vietni, mainot vienu failu. Katrā lapā ir saite uz stila lapas, izmantojot <link> tag. <link> Tag iet iekšā galvenes sadaļā:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Ārējo stilu lapas var rakstīt jebkurā teksta redaktorā, es iesaku Notepad++. Fails nesatur html tagus. Jūsu stilu lapas būtu saglabātas ar .css paplašinājumu. No stila lapas faila piemērs ir parādīts zemāk:
---------------c:/myDocuments/style.css------------------------------------
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
-----------------------------------------------------------------------------------
Nav pievienotu atstarpi starp īpašuma vērtību un vienības (piemēram, margin-left: 20 px;). Pareizi ir: {margin-left: 20px;}
Iekšējā Style Sheet
Iekšējā stila lapa jāizmanto, kad vienā dokumentā ir unikāls stils. Lai definētu iekšējo tad html dokumentā sadaļā <head>...</head>, izmantojot <style> tagu, piemēram, šādi:
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Inline stili
Inline stila zaudē daudz no stila lapas priekšrocībām, sajaucot saturu ar prezentāciju. Izmantojiet šo metodi, taupīgi! Tikai ja tiešām ir kāds unikāls web lapā, bet jūs negribat rediģēt galveno css failu.
Lai izmantotu inline stilus jūs izmantot stila atribūtu attiecīgajā tag. Stils raksturlielumu var saturēt CSS īpašību. Piemērs parāda, kā mainīt krāsu un kreiso starpību par punktu:
<p style="color: sienna; margin-left: 20px;">This is a paragraph.</p>
Vairāki Style Sheets
Ja dažas īpašības ir noteikti par to pašu selektoru dažādu stilu lapas, vērtības tiek pārmantotas no konkrētāku stila lapas.
Piemēram, ārējā stila lapas ir šādas īpašības H3 selektora:
h3
{
color:red;
text-align:left;
font-size:8pt;
}
Un iekšējo stila lapas ir šādas īpašības H3 selektora:
h3
{
text-align:right;
font-size:20pt;
}
Ja ar iekšējo stila lapas lapā ir saites uz ārējo stilu lapas, kas attiecas H3 īpašības būs:
color:red;
text-align:right;
font-size:20pt;
Krāsa ir mantots no ārējā stila lapas un teksta saskaņošana un fonta izmēra aizstāj ar iekšējo stila lapas.
Papildus informācija ir pieejama šeit!
|
