css基础

css标记中类名的第一个字符不能使用数字！

在用div时，如果内部有内容，一定要定义div的宽和高，不然定位内容时会出错的

一切皆为框

div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。

如果元素中的内容超出了给定的宽度和高度属性，overflow属性可以确定是否显示滚动条等行为。

overflow（hidden（超出的那部分隐藏）、scroll（出现滚动条）、visible（默认，显示超出的部分，不出现滚动条）、auto（自动））

td.fancy {

color: #f60;

background: #666;

}

在上面的例子中，类名为 fancy 的表格单元将是带有灰色背景的橙色。

<td class="fancy">

对带有指定属性的 HTML 元素设置样式。

下面的例子为带有 title 属性的所有元素设置样式：

[title]

{

color:red;

}

display:block就是将元素显示为块级元素.css样式表中可以标记表单（常用的有 block、inline）

css背景属性

background 简写属性，作用是将背景属性设置在一个声明中。

background-attachment 背景图像是否固定或者随着页面的其余部分滚动。

background-color 设置元素的背景颜色。

background-image 把图像设置为背景。

background-position 设置背景图像的起始位置。

background-repeat 设置背景图像是否及如何重复。

text-align:center 与 <CENTER>

您可能会认为 text-align:center 与 <CENTER> 元素的作用一样，但实际上二者大不相同。

<CENTER> 不仅影响文本，还会把整个元素居中。text-align 不会控制元素的对齐，而只影响内部内容。元素本身不会从一段移到另一端，只是其中的文本受影响。

css文本：

text-indent 首行缩进

text-align 水平对齐方式（left、center、right）

word-spacing 改变字（单词）之间的间隔，默认值normal和设置值0一样

letter-spacing 字母间的间隔

text-transform 文本的大小写（none 、uppercase、lowercase、capitalize（首字母大写））

text-decoration 文本装饰（none、underline、overline、line-through、blink（闪烁））

white-space 处理空白符默认normal

下面的表格总结了 white-space 属性的行为：

值 空白符 换行符 自动换行

pre-line 合并 保留 允许

normal 合并 忽略 允许

nowrap 合并 忽略 不允许

pre 保留 保留 不允许

pre-wrap 保留 保留 允许

css文本属性总结、

CSS 文本属性

属性 描述

color 设置文本颜色

direction 设置文本方向。

line-height 设置行高。

letter-spacing 设置字符间距。

text-align 对齐元素中的文本。

text-decoration 向文本添加修饰。

text-indent 缩进元素中文本的首行。

text-shadow 设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。

text-transform 控制元素中的字母。

unicode-bidi 设置文本方向。

white-space 设置元素中空白的处理方式。

word-spacing 设置字间距。

css字体系列

font-family 文本的字体系列

font-style 规定斜体文本（norma、italic（斜体）、oblique（倾斜））

font-variant 设定小型大写字母

font-weight 文本的粗细（normal、bold、bolder、100-900-九级）

font-size 文本的大小

CSS 字体属性

属性 描述

font 简写属性。作用是把所有针对字体的属性设置在一个声明中。

font-family 设置字体系列。

font-size 设置字体的尺寸。

font-size-adjust 当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。）

font-stretch 对字体进行水平拉伸。（CSS2.1 已删除该属性。）

font-style 设置字体风格。

font-variant 以小型大写字体或者正常字体显示文本。

font-weight 设置字体的粗细。

css连接

a:link-普通的、未被访问过的

a:visited -已经访问过的

a:hover-鼠标悬浮连接上方

a:active-连接被点击时

注意：a:hover 必须位于 a:link 和 a:visited 之后

a:active 必须位于 a:hover 之后

background-color可以规定连接的背景色

a:link {background-color:#B2FF99;}

css列表

CSS 列表属性(list)

属性 描述

list-style 简写属性。用于把所有用于列表的属性设置于一个声明中。

list-style-image 将图象设置为列表项标志。

list-style-position 设置列表中列表项标志的位置。

list-style-type 设置列表项标志的类型。

css表格

border 表格边框

table、th、td{

border:1px solid blue;

}

border-collapse 折叠边框（collapse）

width、height 宽和高

text-align 水平对齐方式（left、center、right）

vertical-align 垂直对齐方式（top、middle、bottom）

padding可以设置表格内容与边框的距离

td{

padding:15px;

}

下面的例子设置边框的颜色，以及 th 元素的文本和背景颜色：

table, td, th

{

border:1px solid green;

}

th

{

background-color:green;

color:white;

}

css 轮廓

outline

outline 在一个声明中设置所有的轮廓属性。 2

outline-color 设置轮廓的颜色。 2

outline-style 设置轮廓的样式。 2

outline-width 设置轮廓的宽度。

outline：green solid thin

css边框

如果希望显示某种边框，就必须设置边框样式，比如 solid 或 outset。

由于 border-style 的默认值是 none，如果没有声明样式，就相当于 border-style: none。因此，如果您希望边框出现，就必须声明一个边框样式。

border-style 边框的样式

border-top-style

border-right-style

border-bottom-style

border-left-style

也可以一块定义

p {border-style: solid solid solid none;}

border-width 边框宽度可以使用长度值和关键字（thin、medium、thick）

border-color 边框颜色 也可以定义四个单边样式

颜色值transparent 表示透明的边框

总结

CSS 边框属性

属性 描述

border 简写属性，用于把针对四个边的属性设置在一个声明。

border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。

border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。

border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。

border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。

border-bottom-color 设置元素的下边框的颜色。

border-bottom-style 设置元素的下边框的样式。

border-bottom-width 设置元素的下边框的宽度。

border-left 简写属性，用于把左边框的所有属性设置到一个声明中。

border-left-color 设置元素的左边框的颜色。

border-left-style 设置元素的左边框的样式。

border-left-width 设置元素的左边框的宽度。

border-right 简写属性，用于把右边框的所有属性设置到一个声明中。

border-right-color 设置元素的右边框的颜色。

border-right-style 设置元素的右边框的样式。

border-right-width 设置元素的右边框的宽度。

border-top 简写属性，用于把上边框的所有属性设置到一个声明中。

border-top-color 设置元素的上边框的颜色。

border-top-style 设置元素的上边框的样式。

border-top-width 设置元素的上边框的宽度。

外边距：

外边距合并：

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

在以下几种情况会发生合并

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并

假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并

css中的position属性（static、relative、absolute、fixed）

static（css样式表的内容对它毫无影响）

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative(相对于其原来的位置（在html中的位置）定位，与其他元素无关，可以覆盖其他元素，但保留原来的空间位置，)

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute（定位于其包含块，与它的包含块有关，与其他元素无关，可以覆盖其他元素，原来的空间消失）

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。

元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed（与absolute大致相似，主要区别是它定位于浏览器）

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

float （相对于html中的元素（普通流）好像不存在，浮动元素脱离了文档流，但仍然为它保留空间，所以常常围绕着浮动框）

clear 清除浮动，clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。

CSS 定位属性

CSS 定位属性允许你对元素进行定位。

属性 描述

position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。

top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。

right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。

bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。

left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。

overflow 设置当元素的内容溢出其区域时发生的事情。

clip 设置元素的形状。元素被剪入这个形状之中，然后显示出来。（clip:rect(0px 50px 200px 0px)）

vertical-align 设置元素的垂直对齐方式。

z-index 设置元素的堆叠顺序。

css 对齐

margin水平对齐：

margin-left:auto;

margin-right:auto;居中

position可以左右对齐

right：0px；

float 漂浮也可以左右对齐

float：left/right；

display:inline 的作用是设置对象做为行内元素显示，inline是内联对象的默认值

（ps:内联对象就是不自动产生换行的元素，比如span） 而我们一般用的div是块级元素，

默认display属性是block、但将div的display设置为inline的话，则多个div可以象span一样显示在一行了。

水平导航栏

有两种创建水平导航栏的方法。使用行内或浮动列表项。

两种方法都不错，但是如果您希望链接拥有相同的尺寸，就必须使用浮动方法。

css透明图片

opacity属性可以设置透明程度；0--1。

div img{
opacity:0.4;
}
div img:hover{
opacity:1;
}