Как сделать стили для сайта
Как сделать стили для сайта
Рассмотрим практичный пример с
Преобразуется на странице в следующее:
Выше разобранный пример можно сделать по-другому (не используя class):
Результат будет таким же как и предыдущий пример.
В чем же тогда разница? Давайте проведем сравнение. Допустим, у Вас есть на сайте 50 страниц (это считается маленьким сайтом). На всех 50 страницах у Вас для какого-то текста в тегах прописано style =» color: blue; font-size:12px; font-family:Arial «. Теперь представим такую ситуацию, что синий цвет Вам больше не по душе и Вы захотели сменить его на черный. В этом случае Вам нужно будет редактировать 50 страниц. Но 50 страниц это ещё не так уж и много. Тем не менее это все равно лишняя работа, которую можно было не делать. Поэтому я советую пользоваться классами ( class =» какой-то класс «). В этом случае Вам бы пришлось поменять всего лишь в одном месте цвет и на всех страницах бы все поменялось.
Задание стилей для вложенных тегов
Если мы используем вложенные конструкции (иерархию тегов), то стиль нужно задавать напрямую. Например:
Таблица стилей CSS
Чтобы упростить работу со стилями, создают специальную «таблицу стилей CSS«, которая представляет из себя просто сборник стилей. Подключается она с помощью тега link в теге head
В данном случае таблица стилей (назовем её style.css ) должна содержать следующее:
Теперь вернемся к первому примеру, который можно сделать более универсально, подключив в заголовке таблицу стилей.
Плюсы при использовании таблицы стилей
Использование стилей html через ID
Для использования ID, код html страницы должен содержать примерно следующее:
Вместо параметра class нужно написать id, в остальном все также. Также можно использовать и вложенные конструкции. Как правило, id не используют для описание стилей.
Теперь расскажу о том, какие аргументы можно задавать в стилях. Их довольно много.
Аргументы и свойства в style
1. Свойство background: цвет — задает цвет фона. Цвет можно выбрать любым. Цвет может быть задан в виде шестизначного кода (например, #53A32B; ) или конкретное название цвета (например, red ). Выбрать подходящий цвет можно на странице: коды и названия html цветов.
Более подробно про фон читайте в отдельной статье: как сделать фон для сайта.
2. Свойство background-image: url(‘images/bg.png’); — фоном будет картинка. В скобках указывается адрес фона изображения.
3. Свойство background-repeat: repeat — использовать фоновую картинку многократно. Другие возможные параметры:
4. Свойство border: 1px solid red; — вся область объекта будет в красной рамке, ширина которой 1 пиксель. Возможны и другие параметры вместо solid:
Цвет и размер области рамки можно изменять. Цвет можно задавать в формате #XXXXXX или писать название цвета. Выбрать цвет можно на странице коды и названия html цветов
Рамку можно задавать избирательно, т.е. только с тех сторон, где это нужно:
Можно совмещать эти параметры, т.е. сделать линию только слева и снизу. Более подробно про задание границ читайте в специальной статье: свойство css border
5. Свойство color: #fc0ab1; — задает цвет текста. Цвет можно выбрать любым. С этим аргументом Вы уже были знакомы.
6. Свойство font-family: value; — задает шрифт текста. Существует очень много различных шрифтов. Например, самые распространенные шрифты:
Более подробно про шрифты и их выбор читайте в статьях:
8. Свойство font-weight: value; — задает толщину текста (насыщенность). Возможные значения:
Можно толщину задавать цифрами: 100, 200, 300, 400, 500, 600, 700, 800, 900. Более подробно читайте в статье: свойство CSS font-weight
14. Свойство width: 100%; — задает ширину. Можно задавать в %, а можно в пикселях (px).
15. Свойство overflow: value; — область видимости содержания блочного элемента, которое не помещается в нем. Возможные значения параметра:
Более подробно читайте в статье: свойство CSS overflow
16. Свойство text-align: value; — выравнивание текста. Возможные значения параметра:
Более подобно читайте в статье свойство CSS text-align
17. Свойство float: value; — определяет сторону, по которой будет выравниваться какой-то элемент, а остальные элементы будут обтекать его с других сторон. Возможные значения параметра:
18. Свойство line-height: 22px; — устанавливает межстрочный интервал в пикселях. Более подробно про растояние между строками читайте в статье свойство CSS line-height
19. Свойство white-space: value; — задает отображение между пробелами. Возможные значения:
Более подробно читайте в статье: свойство CSS white-space
20. Свойство display: value; — определяет способ показа элемента. Имеет довольно много параметров:
Более подробно читайте в статье: свойство CSS display
21. Свойство text-decoration: value; — опция для редактирования внешнего вида текста. Имеет несколько параметров:
Более подробно читайте в статье: свойство CSS text-decoration
22. Свойство text-transform: capitalize; — преобразование текста в заглавные или прописные буквы.
Более подробно читайте в статье: свойство CSS text-transform
23. Свойство letter-spacing: 2px; — задает расстояние между буквами. Более подробно читайте в статье: свойство CSS letter-spacing
Уважаемый читатель, теперь Вы имеете представление о стилях в html. Вы можете делать Ваши странички более красивыми. Рассмотренные выше возможности стилей являются поверхностными и для профессионального использования Вам понадобятся более глубокие знания. В следующих уроках мы рассмотрим самые важные из этих тегов во всех подробностях. Теперь советую перейти к следующему уроку.
Css стили для сайта: как их правильно подключать и писать
Дата публикации: 2016-03-04
От автора: здравствуйте, уважаемые читатели портала webformyself. В сайтостроении огромное значение имеет оформление веб-ресурса. Именно за это отвечает язык css (каскадные таблицы стилей), о котором мы сегодня и поговорим. А точнее, о его подключении и использовании. Рассмотрим некоторые css стили для сайта, которые используются при оформлении веб-страниц.
Подключение css
Сегодня едва ли вы где-то найдете веб-страницу, которая была бы создана чисто за счет возможностей html. В самом деле, внешний вид подобных сайтов был бы просто ужасным, поэтому, когда готова разметка нужных элементов, их тут же нужно оформлять, а это делается с помощью css в отдельном файле.
Нужно сказать, что вообще существуют также возможности включения стилей в html-файл. Например, их можно определить с помощью атрибута style или такого же тега. Это называют встроенными стилями. Такой подход сегодня не приветствуется и нарушает современные стандарты разработки.
А как же сделать правильно, спросите вы? Для этого нужно создать новый файл с расширением css, а затем подключить его к html. Это делается очень просто с помощью тега link, который и отвечает за подключение внешних файлов. Делается это так:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Тег является одинарным, как вы уже поняли. Немного подробнее расскажу о его атрибутах:
rel = «stylesheet» – вообще атрибут rel записывается для того, чтобы определить роль файла на странице. В нашем случае роль – это таблица стилей, что и указывается.
type = «text/css» – так называемый MIME-тип, который обычно указывается всем подключаемым файлам, чтобы браузер правильно их интерпретировал. В современных веб-обозревателях можно не писать этот атрибут.
href = «style.css» – стандартный атрибут, указывающий адрес нашего внешнего файла. В данном случае он записан исходя из того, что файл имеет название style, расширение css и находится в той же папке, что и html-документ.
Как видите, в подключении css-файлов у вас будет меняться только атрибут href, все остальное менять не нужно. К странице можно подключать сколько угодно таблиц стилей, но оптимальным считается не более 2-4, потому что слишком много запросов к серверу это тоже не очень хорошо.
Где взять готовые css стили для сайта?
Ну ладно, с подключением, я надеюсь, все более менее понятно. Но ведь вы создаете пустой файл, и чтобы от его добавления был виден эффект, нужно либо самому написать правила, либо взять их откуда-то.
В сети, например, очень много бесплатных html-шаблонов. Есть скачать любой из них, то внутри обязательно будет и готовая таблица стилей с нужными правилами для оформления сайта. Но корректно работать она будет только для своего же html-документа. Дело в том, что эти два языка связываются с помощью так называемых селекторов.
Селектор – это особенность языка css, присущая только ему. Зачем они нужны? Ну вот представьте такой код:
Установка собственных стилей для любого сайта
Со мной довольно часто случается так, что шрифты, цвета шрифтов и другие особенности некоторых сайтов неудобны для чтения с монитора. Обычно это очень мелкие шрифты — на зрение не жалуюсь, но читать текст с экрана монитора привык с расстояния сантиметров 70-80 (22″), откинувшись на спинку кресла. В большинстве случаев спасает ctrl+ / ctrl-, конечно частенько полученный результат выглядит мягко сказать не очень, но для чтения сгодится, особенно когда на сайте мы первый и возможно последний раз. А вот что делать, когда сайт мы посещаем постоянно и результат хочется более приятный для глаз?
Решение, которое пришло мне в голову первым (не самое совершенное): у меня для тестов на компьютере постоянно живет nginx, в лоб прописал я для него проксирующую конфигурацию, /etc/hosts habrahabr.ru как локальный адрес, но для некоторых файлов стилей подсовывал свои правленые файлы, для полноты картины вот конфигурация nginx:
Все отлично работало, но добавлять новый сайт не очень удобно, вполне терпимо но что-то смущало, тем более хотел поделиться решением.
Тогда я решил написать Extension (предварительный поиск результатов не дал) для хрома/хромиума т.к. пользуюсь им. Посмотрел статьи, доки, вроде ничего сложного справлюсь быстро. Иду в стандартную папку проектов, придумываю название для проекта mystyle и тут меня что-то торкнуло, забил это название в google дописав chrome extension. И о чудо оно есть, именно то, что нужно, но называется my-style. Дальше все очень просто, устанавливаем данное расширение, заходим на нужный сайт, нажимаем ctrl+m, справа появляется окно для дописывания своих стилей сайту, которые сразу применяются и сохраняются. Profit!
Любой сайт мы можем заставить выглядеть приемлемым для себя образом. Конечно, чтобы прописать свои стили нужны некоторые начальные знания css, но мы ведь на IT-ресурсе, если своих знаний не хватает, товарищи с соответствующими навыками наверняка найдутся рядом.
Немного моих стилей для habra:
К примеру вот как выглядел у меня хабр до изменений:
Масштаб 100%: 
Масштаб 175%: 
Т.е. шрифты сохраняют свое абсолютное мелкое значение.
Сейчас, масштаб 100%: 
Спасибо за внимание. Надеюсь был полезен.
Данная статья не подлежит комментированию, поскольку её автор ещё не является полноправным участником сообщества. Вы сможете связаться с автором только после того, как он получит приглашение от кого-либо из участников сообщества. До этого момента его username будет скрыт псевдонимом.
Базовые CSS-стили различных элементов
В этом топике представлены лаконичные базовые стили для различных элементов: кнопок, ссылок, форм, теней, градиентов, которые можно использовать в своих проектах. Да и просто разобраться в принципах работы таких конструкций проще на несложных примерах.
Базовая конструкция
В примерах базовая конструкция блока выглядит так:
Блок отбрасывает тень в разные стороны:
Выделение блока тенью:
Градиенты
Разные типы градиентов:
Закругленные углы
Ссылки
Несколько примеров стилей для ссылки в тексте:
Ссылка в Metro-стиле:
Input
Добавляет border-radius по клику:
Повторяет iOS инпуты:
Вместо формы ввода просто линия:
Редакторский дайджест
Присылаем лучшие статьи раз в месяц
Скоро на этот адрес придет письмо. Подтвердите подписку, если всё в силе.
Похожие публикации
Введение в CSS Regions
CSS хаки
Динамический CSS?
Вакансии
AdBlock похитил этот баннер, но баннеры не зубы — отрастут
Минуточку внимания
Комментарии 54
В БЭМ кстати нет упоминаний про такую запись селекторов атрибутов!
Какие? Какие аргументы? Ссылка на блог яндекса? Там и упоминаний то нет касательно темы нашего спора.
Для себя я давно решил, что при грамотном использовании ни универсальный селектор, ни селекторы атрибутов не несут никакого вреда. Всё остальное — домыслы и предрассудки.
То, что описано по вашей ссылке marow.net/archives/95 и запись div[class*=«embossed»] — это совершенно разные вещи. В вашей статье всё написано верно, но это никак не относится к данному селектору.
ИМХО этот селектор работает медленно, потому что по нему невозможно построить индекс. Этот запрос аналогичен запросу в MySQL LIKE ‘%embossed%’. Хотя я свято верю, что по классам индекс построен.
Простой спид-тест: выборка 1000*N раз сделать селектор div[class*=«embossed»] и div.embossed мне показывал разницу в три раза на небольшом DOM-дереве.
Для однократной отрисовки страницы это не страшно.
Однако если ваше js — приложение использует такие же селекторы — это уже может сказаться.
ну если уж сильно захотеть… то можно как так попытаться, для всего что ниже лайтбокса
В хроме работает, возможно только в нем
Никому не советую так выделять ссылки, только андерлайном. Пунктирной линией лучше обозначать текстовые кнопки, работающие на скриптах и не перекидывающие пользователей на другие страницы.
Статья хорошая, спасибо, но все-таки выскажусь. Я видел большое количество сайтов с качественными примерами, и все они говорили, что облегчают мой труд как верстальщика, но написать что-то используя css3 я могу и сам, от таких сайтов, обычно, я жду готовый реализаций для браузеров >IE7, так как именно на это я трачу огромное количество своего времени, именно этот код я не хочу писать ручками, а хочу скопировать.
Так и в этой статье. Я увижу элемент на макете и сверстаю его на css3, но потом мне напомнят про IE, и я буду ныть, но вяло верстать тоже самое, но другими способами.
Соглашусь с выше сказанным и повторю забудьте:
div[class*=»embossed»]
Использовать Bootstrap хорошо тогда, когда проект верстается с нуля. А если проект на поддержке или пришел ко мне от другого верстальщика?
Ребята не парятся, но это ребята.
Реалии таковы, что производительность влияет на показатель отказов.