???????????? ??? ?????????? ?? ?? ????? CSS

???????? ?????? ?????? ???????? ???? ?????????? ??? site ?? ?? ????? CSS ???? ??? ????? ?? ?????? ??????? ???? HTML. ??? ?? ????? ????, ????????????? ??????? ???????? ??? ?? ?????? ?? ??????? ???? ??????????? ? ?????? 3 ??? CSS, ???? ?????????????? ??? ???? ??? ???? ?????? browsers.

???????? ?? ??????? ????? ?? ?? ?????? ??????? ????? ?????????? ?? Internet Explorer 6, ???? ?????? ?? ???? ???? ?? ???????? ????. ????? ??????.

CSS ??? ?’ ???????? ???? ?? ??????????, ????? ??? ??????, ?? ?????

?? ????????????? ?? ????? ??? ???? ?? ?????????? ??? ???????? ???????? ?? ??? ?????, ????? ??? ?????? ??? ???????? ?????. ??? ?? ????? ???? ????????????? ?? adjacent sibling selectors ??? ?? ????????????? ?? ?? CSS3, ???? ????? ??????? ?? ?????????????? ??? ??? ???? browsers.

?? adjacent sibling selectors ??????????? ??? CSS ?? ?? ??????? “+” ??? ??????????? ??????? ??? tags ??? ????? ???????, ?????? ??? ?????????? ?? ??? ?? ????. ?????? ????? ?? ????? ??????? ??? ? ????? ????????? ???? ???????? ?? ?? ???????? ?? ?????. ??? ??? ???????? ??????????? ?? tags:<h1> ??? ??? ????? ??? ???? ???????, <h2> ??? ??? ???????? ??? <h3> ??? ??? 3? ?????. ??? ?????? ?????????, ?? ????????? ??? ???? ?? <h1> & <h3> ?? ?? ????????? ???? ?? <h2>, ??? ????? ??? ??????????? ?? ??? ?????? ?????? ???? ????.

O CSS ??????? ????:

h2+p {
text-indent: 0;
}

???? ???????? ??? ???? ?????????? ? ????? ?????? ???? ????????? (<h2>) ?? ?? ??????? ?? ?????.

?? ??????? ??? ?????? ?? ???? ???? ?? ????? ??? ?????? ??? ???? ??? ????? ???????????. ?? ???? ????? ??? ??? ??????????? ??? ??????? ???? ????? ??????????:

p+p {
text-indent: 2em;
}

(? ???? em ??????? ???????, ?????????? ??? pixel. ??????????? ??? ?? em ??? ?????? ??? ??????? ???????? ????? ??????????? ??? Web (????? 1?). ???? ?????? ?? CSS ??? site ?? ???? ??? ?? 2em ????? 20px.)

CSS ??? ?? ????? ?????? ???? ?????????? ???? ??? ???????

??? ???? ????? ????????? ?????? ???? ???? ??????? <h2> (???? ???? ???? ????? ??????????? ???? ?? ??????) ??????????????? ? ???????? ??????? ??? adjacent sibling selectors ?? ????????? ?? ?? pseudo-elements.

?? pseudo-elements ?????????? ?? ??? ???-???? ?????? “:” ??? ?????????? ?? ?????????????? ?????? ??? ??? ??? ?????????????? ??? ?? DOM, ?????? ?? ?? ??? ???? ??????? ?? ???????? ??? ??????????.

??? ?? ?????? ?????? ?? ??? ?? ?? ????? ?????? ?? ????????? ??? ?? ????????, ?????? ??? CSS ?? ????:

h2+p:first-letter {
	font-family: Georgia, Times, "Times New Roman", serif;
	background: #333;
	color: #eed;
	float: left;
	font-size: 5em;
	line-height: .75em;
	margin: 0 .1em 0 0;
	padding: .1em;
}

To h2+p:first-letter ???????? ??? ? ??????? ????? ?? ????? ?????? ???? ?????????? ??? ?????? ???? ?????????.

???? ???? ???????, ?? 3 ?????? ??????? ??????? ?? ?????????????, ?? background ????? ??? ?? ????? ??? ?????? ?????????, ? 4? ?????? ??? ???? ?????? ????? ?? ????????? ????????, ? 5? ?? ??????? ??? ????????? ??? ?? ?????????? ??? ?????????? ??? ????????? ?? ????? ?? ?? background ??? ??? ??? ???????? ?????????.

???? ????? ???? ? ????...

?? ??????????? ??? ?? ????? ?? Web designers ?? ?? ??? CSS ????? ???? ????????????. ???? ???? ????? ???? ??? ?? ???????? ??? ?? ????? ???? ???????. ??? ??? ????? ???? ?? ????? ?? ?? ???????? ?? ??????? (?????? ??? ??????? ??? ??????????? ??? ??? layout) ?? ?? ??? specification ??? ?????? ?????? ?? ?? ????. ????? ???? ???????? ????? ?? ???????????????? ?? ??? ???? ??????.