Подскажите, какой контейнер или атрибут тега задает цвет заголовку?
задан 11 фев 2018 в 7:30
Данил БерезовскийДанил Березовский
1712 золотых знака3 серебряных знака10 бронзовых знаков
2
Или ещё проще:
<h1 style="color: red">Hello, world!</h1>Чтобы задать цвет — color.
ответ дан 11 фев 2018 в 7:41
entithatentithat
13k2 золотых знака19 серебряных знаков36 бронзовых знаков
Как вариант:
.color {
color: red;
background-color: #f5f5f5;
}<h1 class="color">Сегодня воскресенье, сегодня выходной</h1>Ознакомьтесь, каким образом определяется цвет текста элемента, а также цвет фона элемента.
Обратите внимание на ответ @entithat, на такой способ внесения стилей, это один из способов, он тоже верный. Также можно внести изменения в стили с помощью JavaScript.
ответ дан 11 фев 2018 в 7:39
html,body{
width:100%;
height:100%;
}
div{
background:red;
width:100px;
height:30px;
}
/*а это на будущее)))) есть теги которым стили не подвласты*/
br{
width:100px;
height:100px;
background:green;
}<!--вот стили для данного тега прописаны в CSS-->
<div>div1</div>
<br/>
<!--вот стили для данного тега прописаны в CSS-->
<div>div2</div>
<br/>
<!--вот стили для данного тега прописаны на пряму в HTML атрибутом style-->
<div style="background:yellow">div3</div>
<br/>
<!--вот стили для данного тега можно прописать с помощью JS-->
<!--JS - 'это JavaScript не путать c JAVA абсолютно два разных языка-->
<div class="div">div4</div>
<script>
document.getElementsByClassName('div')[0].style.background = 'gray';
</script>ответ дан 11 фев 2018 в 7:57
AirAir
14.3k6 золотых знаков32 серебряных знака66 бронзовых знаков
Если вам зачем-то нужен именно атрибут или контейнер (обозреватель древний или движок оформления не поддерживает CSS), можете воспользоваться тегом <font>. Однако:
-
сейчас принято разделять структуру документа и его оформление, поэтому настоятельно рекомендуется перейти на стили при первой же возможности (как указано в других ответах),
-
новые стандарты (HTML5 и будущие) не поддерживают теги, подобные
<font>. Даже HTML4 поддерживает этот тег только в переходной версии (из-за чего в примере ниже пришлось явно прописать необходимый doctype).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title></head> <!-- Тег <title> обязателен -->
<body>
<h1><font color="maroon">Hello, World!</font></h1>
</body>
</html>К слову, <font> позволяет задать цвет не только заголовку, но вообще любому фрагменту текста. Однако он должен быть размещён внутри блочного тега (<hN>, <p> и т. д.). То есть комбинация <h1><font> корректна, а <font><h1> — уже нет (тег заголовка автоматически закроет предшествующий тег).
ответ дан 11 фев 2018 в 8:34
ArhadthedevArhadthedev
11.4k8 золотых знаков39 серебряных знаков69 бронзовых знаков
1
Заголовок сайтаЗаголовок сайта – это то название, которое вы выбрали для своего сайта в момент создания и которое выводится по умолчанию при его просмотре. Заголовок сайта выводится вверху каждой страницы сайта и отличается от заголовка или названия страницы. Как изменить заголовок сайта?
Как скрыть заголовок сайта?
Как изменить цвет заголовок сайта?
Изменение логотипа сайтаЧтобы изменить логотип сайта, выполните следующие действия:
Рекомендуемый размер логотипа: 145 x 52 пикселей. Логотипы других размеров могут отображаться в обрезанном виде либо не отображаться вовсе. |
Изменение языка сайтаНа языке, установленном в настройках, отображается меню сайта, а также другие элементы (например, поисковая строка). Чтобы изменить язык, выполните следующие действия:
Кода HTML, CSS или JavascriptС помощью инструмента «Поле HTML» вы можете добавить на веб-страницы код HTML, CSS или Javascript. Это позволит вам создать сайт Google с уникальным внешним видом и структурой. Например, вы сможете добавить на сайт карусель изображений, персонализированное меню, форму для отправки запроса или виджет на основе jQuery. Функции поля HTML отличаются от функций кнопки HTML на панели инструментов. Кнопка позволяет вносить незначительные изменения в код HTML и встраиваемые стили CSS, но не дает возможности добавлять код Javascript. Добавление кода HTML, CSS или Javascript
Советы по написанию кода с помощью инструмента»Поле HTML»
|
«цвет заголовка» или — как «Задать/изменить цвета заголовков css/html«. С примерами и стилями.
Цвет заголовка h1-h6 по умолчанию
Вообще… мне самому стало интересно, а какой цвет заголовков по умолчанию(я, конечно, предполагаю, что это самый не наесть черный).
Первое, что мы сделаем…
Если мы попробуем узнать — какой цвет заголовка по умолчанию(свойство тегов по умолчанию).
И мы увидим на скрине, что по умолчанию нет никакого цвета у заголовка 
смайлы, что автоматически означает самый черный. Но ведь мы хотим точно узнать!
Узнаем цвет заголовка по умолчанию
Как узнать цвет заголовка по умолчанию? Для этого вам понадобится:
Выбираем любой тег на странице(кроме заголовка).
Если у него нет цвет — задаем цвет.
Слева видим пипетку(она может включаться автоматически).
Теперь наводим на заголовок и кликаем по нему…
Как видим цвет заголовка…
#000000
Что означает — просто черный цвет «black»
Нажмите, чтобы открыть в новом окне.
Изменим цвет в тега заголовка
Как можно изменить цвет заголовка? Как вы наверное знаете, что есть «3 способа css», поэтому далее вам понадобится:
Нам потребуется один из тегов заголовка-пусть это будет h2.
<h1>Здесь текст заголовка h1</h1>
Во внутрь первого открывающего тега добавим attribute style с пусть это будет цвет red
<h2 style=»color:red»>Цвет заголовка</h2>
Далее выведем собранный код:
Видим, что наш цвет заголовка изменился на наш — красный цвет.
Цвет заголовка
Изменение цвета заголовка классом
Вы наверное знаете, что есть некоторые атрибуты с помощью которых мы можем воздействовать на свойства тега.
В нашем случае нас интересует цет заголовка — вам понадобится:
Вам «опять» потребуется один из тегов заголовка-пусть это будет h2.
Про атрибуты я уже сказал — у нас это будет атрибут класса. С произвольным значением пусть это будет «example».
<h2 class=»example»>Цвет заголовка через class</h2>
Далее нам потребуется прописать стили(цвет) — у нас будети происходить изменение цвета заголовка в теге style
<style>
.example{color:red;}
</style>
Выведем весь код:
Код изменения цвета заголовка через атрибут класса:
Html:
<h2 class="example">Цвет заголовка через class</h2>
Css:
<style>
.example{color:red;}
</style>
Пример изменения цвета заголовка через атрибут
Выведем выше приведенный код прямо здесь:
Цвет заголовка через class
Изменение цвета заголовка с помощью id
Один из примеров — «Изменение цвета заголовка с помощью id»
Чтобы изменить этим способом цвет заголовка — вам понадобится:
Опять тег заголовка заголовка-пусть это будет h2.
Добавляем ему id с произвольным значением «color_heading»
<h2 id=»color_heading»>Цвет заголовка через id</h2>
Аналогично нам потребуются стили с измененным цветом заголовка:
<style>
#id{color:blue;}
</style>
Соберем весь код:
Код изменения цвета заголовка через id:
Html:
<h2 id="color_heading">Цвет заголовка через id</h2>
Css:
<style>
#color_heading{color:blue;}
</style>
Пример изменения цвета заголовка через id
Выведем выше приведенный код прямо здесь:
Цвет заголовка через id
1. Как изменить шапку сайта?
В данном шаблоне шапка сайта – это поиск по сайту (в правой части) и надпись названия сайта в левой части. Чтобы изменить название сайта, требуется перейти в Панель управления → Дизайн → Редактор → Глобальные блоки → Верхняя часть сайта. Вам требуется 5 строчка кода:
<!-- <logo> -->Мой сайт<!-- </logo> -->
Где «Мой сайт» – вы можете менять эту часть на любую свою.
Если же вместо текста требуется изображение, просто вместо текста, в таком случае, пропишите код:
<img src="ссылка на логотип">
Где «ссылка на логотип» – здесь вам нужно прописать ссылку (которую вы можете получить, осуществляя:
1) Логотип загружается в файловый менеджер сайта (Панель управления → Инструменты.
2) После загрузки изображения, просто кликните на название изображение – вы получите заветную ссылку).
2. Как изменить цвета блоков?
Для этого вам требуется перейти в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Здесь перейдите к 44 строке кода:
#catmenu,.sidetitle {background:#1ABC9C; position:relative; width:100%; padding:0 10px; margin:0 0 0 -10px;}
#1ABC9C – это и есть цвет блока (фон надписей названия блока). #1ABC9C можете заменить на любой другой цвет html.
Также обратите внимание: в правой и в левой стороне от названия блока – есть прилегающий элемент, там тоже аналогичный цвет, как и в названии блока. Меняется он на 45 строке кода в шаблоне CSS:
#catmenu:before,#catmenu:after,.sidetitle:before,.sidetitle:after {content:'';width:0;display:block; position:absolute; bottom:-10px;height:0;border-top:10px solid #0c9076;border-left:10px solid transparent;}
#0c9076 – это и есть цвет, который можно заменить на свой html-цвет.
3. Как изменить фон сайта?
Изменить фон сайта можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 14 строке кода:
body {background:#eceff3;margin:0;padding:0!important;font-size:13px;font-family:Tahoma,Geneva,sans-serif;color:#5e6d81;}
#eceff3 – фон сайта. Его можно изменить на любой другой html-цвет.
#5e6d81 – цвет текста в шаблоне. Его аналогично можно изменить на любой другой html-цвет.
4. Какой основной цвет сайта?
Основным цветом сайта является #1ABC9C.
Если требуется сменить цветовую гамму, то воспользуйтесь заменой #1ABC9C на любой свой html-цвет, используя замену внутри шаблона Таблица стилей CSS:
Как изменить шрифт заголовка сайта
Наконец, добрались руки, как изменить шрифт заголовка сайта. Не люблю сложных вещей, поэтому всегда все упрощаю, насколько возможно . Предлагаю Вам простой, быстрый и не требующий глубоких знаний html способ изменить шрифт, размер и цвет заголовка Вашего сайта.
Всего три строчки в редакторе, и Вы получите настоящее удовольствие от собственного творчества на сайте. К тому же, если Вы используете бесплатный шаблон, сайт начнет приобретать индивидуальные черты.
Меры предосторожности для тех, кто не уверен
- Для начала определимся? что речь идет о темах (шаблонах) WordPress. Если тема блога установлена на этот движок, то это статья для Вас.
- Если Вы не уверены в своих силах, лучше сначала поэкспериментировать на тестовом поддомене. Убедившись в своей дееспособности, можно перенести навык на основной сайт. Впрочем, действия, которые требуются для того, чтобы изменить шрифт заголовка сайта, настолько просты, что напортачить там сложно. Лично я все всегда сначала делаю на тестовом. Чуть больше времени, но надежнее.
- В случае, если сайт все-таки сломался, читайте, Что делать, если сломался сайт>>. Но, если все делать аккуратно, никаких катастроф не произойдет.
Содержание страницы:
- 1 Как поменять шрифт заголовка сайта
- 2 Инструкция по смене шрифта в заголовке сайта
- 3 Как изменить шрифт заголовка сайта
- 4 Как изменить размер шрифта заголовка сайта
- 5 Как изменить цвет шрифта заголовка сайта
- 6 Что еще можно изменить:
Как поменять шрифт заголовка сайта
В разных шаблонах строчка кода может выглядеть по-разному. Чтобы уточнить, как в вашем шаблоне, изучите статью, как найти код html. Там есть подробное видео, как найти любую строчку кода, — после чего вы сможете вносить практически любые изменения в шаблон своего сайта. Навык освободит вас от необходимости рыться в кодах и развяжет руки.
Если же не разберетесь сами и хотите найти хорошего фрилансера, разбирающегося в кодах, то в статье о дизайне блога есть полезная ссылка, куда обратиться в случае чего.
Инструкция по смене шрифта в заголовке сайта
А если времени разбираться нет, но хочется быстрее На все про все нам понадобится наш сайт и программа word (для подбора шрифта).
- Входим в админпанель своего сайта. Далее, в левом сайдбаре находим Консоль — Внешний вид — Редактор.
- В правой части находим Список стилей (style.css) и открываем его.
- Заголовок сайта — это header h1. Находится ближе к началу. Чтобы не искать глазами, можно нажать Ctrl+F — появится строка поиска. Наберите в поиске. У меня эта часть выглядит так:
Верхний квадрат: строка изменения шрифта.
Нижний квадрат: строка изменения размера шрифта.
Позже мы еще поменяем размер и цвет шрифта, если есть такая необходимость.
Как изменить шрифт заголовка сайта
- Теперь открываем чистый документ Word, копируем на главной странице сайта название и переносим его в вордовский документ, выделяем и начинаем играться с разными шрифтами. Находятся они на верхней панели в левом углу. Почему удобно делать именно в этой программе — потому что сразу видны все изменения шрифта в Вашем названии. Выбирайте шрифт, который будет сочетаться с названием Вашего сайта. Шрифт, который Вам безусловно понравится. Когда выберите, скопируйте в Worde название шрифта.
- Возвращаемся в админпанель сайта. В строку изменения шрифта (на рис. — верхний синий квадрат) вносим название выбранного шрифта вместо того, что стоит по умолчанию.
- Внизу страницы нажимаем «Обновить файл».
- Переходим на сайт и смотрим, хорошо ли встал шрифт в общем контексте. Если нет, возвращаемся в Word и выбираем другой. Все.
Как изменить размер шрифта заголовка сайта
Это делается в том же шаблоне редактора. На картинке выше — второй синий квадрат. Все, что там нужно сделать, это поставить другие цифры — шрифт станет больше или меньше в зависимости от того, какой Вам нужен. Сохраняем изменения, переходим на сайт и смотрим, все ли нас устраивает.
Как изменить цвет шрифта заголовка сайта
Делается это там же. Находится строчка в следующем блоке за тем, где мы меняли сам шрифт и его размер. Выглядит примерно таким образом:
Чтобы подобрать цвет, можно использовать одну из опций темы: Консоль — Внешний вид — Фон. В строке «Цвет фона» можно выбрать цвет, скопировать его буквенно-числовое значение и вставить вместо того, что был (в моем случае #11006а). Изменения сохранить. Переходим на сайт и любуемся.
Итак, чтобы изменить шрифт, цвет и размер, нужно внести изменения всего в 3 строчки редактора. При небольшом навыке занимает очень мало времени.
Красивый, хорошо читаемый заголовок,
сочетающийся с общим духом темы,
сделает Ваш блог более привлекательным и запоминающимся.
Экспериментируйте, выбирайте то, что Вам по душе!
P.S. Когда я вношу даже незначительные изменения в файлы редактора темы, то на всякий случай копирую измененный текст целиком в блокнот — в папку, где хранится zip установленной на моем сайте темы. В том случае, если сайт вдруг сломается и придет необходимость переустанавливать тему, у меня сохранены все измененные на мой вкус файлы. Останется только при переустановке wordpress или темы перенести файлы в соответствующие папки на хостинге.
В следующих статьях, по ходу преобразования моего блога, мы будем так же легко менять цвет фона, шрифты заголовков в рубриках, статьях, цвет ссылок — словом, любых элементов сайта на WordPress.
Предлагаю вашему вниманию видео, «как изменить шрифт заголовка» и не только:
httpv://www.youtube.com/watch?v=ps21mlQW8Xs
ВАЖНОЕ ДОПОЛНЕНИЕ. Когда вы работаете с html и вносите изменения, часто возникает такая проблема: вы переходите на свой блог и видите, что все осталось по-прежнему. Прежде чем паниковать, очистите кэш своего браузера. Если пользуетесь Google Chrome, то подробное объяснение, как это сделать, в статье «Как очистить кэш в google chrome»
Что еще можно изменить:
Заголовок поста
Home на Главную
Тег «Читать далее»
https://opartnerke.ru/kak-izmenit-shrift-zagolovka/как изменить шрифт заголовка сайтаhttps://opartnerke.ru/wp-content/uploads/2012/09/nazvanie_saita.jpghttps://opartnerke.ru/wp-content/uploads/2012/09/nazvanie_saita-150×150.jpg2020-01-13T20:39:30+06:00АлександрИнтернетhtml,дизайнНаконец, добрались руки, как изменить шрифт заголовка сайта. Не люблю сложных вещей, поэтому всегда все упрощаю, насколько возможно . Предлагаю Вам простой, быстрый и не требующий глубоких знаний html способ изменить шрифт, размер и цвет заголовка Вашего сайта. Всего три строчки в редакторе, и Вы получите настоящее удовольствие от собственного творчества на…АлександрАлександр alksandr1973@gmail.comAdministratorОбзоры смартфонов и интернет сервисов
Шапка страницы
Основная сложность с резиновым макетом это обеспечить корректное отображение на разных разрешениях, от высокого до низкого. Поскольку мы ограничили ширину контента 760 пикселами, картинку в шапке стоит разместить так, чтобы более важная часть изображения вписывалась в этот размер. На рис. 6.3 показано, как это сделать. Тёмным цветом выделена центральная часть шириной 760px, буквой А обозначены одинаковые по ширине оставшиеся фрагменты.
Рис. 6.3. Ширина шапки
Само добавление картинки в шапке делается через фоновый рисунок, который необходимо выровнять по центру элемента <header> .
В идеале рисунок должен иметь большую ширину от 2000 пикселов, тогда практически при любом разрешении монитора рисунок будет показывать центральную часть, обрезая всё, что не помещается в окно. Но беда в том, что изначально картинка не настолько широкая, а рисовать бесконечно тянущиеся по бокам чёрные полоски не хочется. Один из вариантов решения это включить повторение фона по горизонтали. Те, у кого разрешение 1280 пикселов по ширине и меньше, увидят единственную картинку, а владельцы широких мониторов смогут полюбоваться сразу несколькими животными и одновременно заходящими солнцами. Здесь важно подредактировать рисунок так, чтобы он без стыков совмещался сам с собой по горизонтали (рис. 6.4). Градиент для наглядности спрятан.
Рис. 6.4. Совмещение изображения по горизонтали
На данном рисунке место стыка обозначено стрелкой и промежутком, чтобы стык можно было заметить. Если правильно отредактировать правую и левую часть фоновой картинки, то она будет повторяться по горизонтали без видимых стыков, как один сплошной рисунок. Остаётся слегка подправить стиль, заменив значение no-repeat (без повторения) на repeat-x (повторение по горизонтали).
На этом можно считать, что фоновый рисунок в шапке готов (рис. 6.5).
Рис. 6.5. Фоновая картинка для шапки
В формате PNG-24 файл с фоном размером 1325х405 пикселов занимает около 32 Кб, а в PNG-8 с 256-цветовой палитрой, где качество градиента несколько хуже — около 15 Кб. Можно разбить фон на две составные части — градиент и картинку и сохранить каждое изображение в своём формате, что должно привести к повышению качества отображения градиента. Впрочем, 32 Кб для столь большого изображения это немного и дополнительную оптимизацию кто-то посчитает «экономией на спичках». Тем не менее, альтернативный подход к созданию шапки сайта кому-то окажется полезным, а при желании вы можете его пропустить.
Оптимизация шапки
Поскольку градиент в шапке повторяется по горизонтали, его можно вырезать из макета и установить как фоновую картинку. На рис. 6.6 показан градиент высотой 405 пикселов, подготовленный для этой цели. Формат PNG-24 не вносит искажения в изображение, а градиенты хорошо сжимает (итоговый объем 402 байта), так что в этом случае однозначно следует использовать именно его. Рамка вокруг рисунка добавлена для наглядности.
Рис. 6.6. Градиентный рисунок (header-gradient.png)
Картинка с силуэтными животными делается на прозрачном фоне и высотой 198 пикселов, нет смысла делать её на всю высоту шапки, поскольку она занимает лишь часть. Фрагмент изображения показан на рис. 6.7. Шахматное поле означает прозрачность.
Рис. 6.7. Фоновая картинка с прозрачностью (header-animal.png)
Поскольку сохранение этой картинки идет в формате PNG-8, у которого только один уровень прозрачности, в отличие от 256 уровней формата PNG-24, важно обеспечить корректное наложение на градиентный фон. Для этого при сохранении в Photoshop-е надо указать цвет краёв (Matte) близкий к средней части градиента, где идёт наложение силуэта. Примерно это цвет #9de1f0. В этом случае не возникнет грязных контуров вокруг деревьев и животных, а картинка при наложении на градиент будет восприниматься как единое целое.
Два рисунка для фона шапки подготовлены, пишем код HTML.
И стиль для элемента <header> и слоя header-bg .
В итоге объем файлов оказался 12,5 Кб, что даже меньше ожидаемого.
Название сайта
Название написано на облаке с растушёванными краями, что должно создать трудности при наложении на градиент. Есть два способа, как их обойти.
- Использовать формат PNG-24 при сохранении прозрачности.
- Сохранить рисунок в формате GIF или PNG-8 с фрагментом градиента, а затем наложить рисунок на градиент так, чтобы совпадение было с точностью до пиксела.
Очевидно, что второй способ имеет ряд недостатков — изображение нельзя сдвинуть даже на пару пикселов, оно привязано к градиенту, и если его градиент изменить, придётся менять и картинку. Так что сохраняем заголовок в формате PNG-24. Код HTML останется прежним, а стили расширятся.
Выравнивание по центру делается через свойство text-align , добавляемое к родителю тега <img> , а сдвиг вниз через свойство top . Чтобы это свойство сработало, необходимо для картинки задать относительное позиционирование с помощью свойства position со значением relative .
На главной странице сайта картинка с названием выводится как обычно, на остальных страницах она служит ссылкой на главную страницу. Для этого достаточно слегка изменить код:
Значение / у атрибута href указывает на главную страницу и работает только на веб-сервере, но никак не локально.
Как изменить шапку сайта (часть 1)
На фриланс-биржах, заказчики часто просят, изменить дизайн какого-нибудь фрагмента сайта, например шапки. Самый простой способ изменить шапку сайта, так это создать её с нуля. Почему я так считаю? Пожалуйста, будут и аргументы.
Когда я открываю исходный код чужого сайта, то за редким исключением, вижу неструктурированный HTML код, непоследовательно написанный CSS и почти нет комментариев. Ориентироваться в таком хаосе, очень сложно и я понимаю, что мне быстрее сделать все заново.
Такой бардак происходит на сайтах, сделанных непрофессионально, поэтому и обращается заказчик с такими шедеврами к фрилансерам. Грамотно сделанные сайты, редко переделывают, потому вероятность наткнуться на плохо сделанный сайт, очень высока.
Специально для этой статьи, я сделал скриншот одной чудесной шапки, случайно найденной в интернете, у какого-то сайта и буду её улучшать, подробно описывая весь процесс.
У данного творения просматривается явная нехватка места для всех элементов. От такого плотного соседства элементов и отсутствия пустого пространства, глаза собираются в кучу. Надо разрядить пространство, за счёт создания нового ряда для контактной информации.
Что бы я изменил в дизайне?
- Шрифт и цвет у логотипа
- Размер и цвет остального шрифта
- Убрать зеленую полосу
- Блок с контактами разместить на верхней панели
Между тегами head в HTML файле:
//прописываем мета тег для адаптивности
<meta name=»viewport» content=»width=device-width, initial-scale=1″>
//подключаем другие шрифты
<link href=»https://fonts.googleapis.com/css?family=Forum|Roboto+Slab:400,700″ rel=»stylesheet»>
//подключаем библиотеку Font Awesome
<link rel=»stylesheet» href=»https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css»>
//подключаем внешний файл стилей, сюда будем писать стили
<link rel=»stylesheet» href=»style.css»>
//скачиваем и подключаем файл нормализации стилей
<link rel=»stylesheet» href=»normalize.css»>
Делать верстку мы будем на flexbox.
Первый ряд – панель с контактами (top header).
HTML разметка
В блок-контейнер с классом top-header, поместим три флекс-элемента – абзацы с текстом.
<div >
<p>Массажный салон для вашего здоровья и красоты</p>
<p><span >Tel.</span> (+372) 5514704, 58079045</p>
<p><span >Инфо и запись:</span> ежедневно с 9:00 до 21:00</p>
</div>
CSS стили
Инфоблоки встанут в ряд благодаря display: flex. Свойство space-around равномерно распределяет пустое пространство между инфоблоками. Однопиксельная серая рамка, визуально разграничит верхнюю панель от самой шапки.
/* Флекс контейнер для верхних инфо-блоков */
.top-header display: flex;
justify-content: space-around;
padding: 5px;
font-size: 100%;
border-bottom: 1px solid #efd0d0;
position: relative;
>
Выделим некоторые слова зеленым цветом.
/* Зеленый цвет у текста инфо-блоков */
.top-header .green color: #b2db41;
font-weight: bold;
>
Временно подсветим красной и черной рамками, чтобы было ясно, где флекс-контейнер, а где флекс-элементы.
Второй ряд – шапка (header)
Слева направо, первым идет логотип, а затем навигационное меню.
HTML код
Начинается с открывающего тега header, внутри которого блок с логотипом. Логотип вставляется, как ссылка, ведущая на главную страницу.
CSS код
/* Флекс контейнер для шапки */
header display: flex;
justify-content: space-around;
padding: 5px;
border-bottom: 5px solid #b2db41;
>
/* Стили для всех ссылок внутри флекс контейнера */
header a display: block;
color: #212121;
padding: 12px;
text-decoration: none; /* убирает подчеркивание */
font-size: 100%;
text-shadow: 0 1px 0 #fff;
border-radius: 4px;
>
Здесь мы указываем относительную ширину блока под логотип, значит остальные 70%, будет занимать навигация. Задавая проценты, можно точнее распределять детей-элементов в контейнере-родителе.
/* Ширина дочернего блока под логотип */
.wrap-logo width: 30%;
>
Задавая размеры шрифта в %, мы заботимся о супер больших экранах, ведь пиксели жестко задают размер.
/* Стилизация логотипа */
.wrap-logo #logo font-family: ‘Roboto Slab’, serif;
font-size: 200%;
font-weight: bold;
>
Логотип смотрится свежее, если его сделать двухцветным.
/* Зеленый цвет у части логотипа */
.wrap-logo span color: #b2db41;
>
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Как задать цвет заголовку?
Подскажите, какой контейнер или атрибут тега задает цвет заголовку?
Чтобы задать цвет — color .
Обратите внимание на ответ @entithat, на такой способ внесения стилей, это один из способов, он тоже верный. Также можно внести изменения в стили с помощью JavaScript.
Если вам зачем-то нужен именно атрибут или контейнер (обозреватель древний или движок оформления не поддерживает CSS), можете воспользоваться тегом <font> . Однако:
сейчас принято разделять структуру документа и его оформление, поэтому настоятельно рекомендуется перейти на стили при первой же возможности (как указано в других ответах),
новые стандарты (HTML5 и будущие) не поддерживают теги, подобные <font> . Даже HTML4 поддерживает этот тег только в переходной версии (из-за чего в примере ниже пришлось явно прописать необходимый doctype).
К слову, <font> позволяет задать цвет не только заголовку, но вообще любому фрагменту текста. Однако он должен быть размещён внутри блочного тега ( <hN> , <p> и т. д.). То есть комбинация <h1><font> корректна, а <font><h1> — уже нет (тег заголовка автоматически закроет предшествующий тег).
Здравствуйте, такая проблема уже сил нет гуглить.. Я новичок в верстке, делаю себе сайт на wordpress путем редактирования готового шаблона. Вопрос: Как частично поменять цвет текста в названии сайта ? (если такое возможно) Целиком текст поменять не проблема но вот что бы частично сделать слова разноцветными никак не получается, не могу найти файл где находится div с текстом что бы можно было отредактировать и добавить туда css.
При добавлении кода span style=»color между словами, напрямую в поле где пишется название сайта, код просто не работает а отображается как название. А вот &nbsр; в место пробела работает и не отображается в названии.
-
Вопрос заданболее двух лет назад
-
267 просмотров
Пригласить эксперта
Частично разноцветный текст можно сделать при помощи span тегов, как вы указали в вашем вопросе. Соответственно, найти шаблон и отредактировать его. Подсказка — ищите файл header.php лого редактируется либо там, либо этот файл приведет вас куда нужно.
Также можно реализовать при помощи js. Условно говоря после загрузки страницы найти блок выводящий лого, разделить слова в массив и применить к нему стили
-
Показать ещё
Загружается…
10 февр. 2023, в 23:29
5000 руб./за проект
10 февр. 2023, в 23:26
6000 руб./за проект
10 февр. 2023, в 23:18
10000 руб./за проект