Cum să setați culoarea fundalului și a textului pe o pagină web? Culoare pentru font html Cum se schimbă culoarea titlului în html.

22.02.2024 Toate întrebările

Data creării: 2009-11-18

Deci, acum este timpul să studiez, cum se schimba culorile textul pe care l-ai introdus. Această lecție va consta în 2 părți. În vom colora o parte separată a textului, iar în , vom face întregul text într-o culoare, iar partea necesară a acestuia, o altă culoare.

1. parte

Deși toate culorile în HTML sunt scrise într-un mod neobișnuit, se face foarte simplu. În primul rând, vă sugerez să descărcați paleta de culori web făcând clic pe cuvânt PALETĂ, sau căutați o versiune mai completă pe Internet. Lângă fiecare culoare din paleta pe care o găsiți, va fi un cod (litere și cifre în engleză). Pentru ca culoarea noastră să fie, de exemplu, albastră, trebuie să scriem următoarea etichetă:

Buna ziua! Să începem să învățăm HTML

Adică iată ce avem:
1. textul este inclus într-o etichetă ...
2. etichetă are culoarea atributului = #0000FF

Acum să ne întoarcem la exemplul nostru și să privim totul clar. Deschideți din nou pagina creată anterior în Notepad și schimbați culoarea fontului:

Actualizăm pagina HTML și verificăm ce s-a întâmplat:

Rezultat: Prima linie a devenit albastră, iar a doua a rămas implicită - neagră.

În același mod, puteți decora orice parte necesară a textului, indiferent de locul în care se află, la început, la mijloc sau la sfârșitul textului.

2. parte

Acum noi setați culoarea pentru întregul text al documentului. Acest lucru se face foarte ușor. Să ne amintim al treilea articol. În ea spuneam că tot ceea ce este vizibil în browser este scris în etichetă ... , adică în „corpul” documentului nostru.

Și așa, după cum știm, ... - este, de asemenea, o etichetă, prin urmare, o putem folosi, la fel ca eticheta ... , setați atributele necesare.

Culoarea în acest caz este setată în eticheta de deschidere , iar intrarea va arăta astfel: Tot textul documentului dvs

În acest caz, întregul text al documentului, cu excepția celui care este inclus în etichete ... cu atribuirea culorilor, va avea culoare roșie.

Acum să ne uităm la această parte a articolului folosind un exemplu. Să atribuim culoarea roșie întregului text al documentului și să lăsăm textul pe care l-am făcut albastru în partea 1 ca atare. Pentru a face acest lucru, pur și simplu scrieți codul în eticheta de deschidere :

Apoi, ca întotdeauna înainte de vizualizare, salvați documentul:

Și, în sfârșit, actualizăm pagina HTML în browser:

Rezultat: Am învățat cum să setăm întregul text al documentului la culoarea necesară, precum și cum să facem parte din text o culoare diferită.

Instrucţiuni

Plasați diferite niveluri de titluri între etichetele de deschidere și de închidere corespunzătoare dacă acest lucru nu este deja făcut în codul sursă al paginii web. De exemplu, cel mai important titlu (primul nivel) ar trebui să fie între etichete

Şi

:

Titlu

Următorul subtitlu cel mai important ar trebui plasat între etichete

Şi

și așa mai departe. Ultimul dintre nivelurile oferite este al șaselea -
Şi
.

Plasați în antetul codului sursă (între etichete Şi) instrucțiuni care spun browserului vizitatorului că acest loc conține o descriere a stilurilor în CSS:

Între etichetele de stil de deschidere și de închidere, introduceți descrieri de stil pentru anteturile fiecărui nivel al cărui aspect doriți să îl schimbați. De exemplu, dacă trebuie să schimbați doar aspectul titlurilor de la primul nivel, atunci acest cod ar putea arăta astfel: Aici h1 indică faptul că descrierea în acolade se referă la eticheta h1 și se numește „selector”. Parametrul color setează culoarea textului, parametrul font-size setează dimensiunea fontului, font-style cu valoarea italic setează stilul italic al literelor, font-weight cu valoarea bold - , margin-top - , margin-bottom - indentarea de jos. Pentru titlurile de al doilea nivel, trebuie să adăugați un bloc similar cu selectorul h2 etc.

Folosiți sintaxă prescurtată dacă există o mulțime de niveluri de descris. De exemplu, descrierile fonturilor pot fi plasate într-un singur parametru, precum și descrierile dimensiunilor indentărilor. Eşantion:În parametrul margine, indentările trebuie specificate în sensul acelor de ceasornic, începând cu indentarea de sus, separate printr-un spațiu (dreapta sus, stânga jos).

Video pe tema

vei avea nevoie

  • Computer, Internet, acces la conținutul site-ului.

Instrucţiuni

Dacă prioritățile dvs. s-au schimbat și acest lucru a afectat temele site-ului, asigurați-vă că reflectați modificările în titlu. Atunci când alegeți un nume nou, planificați astfel încât numele site-ului să devină un brand, dacă nu unul global, atunci cel puțin pentru cititorii obișnuiți ai resursei. În general, „orice numiți iahtul, așa va naviga.”

Decideți dacă doriți să potriviți numele de domeniu cu titlul. Acest lucru nu este necesar dacă sunt potrivite unul pentru celălalt. Apropo, țineți cont de acest lucru atunci când alegeți un nou titlu. La urma urmei, schimbarea unui domeniu este mai dificilă. În plus, el este cel care conectează site-ul cu vizitatorii.

Schimbați titlul pe site. Platformele gratuite moderne și diverșii creatori de site-uri web au, de regulă, controale vizuale simple care nu necesită cunoștințe de limbaje de programare. Conectați-vă la panoul de control al site-ului ca administrator.

Găsiți pe pagina care deschide o filă numită „Opțiuni” sau „Setări” sau „General”. Și acolo, căutați caseta „Numele site-ului” unde puteți introduce text.

Introdu noul tău nume în această casetă. Asigurați-vă că faceți clic pe butonul de salvare, care este numit diferit pe diferite motoare web - „Salvare”, „Publicare”, „Actualizare”.


Tipuri de câștiguri prin internet,
sau cu ce nu ai nevoie să pierzi timpul


Unde este cel mai bun loc pentru începători?
Unde sunt banii pe internet sau o strategie de a face bani online?


Instrucțiuni pentru crearea unui site web în 5 minute. Elemente de bază HTML și crearea pas cu pas a site-ului web


Cum să devii designer web și să înveți cum să creezi site-uri web la un nivel înalt.


Cum să faci bani pe site-ul tău, cum să promovezi un site și să faci profit pe pilot automat


Ai un site, dar nu este profitabil? Revizuirea serviciilor de monetizare


Nu știu unde să investesc bani,
a face profit? Aceasta este o informație unică


Despre Forex în general. Cum să-ți investești capitalul corect sau să câștigi 50 USD pe zi pe pilot automat


Cum și unde să cumpărați un domeniu și găzduire. Cum să încărcați un site web pe internet


Cum să transferați un domeniu către un alt registrator pentru a economisi costurile de reînnoire



Continuăm să stăpânim html, în a treia lecție a pregătirii noastre vom studia și anume schimbarea culorilor pe pagină. În rest, totul pare cam plictisitor.

Cod HTML pe care îl avem deja:

Conținutul site-ului meu.

Acum vom învăța cum să schimbăm pe pagină. Pentru a specifica ce culoare ar trebui să fie textul, trebuie să faceți următoarele.

Schimbați eticheta după cum urmează: text="#FF0000" >, adică pentru a schimba culoarea textului html, trebuie să adăugați parametrul text= și să specificați valoarea acestuia „#FF0000”.

Valoarea parametrului determină culoarea, adică „#FF0000” este roșu. Aici se aplică legea celor trei culori.

