文章分类 - CSS
摘要：CSS伪类是用来添加一些选择器的特殊效果。
阅读全文
摘要：CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。 Float（浮动），往往是用于图像，但它在布局时一样非常有用。 元素怎样浮动 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框
阅读全文
摘要：CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
阅读全文
摘要：隐藏元素 - display:none或visibility:hidden 隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。 visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占
阅读全文
摘要：position 属性指定了元素的定位类型。 position 属性的五个值： static relative fixed absolute sticky 共同配合5个属性 （static除外） 元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。
阅读全文
摘要：CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。
阅读全文
摘要：CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。
阅读全文
摘要：margin margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。 margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。 可能的值 值 说明 auto 设置浏览器边距。这样做的结果会依赖于浏览器 length 定义一个固定的margin（使
阅读全文
摘要：轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。
阅读全文
摘要：CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图
阅读全文
摘要：CSS 列表属性作用如下： 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 列表 在 HTML中，有两种类型的列表： 无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等） 有序列表 ol - 列表项的标记有数字或字母 使用 CSS，可以列出进一步的样式
阅读全文
摘要：不同的链接可以有不同的样式。 链接样式 链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。 特别的链接，可以有不同的样式，这取决于他们是什么状态。 这四个链接状态是： a:link - 正常，未访问过的链接 a:visited - 用户已访问过的链接 a:hover - 当用户鼠标放在链接上
阅读全文
摘要：CSS字体属性定义字体，加粗，大小，文字样式。 CSS字型 在CSS中，有两种类型的字体系列名称： 通用字体系列 - 拥有相似外观的字体系统组合（如 "Serif" 或 "Monospace"） 特定字体系列 - 一个特定的字体系列（如 "Times" 或 "Courier"） 字体系列 font-
阅读全文
摘要：文本颜色 颜色属性被用来设置文字的颜色。 颜色是通过CSS最经常的指定： 十六进制值 - 如: ＃FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 - 如: red 一个网页的背景颜色是指在主体内的选择： <!DOCTYPE html> <html> <head> <met
阅读全文
摘要：分组选择器 在样式表中有很多具有相同样式的元素。 h1 { color:green; } h2 { color:green; } p { color:green; } 为了尽量减少代码，你可以使用分组选择器。 每个选择器用逗号分隔。 在下面的例子中，我们对以上代码使用分组选择器： <!DOCTYPE
阅读全文
摘要：兄弟选择器选取所有指定元素之后的相邻兄弟元素。 设置同一父元素下的 p 元素之后的每一个 ul 元素的背景颜色： <!DOCTYPE html> <html> <head> <style> p~ul { background:#ff0000; } </style> </head> <body> <d
阅读全文
摘要：相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。 选择所有紧接着 元素之后的第一个 元素: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runo
阅读全文
摘要：子元素选择器 与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。 选择子元素 如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child sel
阅读全文
