span { display:block; } Строчный элемент span со свойством display:block ведет себя как блочный элемент и вытесняет со своей строки второй такой же строчный элемент. Строчный элемент span со свойством display:block ведет себя как блочный элемент и вытесняет со своей […]

  p.one { border:1px solid red; outline-style:solid; outline-width:thin; } p.two { border:1px solid red; outline-style:dotted; outline-width:3px; } Это текст параграфа. Это текст параграфа. Заметка: помните, что Internet Explorer 8 (и выше) поддерживает свойстов outline только если указан !DOCTYPE. Это текст […]

 Перейти к справке CSS p { border-style:solid; border-right-width:15px; } Описание и использование Свойство CSS border-right-width задает ширину левого бордюра элемента. Заметка: всегда задавайте свойство border-style перед свойством border-right-width. Элемент должен иметь бордюры, для которых вы хотите изменить ширину. Значение […]

  h2 {font-size:250%;} h1 {font-size:200%;} p {font-size:300%;} Это заголовок первого уровня Это заголовок второго уровня Это обычный параграф. Но размер его шрифта больше, чем у заголовков. Это обычный параграф. Но размер его шрифта больше, чем у заголовков.

 Перейти к справке CSS ul { list-style-image:url(«/images/blueball.gif»); list-style-type:square; } Описание и использование Свойство CSS list-style-image заменяет маркер пункта списка на изображение. Заметка: Всегда указывайте свойство list-style-type. Это свойство используется, если указанное вами изображение недоступно. Значение по умолчанию none Наследование […]

  p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;} Это обычный параграф. Я сделаю его подлиннее, чтобы было лучше видно, как действует трансформация текста. Это обычный параграф. Я сделаю его подлиннее, чтобы было лучше видно, как действует трансформация текста. Это обычный параграф. […]

h1.hidden {display:none;} Этот заголовок видимый. Этот заголовок скрыт. Не забывайте о том, что элементы, скрытые при помощи diplay:none не занимают выделенное для них пространство. Поэтому этот параграф поднялся к видимому заголовку. Не забывайте о том, что элементы, скрытые при помощи […]

  p.padding {padding-left:2cm;} p.padding2 {padding-left:50%;} Текст без левых полей. Текст с левым полем в 2 сантиметра. Текст с левым полем в 50% от ширины родительского элемента. Текст без левых полей. Текст с левым полем в 2 сантиметра. Текст с левым […]

  p > i:first-child { color:blue; } Я сильный мужик. Я сильный мужик. Я сильный мужик. Я сильный мужик. Заметка: псевдо-класс :first-child работает в IE только если указан верный DOCTYPE. Я сильный мужик. Я сильный мужик. Я сильный мужик. Я […]

  Поводите мышью над словами, чтобы увидеть, как меняется курсор мыши. auto crosshair default e-resize help move n-resize ne-resize nw-resize pointer progress s-resize se-resize sw-resize text w-resize wait Поводите мышью над словами, чтобы увидеть, как меняется курсор мыши. auto crosshair […]