Triki i sztuczki przy edycji stron HTML CSS

Edytując strony w html-u można zrobić więcej i dokładniej. Dlatego warto znać podstawy html. Poniżej zamieszczam przykłady często używanych augmentów kodu, przydatnych dla początkujących osób przy edycji treści na stronach.


Link nofollow, Target blank

Podstawowy element używany przy tworzeniu linków zewnętrznych.
Argument nofollow – link nie przenosi „siły” strony do adresu docelowego.
Argument blank – otwiera łącze w nowej karcie przeglądarki.
<a href=http://motyle-motyle.pl target=”_blank” rel=”nofollow”>Motyle</a>

Wzór: Motyle

Drugie zagnieżdżenie na liście

<ul><li>Pierwszy poziom
<ul><li>Drugi poziom</li></ul>
</li></ul>

Wzór:
  • Pierwszy poziom
    • Drugi poziom

Link z zagnieżdżeniem na stronie

<p><a href=”#link1″>Tu link do wskazanego miejsca na stronie</a></p>
<h6><span id=”link1″>Tu wskazanie zagnieżdżenia</span></h6>
Wzór:

Tu link do wskazanego miejsca na stronie

Tu wskazanie zagnieżdżenia

Twarda Spacja &nbsp;

&nbsp; – znak specjalany

Twarda spacja ma głównie dwa zastosowania. Po pierwsze niektóre CMSy po prostu usuwają podwójną spację – wówczas trzeba użyć „twardej” aby wymusić większy odstęp. Np. aby zwiększyć odstęp od znaków specjalnych.
Drugie zastosowanie jest związane z łączeniem wyrazów aby zapobiec ich automatycznemu dzielenia wyrazów w wierszach. Np. gdy na końcu wiersza zostaje jakiś przyimek. Wówczas warto oddzielić go twardą spacją z kolejnym wyrazem – tak aby stanowił ciąg znaków – bez odstępu. Wówczas przeglądarka potraktuje wyrazy jako jeden i przeniesie całość do następnego wiersza.

Wyświetlenie kodu znaku specjalnego

Jak wyświetlić kod znaku specjalnego na stronie? Używając kolejnego znaku specjalnego : )
Np. Aby wyświetlić – &nbsp; (i nie wstawić twardej spacji), trzeba wpisać &amp;nbsp;
gdzie znak & jest zastąpiony znakami &amp;.

Symbole, znaki specjalne html

