xxxcyzyy的博客

一、CSS布局属性 Width:设置对象的宽度（width:45px）。 Height:设置对象的高度(Height:45px;)。 Background:设置对象的背景颜色、背景图像。    1.背景颜色      background:#09F;    2.背景图像      background:url(file:///C|/Users/Administrator/Desk

 所有CSS 尺寸 (Dimension)属性 属性 描述 height 设置元素的高度。 line-height 设置行高。 max-height 设置元素的最大高度。 max-width 设置元素的最大宽度。 min-height 设置元素的最小高度。 min-width 设置元素的最小宽度。

 display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。 隐藏元素 - display:none或visibility:hidden 隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。 visibility:hidden可以隐藏某个元素，但隐藏的

 Positioning(定位) CSS定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么。 元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。 他们也有不同的工作方式，这取决于定位方法. 有四种不同的定位方法。 Static 定位 HTML元素的默认值，即没有定位，元

 CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。 Float（浮动），往往是用于图像，但它在布局时一样非常有用。 元素怎样浮动 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 浮动元素之后的元素将围绕它。 浮动元素之前的元素将不会受到影响。 如果

 块元素对齐 块元素是一个元素，占用了全宽，前后都是换行符。 块元素的例子： 中心对齐,使用margin属性 块元素可以把左，右页边距设置为"自动"对齐。 Note: 在IE8中使用margin:auto属性无法正常工作，除非声明 !DOCTYPE margin属性可任意拆分为左，右页边距设置自动指定，结果都是出现居中元素： .center { margin-

 CSS 组合选择符 组合选择符说明了两个选择器直接的关系。 CSS组合选择符包括各种简单选择符的组合方式。 在 CSS3 中包含了四种组合方式: 后代选取器(以空格分隔)子元素选择器(以大于号分隔）相邻兄弟选择器（以加号分隔）普通兄弟选择器（以破折号分隔） 后代选取器 后代选取器匹配所有值得元素的后代元素。 以下实例选取所有 元素插入到 元

CSS - :first - child伪类 您可以使用 :first-child 伪类来选择元素的第一个子元素 注意：在IE8的之前版本必须声明 ，这样 :first-child 才能生效。 匹配第一个 元素 在下面的例子中，选择器匹配作为任何元素的第一个子元素的 元素： p:first-child { color:blue; } I am a

 :first-line 伪元素 "first-line" 伪元素用于向文本的首行设置特殊样式。 在下面的例子中，浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化： p:first-line { color:#ff0000; font-variant:small-caps; } 注意："first-line" 伪元素只能用于块级元素。

导航栏 熟练使用导航栏，对于任何网站都非常重要。 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。 导航栏=链接列表 作为标准的HTML基础一个导航栏是必须的 。在我们的例子中我们将建立一个标准的HTML列表导航栏。 导航条基本上是一个链接列表，所以使用 和 元素非常有意义 Home News Contact About 现在，让我们从列表

基本下拉菜单 当鼠标移动到指定元素上时，会出现下拉菜单。 .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-

 具有特定属性的HTML元素样式 具有特定属性的HTML元素样式不仅仅是class和id。 属性选择器 下面的例子是把包含标题（title）的所有元素变为蓝色： [title] { color:blue; } Will apply to: Hello world w3cschool Will not apply to: Hello! 属性和值选择器 下面的实例改变了标

div { text-align:center; /*中间对齐*/ font-size:30px; width:100px; /*宽度、行内高为100，圆角为50。刚好画出圆 */ line-height:100px; border-radius:50px; border:2px solid red; background:blue; } 属性 效果：

原文 本文讲解使用DIV+CSS布局最基本的内容，读完本文你讲会使用DIV+CSS进行简单的页面布局。 DIV+CSS布局中主要CSS属性介绍： Float:        Float属性是DIV+CSS布局中最基本也是最常用的属性，用于实现多列功能，我们知道标签默认一行只能显示一个，而使用Float属性可以实现一行显示多个div的功能，最直接解释方法就是能实现表格布局

原文 在使用div+css布局时，首先应该根据网页内容进行结构设计，仔细分析和规划你的页面结构，你可能得到类似这样的几块： 页面层容器、页面头部、标志和站点名称、站点导航(主菜单)、主页面内容、子菜单、搜索框、页脚(版权和有关法律声明)。 通常采用DIV元素来将这些结构定义出来，类似这样： 页面层容器 页面头部 页面主体 站点导航 子菜

 Grouping Selectors 在样式表中有很多具有相同样式的元素。 h1 { color:green; } h2 { color:green; } p { color:green; } 为了尽量减少代码，你可以使用分组选择器。 每个选择器用逗号分隔. 在下面的例子中，我们对以上代码使用分组选择器： h1,h2,p { color:g

 Padding（填充） 当元素的 Padding（填充）（内边距）被清除时，所"释放"的区域将会受到元素背景颜色的填充。 单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用，一旦改变一切都改变。 可能的值 值 说明 length 定义一个固定的填充(像素, pt, em,等) % 使用百分比值定义一个填充

 Margin margin清除周围的元素（外边框）的区域。margin没有背景颜色，是完全透明的 margin可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性。 可能的值 值 说明 auto 设置浏览器边距。 这样做的结果会依赖于浏览器 length 定义一个固定的margin（使用像素，pt，em等） % 定义一个

在使用div+css布局时，首先应该根据网页内容进行结构设计，仔细分析和规划你的页面结构，你可能得到类似这样的几块： 页面层容器、页面头部、标志和站点名称、站点导航(主菜单)、主页面内容、子菜单、搜索框、页脚(版权和有关法律声明)。 通常采用DIV元素来将这些结构定义出来，类似这样： 页面层容器 页面头部 页面主体 站点导航 子菜单 搜索框   页脚 -------

FFFFFF #DDDDDD #AAAAAA #888888 #666666 #444444 #000000 原文 http://www.cnblogs.com/axing/archive/2011/04/09/CSS.html

 一、常用属性 1、Height:设置DIV的高度；Width:设置DIV的宽度。 2、margin:用于设置DIV的外延边距，也就是到父容器的距离。margin:后面跟有四个距离分别为到父容器的上-右-下-左边的距离；    margin: [top][right][bottom][left].. 可以分别设置：margin-left:到父容器左边框的距离；margin-right:

 CSS 实例 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明: CSS 实例 CSS声明总是以分号(;)结束，声明组以大括号({})括起来: body {background-color:yellow;} h1 {font-size:36pt;} h2 {color:blue;} p {margin-left:50px;} --- body

 id 和 class 选择器 如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。 id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。 以下的样式规则应用于元素属性 id="para1": class 选择器 clas

 如何插入样式表 插入样式表的方法有三种: 外部样式表内部样式表内联样式 外部样式表 当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下， 你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部： ---- hr {color:sienna;} p {margin-left:2

 CSS 背景属性用于定义HTML元素的背景。 CSS 属性定义背影效果: background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position 背景颜色 background-color 属性定义了元素的背景颜色. 页面的背景颜色使用在body的选择器中: body

Text Color 颜色属性被用来设置文字的颜色。 颜色是通过CSS最经常的指定： 十六进制值 - 如"＃FF0000"一个RGB值 - "RGB（255,0,0）"颜色的名称 - 如"red" body {color:blue;} h1 {color:#00ff00;} h2 {color:rgb(255,0,0);} 对于W3C标准的CSS：如果你定义了颜色属性

 CSS字体属性定义字体，加粗，大小，文字样式。 CSS字型 在CSS中，有两种类型的字体系列名称： 通用字体系列 - 拥有相似外观的字体系统组合（如 "Serif" 或 "Monospace"）特定字体系列 - 一个特定的字体系列（如 "Times" 或 "Courier"） 字体系列 font-family 属性设置文本的字体系列。 font-family 属性应该设

 链接样式 链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。 特别的链接，可以有不同的样式，这取决于他们是什么状态。 这四个链接状态是： a:link - 正常，未访问过的链接a:visited - 用户已访问过的链接a:hover - 当用户鼠标放在链接上时a:active - 链接被点击的那一刻 a:link {color:#FF0000;} /*

 CSS列表属性作用如下： 设置不同的列表项标记为有序列表设置不同的列表项标记为无序列表设置列表项标记为图像 列表 在HTML中，有两种类型的列表： 无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）有序列表 - 列表项的标记有数字或字母 使用CSS，可以列出进一步的样式，并可用图像作列表项标记。 不同的列表项标记 list-style-type属性指定列表项标记

 表格边框 指定CSS表格边框，使用border属性。 下面的例子指定了一个表格的Th和TD元素的黑色边框： table, th, td { border: 1px solid black; } 请注意，在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。 为了显示一个表的单个边框，使用 border-collapse属性。 table { bo

 边框样式 边框样式属性指定要显示什么样的边界。 border-style属性用来定义边框的样式 border-style 值: none: 默认无边框 p.none {border-style:none;} p.dotted {border-style:dotted;} p.dashed {border-style:dashed;} p.solid {border-st

 轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。 轮廓（outline）属性指定了样式，颜色和外边框的宽度。 CSS 轮廓（outline） 轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。 CSS outline 属性规定元素轮廓的样式、颜色和宽度。 所有CSS 轮廓（outline）属性

给div设置background-image时，搞了半天图片不显示，最后找出原因，是因为url的path不对， 正确的写法是相对于css文件的路径，而不是相对于页面的路径。 background-image:url(path);