Thumbnail.

Thumbnail.

Mai obișnuit

Mai puțin obișnuit

Italică

Italică

Cu accent

Zdrobit

Caracteristicile atributului de stil

În plus față de etichetele descrise, există încă mai multe modalități de a schimba fontul în HTML. Unul dintre ele este utilizarea atributului universal de stil. Folosind valorile proprietăților sale, puteți seta stilul de afișare a fontului:

1) Font-Family - Proprietatea stabilește familia de fonturi. Puteți enumera mai multe valori.
Schimbarea fontului în HTML la următoarea valoare va apărea dacă familia anterioară nu este instalată în sistem de operare Utilizator.

Sintaxă de scriere:

font-Family: Numele fontului [, numele fontului [, ...]]

2) Dimensiune font - Dimensiunea este setată de la 1 la 7. Aceasta este una dintre principalele modalități la modul în HTML puteți mări fontul.
Sintaxă de scriere:

dimensiune font: dimensiune absolută Dimensiune relativă Valoare | Interesul | moşteni.

Dimensiunea fontului poate fi de asemenea setată:

• În pixeli;
• În valoare absolută ( xx-mic, x-mic, mic, mediu, mare);
• În procente;
• Puncte (PT).

Font-dimensiune: 7

Dimensiune font: 24px

Dimensiune font: x-mare

Font-dimensiune: 200%

Font-dimensiune: 24pt

3) Stilul de font - stabilește stilul de scriere a fontului. Sintaxă:

font-stil: normal | Italice | Oblic | moşteni.

Valori:

• scrierea normală;
• italic - italic;
• oblic - font cu o panta spre dreapta;
• moșteniți - moștenește scrisul elementului părinte.

Un exemplu de modificare a fontului în HTML utilizând această proprietate:

font-stil: moștenire

font-stil: italic

font-stil: normal

font-stil: oblic

4) Varianta font - traduce toate literele majuscule la titlu. Sintaxă:

font-varianta: normal | Capace mici | moşteni.

Un exemplu de modificare a fontului în HTML de această proprietate:

font-varianta: moștenire

font-varianta: normal

varianta de font: capace mici

5) Greutatea fontului - vă permite să setați grosimea scrisului textului (saturație). Sintaxă:

greutatea fonturilor: Bold | Bolder | mai ușoară | Normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Valori:

• bold - instalează un font html îndrăzneț;
• mai îndrăzneț - gras față de normal;
• bricheta este saturată în raport cu normal;
• normal - scriere normală;
• 100-900 - Grosimea fontului este stabilită în echivalentul numeric.

greutate font: Bold

greutate font: Blower

font-greutate: mai ușoară

greutate font: normal

greutate font: 900

greutate font: 100

Proprietatea fonturilor și culoarea fontului HTML

Font este o altă proprietate de containere. În interiorul în sine, a combinat valorile mai multor proprietăți concepute pentru a schimba fonturile. Sintaxă font:

font: Fotografie de font de dimensiune font | moşteni.

De asemenea, fonturile utilizate de sistem în inscripții pe diverse controale pot fi specificate ca valoare.

• caption - pentru butoane;
• icon - pentru icoane;
• mENU - MENU;
• mesaj-box - casete de dialog;
• subtitrare mică - pentru controale mici;
• stare-bar - String de stare Font.

font: Icon.

font: Caption

font: meniu.

font: caseta de mesaje

subtitrare mică.

font: Stare-bar

font: italic 50px Bold "Times New Roman", ori, serif

Pentru a seta culoarea fontului în HTML, puteți utiliza proprietatea de culoare. Vă permite să setați culoarea ca utilizare cuvinte cheieși format RGB. Precum și sub formă de cod hexazecimal.

Adesea în grabă atunci când adăugați materiale pe un site web sau, de exemplu, crearea subiect nou Pe forum, utilizatorul poate începe să scrie ofertă (nume) cu o literă mică (inferioară). Acest lucru este într-o oarecare măsură o eroare.

Voi afișa câteva opțiuni pentru rezolvarea acestei sarcini: PHP și CSS sunt mai mult pentru materiale deja publicate atunci când JQuery va putea să corecteze poziția înainte de publicare.

Prima literă a șirului în majusculă pe PHP

Pe PHP există o funcție numită " ucfirst.", Care doar convertește primul simbol șir în majuscule, dar minus este că nu funcționează corect cu chirilic.

Pentru a face acest lucru, ne vom scrie funcția mică. Implementarea va arăta astfel:

În această opțiune, vom obține o propunere care începe cu scrisori mariAsta, de fapt, avem nevoie.

Prima literă a șirului în majusculă pe CSS

Această metodă este vizuală (adică în cod sursa Propunerile vor arăta ca acesta) convertește, de asemenea, primul caracter în registrul de sus.

Foloseste urmatoarele:

Cu ajutorul unui element pseudo prima literă.»Și proprietățile" transformare text"Am stabilit design pentru fiecare primă scrisoare de paragraf.

Prima literă a șirului în majusculă pe jQuery

Așa cum am spus mai devreme, această metodă de transformare este cea mai potrivită pentru materialele care vor fi încă publicate.

De exemplu, vom lua un câmp de text (va acționa ca un câmp pentru introducerea titlului) și va scrie un script mic pentru aceasta, care, atunci când introduceți o propoziție cu o literă mică o face cu o mare:

Scriptul este declanșat atât la scrierea textului, cât și la introducerea ușoară. Nu uitați că pentru lucrarea scripturilor de pe site-ul dvs. aveți nevoie de o bibliotecă legată de jQuery.

Drop Cap (încorporat în textul literei) este prima literă de paragraf, având o dimensiune mai mare decât restul și plasată astfel încât partea de sus să fie la nivelul primei linii de paragraf. În imagine puteți vedea un exemplu încorporat în textul literei.

Apropo, WordPress are un plugin special (wordpress.org/extend/plugens/drop-caps), care vă permite să creați automat încorporarea în text (și mutați în jos) litere mari. Minunat! Cu toate acestea, că dacă nu doriți să utilizați pluginul (sunt sigur că nu doriți) și trebuie doar să creați un capac de picătură la mai multe posturi și, probabil, într-un anumit loc?

Veste buna: Pentru a crea scrisori de capital, nu trebuie sa aplice pluginul, tot ceea ce este necesar este o tag CSS si Interval. Deschideți fișierul CSS și adăugați următorul cod:

