您的位置：首页 > Web前端 > CSS

有关表单与CSS的基础知识及实例应用（新手，有待完善...）

2016-03-20 15:36 811 查看

表单的提交以及传参方式

<form action="" method="get">

....

</form>

只有含有name属性的表单组件才可以

向服务端传递参数。

某些表单组件如果想要正确传递参数，

需要设置value属性:

radio checkbox select

如何设置表单组件的默认值：

<input type="text" value=""/>

<input checked="checked" type="radio"/>

<input checked="checked" type="checkbox"/>

<select>

<option></option>

<option selected="selected"></option>

<option></option>

</select>

HTML中的列表标签：

<ul>    描述一个列表

<li></li>   描述一个列表项

<li></li>

<li></li>

<li></li>

</ul>

CSS 级联样式表

1>搭建页面的整体布局。

2>对页面标签组件的样式渲染。

CSS代码的组成部分：

css选择器

选出当前页面中的一个或多个标签。

css样式属性

当使用选择器选出标签后，在{}中

使用样式属性渲染这些标签。

CSS选择器：

选出当前页面中的一个或多个标签。

1>通配符选择器：

选出当前页面中的所有标签。

*{ ... }

css代码的基本写法：

i)创建外部css文件，后缀名需为.css

在该文档中编写css代码。

ii)在html页面中使用link标签把外部

的css文档引入HTML页面。

2>标签选择器

选出当前页面中标签名称符合要求的

所有标签。

li {}

h3 {}

3>id选择器

选出当前页面中id属性值符合要求的

唯一标签。

#li2 { .. }

id选择器的优先级是最高的

4>class选择器 (类选择器)

先定义一类样式，如果页面中的某些

标签需要这一类样式，只需要设置

这些标签的class属性即可。

.c1 { width:100px; }

.c2 { height:200px; }

<h3 class="c1 c2 c3"></h3>

.li{paddingleft:10px; background-image:上箭头;}

<li class="li"></li>

5>分组选择器

把多个选择器选出的标签当成一组，

然后给这1组标签加样式。

h1,h2,h3,h4,div,#li2,.w100 {.}

6>派生选择器

通过父标签找到子标签，然后给这些

子标签添加样式。

<ul>

    <li class="w100"></li>

    <li class="w200"></li>

</ul>

<div class="w100"></li>

派生选择器选出ul中的li：

ul li{ .... }

ul .w100 { }

css样式属性

当使用选择器选出标签后，在{}中

使用样式属性渲染这些标签。

布局属性

背景属性

字体属性

文本属性

边框属性

列表属性

布局属性

BOX模型(盒子模型)

div width:200; height:200;

      padding:20px;

width: 宽度

height: 高度

margin: 外边距

margin:10px; 四个方向全部是10px

margin:10px 20px; 上下10px 左右20px

margin:0px auto; 居中

margin:apx bpx cpx dpx; 上右下左

margin-left:

margin-top:

margin-bottom:

margin-right:

padding: 内边距

padding: 10px;

padding:10px 20px;

padding:a b c d; 上右下左

padding-top:

padding-bottom:

padding-right:

padding-left:

背景属性 background

background-color: 背景颜色

red | blue | yellow | .....

#ffffff

#abc --> #aabbcc

rgb(255,255,255)

background-image: 背景图片

url(图片路径)

background-repeat: 背景图片的平铺方式

repeat 默认值

repeat-x 沿x轴平铺

repeat-y 沿y轴平铺

no-repeat 不平铺

background-position: 背景图像的定位

10px 20px;

字体属性：font

font-size: 字体大小

15px

1em    0.9em   1.1em

font-family: 字体

font-family: 黑体;

font-style: 字体样式

normal: 普通

italic: 斜体字

font-weight: 字体磅值 (粗细)

100~900 值越大字越粗

lighter 细的

normal 普通

bold    加粗

bolder 更粗

文本属性：text

color: 文本颜色

red | blue | ....

#ffffff

#abc

rgb(255,255,255)

text-align: 文本的对齐方式

left | center | right

line-height: 行高

text-decoration: 文本的装饰

none 没有装饰

underline

overline

line-through

边框属性：

border: 1px solid black;

border-width: 边框宽度

border-top-width:

border-bottom-width:

border-left-width:

border-right-width:

border-style: 边框样式

border-top-style:

border-bottom-style:

border-left-style:

border-right-style:

[b]border-color: 边框颜色

border-top-color:

border-bottom-color:

border-left-color:

border-right-color:

列表属性：

list-style: 控制列表项的显示方式

css复杂属性：

display: 控制组件的显示方式

none:把控件隐藏。

block:把控件按照块级标记的方式显示。

块级标记：

div ul li p h1 h2 h3 .....

一个标签占用1整行

行级标记：

i u s a img .....

一行中可以输出多个行级标记

我们有很多情况下，需要把行级标记

按照块级标记来显示。因为只有块

级标记才可以设置width和height属性。

float: 浮动

可以实现块级标记横向排列。

left

right

简单的实例演示CSS的功能：

显示成品图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航