Файловый архив студентов. Файловый архив студентов.
1309 вузов, 5197 предметов.
/ Регистрация
FAQ Обратная связь Вопросы и предложения
Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Кемеровский государственный университет культуры и искусств
Предмет:
[НЕСОРТИРОВАННОЕ]
Файл:
CSS очень много.doc
Скачиваний:
1
Добавлен:
01.05.2025
Размер:
1.1 Mб
Скачать
☆
►Содержание►

Параметр 'max-height'

Используется для задания максимальной высоты элемента.

Наследование: нет.

Пример:

div

{

max-height: 200%

}

Может принимать следующие значения:

Значение

Описание

none

Отсутствие ограничений на максимальную высоту элемента

length

Определяет максимальную высоту элемента

%

Определяет максимальную высоту элемента в % от объемлющего блока

Параметр 'max-width'

Используется для задания максимальной ширины элемента.

Наследование: нет.

Пример:

h6

{

max-width: 75%

}

Может принимать следующие значения:

Значение

Описание

none

Отсутствие ограничений на максимальную ширину элемента

length

Определяет максимальную ширину элемента

%

Определяет максимальную ширину элемента в % от объемлющего блока

Параметр 'min-height'

Используется для задания минимальной высоты элемента.

Наследование: нет.

Пример:

div

{

min-height: 20%

}

Может принимать следующие значения:

Значение

Описание

length

Определяет минимальную высоту элемента

%

Определяет минимальную высоту элемента в % от объемлющего блока

Параметр 'min-width'

Используется для задания минимальной ширины элемента.

Наследование: нет.

Пример:

h6

{

min-width: 20%

}

Может принимать следующие значения:

Значение

Описание

length

Определяет минимальную ширину элемента

%

Определяет минимальную ширину элемента в % от объемлющего блока

Параметр 'width'

Используется для задания ширины элемента.

Наследование: нет.

Пример:

hr

{

width: 20%

}

Может принимать следующие значения:

Значение

Описание

auto

Браузер вычисляет реальную ширину

%

Определяет ширину в % от ширины родительского элемента

length

Определяет ширину в px, см, и т.д.

Форматирование в CSS

Данные параметры позволяют определить, как и в каком месте вывести элемент.

Примеры:

  1. В примере показано, как вывести элемент.

  2. <html>

  3. <head>

  4. <style type="text/css">

  5. h1 {display: inline}

  6. pre {display: none}

  7. </style>

  8. </head>

  10. <body>

  12. <pre>Эта информация не будет отображена</pre>

  13. <h1>Между этими двумя элементами</h1>

  14. <h1>нет интервала</h1>

  17. </body>

</html>

  1. Пример показывает, как создать смещение изображения в параграфе вправо.

  2. <html>

  3. <head>

  4. </head>

  6. <body>

  7. <p>

  8. <img style="float:right" src="image.gif" width="100" height="70" />

  9. В параграфе изображение смещено вправо. В параграфе изображение смещено вправо.

  11. </p>

  12. </body>

</html>

  1. Пример показывает, как создать смещение изображения в параграфе вправо и добавить к изображению границы и отступы.

  2. <html>

  3. <head>

  4. </head>

  6. <body>

  7. <p>

  8. <img style="float:right; border:1px solid blue; margin:0px 0px 15px 20px;"

  9. src="image.gif" width="100" height="70" />

  10. Изображение смещено вправо, имеет границу из сплошной линии и отступы.

  11. </p>

  12. </body>

</html>

  1. Пример показывает, как можно сместить изображение с заголовком вправо.

  2. <html>

  3. <head>

  4. </head>

  6. <body>

  7. <div style="float:right; border:2px dotted blue; text-align:center;

  8. padding:5px; margin:5 5 10px 10px; width:160px;">

  9. <img src="image.gif" width="120" height="70" /><br />

  10. Изучайте CSS!

  11. </div>

  13. <p>

  14. В данном примере элемент div имеет ширину 160 пикселей, содержит изображение,

  15. смещается вправо.

  16. Для дистанцирования текста от div, к последнему добавлены отступы,

  17. а для выделения картинки и заголовка - границы и поля.

  18. </p>

  19. </body>

