Caps tùsail CSS

Ionnsaich mar a chruthaicheas tu caiptean tùsail inntinneach a 'cleachdadh CSS agus Ìomhaighean

Ionnsaich mar a chleachdas tu CSS gus ceapan tùsail fiadhaich a chruthachadh airson do pharagrafan. Tha eadhon dòigh ath-nuadhachail ìomhaigh sìmplidh gus ìomhaigh grafaigeach a chleachdadh airson an t-sreath tòiseachaidh agad.

Stòran bunaiteach de na caiptean tùsail

Tha trì stoidhlichean bunaiteach de chaiptean tùsail ann an sgrìobhainnean:

Tha caiptean tùsail no caiptean tuiteam-eòlach gu math eòlach. Is e dòigh mhath a th 'annta a bhith a' dèanamh aodach fada teann is teannach de theacsa. Agus leis an t-seilbh CSS: ciad litir, faodaidh tu mìneachadh a dhèanamh gu furasta air ciamar a nì thu na ciad litrichean agad.

Cruthaich Caip Tùsail Sìmplidh

Feumaidh tu a h-uile dad a dhèanamh gus sìmplidh tùsail sìmplidh a chruthachadh a bhith a 'dèanamh a' chiad litir den pharagraf agad nas motha ann am meud leis a 'chiad eileamaid fhuadain:

p: litir an toiseach {font-size: 3em; }

Ach tha mòran de shealladairean a ' faicinn gu bheil a' chiad litir nas motha na an còrr den teacsa air an loidhne, agus mar sin bidh iad a 'dèanamh an t-aon rud co-ionnan ri dè a bhiodh a' dèanamh ciall don chiad litir sin, chan e a 'chòrr den loidhne. Gu fortanach, tha e furasta seo a rèiteachadh leis an eileamaid dearg-loidhne agus an togalach àirde-loidhne:

p: litir an toiseach {font-size: 3em; } p: first-line {loidhne-àirde: 1em; }

Cluich leis an àirde loidhne anns an sgrìobhainn agad gus an lorg thu am meud ceart airson do theacsa.

Cluich le do chas tùsail

Aon uair 's gu bheil thu a' tuigsinn ciamar a chruthaicheas tu ceum tùsail, faodaidh tu aodach a dhèanamh suas ann an aodach èibhinn gus a dhèanamh seasmhach. Cluich le dathan, dathan cùl-raoin, crìochan, no ge brith dè a tha a 'bualadh air do chomas. Is e stoidhle gu math sìmplidh a dh 'fhaodadh dathan do chruth-clò agus dath cùil-chùil a chur air ais dìreach airson a' chiad litir:

