css常识

字体

font                                允许将下面的多个特性组合成一个特性

font-family                        指定所用的字体族，必须已经安装该字体，如serif，sans-serif

font-size                          字体的大小

绝对大小：xx-small x-small small medium large x-large xx-large

相对大小：smaller larger

长度：px，pt…

百分比：相对于父元素的，

 

font-size-adjust           可以用于修改字体的字符大小宽高比

font-stretch                    可以用于控制字体中实际字母的宽度（而不是它们之间的空间）

font-style                      指定字体是否是正常的，斜体或者倾斜的

normal italic (斜体)   oblique

 

font-variant                    指定字体是否是正常的或者小型大写字母

normal, small-caps（smallcaps类似大写字母的较小版本）

 

font-weight                     指定字体是否是正常的，加粗，或者比包含元素更粗

normal，bold，bolder，lighter，100-900

 

文本

color                                指定文本的颜色

十六进制编码或者颜色名

 

direction                              指定文本的方向

类似与dir属性，它用于指定文本流动的方向，

Ltr：文本的方向从左到右

Rtl：文本的方向从右到左

Inherit：文本的方向与它的父元素相同

 

 

letter-spacing                     控制字母间的宽度

控制打印设计人员所谓的字间距（字母间的距离）

normal

或者一种长度单位

 

word-spacing         控制每个单词间的空间量

单词之间的距离，它的值应该是一种单位

 

 

text-align                             指定包含元素内的文本的对齐方式

left： 将文本与包含它的元素左边框对齐

right：将文本于包含它的元素右边框对齐

center：将文本居中放置在包含它的元素中间

justify：将文本宽度扩展为包含它的元素的整个宽度

 

 

text-decoration                 指定文本是否具有下划线，上划线，删除线或闪烁

underline：在内容下方添加一条线

overline：在内容顶部添加一条线

line-through：类似于删除线文本，使用一条线穿越文本中间，

blink：创建闪烁的文本

 

 

text-indent                          指定文本相对于左边框的缩近距离

可用于缩进元素文本的第一行

Text-indent:3em;

 

text-shadow                       指定文本具有阴影

 

text-transform        指定元素的内容全部为大写，全部小写，或首字大写

none：不发生任何改变

capitalize：每个单词的第一个字母大写

uppercase：元素的整个内容都大写

lowercase：元素的整个内容都小写

 

unicode-bidi            用于创建双向文本

white-space            指定空白是否应当被折叠，保留或者不能换行

 

文本伪类

first-letter：可用与仅为元素的第一个字母指定规则，该伪类通常用于杂志或书籍中的新页面的第一个字符

如:

p.pageOne:first-letter{font-size:45px;}

 

first-line：能够将段落的第一行与该段落剩余部分不同的方式进行显示

如:

p.pageOne:first-line{font-weight:bold;};

 

 

背景

Background                                                                                          简写形式，指定下面所有的特性

 

background-attachment                                                                  指示背景图像应该固定在页面的某个位置，并且指示当用户向下滚动页面时图像是否应当停留在该位置

该特性可用于指定称为水印的图像，这种设置的关键区别是，即使用户向上或向下滚动页面或者滚动页面中的所有其他元素，背景图像都将停留在相同的位置，background-attchment特性可以采用俩个值

Fixed                  用户滚动页面时图像不会移动

Scroll                  图像停留在页面背景上的相同位置处，如果用户向上或者向下滚动页面，则图像也随之移动

 

background-color                                                                               指定一种颜色作为页面或框的背景色，当为body设置该特性，该特性将影响整个文档，当该特性用于其他任何元素时，它将在为该元素创建的框的边框内使用指定的颜色

 

background-image                                                                             将一副图像设置为页面或者框的背景，background-image特性将重写background-color特性，应该图片加载比较缓慢,防止图片无法加载

background-image：url(“…”);

 

background-position                                                                          指示图像应当定位在浏览器窗口或者包含的框的特定位置处

x% y%   沿着x轴和y轴的百分比  父元素的百分比

xy               沿着x和y轴的绝对长度

left            在页面或者包含元素的左边显示

right          在页面或者包含元素的右边显示

center      在页面或者包含元素的中间显示

top           

bottom

 

 

 

 

