Стыль CSS для кода ў вашым блогу

CSS

Мой сябар спытаў мяне, як я зрабіў кодавыя рэгіёны ў сваёй апошняй запісе ў блогу. Я на самой справе "падрабіў" вобласць кода, выкарыстоўваючы стыль. У Blogger вы можаце рэдагаваць свой шаблон. Я дадаў наступны стыль:

p.code {сямейства шрыфтоў: Courier New; памер шрыфта: 8pt; стыль бардзюра: урэзка; шырыня мяжы: 3 пікселі; абіўка: 5 пікселяў; колер фону: #FFFFFF; вышыня лініі: 100%; запас: 10 пікселяў}

Наступны крок - рэдагаванне майго тэга ў рэжыме "Змяніць HTML". Я проста паказваю свой новы стыль, зрабіўшы тэг. Вуаля! Разбіццё стыляў:

  • Усталюйце шрыфт Courier New ... падобна на рэдактар ​​агульнага кода
  • Усталюйце памер шрыфта 8pt, каб выглядаць правільна
  • Усталюйце стыль мяжы абзаца на "ўстаўка". Гэта паўтарае, як тэкставая вобласць выглядае на старонцы.
  • Усталюйце шырыню мяжы ў 2 ці 3 пікселі. Гэта робіць устаўны стыль бардзюра выглядаць правільна.
  • Адступ усталёўвае адлегласць паміж мяжой і тэкстам унутры.
  • Колер фону ... усталюйце яго белым (#FFFFFF)
  • Вышыня радка - я адрэгуляваў гэта да 100%, таму што некаторыя іншыя стылі ў тэме майго блогера зрабілі вышыню радка прыблізна 200%
  • Усталюйце поле ў 10 пікселяў. Гэта перамяшчае абзац (тэг p) на 10 пікселяў ад усяго.

Вось і ўсё! Адна заўвага: Рэдактар, які пастаўляецца разам з Blogger, не можа адлюстроўваць тое, што будзе адлюстроўвацца ў вашым блогу. Але гэта працуе і выглядае выдатна!

Яшчэ адна заўвага ... пасля таго, як вы ўнялі змяненне ў тэг, рэдактар ​​Blogger любіць выпадковым чынам выкарыстоўваць яго ў іншым месцы вашага паведамлення. Гэта крыху раздражняе! Маёй парадай было б напісаць увесь свой пост, а потым зрабіць адно невялікае змяненне.

Апошняя заўвага ... абавязкова выкарыстоўвайце HTML Entities для адлюстравання вашых сімвалаў! Некалькі прыкладаў:

  • Цытаты (")"
  • > ёсць>
  • > ёсць>

Шчаслівае кадаванне!

3 Каментары

  1. 1
  2. 2
  3. 3

    я думаю, што зараз не трэба пісаць. вы можаце выкарыстоўваць карысныя рэдактары. вы можаце выбраць колер, аблямоўку і г.д ..

Што вы думаеце?

Гэты сайт выкарыстоўвае Akismet для барацьбы са спамам. Даведайцеся, як дадзеныя апрацоўваюцца каментар.