Разделение body на части
body — корневой еллемент отображаемой части html документа, ваш вопрос некоректен. По поводу частей именно текста — схема такая же как привел deamondz, только вместо тега div используем span
Например:
.red .bold .italic Красный текст тут еще и жирный а тут курсив PS:естественно пример абстрактный и стили могут быть описаны как угодно
Отслеживать
ответ дан 20 сен 2011 в 23:15
user3545 user3545
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как отделаться от body в css
Довольно редко я пишу html уроки, а писать их надо. Ну что же? Продолжим дальше?
Итак, сегодня я расскажу о том, как оформить «тело сайта» через CSS.
Что нужно сделать перед тем, как начать оформлять «тело сайта»?
2) Создать файл CSS в той же папке, где храниться ваш HTML шаблон с названием style.css (бывает, что создают его и под названием main.css)
3) Подключить только что созданный файл css следующей строчкой:
Более подробно об этом написано в уроке №3
4) Читать статью дальше.
Итак, Вы создали файл style.css и подключили стили в своем HYML-шаблоне. Сейчас Вам нужно в css-файле написать слово body и открыть стили знаком « » без кавычек. Должно получиться примерно так:
Обращаю внимание на то что, каждый новый стиль пишется с новой строки или через пробел, а также после стилей ставится точка с запятой. Комментарии в css обозначаются следующим образом: /*комментарий*/ .
Фон страницы можно задавать, как цветом, так и картинкой, аналогично описанному в уроке 4.
После окончания работы с файлами, не забудьте их сохранить и загрузить на сервер.
На сегодня Всё, создавайте сайт самостоятельно, последнее время цены так кусаются.
Динамическкое изменение css свойств тега body
CSS селекторы атрибутов для тега BODY
Здравствуйте! Возник такой вопрос: как описать стили тэгу BODY так, чтоб он отображался в IE и в.
Изменение свойств родительского класса CSS
Проблема. При возникновении события "hover" у дочернего div’a требуется изменить свойства его.
Изменение CSS свойств нескольких элементов при наведении курсора
Можно как-то без JavaScript изменять CSS свойства нескольких элементов при наведении курсора на.
Сообщение было отмечено Fedor92 как решение
Решение
Сообщение от Balanaar
Сообщение от Balanaar
то все окно заполняется зелёным.
никак не пойму от чего зависит такое поведение.
я хочу сделать так, чтобы градиент в body разворачивался на всю высоту и не повторялся (т е просто зелёный-белый).
по этому я подумал про javascript, с помощью которого можно конкретно задать высоту.
если это можно сделать без скрипта, то как?
и, все таки, как правильно передать высоту окна в css с помощью скрипта?
rayden reed, можно попробовать для body указать min-height:100%, если конечно внутри body не будет элементов со свойством float, а если такие будут дополнительно указать для body свойство overflow:hidden
Удалить отступы на странице body
И обнаруживаем, что края таблицы не прилипают к краю страницы, а имеют некий отступ от края, пример которого приведен ниже на скрине!
Зачем нужен отступ body на странице!?
Зачем нужно было такой отступ делать на страницу — мне не понятно!
В свое время я никак не мог понять, что за херня непонятное происходит, что страница ведет себя не так, как я себе представлял!
А оказалось, что кто-то, когда-то из программистов подумал, что это будет круто, и установил этот отступ по умолчанию!
Как отделаться от body в css
| Serge_Bliznykov |
| Посмотреть профиль |
| Найти ещё сообщения от Serge_Bliznykov |
зададутся размеры вьюпорта, но реальные размеры включают в себя еще рамку, поля и отступы (в реале не включает отступы, но результирующая ширина враппера [в данном случае объект документ] их вместит).
п.с. не хватает на вас верстки под ИЕ 5/6 + навигатор 1/2, без каких либо инспекторов, фаербагов, w3c-стандартов. сиди себе, кури молча документацию по браузеру и думай откуда мог бы появиться некий баг.
зададутся размеры вьюпорта, но реальные размеры включают в себя еще рамку, поля и отступы (в реале не включает отступы, но результирующая ширина враппера [в данном случае объект документ] их вместит).
п.с. не хватает на вас верстки под ИЕ 5/6 + навигатор 1/2, без каких либо инспекторов, фаербагов, w3c-стандартов. сиди себе, кури молча документацию по браузеру и думай откуда мог бы появиться некий баг.
Спасибо за ответ . я все правильно значит понял .
Если Вам сложно было писать ответ могли бы и не писать . просто иногда нужно подтверждение принятой информации по этому я и спросил
Похожие публикации:
- Как подключить ttf шрифт в css
- Как подключить наушники mi true wireless earbuds basic к телефону через блютуз
- Как подключить шрифт к сайту css
- Как позиционировать изображение в css
How to align entire html body to the center?
I just stumbled on this old post, and while I’m sure user01 has long since found his answer, I found the current answers don’t quite work. After playing around for a little bit using info provided by the others, I found a solution that worked in IE, Firefox, and Chrome. In CSS:
html, body < height: 100%; >html < display: table; margin: auto; >body
This is almost identical to abernier’s answer, but I found that including width would break the centering, as would omitting the auto margin. I hope anyone else who stumbles on this thread will find my answer helpful.
Note: Omit html, body < height: 100%; >to only center horizontally.
answered Feb 8, 2013 at 15:42
MildWolfie MildWolfie
2,512 1 1 gold badge 16 16 silver badges 27 27 bronze badges
Good answer. Just wondering (as I don’t have a lot of experience with HTML), is setting the height to 100% necessary?
Aug 22, 2013 at 20:43
@JackHumphries The height is only necessary if you want to align the page center on both the vertical and horizontal axis. If horizontal is all you want, you can omit the height.
Aug 27, 2013 at 14:42
@Jack Humphries its not because it happens it self
– user12825970
Jan 6, 2021 at 20:30
body
9,763 8 8 gold badges 59 59 silver badges 66 66 bronze badges
answered Mar 20, 2015 at 12:01
2,195 2 2 gold badges 23 23 silver badges 26 26 bronze badges
This is such a simple answer yet the cleanest and most efficient way of centring the body tag in the middle of the page.
Oct 30, 2018 at 20:10
While it’s short is also does not work in IE, Edge Legacy, Edge, Chrome, nor Firefox. The problem is that margin auto only works when the element width is less than that of the parent. As ‘body’ defaults to 100% there no room on the edges to auto-insert margins. You can use body < margin:0 auto; max-width: 700px; >and then your body will be up to 700px and will allow wrapping on smaller devices.
Jun 11, 2020 at 20:15
As of today with flexbox, you could:
body
Compared to this other flexbox auto-margins technique:
body < display:flex; min-height:100vh; >body >div
the first-one, does not require you to wrap everything into a div!
html, body html body
answered Jun 24, 2011 at 7:31
27.3k 20 20 gold badges 84 84 silver badges 114 114 bronze badges
Which DOCTYPE allows the style attribute of the html entity?
Sep 30, 2014 at 8:16
@ceving: not sure to understand. mean it is not CSS valid ?
May 9, 2016 at 19:21
Solutions 1 (flex + justify-content) and 3 only align vertically to the center, content is still aligned to the right. Solution 2 (flex, margin: auto) works but it makes the scrollbar appear as if content was sightly higher than the page allows. Setting min-height to a slightly lower value like 95vh works (but may induce some unwanted offset).
May 29 at 23:33
body
answered Jul 7, 2020 at 11:57
Riccardo Zonta Riccardo Zonta
257 3 3 silver badges 4 4 bronze badges
I think this is the best way to do it
Nov 22, 2020 at 2:28
If I have one thing that I love to share with respect to CSS, it’s MY FAVE WAY OF CENTERING THINGS ALONG BOTH AXES.
Advantages of this method:
- Full compatibility with browsers that people actually use
- No tables required
- Highly reusable for centering any other elements inside their parent
- Accomodates parents and children with dynamic (changing) dimensions!
I always do this by using 2 classes: One to specify the parent element, whose content will be centered ( .centered-wrapper ), and the 2nd one to specify which child of the parent is centered ( .centered-content ). This 2nd class is useful in the case where the parent has multiple children, but only 1 needs to be centered). In this case, body will be the .centered-wrapper , and an inner div will be .centered-content .
The idea for centering will now be to make .centered-content an inline-block . This will easily facilitate horizontal centering, through text-align: center; , and also allows for vertical centering as you shall see.
.centered-wrapper < position: relative; text-align: center; >.centered-wrapper:before < content: ""; position: relative; display: inline-block; width: 0; height: 100%; vertical-align: middle; >.centered-content
This gives you 2 really reusable classes for centering any child inside of any parent! Just add the .centered-wrapper and .centered-content classes.
So, what’s up with that :before element? It facilitates vertical-align: middle; and is necessary because vertical alignment isn’t relative to the height of the parent — vertical alignment is relative to the height of the tallest sibling. . Therefore, by ensuring that there is a sibling whose height is the parent’s height (100% height, 0 width to make it invisible), we know that vertical alignment will be with respect to the parent’s height.
One last thing: You need to ensure that your html and body tags are the size of the window so that centering to them is the same as centering to the browser!
Откуда отступ сверху у body?
Если убрать style.css то отступ пропадает, но никаих отступов для body там не прописано
- Вопрос задан более двух лет назад
- 422 просмотра
3 комментария
Простой 3 комментария
Вадим @MrDecoy Куратор тега CSS