</html>

  1. Пример показывает, как можно сместить первую букву параграфа влево.

  2. <html>

  3. <head>

  4. <style type="text/css">

  5. b

  6. {

  7. float:left;

  8. line-height:95%;

  9. font-size:500%;

  10. font-family:Comic Sans MS;

  11. width:1.2em;

  12. }

  13. </style>

  14. </head>

  16. <body>

  17. <p>

  18. <b>В</b> параграфе элемент b имеет ширину - 1.2 размера текущего шрифта,

  19. размер шрифта - 500%, межстрочный интервал - 95%, шрифт буквы - Comic Sans MS.

  20. </p>

  22. </body>

</html>

  1. Пример показывает, как создать горизонтальное меню.

  2. <html>

  3. <head>

  4. <style type="text/css">

  5. ol

  6. {

  7. float:left;

  8. margin:5;

  9. padding:5;

  10. width:100%;

  11. list-style-type:none;

  12. }

  13. a

  14. {

  15. float:left;

  16. width:6em;

  17. text-decoration:none;

  18. color:blue;

  19. background-color:yellow;

  20. padding:0.4em 0.7em;

  21. border:2px solid gray;

  22. }

  23. a:hover {background-color:#0F0FFF; color:yellow}

  24. li {display:inline}

  25. </style>

  26. </head>

  28. <body>

  29. <ol>

  30. <li><a href="#">Ссылка 1</a></li>

  31. <li><a href="#">Ссылка 2</a></li>

  32. <li><a href="#">Ссылка 3</a></li>

  33. <li><a href="#">Ссылка 4</a></li>

  34. </ol>

  36. <p>

  37. В примере элементы ol и a смещены влево.

  38. У элементов li отсутствует разрыв строки перед или после элемента.

  39. </p>

  41. </body>

</html>

  1. Пример показывает, как создать страницы без таблиц.

  2. <html>

  3. <head>

  4. <style type="text/css">

  5. div.block

  6. {

  7. width:100%;

  8. margin:0px;

  9. border:1px solid orange;

  10. line-height:150%;

  11. }

  12. div.top,div.bottom

  13. {

  14. padding:0.5em;

  15. color:white;

  16. background-color:orange;

  17. clear:left;

  18. }

  19. h1.top

  20. {

  21. padding:0;

  22. margin:0;

  23. }

  24. div.move

  25. {

  26. float:left;

  27. width:160px;

  28. margin:0;

  29. padding:1em;

  30. color: blue;

  31. }

  32. div.body

  33. {

  34. margin-left:190px;

  35. border-left:1px solid orange;

  36. padding:1em;

  37. }

  38. </style>

  39. </head>

  40. <body>

  42. <div class="block">

  43. <div class="top"><h1 class="top">www.Intuit.ru</h1></div>

  44. <div class="move"><p>"Сущности, необходимые для объяснения чего-либо,

  45. не следует умножать без необходимости." Уильям Оккам (1285-1349)</p></div>

  46. <div class="body">

  47. <h2>Свободно доступные пособия по созданию Web</h2>

  48. <p>В Интернет можно найти все необходимые для создания Web пособия,

  49. начиная от основ HTML и XHTML и заканчивая XML, XSL, Multimedia и WAP.</p>

  50. <p>Intuit -- Сайт для разработчиков Web!</p></div>

  51. <div class="bottom">©Copyright</div>

  52. </div>

  54. </body>

</html>

  1. В примере показано, как позиционировать элемент относительно его обычного положения.

  2. <html>

  3. <head>

  4. <style type="text/css">

  5. p.left_plus

  6. {

  7. position:relative;

  8. left:15px

  9. }

  10. p.left_minus

  11. {

  12. position:relative;

  13. left:-15px

  14. }

  15. p.right_plus

  16. {

  17. position:relative;

  18. right:35px

  19. }

  20. p.right_minus

  21. {

  22. position:relative;

  23. right:-35px

  24. }

  25. </style>

  26. </head>

  28. <body>

  29. <h2>Это заголовок в обычном положении</h2>

  30. <p class="left_plus">Параграф имеет смещение относительно своего обычного положения</p>

  31. <p class="left_minus">Параграф имеет смещение относительно своего обычного положения</p>

  32. <p class="right_plus">Параграф имеет смещение относительно своего обычного положения</p>

  33. <p class="right_minus">Параграф имеет смещение относительно своего обычного положения</p>

  34. </body>

</html>

  1. В примере показано, как позиционировать элемент с помощью абсолютного значения.

  2. <html>

  3. <head>

  4. <style type="text/css">

  5. p.ab

  6. {

  7. position:absolute;

  8. left:50px;

  9. top:50px

  10. }

  11. </style>

  12. </head>

  14. <body>

  15. <p class="ab">Параграф позиционируется с абсолютным значением</p>

  16. <pre>С помощью абсолютного позиционирования элемент можно поместить в любом месте страницы.

  17. Параграф имеет смещение - на 50px от левого края страницы и

  18. на 50px от верхнего края страницы.</pre>

  19. </body>

</html>

  1. В примере показано, как сделать элемент невидимым.

  2. <html>

  3. <head>

  4. <style type="text/css">

  5. p.off {visibility:hidden}

  6. p.on {visibility:visible}

  7. </style>

  8. </head>

  10. <body>

  11. <p class="on">Параграф виден</p>

  12. <p class="off">Параграф не виден</p>

  13. </body>

</html>

  1. В примере показано, как изменить курсор.

  2. <html>

  3. <head>

  4. </head>

  6. <body>

  8. <h4 style="color:blue">Курсоры:</h4>

  10. <div style="cursor:auto">

  11. Auto</div>

  12. <div style="cursor:crosshair">

  13. Crosshair</div>

  14. <div style="cursor:default">

  15. Default</div>

  16. <div style="cursor:pointer">

  17. Pointer</div>

  18. <div style="cursor:move">

  19. Move</div>

  20. <div style="cursor:text">

  21. text</div>

  22. <div style="cursor:wait">

  23. wait</div>

  24. <div style="cursor:help">

  25. help</div>

  27. <h4 style="color:blue">Курсоры типа resize:</h4>

  29. <div style="cursor:e-resize">

  30. e-resize</div>

  31. <div style="cursor:ne-resize">

  32. ne-resize</div>

  33. <div style="cursor:nw-resize">

  34. nw-resize</div>

  35. <div style="cursor:n-resize">

  36. n-resize</div>

  37. <div style="cursor:se-resize">

  38. se-resize</div>

  39. <div style="cursor:sw-resize">

  40. sw-resize</div>

  41. <div style="cursor:s-resize">

  42. s-resize</div>

  43. <div style="cursor:w-resize">

  44. w-resize</div>

  45. </body>

</html>

Лекция 11. Параметры форматирования в CSS

Данные параметры позволяют:

  • управлять выводом элемента;

  • задавать положение изображения в другом элементе;

  • позиционировать элемент относительно его обычного положения;

  • позиционировать элемент с помощью абсолютного значения;

  • управлять видимостью элемента.

Данные параметры поддерживают следующие браузеры:Internet Explorer, Firefox, Netscape.

Параметр

Описание

Значения

IE

F

N

W3C

clear

Задает стороны элемента, на которых не допускаются другие перемещаемые элементы

left

4

1

4

1

right

both

none

cursor

Задает тип выводимого курсора

url

4

1

6

2

auto

crosshair

default

pointer

move

e-resize

ne-resize

nw-resize

n-resize

se-resize

sw-resize

s-resize

w-resize

text

wait

help

display

Определяет, как в документе будет показан элемент

none

4

1

4

1

inline

block

list-item

run-in

compact

marker

table

inline-table

table-row-group

table-header-group

table-footer-group

table-row

table-column-group

table-column

table-cell

table-caption

float

Определяет, где в другом элементе появится изображение или текст

left

4

1

4

1

right

none

position

Задает статическое, относительное, абсолютное или фиксированное положение элемента

static

4

1

4

2

relative

absolute

fixed

visibility

Определяет, будет ли элемент видим или невидим

visible

4

1

6

2

hidden

collapse
Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]
Помощь Обратная связь Вопросы и предложения Пользовательское соглашение Политика конфиденциальности