Question

我使用enjoycss创建一些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);
}

但是，它与我在教程中看到的不同，因为他们使用.button，但我不明白。我也不知道怎么称呼它！我应该创建一个名为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>

Answer 1

我不确定您使用PHP实现了什么目的，但是 - 根据您的演示 - 您根本不需要任何PHP。

您只需要以下CSS和HTML：

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

对于真实世界的应用程序，您通常会将CSS放在名为style.css的css文件中。

然后，在HTML文档的头部添加带有以下标记的CSS：

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

您可以将其放在HTML文档的正文中：

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

Answer 2

您应该将生成的CSS代码粘贴到<style>代码中的<head>代码中

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

更好的是，您应该创建一个style.css文件并使用

将其导入HTML

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

在php脚本

2 个答案: