Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

Подключить css: Способы добавления стилей на страницу

Содержание

Как подключить CSS к HTML

Каскадные таблицы стилей — это неотъемлемая часть современного web-сайта. Поэтому, вебмастер обязан знать как подключить CSS к документу HTML.

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

Как подключить внешние стили из файла «CSS»

На моем сайте насчитывается порядка 5 000 строчек стилей. Грузить такой объем при формировании каждой страницы, не правильно. К тому же, этот процесс ресурсозатратен, что, безусловно, скажется на скорости открытия сайта.

Вероятно думаете: «А как правильно подключать стили?» Все очень просто, таблицу стилей следует подключать из внешнего файла CSS.

Файл со стилями, имеет расширение .css. Его, конечно, можно размещать в любом месте на ftp, но обычно, подобные файлы помещают в папку «CSS», расположенную внутри файлов шаблона.

Чтобы подключить внешний файл CSS, нужно в коде сайта, между тегами «head», добавить строчку:

<link rel="stylesheet" type="text/css" href="css/style.css">

где «style.css» — это имя подключаемой таблицы, а «css», папка в которой находятся эти стили.

Приведу простой пример, стандартной страницы web-документа:

<!DOCTYPE HTML>
<html>

<head>
<meta charset="utf-8">
<title>Подключаем стили CSS из файла</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
....
</body>

</html>

Важное добавление!! Атрибут href может принимать как абсолютный, так же и относительный путь к файлу.

Это означает, что две приведенные ниже строчки, будут абсолютно одинаково работать.

  1. Абсолютная ссылка. Явно указывает на расположение файла.
<link rel="stylesheet" type="text/css" href="http://yousite.ru/template/css/style.css">
  1. Относительная ссылка. Сокращенный вариант.
<link rel="stylesheet" type="text/css" href="/css/style.css">

Главный файл стилей, принять называть «style.css», но это не значит что других названий быть не должно. Придумывайте любое имя, но не забывайте, что оно должно быть на латинице.

Рассмотренный способ наиболее удобен, таким образом можно подключить не один, а сразу несколько таблиц стилей.

Подключение стилей через тег «Style»

Стили можно подключать непосредственно на странице web-сайта. Между тегами head, добавьте тег style. Внутри этого тега, можно применить стили к именно той странице, на которой они выводятся.

Практически это выглядит следующим образом:

<style>
p {
   line-height:2em;
}
</style>

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

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Как подключить таблицу стилей на странице</title>
<style>
p { line-height:2em; }
</style>
</head>

<body>
....
</body>
</html>

Подключение встроенной таблицы стилей

Атрибут style, добавленный к определенному элементу разметки сайта, позволит подключить стили css только для этого элемента.

Покажу как это выглядит в тексте:

<div>Подключаем встроенную таблицу стилей.</p>

Стиль, будет применен только для данного блока div и раскрасит текст в заказанный цвет.

Этот способ отлично подходит при создании красивых таблиц в документе, как например вот эта.

Как подключить один css в другой css файл

В заключении, хочу рассмотреть способ, в котором будем подключать в основном файле css, дополнительный.

  1. Откроем файл «style.css».
  2. Добавим код @import url "/css/blt.css";.
  3. Сохраняем изменения.

Следовательно, при помощи @import, мы можем подключить таблицу стилей из другого файла css. В данном случае, в теле основного файла стилей, подключаем «blt.css», который находится в папке «css».

Кроме того, аналогичным способом, можно подключать внешние стили и в теге «Style». Будет выглядеть так:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Как подключить один css в другой css</title>

<style>
@import url("/css/blt.css")
p { line-height:2em; }
</style>

</head>
<body>
....
</body>
</html>

Таким образом мы рассмотрели самые лучшие способы как подключить CSS к HTML. Если вы хотите добавить свой вариант, пишите его в комментариях.

Загрузка…

React css — компонентый подход

Всем привет. В этом уроке мы разберем как работать с стилями в react.

Если мы посмотрим в index.js файл, то увидим, что там импортируется index.css. То есть в javascript можно импортировать css. Это делается при помощи webpack лоадера, который специальным образом обрабатывает все файлы с расширением .css.

Давайте добавим в index.css у body

background: green

Как мы видим, в браузере фон поменялся на зеленый. Если мы посмотрим в head нашей страницы, то увидим, что у нас добавился элемент style с стилями внутри. Обратите внимание, что когда мы меняем стили, страница не перегружается. Это происходит потому, что внутри react-create-app настроен hot-reloader, который позволяет многие действия применять без перезагрузки страницы. Это очень удобно, так как позволяет быстро пробовать различные стили и елементы.

Как же мы с вами можем структурировать стили этого проекта?

  1. В index.css пишем глобальные стили
  2. Под каждый компонент пишем стили для каждого компонента отдельно

Давайте попробуем

Создадим App.css и импортируем его в App.js

import './App.css';

Для того, чтобы задать елементу в react класс, используется специальный атрибут className. Например, мы можем в className задать строку container. И эта запись конвертируется в обычный класс в html, который будет искать у нас .container. Если мы напишите атрибут class, то он работать не будет. Это очень часто бывает у людей, которые только начинают знакомиться с реакт.

