HTML CSS Reference/CSS Attributes and Javascript Style Properties

Материал из Web эксперт

Перейти к: навигация, поиск

Содержание

"font" Example

 
<html>
<body>
<div style="font:italic normal bolder 12pt verdana"> 
font font</div>
   <hr>
   <div style="padding:10px;"
        onmouseover="this.style.font="italic small-caps bold 12pt serif""
        onmouseout="this.style.font="normal normal normal normal medium times new roman"">
        Move the mouse over and out to change the font style.
   </div>
</body>
</html>



"font-face" Example

 
<head>
<style type="text/css">
@font-face { font-family: Lucida; 
             font-style: normal; 
             font-weight: normal; 
             src: url("fontFile.eot")
           }
</style>
</head>
<body>
<p style="font-family: Lucida"> Paragraph text </p>
</body>
</html>



"font-face" Syntax and Note

Note:
Set a downloadable font.



"font-family" Example

 
<html>
<body>
<div onmouseover="this.style.fontFamily="arial"" 
     onmouseout="this.style.fontFamily="times"">
     Move the mouse over and out to change the font-family value.
</div>
</body>
</html>



"font-family" is applied to

+----------------+--------------------------------------------------------------+
| Applied_To     |<a>                             <address>                     |
|                |<b>                             <basefont>                    |
|                |<big>                           <blockquote>                  |
|                |<body>                          <button>                      |
|                |<caption>                       <center>                      |
|                |<cite>                          <code>                        |
|                |<col>                           <colgroup>                    |
|                |currentStyle                    <custom>                      |
|                |<dd>                            defaults                      |
|                |<dfn>                           <dir>                         |
|                |<div>                           <dl>                          |
|                |<dt>                            <em>                          |
|                |<fieldset>                      <form>                        |
|                |<hn>                            <html>                        |
|                |<i>                             <img>                         |
|                |<input type="button">           <input type="checkbox">       |
|                |<input type="file">             <input type="image">          |
|                |<input type="password">         <input type="radio">          |
|                |<inputtype="reset">             <input type="submit">         |
|                |<input type="text">             <isindex>                     |
|                |<kbd>                           <label>                       |
|                |<legend>                        <li>                          |
|                |<listing>                       <marquee>                     |
|                |<menu>                          <ol>                          |
|                |<p>                             <pre>                         |
|                |runtimeStyle                    <s>                           |
|                |<samp>                          <select>                      |
|                |<small>                         <span>                        |
|                |<strike>                        <strong>                      |
|                |style                           <sub>                         |
|                |<sup>                           <table>                       |
|                |<tbody>                         <td>                          |
|                |<textarea>                      <tfoot>                       |
|                |<th>                            <thead>                       |
|                |<tr>                            <tt>                          |
|                |<u>                             <ul>                          |
|                |<var>                           <xmp>                         |
+----------------+--------------------------------------------------------------+



"font-family" Possible Values

Possible Values
Available font families supported by the browser"s operating system.
For example,
Times,
Helvetica,
Zapf-Chancery,
Western,
Courier,
serif,
sans-serif,
cursive,
fantasy, 
ormonospace.



"font-family" Syntax and Note

Note:
Set font family.
Syntax:
 
element { font-family: value }
elementID.style.fontFamily = "value"
document.all.elementID.style.fontFamily = "value" // IE only



"font" is applied to

+----------------+--------------------------------------------------------------+
| Applied_To     |<a>                             <address>                     |
|                |<b>                             <big>                         |
|                |<blockquote>                    <body>                        |
|                |<button>                        <caption>                     |
|                |<center>                        <cite>                        |
|                |<code>                          <col>                         |
|                |<colgroup>                      <custom>                      |
|                |<dd>                            defaults                      |
|                |<dfn>                           <dir>                         |
|                |<div>                           <dl>                          |
|                |<dt>                            <em>                          |
|                |<fieldset>                      <form>                        |
|                |<hn>                            <html>                        |
|                |<i>                             <img>                         |
|                |<inputtype="button">            <input type="checkbox">       |
|                |<input type="file">             <input type="image">          |
|                |<input type="password">         <input type="radio">          |
|                |<input type="reset">            <inputtype="submit">          |
|                |<input type="text">             <isindex>                     |
|                |<kbd>                           <label>                       |
|                |<legend>                        <li>                          |
|                |<listing>                       <marquee>                     |
|                |<menu>                          <nobr>                        |
|                |<ol>                            <p>                           |
|                |<pre>                           runtimeStyle                  |
|                |<s>                             <samp>                        |
|                |<select>                        <small>                       |
|                |<span>                          <strike>                      |
|                |<strong>                        style                         |
|                |<sub>                           <sup>                         |
|                |<table>                         <tbody>                       |
|                |<td>                            <textarea>                    |
|                |<tfoot>                         <th>                          |
|                |<thead>                         <tr>                          |
|                |<tt>                            <u>                           |
|                |<ul>                            <var>                         |
|                |<xmp>                                                         |
+----------------+--------------------------------------------------------------+



