书签分享收藏举报版权申诉 / 32

立即下载加入VIP,免费下载

当前位置：首页 > 高中教育 > 语文 > CSS一.docx

CSS一.docx

文档编号：23812595
上传时间：2023-05-21
格式：DOCX
页数：32
大小：199.76KB

CSS一.docx

《CSS一.docx》由会员分享，可在线阅读，更多相关《CSS一.docx（32页珍藏版）》请在冰豆网上搜索。

CSS一.docx

CSS一

常用CSS元素divuldldtol的简单解释

几个css元素的简单解释divuldldtoldiv，这个很常见，块级元素，div尽量少用，和table一样，嵌套越少越好

ol有序列表。

……

……

……

表现为：

1……

2……

3……

ul无序列表，表现为li前面是大圆点而不是123

……

……

很多人容易忽略dldtdd的用法

dl内容块

dt内容块的标题

dd内容

可以这么写：

标题: 内容1; 内容2

dt和dd中可以再加入olulli和p

理解这些以后，在使用div布局的时候，会方便很多，w3c提供了很多元素辅助布局.

详细讲解HTML的BODY标记的内部参数

bgcolor="#3366cc"----------背景颜色

topmargin=0leftmargin=0----------网页内容上/左边界为0

oncontextmenu="returnfalse"----------鼠标右键限制

ondragstart="returnfalse"----------禁止移动

onselectstart="returnfalse"----------禁止选择

oncopy="returnfalse;"----------禁止拷贝

onpaste="returnfalse"----------禁止粘贴

oncut="returnfalse;"----------禁止剪切

scroll=no----------网页滚动条限制

style="overflow:

scroll;overflow-y:

hidden;overflow-x:

hidden;"----------定义滚动条的竖向横向掩藏。

style="cursor:

move">----------网页鼠标样式选择

一般而言，鼠标以斜向上的箭头显示，移到文本上时变为有头的竖线，移到超级链接上变为手型。

但用css可控制鼠标的显示效果，如可使鼠标移到普通文本上也显示成手型。

用css控制的语法如下:

*">文本或其它页面元素

注：

其中的span可以是其他的标记，如：

p、font、div等。

把*换成如下16个效果的一种：

hand,text,wait等等。

下面是对这16种效果的解释。

移动鼠标到解释上面，看看你的鼠标起了什么变化吧！

hand是手型

crosshair是十字型

text是移动到文本上的那种效果

wait是等待的那种效果

default是默认效果

help是问号

e-resize是向右的箭头

ne-resize是向右上的箭头

n-resize是向上的箭头

nw-resize是向左上的箭头

w-resize是向左的箭头

sw-resize是左下的箭头

s-resize是向下的箭头

se-resize是向右下的箭头

auto是由系统自动给出效果

move是移动时的效果

“*”还可以是鼠标图片的文件地址。

Step1，做个图标arrow_r.cur

Step2，CSS中BODY{cursor:

url（"arrow_r.cur"）,url（"arrow_r.cur"）,default;}

Step3，页面中连接CSS

网页制作知识总结：

常用的CSS知识

1.Block和inline元素对比

所有的HTML元素都属于block和inline之一。

block元素的特点是：

总是在新行上开始；

高度，行高以及顶和底边距都可控制；

宽度缺省是它的容器的100%，除非设定一个宽度

