CSS学习（中1/2） 前端入门很简单

CSS学习（中1/2） 前端入门很简单目录

 

三 用CSS设计图像和背景

1.设置网页的背景

2..设置背景图像的属性

3.设置网页图像的样式

四 用CSS设置表格和表单样式

1.网页中的表格

2.网页中的表单

---

三 用CSS设计图像和背景

1.设置网页的背景

1.background-color属性：不但可以设置网页的背景颜色，还可以设置文字的背景颜色

基本语法：

background-color：颜色取值

语法说明：

背景颜色用于设置对象的背景颜色。背景颜色的默认值是透明色，大多数情况下可以不用此方法进行设置。background-color属性可以用于各种网页元素。

实例代码：

<style>

.table {

background-color:#D331DD;

}

</style>

2.background-image属性

基本语法：

background-image:url（图像地址）

语法说明：

图像地址可以是绝对地址，也可以是相对地址。

实例代码：

<style type=”text/css”>

.div{

background-image: url(1.jpg);

}

</style>

2..设置背景图像的属性

1.background-repeat属性：设置是否及如何重复背景图像。

基本语法：

background-repeat:no-repreat |repeat| repeat-x|repeat-y;

语法说明：

属性值	描述
no-repeat	背景图像不重复，仅显示一次
repeat	默认。背景图像将在垂直方向和水平方向重复
repeat-x	背景图像只在水平方向重复
repeat-y	背景图像只在垂直方向重复

 

2.background-attachment属性：固定背景属性

基本语法：

background-attachment：scroll | fixed；

语法说明：

属性值	描述
scroll	背景图像随对象内容滚动
fixed	背景图像固定

 

3.background-position属性：设置对象的背景图像位置

基本语法：

background-position: 450px 360px;

语法说明：

background-position的属性值

设置值	藐视
X（数值）	设置网页的横向，单位可以是所有尺度单位
Y（数值）	设置网页的纵向位置，单位可以是所有尺度单位

实例代码：

<style type=”text/css”>

.div {

background-image: url(4.jpg);

background-repeat: repeat-y;

background-fixed;

background-attachment: fixed;

background-position: 100px 160px;

}

</style>

 

3.设置网页图像的样式

1.border属性：为图像添加边框线

代码实例：

<style type=”text/css”>

.dv {

border: 5px solid(实现) #FF5D5F;

}

</style>

*dashed(虚线)

 

2.图文混合排班：插入图片，为了使文字和图像之间保留一定的内边距，还要定义.pic的填充属性

实例代码：

<style type=”text/css”>

.duiqi {

padding: 11px;

float: right;

}

</style>

 

四 用CSS设置表格和表单样式

1.网页中的表格

1.表格对象标记：表格的行、列和单元格都可以进行赋值、粘贴，在表格中还可以插入表格，表格嵌套使设计更加方便。

实例代码：

<table width=”500” height=”1” cellpadding=”1” cellspacing=”1” bordercolor=”#FF0000”>

<tr>

<td bgcolor=”#038628”> </td>

<td bgcolor=”#038628”> </td>

<td bgcolor=”#038628”> </td>

</tr>

<tr>

<td bgcolor=”#038628”> </td>

<td bgcolor=”#999966”> </td>

<td bgcolor=”#038628”> </td>

</tr>

<tr>

<td bgcolor=”#038628”> </td>

<td bgcolor=”#038628”> </td>

<td bgcolor=”#038628”> </td>

</tr>

</table>

表格还有caption、tbody、thead和th标记。

语法说明：

.caption：可以通过<caption>来设置标题单元格，一个<table>表格只能含一个<caption>标记定义表格标题。

.tbody：用于定义表格的内容区，如果一个表格由多个内容区构成，可以使用多个tbody组合。

.thead和th：thead用于定于表格的页眉，th定义页眉的单元格，通过适当的标出表格的页眉可以时表格更加有意义。

 

2.表格的bgcolor属性：设置表格的背景颜色

3.表格的border样式

4.设置表格的阴影

 

2.网页中的表单

  表单的作用是可以与站点的访问者进行交互，或收集信息，然后提交至服务器进行处理。表单中可以包含各种表单对象。

1.表单对象

  表单由两个重要的部分组成：一是在页面中看到的表单界面；二是处理表单数据的程序，它可以是客户端应用程序，也可以是服务器单的程序。

  创建表单后，需要在其中添加表单对象才能实现表单的作用。可以插入到表单中的对象有文本域、单选按钮、复选框、列表/菜单、按钮、图像域等。

 

2.表单标记

基本语法：

<form name=”form_name” method=”method” action=”url” enctype=”value”

target=”target__win”>

</form>

<form>标记的属性如下：

name	表单的名称
method	定义表单结果从浏览器传送到服务器的方法，get/post
action	用来定义表单处理程序（ASP、CGI等程序）的位置
enctype	设置表单资料的编码方式
target	设置返回信息的显示方式
input	写入标记
select option	菜单下拉列表框
texttarea	多行的文本框

 

3.表单的布局设计

  页面由一个居中的Div对象作为表单的主容器，在这个容器内用一个表格来布局表单对象，表格对数据的排列方式方式非常适合于表单元素的排列。因此，表格是表单布局的主要工具。目前很多大型网站都采用表格来对表单进项布局，特别是一些复杂的表单。

 

4.设置边框样式

  表单对象支持边框属性，边框属性提供了10多种样式

<style>

.formstyle {

border:3px solid #1BA70A

}

-->

</style>

 

5.设置背景样式

<style>

.formstyle {

border:3px solid #1BA70A; background-color: #A1FF8A;

}

-->

</style>

 

6.设置输入文本的样式

<style>

.formstyle {

border: 2px solid #2F9FA8;

background-color: #CAE7F9;

background-repeat: repeat-x;

font-family: “隶书”;

color: #993300;

}

-->

</style>