"font" Possible Values

Possible Values
CSS font constants:
caption                font used for captioned controls (buttons, drop-downs, and so on)
icon                   font used to label icons
menu                   font for menus and drop-down lists
message-box            font for dialog boxes
small-caption          font for labeling small controls
status-bar             font in the window status bars



"font-size" Example

 
<html>
<body>
<p style="font-size:14pt">text.</p>
<hr>
<div style="padding:10px;"
     onmouseover="this.style.fontSize="16pt""
     onmouseout="this.style.fontSize="12pt"">
     Move the mouse pointer to change the font-size value.</div>
</body>
</html>



"font-size" is applied to

+----------------+--------------------------------------------------------------+
| Applied_To     |<a>                             <address>                     |
|                |<b>                             <basefont>                    |
|                |<big>                           <blockquote>                  |
|                |<body>                          <button>                      |
|                |<caption>                       <center>                      |
|                |<cite>                          <code>                        |
|                |<col>                           <colgroup>                    |
|                |currentStyle                    <custom>                      |
|                |<dd>                            defaults                      |
|                |<dfn>                           <dir>                         |
|                |<div>                           <dl>                          |
|                |<dt>                            <em>                          |
|                |<fieldset>                      <form>                        |
|                |<hn>                            <html>                        |
|                |<i>                             <img>                         |
|                |<input type="button">           <input type="checkbox">       |
|                |<input type="file">             <input type="image">          |
|                |<input type="password">         <input type="radio">          |
|                |<inputtype="reset">             <input type="submit">         |
|                |<input type="text">             <isindex>                     |
|                |<kbd>                           <label>                       |
|                |<legend>                        <li>                          |
|                |<listing>                       <marquee>                     |
|                |<menu>                          <ol>                          |
|                |<p>                             <pre>                         |
|                |runtimeStyle                    <s>                           |
|                |<samp>                          <select>                      |
|                |<small>                         <span>                        |
|                |<strike>                        <strong>                      |
|                |style                           <sub>                         |
|                |<sup>                           <table>                       |
|                |<tbody>                         <td>                          |
|                |<textarea>                      <tfoot>                       |
|                |<th>                            <thead>                       |
|                |<tr>                            <tt>                          |
|                |<u>                             <ul>                          |
|                |<var>                           <xmp>                         |
+----------------+--------------------------------------------------------------+



"font-size" Possible Values

Possible Values
absolute        Any of the following values:
                   xx-small,
                   x-small,
                   small,
                   medium,
                   large,
                   x-large, 
                   xx-large
 
 
relative        The font size is relative to the parent element"s font size,values 
                are either larger or smaller
length          A floating point number followed by a unit designator
percentage      specifies the size relativeto the parent element"s font size



"font-size" Syntax and Note

Note:
Set the font size.
Syntax:
 
element { font-size: value }
elementID.style.fontSize = "value"
document.all.elementID.style.fontSize = "value" // IE only



"font-style" Example

 
<html>
<body>
<div onmouseover="this.style.fontStyle="italic"" 
     onmouseout="this.style.fontStyle="normal"">
     Move the mouse pointer to change the font style value.
</div>
</body>
</html>



"font-style" is applied to

+----------------+--------------------------------------------------------------+
| Applied_To     |<a>                             <address>                     |
|                |<b>                             <basefont>                    |
|                |<big>                           <blockquote>                  |
|                |<body>                          <button>                      |
|                |<caption>                       <center>                      |
|                |<cite>                          <code>                        |
|                |<col>                           <colgroup>                    |
|                |currentStyle                    <custom>                      |
|                |<dd>                            defaults                      |
|                |<dfn>                           <dir>                         |
|                |<div>                           <dl>                          |
|                |<dt>                            <em>                          |
|                |<fieldset>                      <form>                        |
|                |<hn>                            <html>                        |
|                |<i>                             <img>                         |
|                |<input type="button">           <input type="checkbox">       |
|                |<input type="file">             <input type="image">          |
|                |<input type="password">         <input type="radio">          |
|                |<inputtype="reset">             <input type="submit">         |
|                |<input type="text">             <isindex>                     |
|                |<kbd>                           <label>                       |
|                |<legend>                        <li>                          |
|                |<listing>                       <marquee>                     |
|                |<menu>                          <ol>                          |
|                |<p>                             <pre>                         |
|                |runtimeStyle                    <s>                           |
|                |<samp>                          <select>                      |
|                |<small>                         <span>                        |
|                |<strike>                        <strong>                      |
|                |style                           <sub>                         |
|                |<sup>                           <table>                       |
|                |<tbody>                         <td>                          |
|                |<textarea>                      <tfoot>                       |
|                |<th>                            <thead>                       |
|                |<tr>                            <tt>                          |
|                |<u>                             <ul>                          |
|                |<var>                           <xmp>                         |
+----------------+--------------------------------------------------------------+



"font-style" Possible Values

Possible Values
normal         the default
italic,        IE only
oblique        IE only



"font-style" Syntax and Note

Note:
the font style.
 
Syntax:
 
