Из этого урока вы узнаете достаточно много. К примеру каким образом заполнить блок текстом но чтоб текста небыло видно, как лучше работать со всплывающими объектами, узнаете о правиле border и о том как сделать текстовый элемент блочным.
Онлайн(качество сильно занижено):
Дополнительно:
Используемые, новые, правила в уроке.
text-indent:значение. - устанавливает отступ для первой строки блока, к примеру для создания красной строки в теге так-же может использоватся с отрицательным значением, для выступа первой строки. Записывается в единицах измерения или процентах.
прим. text-indent:10px;
В уроке мы использовали это правило для скрытия текста из блока.
display:значение: Имеет кучу значений и применений, но кросбраузерны только четыре. Block - заставляет эллемент вести себя как блок див, с переносом строки перед блоком и после. inline - наоборот заставляет блок вести себя как встроеный объект типа . list-item - делает блок с маркерами как у списка. None - скрывает объект, причём браузер не резервирует под него место (не оставляет пространство под размер элемента), это значение может понадобится если вы хотите скриптами вызывать этот элемент, при этом весь код страницы перечитывается с условием что блок появился.
прим. display:none;
В реале вообще используются чаще всего значения block и none. В уроке мы использовали это правило чтоб сделать встроенный эллемент A блочным.
А теперь самое интересное правило BORDER
Для начала простенькое.
border-collapse: имеет значения collapse и separate. Если мы устанавливаем бордюр таблице то значение collapse определяет стыки ячеек и делает для этого стыка одну единую границу. Таким образом на стыках ячеек исчезают жирные линии, separate - задаёт обратное значение, тоесть каждая ячейка имеет своё бордюр и на стыках получается сразу две линии.
border-spacing:значение - задаёт растояние между ячейками, если в правиле выше выставлено separate.
Ну а теперь основное.
в html мы бордюр записывали как
border="1"
Выставил толщину и забыл, бордюр в ксс даёт возможность изгалятся над ним как угодно. Главные значения это цвет, размер и стиль. И их можно применять как ко всему бордюру, так и отдельно для каждой из сторон.
border-left-style:
border-left-width:
border-left-color:
и т.д. для каждой стороны, но мой совет - не берите в голову. Выучить нужно только эти правила.
border:
border-left:
border-right:
border-top:
border-bottom:
Это сокращения, записываются они так:
border:1px solid #000000;
Где первое значение это размер бордюра width, затем стиль бордюра и цвет в шестнадцатиричном коде. Точно так же мы можем написать сокращения для каждой из сторон нашего бордюра.
прим.
border-left:1px solid #000;
border-bottom:1px solid #ccc;
Отображается левый чёрный бордюр и нижний серый, верхнего и правого бордюра нет вообще.
Теперь о самих значениях.
Ширина бордюра задаётся так-же в единицах измерения, цвет в шестнадцатиричном коде. А стиль имеет следующие значения, которые я не буду объяснять а приведу пример картинкой.
Надеюсь с бордюром всё теперь понятно.