background-repeat                                                                            将一副图像设置为页面或者框的背景，默认情况下，background-image特性会多次重复以铺满整个页面，如果不希望图像在页面背景中多次重复，可以使用background-repeat特性

repeat                                           图像可以多次重复以覆盖整个页面

repeat-x                                        图像将在页面水平方向多次重复

repeat-y                                        图像将在页面垂直方向多次重复

no-repeat                                     图像仅显示一次

 

 

边框

border

 

border-color                                          边框的颜色

 

border-style                                           边框应该是实线，虚线，或双线，或者其他值

none：没用边框（等于border-width：0）

solid：单条实线组成

dotted：一系列点组成

dashed：一系列短线组成

double：由俩条实线组成

groove：看上去如果雕刻进页面中

ridge：    与groove相反

inset：如同嵌入页面

outset：如同位于画布之外

hidden：与none相同，但是对于表元素存在边框冲突解决方法

 

 

border-width                                        边框的宽度

该值不能是一个百分比，必须是一个长度或者下面的值之一

thin

medium

thick

 

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

 

页边空白

margin                                                    框之间的距离，不会被继承

这个值可以是长度，百分比，或者inherit，意义与padding相同

 

 

margin-bottom

margin-left

margin-right

margin-top

 

 

内边距

padding                                                  指定元素的内容和它的边框之间的空间量，不会被继承

这个值可以是长度，百分比，或者单词inherit，

如果是inherit，则元素的内边距与其父元素相同

前面提到过，可以为元素的内边距设置百分数值。百分数值是相对于其父元素的width 计算的，这一点与外边距一样。所以，如果父元素的width 改变，它们也会改变。上下内边距与左右内边距一致；即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度，父元素的width的值越大，那么百分比越大

 

padding-bottom

padding-top

padding-left

padding-right

 

 

容积

height：                                       设置框的高度

height特性和width特性可用于设置框的高度和宽度，它们能够采用的值包括长度，百分比，或者auto，默认auto

 

line-height                                    文本行之间的空间（行距）

max-height                                   设置框的最大高度

min-height                                    设置框的最小高度

 

width

max-width

min-width

 

定位

top

bottom

left

right

clip

overflow                                        当控制框的大小时，希望框中容纳的内容需要的空间可能多于允许该框具有的空间，overflow用于处理这种情况

hidden    超出框的内容被隐藏

scroll              框被赋予滚动栏

 

 

 

vertical-align                    控制内联元素在包含元素内的垂直位置

baseline：所有内容都与父元素的基线对齐

sub：使元素成为下标，对于图像，它的顶部应当与基线对齐，对于文本，字体主体的顶部应当与基线对齐

super：使元素成为上标，对于图像，它的底部应当与字体的顶部对齐，对于文本，下行字母的底部应当与字体主体的顶部对齐

top：文本的顶部和图像的顶部应当与该行中最高 元素 顶部对齐

text-top：文本的顶部和图像的顶部应当与该行中最高 文本 的顶部对齐

middle：元素的垂直中点应当与父元素的垂直中点对齐

bottom：文本的底部和图像的底部应当与该行最低 元素 的底部对齐

text-bottom：文本的底部和图像的底部应当与该行中最低的 文本 底部对齐

 

 

 

                  

 

外边框   外边框与边框类似，但是外边框不占用空间，也不必是矩形

Outline                                                    简写

outline-color                                          指定外边框的颜色

与border-color类似

outline-style                                          样式

与border-style类似

 

outline-width                                        宽度

长度或者thid，medium，thick

 

表

border-collapse                                              该特性指示浏览器是应当控制相互接触的俩个相邻边框的外观，还是让每个单元格维持自己的样式

collapse                                                            水平边框将折叠，垂直边框则互相邻接，

separate                                                          遵守独立的规则，并且可使用一些不同的特性来进一步控制

 

 

border-spacing                                               每个单元格之间应该具有的宽度，它可以采用一个或俩个值，这些值当是长度单位

如果提供一个值，则该值同时应用于垂直和水平边框

如果提供俩个值，此时第一个值用于水平的间隔，第二个用于垂直间隔

 

 

 

caption-side                                                    指示标题应当显示在表的那一边，指定caption元素的内容相对于表的放置位置，

top                      标题出现在表的上方(默认)

bottom              标题出现在表的下方

right                   标题出现在表的右边

left                      标题出现在表的左边

caption

｛

