Imam problem kada postavim veličinu fonta tijela na 11 px, ali tablice prikazuju font na 16 px. Nemam pojma što je uzrok ovome - stalno sam iznova prolazio kroz CSS i izlaz (izvor prilikom odlaska na stranicu). Postavljanje veličine fonta tablice na 11 px očito ima željeni učinak, ali ne trebam je postavljati nigdje odvojeno od stila tijela.

Imam sljedeći CSS:

Tijelo (familija fonta: Verdana, Arial, Helvetica, sans-serif; veličina fonta: 11 px; margina: 0 px; boja pozadine: #E7D2B8; boja: #863F2B; ) img.headerImg (širina: 100%; ) . menu-strip ( float: lijevo; širina: 20%; ) .main-content ( float: lijevo; širina: 80%; ) .clear ( jasno: oboje; ) ul.menu ( margina: 0px; margin-left: 10px ; padding: 0px; list-style: none; ) ul.menu li ( margina: 0px; padding-top: 10px; padding-bottom: 10px; ) div.footer (width: 60%; margin-left) : 20%;) ul.footer-links ( list-style: none; ) ul.footer-links li ( float: left; padding: 20px; ) ul.footer-links li:last ( jasno: desno; ) table ( width: 100% border-collapse: collapse; td (vertical-align: top; )

A zaključak je sljedeći:

Ozbiljno ne vidim ništa što može postaviti veličinu fonta na 16 px u tablici. To se događa za sva tri dijela (glava, stopalo, tijelo). Također se čini da Netbeans 6.9 neće ispravno formatirati tablicu, već ostatak dokumenta (prije i poslije). Gotovo kao da nešto nije u redu sa stolom, ali ne vidim što. To se događa u Firefoxu i Operi (najčešće najnovije verzije oba). Nisam ga testirao u IE jer se nikada neće koristiti u IE.

Dimenzije tablice, njena visina i širina, određuju se automatski ovisno o tome što ćelije sadrže u sebi. Što je više punjenja u ćelijama, to veće veličine tablice i obrnuto.

Međutim CSS značajke omogućuju vam promjenu veličine tablice u HTML-u, navodeći točno onu širinu i visinu koju trebate. Da budemo pošteni, treba napomenuti da atributi tablice također omogućuju postavljanje potrebne veličine. Međutim, u trenutno pričat ćemo samo o CSS-u.

Mora se naglasiti da svaka tablica ima svoju minimalnu širinu i minimalnu visinu na koje utječe njezin sadržaj. Čak i ako vrijednosti širine i visine postavite još manje, ništa se neće dogoditi. Stranice stola neće premašiti svoj minimum.

Da biste odredili širinu tablice, morate koristiti CSS svojstvo širina, a za postavljanje visine potrebno je koristiti svojstvo visina.

Na primjeru to izgleda ovako.

Tablica (širina: 500 px; visina: 100 px; )

Rezultat u pregledniku:

Puni kod:

Tablica sa zadanim veličinama

1	2	3	4	5
1	2	3	4	5
1	2	3	4	5

Vrijednosti širine i visine tablice mogu se odrediti kao apsolutna vrijednost(u pikselima) i relativno – u postocima. Na primjer, 20px odnosno 20%.

Ako koristite postotke za postavljanje dimenzija tablice, oni će se izračunati na temelju dimenzija nadređeni element. Ako govorimo o našem primjeru, dakle govorimo o o prozoru preglednika.

Postoji još jedno značenje - auto. A poseban je jer se uz njegovu pomoć širina i visina tablice izračunavaju automatski, standardno. U praksi određivanje ove vrijednosti izgleda ovako.

Širina: auto;

Visina: auto;

Skrećemo Vam pažnju na još jednu stvar: važna točka. Bolje je ne označavati visinu kao postotak, jer u pravilu u ovom slučaju neće raditi.

Određivanje veličina pojedinačnih ćelija i stupaca

Ako mislite da preglednik nije pravilno postavio širinu stupaca na temelju sadržaja ćelija, tada imate pravo sami odrediti veličine ćelija i stupaca. A sada ćemo govoriti o tome kako promijeniti veličinu ćelije u HTML tablici.

Promjena veličine ćelija vrši se pomoću istih CSS svojstava kao i veličine tablice, naime: širina I visina.

Da biste ćelijama dodali stilove, možete koristiti jednu od dvije opcije:

1. Dajte ćelijama imena pojedinačnih klasa. Izgledat će ovako: class="cell-50px"

   A nakon toga trebali biste primijeniti stilove za ove klase.

2. Omogući atribut stil, unutar kojeg upišite potrebni CSS kod.

U praksi će druga opcija izgledati ovako:

...

Međutim, želimo napomenuti da nije potrebno često mijenjati pojedinačne veličine ćelija. U pravilu se to radi u situacijama kada je potrebno postaviti određenu širinu za stupce tablice. U ovom slučaju problem se lakše rješava. Samo trebate odrediti širinu ćelija u prvom redu.

Tablica sa zadanim veličinama

1	2	3	4	5
1	2	3	4	5
1	2	3	4	5

Rezultat u pregledniku:

Kako promijeniti veličinu fonta u tablici

Često postoji potreba za promjenom veličine teksta u tablici. Na primjer, u ćelijama zaglavlja. To se može učiniti pomoću CSS svojstva veličina fonta. Postavimo veličinu fonta za elemente :

Th (veličina fonta: 30px; )

Na ovo ovu lekciju završava. Predlažem da dobro razmislite o svojoj domaćoj zadaći. Samo ga pažljivo proučite i razmislite o tome. Svako dobro svima!

Čini se, zašto znati HTML oznake za tekst, ako sada gotovo svaka administratorska ploča ima prikladnu koja ih automatski postavlja?

Činjenica je da se oblikovanje sadržaja na web stranici bitno razlikuje od rada na njemu uredske aplikacije. Ovdje nije dovoljno samo dati tekstu atraktivan izgled, jer ispravan dizajn Ne ovisi samo o prikazu web stranice, već i o njezinoj promociji u tražilicama.

HTML oznake i atributi: Osnovna sintaksa

Svaki tekst ima skriveni kod, koji računalu “objašnjava” što i kako prikazati na ekranu. Sve informacije bilježe se skupom univerzalnih elemenata.

U osnovi, HTML tekstualne oznake su naredbe koje dodaju ili mijenjaju određene blokove na stranici. izgled. Ispravan format unos izgleda ovako:

Imajte na umu da nisu sve oznake uparene. Na primjer,
(preskakanje retka) ili

---

(dodatak vodoravna crta) uopće ne treba zatvarati.

Zašto ne možete kopirati članke iz Worda i drugih programa u uređivač web stranica

Iako moderno uredski programi koristite iste HTML oznake za tekst, u 99% slučajeva izvorni kôd je neupotrebljiv za web stranice. Čak i ako se dokument normalno prikazuje u samoj aplikaciji, kada se umetne na web mjesto, formatiranje se može izgubiti. Štoviše, zbog velika količina dodatne oznake i atribute, tražilice ne mogu adekvatno analizirati sadržaj stranice. Što zauzvrat otežava promicanje vašeg resursa.

Da biste dobili čist i relevantan kod, najprije trebate očistiti tekst HTML oznaka koje je izradio obični uređivač. Postoji nekoliko načina za to:

1. “Provucite” članak kroz Notepad i tek ga onda ubacite na stranicu. Aplikacija briše sav HTML, pa ćete nakon toga morati ponovno oblikovati tekst (pomoću alata za uređivanje ili ručno).
2. Pišite i objavljujte članke koristeći LiveWriter. Popularni uređivač blogova odmah generira točan kod. A u posebnoj kartici možete vidjeti kako će izgledati tekst na stranici.
3. Koristite HTML Cleaner. Ova online usluga ne uništava cijeli kod, već samo nepotrebne fragmente. Pomoću filtara birate koje oznake želite spremiti. Tu je i moćan vizualni urednik za oblikovanje, koji kodu dodaje već optimizirane naredbe.

Odlomci

Ovaj element je prisutan u gotovo svim člancima. Svaki bi se odlomak trebao nalaziti unutar takvog spremnika - to pojednostavljuje oblikovanje i omogućuje vam spremanje ujednačenog stila na svim stranicama stranice. Radi praktičnosti, oznaka

Uvijek pišite sa nova linija.

Poravnanje

Zasebna HTML oznaka "Text Alignment" nije korištena dugo vremena. Umjesto toga, stvoren je generički atribut ALIGN. Da biste promijenili položaj tekstualnog bloka na stranici, morate odabrati jednu od 3 vrijednosti - SREDINA, DESNO ili LIJEVO. Na isti način možete postaviti poravnanje za druge elemente, poput naslova.

U nekim situacijama za poravnanje se koriste druge oznake, na primjer, možete pozicionirati pomoću elementa

.... Zašto je prikladno zasebna oznaka? Za razliku od atributa, radi s bilo kojim sadržajem, uključujući fotografije, videozapise, bljeskalicu itd.

Naslovi i podnaslovi

Sustav podnaslova omogućuje stvaranje logične strukture sadržaja. Kada je tekst podijeljen na smislene blokove, čitatelju se puno lakše koncentrira i upija nove informacije. Tražilice također analiziraju naslove kako bi shvatile za koje upite promovirati stranicu. Zbog toga SEO stručnjaci preporučuju korištenje tematskih ključnih riječi u njima.

HTML koristi šest razina podnaslova – od

prije

. U ovom sustavu postoji jasna hijerarhija:

• ...

  . Glavni članak, proizvod u online trgovini itd.). U tekstu može biti samo jedan

  . U pravilu sadrži glavnu ključnu riječ.

