- , CSS , . ', CSS HTML , , . , , .
:
, , html () . CSS 8 , CSS 쳺 .
, , , ' .
. ϳ . . (. ) .
, 14 .
̳ HTML CSS , ' CSS .
CSS HTML ?
, css , , .
html, . -:
. Css.
style.css html, . , ( <head> </ head >) :
<link rel="stylesheet" type="text/css" href="style.css">
, HTML - CSS- .
:
³ ( ) : CSS - style.css HTML - index.htm. , : , " " " " ' style.css. index.htm.
:
index.htm
<! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 Transitional / / EN"
" http://www.w3.org/TR/html4/loose.dtd ">
<html>
<head>
<title> </ title >
<link rel="stylesheet" type="text/css" href="style.css" >
</ head >
<body>
<h1> , , , , 14 </ h1 >
|
|
|
</ body >
</ html >
style.css
h1 { color: blue; font - size: 14px }
, . , , .
:
<! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 Transitional / / EN"
" http://www.w3.org/TR/html4/loose.dtd ">
<html>
<head>
<title> </ title >
<style type="text/css">
h1 { color: blue; font - size: 14px }
</ style >
</ head >
<body><h1> , , , , 14 </ h1 >
</ body >
</ html >
, style. :
<! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 Transitional / / EN"
" http://www.w3.org/TR/html4/loose.dtd ">
<html>
<head>
<title> </ title >
</ head >
<body>
<h1 style="color:blue;font-size:14px"> , , , , 14 < / h1 >
</ body >
</ html >
, html. , , , ...
. , CSS.
2: .
CSS. , , html, !
': CSS , html. , # ff3355, (red, green, blue )
CSS :
color
background - color
background - image
background - repeat
background - attachment
background - position
background
, -:
COLOR
( ) . , , , :
H1 {
color: red;
}
P {
color: green;
BACKGROUND -COLOR
. html, ( bgcolor) CSS, : , , , . , , BODY - , .
|
|
|
BODY {
background - color: # FFEE8C;
}
H1 {
color: red;
background - color: blue;
}
P {
color: green;
}
BACKGROUND - IMAGE
. , , BODY.
BODY {
background - color: # FFEE8C;
background - image: url (smile.png);
}
H1 {
color: red;
background - color: blue;
}
P {
color: green;
}
, , , html. URL , ! . , . img, url (img / smile.png).
3: .
CSS, : , , , , , .
CSS :
font - family
font - style
font - variant
font - weight
font - size
font
FONT - FAMILY
. FONT - FAMILY . . , , ' . :
Serif - " ", - "Times New Roman ";
Sans - serif - , , Arial Verdana;
Monospace - ( , ), " Courier New ";
, , , . , , " Times New Roman" "Times New Roman ".
FONT - STYLE
. :
normal - ;
italic - ;
oblique - ;
: " ? ", - , italic . , .
oblique - , .
h1 {
font - family: verdana, arial, sans - serif;
font - style: normal;
}
h2 {
font - family: verdana, arial, sans - serif;
font - style: italic;
}
h3 {
font - family: verdana, arial, sans - serif;
font - style: oblique;
}
FONT - VARIANT
. :
normal - , .
small - caps - .
( ) , - , .
( ) .
:
h1 {
font - family: verdana, arial, sans - serif;
font - variant: small - caps;
}
h2 { font - family: verdana, arial, sans - serif;}
FONT - WEIGHT
, . : normal - bold - . : 100, 200,300,400,500,600,700,800,900. : 400 normal, 700 - bold. !
|
|
|
P { font - family: arial, verdana, sans - serif;}
DIV {
font - family: arial, verdana, sans - serif;
font - weight: bold;
}
4: .
CSS .
text - align
text - decoration
text - indent
text - transform
letter - spacing
word - spacing
TEXT - ALIGN
, ALIGN html. :
left - ( );
right - ;
center - ;
justify - ( ).
, :
h1 { text - align: center;}
h2 { text - align: left;}
h3 { text - align: right;}
p { text - align: justify;}
TEXT - DECORATION
. :
none - . ;
underline - ;
overline - ;
line - through - ;
h1 {
text - align: center;
text - decoration: underline;
}
h2 {
text - align: center;
text - decoration: overline;
}
h3 {
text - align: center;
text - decoration: line - through;
}
TEXT - INDENT
, . , .
h1 { text - align: center;}
p {
text - indent: 40px;
}
TEXT - TRANSFORM
C , , . :
capitalize - , . : " " " ".
, !
uppercase - . : " css " " CSS "
lowercase - . : " TRANSFORM " c " transform ".
none - ; .
WORD - SPACING
. .
h1 { word - spacing: 20px;}
p { word - spacing: 10px;}
6: .
CSS, . , , !
list - style - type
list - style - position
list - style - image
list - style
': , , . CSS, , :)
LIST - STYLE- TYPE
. , , , :
disk - ;
circle - ;
square - ;
decimal - , 1,2,3,4,5 . .;upper - roman - , I, II, III, IV, V ..;
|
|
|
lower - roman - i, ii, iii, iv, v ..
upper - alpha - A, B, C, D, E ;
lower - alpha - a, b, c, d, e ..;
none - ;
, , , OL ( ) square, UL () upper - roman;
ol { list - style - type: square;}
ul { list - style - type: upper - roman;}
LIST - STYLE- IMAGE
. - . url . , .
ul { list - style - image: url (galka.gif);}
LIST - STYLE- IMAGE
. - . url . , .
ul { list - style - image: url (galka.gif);}
, url (galka.gif) galka.gif , css -. , !
LIST - STYLE
. list - style;
:
ul {
list - style - type: square;
list - style - position: inside;
list - style - image: url (galka.gif);
}
:
ul { list - style: square inside url (galka.gif) }
.
6: .
. CSS :
border-width
border-color
border-style
- border
BORDER-WIDTH
. , thin (2px), medium (4px) thick (6px). , , :
- border
, border. , , . :
h1 {
border: 30px outset red;
}
h2 {
border: 20px dashed gold;
}
h3 {
border: 16px double green;
}
P {
border: 1px dotted blue
}
:
, border (top, right, bottom, left) (, , , ). :
h1 {
border - top - width: 30px;
border - top - style: solid;
border - top - color: red;
border - right - width: 20px;
border - right - style: dashed;
border - right - color: gold;
border - bottom - width: 10px;
border - bottom - style: dashed;
border - bottom - color: green;
border - left - width: 40px;
border - left - style: solid;
border - left - color: blue;
}
:
h1 {
border - top: 30px solid red;
border - right: 20px dashed gold;
border - bottom: 10px dashed green;
