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

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

 

       

5 


5.1 для подстановки

CSS , . (), , . , .

. , HTML , XML - .

CSS2:

* .
E E (.. E).
E F F, E.-
E > F F, E.
E:first-child E, E . :first-child
E:link
E:visited 		E, E (:link) (:visited).
E:active
E:hover
E:focus 		E .
E:lang(c) E, () ( , ).   :lang()
E + F F, E.
E[foo] E "foo" ( - ).
E[foo="warning"] E, "foo" "warning".
E[foo~="warning"] E, "foo" , "warning".
E[lang|="en"] E, "lang" , () "en".
DIV.warning HTML. , DIV[class~="warning"].
E#myid ID E, "myid". ID


5.2 

- , , ID . , .

, . : , ">" "+". .

, , . , , , . , , .

, .


5.2.1 

, .

():

. , 

H1 { font-family: sans-serif }
H2 { font-family: sans-serif }
H3 { font-family: sans-serif }

:

H1, H2, H3 { font-family: sans-serif }

CSS "", .


5.3      

, "*", . .

, "*" . :


5.4 

. .

():

H1 :

H1 { font-family: sans-serif }

5.5 

, , , (, " EM, H1"). . 2- , .   "A B" ,   B  -  A.

():

:

H1 { color: red }
EM { color: red }

, , :

<H1>This headline is <EM>very</EM> important</H1>

, , EM - H1:

H1 { color: red }
EM { color: red }
H1 EM { color: blue }

EM :

<H1>This <SPAN class="myclass">headline 
is <EM>very</EM> important</SPAN></H1>

():

:

DIV * P

P, , , , DIV. "*".

():

, , , (1) "href" (2) P, , DIV:

DIV P *[href]

5.6

, . 2- , ">".

():

P, BODY:

BODY > P { line-height: 1.3 }

():

:

DIV OL>LI P

P, LI; LI OL; OL DIV.
, ">" .

. :first-child.


5.7 Смежные селекторы-родственники

- : E1 + E2, E2 . , E1 E2 E1 E2.

, (, ). "+" .

():

, , P MATH, :

MATH + P { text-indent: 0 }

, H1 H2:

H1 + H2 { margin-top: -5mm }

():

, , . , , H1 class="opener":

H1.opener + H2 { margin-top: -5mm }

5.8

CSS2 , , -.


5.8.1

:

[att]
"att" - .
[att=val]
"att" - "val".
[att~=val]
"att" - "", - "val". , ( ).
[att|=val]
"att" - "", "val". . , (, "lang" HTML), RFC 1766 ([RFC1766]).

. .

():

H1, "title" :

H1[title] { color: blue; }

():

SPAN, "class" "example":

SPAN[class=example] { color: blue; }

, .

():

SPAN, "hello" "Cleveland" "goodbye" "Columbus":

SPAN[hello="Cleveland"][goodbye="Columbus"] { color: blue; }

():

"=" "~=". 1- , , "copyright copyleft copyeditor" "rel". 2- , "href" "http://www.w3.org/". 

A[rel~="copyright"]
A[href="http://www.w3.org/"]

():

, "lang" "fr" (.. - ). 

*[LANG=fr] { display : none }

():

"lang", "en", "en", "en-US" "en-cockney":

*[LANG|="en"] { color : red }

():

, :

DIALOGUE[character=romeo] 
     { voice-family: "Lawrence Olivier", charles, male }
      
DIALOGUE[character=juliet]  
     { voice-family: "Vivien Leigh", victoria, female }

5.8.2 

. , HTML, - .   , , .

():

EXAMPLE "notation", "decimal".
: 

<!ATTLIST EXAMPLE notation (decimal,octal) "decimal">

EXAMPLE[notation=decimal] { /*...      ...*/ }
EXAMPLE[notation=octal] { /*...   ...*/ }

, , , , : 

EXAMPLE { /*...       ...*/ }

