Hvordan lage en bildetekst under et bilde i CSS

Webdesignere bruke et sett med webdesign regler som kalles Cascading Style Sheets (CSS) til å style sine nettsider. Disse reglene forbedre nettstedets utseende og gir designer med en metode for å kontrollere gjengivelsen av innholdet på nettstedet. Designeren bruker CSS til å style profesjonell leter bilder og bildetekster og lage et øye behage effekt for nettstedets besøkende.

Bruksanvisning

1 Skriv en ny CSS-regel for å lage en forelder eller wrapper div. Dette div vil huse både bildet og bildeteksten. Gi div nødvendige justeringsegenskaper for å plassere den på ønsket sted på nettsiden og inkluderer design regler etter behov. For eksempel vil følgende eksempel på en CSS-regel skape en wrapper div med id imageParent. Den imageParent div vil inneholde et bilde og en bildetekst. Det vil flyte bildet til høyre på websiden din, og vil vikle bilde og bildetekst i en tynn, svart, solid ramme som skiller den fra de andre innholds.

imageParent {float: right; border: tynn sort solid;}

2 Lag en annen CSS-regel for å definere egenskapene til bildet. I dette eksemplet vil denne regelen plassere en margin på tre piksler mellom bildet og grensen. De tre-pixel margin vil bli brukt på toppen, til høyre og venstre side av bildet. Regelen plasserer en one-piksel margin på bunnen av bildet der teksten skal plasseres. Dette vil ha den visuelle effekten av å gifte seg med bildetekst med bildet innsiden av svart ramme.

imageParent img {margin-top: 3px; margin-bottom: 1px; margin-right: 3px; margin-left; 3px;}

3 Definer bildetekst eiendommer med en CSS-regel. Du kan definere egenskapene til bildetekst ved styling en tekst tag eksempel en overskrift eller et avsnitt tag. I dette eksempel er et avsnitt kode utformet som vil bli brukt til å inneholde bildeteksten. Reglene sier at bildeteksten vises i kursiv mens samkjøre i midten av div.

imageParent p {text-align: center; fontstil; kursiv}

4 Skriv inn HTML Dette eksemplet viser HTML-koden som er stylet med CSS-regler fra tidligere eksempler.

<Div id = "imageParent"> <img /> <p> Bildeteksten </ p> </ div>