Štýl CSS pre kód na vašom blogu

css

Jeden môj priateľ sa ma spýtal, ako som vytvoril oblasti kódu v mojom poslednom blogovom príspevku. Vlastne som „predstieral“ oblasť kódu s využitím štýlu. V službe Blogger môžete upravovať svoju šablónu. Pridal som nasledujúci štýl:

p.code {font-family: Courier New; veľkosť písma: 8pt; hraničný štýl: vložka; šírka okraja: 3px; výplň: 5px; farba pozadia: #FFFFFF; výška čiary: 100%; okraj: 10px}

Ďalším krokom je úprava mojej značky v režime „Upraviť HTML“. Jednoducho ukážem svoj nový štýl vytvorením značky. Voila! Rozdelenie štýlov:

  • Nastaviť písmo na Courier New… vyzerá ako editor všeobecných kódov
  • Nastavte veľkosť písma na 8pt, aby vyzerala dobre
  • Nastavte štýl orámovania odseku na „vložené“. Takto sa replikuje, ako vyzerá textová oblasť na stránke.
  • Nastavte šírku okraja na 2 alebo 3 pixely. Vďaka tomu bude štýl vloženého orámovania vyzerať správne.
  • Výplň nastavuje vzdialenosť medzi orámovaním a textom vo vnútri.
  • Farba pozadia ... nastaviť na bielu (#FFFFFF)
  • Výška riadku - upravil som to na 100%, pretože niektoré ďalšie štýly v mojej téme bloggera spôsobili, že výška riadku bola asi 200%
  • Nastaviť okraj na 10 px. Týmto sa odsek (značka p) posúva o 10 pixelov ďalej od všetkého.

A to je všetko! Jedna poznámka: Editor, ktorý je súčasťou služby Blogger, nie je schopný zobraziť informácie, ktoré sa zobrazia vo vašom blogu. Ale funguje to a vyzerá to skvelo!

Ešte jedna poznámka ... po vykonaní úpravy značky ju editor služby Blogger rád náhodne použije kdekoľvek inde vo vašom príspevku. Je to trochu nepríjemné! Moja rada by bola napísať celý váš príspevok a potom ten malý upraviť.

Jedna poznámka na záver ... na zobrazenie svojich symbolov použite entity HTML! Pár príkladov:

  • Citáty („) sú“
  • > je>
  • > je>

Šťastné kódovanie!

3 Komentáre

  1. 1
  2. 2
  3. 3

Čo si myslíte?

Táto stránka používa Akismet na zníženie spamu. Zistite, ako sa spracúvajú údaje vašich komentárov.