element { font-style: value }
elementID.style.fontStyle = "value"
document.all.elementID.style.fontStyle = "value" // IE only



"font" Syntax and Note

Note:
Set the font style properties: font-family, 
                               font-style, 
                               font-size, 
                               font-variant, 
                               font-weight, 
                               line-height.
Syntax:
 
element { font: values }
elementID.style.font = "value"
document.all.elementID.style.font = "values" // IE only



"font-variant" Example

 
<html>
<body>
<div font-size:16pt"
    onmouseover="this.style.fontVariant="small-caps""
    onmouseout="this.style.fontVariant="normal"">
    Move the mouse to change the font-variant value.
</div>
</body>
<html>



"font-variant" is applied to

+----------------+--------------------------------------------------------------+
| Applied_To     |<a>                             <address>                     |
|                |<b>                             <big>                         |
|                |<blockquote>                    <body>                        |
|                |<button>                        <caption>                     |
|                |<center>                        <cite>                        |
|                |<code>                          <col>                         |
|                |<colgroup>                      currentStyle                  |
|                |<custom>                        <dd>                          |
|                |defaults                        <dfn>                         |
|                |<dir>                           <div>                         |
|                |<dl>                            <dt>                          |
|                |<em>                            <fieldset>                    |
|                |<form>                          <hn>                          |
|                |<html>                          <i>                           |
|                |<img>                           <input type="button">         |
|                |<input type="checkbox">         <input type="file">           |
|                |<inputtype="image">             <input type="password">       |
|                |<input type="radio">            <input type="reset">          |
|                |<input type="submit">           <input type="text">           |
|                |<isindex>                       <kbd>                         |
|                |<label>                         <legend>                      |
|                |<li>                            <listing>                     |
|                |<marquee>                       <menu>                        |
|                |<ol>                            <p>                           |
|                |<pre>                           runtimeStyle                  |
|                |<s>                             <samp>                        |
|                |<small>                         <span>                        |
|                |<strike>                        <strong>                      |
|                |style                           <sub>                         |
|                |<sup>                           <table>                       |
|                |<tbody>                         <td>                          |
|                |<textarea>                      <tfoot>                       |
|                |<th>                            <thead>                       |
|                |<tr>                            <tt>                          |
|                |<u>                             <ul>                          |
|                |<var>                           <xmp>                         |
+----------------+--------------------------------------------------------------+



"font-variant" Possible Values

Possible Values
normal         
small-caps.



"font-variant" Syntax and Note

Note:
Whether to render in small capital letters for lowercase characters.
Syntax:
 
element { font-variant: value }
elementID.style.fontVariant = "value"
document.all.elementID.style.fontVariant = "value" // IE only



"font-weight" Example

 
<html>
<body>
<div style="font-size:16pt "
     onmouseover="this.style.fontWeight="bold"" 
     onmouseout="this.style.fontWeight="normal"">
     Move the mouse to change the font-weight value.</div>
</body>
</html>



"font-weight" is applied to

+----------------+--------------------------------------------------------------+
| Applied_To     |<a>                             <address>                     |
|                |<b>                             <big>                         |
|                |<blockquote>                    <body>                        |
|                |<button>                        <caption>                     |
|                |<center>                        <cite>                        |
|                |<code>                          <col>                         |
|                |<colgroup>                      currentStyle                  |
|                |<custom>                        <dd>                          |
|                |defaults                        <dfn>                         |
|                |<dir>                           <div>                         |
|                |<dl>                            <dt>                          |
|                |<em>                            <fieldset>                    |
|                |<form>                          <hn>                          |
|                |<html>                          <i>                           |
|                |<img>                           <input type="button">         |
|                |<input type="checkbox">         <input type="file">           |
|                |<inputtype="image">             <input type="password">       |
|                |<input type="radio">            <input type="reset">          |
|                |<input type="submit">           <input type="text">           |
|                |<isindex>                       <kbd>                         |
|                |<label>                         <legend>                      |
|                |<li>                            <listing>                     |
|                |<marquee>                       <menu>                        |
|                |<ol>                            <p>                           |
|                |<pre>                           runtimeStyle                  |
|                |<s>                             <samp>                        |
|                |<small>                         <span>                        |
|                |<strike>                        <strong>                      |
|                |style                           <sub>                         |
|                |<sup>                           <table>                       |
|                |<tbody>                         <td>                          |
|                |<textarea>                      <tfoot>                       |
|                |<th>                            <thead>                       |
|                |<tr>                            <tt>                          |
|                |<u>                             <ul>                          |
|                |<var>                           <xmp>                         |
+----------------+--------------------------------------------------------------+



"font-weight" Syntax and Note

Note:
boldness or lightness of the font.
Syntax:
 
element { font-weight: value }
elementID.style.fontWeight = "value"
document.all.elementID.style.fontWeight = "value" // IE onlyRelative values:normal      (the default)bold,bolderlighter.Constant values:100,200,300         (lighter than normal),400         (normal),500,600         (bolder than normal),700         (bold),800,900         (even bolder).