CSS 伪类(Pseudo-classes) CSS伪类是用来添加一些选择器的特殊效果。 语法 伪类的语法： selector:pseudo-class {property:value;} CSS类也可以使用伪类： selector.class:pseudo-class {property:value;} anchor伪类 在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示 实例 a:link {color:#FF0000;} /* 未访问的链接 */ a:visited {color:#00FF00;} /* 已访问的链接 */ a:hover {color:#FF00FF;} /* 鼠标划过链接 */ a:active {color:#0000FF;} /* 已选中的链接 */ 注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。 注意： 在 CSS…
CSS Float(浮动) 什么是 CSS Float（浮动）？ CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。 Float（浮动），往往是用于图像，但它在布局时一样非常有用。 元素怎样浮动 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 浮动元素之后的元素将围绕它。 浮动元素之前的元素将不会受到影响。 如果图像是右浮动，下面的文本流将环绕在它左边： 实例 img { float:right; } 彼此相邻的浮动元素 如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。 在这里，我们对图片廊使用 float 属性： 实例 .thumbnail { float:left; width:110px; height:90px; margin:5px; } 清除浮动 – 使用 clear 元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。 clear 属性指定元素两侧不能出现浮动元素。 使用 clear 属性往文本中添加图片廊：…
CSS Positioning(定位) position 属性指定了元素的定位类型。 position 属性的四个值： static relative fixed absolute 元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。 static 定位 HTML元素的默认值，即没有定位，元素出现在正常的流中。 静态定位的元素不会受到 top, bottom, left, right影响。 fixed 定位 元素的位置相对于浏览器窗口是固定位置。 即使窗口是滚动的它也不会移动： 实例 p.pos_fixed { position:fixed; top:30px; right:5px; } 注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持. Fixed定位使元素的位置与文档流无关，因此不占据空间。 Fixed定位的元素和其他元素重叠。 relative 定位 相对定位元素的定位是相对其正常位置。 实例…
CSS Display(显示) 与 Visibility（可见性） display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。 Box 1 Box 2 Box 3 隐藏元素 – display:none或visibility:hidden 隐藏一个元素可以通过把display属性设置为”none”，或把visibility属性设置为”hidden”。但是请注意，这两种方法会产生不同的结果。 visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。 实例 h1.hidden {visibility:hidden;} display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。 实例 h1.hidden {display:none;} CSS Display – 块和内联元素 块元素是一个元素，占用了全部宽度，在前后都是换行符。 块元素的例子： <h1> <p> <div> 内联元素只需要必要的宽度，不强制换行。 内联元素的例子： <span> <a> 如何改变一个元素显示 可以更改内联元素和块元素，反之亦然，可以使页面看起来是以一种特定的方式组合，并仍然遵循web标准。 下面的示例把列表项显示为内联元素： 实例 li {display:inline;} 下面的示例把span元素作为块元素： 实例 span…
CSS 尺寸 (Dimension) CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。 更多实例 这个例子演示了如何设置不同元素的高度。 这个例子演示了如何使用百分比值设置元素的高度。 本例演示如何使用像素值来设置元素的宽度。 此示例演示如何设置元素的最大高度。 本例演示如何使用百分比值来设置元素的最大宽度。 此示例演示如何设置元素的最小高度。 这个例子演示了如何使用像素值设置元素的最小宽度。 所有CSS 尺寸 (Dimension)属性 属性 描述 height 设置元素的高度。 line-height 设置行高。 max-height 设置元素的最大高度。 max-width 设置元素的最大宽度。 min-height 设置元素的最小高度。 min-width 设置元素的最小宽度。 width 设置元素的宽度。
CSS 分组 和 嵌套 选择器 Grouping Selectors 在样式表中有很多具有相同样式的元素。 h1 { color:green; } h2 { color:green; } p { color:green; } 为了尽量减少代码，你可以使用分组选择器。 每个选择器用逗号分隔. 在下面的例子中，我们对以上代码使用分组选择器： 实例 h1,h2,p { color:green; } 嵌套选择器 它可能适用于选择器内部的选择器的样式。 在下面的例子设置了三个样式： 为所有p元素指定一个样式 为所有class=”marked”的元素指定一个样式 为所有class=”marked”元素内的p元素指定一个样式 实例 p { color:blue; text-align:center; } .marked { background-color:red; } .marked…
CSS Padding（填充） CSS Padding（填充）属性定义元素边框与元素内容之间的空间。 Padding（填充） 当元素的 Padding（填充）（内边距）被清除时，所”释放”的区域将会受到元素背景颜色的填充。 单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用，一旦改变一切都改变。 可能的值 值 说明 length 定义一个固定的填充(像素, pt, em,等) % 使用百分比值定义一个填充 填充- 单边内边距属性 在CSS中，它可以指定不同的侧面不同的填充： 实例 padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px; 填充 – 简写属性 为了缩短代码，它可以在一个属性中指定的所有填充属性。 这就是所谓的缩写属性。所有的填充属性的缩写属性是”padding”: 实例 padding:25px 50px; Padding属性，可以有一到四个值。 padding:25px 50px 75px 100px; 上填充为25px 右填充为50px 下填充为75px 左填充为100px padding:25px 50px 75px;…
CSS Margin(外边距) CSS Margin(外边距)属性定义元素周围的空间。 Margin margin清除周围的元素（外边框）的区域。margin没有背景颜色，是完全透明的 margin可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性。 可能的值 值 说明 auto 设置浏览器边距。这样做的结果会依赖于浏览器 length 定义一个固定的margin（使用像素，pt，em等） % 定义一个使用百分比的边距 Margin可以使用负值，重叠的内容。 Margin – 单边外边距属性 在CSS中，它可以指定不同的侧面不同的边距： 实例 margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; Margin – 简写属性 为了缩短代码，有可能使用一个属性中margin指定的所有边距属性。这就是所谓的缩写属性。 所有边距属性的缩写属性是”margin”: 实例 margin:100px 50px; margin属性可以有一到四个值。/p> margin:25px 50px 75px 100px; 上边距为25px 右边距为50px 下边距为75px 左边距为100px margin:25px 50px…
CSS 轮廓（outline） 轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。 轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。 轮廓（outline）实例 本例演示使用outline属性在元素周围画一条线。 本例演示如何设置轮廓的样式。 本例演示如何设置轮廓的颜色。 本例演示如何设置轮廓的宽度。 CSS 轮廓（outline） 轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。 CSS outline 属性规定元素轮廓的样式、颜色和宽度。 所有CSS 轮廓（outline）属性 “CSS” 列中的数字表示哪个CSS版本定义了该属性(CSS1 或者CSS2)。 属性 说明 值 CSS outline 在一个声明中设置所有的轮廓属性 outline-color outline-style outline-width inherit 2 outline-color 设置轮廓的颜色 color-name hex-number rgb-number invert inherit 2 outline-style 设置轮廓的样式 none dotted dashed solid…
CSS 边框 CSS 边框属性 CSS边框属性允许你指定一个元素边框的样式和颜色。 在四边都有边框 红色底部边框 圆角边框 左侧边框带宽度，颜色为蓝色 边框样式 边框样式属性指定要显示什么样的边界。 border-style属性用来定义边框的样式 border-style 值: none: 默认无边框 dotted: dotted:定义一个点线边框 dashed: 定义一个虚线边框 solid: 定义实线边框 double: 定义两个边框。 两个边框的宽度和 border-width 的值相同 groove: 定义3D沟槽边框。效果取决于边框的颜色值 ridge: 定义3D脊边框。效果取决于边框的颜色值 inset:定义一个3D的嵌入边框。效果取决于边框的颜色值 outset: 定义一个3D突出边框。 效果取决于边框的颜色值 尝试一下: 边框宽度 您可以通过 border-width 属性为边框指定宽度。 为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px,…