De exemplu, „#00FF00” este o culoare html verde, „#0000FF” este o culoare albastră a textului html. Când sunt amestecate, aceste trei culori formează noi nuanțe și culori html. De exemplu, „#3715FB”.

Să facem textul de pe pagina noastră roșu. Pentru a face acest lucru, aplicați cunoștințele dobândite. Rezultatul ar trebui să fie următorul cod html:

Titlul paginii primului meu site web

Conținutul site-ului meu.
Iau lecții despre crearea unui site web.

(Noile secțiuni ale codului HTML vor fi evidențiate cu albastru)

Ar trebui să arate așa > modificat .

Acum să ne dăm seama cum să setăm culoarea html a fragmentelor de text individuale. Dacă aveți nevoie de un text pentru a avea o culoare html diferită, faceți următoarele:

Includeți textul dorit între etichete . Aceasta este o nouă etichetă html, este asociată.

Apoi introduceți parametrul color= cu valoarea „#00FF00”, adică așa color="#00FF00" > text într-o culoare diferită .

Să aplicăm cunoștințele codului nostru html și să schimbăm o bucată de text.

Titlul paginii primului meu site web

Conținutul site-ului meu.
Iau lecții despre crearea unui site web.

Ar trebui să obțineți următoarea > modificare.

Culoare de fundal HTML

Acum să ne schimbăm culoare de fundal html, pentru aceasta trebuie să setați eticheta bgcolor= parametru cu valoarea „#494949”, adică bgcolor="#494949" >.

Culoarea de fundal html nu trebuie să fie „#494949”, puteți folosi orice altă culoare.

Să facem o modificare a codului nostru și să schimbăm culoarea de fundal html.

Titlul paginii primului meu site web

Conținutul site-ului meu.
Iau lecții despre crearea unui site web.

Acum să vedem ce s-a întâmplat > schimbare

Sarcină

Schimbați culoarea textului titlului și a fundalului de sub acesta.

Soluţie

Pentru a schimba culoarea de fundal de sub text, utilizați proprietatea universală de fundal, care ar trebui adăugată la selectorul h1. Culoarea titlului este schimbată folosind proprietatea de culoare, care este adăugată și la acest selector (Exemplul 1).

Exemplul 1: Culoare de fundal sub antet

HTML5 CSS 2.1 IE Cr Op Sa Fx

Culoarea fundalului antetului

Legea lumii exterioare

Legea lumii exterioare deduce metodologic o lume inteligibilă, deși în oficialitate se acceptă contrariul.

Rezultatul acestui exemplu este prezentat în Fig. 1.

Orez. 1. Culoare de fundal sub titlul textului

Vă rugăm să rețineți că dimensiunea dreptunghiului colorat este afectată nu numai de dimensiunea textului, ci și de umplutura din jurul acestuia. Prin urmare, ajustați dimensiunea fundalului folosind proprietatea padding, adăugându-l din nou la selectorul h1.

În acest tutorial veți învăța cum să schimbați culoarea de fundal și text a oricărui element dintr-o pagină HTML. În general, în limbajul HTML, unele etichete au atribute speciale care își schimbă culoarea, de exemplu bgcolor (culoarea de fundal). Dar, în primul rând, aceste atribute sunt învechite (cred că vă amintiți ce înseamnă asta) și, în al doilea rând, așa cum am spus deja, nu toate etichetele le au. Deci, să presupunem că doriți să schimbați culoarea de fundal a unui paragraf de text. Și cum vei face asta, pentru că eticheta

Nu există un astfel de atribut? Prin urmare, ca și în lecțiile anterioare, vom folosi stiluri (CSS), adică atributul stil universal, care ne va permite să schimbăm culoarea oriunde ne dorim.

Cum poți specifica o culoare?

