css cursor属性?CSS样式cursor
各位老铁们好,相信很多人对css cursor属性都不是特别的了解,因此呢,今天就来为大家分享下关于css cursor属性以及CSS样式cursor的问题知识,还望可以帮助大家,解决大家的一些困惑,下面一起来看看吧!
css中cursor属性详解
cursor属性规定要显示的光标的类型(形状)。
该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状
值
描述
url
需使用的自定义光标的 URL。
注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL定义的可用光标。
default默认光标(通常是一个箭头)
auto默认。浏览器设置的光标。
crosshair光标呈现为十字线。
pointer光标呈现为指示链接的指针(一只手)
move此光标指示某对象可被移动。
e-resize此光标指示矩形框的边缘可被向右(东)移动。
ne-resize此光标指示矩形框的边缘可被向上及向右移动(北/东)。
nw-resize此光标指示矩形框的边缘可被向上及向左移动(北/西)。
n-resize此光标指示矩形框的边缘可被向上(北)移动。
se-resize此光标指示矩形框的边缘可被向下及向右移动(南/东)。
sw-resize此光标指示矩形框的边缘可被向下及向左移动(南/西)。
s-resize此光标指示矩形框的边缘可被向下移动(南)。
w-resize此光标指示矩形框的边缘可被向左移动(西)。
text此光标指示文本。
wait此光标指示程序正忙(通常是一只表或沙漏)。
help此光标指示可用的帮助(通常是一个问号或一个气球)。
css的属性有哪些
希望能帮到你属性名称
字体属性(Font)
font-family
font-style
font-variant
font-weight
font-size
颜色和背景属性
Color
Background-color
Background-image
Background-repeat
Background-attachment
Background-position
文本属性
Word-spacing
Letter-spacing
Text-decoration
Vertical-align
Text-transform
Text-align
Text-indent
Line-height
边距属性
Margin-top
Margin-right
Margin-bottom
Margin-left
填充距属性
Padding-top
Padding-right
Padding-bottom
Padding-left
边框属性
Border-top-width
Border-right-width
Border-bottom-width
Border-left-width
Border-width
Border-color
Border-style
Border-top
Border-right
Border-bottom
Border-left
Width
Height
Float
Clear
分级属性
Display
White-space
List-style-type
List-style-image
List-style-position
List-style
鼠标(Cursor)属性属性含义
使用什么字体
字体是否斜体
是否用小体大写
字体的粗细
字体的大小
定义前景色
定义背景色
定义背景图案
重复方式
设置滚动
初始位置
单词之间的间距
字母之间的间距
文字的装饰样式
垂直方向的位置
文本转换
对齐方式
首行的缩进方式
文本的行高
顶端边距
右侧边距
底端边距
左侧边距
顶端填充距
右侧填充距
底端填充距
左侧填充距
顶端边框宽度
右侧边框宽度
底端边框宽度
左侧边框宽度
一次定义宽度
设置边框颜色
设置边框样式
一次定义顶端
一次定义右侧
一次定义底端
一次定义左侧
定义宽度属性
定义高度属性
文字环绕
哪一边环绕
定义是否显示
怎样处理空白
加项目编号
加图案
第二行起始位置
一次定义列表
自动
定位“十”字
默认指针
手形
移动
箭头朝右方
箭头朝右上方
箭头朝左上方
箭头朝上方
箭头朝右下方
箭头朝左下方
箭头朝下方
箭头朝左方
文本“I”形
等待
帮助
属性值
所有的字体
Normal、italic、oblique
Normal、small-caps
Normal、bold、bolder、lithter等
Absolute-size、relative-size、length、percentage等
颜色
颜色
路径
Repeat-x、repeat-y、no-repeat
Scroll、Fixed
Percentage、length、top、left、
right、bottom等
Normal<length>
同上
None|underline|overline|line-
through|blink
Baseline|sub|super|top|text-top|middle|bottom|text-bottom|
Capitalize|uppercase|
lowercase|none
Left|right|center|justify
<length>|<percentage>
Normal|<number>|<length>|
<percentage>
Length|percentage|auto
同上
同上
同上
Length|percentage
同上
同上
同上
Thin|medium|thick|length
同上
同上
同上
同上
Color
None|dotted|dash|solid等
Border-top-width|color等
同上
同上
同上
Length|percentage|auto
Length|auto
Left|right|none
Left|right|none|both
Block、inline、list-item、none
Normal、pre、nowrap
Disc、circle、square等
<url>|none
Inside、outside
<keyword>|<position>|<url>
Auto
Crosshair
Default
Hand
Move
e-resize
Ne-resize
Nw-resize
n-resize
Se-resize
Sw-resize
s-resize
w-resize
Text
Wait
Help
css的基本语法
css的基本语法
cascading stylesheet(级联样式表)。为网页提供外观(也就是,网页的表现形式)。将网页的外观写在一个css文件里,方便页面代码的维护(将表现与数据分离)。为方便大家学习css,我为大家分享css的基本语法如下:
css的基本语法选择器{
属性1:属性值1;
属性n:属性值n;
符合选择器要求的标记,会添加对应的样式。
Chrome浏览器为SVG和CSS添加GPU加速功能
互联网有消息透露,谷歌正在为Chrome浏览器增加新的GPU加速功能。Chrome18浏览器将内建开关选项,让消费者选择使用GPU硬件加速基于矢量的SVG图形和CSS过滤器,让Chrome浏览器在未来网页显示上获得突破性速度,并且达成惊人的视觉效果。
Chrome浏览器的SVG和CSSGPU加速支持Windows,Mac,Linux和谷歌的Chrome操作系统,但目前这个功能仍然主要是实验性质,因为只有几个少数网站部署了SVG和CSSGPU加速。
但也有信息表示,tomshardware测试发现Chrome这项功能在显示目前网页方面,显示速度并没有出现任何显着增加,在WebVizHTML5基准测试当中出现了不稳定和崩溃问题。
评论表示,虽然SVG和CSSGPU加速还有待完善,但是Mozilla火狐、微软IE和其他版本浏览器之间的竞争,肯定会推动这种技术快速发展和完善。
设置容器中的内容垂直居中css代码
如实例1设置网页整体居中的代码中内容是居容器的顶部的,而在表格布局时默认是垂直居中的,当我们需要垂直居中的时候该怎么办呢?别害怕,跟我来,也是比较简单的,只用设置容器内的行高就行了。
line-height:500px;
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""">
<htmlxmlns="">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>标准之路www.aa25.cn</title>
<style>
#layout{width:778px;margin:0auto;text-align:center;border:1pxsolid#44b6dc;background:#e1edfb;height:500px;line-height:500px;}
</style>
</head>
<body><pid="layout">标准之路www.##.cn</p>
</body>
</html>
提示:可以先修改部分代码后再运行
这是一种方法,另外和种方法就是设置的`它内边距padding了,自己可以试试哟~~
CSS对不同浏览器的兼容性解决办法
CSS对不同浏览器的兼容性解决办法由于CSS在不同浏览器中存在兼容性问题,所以在使用 p+CSS布局中,可能导致相同的内容在不同浏览器中出现不同的显示效果,为了解决这些方面的问题,以下针对CSS某些属性的用法提出相应的一些解决办法。 1、页面居中问题在IE浏览器下,可以通过定义CSS样式body{text- align: center;}来实现页面居中,但在FireFox(以下简写为FF)浏览器下此属性就失效了。解决办法:使用"margin- left: auto; margin- right: auto;" www.diannao114.cn2、padding属性在不同浏览器的显示问题当给p设置padding属性后,在FF浏览器中会导致 width和height增加(p的实际宽度=p宽+Padding),但在 IE浏览器中width和height不会增加,这就导致相同的内容在不同浏览器中出现不同的显示效果。解决办法:给p设定IE、FF两个宽度,在IE的宽度前加上IE特有标记"*"号。例如:#pwidth{ padding:5px; width:100px;*width:110px;} 3、奇怪的间隙问题有的时候我们明明设好了高度,可在IE6上却看见一些奇怪的间隙。解决办法:试试在有空隙的p上加上"font- size:0px;" 4、关于手形光标要将页面内容的光标显示为手形,通常的做法是使CSS属性cursor: hand;但这于做法只适用于IE.解决办法:cursor: pointer; 5、浮动在IE6产生双倍距离问题例如:#box{ float:left; width:100px; margin:0 0 0 100px;}这种情况之下IE6会产生200px的距离。解决办法:在以上属性的基础上,加上display:inline,使浮动忽略。6、UL和FORM标签的padding与margin ul标签在FF中默认是有padding值的,而在IE中只有 margin默认有值。FORM标签在IE中,将会自动margin一些边距,而在FF中margin则是0;解决办法:css中首先都使用这样的样式ul,form{margin:0; padding:0;}。 7、截字省略号.hh{- o- text- overflow:ellipsis; text- overflow:ellipsis; white- space:nowrap; overflow:hidden;}这个CSS是定义当内容溢出宽度后会自行的截掉超出部分的文字,并以省略号结尾,但注意Firefox并不支持。
p+CSS网页布局的分类
p+CSS网页布局的分类1、一列固定宽度一列布局是所有布局的基础,也是最简单的布局方式,用 p+CSS布局的代码如下: XHTML代码:一列固定宽度CSS代码:#main1{ width: 400px; height: 300px; background- color:#EEEEEE; border: 1px solid#999999;} 2、一列自适应宽度自适应的布局能够根据浏览器窗口的大小自动改变其宽度和高度值,是网页设计中一种非常灵活的布局形式,用 p+CSS布局的代码如下: XHTML代码:一列自适应宽度CSS代码:#main2{ width: 70%; height: 300px; background- color:#EEEEEE; border: 1px solid#999999;} 3、一列固定宽度居中页面整体居中是网页布局中最常见到形式,在传统的表格布局中,使用TABLE的align="center"属性来实现,在p+CSS布局中采用如下代码来实现:XHTML代码:一列自适应宽度CSS代码: p+CSS网页布局方法探析。如今的网页设计考虑得更多的是搜索引擎以及给用户带来更多的便利,传统的TABLE网页布局由于其庞大的HTML代码,使得其在搜索引擎方面显得有些无能为力,而用p+CSS进行网页布局具有代码精简的优点使得其在这方面又体现出更多的优势。但是又由于CSS对不同浏览器存在兼容性问题,所以对于初学者来说,在使用p+CSS进行网页布局过程中可能会遇到各种问题,本文就给大家探讨几点p+CSS布局的技巧。4、二列固定宽度在有一列固定宽度布局的基础上,实现二列固定宽度也就很简单了,用p+CSS布局的代码如下:XHTML代码:左侧右侧CSS代码:#left{ width: 150px; height: 300px; background- color:#EEEEEE; border: 1px solid#999999; float:left;}#right{ width: 400px; height: 300px; background- color:#EEEEEE; border: 1px solid#999999; float:left;} 5、二列固定宽度居中从一列固定宽度居中的布局方法中,我们就不难完成二列固定宽度居中了,可以使用一个居中的p作为容器,将二列分栏的p放置在容器中,从而就实现二列的居中显示。 p+CSS的代码如下: XHTML代码:左侧右侧CSS代码:#main{ width:554px; margin:0px auto;#left{ width: 150px; height: 300px; background- color:#EEEEEE; border: 1px solid#999999; float:left;}#right{ width: 400px; height: 300px; background- color:#EEEEEE; border: 1px solid#999999; float:left;}这里仅列举了一列、二列的布局方式,实际上三列、四列等多列的布局方式也和二列的布局方式的实现方法是一样的。事实上不管多么复杂的页面设计,在p+CSS网页布局中,均是以p为基础,通过一列、二列、三列这些基础的布局方式的相互组合与嵌套来实现复杂的布局。
p+CSS网页布局技巧:设置网页整体居中的css代码
以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用p+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已。
<style>
#layout{ width:778px; margin:0 auto; text-align:center;}
</style>
<p id="layout">标准之路www.aa25.cn</p>
请看这段代码,宽度为适合800×600分辨率浏览器的宽度,margin:0 auto;这句代码就是让居中了,意思是外边距上下设置为0,左右设为自动。这样它就居中了。
那么可能你要问了,text-align:center;为什么还要让内容居中呢?呵呵,别着急,这句是为了适应IE6以下版本的浏览器而加的,IE6以下对margin:0 auto;不能解析为居中,所以用这种方式来补救,以下在设计内容时再用 text-align:left;就可以了。
注:margin和padding的值的顺序为顺时针上右下左,如margin:1px 2px 3px 4px;还可以缩写为上下、左右,如本例,如果为margin:0px;则是各边都为0
提示:可以先修改部分代码后再运行
;
好了,关于css cursor属性和CSS样式cursor的问题到这里结束啦,希望可以解决您的问题哈!