2013-08-02 19 views
15

Próbuję zrobić stronę internetową i chcę wiedzieć, jak zmienić rozmiar tekstu w akapicie. Chcę, aby akapit 1 był większy niż akapit 2. Nie ma znaczenia, o ile większy, o ile jest większy. Jak mam to zrobic?Jak zmienić rozmiar czcionki w html?

Moje kodu jest poniżej:

<html> 
<head> 
<style> 
    p { 
    color: red; 
    } 
</style> 
</head> 
<body> 
<p>Paragraph 1</p> 
<p>Paragraph 2</p> 
</body> 
</html> 

Odpowiedz

18

Daj im klasę i dodać styl do klasy.

<style> 
    p { 
    color: red; 
    } 
    .paragraph1 { 
    font-size: 18px; 
    } 
    .paragraph2 { 
    font-size: 13px; 
    } 
</style> 

<p class="paragraph1">Paragraph 1</p> 
<p class="paragraph2">Paragraph 2</p> 

Sprawdź to EXAMPLE

+0

Jest to specyficzne dla przeglądarki. Jeśli chcesz mieć domyślne ustawienia w różnych przeglądarkach, powinieneś ustawić to samodzielnie. –

1

Jeśli chcesz to zrobić bez dodawania klas ...

p:first-child { 
    font-size: 16px; 
} 

p:last-child { 
    font-size: 12px; 
} 

lub

p:nth-child(1) { 
    font-size: 16px; 
} 

p:nth-child(2) { 
    font-size: 12px; 
} 
12

lub dodać style inline:

<p style="font-size:18px">Paragraph 1</p> 
<p style="font-size:16px">Paragraph 2</p> 
+2

To nie jest bardzo pożądane ... – Meryovi

+1

Dzięki. Działa idealnie. Czy masz pojęcie, jaki jest domyślny rozmiar czcionki? Myślę, że jest to około 16/17px ... –

+1

Style Inline są złe! –

7

Jeśli jesteś zainteresowany tylko zwiększenie rozmiaru czcionki tylko w pierwszym akapicie dowolnego dokumentu, efekt używane przez publikacje online, możesz użyć pseudoklasę first-child, aby osiągnąć pożądany efekt.

p:first-child 
{ 
    font-size: 115%; // Will set the font size to be 115% of the original font-size for the p element. 
} 

Jednak spowoduje to zmianę rozmiaru czcionki każdego elementu p, który jest pierwszym dzieckiem dowolnego innego elementu. Jeśli jesteś zainteresowany w ustalaniu wielkości pierwszego elementu p elementu ciała, a następnie użyć następujących:

body > p:first-child 
{ 
    font-size: 115%; 
} 

Powyższy kod działa tylko z elementu p, który jest dzieckiem elementu body.

0

Nie można tego zrobić w HTML. Możesz w CSS. Utwórz nowy plik CSS i napisać:

p { 
font-size: (some number); 
} 

Jeśli to nie działa upewnij się, że nie mają żadnych „pre” znaczniki, które sprawiają, kod nieco mniejszy.

Powiązane problemy