Culorile în HTML (și CSS) pot fi specificate în mai multe moduri, vă voi arăta pe cele mai populare și comune:

  • Numele culorii- HTML are o listă mare iar pentru a indica o culoare este suficient să-i scrieți numele în engleză, de exemplu: roșu, verde, albastru.
  • Cod de culoare HEX- Absolut orice culoare poate fi obtinuta prin amestecarea a trei culori de baza in proportii diferite - rosu, verde si albastru. Un cod HEX reprezintă trei perechi de valori hexazecimale responsabile pentru numărul acestor culori din fiecare culoare. Codul de culoare trebuie să fie precedat de un semn hash (#), de exemplu: #FF8C00, #CC3300 și așa mai departe.

Anterior, în HTML era recomandat să se folosească numai , care se garantează că va fi afișat identic în toate browserele și pe toate monitoare. Dar astăzi nu este nevoie să vă limitați la el, deoarece atât browserele, cât și monitoarele au învățat de mult să afișeze corect o listă mult mai mare de culori. Dar nu vă recomand să specificați culorile după nume, faptul este că multe browsere mai asociază culori diferite cu același nume. Prin urmare, în acest tutorial voi folosi întotdeauna coduri de culoare HEX.

Cum se schimbă culoarea textului?

Pentru a schimba culoarea textului în orice element al unei pagini HTML, trebuie să specificați atributul de stil în interiorul etichetei. Sintaxa generală este următoarea:

<тег stil= "culoare:nume culoare" >... - specificarea culorii textului după nume.

<тег stil= "culoare:#cod HEX" >... - specificarea culorii textului prin cod.

Și, ca de obicei, pentru a schimba culoarea textului pe întreaga pagină, trebuie doar să specificați atributul de stil în etichetă . Și dacă trebuie să schimbați culoarea fontului pentru o bucată de text, atunci includeți-o într-o etichetă și aplicați-i atributul.

Exemplu de schimbare a culorii textului

Schimbați culoarea textului

Text de titlu roșu

Textul paragraf albastru.

Verde italic. Text roșu.

Rezultat în browser

Cum se schimbă culoarea de fundal?

Culoarea de fundal a oricărui element de pagină poate fi, de asemenea, modificată folosind atributul stil. Sintaxa generală este:

<тег stil= „fond:numele culorii”>... - specificarea culorii de fundal după nume.

<тег stil= "background:#HEX code" >... - specificarea culorii de fundal prin cod.

Exemplu de schimbare a culorii de fundal

Schimbarea culorii de fundal

Titlu.

Paragraf.

Text îngroșat. Text simplu.

Rezultat în browser

Titlu.

Paragraf.

Text îngroșat. Text simplu.

Când schimbați culoarea de fundal a elementelor, devine foarte clar cât de largă ocupă de fapt fiecare dintre ele. După cum puteți vedea, elementele bloc, cum ar fi paragrafele și titlurile, ocupă, în general, întreaga lățime disponibilă, chiar dacă conțin foarte puțin text, dar etichetele inline sunt la fel de largi ca și conținutul lor. Apropo, ultimul paragraf din exemplu ocupă și întreaga lățime, doar că fundalul său este transparent, așa că fundalul paginii este vizibil prin el. În general, fundalul tuturor elementelor de pe pagină în care nu este indicat în mod explicit este transparent, atât.

Teme pentru acasă.

  1. Creați un titlu pentru articol și cele două secțiuni ale acestuia. Scrieți câte un paragraf la începutul articolului și fiecare secțiune.
  2. Setați întreaga pagină la dimensiunea fontului Courier de 16 px, titlul articolului la 22 px și subtitlurile la 19 px.
  3. Lăsați titlul articolului să aibă culoarea textului #0000CC, iar subtitlurile să aibă culoarea textului #CC3366.
  4. Utilizați culoarea de fundal #66CC33 pentru a evidenția cele două cuvinte din al doilea paragraf. Și în al treilea paragraf, în aceeași culoare, dar cu un cuvânt subliniat.
  5. Nu uitați că puteți grupa valorile atributelor de stil prin plasarea unui punct și virgulă (;) între ele.