Skip to content

README.lv.md

Latest commit

 

History

History
346 lines (261 loc) · 7.79 KB

README.lv.md

File metadata and controls

346 lines (261 loc) · 7.79 KB

CSS

Noderīgās saites

  1. CSS (w3schools)
  2. Validators

Iekļaušana

  1. pašā html-elementā <span style="…">…</span>
  2. html-elementā <style>…</style> (iekš <head>…</head>)
  3. ārējā failā *.css ar <link rel="stylesheet" href="ceļš/uz/failu.css" />
    • pārlūks iekešo → ātrāk ielādējas
    • HTML atsevišķi no CSS → pārskatāmāk

Sintakse

selektors {
	īpašība-1: vērtība-1;
	īpašība-2: vērtība-2;
	īpašība-3: vērtība-3-1 vērtība-3-2 … vērtība-3-M;
	…
	īpašība-N: vērtība-N;
}
  1. Selektors — norāda uz attiecīgo/-ajiem HTML dokumenta elementiem;
  2. Īpašība — vizuālā noformējuma parametrs;
  3. Vērtība — vizuālā noformējuma parametra vērtība.

Piemērs

Selektori Info

Elementu selektori

  • sakrīt ar taga nosaukumu;
  • atlasa visus elementus.

Piemērs:

p {
	…
}

Klašu selektori

  • sākas ar .
  • veido elementu grupu

Piemērs

.red {
	…
}

ID selektori

  • sākas ar #
  • norāda uz unikālo elementu
  • nedrīkst atkārtoties

Piemērs

#info {
	…
}

Saliktie selektori Info

Konteksta selektors

Atlasa elementu/-us, kas ir iekš kāda elementa, neatkarīgi no struktūras.

Piemērs

p span {
	…
}

Child-selektors

Atlasa elementu/-us, kas ir iekš kāda elementa un ir tā tiešie pēcteči.

Piemērs

p > span {
	…
}

Kaimiņselektors

Atlasa elementu/-us, kas stāv aiz kāda elementa vienā līmenī.

Piemērs

a + span {
	…
}

strong ~ em {
	…
}

Atribūtu selektors Info

[atribūts] {
	…
}

[atribūts = "vērtība"] {
	…
}

[atribūts ^= "sākas ar"] {
	…
}

[atribūts *= "satur"] {
	…
}

[atribūts $= "beidzas ar"] {
	…
}

Piemērs

Mērvienības Info

Absolūtās

  • px (izmanto visbiežāk)
  • cm
  • mm
  • in
  • pt

Relatīvās

  • em
  • rem
  • %

Piemērs: elementa izmērs

<div class="myelmt">…</div>
.myelmt {
	width: 100px;
	height: 50px;
}

Krāsas

Skaitīšanas sistēmas info

- [Binārā][21];
- [Oktālā][22];
- Decimālā;
- [Heksadecimālā][23]:
	- *html-enities* veidošanai;
	- CSS krāsās.

  • RGB

    • HEX formātā
      • 3 cipari uz vienu krāsu
      • ja vienādi pa diviem — var lietot 3 ciparus
    • rgb(N, N, N) ar 3 decimālajiem cipariem
    • rgba(N, N, N, N) ar caurspīdīgumu

  • HSL (hue, saturation, lightness)

    • hsl(N, N, N)
    • hsla(N, N, N, N) ar caurspīdīgumu
    • info

  • krāsas vārds

    • red
    • lightblue u.t.t.
    • info

Fons info

	background: [color][image][repeat][attachment][position]
  • background
    • color
    • image
    • repeat
    • attachment
    • position
  • background-size (atsevišķi)

Piemērs

Teksts info

Krāsa

color: css krāsa

Teksta īpašības

text-align: left|right|center|justify|initial|inherit;
text-decoration: none|underline|overline|line-through|initial|inherit;
text-transform: none|capitalize|uppercase|lowercase|initial|inherit;
text-indent: 0|vērtība px/em/rem/% utt.|initial|inherit;

line-height: normal|number|length|initial|inherit;
vertical-align: baseline|vērtība px/em/rem/% utt.|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;
white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;

letter-spacing: normal|vērtība px/em/rem/% utt.|initial|inherit;
word-spacing: normal|vērtība px/em/rem/% utt.|initial|inherit;

Šrifts info

Kopējā īpašībā vērtībās jānorāda tieši tādā secībā.

font: [[font-style] [font-variant] [font-weight]]
font-size/line-height font-family|initial|inherit;

Atsevišķas īpašības:

	font-style: normal|italic|oblique|initial|inherit;
	font-variant: normal|small-caps|initial|inherit;
	font-weight: normal|bold|initial|inherit;
	font-size: medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|vērtība px/em/rem/% utt.|initial|inherit;
	font-family: nosaukums|"nosaukums vairākiem vārdiem"|initial|inherit;

Piemērs:

p {
  font: italic bold 20px/1.5 Arial, Verdana, sans-serif;
}

Saraksti info

Kopējā īpašībā vērtībās norāda jebkurā secībā.

list-style: list-style-type list-style-position list-style-image

Atsevišķas īpašības:

  1. list-style-type — marķiera tips, iespējamās vērtības:
    • nenumurētajiem sarakstiem: circle, square, disc (noklusējuma)
    • nenumurētajiem sarakstiem: decimal (noklusējuma), lower-alpha, lower-roman, upper-alpha, upper-roman utt. — sk. info
  2. list-style-position — vērības: outside (noklusējuma), inside — info
  3. list-style-image — attēls kā marķieris, info, vērtības: none (noklusējuma) vai url("ceļš/uz-failu.ext")

Piemērs:

<ul class="my-circle">
	<li>Lorem</li>
	<li>Ipsum</li>
	<li>Dolor</li>
</ul>
ul.my-circle {
  list-style-type: circle;
}

Blokmodelis (box model) info

Blokmodelis ir pamata princips tam, kā uzvedas blokveida elements HTML-dokumentā, un kā tiek noteikts tā gala izmērs.

Elementam ir 4 sastāvdaļas:

  1. Saturs (content) — pats elements, tā izmēru nosaka CSS īpašības width un height; vērtības norāda ar skaitli un mērvienību (px, em utt.):

    div {
	width: 100px;
	height: 50px;
}

  2. Iekšējā atkāpe (padding) — elementa satura atkāpe no tā malām; CSS īpašība padding, vērtību norāda ar vienu līdz četiem skaitļiem un mērvienībām pie katra:

    div.my-all {
	padding: 20px;
}

div.my-cross {
	padding: 10px 20px; /* augšā un lejā - 10px, malās - 20px */
}

div.my-waterfall {
	padding: 10px 20px 30px; /* augšā - 10px, malās - 20px, apakšā - 30px */
}

div.my-clockwise {
	padding: 10px 20px 30px 40px; /* augšā - 10px, labajā malā - 20px, apakšā - 30px, kreisajā malā - 40px */
}

    Atsevišķas atkāpes var norādīt, attiecīgi, ar īpašībām padding-top, padding-right, padding-bottom un padding-left.

  3. Robeža (border) — līnija elementa malās; kopējā CSS īpašība border, raksturojas ar:

    • treknumu border-width
    • tipu border-style
    • krāsu border-color

  4. Ārējā atkāpe (margin) — elementa atkāpe no kaimiņelementiem; CSS īpašības margin un margin-*, tāpat kā padding gadījumā.