CSS.
HTML . ( - ), , .
(Cascading Style Sheets, CSS) , . , , .
CSS , , HTML, . . , , , . , , "Arial" , , , , H1 ( P ). , , , , .
. , .
CSS , -. , WWW, , . , , , . HTML -. :
- HTML;
- ;
- , ;
- -;
- .
-, , .
HTML.
, .
"style" ( )
. -. style, .
:
<h1 style="color: #660000; text-decoration: underline;">, .</h1> |
, . , .
|
|
"style" ( )
-. . , , (. ). < style >. type .
:
... <head> <style type="text/css"> p { font-size: 18pt; font-family: Arial, sans-serif; color: #333366; } </style> </head> <body> <p>Hello, world!</p> </body> ... |
, . , " p " - , - .
,
. , -. < link /> :
<link rel="stylesheet" type="text/css" href="mysite.css" /> |
"mysite.css" - , .
:
- -, (. );
- -;
- , , . , . , - .
- , -, .
, " *.css " . . CSS "C++" "JavaScript":
/* "" - */ p { font-size: 10pt; font-family: Arial, sans-serif; color: #333366; } /* - */ h1 { font-size: 18pt; font-family: Tahoma, sans-serif; text-align: center; } |
, .css . . - . .css , .
, web-:
|
|
{ ... } |
, style. , . .
:
9.2.1: | |
h1 { font-size: 14pt; color: #660000; } p { text-align: justify; } | |
. |
1 . ( ) . , , , p.
class
, -. :
. { ... } |
class . , "1" ( "p"), , , .
:
9.2.2: | |
p { /* */ text-align: justify; } p.cite { /* */ text-align: justify; font-style: italic; font-sise: 8pt; color: #999999; } ... <!-- --> <p class="cite"> ... </p> | |
. |
. , :
. { ... } |
, , (, , ).
ID
ID , , (. ).
ID :
# { } |
, ID . , XHTML ID . , . , ID .
ID , , . , "" (header), (foother), (main_menu) , .
:
9.2.3: ID | |
/* CSS */ #copyright { txt-align: center; font-size: 10pt; font-weight: bold; color: #996633; border-top: 1px dashed black; } <!-- --> ... <p id="copyright"> © 2005, . " ". </p> | |
. |
|
|
, , , , - . , , , , ..
, , . , , , .
, :
td p { color: #660000; } |
. , ( 3), . . .
:
9.2.4 (1): | |
<ol> <li> 1</li> <li> 2 <ol> <li> 2.1 <ol> <li> 2.1.1</li> <li> 2.1.2</li> <li> 2.1.3</li> </ol> </li> <li> 2.2</li> <li> 2.3</li> <li>...</li> </ol> </li> <li>...</li> </ol> |
- , ? :
9.2.4 (2): | |
/* 1 */ ol { list-style-type: upper-roman; } /* 2 */ ol ol { list-style-type: decimal; } /* 3 */ ol ol ol { list-style-type: lower-alpha; } | |
. |
, , , . .
CSS . :
: { } |
:
- active - . .
- link - .
- hover - .
- visited - .
- first-letter - .
- first-line - .
4 . 2 - .
. , , . < a > hover:
9.2.5: | |
/* */ a.rollover { color: #660000; text-decoration: none; } a.rollover:hover { color: #FF0000; text-decoration: underline; } <!-- HTML --> ... <a class="rollover" href="#">-</a><br /> <a href="#"> </a> <br /> | |
. |
|
|
, . < b > < strong > - .
, , , () , - . :
b { color: #660000; text-decoration: underline; } strong { color: #660000; text-decoration: underline; } |
:
b, strong { color: #660000; text-decoration: underline; } |
. , .
: , font-family, text-align color :
/* */ h1, h2, h3, h4, h5, h6 { font-family: Tahoma; text-align: Center; color: navy; } /* */ h1 { font-size: 18pt; } h2 { font-size: 16pt; } h3 { font-size: 14pt; } ... |
.
http://everstudent.ru/blog/htmlcss/30-css-seletors-to-memorize/
habrahabr.ru