,
,
和
是块元素的例子。
相反地，inline元素的特点是：
和其他元素都在一行上；
高，行高及顶和底边距不可改变；
宽度就是它的文字或图片的宽度，不可改变。
,,,,,和是inline元素的例子。
用display:
inline或display:
block命令就可以改变一个元素的这一特性。
什么时候需要改变这一属性呢？
让一个inline元素从新行开始；
让块元素和其他元素保持在一行上；
控制inline元素的宽度（对导航条特别有用）；
控制inline元素的高度；
无须设定宽度即可为一个块元素设定与文字同宽的背景色。
2.再来一个box黑客方法
之所以有这么多box黑客方法，是因为IE在6之前对box的理解跟别人都不一样，它的宽度要包含边线宽和空白。
要想让IE5等同其他浏览器保持一致，可以用CSS的方法：
padding:
2em;
border:
1emsolidgreen;
width:
20em;
width//:
//14em;
第一个宽度所有浏览器都认得，但IE5.x不认得第2行的宽度设置，只因为那一行上有空白的注释符号（多么蠢的语法分析！
），所以IE5.x就用20减掉一些空白，而其他浏览器会用14这个宽度，因为它是第2行，会覆盖掉第1行。
3.页面的最小宽度
min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。
但IE不认得这个，而它实际上把width当做最小宽度来使。
为了让这一命令在IE上也能用，可以把一个
放到标签下，然后为div指定一个类：
然后CSS这样设计：
#container
{
min-width:
600px;
width:
expression（document.body.clientWidth<600?
"600px":
"auto"）;
}
第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。
它实际上通过Javascript的判断来实现最小宽度。
同样的办法也可以为IE实现最大宽度：
#container
{
min-width:
600px;
max-width:
1200px;
width:
expression（document.body.clientWidth<600?
"600px":
document.body.clientWidth>1200?
”1200px“:
”auto";
}
4.IE与宽度和高度的问题
IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。
这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。
比如要设置背景图片，这个宽度是比较重要的。
要解决这个问题，可以这样：
.box
{
width:
80px;
height:
35px;
}
body.box
{
width:
auto;
height:
auto;
min-width:
80px;
min-height:
35px;
}
所有的浏览器都可以使用第一个box设置，但IE不认得第2段设置，因为其中用到了子选择器命令。
第2个设置更特殊些，所以它会覆盖掉第1个设置。
5.字体变形命令
text-transform命令很有用，它有3个值：
text-transform:
uppercase,text-transform:
lowercase和text-transform:
capitalize。
第1个会把文字变成全大写，第2个变成全小写，第3个变成首字母大写。
这对拼音文字非常有用，即使输入时有大小写错误，在网页上也看不到。
6.IE中图片文字消失的问题
有时会遇到文字或背景图突然消失的问题，刷新一下又出现了，这在靠近漂浮元素时更容易发生（注：
没见过）。
此时，可以为消失的元素设定：
position:
relative，如果不行，再考虑为这些元素指定一个宽度试试。
7.不可见文字
不论因为何种原因希望某些网页文字不在浏览器中显示，比如为了打印或为了小屏幕而让某些文字不显示，都可以用display:
none。
这非常简单，但有时对某些人这有点没用，他们能去掉这个控制，这时就要用到：
position:
absolute;left:
-9000px。
这实际上是把文字指定在页面以外显示。
8.为手持设备设计专门的CSS
也就是手机／PDA等小屏幕用户，可以专门设计一个CSS来让网页显示更舒服些。
为此，可以把浏览器窗口调整到150点宽来看效果。
指定专门的手持设备的CSS的语法是：
也可以阅读专门的手持设备可用性。
9.3D效果的按钮
以前要想制作带有3D效果，并且点击下去还会变化的按钮，就得用图片替换的方法，现在CSS就可以了：
a
{
display:
block;
border:
1pxsolid;
border-color:
#aaa#000#000#aaa;
width:
8em;
background:
#fc0;
}
a:
hover
{
position:
relative;
top:
1px;
left:
1px;
border-color:
#000#aaa#aaa#000;
}
至于效果，还可以自己调整了。
10.在不同页面上使用同样的导航代码
许多网页上都有导航菜单，当进入某页时，菜单上相应这一项就应该变灰，而其他页亮起来。
一般要实现这个效果，需要写程序或专门为每一页做设计，现在靠CSS就可以实现这个效果。
首先，在导航代码中使用CSS类：

Home
Aboutus
Contactus
然后分别为每一页的Body指定一个id，和上面类同名。
如。
然后设计CSS如下：
#home.home,#about.about,#about.about
{
commandsforhighlightednavigationgohere
}
这里，当id设为home时，.home就会起作用，也就是class设为home的那一行导航条就会显示出特殊效果来。
其他页也是如此。
网页导航上用CSS标志当前页效果的实现
当前页面--比如说现在的页面是首页，那么在导航栏上首页的色彩等和其他栏目有所不同，用以给浏览者一个明显的指示。
下面来说下具体的做法，菜单的基本实现和一般的CSS菜单没多大区别，着重说下如何实现当前页。
设菜单有5个栏目：
home、about、products、services、contact，分别给每个栏目一个ID，m1-m5，CSS可写成如下：
#home#navli#m1a,#about#navli#m2a,#products#navli#m3a,#services#navli#m4a,#contact#navli#m5a{color:
#FFF;background:
#DC4E1Burl（navbg.gif）no-repeat;}
xhtml：
Home
About
Products
Services
Contact
然后分别给每个页面的bady标签一个独立的ID，例如给首页的ID是home，其余的类推。
这样做法的好处是每个页面的菜单都是一样的，方便修改，动态页包含也容易。

DIV+CSS网页布局常用的方法与技巧
CSS布局常用的方法
float:
none|left|right
取值：
none:
默认值。
对象不飘浮
left:
文本流向对象的右边
right:
文本流向对象的左边
它是怎样工作的，看个一行两列的例子
xhtml代码:
ExampleSourceCode
这里是第一列

这里是第二列

/*这是违背web标准意图的，只是想说明在它下面的元素需要清除浮动*/

CSS代码:

ExampleSourceCode

#wrap{width:

100;height:

auto;}

#column1{float:

left;width:

40;}

#column2{float:

right;width:

60;}

.clear{clear:

both;}

position:

static|absolute|fixed|relative

取值：

static:

默认值。

无特殊定位，对象遵循HTML定位规则

absolute:

将对象从文档流中拖出，使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。

如果不存在这样的父对象，则依据body对象。

而其层叠通过z-index属性定义

fixed:

未支持。

对象定位遵从绝对（absolute）方式。

但是要遵守一些规范

relative:

对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置

它来实现一行两列的例子

xhtml代码:

ExampleSourceCode

这里是第一列

这里是第二列

显然，float是相对定位的，会随着浏览器的大小和分辨率的变化而改变，而position就不行了，所以一般情况下还是float布局！

CSS一.docx

Thisisthemaincontent.

Thisistheleftsidebar.

Thisistherightsidebar.

CSS一.docx

Thisisthemaincontent.

Thisistheleftsidebar.

Thisistherightsidebar.

热门标签