<div className="container">
  <RegistationForm />
</div>

И добавим стили в файле App.css к классу container.

.container {
  width: 700px;
  border: 1px solid red;
  margin: 0 auto;
}

Как мы видим, я неправильно указал импорт App.css. Нам нужно указать relative путью

Как мы видим в браузере все стили применились, но они глобальные. То есть написав класс container в двух разных файлах и примените к ним стили, мы перетрем стили одного из них.

Ну и напоследок давайте применим какие-то стили к вложенному компоненту RegistationForm. Мы, естественно, не хотим их писать в App.js, поскольку это будет тогда не внутри формы регистрации. Мы хотим ее переиспользовать сразу с стилями. Создаем новый файл RegistationForm.css и добавляем классы к инпуту и к button.

  <input
    type="text"
    placeholder="E-mail"
    value={this.state.email}
    onChange={this.handleEmailChange}
    className="emailField"
  />
  <button className="submitBtn">Save</button>

Импортируем цсс файл к нашей компоненте

import './RegistationForm.css';

Добавляем стили для инпута и кнопки.

.emailField {
  width: 300px;
  height: 40px;
  display: block;
  border-radius: 4px;
  margin-bottom: 10px;
}

.submitBtn {
  width: 300px;
  background: green;
  height: 50px;
  border: 0;
}

Теперь если мы посмотрим в браузер, мы видим, что все наши стили применились. И единственный вопрос, что же будет с стилями для продакшена.
Так как у нас все стили находятся в head, и это подойдет не всем. Для продакшена многие люди хотят отдельный файл css в котором все стили минифицированы. Это абсолютно нормально, потому что create-react-app позволяет билдить наш продакшен командой

npm run build

То у вас в папке build/static будет лежать 2 файла css и js. Оба файла минифицированы. У нас также есть файл index.html, в который подключены эти файлы. Все что вам остается после билда — это засунуть эти файлы в проект на сервере.

Как подключить CSS — способы подключения. Основы CSS для начинающих. Урок №3

Главная » Основы CSS » Как подключить CSS — способы подключения. Основы CSS для начинающих. Урок №3

Как подключить CSS — способы подключения. Основы CSS для начинающих. Урок №3

Всем привет!
В этом уроке я расскажу о способах подключения CSS файла к HTML. Существует 3 способа подключения CSS файла. Спросите, зачем вам знать именно 3 способа? Отвечу, что нужно, потому что бывают случаи, когда необходимо использовать как раз все эти 3 способа подключения.

○ Способ №1 – «Таблица связанных стилей»

Все стили хранятся в одном файле с расширением «.css».
Если связать все HTML файлы веб-страниц с таким CSS файлом, то при изменениях стили страниц (цвет, фон, размер шрифта и т.д.) будут изменяться во всех HTML документах, связанных с CSS файлом.
Схематично это выглядит так:

Чтобы связать HTML документ с CSS файлом, добавьте между тегами <head> специальный тег <link>.
* Закрывающий тег не нужен

<link rel="stylesheet" type="text/css" href="style.css">

href – прописываем путь к  css файлу. В примере выше файл «style.css» находится вместе с остальными HTML файлами в одной директории.
Разберём способ №1 поэтапно и практично от «а» до «я»:

1 этап — создать файл «style.css»

Давайте попробуем на практике создать файл «style.css».
Откройте блокнот, который есть у вас на ПК.
Кнопка «Пуск» =>  «Все программы» => «Стандартные» => «Блокнот»:

В открывшем блокноте нажмите в меню сверху «Файл» => «Сохранить как…»:

Далее укажите место, куда вы хотите сохранить файл, лучше файл разместить вместе с остальными HTML файлами.

В поле «Имя файла» напишите «style.css», а не просто style (это важно!). Таким способом мы создаем файл с расширением «*.css». Далее нажмите на кнопку «Сохранить»:

Вот такая должна получиться общая картина:

Вот и все, файл «style.css» был создан.
Можете вставить в файл «style.css» вот это правило для тега <h2> и сохранить:


h2
{
font-size: 150px; /* Размер шрифта */
color: #cc0000 /* Цвет текста */
}

В HTML файле вставьте вот этот код:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример подключения таблицы CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>Заголовок</h2>
<p>Текст</p>
</body>
</html>

В результате должно получиться вот такое:

Этот способ поможет делать изменения внешнего вида всего сайта, изменяя только правила в одном файле «style.css». Припустим, меняем цвет и размер для заголовка в «style.css», то на всех 1000 страницах произойдет одновременное автоматическое изменение. На чистом HTML, без CSS, пришлось бы эти изменения делать отдельно на каждой странице из 1000. Ужас!!! 

○ Способ №2 – «Таблицы глобальных стилей»

Этот способ тоже применяется и я уверен, что вы с ним столкнетесь.
Для подключения такого способа CSS стилей достаточно прописать между тегами <head></head> тег <STYLE>.
* Закрывающий тег обязателен

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