&#8482;   &trade;   Trade mark sign Znak handlowy ™
&#923;   &Lambda;   Greek capital letter „lambda” Grecka wielka litera „lambda” Λ
&#931;   &Sigma;   Greek capital letter „sigma” Grecka wielka litera „sigma” Σ
&#937;   &Omega;   Greek capital letter „omega” Grecka wielka litera „omega” Ω
&#960;   &pi;   Greek small letter „pi” Grecka mała litera „pi” π
&#8592;   &larr;   Leftwards arrow Strzałka w lewo ←
&#8593;   &uarr; Upwards arrow Strzałka w górę ↑
&#8594; &rarr; Rghtwards arrow Strzałka w prawo →
&#8595; &darr; Downwards arrow Strzałka w dół ↓
&#8596; &harr; Left right arrow (horizontal) Strzałka lewo-prawo ↔
&#8629; &crarr; Downwards arrow with corner leftwards (carriage return) Strzałka w dół z rogiem w lewo (powrót karetki) (w IE6 tylko czcionka Unicode) ↵
&#8656; &lArr; Leftwards double arrow Podwójna strzałka w lewo (w IE6 tylko czcionka Unicode) ⇐
&#8657; &uArr; Upwards double arrow Podwójna strzałka w górę (w IE6 tylko czcionka Unicode) ⇑
&#8658; &rArr; Rightwards double arrow Podwójna strzałka w prawo (nie interpretuje IE6) ⇒
&#8659; &dArr; Downwards double arrow Podwójna strzałka w dół (w IE6 tylko czcionka Unicode) ⇓
&#8660; &hArr;
&#8853; &oplus; Circled plus (direct sum) Plus w kółku (bezpośrednia suma) (nie interpretuje IE6) ⊕
&#8855; &otimes; Circled times (vector product) Iloczyn wektorowy (w IE6 tylko czcionka Unicode) ⊗
&#9001; &lang; Left-pointing angle bracket (bra) Lewy ostrokątny nawias (nie interpretuje IE6 ani Opera 7.5) ⟨
&#9002; &rang; Right-pointing angle bracket (ket) Prawy ostrokątny nawias (nie interpretuje IE6 ani Opera 7.5) ⟩
&#187; &raquo; Right angle quote, guillemot right (prawy cudzysłów ostrokątny) »
&#188; &frac14; Fraction – one quarter (ułamek jedna czwarta) ¼
&#189; &frac12; Fraction – one half (ułamek jedna druga) ½
&#190; &frac34; Fraction – three quarters (ułamek trzy czwarte) ¾
&#8218; &sbquo; Single low-9 quotation mark (przecinek) ‚
&#8220; &ldquo; Left double quotation mark “
&#8221; &rdquo; Right double quotation mark (prawy cudzysłów) ”
&#8222; &bdquo; Double low-9 quotation mark „
&#8224; &dagger; Dagger (znak krzyżyka) †
&#8225; &Dagger; Double Dagger (znak podwójnego krzyżyka) ‡
&#8240; &permil; Per mille (thousand) sign (promil) ‰
&#8249; &lsaquo; Single left-pointing angle quotation mark ‹
&#8250; &rsaquo; Single right-pointing angle quotation mark ›
&#8364; &euro; Euro sign (znak Euro) €
&trade; Trademark (znak handlowy) ™
&#169; &copy; Copyright (znak praw autorskich) ©
&#170; &ordf; Feminine ordinal (liczebnik porządkowy żeński) ª
&#171; &laquo; Left angle quote, guillemot left (lewy cudzysłów ostrokątny) «
&#172; &not; Not sign (znak negacji) ¬
&#173; &shy; Soft hyphen (łącznik opcjonalny) ­
&#174; &reg; Registered trademark (zastrzeżony znak towarowy) ®
&#175; &macr; Macron accent kreska górna) ¯
&#176; &deg; Degree sign (znak stopnia) °
&#177; &plusmn; Plus or minus (plus-minus) ±
&#178; &sup2; Superscript two (2 w indeksie górnym) ²
&#179; &sup3; Superscript three (3 w indeksie górnym) ł
&#180; &acute; Acute accent (akcent silny) ´
&#181; &micro; Micro sign (grecka litera mi) µ
&#182; &para; Paragraph sign (znak akapitu) ¶
&#8743; &and; Logical and (wedge) Operator logiczny i (nie interpretuje IE6) ∧
&#8744; &or; Logical or (vee) Operator logiczny lub (nie interpretuje IE6) ∨
&#8734; &infin; Infinity Nieskończoność ∞
&#8727; &lowast; Asterisk operator Operator gwiazdka (w IE6 tylko czcionka Unicode) ∗
&#8730; &radic; Square root (radical sign) Pierwiastek kwadratowy √
&#8776; &asymp; Almost equal to (asymptotic to) …prawie równe… ≈
&#8800; &ne; Not equal to …różne od… ≠
&#8801; &equiv; Identical to …równe tożsamościowo… (identyczne) ≡
&#8804; &le; Less-than or equal to …mniejsze lub równe… ≤
&#8805; &ge; Greater-than or equal to …większe lub równe… ≥
&#8834; &sub; Subset of …jest podzbiorem… (nie interpretuje IE6) ⊂
&#8835; &sup; Superset of …jest zbiorem nadrzędnym dla… (nie interpretuje IE6) ⊃
&#8836; &nsub; Not a subset of …nie jest podzbiorem… (w IE6 tylko czcionka Unicode) ⊄

Kolorowy Tekst – Gradientowe przejście kolorów na tekście

Aby uzyskać efket jak w nagłówku trzeba nadać classę do wybranego elementu.
Np. h4 sytle=”kolorowo”
Nastepęnie w stylach opisać klasę
.kolorowo {
font-size: 25px;
background: -webkit-linear-gradient(left, #0598e5 20%, #00e29c 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
i gotowe


Efekty animacji tekstów


Więcej
https://freefrontend.com/css-text-animations/ https://freefrontend.com/css-text-effects/ Inne:



Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *