css(二)

html-css012

css(二),第1张

1.有序列表:每项之间有先后顺序,默认在每项前面显示1,2,3…

<ol type="A">:在每项前面显示A,B,C…

<ol type="a">:在每项前面显示a,b,c…

<ol type="I">:在每项前面显示I,II,III…

有序列表ol增加了一个属性, <ol start="50">,这样就指定了起始值从50开始

2.无序列表使用一对闭合的标签表示, <ul></ul>。内部的一项使用 <li>内容 </li>来表示。

可以通过ul标签的type属性来修改这个修饰符。

<ul type="disc">显示为一个圆点,是默认值

<ul type="circle">显示为一个空心圆圈

<ul type="square">显示为一个实体正方形

“无序”指的是没用数字或字母等来标记,不是像1,2,3或a,b,c这样的显示,而是前面增加一个圆点来表示。

3.自定义列表

<dl>标签全称是definition list,代表“自定义列表”。 <dl>后面的l代表list,列表的意思。

<dt>标签全称是definition term,代表 “自定义项”。一个自定义列表dl内部可以包括多个自定义项dt。 <dt>后面的t代表term,“项目”的意思。

<dd> 标签的全称是definition description,代表“自定义描述”。一个自定义项dt后面跟一个自定义描述dd。 <dd>后面的d代表description,“描述”的意思。

例子:

使用 list-style-type: none

id:指定标签的唯一标识

class:指定标签的类名,class可以通过给多个元素赋予同一class,批量操作来设置css

块元素都是独立显示,把内容分割成块,是网页的主要结构模块;行内元素,即内联元素,只显示在段落的文字流中,是用来标记内容的小片段

块级元素标签 h,ul,li,ol,p,div

行内元素标签 a,em,q, img,span

页面分:头部、内容、底部,头部有三个导航栏,内容有侧边栏和中心区块,三个区块结构里面共用了一个class样式。

语义化:使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解。

1.<form>标签用于为用户输入创建 HTML 表单。表单用于向服务器传输数据。

<form name="myForm" action="/test/6.php" method="post">

name:表单提交时的名称;

action:提交到的地址,如果不写action,信息就会提交到当前页面;

method:提交方式(get和post),如果不写,默认的是get

2.常用标签:

复选框当中,可以把name值设置成一个数组,例:

<button>提交 </button> ——普通按钮,button默认是不提交任何数据,需要绑定事件才可以用提交数据

<a class="btn" href="#">提交 </a> ——链接

<input type="submit" value="提交"> ——提交按钮,提交信息到服务器

设置name值实现分组,如果name值相同,则表示它们是一组,可以实现单选。

placeholder 属性提供可描述输入字段预期值的提示信息。

该提示会在输入字段为空时显示,并会在字段获得焦点时消失。

隐藏域在页面中对于用户是不可见的,在表单中插入隐藏域的目的在于收集或发送信息,以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候,隐藏域的信息也被一起发送到服务器。

<input type="hidden" name="identity" value="123">

CSS历史:

从1990年代初HTML被发明开始样式表就以各种形式出现了,不同的浏览器结合了它们各自的样式语言,读者可以使用这些样式语言来调节网页的显示方式。

一开始样式表是给读者用的,最初的HTML版本只含有很少的显示属性,读者来决定网页应该怎样被显示。

但随着HTML的成长,为了满足设计师的要求,HTML获得了很多显示功能。

随着这些功能的增加外来定义样式的语言越来越没有意义了。

1994年哈坤·利提出了CSS的最初建议。

伯特·波斯(Bert Bos)当时正在设计一个叫做Argo的浏览器,他们决定一起合作设计CSS。

当时已经有过一些样式表语言的建议了,但CSS是第一个含有“层叠”的主意的。

在CSS中,一个文件的样式可以从其他的样式表中继承下来。

读者在有些地方可以使用他自己更喜欢的样式,在其他地方则继承,或“层叠”作者的样式, 这种层叠的方式使作者和读者都可以灵活地加入自己的设计,混合各人的爱好。

哈坤于1994年在芝加哥的一次会议上第一次展示了CSS的建议,1995年他与波斯一起再次展示这个建议。

当时W3C刚刚建立,W3C对CSS的发展很感兴趣,它为此组织了一次讨论会。

哈坤、波斯和其他一些人(比如微软的托马斯·雷尔登)是这个项目的主要技术负责人。

1996年底,CSS已经完成。

1996年12月CSS要求的第一版本被出版。

1997年初,W3C内组织了专门管CSS的工作组,其负责人是克里斯·里雷。

这个工作组开始讨论第一版中没有涉及到的问题,其结果是1998年5月出版的第二版要求。

到2007年为止,第三版还未完备。

使用CSS+DIV的优点

采用CSS+DIV进行网页重构相对与传统的TABLE网页布局而具有以下3个显著优势:

1:表现和内容相分离

将设计部分剥离出来放在一个独立样式文件中,HTML文件中只存放文本信息。

这样的页面对搜索引擎更加友好。

2:提高页面浏览速度 

对于同一个页面视觉效果,采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多,前者一般只有后者的1/2大小。

浏览器就不用去编译大量冗长的标签。

3:易于维护和改版

你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。

具体说明请见百度知道CSS发展史.

----------------------------------------------------------------------------------------------

CSS2

样式单自从CSS1的版本之后,又在1998年5月发布了CSS2版本,样式单得到了更多的充实。

CSS2.0是一套全新的样式表结构,是由W3C推行的,同以往的CSS1.0或CSS1.2完全不一样,CSS2.0推荐的是一套内容和表现效果分离的方式,HTML元素可以通过CSS2.0的样式控制显示效果,可完全不使用以往HTML中的table和td来定位表单的外观和样式,只需使用div和 Li此类HTML标签来分割元素,之后即可通过CSS2.0样式来定义表单界面的外观。

CSS2.0提供给我们了一个机制,让程序员开发时可以不考虑显示和界面就可以制作表单和界面,显示问题可由美工或是程序员后期再来编写相应的 CSS2.0样式来解决。

不过由于CSS2.0目前尚未见过很好的编辑软件,所以无法做到所见即所得,编写起来不易。

----------------------------------------------------------------------------------------------

CSS3

CSS3语言开发是朝着模块化发展的。

以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。

这些模块包括:

盒子模型

列表模块

超连结方式

语言模块

背景和边框

文字特效

多栏布局

CSS3选择器

CSS3增加了更多的CSS选择器,可以实现更简单但是更强大的功能,比如:nth-child等。

时间表

几个模块现已完成,包括的SVG (可扩展矢量图形) ,媒介资源类型(Media Queries)和命名,而其他的模块开发工作则仍在进行中。

如果要给出一个预定的日期的话,非常困难,不管怎样,web浏览器将全面支持CSS3的各种新特点,一些新的探索已经开始了。

针对不同浏览器,新的功能是逐渐应用的,仍然需要1-2年的时间,每一个新的模块才有可能被广泛应用。

CSS3将给我带来哪些新的影响

首先,我们希望,这是个正确的方式,CSS3将完全向后兼容,所以没有必要修改现在的设计来让它们继续运作。

网络浏览器也还将继续支持CSS2。

对我们来说,CSS3主要的影响是将可以使用新的可用的选择器和属性,这些会允许你实现新的设计效果(譬如动态和渐变),而且可以很简单的设计出现在的设计效果(比如说使用分栏)。