• ...

  . Podnaslovi druge razine rastavljaju tekst u smislene blokove. Na primjer, ako ocjenjujete prijenosna računala, možete ih učiniti nekoliko

  s nazivima različitih modela.

• ...

  . Treća razina je potrebna ako je tekst između dva

  je također razbijen u male blokove. U našem primjeru to mogu biti kriteriji ocjenjivanja - "Performanse", "Memorija", "Video kartica" itd. za svaki model.

• ,

  ,

  . U praksi su izuzetno rijetki. Ali opći princip je isti - oni bi trebali biti "ugniježđeni" u blok s podnaslovom najviše razine.

Održavajte ispravnu hijerarhiju. Vraćajući se na naš primjer, to znači da ne možete odmah unijeti nazive modela kao

ili

. Štoviše, koristite podnaslove različitih razina za blokove homogenog značenja (na primjer, označite prijenosno računalo koje je zauzelo zadnje mjesto na ljestvici pomoću

).

Ovdje je dijagram koji će vam pomoći da odmah razumijete i zapamtite ispravnu strukturu naslova u HTML-u.

Popisi

Bolje je formatirati sve popise i upute u obliku popisa, koristeći posebne HTML oznake za tekst ( tipična greška- samo nekoliko paragrafa

Koje počinju crticom ili brojem).