Caption-side：bottom；

｝

 

 

 

empty-cells                                                     指定单元格为空时是否应当显示边框

show                  即使单元格为空，也会显示边框

hide                    如果单元格为空，隐藏边框

inherit                边框将服从包含它的表的规则

 

 

table-layout                                                    该特性允许浏览器加速表的布局，方式是浏览器使用遇到的第一个宽度特性作为列的剩余部分的宽度，而不是必须加载整个表后才显示它

fixed                   浏览器将利用为某列指定的第一个宽度来计算布局（前提是已经给出了该宽度），并使用该宽度计算该列中所有其他单元格的宽度，

auto                   浏览器在显示表之前查看每一个单元格，然后基于所有单元格的设置计算表的大小，这个方法显示慢，但是如果不知道没列的确切大小，则非常有用，这是默认方式

inherit                将服从包含它的表的规则

 

 

 

 

列表和标记符                                               ul和li  或者ol和li

list-style                                                           下面三个的简写

list-style-image                                              用一幅图像作为标记符

指定一副图像作为项目符号样式，如果图像无法显示，则只显示一个圆点，如果使用嵌套列表，则该特性的值将继承它的父元素，如果不希望继承，可以赋值none

 

 

 

list-style-position                                           指定列表中的较长项是否占有多行文本，如果占用多行文本，则指定换到的第二行是应该与第一行的文本对齐还是从标记符起始位置的下方开始

指示标记符应该应当出现在项目列表的框的内部还是外部

Inside                 如果文本超出一行，则换行的文本将位于标记符的下方

Outside              如果文本超出一行，则换行的文本将与第一行文本的起始位置对齐

 

 

list-style-type                                                  可用于控制标记符的形状或外观

无序表

none                   没用标记符

disc                     填充的圆（默认）

circle                  空心圆

square               填充的正方形

 

对于有序表

Decimal             数值1，2，3，4，5

Decimal-leading-zero       数值，在前面加0，01，02，03

Lower-alpha     小写字母a，b，c

Upper-alpha     大写字母

Lower-roman   小写罗马字符I ii

Upper-roman   大写罗马字符

 

 

 

 

marker-offset  指定标记符与文本之间的距离

 

 

 

 

生成的内容

Content                                         content特性用于：before和：after伪元素中时，它指示那些内容应当 添加到文档中,取值如下

字符串，url（能够指向包含此处的图像，文本文件或者html文件），计数器（用于页面中元素的编号计数器），atrr（x）该元素附带的x属性的值，open-quote（插入适当的左双引号），close-quote（插入适当的右双引号），no-open-quote（不实用任何左双引号），no-close-quote（不使用右双引号）

 

counter-increment                     计数器加1

counter-reset                              初始化计数器，如下

body

{

Counter-reset:chapter;

Counter-reset:section;

}

H1:before

{

Content:”chapter ” counter(chapter) “:”; //使用计数器chapter

}

H1:

{

Counter-increment:chapter; //每次遇到h1就让chapter 加1

Counter-reset:section;                       //初始化section

}

 

 

 

 

 

quotes

 

分类

                           

Cursor                                            用于指示显示应该给用户的鼠标光标类型，当使用图像作为表单上的提交按钮时通常实线这个特性，

Auto                   光标的形状取决于它所悬停的上下文区域

Crosshair         显示十字准线或者加号

Default              通常显示箭头

Pointer              显示指示方向的手

Move                 显示握着的手，表示正在拖放DHTML

eresize               表示可以移动到某条边，例如用鼠标伸展图片的框，则se-resize光标用于指示从框的东南角开始移动

ne-resize

nw-resize

n-resize

se-resize

sw-resize

s-resize

w-resize

text                    显示竖线I

wait                    显示沙漏

help                    显示问号或者气球，表示鼠标停留在帮助按钮上

<url>                  光标图像文件的来源

 

 

 

 

Display                        将元素强制为与用户期望类型不同的框，

Block，inline（内联框），none，表面不显示框，并且对页面布局不起任何作用

visibility                       用于隐藏框，使其不可见，但是框仍然会影响页面的布局，

visible                 想用户显示框和它的内容

hidden               框和它的内容不可见，仍然影响页面的布局

collapse             该值仅用于动态的表列和行效果，

在源代码中仍然包含不可见的内容

 

 