, , . , , , , .


5.8.3

, HTML, (.) "~=" "class". , HTML "DIV.value" "DIV[class~=value]" . ".".

():

class~="pastoral"  :

*.pastoral { color: green }  /*    class~=pastoral */
.pastoral { color: green }  /*    class~=pastoral */

- H1 class~="pastoral":

H1.pastoral { color: green }  /*  H1  class~=pastoral */

H1 , - :

<H1>Not green</H1>
<H1 class="pastoral">Very green</H1>

"class", ".".

():

P, "class" "pastoral" "marine":

 P.pastoral.marine { color: green }

,   class="pastoral blue aqua marine",   class="pastoral blue".

. CSS "class", " " ( DIV SPAN HTML) "class". , , , - .


5.9 ID

, ID. ID , ; , ID . HTML ID "id"; XML ID -, .

ID . CSS ID- . ID- CSS "#" ID.

():

ID- H1, ID "chapter1":

H1#chapter1 { text-align: center }

  , ID - "z98y". , , P:

<HEAD>
  <TITLE>Match P</TITLE>
  <STYLE type="text/css">
    *#z98y { letter-spacing: 0.3em }
  </STYLE>
</HEAD>
<BODY>
   <P id=z98y>Wide text</P>
</BODY>

, , H1, , ID - "z98y". P:

<HEAD>
  <TITLE>Match H1 only</TITLE>
  <STYLE type="text/css">
    H1#z98y { letter-spacing: 0.5em }
  </STYLE>
</HEAD>
<BODY>
   <P id=z98y>Wide text</P>
</BODY>

ID- , . , HTML   #p123  ,   [ID=p123], .

. XML 1.0 [XML10] , ID- , . XML, , ID . , , : [name=p371]    #p371. ID-. "!important" : [name=p371] {color: red ! important}. , XML 1. ID- .


5.10

CSS2 . , - . , HTML 4.0 (. [HTML40]) , , , , CSS .

CSS , , .

, - .

, .

.

, . , .

, HTML :first-line :first-letter , , .


5.11

5.11.1 :first-child  

:first-child , - .

():

P, DIV. DIV:

DIV > P:first-child { text-indent: 0 }
P DIV : 
<P>  P  note.
<DIV class="note">
   <P> 1- P  note.
</DIV>
P :
<P>  P  note.
<DIV class="note">
   <H2>Note</H2>
   <P> 1- P  note.
</DIV>

():

'bold' EM, - P, , , , :

P:first-child EM { font-weight : bold }

, , .

, EM :

<P>abc <EM>default</EM>
P.

:

* > A:first-child   /* 1-     */
A:first-child       /*    */

5.11.2 : :link :visited

, . CSS ':link' ':visited' :

. () ':link'.

.

, . , HTML 4.0 A "href". , CSS2 :

A:link { color: red }
:link  { color: red }

():

:

<A class="external" href="http://out.side/">external link</A>
, : 
A.external:visited { color: blue }
.


5.11.3 : :hover, :active :focus

. CSS :

. .

CSS , . , , ( ).

- . , , 'font-size'   :active , , , .

():

A:link    { color: red }    /*   */
A:visited { color: blue }   /*     */
A:hover   { color: yellow } /*    */
A:active  { color: lime }   /*      */

, A:hover A:link A:visited, 'color' A:hover. , A:active A:hover, (lime) , A.

():

: 

A:focus { background: yellow }
A:focus:hover { background: white }

A, :focus :hover.

. .

. CSS1 ':active' ':link' ':visited'. .   ':visited', ':active' ( ':link' ':active'), .


5.11.4   :lang

, , CSS, , . , HTML [HTML40] "lang", META , , ( "" HTTP). XML , XML:LANG, , .

':lang(C)' , C. C - , HTML 4.0 [HTML40] RFC 1766 [RFC1766]. , '|='.

():

HTML :

