2017-07-29 10 views
-2

私はenjoycssを使っていくつかのCSSコンポーネントを作成し、コードを取得しました。ボタンの場合、彼らは.buttonを使用するように私はしかし、それは私がチュートリアルで見たものとは異なりPHPスクリプトでCSSクラスを使用する

.mybutton-css { 
    display: inline-block; 
    -webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    box-sizing: content-box; 
    cursor: pointer; 
    padding: 10px 20px; 
    border: 1px solid #018dc4; 
    -webkit-border-radius: 3px; 
    border-radius: 3px; 
    font: normal 16px/normal Tahoma, Geneva, sans-serif; 
    color: rgba(255,255,255,0.9); 
    -o-text-overflow: clip; 
    text-overflow: clip; 
    background: #0199d9; 
    -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ; 
    box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ; 
    text-shadow: -1px -1px 0 rgba(15,73,168,0.66) ; 
    -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); 
    -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); 
    -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); 
    transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); 
} 

てしまったが、私はそれを見ません。私もそれを呼び出す方法がわからない! mybutton-css.txtという名前のファイルを作成する必要がありますか?あなたのデモに基づいて - - test.phpでは、私は

<html> 
<head> 
<title> Hello </title> 
</head> 
<body> 
    <?php 
     print("hello world"); 
     <input type="button" class="mybutton-css" value="Load File" /> 
    ?> 


</body> 
</html> 
+3

であなたのHTMLでそれをインポートする必要があります。あなたのサンプルの中にPHPを全く必要とするものはありません。投稿したコードから大きな構文エラーが発生します。クラス名は '.button'、' .mybutton-css'、 '.whatever-the-hell-want-it-to-be'のいずれかです。 – ceejayoz

+0

この質問は非常に不明です。あなたが何を達成しようとしているのか、実際に何が起こっているのか、あなたの混乱がどこから来ているのかを説明してください。また、これはCSSの問題のように見えますが、なぜあなたは真ん中にPHPコードを持っていますか? (ところで、あなたのタグはPHPの外に出て行くべきではありません) – Nathanael

+0

(もう一つの注意点:そのジェネレータの使用をやめて、無意味で複雑なクラップをあなたのCSSにたくさん出させてしまいます。本当にシンプルなCSSのルールを習得してください。) – ceejayoz

答えて

1

を持っている私はあなたがPHPで達成しようとしている正確にわからないんだけど、あなたはまったくPHPを必要としません。あなただけの次のCSSとHTML必要

:実際のアプリケーションのために

.mybutton-css { 
 
    display: inline-block; 
 
    -webkit-box-sizing: content-box; 
 
    -moz-box-sizing: content-box; 
 
    box-sizing: content-box; 
 
    cursor: pointer; 
 
    padding: 10px 20px; 
 
    border: 1px solid #018dc4; 
 
    -webkit-border-radius: 3px; 
 
    border-radius: 3px; 
 
    font: normal 16px/normal Tahoma, Geneva, sans-serif; 
 
    color: rgba(255,255,255,0.9); 
 
    -o-text-overflow: clip; 
 
    text-overflow: clip; 
 
    background: #0199d9; 
 
    -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ; 
 
    box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ; 
 
    text-shadow: -1px -1px 0 rgba(15,73,168,0.66) ; 
 
    -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); 
 
    -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); 
 
    -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); 
 
    transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); 
 
}
hello world 
 
<input type="button" class="mybutton-css" value="Load File" />

を、あなたは一般的にstyle.cssのようなものという名前のCSSファイルで、あなたのCSSを入れてしまうでしょう。

その後、あなたはHTML文書の先頭に次のタグを使用してCSSを追加します。

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

あなたのHTML文書の本文にこれを置く:

hello world 
<input type="button" class="mybutton-css" value="Load File" /> 
0

あなたはすべきですあなたの<head>タグに<style>タグの中、あなたの生成されたCSSのコードを貼り付け

<html> 
    <head> 
     <style> 
      .mybutton-css { 
       //Your generated CSS code here 
      } 
     </style> 

さらに良いことに、あなたはあなたが実際にいくつかの基本的なチュートリアルを開始する必要がありstyle.cssファイルを作成し、

<link rel="stylesheet" href="style.css"/> 
関連する問題