youinf.ru - мобильная соц-энциклопедия
Web  Энциклопедия

youinf.ru
Страница, которую вы ищете не найдена. Попытайтесь найти инфу в других постах журнала.

 

       

12  ,

, () . - : , , , . , "Figure" "Chapter 7" 7 . -, .

CSS2 :

, 'content'.


12.1 :before :after

  :before    :after. , :before :after . 'content' , .

():

"Note: " P, "class" "note":

P.note:before { content: "Note: " }

(., ), , . , , :

P.note:before { content: "Note: " }
P.note        { border: solid green }

, .

:before :after , .

():

Q. - , , Q:

Q:before {
  content: open-quote;
  color: red
}

:before :after .

():

, , 'display' - 'inline', - (.. , ). 'display' 'block', :

BODY:after {
    content: "The End";
    display: block;
    margin-top: 2em;
    text-align: center;
}

, - "The End" BODY.

:before :after:
'position', 'float', .

:before :after 'display':

. CSS.


12.2  'content'

'content'
:[ <string> | <uri> | <counter> | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit
:
:   :before :after
:
:N/A
:

:before :after .
:

<string>
(. ).
<uri>
URI, . ( ), .
.CSS2 , "alt" "longdesc" HTML. CSS.
<counter>
/Counters : 'counter()' 'counters()'. : 'counter(name)' 'counter(name, style)'. ; ( - 'decimal'). : 'counters(name, string)' 'counters(name, string, style)'. , . ( - 'decimal'). . .
open-quote close-quote
'quotes'.
no-open-quote no-close-quote
( ), () .
attr(X)
X . CSS. X, . .
. CSS2 .

'display' , , , - .

'content' @media, -. , , - visual + bitmap, -.

():

(. " "):

@media aural {
   BLOCKQUOTE:after { content: url("beautiful-music.wav") }
   }

():

"alt" HTML . , "alt". 

IMG:before { content: attr(alt)}

escape- "\A" 'content'. , BR HTML. . escape- "\A" "" " ".

():

H1:before {
    display: block;
    text-align: center;
    content: "chapter\A hoofdstuk\A chapitre"
}

. (, ).

.   CSS 'content' , , CSS2 :before :after .


12.3 :before :after 'compact' 'run-in'

:

  1. 'run-in' 'compact' :before 'inline': , ( 'compact') , .
  2. 'run-in' 'compact' :after 'inline':
     .
  3. 'run-in' 'compact' :before 'block': ( 'compact').
  4. 'run-in' 'compact' :after 'block':
     , :after . - :after.
  5. , 'run-in' 'compact', :before 'block': , 'run-in'/'compact', :before.
  6. , 'run-in' 'compact', :before 'inline': , 'run-in'/'compact', 'display' , :before.

():

'run-in' :after, :before. ( ). :

H3 { display: run-in }
H3:after { content: ": " }
P:before { content: "... " }

-:

<H3>Centaurs</H3>
<P>have hoofs
<P>have a tail

:

Centaurs: ... have hoofs
... have a tail

12.4 

CSS2 , - , . 'quotes' . 'content' .

12.4.1 'quotes'

'quotes'
:[<string> <string>]+ | none | inherit
:
:  
:
:N/A
:

. :

none
'open-quote' 'close-quote' 'content' .
[<string>  <string>]+
'open-quote' 'close-quote' 'content' ( ). ( ) , - 1- ..
.

():

:

/*    2-   2-  */
Q:lang(en) { quotes: '"' '"' "'" "'" }
Q:lang(no) { quotes: "" "" "<" ">" }

/*        Q */
Q:before { content: open-quote }
Q:after  { content: close-quote }

HTML:

<HTML lang="en">
  <HEAD>
  <TITLE>Quotes</TITLE>
  </HEAD>
  <BODY>
    <P><Q>Quote me!</Q>
  </BODY>
</HTML>

:

"Quote me!"

HTML:

<HTML lang="no">
  <HEAD>
  <TITLE>Quotes</TITLE>
  </HEAD>
  <BODY>
    <P><Q>Trøndere gråter når <Q>Vinsjan på kaia</Q> blir deklamert.</Q>
  </BODY>
</HTML>

:

Trøndere gråter når <Vinsjan på kaia> blir deklamert.

. , 'quotes' , , ISO 10646.
ISO 10646:

ISO 10646 (hex)

"0022 [ ASCII]
'0027 [ ASCII]
<2039
>203A
00AB
00BB
`2018 [single high-6]
'2019 [single high-9]
``201C [double high-6]
''201D [double high-9]
,,201E LOW-9 [double low-9]


12.4.2 'content'

'open-quote' 'close-quote' 'content'. 'open-quote' 'close-quote' 'quotes', .

'Open-quote' , 'close-quote' 2-. , , : 'open-quote' 'close-quote'. - 0, , - 1, .. , , .

, - .

, , , . CSS "" . 'no-close-quote' , .

():

BLOCKQUOTE : 

BLOCKQUOTE P:before     { content: open-quote }
BLOCKQUOTE P:after      { content: no-close-quote }
BLOCKQUOTE P.last:after { content: close-quote }

, "last", , .

'no-open-quote', , .

. , , .

():

:

The device of the order of the garter is “Honi soit qui mal y pense.”
:
Il disait:  Il faut mettre l'action en ‹ fast forward ›.

'quotes' , 'open-quote' 'close-quote' . , , . . - (">") :

[LANG|=fr] > *  { quotes: "" "" "\2039" "\203A" }
[LANG|=en] > *  { quotes: "\201C" "\201D" "\2018" "\2019" }

, . , : 

[LANG|=fr] > * { quotes: "" "" "" "" }
[LANG|=en] > * { quotes: "" "" "" "" }


12.5 

CSS2 , 'counter-increment' 'counter-reset'. , , counter() counters() 'content'.

'counter-reset'
:[ <identifier> <integer>? ]+ | none | inherit
:none
:  
:
:N/A
:
'counter-increment'
:[ <identifier> <integer>? ]+ | none | inherit
:none
:  
:
:N/A
:

'counter-increment' (), . , . - 1. 0 .

'counter-reset' , . , . - 0.

'counter-increment' , , (. ) - 'counter-reset', , 0 .

():

: "Chapter 1", "1.1", "1.2" ..: 

H1:before {
    content: "Chapter " counter(chapter) ". ";
    counter-increment: chapter;  /*  1   */
    counter-reset: section;      /*    0 */
}
H2:before {
    content: counter(chapter) "." counter(section) " ";
    counter-increment: section;
}

/ ( 'content' :before :after), , /.

, , , .

'counter-reset' . , , :

H1 { counter-reset: section -1 }
H1 { counter-reset: imagenum 99 }

'imagenum'. , :

H1 { counter-reset: section -1 imagenum 99 }

12.5.1

"", .. - . , , , HTML, , .

():

, . 'display:list-item' 'list-style: inside' LI: 

OL { counter-reset: item }
LI { display: block }
LI:before { content: counter(item) ". "; counter-increment: item }

, , 'counter-reset' X, X, - , .

OL , OL .

item[n]  n "item"    "(" and ")"  -  , HTML . ( , ). 

<OL>               <!-- (set item[0] to 0          -->
  <LI>item         <!--  increment item[0] (= 1)   -->
  <LI>item         <!--  increment item[0] (= 2)   -->
    <OL>           <!--  (set item[1] to 0         -->
      <LI>item     <!--   increment item[1] (= 1)  -->
      <LI>item     <!--   increment item[1] (= 2)  -->
      <LI>item     <!--   increment item[1] (= 3)  -->
        <OL>       <!--   (set item[2] to 0        -->
          <LI>item <!--    increment item[2] (= 1) -->
        </OL>      <!--   )                        -->
        <OL>       <!--   (set item[3] to 0        -->
          <LI>     <!--    increment item[3] (= 1) -->
        </OL>      <!--   )                        -->
      <LI>item     <!--   increment item[1] (= 4)  -->
    </OL>          <!--  )                         -->
  <LI>item         <!--  increment item[0] (= 3)   -->
  <LI>item         <!--  increment item[0] (= 4)   -->
</OL>              <!-- )                          -->
<OL>               <!-- (reset item[4] to 0        -->
  <LI>item         <!--  increment item[4] (= 1)   -->
  <LI>item         <!--  increment item[4] (= 2)   -->
</OL>              <!-- )                          -->

'counters()' , , .

():

"1", "1.1", "1.1.1" .. 

OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, "."); counter-increment: item }

12.5.2

, , 'list-style-type', .
:

counter(name)

, :

counter(name, 'list-style-type')

, 'disc', 'circle', 'square' 'none'.

():

H1:before        { content: counter(chno, upper-latin) ". " }
H2:before        { content: counter(section, upper-roman) " - " }
BLOCKQUOTE:after { content: " [" counter(bq, hebrew) "]" }
DIV.note:before  { content: counter(notecntr, disc) " " }
P:before         { content: counter(p, none) }

12.5.3   'display: none'

, , ('display' 'none'), .

():

H2 "secret" 'count2'. 

H2.secret {counter-increment: count2; display: none}

, 'visibility', 'hidden', .


12.6

CSS .
CSS, : ( ) ( , , ). . :before :after, , .

2- CSS2 , . CSS1. . . , .

, , , .
HTML :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
   <HEAD>
     <TITLE>   </TITLE>
     <STYLE type="text/css">
	  LI:before { 
	      display: marker;
	      content: counter(mycounter, lower-roman) ".";
	      counter-increment: mycounter;
	  }   
     </STYLE>
  </HEAD>
  <BODY>
    <OL>
      <LI>  1-  .
      <LI>  2-  .
      <LI>  3-  .
    </OL>
  </BODY>
</HTML>

: 

   i.  1-  .
  ii.  2-  .
 iii.  3-  .

.


12.6.1 : 'marker-offset'

'display' 'marker' :before :after. 'block' 'inline' :before :after , , 'marker' . (.. ( )), , . , 'content' .

, .

:before . , . :after . , .

'line-height'. :before (:after) () . , , . 1- , 1- .

'vertical-align'.

'width' - 'auto', , - 'width'. 'width' , , 'overflow' . . 'width' ,  , 'text-align' .

'marker-offset' . .

. , , , . (. ), , . , .

  'display' 'marker' , 'display: list-item', , ':before', .

.
:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
 <HTML>
    <HEAD>
      <TITLE>    </TITLE>
      <STYLE type="text/css">
           LI:before { 
               display: marker;
               content: "(" counter(counter) ")";
               counter-increment: counter;
               width: 6em;
               text-align: center;
           }
      </STYLE>
   </HEAD>
   <BODY>
     <OL>
       <LI>  1-  .
       <LI>  2-  .
       <LI>  3-  .
     </OL>
   </BODY>
 </HTML>

: 

  (1)    1-
         .
  (2)    2- 
         .
  (3)    3- 
         .

.

:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>     </TITLE>
    <STYLE type="text/css">
      @media screen, print {
         LI:before { 
   	      display: marker;
	      content: url("smiley.gif");
         LI:after {
	      display: marker;
   	      content: url("sad.gif");
         }
      }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI>1-    
      <LI>2-    
    </UL>
  </BODY>
</HTML>

( ascii gif ):

  :-) 1-   
             :-(
  :-) 2-  
             :-(

().

:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>     4</TITLE>
    <STYLE type="text/css">
      P { margin-left: 12 em; }
      @media screen, print {
         P.Note:before         { 
  	      display: marker;
	      content: url("note.gif") 
                       " " counter(note-counter) ":";
              counter-increment: note-counter;
              text-align: left;
              width: 10em;
         }
     }
    </STYLE>
  </HEAD>
  <BODY>
    <P> 1-   .</P>
    <P CLASS="Note">   .</P>
    <P> .</P>
  </BODY>
</HTML>

:

                   1-  
                   .

   1:     
                  .
           
                   .
'marker-offset'
:<length> | auto | inherit
:auto
:   'display: marker'
:
:N/A
:

. (<length>), ('auto'). , , .

, .
HTML :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 <HTML>
    <HEAD>
      <TITLE>  5</TITLE>
      <STYLE type="text/css">
           P { margin-left: 8em } /*     */
           LI:before { 
               display: marker;
               marker-offset: 3em;
               content: counter(mycounter, lower-roman) ".";
               counter-increment: mycounter;
           }   
      </STYLE>
   </HEAD>
   <BODY>
     <P>     ...
     <OL>
       <LI>  1-  .
       <LI>  2-  .
       <LI>  3-  .
     </OL>
     <P>     ...
   </BODY>
 </HTML>

: 

          
         ...
      
   i.    1-  .
  ii.    2-  .
 iii.    3-  .

          
         ...

12.6.2  : 'list-style-type', 'list-style-image', 'list-style-position' 'list-style'

. , 'display: list-item' . (, ) ( ). (, , ..) .

, M ( 'display: marker') , , M .

; 'outside' . .

 

'list-style-type'
:disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | none | inherit
:disc
:   'display: list-item'
:
:N/A
:

, 'list-style-image' 'none' , URI, . 'none' , : , .

. , .. .

disc, circle square. .

:

decimal
, 1.
decimal-leading-zero
, (, 01, 02, 03, ..., 98, 99).
lower-roman
(i, ii, iii, iv, v  ..).
upper-roman
(I, II, III, IV, V  ..).
hebrew
.
georgian
(an, ban, gan, ..., he, tan, in, in-an, ...).
armenian
.
cjk-ideographic
.
hiragana
a, i, u, e, o, ka, ki, ...
katakana
A, I, U, E, O, KA, KI, ...
hiragana-iroha
i, ro, ha, ni, ho, he, to, ...
katakana-iroha
I, RO, HA, NI, HO, HE, TO, ...

, , 'decimal'.

. (, ). W3C .

:

lower-latin lower-alpha
ascii (a, b, c, ... z).
upper-latin upper-alpha
ascii (A, B, C, ... Z).
lower-greek
, , , ... (α, β, γ, ...)

, . , 26 'lower-latin' . , .

, HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
   <HEAD>
     <TITLE>    </TITLE>
     <STYLE type="text/css">
          OL { list-style-type: lower-roman }   
     </STYLE>
  </HEAD>
  <BODY>
    <OL>
      <LI>  1-  .
      <LI>  2-  .
      <LI>  3-  .
    </OL>
  </BODY>
</HTML>

: 

  i  1-  .
 ii  2-  .
iii  3-  .

, ( - ) .

. CSS .

'list-style-image'
:<uri> | none | inherit
:none
:   'display: list-item'
:
:N/A
:

, . , ,   'list-style-type'.

():

- "ellipse.png" - . 

UL { list-style-image: url("http://png.com/ellipse.png") }
'list-style-position'
:inside | outside | inherit
:outside
:   'display: list-item'
:
:N/A
:

.
:

outside
.
. CSS1 , CSS2 . .
inside
1- - , .

: 

<HTML>
  <HEAD>
    <TITLE>  inside/outside</TITLE>
    <STYLE type="text/css">
      UL         { list-style: outside }
      UL.compact { list-style: inside }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI>first list item comes first
      <LI>second list item comes second
    </UL>

    <UL class="compact">
      <LI>first list item comes first
      <LI>second list item comes second
    </UL>
  </BODY>
</HTML>

:

Difference between inside and outside list style position   [D]

- .

 

'list-style'
:[ <'list-style-type'> || <'list-style-position'> || <'list-style-image'> ] | inherit
:
:   'display: list-item'
:
:N/A
:

'list-style' - : 'list-style-type', 'list-style-image' 'list-style-position' .

():

UL { list-style: upper-roman inside }  /* - UL */
UL > UL { list-style: circle outside } /* UL -  UL */

'list-style' (., LI HTML), . , -, ( ) .

OL.alpha LI   { list-style: lower-alpha } /* LI -  OL */
OL.alpha > LI { list-style: lower-alpha } /* LI- OL */

, -, , , . : 

<HTML>
  <HEAD>
    <TITLE>:   - </TITLE>
    <STYLE type="text/css">
      OL.alpha LI  { list-style: lower-alpha }
      UL LI        { list-style: disc }
    </STYLE>
  </HEAD>
  <BODY>
    <OL class="alpha">
      <LI>level 1
      <UL>
         <LI>level 2
      </UL>
    </OL>
  </BODY>
</HTML>

, 1 'lower-alpha', 2 - 'disc'. ( ). : 

OL.alpha > LI  { list-style: lower-alpha }
UL LI   { list-style: disc }

'list-style' : 

OL.alpha  { list-style: lower-alpha }
UL        { list-style: disc }

'list-style' OL UL LI. .

():

URI , : 

UL { list-style: url("http://png.com/ellipse.png") disc }

'disc' , .

'none' 'list-style' 'list-style-type' 'list-style-image' 'none': 

UL { list-style: none }

- .