Tere päevast, saidi loomise nipid. Tänases väljaandes käsitleme teksti sisu kujundamisega seotud teemat. Sellepärast õpid, kuidas suurtähti css -is seada - tutvuge mitmete varustuskorkide loomise võimalustega ja loomulikult saate kõike praktikas proovida. Nüüd asume lõbusa osa juurde!

Muutame teksti

Kaskaadiga stiililehtedega saate muuta nii ploki esimest tähemärki kui ka kogu teksti. Näitan teile, kuidas saate mõlemat teha. Lisaks toetatakse kõiki selles artiklis nimetatud tööriistu keele kolmel tasemel: css1, css2, css2.1 ja css3.

Alustan ühe huvitava omadusega, mis muudab kogu valiku tekstisisu. seda teksti teisendada.

Nimetatud element võib teisendada tähemärke suurteks ja väiketähtedeks ning ka sõna iga esimese tähemärgi suurtähtedega. Kirjutasin tabelis toodud väärtustest lähemalt.

Nüüd teoreetilise materjali konsolideerimiseks võtke näide.

Tähelepanu!

! Homme on kõikidele ilutoodetele allahindlus!

Kampaania kehtib kõikides teie linna filiaalides.

Kukkumiskorgi loomine

Kui te ei tea, mida mõiste "tilgutuskork" tähendab, siis on viimane aeg seda teada saada, kuna see on otseselt seotud praeguse teemaga.

Kukkumiskork (või mõnikord algustäht) on peatüki esimene täht, mis erineb teistest suure suuruse, värvi ja mõnel juhul isegi fondi kujunduse poolest. Elus võib sellise kirja näite leida vanadest käsikirjadest ja raamatutest.

Initsiaali loomiseks on mitu võimalust. Sageli on märk märgistuskeele sildiga esile tõstetud ja pärast seda on stiile, mis seda muudavad, ette nähtud teatud omadused. See on hea viis, kuid see väljaanne räägib css -mehhanismidest (mis on minu arvates antud juhul palju loogilisemad ja mugavamad kasutada).

Probleemi lahendamiseks võite kasutada sellist tööriista nagu.

Niisiis, antud juhul: kasutatakse esimest tähte. Nagu kõik pseudoelemendid, määratakse see valijale, eraldades need koolonitega. Pärast seda, vastavalt kõikidele stiililehtede reeglitele, määratakse atribuudid. Siiski saate rakendada ainult omadusi, mis on seotud fontide, polsterduse, värvi, tausta, veeriste ja ääriste redigeerimisega.

Teen ettepaneku kaaluda konkreetset näidet. Esitatud väikese programmi elluviimisel otsustasin teha mitte ainult värvilise tilguti, vaid täita selle lilledega. Selleks peate kasutama mõningaid keerulisi nippe läbipaistva fondivärvi seadistamiseks ja tähe täitmiseks valitud pildiga.

See lõik sisaldab väga huvitava sisuga lauset.

Jätkame järgmises lõigus huvitavat lugu.

Tulemus tundub väga atraktiivne ja ebatavaline, mis on ideaalne lahendus.

Nagu näete, on see teema väga lihtne. Saate hõlpsasti kasutada minu antud programmi koodi oma veebiressursside jaoks, muutes ja kohandades oma stiili.

Kui ülaltoodud materjal oli teile kasulik, siis tellige minu ajaveebi värskendused ja ärge unustage oma sõpradega saadud teadmisi (ja muidugi linki minu ajaveebi) jagada. Edu!

Headaega!

Parimate soovidega, Roman Chueshov

Suur täht on määratluse kohaselt teksti element, mille suurust suurendatakse võrreldes peaaegu kõigi keeltega, lause algab suure algustähega. Ja lõigu alguse kujundus silmapaistva suure algustähega võimaldab teksti struktureerida ja hõlbustab lugemist. Veebilehe koostamisel saab teksti kirjutada vastavalt autori eelistustele ja vene keele reeglitele. Samuti saab selle disaini "automatiseerida", sisestades teatud "käsud" faili, mille laiend on css - stiilileht - või täiendada oma html -faili stiiliosaga. Tavaliselt õpitakse CSS -i täiendavalt html -iga, et kiiresti muuta kogu teksti korraga mõningaid kujunduselemente.

See kehtib eriti siis, kui saidil on sadu lehti ja igaühel neist muudatuste tegemine on väga aeganõudev protsess.

Kui rakendate css -i, võivad iga lõigu alguses olevad suured tähed erilised tunduda. Näiteks allpool olev kood, mis on sisestatud html -sse ilma sulgudeta, võimaldab tekstiga, mis on kaunistatud sildiga „p”, muuta suur täht - esimene täht - suurem - 220% standardsuurusest, kollane - värviväärtus on kollane ja kirjutage see fondiga, mis erineb ülejäänud tekstist - Georgia versus batangche.

