7
: HTML. . .
: CSS HTML-.
: HTML-c CSS -.
:
- CSS?
- HTML ?
- ?
- ?
- ?
:
1. HTML- CSS .
2. CSS .
3. HTML- .
:
SS (Cascading Style Sheets) - , HTML . -, HTML .
HTML.
1. (inline). () HTML, , : , , , .
<p style="color: red"> </p>
2. (embed), HTML. <STYLE> <HEAD> , .
<html>
<head>
<style>
<! --
p{color: red}
-->
</style>
</head>
<body>
<p> </p>
</body>
</html>
3. (link) , , . STYLE, , ( .css). , HTML-.
HTML <LINK>. : <LINK rel="STYLESHEET" TYPE="text/css" HREF=" ">
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" >
</head>
<body>
<p> </p>
</body>
</html>
style.css :
p{color: red}
.
, ; , . .
H1 {color: red; size:20pt;}H1 , 20 (pt, point).
|
|
|
, :
h1, p, h2{font-size: 12px}
| * | : * { font-size: 14pt} |
| > | . ol > li {list-style-type: decimal} - LI OL: |
(Class Selectors):
:
. {}
CLASS - HTML, . CSS .
h2.myblue {background-color: blue}
<h2 class="myblue"> </h2>
.
:
. {}
:
.green {color: green;} = CLASS="green" .
ID (ID Selectors):
:
#id {}
ID - . C c .
#ducie {border-color: yellow}
.
:
<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>
A[att] , , ( IE).
table[border]{ border:1px solid red;}
A[att=val] , ( IE).
input[type=submit] {background-color:red;}
[lang|=val] , lang ( IE).
P[lang|=en]{text-align: left;}
(Contextual Selectors):
- . .
:
P EM {color: silver;}EM P .
.
, - . , . P :first-letter, :
p:first-letter { float: right; font-size: 2em; color: red;}
CSS2 :
:first-child - ;
:link - ;
:visited - ;
:hover - , ;
:active - ;
:focus - , ;
:lang - ;
:first-line - . block-level (p, h1 ..).;
:first-letter - ;
:before - ;
:after - .
|
|
|
:
a: link, a: visited {color: blue}a: active {color: red}a: hover {text-decoration: none}. ( ) . .
, , , ";".
:
