CSS
- SS? Cascading Style Sheets ( ) - , HTML . , HTML . : .
HTML:
<font color="red"><strong><u> - </u></strong></font>
? 5, 10-20? SS. : , . (Inline Style Sheets) HTML . (Global Style Sheets) . (Linked Style Sheets) . .
(Selectors):
:
{}
HTML - CSS . , .
:
H1 {color:red; size:20pt;}
H1 , 20 (pt, point).
(Class Selectors):
:
. {c}
CLASS - HTML, . CSS .
:
H1.blue {color:blue; size:20pt;}
H1 CLASS="blue" .
.
:
. {}
:
.green {color:green;}
CLASS="green" .
ID (ID Selectors):
C:
#id {}
ID - . C c .
. , blue - . . , , ? ID. "boldunderline". blue ID "boldunderline" . blue boldunderline.
:
<html>
<head>
<title> CSS </title>
</head>
<style>
.blue {color:blue; font-style:italic}
#boldunderline {text-decoration:underline; font-weight:bold}
</style>
<body>
|
|
|
<p class="blue"> , . </p>
<p class="blue" id="boldunderline"> ... </p>
<p id="boldunderline">... </p>
</body>
</html>
, ID ( . ID "boldunderline" ( - , ).
(Contextual Selectors):
- . .
:
P EM {color:silver;}
EM P .
:
. .
:
h1,h2,h3,p,strong {color:green; font-style:italic;}
h1, h2, h3, p strong .
:
:
: { }
.: { }
: { }
.: { }
- , CSS CSS . , . , .
:
Anchor Pseudo Classes - <a href=" ">, . : (), active ( ), visited ( URL), hover (, , ).
First Line Pseudo-element - first-line. block-level (p, h1 ..). .
First Letter Pseudo-element - first-letter. first-line, , .
:
a:link,a:visited {color:blue}
a:active {color:red}
a:hover {text-decoration:none}
Anchor () . ( ) . .
: , , , ";".
, HTML . STYLE HTML .
HTML:
<font color="blue" size="3" face="Arial"> </font>
INLINE STYLE SHEET:
<font style="color:blue; font-size:12pt; font-family:Arial"> </font>
|
|
|
, Inline Style Sheet HTML. ISS , CSS HTML. .
. <STYLE type="text/css">. .
:
<html>
<head> <title> </title>
</head>
<STYLE type="text/css">
h1{color:red; font-style:italic; font-size:32px}
.blue{color:blue}
#bold{font-weight:bold}
</STYLE>
<body>
<h1> </h1>
<font class="blue"> </font> - , a <font id="bold"> </font> - .
</body>
</html>
H1 , BLUE , ID="Bold" . <STYLE type="text/css"> <STYLE>, .
x . , , .
:
styles.css
<STYLE type="text/css">
body {background:black; font-size:9pt; color:red; font-family:Arial Black}
.base{color:blue; font-style:italic}
h1 {color:white}
#bold {font-weight:bold}
</STYLE>
HTML <LINK>. : <LINK rel="STYLESHEET" TYPE="text/css" HREF=" ">
:
Index.html
<html>
<head>
<title> </title>
</head>
<LINK rel="stylesheet" type="text/css" href="styles.css">
<body>
</body>
</html>
.
Il. C CSS
Font
font-family
:
[1]
* :
: . URL,
:
font-family:Arial Black URL('arialblack.ttf')
font-style
:
[1] normal -
[2] italic -
* :
: .
:
font-style:italic
font-variant
:
[1] normal -
[2] small-caps -
* :
: .
:
font-variant:small-caps
font-weight
:
[1] normal -
[2] bold -
[3] bolder - ( MSIE bold, )
[4] lighter - ( normal)
[5] 100 900
* :
: ()
:
font-weight:bold
font-size
:
[1] (+)
[2] xx-small, x-small, small, medium, large, x-large, xx-large -
[3] smaller, larger -
* :
:
:
font-size:30pt
font
:
[1] font-family
[2] font-style
[3] font-variant
[4] font-weight
[5] font-size
|
|
|
* :
:
:
font: italic bolder Arial 12pt
Text
word-spacing
:
[1] (+)
[2] normal -
* :
: c. , MSIE
:
word-spacing:0.4em
<UL text-decoration
:
[1] none -
[2] underline -
[3] overline - ( )
[4] line-through -
[5] blink - ( IE)
* :
: ""
:
text-decoration:line-through
letter-spacing
:
[1] (+)
[2] normal -
* :
: .
:
letter-spacing:100
vertical-align
:
[1] baseline
[2] sub
[3] super
[4] top-text
[5] top
[6] middle
[7] bottom
[8] bottom-text
[9]
* : inline
: .
:
vertical-align:top-text
text-transform
:
[1] none -
[2] Capitalize -
[3] UPPERCASE -
[4] lowercase -
* : inline
: .
:
text-transform:Capitalize
text-align
:
[1] left -
[2] right -
[3] center -
[3] justify - ""
* : block-level
:
:
text-align:right
text-indent
:
[1] (+)
[2] (+)
* : block-level
:
:
text-indent:30 em
line-height
:
[1] normal -
[2] (+)
[3]
* :
:
:
line-height:100%
Color Background
color
:
[1] (+)
* :
:
:
color:#f00000
backgroung-color
:
[1] (+)
* :
:
:
background-color:#f00000
background-image
:
[1] none -
[2] URL (+)
* :
:
:
background-image:URL(cool.gif)
background-repeat
:
[1] repeat -
[2] repeat-x -
[3] repeat-y -
[4] no-repeat -
* :
:
:
background-repeat:no-repeat
background-attachment
:
[1] scroll -
[2] fixed - . .
* :
:
:
background-attachment:fixed
background-position
:
[1] + (+)
[2] top, middle, bottom -
[3] left, center, right -
[4] +
|
|
|
* : block-level replaced
: ( background-repeat repeat-x, repeat-y no-repeat)
:
background-position:50%0%
background
:
[1] background-color
[2] background-image
[3] backgroun-position
[4] background-attachment
[5] background-repeat
* :
:
:
background:no-repeat black fixed 50%0%
Box
margin-top
:
[1] (+)
[2] (+)
[3] auto -
* :
:
:
margin-top:100
margin-right
:
[1] (+)
[2] (+)
[3] auto -
* :
:
:
margin-right:100%
margin-bottom
:
[1] (+)
[2] (+)
[3] auto -
* :
:
:
margin-bottom:100em
margin-left
:
[1] (+)
[2] (+)
[3] auto -
* :
:
:
margin-left:100pt
margin
:
[1] margin-top
[2] margin-right
[3] margin-left
[4] margin-bottom
* :
:
:
background:100pt
padding-top
:
[1] (+)
[2] (+)
* :
: border'
:
padding-top:100pt
padding-right
:
[1] (+)
[2] (+)
* :
: border'
:
padding-right:100%
padding-bottom
:
[1] (+)
[2] (+)
* :
: border'
:
padding-bottom:100em
padding-left
:
[1] (+)
[2] (+)
* :
: border'
:
padding-top:100
padding
:
[1] padding-top
[2] padding-right
[3] padding-left
[4] padding-bottom
* :
: . ( ) . - , - , - .
:
padding:100px
border-top-width
:
[1] (+)
[2] thin, medium thick
* :
: border'
:
border-top-width:100pt
border-right-width
:
[1] (+)
[2] thin, medium thick
* :
: border'
:
border-right-width:thick
border-bottom-width
:
[1] (+)
[2] thin, medium thick
* :
: border'
:
border-bottom-width:100em
border-left-width
:
[1] (+)
[2] thin, medium thick
* :
: border'
:
border-left-width:medium
border-width
:
[1] border-top-width
[2] border-right-width
[3] border-left-width
[4] border-bottom-width
* :
: border'. ( ) border'. - , - , -
:
border-width: 15pt
border-color
:
[1] (+)
* :
: border'.
:
border-color:green
border-style
:
[1] none
[2] dotted, dashed, solid, double, groove, ridge, inset, outset
* :
: border'. ( ) border'. - , - , -
:
border-style: dotted groove
|
|
|
<UL border-top
:
[1] border-top-width
[2] border-style
[3] border-color
* :
: border'
:
border-top: 100em red groove
border-right
:
[1] border-right-width
[2] border-style
[3] border-color
* :
: border'
:
border-right: 5pt magenta solid
border-left
:
[1] border-left-width
[2] border-style
[3] border-color
* :
: border'
:
border-left: 15pc coral inset
border-bottom
:
[1] border-bottom-width
[2] border-style
[3] border-color
* :
: border'
:
border-bottom: 30 orange outset
border
:
[1] border-width
[2] border-style
[3] border-color
* :
:
:
border: thik black double
width
:
[1] (+)
[2] (+)
* : block-level replaced
:
:
width:10%
height
:
[1] (+)
[2] (+)
* : block-level replaced
:
:
height:100pt
float
:
[1] left -
[2] right -
[3] none -
* :
:
:
float:right
clear
:
[1] left -
[2] right -
[3] both - c
[4] none -
* :
:
:
clear:both
display
:
[1] none -
[2] block - (.. )
[3] inline -
[4] list-item - + list-item
* :
: ,
:
display:none
white-space
:
[1] normal - ""
[2] pre -
[3] nowrap - <BR>
* : block-level
: ,
:
white-space:nowrap
list-style-type
:
[1] disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha upper-alpha
[2] none -
* : display list-item
: list-item . list-style-image none
:
list-style-type:lower-alpha
list-style-image
:
[1] none -
[2] URL (+)
* : display list-item
: list-item
:
list-style-image:URL(cool.gif)
list-style-position
:
[1] inside -
[2] outside -
* : display list-item
: list item
:
list-style-position:inside
list-style
:
[1] list-style-type
[2] list-style-position
[3] list-style-image
* : display list-item
:
:
list-style:inside
III.
: "+" ( ) "-" [] [ ] ( )
:
-566pt
: ex - x-height, "x"
px - pixels,
in - inches,
cm - centimeters,
mm - millimeters,
pt - points, (1pt = 1/72in)
pc - picas (1pc = 12pt)
: "+" "-" [] "%" ( )
:
-566%
: [color]
:
magenta
(red, lightgreen, coral ..) RGB
RGB (red green blue):
#rrggbb (, #00cc00)
rgb(x,x,x) -- "" 0 255 (, rgb(0,204,0))
#rgb (, #0c0)
rgb (x%,x%,x%) -- "%" 0.0 100.0 (, 0%,80%,0%)
: "URL", . , , ( )
:
URL('cool.gif')
.
: . . - , . .
MSIE Microsoft Internet Explorer 4.0+ Netscape Navigator 4.0+ .