(<) style(>)

p: esimene täht (font-family: Georgia; font-size: 220%; color: yellow;)

(<)/style(>)

Ilusaid suuri tähti saab, kui luua piltide kujul oma font - iga tähe jaoks eraldi pilt, näiteks vanavene või gooti stiilis. Neid saab joonistada. Seejärel saate suure tähe asemel vajalikesse kohtadesse sisestada koodi ilma sulgudeta (<) img src=”ссылка на место, где лежит картинка”(>). Täiendavad atribuudid on kõrgus ja laius - pildi laius ja kõrgus, mille saab pikslites seada, et see ülejäänud tekstiga harmooniliselt sulanduks. Näide: (<) img src=”ссылка на место, где лежит картинка” heigh=12 px width=6px(>). Sulg ümber< и >me eemaldame.

Kui teil pole võimalust ise tähestikku joonistada, saab suurtähte kaunistada, kasutades Google'is vabalt saadaolevaid fonte (jaotis Fondid) või muid otsingumootoreid ja ressursse. Selleks tuleb ülaltoodud kood vormindada järgmiselt:

(<) style(>)

p (font-family: batangche; font-size: 93%;)

p: esimene täht (fontide perekond: Kelly + Slab; fondi suurus: 220%; värv: sinine;)

(<)/style(>)

(<)link href="http://fonts.googleapis.com/css?family=Kelly+Slab&subset=latin,cyrillic" rel="stylesheet" type="text/css" (>).

Google'i teenus võimaldab teil valida ühe või teise ja pakub valmis linke html-i või css-i lisamiseks. Juhime teie tähelepanu asjaolule, et on vaja valida fontide rühm - ladina või kirillitsa, sest peaaegu kõik ladina fondid ei tööta venekeelse teksti puhul. Hetkel pakub otsingumootor tasuta umbes 40 tüüpi.

Suurtähte või selle suurt tähte saab stiilida CSS -i teksti teisendamise atribuudi abil. Kui määrate stiililehel teksti teisendamise: pole väärtust, näeb tekst välja selle kirjutamise ajal. Kõigi tähtede teisendamiseks väiketähtedeks määrake teksti teisendus: kooloniga eraldatud väiketähed ja suurtähed suurtähtedega. Atribuudi seadmine teksti teisendamiseks: suurtähtede kasutamine põhjustab iga sõna alguses suure algustähe.

Võimaldab muuta teksti tähti ja väiketähti.

Vaikimisi on väärtuseks seatud ükski, mis ei mõjuta teksti. Teksti juhtum jääb samaks. Suur- ja väiketähed teisendavad tähemärgid vastavalt suurteks ja väiketähtedeks. Kui määrate suurtähtede väärtuse, kasutatakse iga sõna ainult esimesi märke. Pärida pärib väärtuse vanemalt.

Näide

h3 (teksti teisendamine: suured;). väiketähed (teksti teisendamine: väiketähed;). suurtähed (teksti teisendamine: suurtähtede kasutamine;)

See on pealkiri. Sellel on teksti teisendamise atribuut seatud suurtähtedele. Kõik märgid on suured.

Teksti teisendamise atribuudi on sellele lõikele rakendatud väiketähtedega, mis tähendab, et kõik tähed on väiketähed.

Ja see viimane lõik sisaldab teksti teisendamise atribuuti CAPITALIZE. Iga sõna esimesed tähed on suured ja ainult see.

Tulemus

Siiski pole kõik nii lihtne. On mõningaid nüansse. Kui pöörate tähelepanu ülaltoodud näite teisele lõigule, märkate, et sõna suurtähtedega kuvatakse vaatamata tekstile teisendatavale omadusele, mida rakendatakse lõigule koos suure algustähega, kuvatakse täielikult suurte tähtedega, mis vastab algtekstile. Seda seletatakse asjaoluga, et määratud suurtähtedega kontrollitakse ainult sõnade esimesi tähti ja ülejäänud jäävad muutmata, olenemata nende esialgsest olekust.
Vaatamata näilisele lihtsusele võib teksti teisendamise omadus olla väga kasulik. Näiteks oma saidi kõigi H1 pealkirjade teksti suurtähtede kasutamiseks peate lisama oma stiililehele ühe atribuudi.

H1 (teksti teisendamine: suured tähed;)

ja probleem lahendatakse. Ja kõiki päiseid pole vaja käsitsi muuta, mida võib olla väga -väga palju.

Sageli kiirustades saidile materjale lisades või näiteks foorumisse uut teemat luues, saab kasutaja hakata kirjutama lauset (pealkirja) väikese (väikese) tähega. See on mingil määral viga.

