Публикации с тегом "CSS"

????? ?? ???????? ??????? ???????? ????????? ??????????? ??? ?????????? ??????? ??????? � ????????? ??? ? ???? ? ????????????? ?? ??????:

<div style="text-align: center">
  <img src="pan.jpg" width="400" height="120" alt="????????" />
</div>

? ?????? "?????????? ???????????????? ????????? (HTML + CSS)" ?????????????? ??????????? ??????, ?? ??? ?????????? ? ???????????????? ???????????? ??????? ??????? ????????. ???????? ????? ?????? ????????? ? ?????? ????????????? ????????, ??? ?????? ????? ????????.

????????? ??????????? ????????? ??????????: ???? ?????????????? ???????, ?????? ???????? ?????????? ????, ???????? ? ??????? ????:

#parent
{
  position: relative;
  background: lime;
  width: 200px;
  height: 200px;
}
#block
{
  position: absolute;
  background: blue;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30px;
}

<div id="parent">
  <div id="block">Hello, world</div>
</div>

????????????? ???????? ???????? CSS-????? position ?? ????????? relative, ??? ????????? ??????????????? ???????? ???????? ???????????? ?????????????. ?????? ???? ??????????? ? ??????? ???? ??? ?????? CSS-?????? left, right, bottom.

?????????? ??? CSS-?????: overflow, overflow-x ? overflow-y ??? ?????????? ???????????? ??????????? ???????? ????????. ??-????????? ???????? ? ???? ?????? ??????????? ? visible, ??????? ????????? ?????????? ????, ???? ??? ?????????? ?? ?????????? ? ???????? ???????. ???? ????? overflow ?????? ???????? auto, ?? ??? ????????????? ? ????? ???????? ?????????????? ? ???????????? ?????? ?????????:

.scrollblock {overflow: auto; width: 200px; height: 50px;}

<div class="scrollblock">?????????? ??? CSS-?????: <em>overflow</em>, <em>overflow-x</em> ? <em>overflow-y</em> ??? ?????????? ???????????? ??????????? ???????? ????????.</div>

????? overflow-x ? overflow-y ????????? ????????? ?????????????? ?????????????? ??? ???????????? ?????? ?????????.

????? ???????? ???????? ??????????? ?????????? ?????????? CSS-??????? ? ?????? HTML-????????. ??? ????? ????? ??????????? ??? ??????????? ?????? ? ???????? class ???????? ????? ??????. ??????? ????????? ?????????:

.bolded {font-weight: bold;}
.centered {text-align: center;}

<div class="bolded centered">? � ?????? ????? ?? ??????!</div>

?????? ?????????? ????????? ?????????? ????? ?? ??????? ???? ?? ?? ?????????? ?? ??????. ??? ????? ??????? ? ??????? ???? nobr:

<nobr>???? ????? ?????????????? ????? ???????????? ? ???? ??????</nobr>

????? ?? ????? ???????? ??? ?????? CSS-????? white-space, ????????? ?????????? ????????-??????????. ????????:

<span style="white-space: nowrap">???? ????? ?????????????? ????? ???????????? ? ???? ??????</span>

?????? ??????? ????? ?????????????? (??? nobr ??????????? ? ????????? XHTML).