Struktura takvih blokova je vrlo jednostavna. Prvo određujemo vrstu popisa - s grafičkim oznakama ili s brojevima.

Svi elementi nalaze se između početnih i završnih oznaka. Svaka stavka popisa počinje u novom retku i ima format . Broj elemenata nije ograničen.

Izbor i njegove karakteristike

Što se može promijeniti pomoću ovog fonta i boje - i bez dodavanja novih klasa u CSS. Ovo je vrlo zgodno kada trebate istaknuti samo jednu rečenicu ili fragment.

ima nekoliko atributa:

• Lice. Omogućuje promjenu fonta teksta. Možete navesti nekoliko opcija odvojenih zarezima (Tahoma, Verdana). Ako korisnik nema instaliran prvi font, sustav jednostavno koristi alternativu.
• Veličina. Da biste povećali ili smanjili tekst, unesite vrijednost između 1 i 7 u navodnicima.
• Boja. Ovisno o dizajnu, možete odabrati jednu od standardnih nijansi (crvena, zelena, plava) ili unijeti kod za bilo koju boju po želji.

Ne koristite odlomke oblikovane s , umjesto podnaslova. Bolje je postaviti iste parametre dizajna s ispravnom oznakom.

Načini isticanja teksta

Monotoni tekst zamara čak i rastavljen na odlomke. Kako bi privukli pozornost i pobudili zanimanje čitatelja, ključne točke Preporuča se istaknuti grafički. Evo nekoliko naredbi koje će vam pomoći da se nosite s ovim zadatkom.

... . Izuzetno popularna HTML oznaka. Sličica odmah upada u oči, pa je uz njegovu pomoć zgodno istaknuti važne teze i činjenice.

Mnogi ljudi brkaju oznake I . Nema vizualne razlike, ali rade drugačije. Prvi jednostavno mijenja izgled teksta, dok drugi djeluje kao "indeks" i ističe najvažnije fragmente (ključne riječi teme i fraze za SEO).

... . Elegantan i strog kurziv idealan je za oblikovanje znanstvenih pojmova, stranih riječi i raznih citata. U ozbiljnim publikacijama nazivi umjetnina također su istaknuti kurzivom.

... . Možda nijedna druga HTML oznaka nije izazvala toliko kontroverzi. Podcrtavanje teksta se rijetko koristi jer ovu metodu Istaknuti sadržaji povijesno su se dodjeljivali hipervezama. Ako koristite u člancima, imajte na umu da je ovo prikladno samo za kratke fragmente - ne više od 1 retka.

... . Zanimljiva oznaka koja vam omogućuje da učinite dio vrlo relevantnim u oglašavanju - na primjer, da naglasite kontrast između starih i novih cijena.

... . Najlakši način za povećanje veličine fonta bez dodatnih opcija.

... . Radi na istom principu kao i prethodna oznaka. Tekst koji se nalazi unutar je smanjen u odnosu na glavni.

^... . Ispravno ime ovaj format je superskript. Ova je oznaka uglavnom namijenjena matematičkim diplomama i fusnotama. Smanjuje veličinu fonta i pomiče odabrani tekst prema gore.

_... . Indeksi se često nalaze u raznim formulama. Odabrani fragment nalazi se ispod glavnog teksta.

Smisleni spremnici

Budući da su neki blokovi pronađeni u mnogim tekstovima, za njih su se počele stvarati posebne oznake. To pojednostavljuje oblikovanje, jer ako svaka vrsta sadržaja ima vlastiti skup stilova, samo trebate istaknuti dio teksta i naznačiti koje informacije sadrži.

... . Oznaka za dodavanje računalnih kodova. Neizostavan u člancima o programiranju s primjerima - naredbe se ne izvršavaju, već se prikazuju kao običan tekst.

... . Dizajniran za oblikovanje citata - na primjer, ključnih izvadaka iz intervjua.

. Smješta dio teksta u zaseban blok. Prema zadanim postavkama odabir ima više lijevog ruba, ali također možete promijeniti veličinu, stil i boju teksta u CSS-u.

...

. Dodatna oznaka koja sadrži podatke o autoru, uključujući poveznice.

Crta razgraničenja

---

Jednostavna crta može se koristiti za označavanje logičnog kraja velikog dijela.

---

ne odnosi se na uparene oznake. To znači da element zatvaranja formatanije potrebno.

Pomoću atributa WIDTH možete skratiti separator navođenjem odgovarajuće veličine u pikselima ili postotku širine prozora.

Učenjem kako ispravno koristiti oznake za oblikovanje teksta u HTML-u, ne samo da ćete učiniti svoje članke lakšim za čitanje, već ćete i povećati svoju SEO učinkovitost.

Imam problem u kojem sam postavio veličinu fonta tijela na 11 px, ali tablice prikazuju font na 16 px. Nemam pojma što je uzrok ovome - stalno sam iznova prolazio kroz CSS i izlaz (izvor prilikom odlaska na stranicu). Postavljanje veličine fonta tablice na 11 px očito ima željeni učinak, ali ne trebam je postavljati nigdje odvojeno od stila tijela.

Imam sljedeći CSS:

Tijelo (familija fonta: Verdana, Arial, Helvetica, sans-serif; veličina fonta: 11 px; margina: 0 px; boja pozadine: #E7D2B8; boja: #863F2B; ) img.headerImg (širina: 100%; ) . menu-strip ( float: lijevo; širina: 20%; ) .main-content ( float: lijevo; širina: 80%; ) .clear ( jasno: oboje; ) ul.menu ( margina: 0px; margin-left: 10px ; padding: 0px; list-style: none; ) ul.menu li ( margina: 0px; padding-top: 10px; padding-bottom: 10px; ) div.footer (width: 60%; margin-left) : 20%;) ul.footer-links ( list-style: none; ) ul.footer-links li ( float: left; padding: 20px; ) ul.footer-links li:last ( jasno: desno; ) table ( width: 100% border-collapse: collapse; td (vertical-align: top; )

A rezultat izgleda ovako:

• Dom
• Kontakti
  • Kupci
  • Agenti
  • Umjetnici
  • Dobavljači
  • ostalo

Kodirati	Ime	Prezime	Adresa	Poštanski broj	Telefon	Faks	Uredi
							Stvoriti
šifra4	James	Plava	adresa11 adresa24 adresa32 grad5	poštanski broj4	telefon4	telefon2	Uredi
kod5	Fred	Bijela	adresa13 adresa24 adresa31 grad1	poštanski broj2	telefon5	telefon3	Uredi

• Link 1
• Veza 2
• Veza 3
• Link 4
• Veza 5
• Veza 6

Ozbiljno ne vidim ništa što može postaviti veličinu fonta na 16 px u tablici. To se događa za sva tri dijela (glava, stopalo, tijelo). Također se čini da Netbeans 6.9 neće ispravno formatirati tablicu, već ostatak dokumenta (prije i poslije). Gotovo kao da nešto nije u redu sa stolom, ali ne vidim što. To se događa u Firefoxu i Operi (najnovije verzije oba). Nisam ga testirao u IE jer se nikada neće koristiti u IE.

Od autora: Dobrodošli, čitatelji ovog bloga. Veličina fonta u HTML-u, zajedno s njegovom bojom, glavne su karakteristike teksta, koje uvelike utječu na percepciju informacija, a kao rezultat toga, na pogodnost stranice za korisnike. Ovaj članak govori o tome kako postaviti veličinu fonta u html-u.

Kako ispravno promijeniti veličinu teksta

Činjenica je da html pruža vrlo ograničene mogućnosti u smislu upravljanja veličinom fonta. Na primjer, ima male i velike oznake. Omogućuju vam prikaz teksta u malo većem ili manje veličine, u odnosu na uobičajeni tekst na stranici. Ali takvih je prilika malo jer se sadržaj samo neznatno mijenja, a općenito se s neodobravanjem gleda na korištenje takvih oznaka.

Dakle, kako pravilno povećati veličinu fonta u html-u? Naravno, sa koristeći css. I ne samo povećati, već i smanjiti, jer je i to potrebno.

Na primjer, nevažne riječi na stranici, kao što je datum objavljivanja stranice ili druge vlasničke informacije, obično se pokušavaju učiniti što manjim. Za takav tekst možete odrediti font manji od onog u glavnom tekstu.

Naslovi bi, naprotiv, trebali biti barem 2-3 puta veći od glavnog sadržaja. Također morate voditi računa o ispravnom prikazu podnaslova. Ovdje vrijedi pravilo: ni u kojem slučaju veličina h3 ne smije biti veća od veličine h2.

U samom sadržaju, u pravilu, ne biste trebali koristiti uvećana slova za privlačenje pažnje. Bolje ih je istaknuti nekom vrstom pozadine, dati im kurziv ili podebljani stil, takvo isticanje je puno više bolje bi odgovaralo glavni tekst i poboljšati njegovu percepciju. Dobro, dobro, to je bila mala teorija, a sad prijeđimo na stvar.

Korištenje CSS-a

Trebamo svojstvo veličine fonta. Omogućuje vam postavljanje veličine slova u različitim mjernim jedinicama. U razvoju web stranica, pikseli i relativne jedinice em, ali pogledajmo pobliže sve opcije.

Ključne riječi. U css-u, vrijednost ovog svojstva može se postaviti na ključne riječi smaller i larger, koje čine font manjim i većim u odnosu na nadređeni element. Možemo reći da će učinak biti sličan korištenju malih i velikih oznaka.

Upotreba apsolutne veličine ključne riječi. Druga grupa ključeva za ovo svojstvo - xx-mali, x-mali, mali, srednji, veliki, x-veliki i xx-veliki - omogućuje vam postavljanje apsolutna vrijednost. Iako ga zapravo neće biti moguće točno izračunati u pikselima, jer će puno ovisiti o postavkama preglednika. Sa sigurnošću se može reći da korištenje takvih vrijednosti definitivno neće učiniti web mjesto kompatibilnim s više preglednika.

Apsolutna veličina pomoću mjernih jedinica. Najčešće se font navodi u pikselima (px). Sve u svemu ovo je dobra odluka, ali najvjerojatnije ćete morati malo promijeniti veličinu slova na različite rezolucije. Na primjer, na široki ekrani povećati font. To se može učiniti pomoću medijskih upita koji implementiraju adaptivni dizajn.

Relativna veličina. U dobrom smislu, razmatra se relativna opcija na najbolji mogući način odredite veličinu fonta u html-u, jer vam omogućuje postizanje idealne čitljivosti i dobrog prikaza teksta na bilo kojem uređaju.

Relativna vrijednost obično specificirano pomoću em i postotaka. Em predstavlja visinu fonta nadređenog elementa. Možete ga postaviti ovako, na primjer:

tijelo (veličina fonta: 12px; ) a (veličina fonta: 1,2 em; ) h1 (veličina fonta: 2,8 em; ) tablica td (veličina fonta: 0,9 em; )

tijelo ( veličina fonta: 12px; veličina fonta: 1.2em; h1 ( veličina fonta: 2.8em; tablica td ( veličina fonta: 0,9em;

Dakle, specificiranjem samo jedne apsolutne vrijednosti, sve ostale se mogu specificirati relativno. Tako će naslovi prve razine postati 2,8 puta veći čisti tekst na stranici, veze će biti samo malo veće, au ćelijama tablice tekst će, naprotiv, biti manji.

Koje će to prednosti dati? Ako se font iznenada promijeni u pregledniku, tada će se svi elementi promijeniti proporcionalno i neće biti opasnosti da će se nešto u vašem izgledu pokvariti. Relativna veličina također se može napisati kao postotak. Ovdje je sve jednostavno - 100% je veličina fonta nadređenog elementa. Prema tome, ako odlomak ima veličinu od 120%, a navodnici u odlomku imaju veličinu od 150%.

Ostali čimbenici koji utječu na sadržaj teksta

U osnovi, naravno, korištenjem veličine fonta možete jasno postaviti veličinu fonta, ali postoji nekoliko drugih svojstava koja na ovaj ili onaj način utječu na njegovu veličinu. Ukratko o njima:

Font-varijanta: small-caps – ovo svojstvo s ovom vrijednošću prikazuje sva slova velika, ali malo manja od uobičajenih. Ovo je tako nestandardno ponašanje.

Transformacija teksta: velika slova – sav tekst s ovim svojstvom bit će prikazan velikim slovima, što će odgovarajuće utjecati na njihovu veličinu.

Transformacija teksta: mala slova – suprotna situacija, u takvom tekstu neće biti velika slova.

Težina slova: podebljano – ovdje, mislim da razumijete. Ovo svojstvo čini tekst podebljanim, au ovom stilu postaje malo veći.

Razmak između slova: vrijednost u pikselima - ovaj parametar omogućuje određivanje udaljenosti između znakova. Ni na koji način ne utječe na veličinu znakova, ali mijenja širinu teksta. Možete unijeti pozitivne i negativne vrijednosti.

Poanta

Da biste odredili veličinu znakova u tekstu, upotrijebite svojstvo veličine fonta koje se može postaviti i na apsolutnu i relativne veličine. Na to neizravno mogu utjecati i druga svojstva koja na ovaj ili onaj način transformiraju tekst. Ovime se opraštam od vas za danas i ne zaboravite pogledati naš blog u potrazi za nove informacije na izradi web stranice.