3

Я никак не могу связать страницу с таблицей, созданной в CSS.

2
  • Спасибо , получилось
    – user22941
    3 сен 2014 в 16:19
  • @Nadya, Если вам дан исчерпывающий ответ, отметьте его как верный (нажмите на галку рядом с выбранным ответом).
    – MrClon
    3 сен 2014 в 16:41

6 ответов 6

8

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

Имеется 4 способа.


1. Встроенные стили

Подключение встроенных или inline стилей заключается в применении атрибута style к определённому тегу на странице. В этом случае значением атрибута является одно или несколько (через точку с запятой) свойств CSS с соответствующими значениями. Как правило, такой способ используется в тех случаях, когда надо изменить характеристики конкретного элемента на одной странице.

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Подключение встроенных стилей</title>
 </head>
 <body>
  <p style="color:#ff0066; text-align:center">Параграф 1</p>
  <p style="color:#0066ff; font-size:120%">Параграф 2</p>
 </body>
</html>


2. Внутренние стили

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

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Подключение встроенных стилей</title>
  <style type="text/css">
   body {
    background: #ccccff; /* цвет фона страницы */
   }
   p {
    color: red; /* цвет текста параграфов */
    font-family: Helvetica, sans-serif; /* гарнитура шрифта параграфов */
    font-size: 150%; /* размер шрифта */
    text-align: center; /* текст по центру */
    border: 5px green double; /* стили рамки */
   }
  </style>
 </head>
 <body>
  <p>Параграф 1</p>
  <p>Параграф 2</p>
 </body>
</html>


3. Внешние стили

Внешние стили подключаются отдельным файлом при помощи тега <link>. В этом случае все стили располагаются в обычном текстовом файле с расширением .css и влияют на элементы всех страниц, к которым этот файл подключается. Обычно создание стилей сайта начинается именно этим способом, так как только с его помощью ощущаются все плюсы CSS, ведь изменяя данные всего в одном файле можно управлять отображением сразу большого числа страниц. А уже в процессе работы над сайтом добавляются внутренние или встроенные стили, если это необходимо.

В первом блоке содержимое файла style.css, находящегося в папке style:

body {
 background: #ccccff; /* цвет фона страницы */
}
p {
 color: red; /* цвет текста параграфов */
 font-family: Helvetica, sans-serif; /* гарнитура шрифта параграфов */
 font-size: 150%; /* размер шрифта */
 text-align: center; /* текст по центру */
 border: 5px green double; /* стили рамки */
}
<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Подключение внешних стилей</title>
  <link rel="stylesheet" type="text/css" href="style/style.css">
 </head>
 <body>
  <p>Параграф 1</p>
  <p>Параграф 2</p>
 </body>
</html>


4. Через правило @import

Это правило служит для объединения нескольких таблиц стилей в одну. Чтобы правило @import правильно работало, оно обязательно должно указываться в самом начале таблицы стилей, единственное исключение — правило @charset .

@import url("https://kristinitatest.github.io/Stack%20Exchange/HTML+CSS/1.css");
@import url("https://kristinitatest.github.io/Stack%20Exchange/HTML+CSS/2.css");
    <!DOCTYPE html>
    <html>
     <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Внешние стили с @import</title>
     </head>
     <body>
      <p>Содержимое страницы.</p>
     </body>
    </html>

6

в head вашего html пишете

<link rel="stylesheet" href="путь_к_css_файлу" />
4
<head>
  ...
   <link rel="stylesheet" type="text/css" href="путь к файлу/style.css">
  ...
</head>
3

Есть ещё два способа:

<style type="text/css">
/*Тут ваш код например:*/
body{
background-color: black;
}
</style>

и через аттрибут style всех тегов например:

<div style="position:absolute;top:5px;left:2px;"></div>

или

<a style="border: none;" href=""></a>

1

Лучше всего подключать через тег

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

Другие способы как подключить CSS к HTML можно прочитать на сайте

1
0

К слову, коллеги выше описали все методы. Скорее всего вы не можете присоединить через местоположение файла стилей. Или же назовите него не русскими буквами. :3

<link href="здесь надо указать путь, считая, что index.html находится в корневой папке" rel="stylesheet"> 
<!-- type="text/css" принято не писать в HTML5 -->

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.