如何使用CSS设置html/表单元素的样式？_Html_Css

如何使用CSS设置html/表单元素的样式？

html css

如何使用CSS设置html/表单元素的样式？,html,css,Html,Css,我正在尝试创建一个登录表单，到目前为止，我的html是： <body id="login"> <div id="wrapper"> <div id="loginform"> <form id ="login" name="login" action = "" method="post" accept-charset="utf-8" class="smart-green"> <h1>Login Form</h

我正在尝试创建一个登录表单，到目前为止，我的html是：

<body id="login">
<div id="wrapper">

<div id="loginform">
<form id ="login" name="login" action = "" method="post" accept-charset="utf-8" class="smart-green">    
       <h1>Login Form</h1> 
        <label>
        <span>Email Address:</span>
        <input id="email" type="text" name="email" placeholder="Enter a valid email address" />
        </label>

        <label>
        <span>Password:</span>
        <input id="password" type="password" name="password" placeholder="Password" />
        </label>

        <label>
        <span>&nbsp;</span>
        <input type="submit" value="Send" />
        </label> 
</form>
</div>
</div>


登录表单
电邮地址：
密码：

我想用CSS设计它的样式。我如何访问：

a）改变整体风格的整体形式

b）电子邮件地址标题和框

label[for=email]{
}
input[type=email]{
}

c）按钮

input[type=sbumit]{
...
}

我试过使用。#>但我现在很困惑。这可能是我犯的一个非常愚蠢的错误，但我无法理解…

以下是如何访问：

a）改变整体风格的整体形式 使用

#loginform{/*CSS rules*/}

处理表单容器的总体样式。因为除了表单之外没有其他元素，所以它的工作方式就好像是针对表单本身一样

b）电子邮件地址标题和方框 使用

#loginform label{/*CSS rules*/}

以标签处的CSS规则为目标，使用

#email{}

以电子邮件输入框为目标。您可以通过添加其他项目的ID（例如，

#电子邮件、#密码{/*CSS规则*/}

）对其他项目重复使用最后一条规则

c）按钮

使用

input[type=submit]{/*CSS rules*/}

设置提交按钮的样式。

以下是如何访问：

a）改变整体风格的整体形式 使用

#loginform{/*CSS rules*/}

处理表单容器的总体样式。因为除了表单之外没有其他元素，所以它的工作方式就好像是针对表单本身一样

b）电子邮件地址标题和方框 使用

#loginform label{/*CSS rules*/}

以标签处的CSS规则为目标，使用

#email{}

以电子邮件输入框为目标。您可以通过添加其他项目的ID（例如，

#电子邮件、#密码{/*CSS规则*/}

）对其他项目重复使用最后一条规则

c）按钮

使用

input[type=submit]{/*CSS rules*/}

设置提交按钮的样式。

首先，我建议您将代码的结构更改为：

。。。
登录表单
电邮地址：
密码：

然后答案是：

a）查阅表格

form#login{
...
}

b）电子邮件地址标题和框

label[for=email]{
}
input[type=email]{
}

c）进入按钮

input[type=sbumit]{
...
}

首先，我建议您将代码的结构更改为：

。。。
登录表单
电邮地址：
密码：

然后答案是：

a）查阅表格

form#login{
...
}

b）电子邮件地址标题和框

label[for=email]{
}
input[type=email]{
}

c）进入按钮

input[type=sbumit]{
...
}

或者，您可以对表单、标签和输入字段使用“类”或“id”来提供个性化的样式。

因为您刚刚开始，只想看到它工作，也许对您来说，将“id”属性附加到每个html元素，然后以这种方式在css中访问它们会更简单（对于您想要编辑的细节，例如电子邮件标题、电子邮件输入、提交按钮）

例如：

html

如果这不起作用

1.）清除缓存

2.）确保您的css文件实际包含在html中

3.）确保页面上附加到元素的每个“ID”都是唯一的

如果这样做不起作用，请使用您的开发工具并四处闲逛：

在任何浏览器中点击（f12）

，因为您刚刚开始，只想看到它工作，也许您可以更简单地为每个html元素附加一个“id”属性，然后以这种方式在css中访问它们（对于您想要编辑的细节，例如电子邮件标题、电子邮件输入、提交按钮）

例如：

html

如果这不起作用

1.）清除缓存

2.）确保您的css文件实际包含在html中

3.）确保页面上附加到元素的每个“ID”都是唯一的

如果这样做不起作用，请使用您的开发工具并四处闲逛：在任何浏览器中点击（f12）

我就是这样解决的 CSS


形式{
文本对齐：居中；/*对齐表单中心*/
背景色：橙色；/*将背景色设置为橙色*/
}
#密码{/*如果使用class属性，请使用.password{}*/
/*要修改此部分，请执行以下操作：*/
}
#电子邮件{
宽度：200px；/*以调整电子邮件栏的大小*/
}
#提交按钮{
颜色：#fff；/*文本颜色*/
背景色：#5cb85c；/*背景色绿色*/
边框颜色：#4cae4c；/*边框颜色浅绿色*/
}

HTML


登录表单
电邮地址：




密码：

我是这样解决的 CSS


形式{
文本对齐：居中；/*对齐表单中心*/
背景色：橙色；/*将背景色设置为橙色*/
}
#密码{/*如果使用class属性，请使用.password{}*/
/*要修改此部分，请执行以下操作：*/
}
#电子邮件{
宽度：200px；/*以调整电子邮件栏的大小*/
}
#提交按钮{
颜色：#fff；/*文本颜色*/
背景色：#5cb85c；/*背景色绿色*/
边框颜色：#4cae4c；/*边框颜色浅绿色*/
}

HTML


登录表单
电邮地址：




密码：

将标签包装在输入周围是一种方法（在技术上是有效的），另一种方法是使用for属性。后者通常被认为更容易被一些人接受，因为它避免了额外跨度的需要

<form id="loginform" action="" method="post">
  <div class="input">
    <label for="username">Username</label>
    <input type="text" name="username" id="username" />
  </div>
  <div class="input">
    <label for="password">Passowrd</label>
    <input type="password" name="password" id="password" />
  </div>
  <input type="submit" value="Log On" class="btn" />
</form>

否则，将输入嵌套在标签中就不需要

for

属性

<body id="login">
<div id="wrapper">

<div id="loginform">
  <form id ="login" name="login" action = "" method="post" accept-charset="utf-8" class="smart-green">    
     <h1>Login Form</h1> 
      <label>
      <span>Email Address:</span>
      <input id="email" type="text" name="email" placeholder="Enter a valid email address" />
      </label>

      <label>
        <span>Password:</span>
        <input id="password" type="password" name="password" placeholder="Password" />
      </label>

      <label>
        <span>&nbsp;</span>
        <input type="submit" value="Send" />
        </label> 
  </form>
</div>
</div>

#login > label
{
  /* Style for input pair */
  margin-bottom: 3px;
}

#login label > span
{
  /* Style for the label text */
  display:block;
}

#login > label > input
{
  /* Style for the input itself. */
  background: yellow;
}