5.1 рдЯреЕрдЧрдЪреА рд╢реИрд▓реА рд╡рд┐рд╢реЗрд╖рддрд╛
рдЖрдгрд┐ HTML рдмрджреНрджрд▓ рдЖрдгрдЦреА рдХрд╛рд╣реА рдЙрдкрдпреБрдХреНрдд рдЧреЛрд╖реНрдЯреА. рд╡реЗрдмрд▓рд╛ рдЬрд╕рдЬрд╢реА рд▓реЛрдХрдкреНрд░рд┐рдпрддрд╛ рдорд┐рд│реВ рд▓рд╛рдЧрд▓реА, рддрд╕рддрд╢реА рд╡реЗрдмрдкреЗрдЬреЗрд╕ рд╕реБрдВрджрд░ рдХрд┐рдВрд╡рд╛ рдЕрддрд┐рд╢рдп рд╕реБрдВрджрд░ рдбрд┐рдЭрд╛рдЗрди рдХрд░рдгреНрдпрд╛рдЪреА рдорд╛рдЧрдгреА рд╡рд╛рдврдд рдЧреЗрд▓реА. рд╡рд╛рдкрд░реВрди рд╣реА рд╕рдорд╕реНрдпрд╛ рд╕реЛрдбрд╡рд▓реА рдЧреЗрд▓реА style
.
рдпрд╛ рдЧреБрдгрдзрд░реНрдорд╛рдЪреНрдпрд╛ рд╕рд╛рдорд╛рдиреНрдп рд╕реНрд╡рд░реВрдкрд╛рдЪреЗ рдЦрд╛рд▓реАрд▓ рд╕реНрд╡рд░реВрдк рдЖрд╣реЗ:
<tag style="name=value;name2=value2;nameN=valueN">
рд╡рд┐рд╢реЗрд╖рддрд╛ рдореВрд▓реНрдп, style
рдЕрд░реНрдзрд╡рд┐рд░рд╛рдорд╛рдиреЗ рд╡рд┐рднрдХреНрдд рдХреЗрд▓реЗрд▓реЗ, рдЯреЕрдЧрд╡рд░ рд▓рд╛рдЧреВ рдХрд░рдгреЗ рдЖрд╡рд╢реНрдпрдХ рдЕрд╕рд▓реЗрд▓реНрдпрд╛ рд╕рд░реНрд╡ "рд╢реИрд▓реА" рд╕реВрдЪреАрдмрджреНрдз рдХрд░рддреЗ.
рд╕рдордЬрд╛ рддреБрдореНрд╣рд╛рд▓рд╛ рдкреНрд░рддрд┐рдорд╛ рдЪреМрд░рд╕ рдореНрд╣рдгреВрди рджрд╛рдЦрд╡рд╛рдпрдЪреА рдЖрд╣реЗ 100*100
рдЖрдгрд┐ рддреА рдЕрд░реНрдзреА рдкрд╛рд░рджрд░реНрд╢рдХ рдмрдирд╡рд╛рдпрдЪреА рдЖрд╣реЗ. рд╣реЗ рдХрд░рдгреНрдпрд╛рд╕рд╛рдареА, рдЖрдкрд▓реНрдпрд╛рд▓рд╛ рддреНрдпрд╛рдд рд╡рд┐рд╢реЗрд╖ рд╢реИрд▓реА рдЬреЛрдбрдгреНрдпрд╛рдЪреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рдЖрд╣реЗ:
- рд░реБрдВрджреА=100px;
- рдЙрдВрдЪреА = 100px;
- рдЕрдкрд╛рд░рджрд░реНрд╢рдХрддрд╛ = реж.рел;
рдирдВрддрд░ рдпрд╛ рдкреНрд░рддрд┐рдореЗрд╕рд╣ HTML рдХреЛрдб рдЕрд╕реЗ рджрд┐рд╕реЗрд▓:
<img src="logo.png" style="width=100px;height=100px;opacity=0.5">
рд╣рдЬрд╛рд░реЛ рдирд╛рд╣реА рддрд░ рд╢реЗрдХрдбреЛ рд╢реИрд▓реА рдЖрд╣реЗрдд. рдЖрдгрд┐ рдмреНрд░рд╛рдЙрдЭрд░ рдбреЗрд╡реНрд╣рд▓рдкрд░ рд╕рддрдд рдирд╡реАрди рдпреЗрдд рдЖрд╣реЗрдд. рддреБрдореНрд╣реА рдЬрд╛рд╡рд╛ рдбреЗрд╡реНрд╣рд▓рдкрд░ рд╣реЛрдгреНрдпрд╛рд╕рд╛рдареА рдЕрднреНрдпрд╛рд╕ рдХрд░рдд рдЖрд╣рд╛рдд рд╣реЗ рдЪрд╛рдВрдЧрд▓реЗ рдЖрд╣реЗ, рд╡реЗрдм рдбрд┐рдЭрд╛рдпрдирд░ рдирд╛рд╣реА :)
5.2 рд▓реЛрдХрдкреНрд░рд┐рдп CSS рд╢реИрд▓реА
рддреБрдордЪреНрдпрд╛ рдЖрдпреБрд╖реНрдпрд╛рдд рддреБрдореНрд╣реА рднрд░рдкреВрд░ HTML рдХреЛрдб рд▓рд┐рд╣рд╛рд▓ рдХрд┐рдВрд╡рд╛ рддреНрдпрд╛рдЪреА рд╢реИрд▓реА рд╕рдВрдкрд╛рджрд┐рдд рдХрд░рд╛рд▓ рдЕрд╢реА рд╢рдХреНрдпрддрд╛ рдирд╛рд╣реА, рдкрдг рдХрд╛рд╣реАрд╣реА рд╣реЛрдК рд╢рдХрддреЗ. рдЙрджрд╛рд╣рд░рдгрд╛рд░реНрде, рддреБрдореНрд╣реА рдЪреА рдЪрд╛рдЪрдгреА рдХрд░рдгреНрдпрд╛рд╕рд╛рдареА рджреЛрди рд▓рд╣рд╛рди HTML рдкреГрд╖реНрдареЗ рд▓рд┐рд╣рд┐рдд рдЖрд╣рд╛рдд API
. рдореНрд╣рдгреВрди, рдореВрд▓рднреВрдд рд╢реИрд▓реА рдЬрд╛рдгреВрди рдШреЗрдгреЗ HTML
рдЙрдкрдпреБрдХреНрдд рдард░реВ рд╢рдХрддреЗ.
рдЦрд╛рд▓реА рдмреЕрдХрдПрдВрдб рд╡рд┐рдХрд╕рдХрд╛рдВрд╕рд╛рдареА 10 рд╕рд░реНрд╡рд╛рдд рд╕рд╛рдорд╛рдиреНрдп рдЖрд╣реЗрдд:
# | рдирд╛рд╡ | рдЙрджрд╛рд╣рд░рдг | рд╡рд░реНрдгрди |
---|---|---|---|
рез | рд░реБрдВрджреА | рд░реБрдВрджреА: 100px | рдШрдЯрдХрд╛рдЪреА рд░реБрдВрджреА рдкрд┐рдХреНрд╕реЗрд▓рдордзреНрдпреЗ |
2 | рдЙрдВрдЪреА | рдЙрдВрдЪреА: релреж% | рдЯрдХреНрдХреЗрд╡рд╛рд░реА рдореНрд╣рдгреВрди рдШрдЯрдХрд╛рдЪреА рдЙрдВрдЪреА (рдкрд╛рд▓рдХрд╛рдВрдЪреНрдпрд╛ рд░реБрдВрджреАрдЪреА) |
3 | рдкреНрд░рджрд░реНрд╢рди | рдкреНрд░рджрд░реНрд╢рди: рдХрд╛рд╣реАрд╣реА рдирд╛рд╣реА | рдкреНрд░рджрд░реНрд╢рди рдШрдЯрдХ (рдШрдЯрдХ рдкреНрд░рджрд░реНрд╢рд┐рдд рдХрд░реВ рдирдХрд╛) |
4 | рджреГрд╢реНрдпрдорд╛рдирддрд╛ | рджреГрд╢реНрдпрдорд╛рдирддрд╛: рд▓рдкрд▓реЗрд▓реЗ | рдШрдЯрдХ рджреГрд╢реНрдпрдорд╛рдирддрд╛ (рдШрдЯрдХ рд▓рдкрд▓реЗрд▓реЗ рдЖрд╣реЗ, рдкрд░рдВрддреБ рддреНрдпрд╛рд╕рд╛рдареА рдЬрд╛рдЧрд╛ рд░рд╛рдЦреАрд╡ рдЖрд╣реЗ) |
рел | рд░рдВрдЧ | рд░рдВрдЧ: рд▓рд╛рд▓; | рдордЬрдХреВрд░ рд░рдВрдЧ |
6 | рдкрд╛рд░реНрд╢реНрд╡рднреВрдореА рд░рдВрдЧ | рдкрд╛рд░реНрд╢реНрд╡рднреВрдореА рд░рдВрдЧ: рдзреВрд░ | рдкрд╛рд░реНрд╢реНрд╡рднреВрдореА рд░рдВрдЧ |
рен | рд╕реАрдорд╛ | рд╕реАрдорд╛: 1px рдШрди рдХрд╛рд│рд╛; | рд╕реАрдорд╛ (рд░реБрдВрджреА 1px, рд░рдВрдЧ рдХрд╛рд│рд╛, рдШрди рд░реЗрдЦрд╛) |
8 | рдлреЙрдиреНрдЯ | рдлреЙрдиреНрдЯ: verdana 10pt | рдлреЙрдиреНрдЯ: verdana, рдЖрдХрд╛рд░ 10pt |
реп | рдордЬрдХреВрд░ рд╕рдВрд░реЗрдЦрд┐рдд рдХрд░рд╛ | рдордЬрдХреВрд░-рд╕рдВрд░реЗрдЦрд┐рдд: рдХреЗрдВрджреНрд░; | рдордЬрдХреВрд░ рд╕рдВрд░реЗрдЦрди рдХреНрд╖реИрддрд┐рдЬрд░рд┐рддреНрдпрд╛ |
10 | рд╕рдорд╛рд╕ | рд╕рдорд╛рд╕:2px | рдШрдЯрдХрд╛рдЪреНрдпрд╛ рдмрд╛рд╣реЗрд░ рдкреЕрдбрд┐рдВрдЧ |
рддреБрдореНрд╣рд╛рд▓рд╛ рд╣реЗ рдЯреЕрдЧ рд▓рдХреНрд╖рд╛рдд рдареЗрд╡рдгреНрдпрд╛рдЪреА рдЧрд░рдЬ рдирд╛рд╣реА, рд╕рд░реНрд╡ рдХрд╛рд╣реА рдЗрдВрдЯрд░рдиреЗрдЯрд╡рд░ рдЖрд╣реЗ. рд╢рд┐рд╡рд╛рдп, рдкреНрд░рддреНрдпреЗрдХ "рд╢реИрд▓реА" рдЪреЗ рд╕реНрд╡рддрдГрдЪреЗ рд╡реИрдз рдореВрд▓реНрдпрд╛рдВрдЪреЗ рд╕рдВрдЪ рдЖрдгрд┐ рдореВрд▓реНрдпрд╛рдЪреЗ рд╡рд░реНрдгрди рдХрд░рдгреНрдпрд╛рд╕рд╛рдареА рд╕реНрд╡рддрдГрдЪреЗ рд╕реНрд╡рд░реВрдк рдЕрд╕рддреЗ. рдХрд┐рдорд╛рди border
рдХрд┐рдВрд╡рд╛ рдкрд╣рд╛ font
.