VirtualMV/CSS/Formatting/Span
Introduction
The < span> tag allows us to create a block in a paragraph.
|
Cascading Style SheetsBy the end of this page you will be able to:
|
Formatting parts of a paragraph - using span
The general format of the use of span with the class attribute is:
span.class {property1:value1 : property2:value2 : …… }
<html> <head> <title>Untitled</title> <style> span.bigblue {color:blue; font-size:2em} </style> </head> <body> <p>This is normal text.<br /> <span class='bigblue'>This is formatted text.</span></p> </body> </html>
Other properties for text include: color, font-size, font-family, text-align, text-indent, line-height, margin-left, margin-right, margin-top, margin-bottom.
Examples
We can use borders to highlight specific parts of text,or create some interesting button effects For example:
border-style:dotted solid double dashed;
- top border is dotted
- right border is solid
- bottom border is double
- left border is dashed
The following examples use some webkit specific attributes (Google Chrome and Apple Safari Browsers), as well as "standard tags" being introduced in Internet Explorer version 9. Notice how some of the properties can have multiple values.
- Button text
<span style="font-family: menu,Arial; border: 1px solid #0000FF; background-color: #E6F2FF; -webkit-box-shadow: 1px 1px 2px #80FF80; box-shadow: 1px 1px 2px #80FF80; -moz-border-radius: 3px; border-radius: 3px; font-size: x-small">Button text</span>
- xxx
<span style="font-family: menu,Arial; border: 1px solid #999999; background-color: #E6F2FF">Menu text</span>
- _ xxx _
_<span style="font-family: menu, Arial; background-color: #E8E8E8; border-style: double solid none double; border-width: 1px; -moz-border-radius: 5px 5px 1px 1px; border-radius: 5px 5px 1px 1px; ">Tab text</span>_
References
|
virtualMV | Superquick wiki guide | Please give me some feedback |
VirtualMV/CSS/Formatting/Span. (2024). In WikiEducator/VirtualMV wiki. Retrieved December 21, 2024, from http:https://wikieducator.org/VirtualMV/CSS/Formatting/Span (zotero)
|