Можно и так:

<style></style>

Между тегами <style></style> прописываются необходимые CSS правила для веб-страницы.
Минус такого способа в том, что эти стили будут только для одной страницы, где размещены эти стили.

Пример:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример подключения таблицы CSS</title>
<style>
h3
{
font-size: 150px; /* Размер шрифта */
color: #cc0000 /* Цвет текста */
}
</style>
</head>
<body>
<h3>Заголовок h3</h3>
</body>
</html>

Результат:

В примере выше я изменил размер и цвет Заголовка h3, используя таблицу стилей CSS.

○ Способ №3 – «Внутренние стили»

Способ №3 я использую в редких случаях, например,  для изменения одиночного тега на веб-странице. Для подключения стиля к любому тегу, нужно прописать параметр style.

style="тут будут CSS правила"

Пример:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример подключения таблицы CSS</title>
</head>
<body>
<h3>Заголовок h3</h3>
</body>
</html>

Результат:

В примере выше я изменил размер и цвет Заголовка h3, используя стили CSS.

○ Комбинированный метод подключения стилей

Все эти три способа можно комбинировать.


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Пример подключения таблицы CSS</title>
<style>
h3
{
font-size: 150px; /* Размер шрифта */
color: #cc0000 /* Цвет текста */
}
</style>
</head>
<body>
<h3>Заголовок</h3>
<h3>Заголовок</h3>
</body>
</html>

На сегодня все! Жду вас на следующих уроках.
Подписывайтесь на обновления блога!

Предыдущая запись
Синтаксис CSS. Основы CSS для начинающих. Урок №2
Следующая запись
Комментарии в CSS коде. Основы CSS для начинающих. Урок №4

Как подключить CSS к HTML: способы, инструкция

При изменении дизайна сайта может возникнуть вопрос, как подключить CSS к HTML. Какие способы годятся для этого? Нужны ли специальные знания для этого?

Что это такое?

CSS (от англ. Cascading Style Sheets) – формальный язык настройки внешнего вида страницы, написанной на языке разметки. Существует 3 способа, как подключить CSS файл к HTML. Каких-то особенных знаний для этого не нужно, как и нельзя четко выделить, какой из методов подключения CSS к HTML наиболее приемлем – просто следуйте инструкции и используйте удобный для вас.

Общая структура кода с использованием селекторов в учебниках представлена следующим образом:

селектор {

свойство: значение;

свойство: значение;

… и т.п.

}

Реализация каждого способа особенная. Разбирать будем на примере такого кода:

Задача подключаемых стилей – изменить цвет тега на красный.

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

Инструкция по подключению стилей CSS

Вариант первый

Чтобы ответить на вопрос, как подключить стили CSS, нужно присоединить таблицу стилей внутри тела, используя атрибут style.

К элементам, находящимся внутри тела body, необходимо приписать атрибут style. В этом случае значением приписанного атрибута будут служить параметры CSS, примененные к элементу.

Для более наглядного объяснения рассмотрим на примере, заданном ниже. Значение style приписано к элементу.

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

У метода есть существенные недостатки, которые важно учитывать:

  1. Ограниченность в плане функционала. Так, способ не позволяет подключить несколько селекторов одновременно или создавать ссылки в одном файле.
  2. Из первого минуса вытекает второй: каждый стиль по отдельности прописывается вручную, что со временем сделает код страницы настоящим хламовником.

Вариант второй

Основывается на подключении дополнительного (внешнего) файла стилей. Здесь используется элемент link, дающий пользователю возможность подключить к странице дополнительные файлы. Особое внимание следует заострить на атрибутах, прописываемых в элементе.

Выглядит это следующим образом:

Замечание. В параметре href необходимо описать путь файла, расположенного на компьютере. Условный пример: href =”C:\Users:\Desktop:\файл”.

В итоге получается код следующего вида:

C:\Users:\Desktop:\style.css» type=»text/css»/>

Статья

Cleep

В прикрепляемом документе style должна быть прописана вот такая строка:

p {color:red;}

Несколько нюансов, касающихся этого метода:

  1. Команда link, которая указывает отсылку на внешний файл обязательно должна размещаться в заголовке между тегами.
  2. Атрибут Rel показывает тот тип сайта, на который пользователь делает ссылку. В нашем случае таблица селекторов прописывается как stylesheet.
  3. Путь к внешнему файлу обязательно указывается относительно кода. В связи с чем, рекомендуется поместить оба файла в одну папку.

Этот способ наиболее часто используется опытными веб-мастерами. Связано это не только с практичностью метода, но и с возможностью подключать сразу несколько CSS файлов к странице, что позволяет сэкономить огромное количество времени и сделать длину кода значительно меньше.

Вариант третий

В этом случае CSS прописывается внутри параметра style.

Наиболее короткий способ подключения к коду страницы, популярность которого постепенно снижается. Для этого используется элемент

Статья

Cleep

Читайте также: 

Подключение нескольких селекторов к странице