Span.Dropcaps (Font-Family: Georgia, Serif; Culoare: #CCC; Font-Dimensiune: 46px; Float: Stânga; Font-greutate: 400; Linia-înălțime: 1em; Margin-Bottom: -0,4m; Marginea-dreapta : 0,09EM; Poziție: rudă;)

Ceva de genul. Desigur, veți avea nevoie de un stil care să vină la designul și textul dvs. De exemplu, valorile proprietății: dimensiunea fonturilor, marjele și înălțimea de linie vor trebui să se ridice pe baza designului și textului dvs.

Eticheta.

Pentru ca stilul să fie utilizat la setul cu cască al textului, trebuie să "împachetați" litera de titlu din eticheta de span și să înregistrați clasa corespunzătoare.

A.

Pseudo-element: prima scrisoare

De asemenea, setați stilul la primul caracter din text și utilizarea unui Pseudo-Element: prima literă. Cu toate acestea, la Pseudo-Element: prima literă poate fi utilizată un număr limitat de proprietăți: acestea sunt proprietăți asociate cu fontul, culoarea, fundalul, frontierele, câmpurile și depozitele. De asemenea, trebuie remarcat faptul că Pseudo-Element: prima literă nu va funcționa în browserele vechi.

P: Prima literă (Font-Family: Georgia, Serif, Culoare: #CCC; Font-Dimensiune: 46px; Float: Stânga; Font-greutate: 400; Linie-înălțime: 1em; Margin-fund: -0,4Em; margine -Right: 0,09em; poziție: rudă;)

Aici, de fapt, o pereche de metode de editare litere mari din folosind CSS..

Gestionează conversia textului elementului la capital sau caractere de capital. Când valoarea este diferită de niciunul, registrul codului sursă va fi modificat.

informatie scurta

Denumiri

Valori

capitalizarea primului caracter al fiecărui cuvânt din propunere va fi capital. Simbolurile rămase nu vă schimbă acest lucru. Caracterele cu litere mici devin litere mici (litere mici). Următoarele caractere de text devin majuscule (registru de sus). Nimeni nu modifică registrul de simbol.

Sandbox.

Winnie Pooh nu a fost întotdeauna de-a face față de reconstruirea, mai ales ore la unsprezece dimineața, pentru că, la acel moment, micul dejun a trecut mult timp și cina nu sa gândit nici măcar la asta. Și, desigur, a fost încântat teribil de încântat, văzând că iepurele ia cupele și plăcile.

dIV (Text-Transform: Capitalizarea;)

Exemplu

Monumentul cultural al Evului Mediu

Amazon Lowland se ia în mod uniform o nenorocire mică de pisici și câini, iar Hyosh Baya este renumit pentru vinurile roșii.

Rezultat acest exemplu prezentat în fig. unu.

Smochin. 1. Aplicarea proprietății de transformare a textului

Modelul obiectului

Un obiect.Style.texttransformă.

Specificație

Fiecare specificație trece mai multe etape de aprobare.

• Recomandare - Specificații aprobate W3C și recomandat ca standard.
• Recomandarea candidatului ( Recomandare posibilă) - Un grup responsabil pentru standard este îndeplinit deoarece își îndeplinește obiectivele, dar este necesar ajutorul comunității de dezvoltare pentru punerea în aplicare a standardului.
• Recomandarea propusă ( Recomandarea oferită) - În acest stadiu, documentul este prezentat Consiliului de consultanță W3C pentru aprobare finală.
• Proiectul de lucru (proiectul de lucru) este o versiune mai matură a proiectului după discuții și amendamente pentru examinare de către Comunitate.
• Proiectul editorului ( Editorial Chernovik.) - versiunea brută a standardului după efectuarea editorilor de către editorul de proiect.
• Proiect ( Specificația Chernovik.) - Prima versiune neagră a standardului.

Ziua bună, clădirile locului de ședere. În publicația de astăzi, va fi luată în considerare subiectul referitor la proiectarea conținutului textual. De aceea veți afla cum capitalul litere CSS. - înseamnă, familiarizați-vă cu mai multe opțiuni pentru crearea inițiativei și, desigur, puteți încerca totul în practică. Ei bine, acum hai să mergem la cel mai interesant!

Luați transformarea textului

Datorită tabelelor de stil cascading, puteți schimba atât primul simbol al blocului, cât și al întregului text. Vă voi spune cum puteți face ambele opțiuni. În același timp, toate instrumentele menționate în acest articol sunt susținute în trei nivele ale limbii: CSS1, CSS2, CSS2.1 și CSS3.

Voi începe cu o proprietate interesantă care modifică întregul conținut de text în cel selectat. aceasta transformare text.

Elementul numit poate converti caracterele într-o capitală, linie și, de asemenea, a stabilit fiecare prim caracter al cuvântului ca o literă de capital. Am scris mai multe despre valorile din tabel.

Acum, pentru a asigura materialul teoretic, dezasamblați un exemplu.

Atenţie!

! Mâine la toate produsele cosmetice reducere!

Acțiunea este valabilă în toate ramurile situate în orașul dvs.

Crearea inițiativei

Dacă nu știți ce implică termenul "scrisoare", atunci este timpul să aflați, deoarece este direct legată de subiectul actual.

Scrisoarea (sau uneori spun inițială) este prima literă a capitolului, care diferă de restul mărimii sale mari, de culoare și în unele cazuri chiar și un design al fontului. În viață, un exemplu de astfel de scrisoare poate fi găsit în manuscrise vechi și cărți.

Există mai multe modalități de a crea inițial. Adesea, simbolul este evidențiat de eticheta de limbă Markup Și după ce stilurile prescriu anumite proprietăți care sunt modificate. Acest lucru este un mod bun, totuși, această publicație spune despre mecanismele CSS (care, în opinia mea, în acest caz, folosesc mult mai logic și mai convenabil).

Pentru a rezolva sarcina, puteți utiliza un astfel de instrument ca.

Deci, în acest caz, utilizați: prima scrisoare. Ca toate elementele pseudo-elemente, acesta este atribuit selectorului printr-un colon. După toate regulile de stiluri, sunt specificate proprietăți. Cu toate acestea, puteți aplica numai acele proprietăți care se referă la editarea fonturilor, liniilor, culorilor, fundalului din spate, câmpurilor și limitelor.

Propun să ia în considerare un exemplu specific. Implementarea programului mic trimis, am decis să nu fac doar o scrisoare de culoare, ci să o umplem cu flori. Pentru a face acest lucru, trebuie să utilizați mai multe recepții viclean cu o culoare font transparentă și să completați litera la imaginea selectată.

Acest paragraf afirmă o propunere cu un conținut foarte interesant.

Vom continua o poveste interesantă în paragraful următor.

Rezultatul obținut arată foarte atractiv și neobișnuit, care este soluția perfectă pentru.

După cum puteți vedea acest subiect Foarte simplu. Puteți utiliza în siguranță codul meu de software pentru a utiliza pentru resursele dvs. web, modificarea și configurarea sub stilul dvs.

Dacă materialul declarat a fost util pentru dvs., apoi abonați-vă la actualizarea blogului meu și nu uitați să împărtășiți cunoștințele dobândite (și, desigur, la blogul meu) cu prietenii. Noroc!

Pa! Pa!

Cu sinceritate, romană chuechev