Выпуск №8. Свойства таблиц стилей (css).
15.07.2009 Рубрика: Обучение \ Курс по HTML&CSS
Продолжим изучать свойства таблиц стилей css.
В этом выпуске мы познакомимся со стилями, которые позволяют форматировать списки, и рассмотрим стили для задания различного вида границ элементов.
Итак о списках.
Стилей форматирующих списки не так много. Вот они все:
list-style-type – задает вид маркера для списка.
Значения:
none – без маркера
disc – маркер в виде круга
square – квадрат
decimal – арабские цифры
lower-alpha – строчные латинские буквы
upper-alpha – прописные латинские буквы
lower-roman – строчные римские цифры
upper-roman – прописные римские цифры
Пример:
li{
list-style-type: square;
}
list-style-image – задает рисунок, который будет выступить в роли маркера списка.
Значения:
none – без изображения
URL – адрес файла с изображением
Пример:
li{
list-style-image:url(cir.jpg);
}
list-style-position – определяет позицию маркера относительно списка
Значеня:
outside - маркер находится вне списка
inside - маркер находится внутри списка
Пимер:
li{
list-style-position: outside;
}
Для примера предложу такой вариант использования списков:
<style type="text/css">
h2{
color:#CC0000;
}
li{
list-style-type: lower-alpha;
list-style-image:url(cir.jpg);
list-style-position: outside;
}
<h2>Столицы некоторых государств </h2>
<ul>
<li>Москва</li>
<li>Минск</li>
<li>Лондон</li>
<li>Париж</li>
</ul>
</style>
Думаю, комментарии тут будут лишними. Все здесь просто и понятно (я надеюсь).
Единственное что попрошу проделать – это поменять в свойстве list-style-position значение outside на inside. Что бы увидеть разницу данный пример не совсем подходит. Предложу такое:
<li>Москва <br /> Токио</li>
Если вставить такую строку в наш вышестоящий <ul> то можно понять для чего используют outside и inside.
Существует возможность задать сразу все эти свойства.
li{
list-style: lower-alpha url(cir.jpg) outside;
}
Вот, пожалуй, и все что касается работы со списками.
Далее что бы я хотел вам рассказать – это свойства управляющие границами элемента.
Подчеркиваю, что именно границами элемента, потому что многие понимают границы – значит только у таблиц.
Так вот, границы, или рамки, можно задавать не только у таблиц, но и у тегов, допустим <div> и даже тому же самому тегу <li>можно задать рамку, определить ее вид, толщину и цвет.
Вот что может CSS!
И так рассмотрим свойства.
Border – определяет вид рамки
Значения:
none – без рамки
dotted - рамка из точек
dashed - пунктирная
solid – сплошная
Border-style – определяет стиль рамки
Значения:
none - без рамки
dotted – рамка из точек
dashed - пунктирная
solid - сплошная
border-width - задает ширину рамки
Значения:
thin - тонкая
medium – средняя
thick – широкая
x – числовое значение
border-color - задает цвет рамки
Значения:
цвет
Существует в CSS возможность задавать стиль для отельных частей рамки (верхней, нижней, правой и левой).
border-top-width – ширина верхней части рамки
border-bottom-width – ширина нижней части рамки
border-left-width – ширина левой части рамки
border-right-width – ширина правой части рамки
Значения:
Те же, что и у border-width
border-top-color – цвет верхней части рамки
border-bottom-color – цвет нижней части рамки
border-left-color – цвет левой части рамки
border-right-color – цвет правой части рамки
Значения:
цвет
border-top-style – стиль верхней части рамки
border-bottom-style – стиль нижней части рамки
border-left-style – стиль левой части рамки
border-right-style – стиль правой части рамки
Значения:
Те же, что и для border-style
Как и для списков, можно задавать сразу несколько свойств для рамки, либо для отдельной части рамки.
Примеры:
td{
border: 2px solid #a01616;
}
То есть, мы для всей рамки задали толщину, стиль и цвет. Порядок следования свойств, рекомендую использовать именно такой!!! (ВАЖНО)
H3{
border-top: 1px dotted #1b25ac;
}
li{
border-bottom: thin dashed # fcff06;
}
Рассмотрим еще два свойства. Они просты и понятны.
width - задает значение ширины для элемента
Значения:
x - число указывающее ширину
auto - определяется браузером
x - число указывающее ширину в %
height - задает значение высоты для элемента
Значения:
x – число указывающее высоту
auto - определяется браузером
x - число указывающее высоту в %
Надеюсь, принцип понятен.
Для закрепления материала, предлагаю сделать небольшое упражнение, которое вы можете скачать здесь:
Оно небольшое и несложное, однако вы на практике научитесь применять изученные свойства и поймете, где и для чего их можно применять.
Там же вы можете скачать файл с готовым упражнением и разобраться, если что-то не вышло.
img.jpg – картинка с вашим заданием
cir.jpg – картинка которую вы можете использовать в качестве маркера списка
index.html – исходный код вашего задания (если что-то не получится)
С уважением, Андрей Бернацкий.
| Подписаться |
|
Поделиться |
|
Метки: границы элементов, каскадные таблицы стилей, форматировать списки
Популярные записи
Монетизация сайта с помощью ссылочных бирж.
Как создать свой первый профессиональный дизайн сайта с нуля.
На пути к монетизации сайта: увеличиваем рейтинг сайта через наращивание ссылочной массы.
Загибающийся флеш-уголок для сайта.
Создание шаблона для отдельной страницы WordPress.
Спасибо, Андрей. Я регулярно получаю Ваши уроки, пытаюсь разобраться, но покаполучается не очень. Ну, ничего я обязательно освою эту новую науку, только у меня получается не так быстро, как у молодежи. Еще раз спасибо Е.В.
Нравится или не нравится:
0 
0
Спасибо!! Именно благодаря этим урокам у меня постепенно проясняется вся картина о HTML и CSS … Давно ищу что-то подобное, уже кучу всяких уроков перепробовал, но только здесь я начинаю понимать все преимущества CSS. Огромное спасибо!!!
Нравится или не нравится:
0 
0
Привет,коллеги!
Благодарю за помошь!
Мне уже почти 50 лет, работаю в рекламе.
С недавних пор решил заниматься продвижением своего сайта в netе.
Понял,что без знания предмета работа будет не эффективной.
Благодаря вашим урокам стало проясняться видение предмета.
Пусть вас благословит Господь!
Успехов!
Нравится или не нравится:
0 
0
Андрей Спасибо большое! Из Вашего урока становится понятно, что возможности CSS огромные! Все доступно и понятно написано! Прекрасно! Спасибо!!!
Нравится или не нравится:
0 
0
Спасибо!
Нравится или не нравится:
0 
0
Спасибо за полезные уроки.
Хотелось бы задать вопрос немного не по теме.
Каким плагином вы пользуетесь, чтобы подсвечивать код на вашем блоге.
Есть ли в нем подводные камни.
Заранее благодарю за ответ.
Нравится или не нравится:
0 
0
С интересом читаю уроки. Хотя я уже не новичок и кое-что знаю, но просто интересно. И кое что новое все таки вижу. Так что спасибо за труд. Хочу сделать замечание по поводу русского языка. Увы, с этим в интернете плохо, ой как плохо. Но не все сразу, постепенно научимся.
Так вот, слово «Итак» пишется в месте, если это вводное слово и отделяется запятой. Итак, поехали …
А слова «То есть» не являются вводными и запятой их отделять не надо..
И вот здесь «Порядок следования свойств, рекомендую » запятая тоже не нужна.
В других уроках тоже были неточности, но это я уже забыл. Это не так важно, у многих и у меня в том числе очень много опечаток, да и клавитура не всегда пробивает все что надо, приходится перечитывать набранное. Но мне показалось, что тут систематическое.
Нравится или не нравится:
0 
0
Не «в месте», а «вместе»
Не «кое что», а «кое-что» …
… поэтому учим русский язык и не умничаем
Нравится или не нравится:
0 
0
Отдельная тема для обсуждения. И мне кажется весьма важная. Орфография на сайтах, даже великолепно сделанных, частенько снижает доверие к этим сайтам.
Нравится или не нравится:
0 
0
Да, эта тачняк, ваще!
Нравится или не нравится:
0 
0
Товарищи-друзья, мы здесь изучаем html ,а по русскому языку модерируйте другие сайты пожалуйста ,а уж если охота поумничать ,для этого есть-TWETTER!
Нравится или не нравится:
0 
0
«Порядок следования свойств, рекомендую » – запятая нужна, т.к. это два разных предложения, а не одно предложение типа «(Я) рекомендую порядок следования свойств» (вот так – было бы одно)
«всё таки» пишется всё-таки и выделяецца запятыми……
В общем, Виктор, Вы, конечно, правы!
Нравится или не нравится:
0 
0
«ВыделяеЦЦа»-выделяется ! У вас что , даже в браузере РЕДАКТОРА нет? А тему развили .как будто у каждого по сайту для обучения русскому языку!
Нравится или не нравится:
0 
0
Материал очень толково изложен и всё получается! Спасибо!
Нравится или не нравится:
0 
0
спасибо, материал очень хорошо подан)
Нравится или не нравится:
0 
0
Все написано просто и понятно. Спасибо.
Нравится или не нравится:
0 
0
В чём разница между Border и Border-style? Объясните пожалуйста.
За урок спасибо! Всё получилось.
Нравится или не нравится:
0 
0
Андрей,у меня вопрос,в прошлом письме я высылал для твоего анализа свои экспериментальные скрипты основанные на твоих уроках,и там был вопрос почему возникла красная линия,хотя я её вроде бы не программировал,и мои открытия в написании бегущей строки,сообщи всё-таки,где была ошибка ,если найдёшь,и ещё кое что у меня не получилось,буду ещё проверять.КВА
Нравится или не нравится:
0 
0
Ваш вопрос в стадии написания ответа. Не волнуйтесь, скоро мы Вам ответим на email.
Нравится или не нравится:
0 
0
Пишите – Архив урока 7, а тут урок 8… хотя ссылка верная.
Спасибо за уроки, нахожу для себя что-то новое.
Нравится или не нравится:
0 
0
спасибо , хорошие уроки .
не расскажешь про jquery и ajax
Нравится или не нравится:
0 
0
Андрей, спасибо за урок! Мне нравятся Вашт полезные уроки. Правда, темп изложения для меня (в семьдесят лет) великоват, но я стараюсь освоить этот курс. Успехов и благополучия Вам!
Нравится или не нравится:
0 
0
Андрей, я очень благодарна за уроки!!!!!!!!! это прорыв! у меня получается! Класс!!!!!!! Мне тоже скоро 50, но я хочу создавать сайты как для себя, так и для людей! всем привет!
Нравится или не нравится:
0 
0
А можно ли с помощью CSS границы элементов делать скругленными, менять их прозрачность?
Нравится или не нравится:
0 
0
А как вставлять видео и картинку к это му видео ?
Нравится или не нравится:
0 
0