Множество веб-мастеров не ограничиваются одним подключенным файлом к странице. Чтобы подключить несколько, достаточно пары шагов:

  1. Создаем несколько css-файлов с любым названием.
  2. Используя второй способ подключения, вписываем в код аналогичную строку, указав название и путь второго файла.

Итоговый код будет иметь следующий вид:

C:\Users:\Desktop:\1.css» type=»text/css»/>

C:\Users:\Desktop:\2.css» type=»text/css»/>

Статья

Cleep

В завершение стоит сказать и о такой возможности: в любом файле можно размещать ссылки на множество других подобных документов. Сделать это достаточно просто:

  1. Подключаем стиль к странице одним из вышеописанных способов.
  2. В файле прописываем строку, подключающую к атрибуту дополнительный стиль: @import url(«style-2.css»).

Видео на тему: подключение CSSк HTML

В сюжете более наглядно показаны все способы подключения таблицы стилей к коду страницы:

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

Основы CSS — подключение style.css. Теги header, h2, идентификатор id и класс class

Стили в верстке сайта подключаются отдельным файлом.

В этой же папке рядом с index.html создайте файл style.css. Создается файл так же, как index.html — щелкните правой кнопкой мыши, создайте текстовый файл и полностью переименуйте его в style.css.

Теперь откройте index.html в Sublime Text, удалите из него весь код и вставьте следующий код:

<!DOCTYPE html>
<html>
<head>
    <title>Заголовок страницы</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
	<header>
		<h2>Мой первый сайт</h2>
	</header>
</body>
</html>

Файл style.css тоже откройте в Sublime Text, и вставьте следующий код:

body{
    background-color: gray;
}
#header{
    background-color: #fff;
}
.h2{	
    font-size: 30px;
    color: #000;
    text-align: center;
    margin: 0;
    padding-top: 20px;
    padding-bottom: 20px;
}

Сохраните оба файла (Ctrl+S) и откройте index.html в браузере. Вы должны увидеть следующее:

Если что-то не получилось, сперва убедитесь, что Вы точно сохранили оба файла. А затем обновите страницу браузера сочетанием клавиш Ctrl+F5.

В будущем всегда обновляйте сайт в браузере сочетанием клавиш Ctrl+F5. Зачем это нужно, объясню позже.

Изменения в файле index.html

Разберемся, что изменилось в index.html. В <head> появилась строка <link rel=»stylesheet» href=»style.css»>. Таким образом подключаются файлы стилей, здесь мы подключили файл style.css.

В теге <body> изменилось все. Появился новый тег <header>, он говорит о том, что здесь будет содержаться вся верхняя часть сайта, так называемая «шапка» сайта. А в теге <header> есть тег <h2>, в который пишется главный заголовок отображаемый на странице. h2 — это очень важный тег для поисковых систем (таких как Яндекс и Google).

h2 должен быть только один на всей странице сайта. Также, есть h3, h4, h5, h5, h6, их может быть сколько угодно на странице, но они должны отображать логику страницы: h3 — это второй заголовок, h4 — третий заголовок и т.д.

У тега header есть id — это идентификатор тега. У тега h2 есть class. Для чего нужны id и class Вы увидите сейчас в style.css. Здесь только сразу скажу, что конкретный id должен быть только один на странице. То есть указывать уже нигде нельзя, можно будет указать, например,.

Значения атрибутов class могут быть одинаковыми у сколь угодно элементов (тегов).

Обратите внимание на полностью бесплатный курс HTML, на котором Вы быстро сможете стать экспертом верстки.

Разбор файла style.css

body обращается к <body> в index.html, и задает ему серый задний фон (background-color: gray;). Здесь background-color называется CSS-свойством, а gray — это значение CSS-свойства.

Аналогично #header обращается к, а .h2 обращается к class=»h2″. То есть через # обращаемся к id, а через точку обращаемся к class.

Здесь body, #header и .h2 называются CSS-селекторами.

Вообще, в id и class можно задавать любые произвольные значения, хоть. Но желательно, чтобы их значения отображали целевое назначение html-элемента (тега).

Свойства CSS пишутся на английском: font-size — размер шрифта, color — цвет, text-align — выровнять текст и т.д.

Описание CSS-свойств в style.css

background-color — цвет заднего фона. Весь элемент будет окрашен в указанный цвет. Некоторые значения цвета можно писать прямо словами (gray, white, black, red и т.д.), но обычно для этого используют HEX-формат. Если не знаете, что это то пока не задумывайтесь об этом.

font-size — размер шрифта. Здесь задан в пикселях (px) — основной единице измерения для числовых значений в CSS

color — цвет шрифта

text-align — расположение текста по горизонтале

margin — внешние отступы элемента. Каждые элемент имеет свои границы, как деталь страницы сайта. И элементу можно задать отступы от соседних элементов. Пока просто запомните это.

padding-top — внутренний отступ от верха элемента. Если внутри элемента находится другой элемент, то можно указать, что внутренний находится на некотором расстоянии от границы внешнего. Тоже пока просто запомните.

Это был достаточно объемный урок, в котором Вы узнали много новой полезной информации. Вы все ближе к тому, чтобы профессионально верстать качественные сайты!

HTML и CSS — тема легкая и интересная, а также достаточно широкая, поэтому поехали дальше!

Ссылка CSS из другой папки?

Я создаю веб-сайт и пытаюсь найти способ связать мой файл CSS, который находится в другой папке, но я понятия не имею, как это сделать. В этот момент я получил его в той же папке, что и код HTML. Кроме того, это то же самое, что связать JS с CSS, потому что мне нужно связать это.

Спасибо.

javascript

html

css

Поделиться

Источник


Dawid    

05 декабря 2015 в 21:00

4 ответа


  • Magento, добавить файл Css из папки media

    Можно ли добавить файл Css из папки media!? Обычным способом мы помещаем файл css в папку skin, а затем используем addCss()! Но мне нужно, чтобы он был в папке media ! Спасибо за помощь

  • PHP требуется ссылка из корневой папки

    Я искал вокруг и действительно нашел некоторые связанные темы, но предложения там не сработали для меня. Структура папок моего проекта выглядит следующим образом: projectSample (name of folder) » backend (folder) -> index.php -> orders.php » Admin (folder) -> index.php » libs (folder)…



4

Вы можете перемещаться по структуре папок, используя относительный путь в теге html <link>

например

<link href="../css/main.css" type="text/css" rel="stylesheet">

будет идти одна папка вверх (../), а затем выберите main.css в папке css

Поделиться


Anditthas    

05 декабря 2015 в 21:05



2

Если ваша текущая папка /current/folder/location/index.html , а файл .css находится в /current/second/folder/style.css , используйте это в качестве примера:

<link rel="stylesheet" type="text/css" href="../../second/folder/style.css">

или альтернативно:

<link rel="stylesheet" type="text/css" href="/current/second/folder/style.css">

