Blogger: styl CSS dla kodu na Twoim blogu
Znajomy zapytał mnie, jak utworzyłem regiony kodu we wpisie Bloggera. Zrobiłem to, używając tagu stylu dla CSS w moim szablonie Bloggera. Oto co dodałem:
p.code {
font-family: Courier New;
font-size: 8pt;
border-style: inset;
border-width: 3px;
padding: 5px;
background-color: #FFFFFF;
line-height: 100%;
margin: 10px;
}
p.code
: To jest reguła CSS, której celem jest HTML<p>
elementy o nazwie klasy „code”. Oznacza to, że dowolny akapit z tą klasą będzie stylizowany zgodnie z poniższymi właściwościami.font-family: Courier New;
: ta właściwość ustawia rodzinę czcionek na „Curier New”. Określa czcionkę, która będzie używana w tekście w docelowych elementach.font-size: 8pt;
: Ta właściwość ustawia rozmiar czcionki na 8 punktów. Tekst w docelowych elementach będzie wyświetlany przy tym rozmiarze czcionki.border-style: inset;
: ta właściwość ustawia styl obramowania na „wstawiony”. Tworzy zapadnięty lub wciśnięty wygląd obramowania wokół docelowych elementów.border-width: 3px;
: Ta właściwość ustawia szerokość obramowania na 3 piksele. Obramowanie wokół elementów będzie miało grubość 3 pikseli.padding: 5px;
: ta właściwość dodaje 5 pikseli wypełnienia wokół zawartości elementów docelowych. Zapewnia odstęp między tekstem a obramowaniem.background-color: #FFFFFF;
: Ta właściwość ustawia kolor tła na biały (#FFFFFF). Treść docelowych elementów będzie miała białe tło.line-height: 100%;
: Ta właściwość ustawia wysokość linii na 100% rozmiaru czcionki. Zapewnia to rozmieszczenie linii tekstu zgodnie z rozmiarem czcionki.margin: 10px;
: Ta właściwość dodaje margines 10 pikseli wokół całego elementu. Zapewnia odstęp pomiędzy tym elementem a innymi elementami na stronie.
Dostarczony kod CSS definiuje styl akapitów HTML za pomocą klasy „code”. Ustawia czcionkę, rozmiar czcionki, styl obramowania, szerokość obramowania, dopełnienie, kolor tła, wysokość linii i margines dla tych akapitów. Ten styl można zastosować do fragmentów kodu lub wstępnie sformatowanego tekstu w poście w Bloggerze, aby nadać im specyficzny wygląd.
Oto jak to będzie wyglądać:
kod p. {
rodzina czcionek: Courier New;
rozmiar czcionki: 8 pkt;
styl obramowania: wstawka;
szerokość obramowania: 3px;
padding: 5px;
kolor tła: #FFFFFF;
wysokość linii: 100%;
margines: 10px;
}
Miłego kodowania!