Hoe maak je een Blockquote met CSS-stijl

Hoe maak je een Blockquote met CSS-stijl


Maak uw webpagina blockquotes opvallen en worden onderscheiden. Stijl ze met CSS om ze indrukwekkend anders.

instructies

Gebruik een background-image, a Little Padding, en een Border

1 Typ een blockquote op uw web-pagina als je normaal zou, met behulp van blockquote tags om te formatteren.

2 Hoe maak je een Blockquote met CSS-stijl

Een achtergrond is niet noodzakelijk, maar er is een in dit voorbeeld. Het is groot genoeg om een ​​achtergrond voor een blockquote die langer is dan die in het voorbeeld bij de opening van het artikel te maken. Merk op dat een zeer lange blockquote een ander beeld zou vereisen om er goed uitzien.

3 Begin met het toevoegen van de background-image naar de blockquote selector in uw CSS. Hier is een voorbeeld:

blockquote {

background-image: url(tack.jpg);
background-repeat: no-repeat;
background-position: left center;

}

Sommige afbeeldingen zou kijken goed herhaald, maar deze zal beter werken met een no-repeat als de waarde voor de herhaling pand. Door het zo kleefkracht op het horizontaal naar links en het centrum verticaal de tack blijven links en laat enige ruimte voor verticale expansie aan de boven- en onderkant een wat langere blockquote.

4 Geef de blockquote een breedte als je wilt. Blockquotes worden ingesprongen op de linker en rechter bij verstek: U kunt overwegen dat er voldoende containment, of u kunt een kleinere breedte willen.

5 Met dit beeld het bijzonder is wat opvulling nodig om de tekst van de blockquote weg van de linkerzijde te verplaatsen, zodat het niet op de top van de tack heeft zitten. Eindelijk een rand om sommige of alle kanten.

Het voorbeeld regel is nu:

blockquote {

background-image: url(tack.jpg);
background-repeat: no-repeat;
background-position: left center;
width: 400px;
padding-left: 110px;

padding-right: 5px;
border: 2px stippel # FC8A42;
}

U kunt dit voorbeeld regel te veranderen in vele opzichten afhankelijk van het beeld, de opvulling of de grens die u gebruikt om een ​​blockquote aan te passen. Maak een aangepaste blockquote die goed zal werken op uw webpagina.

Hints

  • U kunt regels marge en achtergrondkleur gebruiken om de stijl blockquotes.
  • U mag de font-size of line-height veranderen om een ​​blockquote te onderscheiden van de andere tekst op de pagina.
  • U kunt de eigenschap float gebruiken om een ​​blockquote naar links of naar rechts marge te verplaatsen en laat de andere tekst aan omheen stromen.