p: litir an toiseach {font-size: 300%; cùl-dath: # 000; dath: #fff; } p: first-line {loidhne-àirde: 100%; }

Is e cleas eile a bhith a 'meadhain a' chiad loidhne. Faodaidh seo a bhith duilich le CSS, oir faodaidh meadhan an teacsa a bhith eadar-dhealaichte ma tha an cruth sùbailte agad. Ach le cuid a bhith a 'cluich mun cuairt leis na luachan, faodaidh tu do chiad loidhne a thoirt gu leòr gus am bi coltas gu bheil a' chiad litir sa mheadhan. Dìreach cluich leis an àireamh sa cheud air teacsa-teacsa na paragraf gus am faic e ceart:

p: litir an toiseach {font-size: 300%; cùl-dath: # 000; dath: #fff; } p: first-line {loidhne-àirde: 100%; } p {teacsa-teacsa: 45% ; }

Tha na caiptean tùsail faisg air cruaidh le CSS

Faodar sgapan tùsail ri thaobh a bhith duilich le CSS seach gu bheil na diofar shealladairean a 'taisbeanadh nam futaichean eadar-dhealaichte. Is e am beachd air cùl a bhith a 'cruthachadh caip ri thaobh ann an CSS a bhith a' cleachdadh an togalaich a tha a 'toirt a-steach teacsa air a' chiad loidhne gus a thoirt air falbh (air an làimh chlì) luach àicheil. Feumaidh tu cuideachd an iomall chlì den pharagraf sin atharrachadh le cuid de shuim. Cluich leis na h-àireamhan sin gus am bi am paragraf a 'coimhead math.

p {text-indent: -2.5em; marg-clì: 3em; } p: litir an toiseach {font-size: 3em; } p: first-line {loidhne-àirde: 100%; }

A 'faighinn caiptean tùsail fìor mhath

Is e an dòigh as fheàrr air caip tùsail foghainteach an cruth-clò atharrachadh gu teaghlach cruth nas sgeadaichte. Ma chleachdas tu sreath de fhuaimichean le clò-bhualadh coitcheann , cuidichidh e le bhith a 'dèanamh cinnteach gu bheil an t-sreath tòiseachaidh agad a' sealltainn gu math mar as urrainn do luchd-ceannach fhaicinn, gun a bhith a 'faighinn a-steach ruigsinneachd agus cùisean cleachdaidh.

p: litir an toiseach {font-size: 3em; teaghlach cruth-clò: "Sgriobt Eideardach ITC", "Brush Script MT", cursive; } p: first-line {loidhne-àirde: 100%; }

Agus, mar as àbhaist, faodaidh tu na molaidhean seo uile a chur còmhla gus ceum tòiseachaidh a chruthachadh a stoidhle ris a 'pharagraf agad.

A 'cleachdadh caip tùsail grafach

Ma tha, chan eil thu fhathast dèidheil air mar a tha na ceumannan tùsail agad a 'coimhead air an duilleag, faodaidh tu tadhal air grafaigean gus an dearbh bhuaidh a tha thu a' lorg a lorg. Ach mus co-dhùin thu gluasad dìreach gu grafaig, bu chòir dhut a bhith mothachail mu na duilgheadasan a th 'aig an dòigh seo:

An toiseach, feumaidh tu cruthachadh a 'chiad litir. Chleachd mi Photoshop airson an litir L a chruthachadh leis a 'chruth "Sgrìobhadh Eideardach ITC". Rinn mi e uabhasach mòr - 300pt ann am meud. Chuir mi an uairsin an ìomhaigh sìos chun a 'char as lugha timcheall air an litir agus thug mi fa-near an leud agus àirde an ìomhaigh.

An uair sin chruthaich mi "capL" clas airson mo pharagraf. Seo far a bheil mi a 'mìneachadh dè an ìomhaigh a chleachdas e, an tùs (àirde loidhne), agus mar sin air adhart.

Feumaidh tu an leud agus àirde an ìomhaigh a chleachdadh gus teacsa-teacsa agus mullach glanaidh na paragraf a shuidheachadh. Airson an dealbh L agam, bha feum agam air indent 95px agus padding 72px.

p.capL {loidhne-àirde: 1em; background-image: url (capL.gif); cùl-ath-aithris: gun ath-aithris; teacsa-teacsa: 95px; mullaich-topadh: 72px; }

Ach chan e sin uile. Ma dh'fhàgas tu e an sin, thèid a 'chiad litir a dhubhadh às anns a' pharagraf - an toiseach leis a 'ghrafaig, agus an uair sin san teacsa. Mar sin, chuir mi rèis timcheall a 'chiad eileamaid sin leis a' chlas "tùsail" - agus dh'innis mi dhan bhrabhsair nach do nochd an litir sin:

rèis.mhoillseachadh {taisbeanadh: gin; }

Agus tha an grafach a 'taisbeanadh gu ceart. Faodaidh tu cluich leis an teacsa-teacsa air a 'pharagraf gus an teacsa a ghluasad suas chun na litreach, ge-tà, bu mhath leibh a bhith air a thaisbeanadh.