Float                                      可以将元素排除在普通流之外，并且尽可能地放置在包含框的左边或者右边，但是是在包含框的内边距之内，该元素的垂直页边空白不会与上下放元素的页边空白发生折叠，如果普通流中的块框一样，浮动框将与包含框的顶部对齐

为了指示框浮动在包含框的左边或者右边，可以设置float属性

Left           框浮动在包含元素的左边，而包含元素的内容将流动到它的右边

Right                                              右边，而包含元素的内容将流动到它的左边

None         框不浮动，将位于其在普通流中的位置处

Inherit      框将采用与它包含元素相同的特性

指定float特性之后，也必须设置width特性，用于指示浮动框占用包含框的宽度，否则，浮动框将自动占用100%的包含框宽度，不为环绕它的其他内容留下任何空间，从而使其类似于块级元素

 

Clear

当使用浮动框时，内容可围绕浮动元素进行布局，但是，开发人员可能不希望发生这种请款，他们宁愿浮动元素的左边没用任何内容，并且将包围内容推到浮动元素下方，

Left           具有clear特性的元素的内容将从浮动元素的左边清除（它不会出现在浮动元素的左边）

Right    具有clear特性的元素的内容将从浮动元素的右边清除（它不会出现在浮动元素的右边）

Both          具有以上俩个特性

None         允许在任意一边浮动

 

 

        

Position                                为框指定一个位置

Static                 该值的功能与普通流相同，并且是默认值

Relative             框的位置可以与它在普通流中的位置有所偏移

Absolute            框被精确地定位在包含它的元素的位置中，方式是使用从包含元素的左上角开始的x和y的坐标

Fixed                  位置从一个固定点开始计算，对于浏览器，这个点是浏览器窗口的左上角，如果用户滚动窗口，不回改变该位置

 

框偏移特性

当框具有一个position特性并且该特性是relative，absolute或fixed时，则将同时使用框偏移特性来指示这些框的位置，可以采用长度，百分比或auto

Top            偏移位置从顶部开始

Right

Left

Bottom

相对定位（relative可能会出现重叠）

相对定位将元素相对于它在普通流中的位置进行定位，元素与它在普通流中的位置的偏移量由框偏移特性指定

p.two

{

Position:relative;

Left:40px;

Top:-40px;

}

如果值是绝对长度，可以为负值

 

 

绝对定位（absolute）

绝对定位将元素的内容从普通流中完全移除，并且可以固定该元素的位置

绝对定位的元素总是出现在相对定位的元素上方，，因为绝对定位的框被排除在普通流之外，即使俩个垂直边空白相遇，它们也不会产生折叠

 

固定位置（fixed）

这个值指定元素的内容不仅从普通流中完全移除，而且当用户向下滚动页面时框不移动

 

z-index

绝对定位元素具有重叠其他元素的趁势，当发生重叠时，默认的处理方式是第一个元素位置后面元素的下方，这称为堆叠上下文，如果具有一些绝对定位或者想的定位的框，可以使用z-index特性修改堆叠上下文来控制那些框出现在上方，z-index特性的值是一个int数值，数值越大，则元素的显示就会越接近顶部

 

 

 

伪类：

连接伪类

link                                                  用于一般状态的连接样式

visited                                            用于已经访问过的连接的样式

active                                             用于当前激活（单击）的连接的样式

hover                                             当鼠标指针悬停在连接上时的样式

 

如下使用

a：link

｛

｝

a:hover

｛

｝

 

：focus伪类与active伪类

Focus伪类可用于在元素获得焦点时将一些额外的规则与该元素相关联，而active伪类可用于当元素被激活（例如用户单击链接）时将更多的样式与这些元素相关联

如

Input：focus

｛

Outline：red thick solid；

｝

 

：before和：after伪类

使用：before和：after伪元素能够将文本添加到某个选择器中定义的单个或多个元素的每一个实例之前或之后，例如，下面的css规则将单词“you need”添加到附带class属性并且该属性值为abstract的<p>元素的每一个实例之前

p.abstract:after

{

content:“you need”;

color:red;

}

额外的规则

@import在当前的样式表中导入另外一个样式表，必须在样式表的起始位置

如下

@import “mystyle.css”

@import url(“mystyle.css”)

 

@charset指示样式表所使用的字符集

@charset “iso-8859-1”