Информационный Дизайн_2-10 / Практика #07 [DW_CSS] / Практика №7 v1
.pdf" "
10 «Macromedia DreamWeaver MX».
, ,HTML- .
:
( )
! ( )
" # !, ,.
$ % :
1.(External Style Sheet) – % & .css, % . $ # ! <link rel> % ## .
2.(Embedded Style Sheet) – ! ! HTML-. ' ! <style> </style>. *# ! ! . "# , ! ! % ! . ' CSS Styles # ! <style>
.
3.(Inline Style) – HTML-( , ! ) # style.
<p style=”text-indent: 10 pt”> 10 </p>
1
1. .
Type.
+ ! Type ( ) .
1.Font ( ) – & % ! ( # ). Edit Font List – & % , ! .
2.Size ( ) – . 4 # ,.
3.Style ( ) – # & % :
normal ( );
italic ( );
oblique ( ).
4.Line height ( ) – :
normal ( );
value ( )
5.Weight ( ) – # & % , 100 900 :
normal ( );
bold ( );
bolder ( );
lighter ( )
6.Variant ( ) – :
normal ( );
small-caps ( )
7.Decoration ( ) – # :
underline ( );
overline ( );
line-through ( );
blink ( )
none ( )
8.Case ( ) – ! ( #Dreamweaver).
9.Color ( ) – .
2
Background.
1.Background Color ( % ) - Color, # .
2.Background Image (% ) – % ! ;
3.Repeat ( ) – # - % ! :
no - repeat – ;
repeat – - ;
repeat- – ;
repeat-y - .
4.Attachment ( ) – , ! <body> HTML- , . .;
scroll – ;;
fixed – ( IE 4.0 );
5.Horizontal Position ( ! ) – % !
! # , #;
6. |
Vertical Position ( ) – % ! |
|
# , #; |
! # . ? ! Background # Netscape 6 Internet Explorer 6. ? Dreamweaver % ! # # % GIF, JPEG PNG.
3
Block.
+ Block ! .
1. Word spacing ( ). @ # ! # #Dreamweaver. A , % Netscape 6.
2. Letter spacing ( . @ # ! ## Dreamweaver, 6.
3.Vertical alignment ( ) –# ! .
4.Text Align ( ) – , !( , , , )
5.Text indent ( ) – #! .
6.Whitespace ( ) – :
normal ( )– & ;
pre ( )– ;
nowrap ( )– # # ! <br>.
7.Display ( ) – .
4
Box.
+ Box # .
1.Width ( )- & ! :
Auto - &
Value – # &
$ , & ! & Width & ,
.
2.Height ( ) – ! :Auto -
Value – #
3.Float ( ) – . 4 #
. #
! .
4.Clear ( ) – ! O ,#:
Left – O |
# ! ; |
Right – |
! ! ; |
Both – # ! ; |
None - # ! 5. Padding ( ) – ! !
# ! :
top ( )– ! ;
right ( ) – ! ;bottom ( ) – ! ;left ( ) – ! ;
same for all ( ) – ;
6.Margin ( ) – & ! ! :
top ( )– ! ;
right ( ) – ! ;
bottom ( ) – ! ;
left ( ) – ! ;
same for all ( ) – ;
5
Border.
+ ! # ! .
1.Width ( )- :
1.thin ( )
2.medium ( )
3.thick ( )
4.same for all ( )
2.Color ( )- # .
3.Style ( ) – :
5.none ( ) – ;
6.dotted ( ) – ;
7.dashed ( ) – ;
8.solid ( ) – & ;
9.double ( ) – ;
10.groove ( ) – ;
11.ridge ( ) – ;
12.inset ( ) – O # ! # ;
13.outset ( ) – O # ! # ;
14.same for all ( ) – # .
6
List.
+ ! List # #.
1.Type ( ) – ! % , #! Dreamweaver;
2.Bullet image ( ) – % ,# # . A ! % ,
Type # ! ; " Dreamweaver
3. Position ( ) – # #
! :
Inside ( ) – ! ;Outside ( ) – !
" Dreamweaver
;
7
Positioning.
? # # . *# :
1.# ! Positioning ! CSS Style definition for… ( …)
2.# .
8
Extensions.
! .
Page Break ( ) – .
.
Cursor ( ) - - # & !
O . Internet Explorer 4 & , Netscape 6 & .
Filter ( ) – %% , #. # Internet Explorer 4 & .
9
2. .
$% .
– # , #! . :
1. |
Q , # . |
2. |
4 Window CSS Styles New CSS Styles ! New CSS |
3. Selector Type ( ) Class (can applay to any tag) #
! ;
4.Name ( # );
5.# Define in ( ) This document only ( );
6.Ok ! CSS Style definition for… .
HTML-.
1. Q , # ! # CSS Styles;
2.New CSS Styles ! New CSS;
3.Selector Type ( ) Tag (redefines the look of a specific tag) #
! ! ;
4. Tag !, #;
5.# Define in ( ) This document only ( );
6.Ok ! CSS Style definition for… .
! ? #, ! ,.
.
? # , |
|
! ! . ? # ! <a> |
Selector Type |
( ) ! CSS Style #
& . # , , |
# |
, ! |
|
. ? #: |
|
1.Q , # , # CSS Styles;
2.New CSS Styles ! New CSS;
10