web-dev-qa-db-ja.com

PHPでCSSスタイルを使用する方法

Phpを使用してmysqlのデータを表示しています。ここに私のcssステートメントがあります：

<style type=”text/css”>
table {
    margin: 8px;
}

th {
    font-family: Arial, Helvetica, sans-serif;
    font-size: .7em;
    background: #666;
    color: #FFF;
    padding: 2px 6px;
    border-collapse: separate;
    border: 1px solid #000;
}

td {
    font-family: Arial, Helvetica, sans-serif;
    font-size: .7em;
    border: 1px solid #DDD;
}
</style>

テーブル、テーブルヘッダー、テーブルデートの表示に使用されます。 php cssは初めてなので、コードを表示するphpで上記のcssスタイルを使用する方法を知りたいだけです。

<?php>
echo "<table>";
echo "<tr><th>ID</th><th>hashtag</th></tr>";
while($row = mysql_fetch_row($result))
{
    echo "<tr onmouseover=\"hilite(this)\" onmouseout=\"lowlite(this)\"><td>$row[0]</td>                <td>$row[1]</td></tr>\n";
}
echo "</table>";
<?>
phpcssecho
14
Li'

カスケードスタイルシート（CSS）は、マークアップ言語で記述されたドキュメントのプレゼンテーションセマンティクス（外観と書式設定）を記述するために使用されるスタイルシート言語です。詳細： http://en.wikipedia.org/wiki/Cascading_Style_Sheets CSSはプログラミング言語ではないため、PHPのようなサーバーサイド言語に付属するツールはありません。ただし、サーバーサイド言語を使用してスタイルシートを生成できます。

<html>
<head>
<title>...</title>
<style type="text/css">
table {
margin: 8px;
}

th {
font-family: Arial, Helvetica, sans-serif;
font-size: .7em;
background: #666;
color: #FFF;
padding: 2px 6px;
border-collapse: separate;
border: 1px solid #000;
}

td {
font-family: Arial, Helvetica, sans-serif;
font-size: .7em;
border: 1px solid #DDD;
}
</style>
</head>
<body>
<?php>
echo "<table>";
echo "<tr><th>ID</th><th>hashtag</th></tr>";
while($row = mysql_fetch_row($result))
{
echo "<tr onmouseover=\"hilite(this)\" onmouseout=\"lowlite(this)\"><td>$row[0]</td>                <td>$row[1]</td></tr>\n";
}
echo "</table>";
?>
</body>
</html>
12
RezaSh

データベースにcssコードがあり、phpファイルをCSSとしてレンダリングしたいと思います。その場合は...

htmlページ：

<html>
<head>
   <!- head elements (Meta, title, etc) -->

   <!-- Link your php/css file -->
   <link rel="stylesheet" href="style.php" media="screen">
<head>

次に、style.phpファイル内で：

<?php
/*** set the content type header ***/
/*** Without this header, it wont work ***/
header("Content-type: text/css");


$font_family = 'Arial, Helvetica, sans-serif';
$font_size = '0.7em';
$border = '1px solid';
?>

table {
margin: 8px;
}

th {
font-family: <?=$font_family?>;
font-size: <?=$font_size?>;
background: #666;
color: #FFF;
padding: 2px 6px;
border-collapse: separate;
border: <?=$border?> #000;
}

td {
font-family: <?=$font_family?>;
font-size: <?=$font_size?>;
border: <?=$border?> #DDD;
}

楽しんで！

18
Omar

CSSをPHPタグの外側に置くだけです。ここに：

<html>
<head>
    <title>Title</title>
    <style type="text/css">
    table {
        margin: 8px;
    }
    </style>
</head>
<body>
    <table>
    <tr><th>ID</th><th>hashtag</th></tr>
    <?php
    while($row = mysql_fetch_row($result))
    {
        echo "<tr onmouseover=\"hilite(this)\" onmouseout=\"lowlite(this)\"><td>$row[0]</td>                <td>$row[1]</td></tr>\n";
    }
    ?>
    </table>
</body>
</html>

PHPタグは<?phpおよび?>。

4
rationalboss

私はこれを理解していなかったIm new to php cssただし、CSSを要素レベルで定義したため、スタイルはすでにPHPコードに適用されています

あなたのPHPコードはこのようなHTMLで使用されます

<!DOCTYPE html>
<html>
  <head>
    <style>
    /* Styles Go Here */
    </style>
  </head>
  <body>
  <?php
   echo 'Whatever'; 
  ?>
  </body>
</html>

また、PHPを使用してHTMLをエコーする必要はなく、次のようにHTMLを分離するだけです。

<table>
  <tr>
    <td><?php echo 'Blah'; ?></td>
  </tr>
</table>
1
Mr. Alien

PhpをHTMLドキュメントに入れてみてください：

注：ファイルはindex.htmlとして保存されませんが、index.phpとして保存されるか、phpが機能しません！

 //dont inline your style

 <link rel="stylesheet" type="text/css" href="mystyle.css"> //<--this is the proper way!

 //save a separate style sheet (i.e. cascading style sheet aka: css)
1
user3001093

css :hoverちょっとjs onmouseover

row1 {
    // your css
}
row1:hover {
    color: red;
}
row1:hover #a, .b, .c:nth-child[3] {
    border: 1px solid red;
}

それがどのように機能するかはあまりわかりませんが、cssはスタイルをエコーされたIDに適用します

0
planetsarecool

（現在のコードで）絶対に最も簡単な方法は、require_once("path/to/file")ステートメントをphpコードに追加することです。

<?php
require_once("../myCSSfile.css");
echo "<table>";
...

また、余談ですが、開始<?phpタグの末尾には>がなく、終了?> phpタグは<で始まりません。奇妙ですが、本当です。

0
elbrant

これが正しい形式かどうかわかりません。しかし、phpでhtml/tplファイルにcssコードを挿入するときにtype = "text/css"を削除することで私の問題を解決できます。

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

なる

<style></style>

例 enter image description here

0
Panji