Näitan teile mitmeid võimalusi selle probleemi lahendamiseks: PHP ja CSS sobivad rohkem juba avaldatud materjalide jaoks, kui jQuery suudab olukorra parandada juba enne avaldamist.

Stringi esimene täht on PHP -s suurtähtedega

PHP -s on funktsioon nimega " ucfirst", Mis teisendab stringi esimese märgi suurtähtedeks, kuid selle miinus on see, et see ei tööta kirillitsaga õigesti.

Selleks kirjutame oma väikese funktsiooni. Rakendus näeb välja selline:

Selles versioonis saame lause, mis algab suure algustähega ja mida me tegelikult vajame.

Stringi suur täht CSS -is

See meetod visuaalselt (st saidi lähtekoodis näevad pakkumised välja sellised, nagu need on) teisendab ka esimese märgi suurtähtedeks.

Kasutamine on järgmine:

Pseudoelemendi kasutamine " esimene täht"Ja omadused" teksti teisendada»Lõigu iga esimese tähe jaoks oleme määranud välimuse.

Stringi esimene täht on jQuery -s suurtähtedega

Nagu ma varem ütlesin, sobib see teisendusmeetod kõige paremini materjalidele, mis on veel avaldamata.

Näiteks võtame tekstivälja (see toimib meie jaoks pealkirja sisestamise väljana) ja kirjutame sellele väikese skripti, mis väikese algustähega lause sisestamisel teeb selle suure algustähega:

Skript käivitatakse nii teksti kirjutamisel kui ka lihtsalt kleepimisel. Ärge unustage, et skriptide toimimiseks teie saidil peab teil olema ühendatud jQuery raamatukogu.

Kontrollib elementide teksti teisendamist suurteks või väiketähtedeks. Kui väärtus on muu kui mitte, muudetakse lähteteksti väiketähte.

lühike info

Nimetused

	Kirjeldus	Näide
<тип>	Näitab väärtuse tüüpi.	<размер>
A & B	Väärtused tuleb kuvada näidatud järjekorras.	<размер> && <цвет>
A | B	Näitab, et soovitatud väärtustest tuleks valida ainult üks (A või B).	tavaline | väikesed mütsid
A || B	Iga väärtust saab kasutada üksi või koos teistega suvalises järjekorras.	laius || loendama
	Rühmitab väärtusi.	[kärpimine || rist]
*	Korrake null või enam korda.	[,<время>]*
+	Korrake üks või mitu korda.	<число>+
?	Määratud tüüp, sõna või rühm on valikuline.	sisse?
(A, B)	Korda vähemalt A, kuid mitte rohkem kui B korda.	<радиус>{1,4}
#	Korrake üks või mitu korda, eraldades need komadega.	<время>#

×

Väärtused

suurtähtede kasutamine Lauses on iga sõna esimene täht suurtähtedega. Ülejäänud sümbolid ei muuda nende välimust. väiketähed Kõik tekstimärgid muutuvad väiketähtedeks. suured tähed Kõik tekstimärgid on suured (suured). ükski Ei muuda tähemärki.

Liivakast

Karupoeg Puhh ei kartnud alati väikest kosutust, eriti kella üheteistkümne ajal hommikul, sest sel ajal oli hommikusöök juba ammu lõppenud ja õhtusöök polnud mõelnud veel alata. Ja muidugi oli tal kohutavalt hea meel näha, kuidas Jänes tasse ja taldrikuid välja võttis.

div (teksti teisendamine: suurtähtede kasutamine;)

Näide

Keskaja kultuurimälestis

Amazonase madalik võtab endale väikese kasside ja koerte transpordi ning Hayosh Bayah on kuulus oma punaste veinide poolest.

Selle näite tulemus on näidatud joonisel fig. 1.

Riis. 1. Teksti teisendamise omaduse rakendamine

Objekti mudel

Objekt.style.textTransform

Spetsifikatsioon

Iga spetsifikatsioon läbib heakskiitmise mitu etappi.

• Soovitus - W3C on selle spetsifikatsiooni heaks kiitnud ja seda soovitatakse standardina.
• Kandidaatide soovitus ( Võimalik soovitus) - standardi eest vastutav rühm on rahul, et see täidab oma eesmärke, kuid standardi rakendamiseks on vaja arendajate kogukonna abi.
• Kavandatud soovitus ( Soovitatud soovitus) - Siinkohal esitatakse dokument lõplikuks kinnitamiseks W3C nõuandekogule.
• Tööprojekt - eelnõu küpsem versioon pärast arutelu ja läbivaatamist kogukonna läbivaatamiseks.
• Toimetaja mustand ( Toimetuse eelnõu) - standardi eskiisversioon pärast projekti toimetajate toimetamist.
• Mustand ( Eelnõu spetsifikatsioon) on standardi esimene mustand.

×