• Artykuł

          

Encyklopedia HTML i CSS - Jak zmienić wygląd zawartości znacznika code w CSS  Udostępnij na: Facebook

Autor: Mateusz Mikulski

Opublikowano: 2011-10-03

Bardzo ważną rzeczą, podczas tworzenia treści na stronach WWW, jest odpowiednie oznaczenie elementów tak, aby były one zarówno czytelne, jak również stosownie wyróżnione. Doskonałym przykładem takiej treści są fragmenty kodu, zamieszczane w znaczniku <code>, który mimo wyraźnej różnicy w formatowaniu czcionki względem innych znaczników, nie wyróżnia się bardzo w momencie, w którym wprowadzony jest w towarzystwie dużej ilości tekstu (Rys. 1.).

Rys. 1. Kod programu na stronie WWW bez wyraźnego wyróżnienia.

Dzięki wykorzystaniu Kaskadowych Arkuszy Stylów istnieje możliwość edycji wyglądu zawartości, znajdującej się na stronie HTML. W przypadku wizualnie niezmiennych elementów, które często występują na stronie WWW, takich jak np. fragmenty kodu, warto zdefiniować globalnie wygląd takiego elementu za pomocą stylów CSS. Pozwala to na odpowiednie wyróżnienie elementów tego typu i w razie potrzeby szybkie wprowadzenie zmian.

Globalne zdefiniowanie wyglądu znacznika może być wykonane poprzez dodanie definicji CSS w sekcji<head> lub w zewnętrznym pliku. Aby zmienić wygląd tego znacznika należy wskazać znacznik code. Więcej o wskazywaniu elementów znajdziesz w encyklopedii Jak wskazać element w CSS.

Przykład

<html>

<head>

<title>Zmiana wyglądu znacznika code</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8">

<style type="text/css">

code{
    display: block;
    border:1px solid;
    margin: 0 0 0 40px;
    padding: 25px;
    width: 600px;
    }
</style>

</head>

<body>
    <p>Lorem ipsum lorem ipsum lorem ipsum Lorem ipsum lorem ipsum lorem ipsum Lorem <code>Tu znajduje się kod programu</code>ipsum lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum lorem ipsum Lorem ipsum lorem ipsum lorem ipsum lorem ipsum Lorem ipsum lorem ipsum lorem ipsum</p>
    </body> 
</html>

Taka definicja będzie automatycznie zastosowana do treści, znajdującej się w znaczniku<code>.

Po dodaniu przedstawionego formatowania, treść ze znacznika <code> została przedstawiona na Rys. 2.

Rys. 2. Kod odpowiednio wyróżniony za pomocą CSS.

Sprawdź

Praktyczne przykłady

Zobacz, jak praktycznie wykorzystać znacznik <code> w samouczku: