css| Skills | tutorials
Previous section: Custom Categories
Text properties
Text attributes can be set text color, size, font, weight, and so on.
Raw code |
<STYLE> SPAN.C1 {color:red;position:relative;font-size:12px;font-family:arial;font-weight:700} SPAN.C2 {Color:blue} span.c3 {Color:green} span.c4 {Color:pink} </STYLE> <span class=c1>a</span> <span class=c2>b</span> <span class=c3>c</span> <span class=c4>d</span> |
Show results |
A B C D |
Text Color {color}
syntax: {color: (color)}
Raw code |
<STYLE> span.test {color:red} </STYLE>
<span class=test>a B C d</span> |
Show results |
A B C D |
Text Category {FONT}
Set font style, case change, weight, size, text row height, font
syntax: {FONT: (font-style) ︱ (font-variant) ︱ (font-weight) ︱ (font-size) ︱ (font-family) ︱/(line-height)}
Raw code |
<STYLE> span.test {font:italic BOLD 12pt/18pt} </STYLE>
<span class=test>a B C d</span> |
Show results |
A B C D |
Download font {@FONT-face}
Syntax: @FONT-face {font-family: (font-family); Src:url (URL)}
Raw code |
<STYLE> @FONT-face {font-family: (undecided); Src:url (download Address)} </STYLE> |
Show results |
No results |
Text Font {font-family}
syntax: {font-family: (font-name) ︱ (generic-family)}
Raw code |
<STYLE> span.test {font-family: "Arial Black"} </STYLE>
<span class=test>a B C d</span> |
Show results |
A B C D |
Text Size {Font-size}
Set font size (can be set unit properties: Point PT, inch in, cm cm, pixel px, percent%)
Syntax: {font-size:large︱medium︱smaller︱ (length) ︱ (percentage)}
Raw code |
<STYLE> Span.test1 {Font-size:large} Span.test2 {font-size:10pt} SPAN.TEST3 {font-size:50%} </STYLE>
<span class=test>a B C d</span> <span class=test1>e F G h</span> <span class=test2>i J K l</span> |
Show results |
A B C D E F G H I J K L |
Type style {Font-style}
Set font style (divided into: normal, italic)
Syntax: {font-style:normal︱italic}
Raw code |
<STYLE> Span.test1 {Font-style:italic} </STYLE>
<span class=test>a B C d</span> |
Show results |
A B C D |
Text Changes {font-variant}
Set font changes (divided into: normal, small font)
syntax: {font-variant:normal︱small-caps}
original code |
<style>< Br>span.test1 {font-variant:small-caps} </style> <span class=test>a B C d</span> |
|
A B C D |
Text Weight {Font-weight}
Set font weight (divided into: normal, coarse font)
Syntax: {font-weight:normal︱bold}
Raw code |
<STYLE> Span.test1 {Font-weight:bold} </STYLE>
<span class=test>a B C d</span> |
Show results |
A B C D |
Next section: Connection Properties