Однако, если второй файл находится в `/current/folder/second/style.css, то используйте:

<link rel="stylesheet" type="text/css" href="../second/style.css">

Поделиться


kzhao14    

05 декабря 2015 в 21:10



1

для ссылки на файл css из файла html тег <link> используется с

  1. a type из text/css
  2. a rel значение stylesheet
  3. и href , который является адресом вашего файла css.

    <link href="ADDRESS_OF_CSS_FILE" type="text/css" rel="stylesheet">
    

ADDRESS_OF_CSS_FILE -это либо:

  • абсолютный путь (полный путь к файлу на вашем компьютере,
    включая, например, драйвер C: )

    <link href="C://unneccessary/toType/folders/myProjectFolder/myStylesFolder" rel=...>

  • или относительный путь (путь относительно файла html, в который вы
    помещаете свой тег <link> .)

    предполагая, что это ваша структура каталогов

    /Desktop
      /myProjectFolder
        index.html
        /myStylesFolder
          my_styles.css
    

    вы помещаете тег <link> внутрь index.html , а index.html находится внутри /myProjectFolder , поэтому текущая папка для тега link -это myProjectFolder .

    вы должны сообщить браузеру:

    • из текущего каталога
    • перейдите к /StylesFolder , который находится в текущем каталоге
    • и оттуда загрузите файл my_styles.css

      и вы говорите браузеру сделать это вот так:

      href="./myStylesFolder/my_styles.css"
      

      браузер понимает ./ как текущий каталог , а ../ как родительский для текущего каталога, в данном случае: /Desktop

Поделиться


asedsami    

05 декабря 2015 в 22:07



0

Поместите это в свой index.html в головные цели

<head>
  <link rel="stylesheet" href="myfile.css"/>
</head>

Если у вас есть файл в другой папке, вы должны использовать ../myfile.css или ../../myfile.css . ../ ссылается на родительскую папку

Поделиться


AlvaroGlez    

05 декабря 2015 в 21:07


  • В том числе css из другой папки

    Я хотел бы знать, есть ли простой распространенный способ включить файл css, который находится в папке, из файла html/php внутри другой папки? Структура выглядит следующим образом: index.php о index.php css style.css Я хочу знать, как получить правильный путь к файлу style.css внутри папки css из…

  • CSS не загружается из правильной папки из-за JS

    Я работаю над сайтом по шаблону, который скачал. Я создал новую папку в корневом каталоге, куда хочу поместить несколько веб-страниц. Есть также папки в корневом каталоге для js и css. Пример Корня -css —style.css -js —skel.min.js -folder —page1.html —page2.html Все работает правильно на…


Похожие вопросы:

Gulp-webserver: ссылка на css не работает, если она находится вне папки html?

Если у меня есть файл html и ссылка на файл css, который находится в той же папке или подпапке, то css включается при запуске gulp webserver. Но если у меня есть файл css вне папки html, он не…

SharePoint: зарегистрируйте файл css из определенной языковой папки

Мой файл css находится в _layouts/MyProject/css/styles.css , и мне нужно зарегистрировать его из кода позади. Для этого я должен использовать метод CssRegistration.Register :…

PHP-ссылка из папки

В настоящее время я работаю над интерфейсом клиентского веб-сайта. Он фотограф и не хочет возиться с системами CMS (шиш). Я просто объясню это так, как он объяснил мне: Он хочет создать папки на…

Magento, добавить файл Css из папки media

Можно ли добавить файл Css из папки media!? Обычным способом мы помещаем файл css в папку skin, а затем используем addCss()! Но мне нужно, чтобы он был в папке media ! Спасибо за помощь

PHP требуется ссылка из корневой папки

Я искал вокруг и действительно нашел некоторые связанные темы, но предложения там не сработали для меня. Структура папок моего проекта выглядит следующим образом: projectSample (name of folder) »…

В том числе css из другой папки

Я хотел бы знать, есть ли простой распространенный способ включить файл css, который находится в папке, из файла html/php внутри другой папки? Структура выглядит следующим образом: index.php о…

CSS не загружается из правильной папки из-за JS

Я работаю над сайтом по шаблону, который скачал. Я создал новую папку в корневом каталоге, куда хочу поместить несколько веб-страниц. Есть также папки в корневом каталоге для js и css. Пример Корня…

Ссылка на dll из другой папки даже после deployment

Как ссылаться на dll вне папки приложения и использовать его методы и интерфейсы при динамической загрузке? есть ли способ сделать это? Примечание : ссылка должна быть сделана с этого пути даже…

Ссылка на папки vs ссылка и создание виртуальной папки в Eclipse IDE

В Eclipse IDE, когда я перетаскиваю папку/файл в проект Explorer: В чем разница между вариантом 2 и вариантом 3? ( Ссылка на файлы и папки vs ссылка на файлы и воссоздание структуры папок с…

Как импортировать модуль из другой папки `/node_modules/`

Это моя структура файлов: ├── public/ │ ├── assets │ │ ├── node_modules │ │ │ ├── jquery │ │ │ ├── etc… │ │ ├── images │ │ ├── icons │ │ ├── package.json │ ├── es │ │ ├── index.js │ ├── js │ │ ├──…

Как подключить CSS для Safari, Explorer, Firefox, Safari, Chrome


При верстке шаблона, наткнулся на пару неприятных вещей. Не могу добиться кроссбраузерного отображения вида маркированного списка. Благо, интернет — великая вещь, который подарил ответ на данный вопрос.


Итак, как это делать — подключать стили CSS для каждого браузера?


Internet Explorer любой версии


Первое решение — это, конечно, Conditional Comments (Условные комментарии). Об этом хорошо написано на сайте wikipedia.org. Чтобы правило работало, прописываем в конце каждого определения !important.


Приведу пример для наглядности:

<!--[if lte IE 6]>
   <link rel="stylesheet" href="css/cssf-ie6.css" type="text/css"></link>
<![endif]--> 


Второе решение — это хаки. Приведу пример. Оба варианта валидны. И удобнее всего использовать:

* html .box { 
    height : 300px
} /* Только IE6 */ 
*+ html .box { 
    height : 300px 
} /* Только IE7 */ 


Opera >9


Тут тоже два решения. Первое с использованием javascript, второе — снова хаки. Предпочитаю как можно реже использовать javascript, поэтому сам выбираю второй пункт. Прописываешь прямо в CSS. Но, к сожалению, этот хак коснется и Safari.

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
  .box {
     background: #F00
  }
}


Safari и Google Chrome

@media all and (-webkit-min-device-pixel-ratio:0) {
  .box { 
    color: red; /* для Chrome и Safari */ 
  }
}


Firefox


Здесь нечего писать. Так как он для меня и других правильнее всех рендерит HTML, я просто беру его за основу. Делаю верстку для него. А потом уже отталкиваюсь и делаю поправки на другие браузеры.


Но все равно бывают затыки, против которых не попрешь. Например, в лисе проблемы с вертикальным выравниванием в полях ввода текста. Чтобы бороться с ними, прописываем так:

@-moz-document url-prefix() { 
   .box {
      background: #F00
   } 
} 

Больше возможностей для подключения стилей для определенных браузеров можно найти на stackoverflow.com

Как правильно использовать HTML «id» в ваших файлах CSS

Как вы должны знать, «id» — это просто атрибут HTML, который можно использовать для нескольких опций.

Один из этих вариантов — правильно идентифицировать элементы в ваших HTML-документах, которые позже могут быть стилизованы с помощью CSS.

Создайте соединение для стилизации вашего идентификатора

Если вы хотите правильно стилизовать свой HTML-идентификатор с помощью CSS, вы должны сначала создать соединение между вашей разметкой HTML и вашим файлом CSS.

Для этого вам нужно будет вызвать имя «id» внутри вашего файла CSS, используя символ хэштега «#».

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

Например, представьте, что у вас есть div с именем id «clever».

Пример содержания.

Пример № 1

Этот идентификатор в CSS называется селектором.

Итак, если вы хотите стилизовать этот div, вам нужно будет написать символ хэштега «#» с именем «умный».

См. Пример CSS ниже.

#умный {
фон: фиолетовый;
}

 

Образец № 2

Внутри этого примера мы просто задаем «id» с именем «умный» цветной фон пурпурного цвета.

После того, как вы установили это соединение внутри своего файла CSS, вы можете продолжить, добавив больше стилей CSS, таких как изменение цвета текста, добавление отступов или, возможно, увеличение границы.

В приведенном ниже примере вы можете увидеть всю разметку HTML и CSS вместе в действии.

В этом случае мы используем внутреннюю таблицу стилей, но вы также можете использовать внешний файл CSS, если хотите.







 Использование идентификатора в CSS 

<стиль>
#умный {
    фон: фиолетовый;
    цвет белый;
    граница: 2px solid # 000;
    выравнивание текста: центр;
    отступ: 8px 0 10px 0;
}






Пример содержания.

Образец № 3

А вот как будет выглядеть конечный результат.

Пример содержания.

Имейте в виду, что с CSS у вас будет много комбинаций.

Например, вы также можете использовать шестнадцатеричный цвет # 830083, чтобы получить тот же фиолетовый цвет.

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

Возможности CSS безграничны.

Вы всегда можете смешивать и сочетать что угодно.

Подобно смешиванию шестнадцатеричных названий цветов или смешиванию названий «id» с именами «классов», или комбинируйте «id» с любым элементом HTML, просто посмотрите на примеры ниже.

div # clever {
    фон: # 830083;
    цвет: #FFF;
    граница: 2px solid # 000;
    выравнивание текста: центр;
    отступ: 8px 0 10px 0;
}

body #clever {
    фон: # 830083;
    цвет: #FFF;
    граница: 2px solid # 000;
    выравнивание текста: центр;
    отступ: 8px 0 10px 0;
}

 

Sample # 4

Единственная рекомендация, которую я могу дать вам перед завершением, — это ограничить себя при использовании имен «id».

Я имею в виду, что если вы собираетесь использовать имена «id» с JavaScript или с элементами HTML, которые требуют использования «id», например, этот аккордеон CSS или этот аккордеон со знаками «плюс» и «минус», тогда все будет в порядке.

Но если вы собираетесь использовать только имена «id» для стилизации, то я скорее рекомендую вам использовать вместо них имена «class».

Хороший пост, который может расширить это, будет этот, HTML id vs class, который даст вам лучшее понимание того, почему бы не использовать имена «id» слишком часто.

А пока это все для меня, ребята, и помните, если вам нужен веб-дизайн в Форт-Уэрте или если вам нужна дополнительная помощь от веб-разработчика, не стесняйтесь и отправьте мне сообщение ниже.

Шаблоны стилей с файлами CSS

Панель инструментов «Макет» и меню «Формат» предлагают множество возможностей для стилизации каждой части шаблона. Однако стилизация каждого элемента один за другим — это большая работа и, что более важно, может привести к шаблону с беспорядочным сочетанием стилей, который нелегко поддерживать и которому не хватает единообразного дизайна.Поэтому предпочтительный способ стилизации шаблонов — файлы CSS: каскадные таблицы стилей. В этом разделе объясняется, как это сделать.

Зачем нужны файлы CSS

Основная идея CSS — максимально отделить структуру и содержимое (HTML) документа от его представления.

Каскадные таблицы стилей

изначально были разработаны для использования с веб-страницами или файлами HTML.Поскольку каждый шаблон в конструкторе создается в HTML, файлы CSS также можно использовать в конструкторе.
Вместо того, чтобы устанавливать размер шрифта, высоту строки, цвет и т. Д. Для каждого абзаца в самом шаблоне, вы можете определить макет для всех абзацев и для всех каналов вывода в файле CSS.

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

Вы пишете HTML

Когда вы добавляете элементы, такие как текст, изображения или таблица, к содержимому шаблона, вы фактически создаете HTML-файл.

Чтобы увидеть это, перейдите на вкладку Design в рабочей области. Щелкните в любом месте содержимого. Взгляните на в верхней части рабочего пространства. В хлебных крошках отображается HTML-тег элемента, по которому был выполнен щелчок, а также теги HTML других элементов, которым принадлежит выбранный элемент.Выбранный элемент находится в конце строки.

Для непосредственного редактирования текста HTML:

  • В рабочей области перейдите на вкладку Источник .

На этой вкладке вы можете просматривать и редактировать содержимое шаблона в виде простого текста с тегами HTML (обратите внимание на угловые скобки: <>). Вы можете добавлять и редактировать текст и теги HTML, классы, идентификаторы и другие атрибуты.

Чтобы узнать больше о HTML, см., Например, https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction и https://www.w3schools.com/html/default.asp.

Многие видеокурсы и практические курсы по HTML (и CSS) также предлагаются в Интернете, некоторые бесплатно. Перейдите, например, на сайт www.codeschool.com или www.codeacademy.com и поищите курсы HTML (и CSS).

Чего нельзя делать с CSS

В Connect от выходного канала зависит, что можно, а что нельзя делать с помощью CSS.CSS можно использовать в полной мере только с выводом HTML. Очевидно, что функции анимации и перехода не будут работать при выводе на печать.

Включенные каскадные таблицы стилей

При создании шаблона автоматически включается несколько таблиц стилей:

  • Одна таблица стилей, которая применяется ко всем типам документов: context_all_styles.css.
  • Одна или несколько таблиц стилей, специфичных для контекста (печать, электронная почта, Интернет).Например, когда вы создаете электронное письмо с действием с помощью мастера, файлы context_htmlemail_styles.ccs и basic_email_action.css автоматически добавляются в папку таблиц стилей на панели ресурсов.
  • Таблица стилей, определяющая стили по умолчанию для таблиц: default.css. Он содержит стили, которые можно выбрать при вставке таблицы с помощью меню «Вставка» или кнопки «Вставить таблицу» на панели инструментов.

    Не изменяйте таблицу стилей default.css. Используйте глобальную таблицу стилей или таблицу стилей для соответствующего контекста, чтобы определить свои собственные стили для таблиц.

Добавление файлов CSS

Чтобы добавить собственный файл CSS, откройте окно проводника, перетащите файл на панель «Ресурсы» и поместите его в папку «Таблицы стилей».
Если файл CSS содержит ссылки на определенные изображения, вы также можете перетащить или скопировать / вставить эти изображения в папку таблиц стилей.

Чтобы создать новый файл CSS, щелкните правой кнопкой мыши папку таблицы стилей на панели «Ресурсы» и выберите «Новая таблица стилей».

  • Чтобы экспортировать файл CSS из вашего шаблона, перетащите или скопируйте / вставьте его из папки таблиц стилей в папку на локальном жестком диске.
  • В конструкторе можно открывать и редактировать любой файл CSS: выберите «Файл»> «Открыть», выберите «Все файлы (*. *)» В качестве типа файла, а затем выберите файл CSS.

Использование удаленной таблицы стилей

Удаленная таблица стилей не находится в вашем
шаблон, но находится в сетевой папке или на внешнем веб-сервере (обычно называемом
CDN).При создании веб-вывода ссылки на файлы на внешнем сервере
в заголовке веб-страницы и обслуживаются удаленным сервером, а не
Серверный модуль PlanetPress Connect.

Чтобы добавить удаленную таблицу стилей:

  1. Щелкните правой кнопкой мыши папку «Таблица стилей» на панели «Ресурсы» и выберите «Создать».
    Удаленная таблица стилей.
  2. Введите имя для
    файл в том виде, в котором он отображается в ресурсах таблицы стилей.Для лучшего управления
    лучше всего использовать то же имя файла, что и удаленный ресурс.
  3. Введите URL-адрес для
    удаленный ресурс. Если файл расположен на внешнем веб-сервере, это должен быть полный URL-адрес, включая http: //
    или префикс https: //, имя домена, путь и имя файла.
    Если файл находится в вашей сети, вы можете нажать кнопку «Обзор» или ввести путь и имя файла вручную. Полный синтаксис с протоколом «файл»: file: // / .Если хост — «localhost», его можно опустить, в результате получится file: /// , например: file: /// c: /resources/images/image.jpg.
    Если файл находится на другом сервере в вашей сети, путь должен содержать пять косых черт после «file:».
  4. При желании для формы Capture OnTheGo вы можете установить флажок Использовать кэшированный ресурс Capture OnTheGo, чтобы предотвратить повторную загрузку удаленной таблицы стилей, если она была загружена ранее. Файл должен быть доступен в общедоступном месте, например: в папке на корпоративном веб-сайте, размещенной в CDN (сети доставки контента) или совместно используемой в процессе рабочего процесса.

После добавления удаленного файла вы можете щелкнуть его правой кнопкой мыши и выбрать «Загрузить ресурс». Это позволяет вам поддерживать центральный файл, из которого вы можете быстро загрузить копию в свой шаблон без необходимости копировать и вставлять.

У ресурсов, размещенных на CDN, есть несколько преимуществ:

  • Эти ресурсы не обслуживаются вашим сервером, что позволяет сэкономить место,
    пропускная способность и обработка.
  • Использование популярного CDN использует преимущества кеширования — клиент, имеющий
    посетил другой веб-сайт, использующий тот же CDN, будет иметь файл в
    кэш и не загружать его повторно, что ускоряет загрузку
    клиент.

Чтобы обновить удаленные ресурсы в представлении «Дизайнер», используйте параметр «Обновить» в меню («Вид»> «Обновить») или кнопку «Обновить» в верхней части рабочей области.

Использование файла Sass

Препроцессор CSS — это язык расширения CSS, который позволяет улучшать CSS с помощью кода (например, переменных), а затем компилировать его в простой CSS.Препроцессор CSS Sass интегрирован в Connect.
Дополнительную информацию о Sass см. На веб-сайте Sass.

Для получения информации о работе с Sass в конструкторе см. Использование файла Sass.

Стилизация ваших шаблонов с помощью файлов CSS

Почтовые клиенты не читают файлы CSS, а некоторые даже удаляют тег