css基础总汇

来源：互联网发布：mac os 10.9 iso镜像编辑：程序博客网时间：2024/06/07 01:24

1.层叠次序

css style的执行顺序是怎么样的呢？这个算是很基础的css问题了，一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

浏览器缺省设置
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）

2.背景效果:

background-color：背景颜色
background-image：url（。。）背景图像
background-repeat：no-repeat/repeat-x/repeat-y 设置背景图像是否及如何重复
background-attachment:scroll(默认)/fixed 背景图像是否固定或者随着页面的其余部分滚动
background-position：设置背景图像的起始位置

背景颜色的简写属性为 "background":

例如：body {background:#ffffff url('img_tree.png') no-repeat right top;}

当使用简写属性时，属性值的顺序为：

background-color
background-image
background-repeat
background-attachment
background-position

3.文本属性

当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

属性描述color设置文本颜色direction设置文本方向。letter-spacing设置字符间距line-height设置行高text-align对齐元素中的文本text-decoration向文本添加修饰text-indent缩进元素中文本的首行text-shadow设置文本阴影text-transform控制元素中的字母unicode-bidi设置或返回文本是否被重写 vertical-align设置元素的垂直对齐white-space设置元素中空白的处理方式word-spacing设置字间距

4.字体属性

Property描述font在一个声明中设置所有的字体属性font-family指定文本的字体系列font-size指定文本的字体大小font-style指定文本的字体样式font-variant以小型大写字体或者正常字体显示文本。font-weight指定字体的粗细。

5.链接样式

四个链接状态是：

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

6.列表属性

属性描述list-style简写属性。用于把所有用于列表的属性设置于一个声明中list-style-image将图象设置为列表项标志。list-style-position设置列表中列表项标志的位置。list-style-type设置列表项标志的类型。

7. 盒子模型(Box Model)

不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

8.border-style 值

none: 默认无边框

dotted: dotted:定义一个点线框

dashed: 定义一个虚线框

solid: 定义实线边界

double: 定义两个边界。两个边界的宽度和border-width的值相同

groove: 定义3D沟槽边界。效果取决于边界的颜色值

ridge: 定义3D脊边界。效果取决于边界的颜色值

inset:定义一个3D的嵌入边框。效果取决于边界的颜色值

outset: 定义一个3D突出边框。效果取决于边界的颜色值

9.CSS Outlines

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

轮廓（outline）属性指定了样式，颜色和外边框的宽度。

10.CSS Display(显示) 与 Visibility（可见性）

1.display属性设置一个元素应如何显示,(inline,block,inline-block，none)
2.visibility属性指定一个元素应可见还是隐藏(hidden)
注意：隐藏元素时，display:none隐藏的元素不会占用任何空间，visibility:hidden隐藏的元素仍需占用与未隐藏之前一样的空间

11.CSS Positioning(定位)

Static 定位：HTML元素的默认值，即没有定位，元素出现在正常的流中。

Fixed 定位：元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。

注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持.

Fixed定位使元素的位置与文档流无关，因此不占据空间。

Fixed定位的元素和其他元素重叠。

Relative 定位：相对定位元素的定位是相对其正常位置。

Absolute 定位：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>

12.重叠的元素

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素，z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面），一个元素可以有正数或负数的堆叠顺序。

overflow 属性（hidden/scroll/visible/auto/inherit）规定当内容溢出元素框时发生的事情.

clip剪辑一个绝对定位的元素cursor 显示光标移动到指定的类型url/auto/crosshair/default/pointer/move/e-resize/ne-resize/nw-resize/n-resize/se-resize/sw-resize/s-resize/w-resize/text/wait/help

清除浮动 - 使用 clear

13.组合选择符

在 CSS3 中包含了四种组合方式:

1.后代（儿孙）选取器(以空格分隔)
2.子元素(直接后代-儿子）选择器(以大于号分隔）
3.相邻兄弟（后面一个兄弟）选择器（以加号分隔）
4.普通兄弟（后面所有兄弟）选择器（以破折号分隔）

14.CSS 伪类(Pseudo-classes)

伪类的语法：

selector:pseudo-class {property:value;}

CSS类也可以使用伪类：

selector.class:pseudo-class {property:value;}

注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

注意：伪类的名称不区分大小写。

所有CSS伪类/元素

选择器示例示例说明:checkedinput:checked选择所有选中的表单元素:disabledinput:disabled选择所有禁用的表单元素:emptyp:empty选择所有没有子元素的p元素:enabledinput:enabled选择所有启用的表单元素:first-of-typep:first-of-type选择每个父元素是p元素的第一个p子元素:in-rangeinput:in-range选择元素指定范围内的值:invalidinput:invalid选择所有无效的元素:last-childp:last-child选择所有p元素的最后一个子元素:last-of-typep:last-of-type选择每个p元素是其母元素的最后一个p元素:not(selector):not(p)选择所有p以外的元素:nth-child(n)p:nth-child(2)选择所有p元素的第二个子元素:nth-last-child(n)p:nth-last-child(2)选择所有p元素倒数的第二个子元素:nth-last-of-type(n)p:nth-last-of-type(2)选择所有p元素倒数的第二个为p的子元素:nth-of-type(n)p:nth-of-type(2)选择所有p元素第二个为p的子元素:only-of-typep:only-of-type选择所有仅有一个子元素为p的元素:only-childp:only-child选择所有仅有一个子元素的p元素:optionalinput:optional选择没有"required"的元素属性:out-of-rangeinput:out-of-range选择指定范围以外的值的元素属性:read-onlyinput:read-only选择只读属性的元素属性:read-writeinput:read-write选择没有只读属性的元素属性:requiredinput:required选择有"required"属性指定的元素属性:rootroot选择文档的根元素:target#news:target选择当前活动#news元素(点击URL包含锚的名字):validinput:valid选择所有有效值的属性:linka:link选择所有未访问链接:visiteda:visited选择所有访问过的链接:activea:active选择正在活动链接:hovera:hover把鼠标放在链接上的状态:focusinput:focus选择元素输入后具有焦点:first-letterp:first-letter选择每个 元素的第一个字母:first-linep:first-line选择每个 元素的第一行:first-childp:first-child选择器匹配属于任意元素的第一个子元素的 元素:beforep:before在每个元素之前插入内容:afterp:after在每个元素之后插入内容:lang(language)p:lang(it)为元素的lang属性选择一个开始值

15.CSS 伪元素

伪元素的语法：

selector:pseudo-element {property:value;}

CSS类也可以使用伪元素：

selector.class:pseudo-element {property:value;}

display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度

display: inline-block，元素为内联，元素内容为块元素

16.CSS 图像透明/不透明

img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}

IE9，Firefox，Chrome，Opera，和Safari浏览器使用透明度属性可以将图像变的不透明。 Opacity属性值从0.0 - 1.0。值越小，使得元素更加透明。

IE8和早期版本使用滤镜：alpha（opacity= x）。 x可以采取的值是从0 - 100。较低的值，使得元素更加透明。

17.CSS 属性选择器

属性选择器[title]{color:blue;}

属性和值选择器[title=runoob]{border:5px solid green;}

属性和值的选择器 - 多值（包含hello值的属性）[title~=hello]{color:blue;}/[lang|=en]{color:blue;}

表单样式input[type="text"]{width:150px;display:block;margin-bottom:10px;background-color:yellow;}

阅读全文

1 0