www.baike369.com
百科369 > 网页制作 > CSS教程

CSS教程

CSS使用visibility属性显示和隐藏元素

CSS使用visibility属性显示和隐藏元素

当使用CSS的display属性来实现元素的显示和隐藏时,display属性值设置为none的元素不会占位,因此当其显示的时候,它后面的元素会发生移动,以便给它空间,而当它隐藏的时候,后面的元素又会来...

CSS使用浮动属性和边距设计3行3列定宽的布局实例

CSS使用浮动属性和边距设计3行3列定宽的布局实例

下面使用CSS的浮动属性和边距属性设计一个简单地3行3列并且是固定宽度的布局页面。实例设计步骤如下:1. 制作3行3列定宽布局的XHTML部分。源代码如下:2. 制作3行3列定宽布局的CSS部分。由于...

CSS使用display属性和:hover伪类显示或隐藏元素

CSS使用display属性和:hover伪类显示或隐藏元素

在CSS中,使用display属性和:hover伪类,可以实现当鼠标指向某个元素的时候显示另外某些元素。实例源代码如下:显示效果如下:利用<a>元素的:hover伪类,将原本不显示的<span>的di...

CSS使用百分比值设置外边距

CSS使用百分比值设置外边距

CSS使用margin属性设置外边距时,如果使用百分比值,则是以元素的包含块的宽度为基数进行计算的。不论是上下外边距还是左右外边距,都是以元素的包含块的宽度为基数的,与元素包含块的高度无关。实例源代码...

CSS外边距的重叠

CSS外边距的重叠

CSS中,元素之间垂直方向的外边距有可能会发生重叠。主要有下面几种情况:1. CSS常规流向的块级元素一个文档中的元素,可以看作很多漂浮在河面(文档流)上的盒子,这些盒子顺序排列并各自占据了一定的空间...

CSS设置行内元素的外边距

CSS设置行内元素的外边距

CSS中,垂直方向的外边距对于非替换的行内元素无效(例如<a>、<em>)。这些行内元素垂直方向的距离由行高决定,而不是由元素自身的外边距决定。替换元素的上下外边距有效。实例源代码如下:显示效果如下:...

CSS文字链接的装饰效果

CSS文字链接的装饰效果

为了给访客一个醒目的提示,设计者经常会为页面中带链接的文字设计出特别的样式,以便与普通的文本内容区分开。最常用的方法是为带链接的文字设定特殊的颜色与下划线。而利用边框,可以将链接文字设计出比较有趣的效...

CSS设置行内元素的边框

CSS设置行内元素的边框

在CSS中,使用border属性同样可以设置行内元素的4个方向的边框。实例CSS行内元素的边框的一个实例。源代码如下:显示效果如下:从上图中可以看出,strong元素虽然设置了行高为5em,但是其边框...

CSS使用百分比值设置内边距

CSS使用百分比值设置内边距

CSS使用padding属性设置内边距时,如果使用百分比值,则是以包含块的宽度为基数的,并且百分比值不能为负值。不论是上下内边距还是左右内边距,都以包含块的宽度为基数,而与包含块的高度无关。实例CSS...

CSS内边距、宽度和高度

CSS内边距、宽度和高度

padding属性设置的内边距(补白)是指边框内边到内容边的距离,内边距不包含在width属性或者height属性之内。同时,对行内元素设置内边距也有效果。实例CSS关于内边距、宽度和高度的一个实例。...

CSS设置行内元素的高度

CSS设置行内元素的高度

height属性对于非替换的行内元素无效,非替换行内元素的框高度是由行高决定的。而对于替换元素,如<img>和<input>等,height属性是有效的。同样,CSS的height属性高于<img>标...

CSS长度和百分比

CSS长度和百分比

在CSS中,长度值可以是具体的像素值,也可以是em值或者其它合法的值。例如:在CSS 2中,宽度的百分比值的基数为元素包含块的宽度。而在CSS 1中则是其父元素的内容框宽度。实例CSS中长度和百分比的...

CSS视口与包含块

CSS视口与包含块

指的是浏览器窗口中用来显示网页的区域。以桌面电脑的浏览器来说,视口就是浏览器窗口除去标题栏,菜单栏,地址栏,状态栏等等浏览器的“周边”的东西后剩余的区域。如下图所示:用户通过视口浏览文档。当视口尺寸改...

CSS设置行内元素的宽度

CSS设置行内元素的宽度

块级元素生成块级框(block box);行内元素生成行内框(inline box)。1. 不可替换的行内元素(如<a>和<span>等)的宽度是其内容经过浏览器解释后实际的宽度,而不能通过设定wid...

CSS替换元素、不可替换元素和显示元素

(X)HTML元素是文档结构的基础。在CSS中解释为每个元素生成了一个包含了元素内容的框(box,也译为“盒子”)。但是不同的元素显示的方式会有所不同,例如<div>和<span>就不同,<stron...

Copyright© 2011-2016 www.baike369.com All Rights Reserved