HTML:lang(fr) { quotes: ' ' ' ' }
HTML:lang(de) { quotes: '' '' '\2039' '\203A' }
:lang(fr) > Q { quotes: ' ' ' ' }
:lang(de) > Q { quotes: '' '' '\2039' '\203A' }

'quotes' Q . , , , , “à l'improviste” .


5.12

5.12.1 :first-line

:first-line . :

P:first-line { text-transform: uppercase }

: " ". "P:first-line" HTML. , , .

, , , .. , HTML:

<P>This is a somewhat long HTML 
paragraph that will be broken into several 
lines. The first line will be identified
by a fictional tag sequence. The other lines 
will be treated as ordinary lines in the 
paragraph.</P>
: 
THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT
will be broken into several lines. The first
line will be identified by a fictional tag 
sequence. The other lines will be treated as 
ordinary lines in the paragraph.
"" :first-line. , : 
<P><P:first-line> This is a somewhat long HTML 
paragraph that will </P:first-line> be broken into several
lines. The first line will be identified 
by a fictional tag sequence. The other lines 
will be treated as ordinary lines in the 
paragraph.</P>

, , . , SPAN:

<P><SPAN class="test"> This is a somewhat long HTML
paragraph that will be broken into several
lines.</SPAN> The first line will be identified
by a fictional tag sequence. The other lines 
will be treated as ordinary lines in the 
paragraph.</P>
SPAN :first-line. 
<P><P:first-line><SPAN class="test"> This is a
somewhat long HTML
paragraph that will </SPAN></P:first-line><SPAN class="test"> be
broken into several
lines.</SPAN> The first line will be identified
by a fictional tag sequence. The other lines
will be treated as ordinary lines in the 
paragraph.</P>

:first-line .

:first-line -, . :first-line : , , , 'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align', 'text-transform', 'line-height', 'text-shadow' 'clear'.


5.12.2 :first-letter

:first-letter " " " ", . -, 'float' - 'none', .

, :first-letter: , , , 'text-decoration', 'vertical-align' ( 'float'   'none'), 'text-transform', 'line-height', , , , 'float', 'text-shadow' 'clear'.

CSS2 , :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
 <HEAD>
  <TITLE>Drop cap initial letter</TITLE>
  <STYLE type="text/css">
   P              { font-size: 12pt; line-height: 12pt }
   P:first-letter { font-size: 200%; font-style: italic;
                    font-weight: bold; float: left }
   SPAN           { text-transform: uppercase }
  </STYLE>
 </HEAD>
 <BODY>
  <P><SPAN>The first</SPAN> few words of an article
    in The Economist.</P>
 </BODY>
</HTML>

:

Image illustrating the combined effect of the :first-letter and :first-line pseudo-elements   [D]

:

<P>
<SPAN>
<P:first-letter>
T
</P:first-letter>he first
</SPAN> 
few words of an article in the Economist.
</P>

, :first-letter (.. ), :first-line , .

, , , . .

(.. , Unicode [UNICODE] "open" (Ps), "close" (Pe) "other" (Po)), , , :

Quotes that precede the first letter should be included.   [D]

:first-letter .

. , , "ij" , :first-letter.

():

,  . P '24pt'. 'blue', - 'red'.

P { color: red; font-size: 12pt }
P:first-letter { color: green; font-size: 200% }
P:first-line { color: blue }

<P>-    2- .</P>

, "", :

<P>
<P:first-line>
<P:first-letter> 

</P:first-letter>-  
</P:first-line> 
  2- .
</P>

, :first-letter :first-line. , :first-line, :first-letter, , :first-letter.


5.12.3 :before :after

':before' ':after' . .

():

H1:before {content: counter(chapno, upper-roman) ". "}

:first-letter :first-line   :before :after, , .

():

P.special:before {content: "Special! "}
P.special:first-letter {color: #ffd800}

"S" "Special!" .