Styl CSS dla kodu na Twoim blogu

css

Mój przyjaciel zapytał mnie, jak utworzyłem regiony kodu w moim ostatnim wpisie na blogu. Właściwie „sfałszowałem” region kodu używając stylu. W Bloggerze możesz edytować swój szablon. Dodałem następujący styl:

p.code {rodzina czcionek: Courier New; rozmiar czcionki: 8 pkt; border-style: wstawka; border-width: 3px; wypełnienie: 5px; background-color: #FFFFFF; wysokość linii: 100%; margines: 10px}

Następnym krokiem jest edycja mojego tagu w trybie „Edytuj kod HTML”. Po prostu wskazuję na swój nowy styl, tworząc metkę. Voila! Podział stylów:

  • Ustaw czcionkę na Courier New… wygląda jak ogólny edytor kodu
  • Ustaw rozmiar czcionki na 8 punktów, aby wyglądać w prawo
  • Ustaw styl obramowania akapitu na „wstawka”. Powoduje to odtworzenie wyglądu obszaru tekstowego na stronie.
  • Ustaw szerokość obramowania na 2 lub 3 piksele. Dzięki temu styl obramowania wstawki wygląda dobrze.
  • Dopełnienie określa odległość między obramowaniem a tekstem w środku.
  • Kolor tła… ustaw go na biały (#FFFFFF)
  • Wysokość linii - dostosowałem to do 100%, ponieważ niektóre inne style w moim motywie blogera sprawiły, że wysokość mojej linii wynosiła około 200%
  • Ustaw margines na 10 pikseli. Spowoduje to odsunięcie akapitu (znacznika p) o 10 pikseli od wszystkiego.

To wszystko, jest też to! Jedna uwaga: edytor dostarczany z Bloggerem nie jest w stanie wyświetlić tego, co będzie widoczne w Twoim blogu. Ale działa i wygląda świetnie!

Jeszcze jedna uwaga… po wprowadzeniu zmiany w tagu edytor Bloggera lubi losowo używać go w innym miejscu w Twoim poście. To trochę denerwujące! Radziłbym napisać cały post, a następnie wprowadzić jedną małą edycję.

Ostatnia uwaga… pamiętaj, aby wyświetlać symbole za pomocą encji HTML! Kilka przykładów:

  • Cytaty („) to„
  • > jest>
  • > jest>

Miłego kodowania!

Komentarze 3

  1. 1
  2. 2
  3. 3

Co o tym myślisz?

Ta strona używa Akismet do redukcji spamu. Dowiedz się, jak przetwarzane są dane komentarza.