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

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

 

           

4  CSS2


4.1

( - ), CSS ( CSS2). CSS , .

. D.


4.1.1

CSS - 1, 2 - . () ( ) , CSS, . , , CSS.

CSS ( ). CSS2 . Lex. ISO 10646 ([ISO10646]). Lex, , .

 

IDENT {ident}
ATKEYWORD @{ident}
STRING {string}
HASH #{name}
NUMBER {num}
PERCENTAGE {num}%
DIMENSION {num}{ident}
URI url\({w}{string}{w}\)
|url\({w}([!#$%&*-~]|{nonascii}|{escape})*{w}\)
UNICODE-RANGE U\+[0-9A-F?]{1,6}(-[0-9A-F]{1,6})?
CDO <!--
CDC -->
; ;
{ \{
} \}
( \(
) \)
[ \[
] \]
S [ \t\r\n\f]+
COMMENT \/\*[^*]*\*+([^/][^*]*\*+)*\/
FUNCTION {ident}\(
INCLUDES ~=
DASHMATCH |=
DELIM ,

 

({}) :

 
ident {nmstart}{nmchar}*
name {nmchar}+
nmstart [a-zA-Z]|{nonascii}|{escape}
nonascii[^\0-\177]
unicode \\[0-9a-f]{1,6}[ \n\r\t\f]?
escape {unicode}|\\[ -~\200-\4177777]
nmchar [a-z0-9-]|{nonascii}|{escape}
num [0-9]+|[0-9]*\.[0-9]+
string {string1}|{string2}
string1 \"([\t !#$%&(-~]|\\{nl}|\'|{nonascii}|{escape})*\"
string2 \'([\t !#$%&(-~]|\\{nl}|\"|{nonascii}|{escape})*\'
nl \n|\r\n|\r|\f
w [ \t\r\n\f]*

 

CSS. , . D 2 CSS. 

stylesheet  : [ CDO | CDC | S | statement ]*;
statement   : ruleset | at-rule;
at-rule     : ATKEYWORD S* any* [ block | ';' S* ];
block       : '{' S* [ any | block | ATKEYWORD S* | ';' ]* '}' S*;
ruleset     : selector? '{' S* declaration? [ ';' S* declaration? ]* '}' S*;
selector    : any+;
declaration : property ':' S* value;
property    : IDENT S*;
value       : [ any | block | ATKEYWORD S* ]+;
any         : [ IDENT | NUMBER | PERCENTAGE | DIMENSION | STRING
              | DELIM | URI | HASH | UNICODE-RANGE | INCLUDES
              | FUNCTION | DASHMATCH | '(' any* ')' | '[' any* ']' ] S*;

( ), - .

S . "space" (Unicode code 32), "tab" (9), "line feed" (10), "carriage return" (13) "form feed" (12) . "" , "em-space" (8195) "ideographic space" (12288), .


4.1.2

. ("..." '...'). , 

red

,   

"red"
- ( ). :

:

width: "auto";
border: "none";
font-family: "serif";
background: "red";

4.1.3

:


4.1.4

CSS (. ). : at- . .

" " " " .


4.1.5 at- (at-rules)

At- at- , '@', (, '@import', '@page').

At- (;) , , . CSS, at-, .

CSS2 '@import',   .

:

, , CSS2 : 

@import "subs.css";
H1 { color: blue }
@import "list.css";

'@import', CSS2, . CSS2 at-, : 

@import "subs.css";
H1 { color: blue }

:

'@import' - , '@media'. 

@import "subs.css";
@media print {
  @import "print-main.css";
  BODY { font-size: 10pt }
}
H1 {color: blue }

4.1.6

({) (}). , (( )), ([ ]) ({ }), . (') (") , \string. . .

:

. , , - escape-, : 

{ causta: "}" + ({7} * '\'') }

, CSS2, , , , .


4.1.7 ,

( "") .

( {}-) ({) (}). 0 (;) .

(. ) -, ( ) ({). {}-. (.. CSS2), {}-.

CSS2 (,) . , , CSS, , - , CSS2.

:

, "&" CSS2, CSS2 H3: 

H1, H2 {color: green }
H3, H4 & H5 {color: red }
H6 {color: black }

():

. . - CSS2. 

P[example="public class foo\
{\
    private int x;\
\
    foo(int x) {\
        this.x = x;\
    }\
\
}"] { color: red }

4.1.8

(:) . .

, (;), .

():

, :

H1 { font-weight: bold }
H1 { font-size: 12pt }
H1 { line-height: 14pt }
H1 { font-family: Helvetica }
H1 { font-variant: normal }
H1 { font-style: normal }

:

H1 {
  font-weight: bold;
  font-size: 12pt;
  line-height: 14pt;
  font-family: Helvetica;
  font-variant: normal;
  font-style: normal
}

. , (( )), ([ ]) ({ }), , escape-. , . .

, , , , , , , , URI, , , .

. CSS2 .

:

, CSS2 : 

H1 { color: red; font-style: 12pt }  /*  : 12pt */
P { color: blue;  font-vendor: any;  /*  : font-vendor */
    font-variant: small-caps }
EM EM { font-style: normal }

'12pt'. 2- 'font-vendor'. CSS2 , : 

H1 { color: red; }
P { color: blue;  font-variant: small-caps }
EM EM { font-style: normal }

4.1.9

"/*" "*/". , . .

CSS SGML- ("<!--" "-->") , CSS. - HTML ( STYLE), -HTML 3.2 . . HTML 4.0 ([HTML40]).


4.2

. , ( ), , .

, , :

4.3

4.3.1

( <integer>) ( <number>). . <integer> "0" "9". <number> <integer> (.), . , "-" "+" .

, , , , .


4.3.2

.

( <length>) - ('+' '-', '+' ), <number> ( ), (, px, deg ..). '0' .

, , . , .

: . - . , , (, ).

:

():

H1 { margin: 0.5em }      /* em */
H1 { margin: 1ex }        /* ex */
P  { font-size: 12px }    /* px */

'em' 'font-size' , . , 'em' 'font-size', . . ( quad-width/- .)

'ex' 'x-height' . x-height , "x" . 'ex' , "x".

():

: 

H1 { line-height: 1.2em }

, H1 20% , H1. : 

H1 { font-size: 1.2em }

, H1 20% , , H1.

(, "HTML" HTML), 'em' 'ex' .

  , .. - . , . , 90dpi . 28 0.0227 .

1px 0.28  (1/90 ). , , , (55 , 21 ), 1px 0.21 . 300 (dpi) 3 (0.25 ); 600 dpi 5 .

. 71  (28 )   0.28 , 3.5  (12 ) 1.4 .

Showing that pixels must become larger if the viewing distance increases   [D]

1px 1px ( ), 16- ( 400 dpi).

Showing that more device pixels (dots) are needed to cover a 1px by 1px area on a high-resolution device than on a low-res one   [D]

, ; () .

():

'text-indent' H1 36pt, 45pt, H1 BODY:

BODY {
  font-size: 12pt;
  text-indent: 3em;  /* .. 36pt */
}
H1 { font-size: 15pt }

, .
:

():

H1 { margin: 0.5in }      /*   */
H2 { line-height: 3cm }   /*  */
H3 { word-spacing: 4mm }  /*  */
H4 { font-size: 12pt }    /*  */
H4 { font-size: 1pc }     /*  */

, , , .


4.3.3 Процентные значения

( <percentage>) - ('+' '-', '+' ), <number>, '%'.

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

():

() , P 12pt 'line-height', (120%): 

P { font-size: 10pt }
P { line-height: 120% }  /* 120%  'font-size' */

4.3.4 URL + URN = URI

URL (Uniform Resource Locator, . [RFC1738] [RFC1808]), Web. , URN (Uniform Resource Name). URI (Uniform Resource Identifiers, . [URI]). URI.

URI <uri>. URI - "url()", :

():

BODY { background: url("http://www.bg.com/pinkish.gif") }

URI : 'url(' , (') ("), URI, (') ("), ')'. ( ).

():

: 

LI { list-style: url(http://www.redballs.com/redball.png) disc }

, , , (') (") URI escape- : '\(', '\)', '\,'.

URI, URI-escape- ( "(" = %28, ")" = %29 ..), [URI].

, , , URI. URI ( [RFC1808]) URI URI. RFC 1808, 3 . CSS URI URI , -.

():

, :

BODY { background: url("yellow") }

URI:

http://www.myorg.org/style/basic.css

BODY - - , URI: 

http://www.myorg.org/style/yellow

- URI,


4.3.5 

(. 'counter-increment' 'counter-reset'). , 'counter(<identifier>)' 'counter(<identifier>, <list-style-type>)'. - 'decimal'.

, : 'counters(<identifier>, <string>)' 'counters(<identifier>, <string>, <list-style-type>)'. . " " .

CSS2 'content'. , 'none', <list-style-type>: 'counter(x, none)' .

():

, (P) (H1). : 

P {counter-increment: par-num}
H1 {counter-reset: par-num}
P:before {content: counter(par-num, upper-roman) ". "}

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


4.3.6 

<color> , RGB.

: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white yellow. 16 HTML 4.0 ([HTML40]). , , . . .

():

BODY {color: black; background: white }
H1 { color: maroon }
H2 { color: olive }

RGB . :

():

EM { color: #f00 }              /* #rgb */
EM { color: #ff0000 }           /* #rrggbb */
EM { color: rgb(255,0,0) }      /*    0 - 255 */
EM { color: rgb(100%, 0%, 0%) } /*      0.0% - 100.0% */

RGB 16- -  '#' 16- . RGB (#rgb) (#rrggbb) , . , #fb0 #ffbb00. , (#ffffff) (#fff) .

RGB - 'rgb(' ( , ) ')'. 255 100% F FF 16- : rgb(255,255,255) = rgb(100%,100%,100%) = #FFF. .

RGB sRGB (. [SRGB]). , , sRGB , , (. [COLORIMETRY]).

. sRGB 2.2 . , CSS, '' 2.2. . . , , CSS; , .

: red, green blue , , . CRT-, - , sRGB, :

():

EM { color: rgb(255,0,0) }       /*   0 - 255 */
EM { color: rgb(300,0,0) }       /*   rgb(255,0,0) */
EM { color: rgb(255,-10,0) }     /*   rgb(255,0,0) */
EM { color: rgb(110%, 0%, 0%) }  /*   rgb(100%,0%,0%) */

, , , sRGB; 0..255 sRGB ( ), 0..255 sRGB , , .

. , , , . , , , .


4.3.7

(   <angle>) .

-  ('+' '-', '+' ), <number>, .

:

. 0-360deg. , -10deg 350deg .

, - '90deg' '100grad', '1.570796326794897rad'.


4.3.8 

( <time>) .

: <number>, .

:

.


4.3.9 

( <frequency>) .

: <number>, .

:

.

, 200Hz ( 200hz) - , 6kHz ( 6khz) - .


4.3.10 

. , escape- ( '\"' '\22'). ("\'" "\27").

():

"this is a 'string'"
"this is a \"string\""
'this is a "string"'
'this is a \'string\''

. , escape- "\A" (16- A - Unicode,   CSS " "). ., , 'content'.

, , escape' (\). , :

():

A[TITLE="a not s\
o very long title"] {/*...*/}
A[TITLE="a not so very long title"] {/*...*/}

4.4  CSS

CSS Universal Character Set/ (. [ISO10646]). , , US-ASCII (, ISO 8859-x, SHIFT JIS ..). , . HTML 4.0 ([HTML40], 5). . XML 1.0 ([XML10], 2.2 4.3.3, F.

, , STYLE "style" HTML, .

, ( ):

  1. HTTP "charset" "Content-Type".
  2. At- @charset.
  3. (, HTML "charset" LINK).

@charset - - , . "@charset" . , IANA (. [IANA]. . [CHARSETS] ). :

():

@charset "ISO-8859-1";

, .

, @charset , a priori , . , , Internet ASCII, UTF-16, UCS-4, () EBCDIC. , , , @charset, , , .


4.4.1 ,

, . escape' ISO 10646. , HTML XML (. [HTML40], 5 25).

Escape- , . , (, , "ISO-8859-7" "UTF-8").

-, , escape- . - , , escape-, ASCII.

Unicode , ( , ).

, , ISO-8859-1 (Latin-1), : "κουρος" (-: "kouros"), "\3BA\3BF\3C5\3C1\3BF\3C2".

. HTML 4.0 "style", STYLE. - , escape- CSS "style", STYLE. , :

<SPAN style="voice-family: D\FC rst">...</SPAN>

:

<SPAN style="voice-family: D&#252;rst">...</SPAN>