Выпуск №8. Свойства таблиц стилей (css)

свойства 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 - число указывающее высоту в %

Надеюсь, принцип понятен.

Для закрепления материала, предлагаю сделать небольшое упражнение, которое вы можете скачать здесь:

Архив 8 урока.

Оно небольшое и несложное, однако вы на практике научитесь применять изученные свойства и поймете, где и для чего их можно применять.

Там же вы можете скачать файл с готовым упражнением и разобраться, если что-то не вышло.

img.jpg — картинка с вашим заданием

cir.jpg — картинка которую вы можете использовать в качестве маркера списка

index.html — исходный код вашего задания (если что-то не получится)

С уважением, Андрей Бернацкий.

киберсант-вебмастер

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: , ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (25)

  1. elena

    Спасибо, Андрей. Я регулярно получаю Ваши уроки, пытаюсь разобраться, но покаполучается не очень. Ну, ничего я обязательно освою эту новую науку, только у меня получается не так быстро, как у молодежи. Еще раз спасибо Е.В.

  2. артем

    Спасибо!! Именно благодаря этим урокам у меня постепенно проясняется вся картина о HTML и CSS … Давно ищу что-то подобное, уже кучу всяких уроков перепробовал, но только здесь я начинаю понимать все преимущества CSS. Огромное спасибо!!!

  3. Александр

    Привет,коллеги!
    Благодарю за помошь!
    Мне уже почти 50 лет, работаю в рекламе.
    С недавних пор решил заниматься продвижением своего сайта в netе.
    Понял,что без знания предмета работа будет не эффективной.
    Благодаря вашим урокам стало проясняться видение предмета.
    Пусть вас благословит Господь!
    Успехов!

  4. Елена

    Андрей Спасибо большое! Из Вашего урока становится понятно, что возможности CSS огромные! Все доступно и понятно написано! Прекрасно! Спасибо!!!

  5. Мария

    Спасибо!

  6. vredniy

    Спасибо за полезные уроки.
    Хотелось бы задать вопрос немного не по теме.
    Каким плагином вы пользуетесь, чтобы подсвечивать код на вашем блоге.
    Есть ли в нем подводные камни.
    Заранее благодарю за ответ.

  7. Виктор

    С интересом читаю уроки. Хотя я уже не новичок и кое-что знаю, но просто интересно. И кое что новое все таки вижу. Так что спасибо за труд. Хочу сделать замечание по поводу русского языка. Увы, с этим в интернете плохо, ой как плохо. Но не все сразу, постепенно научимся.
    Так вот, слово «Итак» пишется в месте, если это вводное слово и отделяется запятой. Итак, поехали …
    А слова «То есть» не являются вводными и запятой их отделять не надо..
    И вот здесь «Порядок следования свойств, рекомендую » запятая тоже не нужна.
    В других уроках тоже были неточности, но это я уже забыл. Это не так важно, у многих и у меня в том числе очень много опечаток, да и клавитура не всегда пробивает все что надо, приходится перечитывать набранное. Но мне показалось, что тут систематическое.

    • avverok

      Не «в месте», а «вместе»
      Не «кое что», а «кое-что» …
      … поэтому учим русский язык и не умничаем :)

      • Николай

        Отдельная тема для обсуждения. И мне кажется весьма важная. Орфография на сайтах, даже великолепно сделанных, частенько снижает доверие к этим сайтам.

        • Максим

          Да, эта тачняк, ваще!

          • людмила

            Товарищи-друзья, мы здесь изучаем html ,а по русскому языку модерируйте другие сайты пожалуйста ,а уж если охота поумничать ,для этого есть-TWETTER!

    • cat

      «Порядок следования свойств, рекомендую » — запятая нужна, т.к. это два разных предложения, а не одно предложение типа «(Я) рекомендую порядок следования свойств» (вот так — было бы одно)
      «всё таки» пишется всё-таки и выделяецца запятыми……
      В общем, Виктор, Вы, конечно, правы!

      • людмила

        «ВыделяеЦЦа»-выделяется ! У вас что , даже в браузере РЕДАКТОРА нет? А тему развили .как будто у каждого по сайту для обучения русскому языку!

  8. Евгений

    Материал очень толково изложен и всё получается! Спасибо!

  9. Анна

    спасибо, материал очень хорошо подан)

  10. mag

    Все написано просто и понятно. Спасибо.

  11. Tanuxa

    В чём разница между Border и Border-style? Объясните пожалуйста.
    За урок спасибо! Всё получилось. :)

  12. Валентин

    Андрей,у меня вопрос,в прошлом письме я высылал для твоего анализа свои экспериментальные скрипты основанные на твоих уроках,и там был вопрос почему возникла красная линия,хотя я её вроде бы не программировал,и мои открытия в написании бегущей строки,сообщи всё-таки,где была ошибка ,если найдёшь,и ещё кое что у меня не получилось,буду ещё проверять.КВА

    • Виктор Рог

      Ваш вопрос в стадии написания ответа. Не волнуйтесь, скоро мы Вам ответим на email.

  13. Михаил

    Пишите — Архив урока 7, а тут урок 8… хотя ссылка верная.
    Спасибо за уроки, нахожу для себя что-то новое.

  14. Саня

    спасибо , хорошие уроки .
    не расскажешь про jquery и ajax

  15. Станислав

    Андрей, спасибо за урок! Мне нравятся Вашт полезные уроки. Правда, темп изложения для меня (в семьдесят лет) великоват, но я стараюсь освоить этот курс. Успехов и благополучия Вам!

  16. Тамара

    Андрей, я очень благодарна за уроки!!!!!!!!! это прорыв! у меня получается! Класс!!!!!!! Мне тоже скоро 50, но я хочу создавать сайты как для себя, так и для людей! всем привет!

  17. Наталия

    А можно ли с помощью CSS границы элементов делать скругленными, менять их прозрачность?

  18. Сергей

    А как вставлять видео и картинку к это му видео ?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree