初探HTML/CSS（三）

在上一篇文章中我们介绍了一些常用标签，但是还有一个非常重要的标签没有介绍，那就是与用浏览者交互的表单标签。

表单标签

用途：用于浏览者与浏览器交互。
语法：

//method:指传输数据的方式,例如get,post
//action:被传送到的地方。比如某个php页面。
<form   method="传送方式"   action="服务器文件">
     //提交按钮
     //type：只有当type值设置为submit时，按钮才有提交作用
     //value：按钮上显示的文字
    <input type="submit" value="提交">
     //重置按钮
    <input type="reset" value="重置">

    //输入框
    <input type="text" name="username" />
    //密码框
    <input type="password" name="pass" />

    //单选框  
    //value:提交数据到服务器的值（后台程序PHP使用）
    //name:为控件命名，以备后台程序 ASP、PHP 使用
    //checked:当设置 checked="checked" 时，该选项被默认选中
    <input type="radio" value="值" name="名称" checked="checked"/>
    //复选框 
    //参数同radio
    <input type="checkbox" value="值" name="名称" checked="checked"/>

    //文本域 cols:列书 rows:行数
    <textarea cols="50" rows="10" >在这里输入内容.

    //下拉列表框
    <select>
      <option value="看书">看书</option>
      <option value="旅游" selected="selected">旅游</option>
      <option value="运动">运动</option>
      <option value="购物">购物</option>
    </select>
</textarea>
</form>

显示效果：

Snip20161215_1.png

CSS:层叠样式表 (Cascading Style Sheets)

作用:主要是用来定义HTML内容在浏览器内的显示样式。比如字体颜色，大小，以及边框线粗细等。

插入形式：

1.内联式

内联式是指直接将CSS代码写在HTML标签中，如：

<p style="color:red">这里文字是红色。</p>

2.嵌入式

嵌入式是将CSS代码<style type="text/css"></style>标签之间的方式

<style type="text/css">
span{
color:red;
}
</style>

3.外部式

外部式是指将CSS写在HTML文件以外的地方文件中，并用<link>标签将css样式文件链接到HTML文件内。

<link href="**base.css**" rel="stylesheet" type="text/css" />

CSS选择器

介绍选择器是为了更准确的选择指定的标签，从而对指定标签中的内容做样式的修改。

1.标签选择器

花括号外是标签名，可修改HTML文件中所有p标签下的内容样式

p{font-size:12px;line-height:1.6em;}

2.类选择器

为每一个标签规定类名，就可以根据类名来选择指定标签了。多个标签可以使用同一个类名。

//以内联式写法为例
<style type="text/css">
.stress{
color:red;
}
</style>
<p class="stress">类选择器内容</p>

3.id选择器

为每一个标签规定id，就可以根据id来选择指定标签了。id名唯一。

//以内联式为例
<style type="text/css">
#setGreen{
color:red;
}
</style>
<p id="setGreen">id选择器</p>

4.子选择器

子选择器用于选择指定标签元素的第一代子元素

<style type="text/css">
.food>li{
color:red;
}
</style>
<ul class="food">
    <li>水果
        <ul>
            <li>香蕉</li>
            <li>苹果</li>
            <li>梨</li>
        </ul>
    </li>
</ul>

5.包含选择器

选择该标签下所有的后辈元素

<style type="text/css">
#setGreen  p{color:red;}
</style>
<p id="setGreen">id选择<span>器</span></p>

6.通用选择器

选择所有的html标签元素

<style type="text/css">
*{
color:red;
}
</style>
<ul class="food">
    <li>水果
        <ul>
            <li>香蕉</li>
            <li>苹果</li>
            <li>梨</li>
        </ul>
    </li>
</ul>

CSS格式化排版

1.字体 字号 颜色

*{
  font-family:"宋体";
  font-size:12px;
  color:#666
}

3.粗体 斜体

*{
  //粗体
  font-weight:bold;
  //斜体
  font-style:italic;
}

4.下划线 删除线

*{
  //underline:下划线  删除线:line-through
  text-decoration:underline;
}

5.行间距 字间距

*{
  //行间距
  line-height:1.5em;】
  //字间距
  letter-spacing:50px;
}

6.对齐 缩进

*{
  //left:左对齐 right:右对齐 center:居中
  text-align:center;
  //缩进 2em就是文字的两倍大小
  text-indent:2em;
}